Display elapsed time for offline participations

app/views/contests/offline_edit.html.slim

@@ -1,9 +1,23 @@
 = form_with model: @offline, url: "/public/#{@contest.friendly_id}/offline/#{@offline.generate_token_for(:token)}" do |form|
   = form.hidden_field :completed
-  .row.mb-3
+  h3 = t("offlines.form.start_message")
+  h1 id="display-time" style="font-size: 80px;"
+  javascript:
+    const startTime = #{@offline.start_time.to_i};
+    function updateTime() {
+      const displayTimeEl = document.getElementById('display-time');
+      const s = Math.floor((Date.now() - 1000 * startTime) / 1000);
+      let ss = s % 60;
+      let mm = Math.floor(s / 60) % 60;
+      let hh = Math.floor(s / 3600);
+      displayTimeEl.innerHTML = `${hh < 10 ? `0${hh}` : hh}:${mm < 10 ? `0${mm}` : mm}:${ss < 10 ? `0${ss}` : ss}`;
+      setTimeout(updateTime, 1000);
+    }
+    setTimeout(updateTime, 5);
+  .row.mt-5.mb-3
     .col
       .form-text.mb-1
-        = t("offlines.end_image_select")
+        = t("offlines.form.end_image_select")
       = form.file_field :end_image, accept: "image/*", class: "form-control"
       .form-text.error-message style="display: none;" id="image-error-message"
         = t("puzzles.form.file_too_big")

app/views/contests/offline_new.html.slim

@@ -7,7 +7,7 @@
   .row.mb-3
     .col
       .form-text.mb-1
-        = t("offlines.start_image_select")
+        = t("offlines.form.start_image_select")
       = form.file_field :images, accept: "image/*", class: "form-control"
       .form-text.error-message style="display: none;" id="image-error-message"
         = t("puzzles.form.file_too_big")

config/locales/en.yml

@@ -245,8 +245,10 @@ en:
     settings: Settings
     log_out: Log out
   offlines:
-    end_image_select: Take a photo of your completed puzzle
-    start_image_select: Take a photo of the puzzle with the provided code written on a paper before starting it
+    form:
+      end_image_select: Take a photo of your completed puzzle
+      start_image_select: Take a photo of the puzzle with the provided code written on a paper before starting it
+      start_message: Let's go!
   puzzles:
     destroy:
       notice: Puzzle deleted

config/locales/fr.yml

@@ -216,8 +216,10 @@ fr:
     settings: Paramètres
     log_out: Déconnexion
   offlines:
-    end_image_select: Prends une photo du puzzle une fois complété
-    start_image_select: Prends une photo du puzzle avant de le commencer, avec le code donné par l'organisateur.ice écrit sur du papier
+    form:
+      end_image_select: Prends une photo du puzzle une fois complété
+      start_image_select: Prends une photo du puzzle avant de le commencer, avec le code donné par l'organisateur.ice écrit sur du papier
+      start_message: C'est parti !
   puzzles:
     destroy:
       notice: Puzzle supprimé