2 files changed, 38 insertions(+), 7 deletions(-)

M Main.purs
M spago.dhall

@@ 17,12 17,18 @@ module Main where
 
 import Prelude
 import Effect
+import Effect.Class
 import Data.Maybe
+import Data.Either
 import Data.Array
 import Debug.Trace
 import Data.Traversable
+import Math as Math
 import Data.Tuple (Tuple(..))
 import Data.Int as Int
+import Effect.Timer as Timer
+import Effect.Ref as Ref
+import Effect.Aff (Aff, Canceler(..), makeAff, launchAff_)
 import Web.DOM.ParentNode (querySelector, querySelectorAll, QuerySelector(..), ParentNode)
 import Web.DOM.Document as DOMDocument
 import Web.HTML.HTMLDocument as HTMLDocument


@@ 58,17 64,43 @@ getFigures parent = do
     ) figEls
   pure $ zip figEls audios
 
+fadeVolume :: Number -> Number -> HTMLMediaElement -> Aff Unit
+fadeVolume from to media =
+  makeAff $ \callback -> do
+    HTMLMediaElement.setVolume from media
+    tickRef <- Ref.new 1
+    intervalID <- Ref.new Nothing
+    (flip Ref.write intervalID =<< _) $ map Just $ Timer.setInterval 10 $ do
+      tick <- Ref.read tickRef
+      HTMLMediaElement.setVolume (from + swing (Int.toNumber tick / Int.toNumber ticks) * delta) media
+      tick <- Ref.modify (_ + 1) tickRef
+      when (tick == ticks) $ do
+        HTMLMediaElement.setVolume to media
+        traverse_ Timer.clearInterval =<< Ref.read intervalID
+        callback (Right unit)
+    pure $ Canceler $ const $ liftEffect $
+      traverse_ Timer.clearInterval =<< Ref.read intervalID
+  where
+  delta = to - from
+  ticks = 100
+  swing p = 0.5 - Math.cos (p * Math.pi) / 2.0
+
 triggerSpot :: ParentNode -> Maybe Int -> Effect Unit
 triggerSpot doc n = do
   figures <- getFigures doc
   traverse_ (\(Tuple i (Tuple figure audio)) -> do
     style <- Style.style (Style.fromHTMLElement figure)
+    paused <- HTMLMediaElement.paused audio
     if Just i == n then do
       Style.setProperty style "opacity" "1"
-      HTMLMediaElement.play audio
+      when paused $ do
+        launchAff_ $ fadeVolume 0.0 1.0 audio
+        HTMLMediaElement.play audio
     else do
       Style.setProperty style "opacity" "0"
-      HTMLMediaElement.load audio
+      when (not paused) $ launchAff_ $ do
+        fadeVolume 1.0 0.0 audio
+        liftEffect $ HTMLMediaElement.load audio
   ) (zip (1..5) figures)
 
 triggerN width height x y =


@@ 105,6 137,5 @@ main = unsafePartial $ do
         height <- Element.clientHeight wallpaper
         width <- Element.clientWidth wallpaper
         let Just mouseEvent = MouseEvent.fromEvent e
-        traceM (Tuple height (MouseEvent.offsetY mouseEvent))
         clipCircle img "10vw" (MouseEvent.offsetX mouseEvent) (MouseEvent.offsetY mouseEvent)
         triggerSpot doc (triggerN width height (MouseEvent.offsetX mouseEvent) (MouseEvent.offsetY mouseEvent))

@@ 1,5 1,5 @@
-{ name = "post-part"
-, dependencies = [ "prelude", "debug", "web-dom", "web-html", "web-events", "partial" ]
-, packages = ./packages.dhall
-, sources = [ "*.purs", "Web/**/*.purs" ]
+{ name = "post-part",
+  dependencies = ["debug" , "partial" , "prelude" , "web-dom" , "web-events" , "web-html" , "web-html", "js-timers", "aff"],
+  packages = ./packages.dhall,
+  sources = [ "*.purs", "Web/**/*.purs" ]
 }