Allow to pause the clock

Author: mlomnicki

index.html

@@ -49,6 +49,9 @@ <h4>Select blinds</h4>
         <span data-tooltip class="has-tip" title="Restart">
           <i class="icon-refresh" data-role="restart"></i>
         </span>
+        <span data-tooltip class="has-tip" title="Pause">
+          <i class="icon-pause" data-role="pause"></i>
+        </span>
       </div>
     </div>
     <div class="row">

sass/styles.scss

@@ -6,5 +6,7 @@
   }
 }
 .main .controls {
+  margin-bottom: 1em;
+  span { margin-right: 30px; }
   i[class^="icon-"] { font-size: 60px; }
 }

src/clock.coffee

@@ -2,12 +2,21 @@ class Clock
   constructor: ->
 
   start: ->
-    @interval = setInterval((=> @tick()), @oneSecondInMilliseconds())
+    unless @interval
+      @interval = setInterval((=> @tick()), @oneSecondInMilliseconds())
 
   stop: ->
-    clearInterval(@interval)
+    if @interval
+      clearInterval(@interval)
+      @interval = null
 
   tick: ->
 
+  toggle: ->
+    if @interval
+      @stop()
+    else
+      @start()
+
   oneSecondInMilliseconds: ->
     1000

src/glue.coffee

@@ -19,6 +19,8 @@ class Glue
       @clock.stop()
       @gui.switchToSetup())
 
+    After(@useCase, 'pause', => @clock.toggle())
+
     After(@useCase, 'secondElapsed', => @gui.updateTimeLeft(@useCase.round.timeLeft()))
     After(@useCase, 'switchToNextRound', => @gui.updateBlinds(@useCase.currentBlind()))
     AfterAll(@useCase, [
@@ -36,6 +38,7 @@ class Glue
 
     After(@gui, 'startClicked', => @useCase.start())
     After(@gui, 'restartClicked', => @useCase.restart())
+    After(@gui, 'pauseClicked', => @useCase.pause())
     After(@gui, 'increaseRoundLengthClicked', => @useCase.increaseRoundLength())
     After(@gui, 'decreaseRoundLengthClicked', => @useCase.decreaseRoundLength())
     After(@gui, 'addBlindClicked', (blind) => @useCase.addBlind(blind))

src/gui.coffee

@@ -2,13 +2,16 @@ class Gui
   constructor: ->
     $('[data-role=start]').click => @startClicked()
     $('[data-role=restart]').click => @restartClicked()
+    $('[data-role=pause]').click => @pauseClicked()
     $('[data-role=increase-round-length]').click => @increaseRoundLengthClicked()
     $('[data-role=decrease-round-length]').click => @decreaseRoundLengthClicked()
 
   startClicked: ->
 
   restartClicked: ->
 
+  pauseClicked: ->
+
   increaseRoundLengthClicked: ->
 
   decreaseRoundLengthClicked: ->

src/spec/clock_spec.coffee

@@ -17,3 +17,20 @@ describe "Clock", =>
     @clock.stop()
     jasmine.Clock.tick(1000)
     expect(@clock.tick).not.toHaveBeenCalled()
+
+  describe "toggle when clock is stopped", =>
+    it "starts it", =>
+      spyOn(@clock, 'tick')
+      @clock.stop()
+      @clock.toggle()
+      jasmine.Clock.tick(1000)
+      expect(@clock.tick).toHaveBeenCalled()
+
+  describe "toggle when clock is running", =>
+    it "stops it", =>
+      spyOn(@clock, 'tick')
+      @clock.start()
+      @clock.toggle()
+      jasmine.Clock.tick(1000)
+      expect(@clock.tick).not.toHaveBeenCalled()
+

src/use_case.coffee

@@ -38,5 +38,7 @@ class UseCase
     @round.reset()
     @enabledBlinds.reset()
 
+  pause: =>
+
   currentBlind: =>
     @enabledBlinds.current()