+light version

+ setup

frontend/package.json

@@ -12,7 +12,7 @@
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^3.1.0",
 		"@sveltejs/adapter-static": "^3.0.1",
-		"@sveltejs/kit": "^2.0.6",
+		"@sveltejs/kit": "^2.1.0",
 		"@sveltejs/vite-plugin-svelte": "^3.0.1",
 		"eslint": "^8.56.0",
 		"eslint-config-prettier": "^9.1.0",

frontend/pnpm-lock.yaml

@@ -7,13 +7,13 @@ settings:
 devDependencies:
   '@sveltejs/adapter-auto':
     specifier: ^3.1.0
-    version: 3.1.0(@sveltejs/kit@2.0.6)
+    version: 3.1.0(@sveltejs/kit@2.1.0)
   '@sveltejs/adapter-static':
     specifier: ^3.0.1
-    version: 3.0.1(@sveltejs/kit@2.0.6)
+    version: 3.0.1(@sveltejs/kit@2.1.0)
   '@sveltejs/kit':
-    specifier: ^2.0.6
+    specifier: ^2.1.0
-    version: 2.0.6(@sveltejs/vite-plugin-svelte@3.0.1)(svelte@4.2.8)(vite@5.0.11)
+    version: 2.1.0(@sveltejs/vite-plugin-svelte@3.0.1)(svelte@4.2.8)(vite@5.0.11)
   '@sveltejs/vite-plugin-svelte':
     specifier: ^3.0.1
     version: 3.0.1(svelte@4.2.8)(vite@5.0.11)
@@ -477,25 +477,25 @@ packages:
     dev: true
     optional: true
 
-  /@sveltejs/adapter-auto@3.1.0(@sveltejs/kit@2.0.6):
+  /@sveltejs/adapter-auto@3.1.0(@sveltejs/kit@2.1.0):
     resolution: {integrity: sha512-igS5hqCwdiXWb8NoWzThKCVQQj9tKgUkbTtzfxBPgSLOyFjkiGNDX0SgCoY2QIUWBqOkfGTOqGlrW5Ynw9oUvw==}
     peerDependencies:
       '@sveltejs/kit': ^2.0.0
     dependencies:
-      '@sveltejs/kit': 2.0.6(@sveltejs/vite-plugin-svelte@3.0.1)(svelte@4.2.8)(vite@5.0.11)
+      '@sveltejs/kit': 2.1.0(@sveltejs/vite-plugin-svelte@3.0.1)(svelte@4.2.8)(vite@5.0.11)
       import-meta-resolve: 4.0.0
     dev: true
 
-  /@sveltejs/adapter-static@3.0.1(@sveltejs/kit@2.0.6):
+  /@sveltejs/adapter-static@3.0.1(@sveltejs/kit@2.1.0):
     resolution: {integrity: sha512-6lMvf7xYEJ+oGeR5L8DFJJrowkefTK6ZgA4JiMqoClMkKq0s6yvsd3FZfCFvX1fQ0tpCD7fkuRVHsnUVgsHyNg==}
     peerDependencies:
       '@sveltejs/kit': ^2.0.0
     dependencies:
-      '@sveltejs/kit': 2.0.6(@sveltejs/vite-plugin-svelte@3.0.1)(svelte@4.2.8)(vite@5.0.11)
+      '@sveltejs/kit': 2.1.0(@sveltejs/vite-plugin-svelte@3.0.1)(svelte@4.2.8)(vite@5.0.11)
     dev: true
 
-  /@sveltejs/kit@2.0.6(@sveltejs/vite-plugin-svelte@3.0.1)(svelte@4.2.8)(vite@5.0.11):
+  /@sveltejs/kit@2.1.0(@sveltejs/vite-plugin-svelte@3.0.1)(svelte@4.2.8)(vite@5.0.11):
-    resolution: {integrity: sha512-dnHtyjBLGXx+hrZQ9GuqLlSfTBixewJaByUVWai7LmB4dgV3FwkK155OltEgONDQW6KW64hLNS/uojdx3uC2/g==}
+    resolution: {integrity: sha512-XSIjk9uY705VRpLapfScvOI3bKTfPXntLCdWVsQHhLvkTD7TPNHWh45/6nTT1vQ8rJwWzzA5sLide2YLT4FMsg==}
     engines: {node: '>=18.13'}
     hasBin: true
     requiresBuild: true
