+ timer

src/lib/stores/colors.js

@@ -6,4 +6,8 @@ export const colors = readable([
     "green",
     "yellow",
     "white",
+    "blue",
+    "indigo",
+    "violet",
+    "orange"
 ]);

src/routes/+page.svelte

@@ -6,6 +6,7 @@
 
     let surfers = [];
     let start = false;
+    let timer;
     let info = {
         time: "00",
         cat: "U12 M",
@@ -61,13 +62,17 @@
     }
 
     function StartHeat() {
+        console.log("StartHeat");
         start = true;
         SaveToLocalCahe();
+        timer = setInterval(info.time - 1, 1000);
     }
 
     function StopHeat() {
+        console.log("StopHeat");
         start = false;
         SaveToLocalCahe;
+        clearInterval(timer);
     }
 
     function CheckRound() {
@@ -137,8 +142,18 @@
     <!-- Form -->
     <div class="form-box">
         <form>
-            <button type="submit" class="btn btn-primary mt-1 mb-3 w-100"
-                >Start</button>
+            {#if start}
+                <button
+                    type="submit"
+                    class="btn btn-danger mt-1 mb-3 w-100"
+                    on:click={StopHeat}>Stop</button>
+            {:else}
+                <button
+                    type="submit"
+                    class="btn btn-primary mt-1 mb-3 w-100"
+                    on:click={StartHeat}>Start</button>
+            {/if}
+
             <div class="input-group mb-1">
                 <span class="input-group-text">tempo</span>
                 <input