From 17dbdaeea4f13c3fde35edbc745984ec31a2584c Mon Sep 17 00:00:00 2001
From: Joris Guyonvarch
Date: Thu, 19 Mar 2015 23:20:29 +0100
Subject: Playing an ugly sound when a timer is ringing

---
 alarm.wav                         | Bin 0 -> 91164 bytes
 design/design.css                 |  26 ++++++++++++++------------
 index.html                        |  15 +++++++++++++++
 src/Main.elm                      |  16 ++++++++++++++++
 src/Update/UpdateTimerEdition.elm |   1 -
 5 files changed, 45 insertions(+), 13 deletions(-)
 create mode 100644 alarm.wav

diff --git a/alarm.wav b/alarm.wav
new file mode 100644
index 0000000..80479d8
Binary files /dev/null and b/alarm.wav differ
diff --git a/design/design.css b/design/design.css
index 257a017..681e770 100644
--- a/design/design.css
+++ b/design/design.css
@@ -13,6 +13,7 @@
   padding-left: 50px;
   padding-right: 50px;
   font-family: "DejaVu Serif";
+  transition: all 0.4s ease;
 }
 
 .title > button.addTimer {
@@ -24,6 +25,13 @@
   font-size: 50px;
   margin-top: 35px;
   margin-right: 50px;
+  transition: all 0.4s ease;
+}
+
+.title > button.addTimer:hover,
+.title > button.title:hover {
+  color: #CCCC88;
+  border-color: #CCCC88;
 }
 
 .timers {
@@ -45,26 +53,20 @@
   border-radius: 2px;
 }
 
-@keyframes ringing {
-  30% {
-    background-color: #FED5AE;
-  }
-  100% {
-    background-color: #FED5AE;
-  }
+.block:hover {
+  border: 1px solid #BBBBBB;
 }
 
-.timer.isRinging > :not(.remove) {
-  animation: ringing 2s linear infinite alternate;
+.timer.isRunning > :not(.remove) {
+  background-color: #CDE4C2;
 }
 
-.timer.isRunning > .time {
-  color: #33AA22;
+.timer.isRinging > :not(.remove) {
+  background-color: #FED5AE;
 }
 
 .timer > button.name {
   width: 300px;
-  border: none;
 }
 
 .timer > .time {
diff --git a/index.html b/index.html
index 352f6b1..5417dcc 100644
--- a/index.html
+++ b/index.html
@@ -28,6 +28,21 @@
       }
     });
 
+    const sound = new Audio('alarm.wav');
+    sound.addEventListener('ended', function() {
+      this.currentTime = 0;
+      this.play();
+    }, false);
+
+    timer.ports.ringingTimers.subscribe(function(isRinging) {
+      if(isRinging) {
+        sound.play();
+      } else {
+        sound.pause();
+        sound.currentTime = 0;
+      }
+    });
+
   </script>
 
 </html>
diff --git a/src/Main.elm b/src/Main.elm
index 42bcbc4..48c7320 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -9,9 +9,13 @@ import Mouse
 import Json.Encode (Value)
 import Keyboard
 import Char
+import Dict
+import List
 
 import Model.Model (..)
 import Model.Position (..)
+import Model.TimerState (..)
+import Model.Id (..)
 import Update.Update (..)
 import View.View (view)
 
@@ -36,6 +40,18 @@ port clickPosition =
     Mouse.clicks
     (Signal.map positionEncoder Mouse.position)
 
+port ringingTimers : Signal Bool
+port ringingTimers =
+  Signal.map
+    (\model ->
+      model.timers
+        |> Dict.toList
+        |> List.map snd
+        |> List.any (\timer -> timer.state == Ringing)
+    )
+    model
+      |> Signal.dropRepeats
+
 port clickAway : Signal ()
 
 port initialTime : Time
diff --git a/src/Update/UpdateTimerEdition.elm b/src/Update/UpdateTimerEdition.elm
index da12ed0..cff39f7 100644
--- a/src/Update/UpdateTimerEdition.elm
+++ b/src/Update/UpdateTimerEdition.elm
@@ -3,7 +3,6 @@ module Update.UpdateTimerEdition
   ) where
 
 import Char (..)
-import Debug
 
 import Model.TimerEdition (..)
 
-- 
cgit v1.2.3