+start & stop

This commit is contained in:
Miki 2024-01-09 15:03:52 +01:00
parent 9324d2a367
commit f4d8320817

View file

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