M Main.purs => Main.purs +38 -3
@@ 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))
M Makefile => Makefile +1 -1
@@ 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
M index.slim => index.slim +15 -0
@@ 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]