Playing an ugly sound when a timer is ringing

5 files changed, 45 insertions, 13 deletions

diff --git a/alarm.wav b/alarm.wav
new file mode 100644
index 0000000..80479d8
--- /dev/null
+++ b/alarm.wav
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 (..)