streaming/Priority
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

+light version

Browse source 
+ setup
This commit is contained in:
Miki 2024-01-09 14:48:02 +01:00
parent 0332c08db6
commit 5b0644d2cd
7 changed files with 149 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/package.json
View file

@ -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",

21
frontend/pnpm-lock.yaml generated
View file

@ -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

1
frontend/src/lib/color.svelte
View file

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

12
frontend/src/routes/+page.svelte
View file

@ -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>

0
frontend/src/routes/video/h/+page.svelte → frontend/src/routes/light/h/+page.svelte
View file

133
frontend/src/routes/light/setup/+page.svelte Normal file
View file

@ -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>

0
frontend/src/routes/video/v/+page.svelte → frontend/src/routes/light/v/+page.svelte
View file