added timer

6 files changed, 79 insertions, 11 deletions

@@ -75,17 +75,46 @@ input[type="range"]::-ms-thumb {
 
 #scores {
   display: flex;
-  
+
   div {
     flex: 0 0 48%;
 
     h2 {
       text-align: center;
     }
-    
+
     table {
       width: max-content;
       margin: 0 auto;
     }
   }
 }
+
+#activation-button {
+  button {
+    display: block;
+    margin: 0 auto;
+    width: 25%;
+    background-color: #04AA6D;
+    padding: 14px 28px;
+    font-size: 16px;
+    cursor: pointer;
+    text-align: center;
+    color: white;
+  }
+}
+
+#timer {
+  width: max-content;
+  margin: 0.5em auto 0;
+  font-size: 3em;
+
+  %label {
+    padding: 0;
+  }
+}
+
+.score-field {
+  padding-left: 1em;
+  text-align: right;
+}
@@ -24,6 +24,8 @@ module Wittle
         @puzzle.save!
       end
 
+      @time = (params.include? :time) ? params[:time] : nil
+
       session[:played_puzzles] ||= []
       session[:played_puzzles] << @puzzle.id
     end
@@ -33,7 +35,7 @@ module Wittle
 
       raise ActiveRecord::RecordNotFound unless @puzzle.latest?
 
-      @puzzle.scores.create!(name: params[:name], ip: request.ip)
+      @puzzle.scores.create!(name: params[:name], ip: request.ip, seconds_taken: (params.include? :time) ? params[:time] : nil)
 
       redirect_to @puzzle
     end
@@ -1,4 +1,9 @@
 module Wittle
   module PuzzlesHelper
+
+    def humanize_interval(seconds)
+      "#{(seconds / 60).to_s.rjust(2, '0')}:#{(seconds % 60).to_s.rjust(2, '0')}"
+    end
+
   end
 end
@@ -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"