From 18b771464c1d21f756b16c59482e1fa9c9cd37f7 Mon Sep 17 00:00:00 2001 From: Stephen Paul Weber Date: Tue, 29 Sep 2020 21:54:46 -0500 Subject: [PATCH] Audio triggers working --- Main.purs | 41 ++++++++++++++++++++++++++++++++++++++--- Makefile | 2 +- index.slim | 15 +++++++++++++++ 3 files changed, 54 insertions(+), 4 deletions(-) diff --git a/Main.purs b/Main.purs index e4406ca..2cb7d39 100644 --- a/Main.purs +++ b/Main.purs @@ -16,18 +16,25 @@ module Main where import Prelude +import Effect import Data.Maybe +import Data.Array import Debug.Trace -import Web.DOM.ParentNode (querySelector, QuerySelector(..)) +import Data.Foldable +import Data.Tuple (Tuple(..)) +import Data.Int as Int +import Web.DOM.ParentNode (querySelector, querySelectorAll, QuerySelector(..), ParentNode) import Web.DOM.Document as DOMDocument import Web.HTML.HTMLDocument as HTMLDocument import Web.HTML.HTMLElement as HTMLElement +import Web.HTML.HTMLMediaElement as HTMLMediaElement import Web.HTML (window) import Web.HTML.Event.EventTypes (load) import Web.UIEvent.MouseEvent as MouseEvent -import Web.UIEvent.MouseEvent.EventTypes (mousemove) +import Web.UIEvent.MouseEvent.EventTypes (mousemove, mouseout) import Web.HTML.Window as Window import Web.DOM.Element as Element +import Web.DOM.NodeList as NodeList import Web.Event.EventTarget (addEventListener, eventListener) import Partial.Unsafe (unsafePartial) import Web.CSSOM.ElementCSSInlineStyle as Style @@ -41,14 +48,42 @@ clipCircle el size x y = do style <- Style.style $ Style.fromHTMLElement el Style.setProperty style "clip-path" ("circle(" <> size <> " at " <> (show x) <> "px " <> (show y) <> "px)") +triggerSpot :: Partial => ParentNode -> Maybe Int -> Effect Unit +triggerSpot doc n = do + -- Just caption <- querySelector (QuerySelector $ "figure:nth-of-type(" <> show n <> ") > figcaption") doc + audio <- NodeList.toArray =<< querySelectorAll (QuerySelector $ "figure > audio") doc + traverse_ (\(Tuple i a) -> + if Just i == n then HTMLMediaElement.play a else HTMLMediaElement.load a + ) (zip (1..5) (mapMaybe (HTMLMediaElement.fromElement <=< Element.fromNode) audio)) + +triggerN width height x y = + case Tuple across down of + (Tuple 0 0) -> Just 1 + (Tuple 1 0) -> Just 2 + (Tuple 0 1) -> Just 3 + (Tuple 1 1) -> Just 4 + (Tuple 0 2) -> Just 5 + _ -> Nothing + where + across = Int.floor ((Int.toNumber x) * 2.0 / width) + down = Int.floor ((Int.toNumber y) * 3.0 / height) + main = unsafePartial $ do win <- window doc <- HTMLDocument.toParentNode <$> Window.document win addEventListener' load (Window.toEventTarget win) $ \_ -> do Just wallpaper <- querySelector (QuerySelector "#wallpaper") doc - Just img <- (HTMLElement.fromElement =<< _) <$> querySelector (QuerySelector "#wallpaper > img") doc + height <- Element.clientHeight wallpaper + width <- Element.clientWidth wallpaper + + Just img <- (HTMLElement.fromElement =<< _) <$> + querySelector (QuerySelector "#wallpaper > img") doc clipCircle img "0" 0 0 + addEventListener' mouseout (Element.toEventTarget wallpaper) $ \_ -> + triggerSpot doc Nothing + addEventListener' mousemove (Element.toEventTarget wallpaper) $ \e -> do let Just mouseEvent = MouseEvent.fromEvent e clipCircle img "10vw" (MouseEvent.offsetX mouseEvent) (MouseEvent.offsetY mouseEvent) + triggerSpot doc (triggerN width height (MouseEvent.offsetX mouseEvent) (MouseEvent.offsetY mouseEvent)) diff --git a/Makefile b/Makefile index badc345..a5e4090 100644 --- a/Makefile +++ b/Makefile @@ -5,7 +5,7 @@ all: index.html index.css index.js entr: ( ls *.slim *.scss *.purs *.dhall; find assets/ ) | entr make -index.html: index.slim assets/paras.txt +index.html: index.slim assets/paras.txt assets/audio/transcripts.txt /usr/share/doc/ruby-slim/examples/slimrb -p index.slim > $@ index.css: index.scss _font-face.scss diff --git a/index.slim b/index.slim index 4546fb6..2cd29ca 100644 --- a/index.slim +++ b/index.slim @@ -14,6 +14,7 @@ -# CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE. - paras = File.read("assets/paras.txt").lines +- transcripts = File.read("assets/audio/transcripts.txt").lines.map { |x| x.chomp.split("/") } doctype html html head @@ -42,6 +43,20 @@ html #wallpaper img src="assets/img/WALLPAPER-HIDDEN.png" alt="Wallpaper" + - (1..5).each do |n| + figure + figcaption + h1= transcripts[n-1].shift + p + - transcripts[n-1].each_with_index do |t, i| + - if i > 0 + br + = t + audio controls="controls" + source src="assets/audio/#{n}.opus" type="audio/ogg; codecs=opus" + source src="assets/audio/#{n}.mp3" type="audio/mpeg" + a href="assets/audio/#{n}.opus" listen + section#credits h1= paras[6] p= paras[7] -- 2.38.5