+start & stop

frontend/src/routes/light/setup/+page.svelte

@@ -4,7 +4,7 @@
     import Color from '$lib/color.svelte';
 
     let saved = false;
-    let start = false;
+    $: start = false;
 
     $: surfer = [
         { color: 'gray', priority: '2' },
@@ -18,6 +18,7 @@
 	$: if (saved && surfer) {
 		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)}`);
 	}  
 
@@ -29,6 +30,7 @@
 		if (ses) {
 			surfer = JSON.parse(ses);
             surfers = JSON.parse(window.sessionStorage.getItem('surfers'));
+            start = JSON.parse(window.sessionStorage.getItem('status'));
 			console.log(`loaded: ${JSON.stringify(surfer)}`);
 		}
 		saved = true;
@@ -36,7 +38,8 @@
 
 </script>
 
-<ul>
+{#if start}
+    <ul>
         {#each Array(surfers) as _, id}
             <li style="--height:{setup_height}vh">
                 {#if surfer[id].priority == 'P'}
@@ -47,8 +50,24 @@
                 <div class="color" style:background-color={surfer[id].color}></div>
             </li>        
         {/each}
-</ul>
+    </ul>
-<div class="footer" style="--height:{footer_height}vh">
+    <div class="footer" style="--height:{footer_height}vh">
+        <Button label="STOP" handleClick={() => {start = false;}} />    
+    </div>    
+{:else}
+    <ul>
+        {#each Array(surfers) as _, id}
+            <li style="--height:{setup_height}vh">
+                {#if surfer[id].priority == 'P'}
+                    <div class="priority" id="p"><a href="/">{surfer[id].priority}</a></div>
+                {:else}
+                    <div class="priority" id="n">{surfer[id].priority}</div>
+                {/if}
+                <div class="color" style:background-color={surfer[id].color}></div>
+            </li>        
+        {/each}
+    </ul>
+    <div class="footer" style="--height:{footer_height}vh">
         <span>{footer_height} - {setup_height}</span>
         <span style:padding-left="20px"></span>
         {#each Array(surfers) as _, id}        
@@ -66,8 +85,8 @@
         <Button label="Reset" handleClick={() => {saved = false; window.sessionStorage.clear(); location.reload();}} />
         <span style:padding-left="16px"></span>
         <Button label="START" handleClick={() => {start = true;}} />    
-    
+    </div>
-</div>
+{/if}
 
 <style>
 	:global(body) {