+start & stop
This commit is contained in:
parent
9324d2a367
commit
f4d8320817
1 changed files with 51 additions and 32 deletions
|
@ -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,38 +38,55 @@
|
|||
|
||||
</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}
|
||||
{#if start}
|
||||
<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">
|
||||
<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}
|
||||
<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>
|
||||
<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.clear(); location.reload();}} />
|
||||
<span style:padding-left="16px"></span>
|
||||
<Button label="START" handleClick={() => {start = true;}} />
|
||||
|
||||
</div>
|
||||
<Button label="Reset" handleClick={() => {saved = false; window.sessionStorage.clear(); location.reload();}} />
|
||||
<span style:padding-left="16px"></span>
|
||||
<Button label="START" handleClick={() => {start = true;}} />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
:global(body) {
|
||||
|
|
Loading…
Add table
Reference in a new issue