+ state

src/routes/+page.svelte

@@ -4,16 +4,20 @@
     import { rounds } from "$lib/stores/rounds.js";
     import { categories } from "$lib/stores/categories.js";
 
-    let surfers = [];
-    let start = false;
     let timer;
-    let info = {
-        time: "00",
+
+    let surfers = $state([]);
+    let start = $state(false);
+
+    let info = $state({
         cat: "U12 M",
         round: "Qualifying",
         heat: "1",
-    };
-    let round_name = false;
+    });
+    let mins = $state(0);
+    let secs = $state(0);
+
+    let round_name = $state(false);
 
     onMount(async () => {
         LoadFromLocalCache();
@@ -45,11 +49,12 @@
         ];
         start = false;
         info = {
-            time: "00",
             cat: "U12 M",
             round: "Qualifying",
             heat: "1",
         };
+        mins = 0;
+        secs = 0;
         round_name = false;
         console.log(`reset store: ${JSON.stringify(surfers)}`);
     }
@@ -57,7 +62,6 @@
     function SaveToLocalCahe() {
         window.sessionStorage.setItem("surfers", JSON.stringify(surfers));
         window.sessionStorage.setItem("info", JSON.stringify(info));
-        window.sessionStorage.setItem("start", JSON.stringify(start));
         console.log(`update cache: ${JSON.stringify(surfers)}`);
     }
 
@@ -65,7 +69,23 @@
         console.log("StartHeat");
         start = true;
         SaveToLocalCahe();
-        timer = setInterval(info.time - 1, 1000);
+        timer = setInterval(Timer, 200);
+    }
+
+    function pad(n) {
+        return n < 10 ? "0" + n : n;
+    }
+
+    function Timer() {
+        console.log(mins + ":" + secs);
+        if (secs == 0) {
+            mins = mins - 1;
+            secs = 59;
+            console.log("sec = 0: " + mins + ":" + secs);
+        } else {
+            secs = secs - 1;
+            console.log("sec > 0: " + mins + ":" + secs);
+        }
     }
 
     function StopHeat() {
@@ -107,8 +127,8 @@
     <div id="score-container">
         <div class="info-box">
             <div class="Time">
-                {#if info.time > "00"}
-                    <span id="time">{info.time}:00</span>
+                {#if mins >= 0}
+                    <span id="time">{pad(mins)}:{pad(secs)}</span>
                 {/if}
             </div>
             <div class="Cat">
@@ -146,12 +166,12 @@
                 <button
                     type="submit"
                     class="btn btn-danger mt-1 mb-3 w-100"
-                    on:click={StopHeat}>Stop</button>
+                    onclick={StopHeat}>Stop</button>
             {:else}
                 <button
                     type="submit"
                     class="btn btn-primary mt-1 mb-3 w-100"
-                    on:click={StartHeat}>Start</button>
+                    onclick={StartHeat}>Start</button>
             {/if}
 
             <div class="input-group mb-1">
@@ -164,7 +184,7 @@
                     pattern="^[0-9][0-9]$"
                     maxlength="2"
                     size="2"
-                    bind:value={info.time} />
+                    bind:value={mins} />
                 <span class="input-group-text">category</span>
                 <select
                     class="form-select"
@@ -197,7 +217,7 @@
                         class="form-check-input mt-0"
                         type="checkbox"
                         bind:checked={round_name}
-                        on:change={CheckRound}
+                        onchange={CheckRound}
                         aria-label="Checkbox for following text input" />
                 </div>
                 <span class="input-group-text">heat</span>
@@ -256,11 +276,11 @@
                 <button
                     type="button"
                     class="btn btn-primary mt-1 mb-1 w-100"
-                    on:click={SaveToLocalCahe}>Save</button>
+                    onclick={SaveToLocalCahe}>Save</button>
                 <button
                     type="button"
                     class="btn btn-primary mt-1 mb-1 w-100"
-                    on:click={ResetLocalCache}>Reset</button>
+                    onclick={ResetLocalCache}>Reset</button>
             </div>
         </form>
     </div>
@@ -278,7 +298,7 @@
         display: grid;
         top: 6px;
         left: 6px;
-        width: 250px;
+        width: 254px;
         padding: 6px;
         background: rgba(50, 50, 50, 0.7);
         color: white;
@@ -295,7 +315,7 @@
         display: grid;
         grid-template-columns: 1fr 4fr 1fr;
         grid-template-areas: "color surfer score";
-        width: 220px;
+        width: 254px;
         padding-left: 6px;
         padding-right: 6px;
         padding-top: 2px;
@@ -365,7 +385,7 @@
     .score {
         grid-area: score;
         font-weight: bold;
-        text-align: end;
+        text-align: start;
         align-content: center;
         margin-right: 2px;
     }