added timer

3 files changed, 40 insertions, 8 deletions

@@ -1,6 +1,23 @@
 <script type="text/javascript">
+var totalSeconds = 0
+var timerInterval
+
 window.onload = function() {
   <% if @playable %>
+  function pad(val) {
+    var valString = val + ""
+    if (valString.length < 2)
+    {
+      return "0" + valString
+    } else {
+      return valString
+    }
+  }
+  function setTime() {
+    ++totalSeconds
+    $("#seconds").text(pad(totalSeconds%60))
+    $("#minutes").text(pad(parseInt(totalSeconds/60)))
+  }
   $("#sens").val(window.settings.sensitivity)
   $("#sens").on("change", function() {
     window.settings.sensitivity = this.value
@@ -9,12 +26,17 @@ window.onload = function() {
   $("#volume").on("change", function() {
     window.settings.volume = this.value
   })
-  <% end %>
+  $("#activation-button button").on("click", function() {
+    var puzzle = window.deserializePuzzle("<%= @puzzle.data %>")
+    draw(puzzle)
+
+    $("#activation-button").hide()
 
+    timerInterval = setInterval(setTime, 1000);
+  })
+  <% else %>
   var puzzle = window.deserializePuzzle("<%= @puzzle.data %>")
   draw(puzzle)
-
-  <% unless @playable %>
   drawPath(puzzle, JSON.parse("<%= escape_javascript(sanitize @puzzle.solved_data) %>"))
   window.trace = function() {}
   <% end %>
@@ -22,10 +44,12 @@ window.onload = function() {
 
 <% if @playable %>
 window.TRACE_COMPLETION_FUNC = function(puzzle, rawPath) {
+  clearInterval(timerInterval)
+
   $.ajax({
     type: "POST",
     url: "<%= solve_puzzle_path(@puzzle, format: :js) %>",
-    data: { solved: JSON.stringify(rawPath) }
+    data: { solved: JSON.stringify(rawPath), time: totalSeconds }
   })
 }
 
@@ -1,6 +1,8 @@
 %h3 Congrats!
 %p Would you like to submit your time?
 = form_with url: submit_puzzle_path(@puzzle) do |form|
+  - unless @time.nil?
+    = form.hidden_field :time, value: @time
   %p
     = form.label :name, "Name:"
     = form.text_field :name
@@ -3,6 +3,12 @@
   %svg#puzzle{ style: "pointer-events: auto"}
 #submission-form
 - if @playable
+  #activation-button
+    %button{ type: "button" } Reveal Puzzle
+  #timer
+    %label#minutes 00
+    %label#colon :
+    %label#seconds 00
   %details#trace-settings
     %summary Settings
     .things
@@ -15,17 +21,17 @@
     #by-time
       %h2 Fastest Solves
       %table
-        - @puzzle.scores.where("seconds_taken IS NOT NULL").order(seconds_taken: :asc).each do |score|
+        - @puzzle.scores.where("seconds_taken IS NOT NULL").order(seconds_taken: :asc).limit(20).each_with_index do |score, i|
           %tr
             %td #{(i + 1)}.
             %td= score.name
-            %td
+            %td.score-field= humanize_interval(score.seconds_taken)
     #by-when
       %h2 Completion Order
       %table
-        - @puzzle.scores.order(created_at: :asc).each_with_index do |score, i|
+        - @puzzle.scores.order(created_at: :asc).limit(20).each_with_index do |score, i|
           %tr
             %td #{(i + 1)}.
             %td= score.name
-            %td= score.created_at.getlocal().strftime("%-I:%M:%S%P")
+            %td.score-field= score.created_at.getlocal().strftime("%-I:%M:%S%P")
 = render partial: "handle_puzzle"