[+] Timer

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}

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
+    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

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')}`
+  }
+}