~singpolyma/post-part

18b771464c1d21f756b16c59482e1fa9c9cd37f7 — Stephen Paul Weber 3 years ago 22d2ed1
Audio triggers working
3 files changed, 54 insertions(+), 4 deletions(-)

M Main.purs
M Makefile
M index.slim
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]