@@ -509,6 +509,7 @@ packages:
       cookie: 0.6.0
       devalue: 4.3.2
       esm-env: 1.0.0
+      import-meta-resolve: 4.0.0
       kleur: 4.1.5
       magic-string: 0.30.5
       mrmime: 2.0.0

frontend/src/lib/color.svelte

@@ -25,5 +25,6 @@
 	select {
 		font-size: 1.2rem;
 		width: fit-content;
+		border-radius: 4px;
 	}
 </style>

frontend/src/routes/+page.svelte

@@ -1,13 +1,7 @@
 <h1>Welcome to SvelteKit</h1>
 
-<a href="priority">priority</a>
+<a href="light/setup">setup</a>
 <br />
-<a href="setup">setup</a>
+<a href="light/h">horizontal</a>
 <br />
-<a href="surfers">surfers</a>
+<a href="light/v">vertical</a>
-<br />
-<a href="pri">Priority test</a>
-<br />
-<a href="video/h">horizontal</a>
-<br />
-<a href="video/v">vertical</a>

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

@@ -0,0 +1,133 @@
+<script>
+    import { onMount } from 'svelte';
+    import Button from '$lib/button.svelte';
+    import Color from '$lib/color.svelte';
+
+    let saved = false;
+    let start = false;
+
+    $: surfer = [
+        { color: 'gray', priority: '2' },
+        { color: 'gray', priority: 'P' },
+        { color: 'gray', priority: '4' },
+        { color: 'gray', priority: '3' },
+        { color: 'gray', priority: '5' },
+    ];
+    let surfers = 5;
+
+	$: if (saved && surfer) {
+		window.sessionStorage.setItem('priority', JSON.stringify(surfer));
+		console.log(`saved: ${JSON.stringify(surfer)}`);
+	}  
+
+    let footer_height = 8;
+    $: setup_height = ((100 - footer_height) / surfers) - (2.2 / surfers);
+
+	onMount(async () => {
+		let ses = window.sessionStorage.getItem('priority');
+		if (ses) {
+			surfer = JSON.parse(ses);
+			console.log(`loaded: ${JSON.stringify(surfer)}`);
+		}
+		saved = true;
+	});
+
+</script>
+
+<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}        
+        <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>
+    <Button label="-" handleClick={() => {if (surfers > 2) surfers -= 1;}} />
+    {#each Array(surfers) as _, id}
+        <span style:padding-left="16px"></span>
+        <Color id="color{id}" label="Color-{id+1}" bind:value={surfer[id].color} />
+    {/each}
+    <span style:padding-left="16px"></span>
+    <Button label="Reset" handleClick={() => {saved = false; window.sessionStorage.removeItem('priority'); location.reload();}} />
+    <span style:padding-left="16px"></span>
+    <Button label="START" handleClick={() => {start = true;}} />
+    
+</div>
+
+<style>
+	:global(body) {
+		overflow-y: hidden;
+		overflow-x: hidden;
+		margin: 0.2vmin;
+		align-content: center;
+		justify-content: center;
+	}
+
+	a:link,
+	a:hover,
+	a:visited,
+	a:active {
+		text-decoration: none;
+		color: black;
+	}
+
+	ul {
+		margin: 0;
+		padding: 0;
+	}
+
+	li {
+		display: flex;
+		flex-direction: row;
+		margin-top: 0.2vh;
+		margin-bottom: 0.2vh;
+		overflow: hidden;
+	}
+
+	.priority {
+		text-align: center;
+		align-self: center;
+		min-height: var(--height);
+		min-width: var(--height);
+		margin-right: 0.2vw;
+		background-color: gray;
+	}
+
+	.priority#p {
+		font-size: 16vmin;
+		background-color: lightgray;
+		height: 100%;
+	}
+
+	.priority#n {
+		font-size: 14vmin;
+		height: 100%;
+	}
+
+	.color {
+		width: 100vw;
+	}
+
+    .footer {
+        position: fixed;
+        bottom: 0;
+        background-color: aqua;
+        border: 2px solid black;
+        width: 100%;
+        height: var(--height);
+    }
+
+</style>