Round timer improvements

app/assets/javascripts/timer.js.coffee

@@ -33,9 +33,11 @@ $(document).on 'turbolinks:load', ->
 
     if roundTimer.paused
       setTimeRemaining(roundTimer.remaining_seconds * 1000)
-    else
+    else if roundTimer.started
       finishTime = new Date(roundTimer.finish_time)
       renderTimeRemaining = () ->
         setTimeRemaining(finishTime.getTime() - new Date().getTime())
       renderTimeRemaining()
       setInterval(renderTimeRemaining, 100)
+    else
+      $("#round_time_remaining").html(timeRemainingString(roundTimer.length_minutes * 60000))

app/services/round_timer.rb

@@ -34,18 +34,29 @@ def running?
     end
   end
 
+  def started?
+    !round_timer_activations.last.nil?
+  end
+
   def state
     if paused?
-      PausedState.new(true, remaining_seconds_after_unpause)
+      PausedState.new(true, true, remaining_seconds_after_unpause)
+    elsif started?
+      RunningState.new(true, false, finish_time)
     else
-      RunningState.new(false, finish_time)
+      NotStartedState.new(false, false, length_minutes)
     end
   end
 
+  def header
+    "Remaining in #{@round.stage.format.humanize(capitalize: false)} round #{@round.number}#{paused? ? ' (paused)' : ''}:"
+  end
+
   private
 
-  RunningState = Struct.new(:paused, :finish_time)
-  PausedState = Struct.new(:paused, :remaining_seconds)
+  RunningState = Struct.new(:started, :paused, :finish_time)
+  PausedState = Struct.new(:started, :paused, :remaining_seconds)
+  NotStartedState = Struct.new(:started, :paused, :length_minutes)
   attr_reader :round
   delegate :round_timer_activations, :completed?, :length_minutes, to: :round
 

app/views/layouts/fullscreen.html.slim

@@ -8,6 +8,4 @@ html
     = favicon_link_tag 'favicon.ico'
 
   body.m-0.p-0
-    = link_to :back, style:'cursor:default'
-      .vh-100
-        = yield
+    = yield

app/views/rounds/_round_timer.html.slim

@@ -1,10 +1,9 @@
 - if round&.timer&.show?
   .alert.alert-primary.mb-0
     => fa_icon 'clock-o'
-    | Remaining in round #{round.number}: 
-    span#round_time_remaining
+    | #{round.timer.header} 
+    / Width is fixed to avoid numbers popping around on Mac as the font has numbers of different widths
+    span#round_time_remaining.text-left style='width: 2.6rem; display: inline-block'
       | 00:00
-    - if round.timer.paused?
-      |  (paused)
   javascript:
     roundTimer = #{raw round.timer.state.to_json};

app/views/tournaments/timer.html.slim

@@ -1,13 +1,18 @@
 
+/ Sizes have been set relative to viewport width (vw) to ensure fullscreen scaling
 .container-fluid
-  .row.vh-100.align-items-center.justify-content-center
-    .col.col-auto
-      .alert.alert-primary.mb-0 style='font-size: 22vw; padding: 0 3vw; border-radius: 2vw; line-height: 1.2'
+  .fixed-top
+    .float-right.text-center.align-middle style='margin: 1vw; font-size: 2vw; line-height: 1'
+      a href='javascript:history.back()'
+        i.fa.fa-times.text-dark
+  .row.vh-100.align-items-center.justify-content-center.text-center
+    .col.col-auto style='line-height: 1.1'
+      p style='font-size: 5vw; margin-bottom: 1vw'
+        | #{@timer.header}
+      .alert.alert-primary.mb-0 style='font-size: 22vw; border-radius: 2vw; padding: 0.5vw 4vw'
         => fa_icon 'clock-o'
-        - if @timer.show?
-          span#round_time_remaining
-            | 00:00
-          javascript:
-            roundTimer = #{raw @timer.state.to_json};
-        - else
-          | #{ @round.length_minutes }:00
+        / Width is fixed to avoid numbers popping around on Mac as the font has numbers of different widths
+        span#round_time_remaining.text-left style='width: 55vw; display: inline-block'
+          | 00:00
+        javascript:
+          roundTimer = #{raw @timer.state.to_json};

spec/feature/rounds/round_timer_spec.rb

@@ -55,7 +55,7 @@ def round_timer_form
   end
 
   def timer_display_message
-    "Remaining in round 1:"
+    "Remaining in swiss round 1"
   end
 
 end