diff --git a/frontend/package.json b/frontend/package.json
index fcb2339..a2b0c07 100644
--- a/frontend/package.json
+++ b/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",
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index d837c1e..0890d8b 100644
--- a/frontend/pnpm-lock.yaml
+++ b/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
- version: 2.0.6(@sveltejs/vite-plugin-svelte@3.0.1)(svelte@4.2.8)(vite@5.0.11)
+ specifier: ^2.1.0
+ 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):
- resolution: {integrity: sha512-dnHtyjBLGXx+hrZQ9GuqLlSfTBixewJaByUVWai7LmB4dgV3FwkK155OltEgONDQW6KW64hLNS/uojdx3uC2/g==}
+ /@sveltejs/kit@2.1.0(@sveltejs/vite-plugin-svelte@3.0.1)(svelte@4.2.8)(vite@5.0.11):
+ 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
diff --git a/frontend/src/lib/color.svelte b/frontend/src/lib/color.svelte
index 5e5b6ac..5f639f0 100644
--- a/frontend/src/lib/color.svelte
+++ b/frontend/src/lib/color.svelte
@@ -25,5 +25,6 @@
select {
font-size: 1.2rem;
width: fit-content;
+ border-radius: 4px;
}
</style>
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 56c1633..2c4be7f 100644
--- a/frontend/src/routes/+page.svelte
+++ b/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>
-<br />
-<a href="pri">Priority test</a>
-<br />
-<a href="video/h">horizontal</a>
-<br />
-<a href="video/v">vertical</a>
+<a href="light/v">vertical</a>
diff --git a/frontend/src/routes/video/h/+page.svelte b/frontend/src/routes/light/h/+page.svelte
similarity index 100%
rename from frontend/src/routes/video/h/+page.svelte
rename to frontend/src/routes/light/h/+page.svelte
diff --git a/frontend/src/routes/light/setup/+page.svelte b/frontend/src/routes/light/setup/+page.svelte
new file mode 100644
index 0000000..639f179
--- /dev/null
+++ b/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>
diff --git a/frontend/src/routes/video/v/+page.svelte b/frontend/src/routes/light/v/+page.svelte
similarity index 100%
rename from frontend/src/routes/video/v/+page.svelte
rename to frontend/src/routes/light/v/+page.svelte