From 674eb6fcfa75867b4165d77afd3c95719c56dbfe Mon Sep 17 00:00:00 2001
From: Azalea <22280294+hykilpikonna@users.noreply.github.com>
Date: Mon, 16 Dec 2024 22:51:02 -0500
Subject: [PATCH] [+] Timer

---
 src/App.svelte |  6 +++++-
 src/app.sass   | 14 ++++++++++++--
 src/utils.ts   | 13 ++++++++++++-
 3 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index 4e33fb2..f318d87 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -2,7 +2,7 @@
   import svelteLogo from './assets/svelte.svg'
   import viteLogo from '/vite.svg'
   import Number from './lib/Number.svelte'
-  import { cfg, eStates, JsonTy, nStates, randInt, range, zero8 } from "./utils";
+  import { cfg, eStates, Fmt, JsonTy, nStates, randInt, range, zero8 } from "./utils";
   import Line from "./lib/Line.svelte";
   import { solve } from "./solver";
 
@@ -26,6 +26,9 @@
   let [editMode, dragging] = [true, false]
   const modes = ['line', 'mask', 'color']
   let mode = 'line'
+  let [startTime, elapsed] = [Date.now(), 0]
+  
+  setInterval(() => elapsed = Date.now() - startTime, 100)
 
   // Checkpoints
   interface Checkpoint { hStates: i8s, vStates: i8s, hColors: i8s, vColors: i8s, numbers: i8s, nMask: i8s, colors: string[] }
@@ -256,6 +259,7 @@
     Welcome to SlitherLink! 🧩 The rules are simple: Draw lines between the dots to create one big loop (no crossings, no branches). The numbers are your hints – they tell you how many lines should surround them. Left-click to draw, right-click to mark with an X. Can you crack the perfect path?
   </div>
 
+  <div class="timer">{Fmt.duration(elapsed)}</div>
   <div class="puzzle-grid" style={`height: ${rows * cfg.totalW}px; width: ${cols * cfg.totalW}px;`}
        on:click={clickDiv} on:contextmenu={clickDiv} on:keypress={console.log} role="grid" tabindex="0"
        on:mousedown={startDrag} on:mousemove={e => dragging && clickDiv(e)} on:mouseup={() => dragging = false}
diff --git a/src/app.sass b/src/app.sass
index 15477fb..a7351a7 100644
--- a/src/app.sass
+++ b/src/app.sass
@@ -88,7 +88,7 @@ main
     height: 1em
 
 .rules
-  max-width: 600px
+  max-width: 900px
   opacity: 0.9
 
 .btn-div
@@ -110,4 +110,14 @@ main
 
   input
     padding: 0
-    border: 0
\ No newline at end of file
+    border: 0
+
+@import url('https://fonts.googleapis.com/css2?family=Teko&display=swap')
+.timer
+  font-family: 'Teko', sans-serif
+  font-size: 2em
+  color: colors.$accent
+  margin-bottom: -24px
+
+  // Larger gap between letters
+  letter-spacing: 0.3em
diff --git a/src/utils.ts b/src/utils.ts
index b17cc50..b2e4b3d 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -1,4 +1,3 @@
-
 export const cfg = {
   cellW: 20,
   lineW: 4,
@@ -52,3 +51,15 @@ export const JsonTy = {
     URL.revokeObjectURL(a.href)
   }
 }
+
+export const Fmt = {
+  duration: (ms: number) => {
+    let d = 0, h = 0, m = 0, s = 0;
+    [s, ms] = [Math.floor(ms / 1000), ms % 1000];
+    [m, s] = [Math.floor(s / 60), s % 60];
+    [h, m] = [Math.floor(m / 60), m % 60];
+    [d, h] = [Math.floor(h / 24), h % 24];
+    
+    return `${d ? `${d}d ` : ''}${h ? `${h}:` : ''}${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`
+  }
+}