From b50f1f061e1e1c0e5d1b447d3732db4cc199b49b Mon Sep 17 00:00:00 2001
From: Miki <mikif70@gmail.com>
Date: Tue, 9 Jan 2024 15:59:05 +0100
Subject: [PATCH] max 6 lines

---
 frontend/src/routes/light/setup/+page.svelte | 39 +++++++++++---------
 1 file changed, 21 insertions(+), 18 deletions(-)

diff --git a/frontend/src/routes/light/setup/+page.svelte b/frontend/src/routes/light/setup/+page.svelte
index 1144fb3..60219bd 100644
--- a/frontend/src/routes/light/setup/+page.svelte
+++ b/frontend/src/routes/light/setup/+page.svelte
@@ -11,16 +11,17 @@
         { color: 'gray', priority: 'P' },
         { color: 'gray', priority: '4' },
         { color: 'gray', priority: '3' },
+        { color: 'gray', priority: '6' },
         { color: 'gray', priority: '5' },
     ];
-    $: surfers = 5;
+    $: surfers = 6;
 
 	$: if (saved && surfer) {
-		window.sessionStorage.setItem('priority', JSON.stringify(surfer));        
-        window.sessionStorage.setItem('surfers', JSON.stringify(surfers));        
-        window.sessionStorage.setItem('status', JSON.stringify(start));        
+		window.sessionStorage.setItem('priority', JSON.stringify(surfer));
+        window.sessionStorage.setItem('surfers', JSON.stringify(surfers));
+        window.sessionStorage.setItem('status', JSON.stringify(start));
 		console.log(`saved: ${JSON.stringify(surfer)}`);
-	}  
+	}
 
     let footer_height = 8;
     $: setup_height = ((100 - footer_height) / surfers) - (2.2 / surfers);
@@ -47,7 +48,8 @@
                 {:else}
                     <div class="priority" id="n">{surfer[id].priority}</div>
                 {/if}
-                <div class="color" style:background-color={surfer[id].color}></div>
+                <div class="color" style:background-color={surfer[id].color}>
+                </div>
             </li>        
         {/each}
     </ul>
@@ -60,6 +62,7 @@
             <li style="--height:{setup_height}vh">
                 {#if surfer[id].priority == 'P'}
                     <div class="priority" id="p"><a href="/">{surfer[id].priority}</a></div>
+                    <!-- <span>{footer_height} - {setup_height}</span> -->
                 {:else}
                     <div class="priority" id="n">{surfer[id].priority}</div>
                 {/if}
@@ -68,22 +71,22 @@
         {/each}
     </ul>
     <div class="footer" style="--height:{footer_height}vh">
-        <span>{footer_height} - {setup_height}</span>
+        <!-- <span>{footer_height} - {setup_height}</span>
         <span style:padding-left="20px"></span>
         {#each Array(surfers) as _, id}        
             <span style:padding-left="20px"></span><span>{surfer[id].color}</span>
         {/each}
-        <br>
-        <Button label="+" handleClick={() => {if (surfers < 5) surfers += 1;}} />
-            <span class="surfers">{surfers}</span>
+        <br> -->
+        <Button label="+" handleClick={() => {if (surfers < 6) surfers += 1;}} />
+        <Button label={surfers} />
         <Button label="-" handleClick={() => {if (surfers > 2) surfers -= 1;}} />
         {#each Array(surfers) as _, id}
-            <span style:padding-left="16px"></span>
+            <span style:padding-left="1vmin"></span>
             <Color id="color{id}" label="Color-{id+1}" bind:value={surfer[id].color} />
         {/each}
-        <span style:padding-left="16px"></span>
+        <span style:padding-left="1vmin"></span>
         <Button label="Reset" handleClick={() => {saved = false; window.sessionStorage.clear(); location.reload();}} />
-        <span style:padding-left="16px"></span>
+        <span style:padding-left="1vmin"></span>
         <Button label="START" handleClick={() => {start = true;}} />    
     </div>
 {/if}
@@ -116,6 +119,7 @@
 		margin-top: 0.2vh;
 		margin-bottom: 0.2vh;
 		overflow: hidden;
+        height: var(--height);
 	}
 
 	.priority {
@@ -143,12 +147,11 @@
 	}
 
     .footer {
-        position: fixed;
+        display: fixed;
         bottom: 0;
-        background-color: aqua;
-        border: 2px solid black;
-        width: 100%;
+        background-color: darkgrey;
+        /* border: 2px solid black; */
+        width: 100%;        
         height: var(--height);
     }
-
 </style>