+ add/del + body color

src/routes/+page.svelte

@@ -44,8 +44,8 @@
         console.log("ResetLocalCache");
         window.sessionStorage.clear();
         surfers = [
-            { name: "", score: 0, colore: "black" },
-            { name: "", score: 0, colore: "black" },
+            { id: 1, name: "", score: 0, colore: "black", delete: false },
+            { id: 2, name: "", score: 0, colore: "black", delete: false },
         ];
         start = false;
         info = {
@@ -69,7 +69,7 @@
         console.log("StartHeat");
         start = true;
         SaveToLocalCahe();
-        timer = setInterval(Timer, 200);
+        timer = setInterval(Timer, 1000);
     }
 
     function pad(n) {
@@ -77,14 +77,11 @@
     }
 
     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);
         }
     }
 
@@ -103,23 +100,25 @@
         }
     }
 
-    function hasDuplicateColors() {
-        const colors = [];
-
-        console.log(JSON.stringify(priority.surfers));
-
-        for (let i = 0; i < priority.surfersCount; i++) {
-            const color = priority.surfers[i].color;
-
-            if (colors.includes(color)) {
-                console.log(`duplicate color: ${color}`);
-                return true;
+    function AddSurfer() {
+        if (surfers.length < 5) {
+            let newSurfer = {
+                id: surfers.length + 1,
+                name: "",
+                score: 0,
+                rank: 0,
+                delete: true,
+            };
+            surfers.push(newSurfer);
+            SaveToLocalCahe();
+        }
     }
 
-            colors.push(color);
+    function DelSurfer() {
+        if (surfers.length > 2) {
+            surfers.pop();
+            SaveToLocalCahe();
         }
-
-        return false;
     }
 </script>
 
@@ -270,26 +269,37 @@
                     {/each}
                 </ul>
             </div>
-            <button type="button" class="btn btn-primary mt-1 mb-1 w-100"
-                >Add</button>
-            <div class="btn-group w-100" role="group" aria-label="save">
+            <div class="d-grid gap-2 d-md-flex justify-content-md-center mb-2">
                 <button
                     type="button"
-                    class="btn btn-primary mt-1 mb-1 w-100"
+                    class="btn btn-primary w-50"
+                    onclick={AddSurfer}>Add</button>
+                <button
+                    type="button"
+                    class="btn btn-warning w-50"
+                    onclick={DelSurfer}>Del</button>
+
+                <!-- <div class="btn-group w-100" role="group" aria-label="save"> -->
+            </div>
+            <div class="d-grid gap-2 d-md-flex justify-content-md-center mt-2">
+                <button
+                    type="button"
+                    class="btn btn-primary w-50"
                     onclick={SaveToLocalCahe}>Save</button>
                 <button
                     type="button"
-                    class="btn btn-primary mt-1 mb-1 w-100"
+                    class="btn btn-danger w-50"
                     onclick={ResetLocalCache}>Reset</button>
             </div>
+            <!-- </div> -->
         </form>
     </div>
 </div>
 
 <style>
-    body {
-        background-color: black;
-        color: white;
+    .body {
+        background-color: #dfffdf;
+        color: black;
         font-family: Arial, sans-serif;
         min-height: 1024px;
         min-width: 768px;
@@ -393,7 +403,7 @@
         width: 500px;
         background: rgba(50, 50, 50, 0.7);
         color: white;
-        margin-left: 450px;
+        margin-left: 550px;
         margin-top: 100px;
         padding: 10px;
     }