3 files changed, 54 insertions(+), 4 deletions(-)

M Main.purs
M Makefile
M index.slim

@@ 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))

@@ 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

@@ 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]