393 lines
8.6 KiB
Svelte
393 lines
8.6 KiB
Svelte
<script>
|
|
import { onMount } from 'svelte';
|
|
import { surfers, surfersCount, round } from '$lib/stores/surfers.js';
|
|
import { colors } from '$lib/stores/colors.js';
|
|
import { dev } from '$app/environment';
|
|
|
|
if (dev) {
|
|
console.log('Dev mode');
|
|
} else {
|
|
console.log('Not dev mode');
|
|
}
|
|
|
|
window.document.body.oncontextmenu = function () {
|
|
return false;
|
|
};
|
|
|
|
// const events = ['priority'];
|
|
|
|
$: start = false;
|
|
|
|
let footer_height = 8;
|
|
$: setup_height = (100 - footer_height) / $surfersCount - 2.2 / $surfersCount;
|
|
|
|
$: if (start && $surfers) {
|
|
window.sessionStorage.setItem('priority', JSON.stringify($surfers));
|
|
window.sessionStorage.setItem('surfers', JSON.stringify($surfersCount));
|
|
window.sessionStorage.setItem('status', JSON.stringify(start));
|
|
window.sessionStorage.setItem('round', JSON.stringify($round));
|
|
console.log(`saved: ${JSON.stringify($surfers)}`);
|
|
}
|
|
|
|
onMount(async () => {
|
|
let ses = window.sessionStorage.getItem('priority');
|
|
if (ses) {
|
|
$surfers = JSON.parse(ses);
|
|
$surfersCount = JSON.parse(window.sessionStorage.getItem('surfers'));
|
|
start = JSON.parse(window.sessionStorage.getItem('status'));
|
|
console.log(`loaded: ${JSON.stringify($surfers)}`);
|
|
}
|
|
|
|
// if (!dev) {
|
|
// const sse = StartSSE();
|
|
// return sse;
|
|
// }
|
|
});
|
|
|
|
function hasDuplicateColors() {
|
|
const colors = [];
|
|
|
|
console.log(JSON.stringify($surfers));
|
|
|
|
for (let i = 0; i < $surfersCount; i++) {
|
|
const color = $surfers[i].color;
|
|
|
|
if (colors.includes(color)) {
|
|
console.log(`duplicate color: ${color}`);
|
|
return true;
|
|
}
|
|
|
|
colors.push(color);
|
|
}
|
|
|
|
return false;
|
|
}
|
|
|
|
function ResetPriority() {
|
|
for (let i = 0; i < $surfersCount; i++) {
|
|
$surfers[i].priority = '';
|
|
}
|
|
}
|
|
|
|
function StartHeat() {
|
|
if (hasDuplicateColors()) {
|
|
alert('Duplicate colors');
|
|
return;
|
|
}
|
|
ResetPriority();
|
|
start = true;
|
|
SendPriority();
|
|
}
|
|
|
|
function StopHeat() {
|
|
window.sessionStorage.clear();
|
|
start = false;
|
|
ResetPriority();
|
|
SendPriority();
|
|
}
|
|
|
|
function AddSurfer() {
|
|
if ($surfersCount < 6) {
|
|
$surfersCount += 1;
|
|
}
|
|
}
|
|
|
|
function RemSurfer() {
|
|
if ($surfersCount > 2) {
|
|
$surfersCount -= 1;
|
|
}
|
|
}
|
|
|
|
function ResetLocalCache() {
|
|
window.sessionStorage.clear();
|
|
location.reload();
|
|
}
|
|
|
|
async function ChangePriority(id) {
|
|
console.log($surfers[id]);
|
|
if ($surfers[id].priority === 'P') {
|
|
for (let i = 0; i < $surfersCount; i++) {
|
|
if (i != id) {
|
|
let pos = parseInt($surfers[i].priority) - 1;
|
|
if (pos === 1) {
|
|
$surfers[i].priority = 'P';
|
|
} else {
|
|
$surfers[i].priority = pos.toString();
|
|
}
|
|
}
|
|
}
|
|
$surfers[id].priority = $surfersCount.toString();
|
|
} else if ($surfers[id].priority === '') {
|
|
console.log(`priority empty; pressed: [${id}] ${$surfers[id].priority}`);
|
|
for (let i = 0; i < $surfersCount; i++) {
|
|
console.log(`looping(${id}): ${i} - ${$surfers[i].priority}`);
|
|
if (i != id) {
|
|
if ($surfers[i].priority === '') {
|
|
console.log(`empty: [${i}] ${$surfers[i].priority}`);
|
|
continue;
|
|
} else {
|
|
console.log(`not empty: [${i}] ${$surfers[i].priority}`);
|
|
let pos = parseInt($surfers[i].priority) - 1;
|
|
if (pos === 1) {
|
|
$surfers[i].priority = 'P';
|
|
} else {
|
|
$surfers[i].priority = pos.toString();
|
|
}
|
|
}
|
|
}
|
|
$surfers[id].priority = $surfersCount.toString();
|
|
}
|
|
} else {
|
|
console.log(`pressed: [${id}] ${$surfers[id].priority}`);
|
|
let oldpos = parseInt($surfers[id].priority);
|
|
for (let i = 0; i < $surfersCount; i++) {
|
|
if (i != id) {
|
|
console.log(`pos: [${i}] ${$surfers[i].priority} ${$surfers[i].priority > oldpos}`);
|
|
if ($surfers[i].priority != 'P') {
|
|
let pos = parseInt($surfers[i].priority);
|
|
if (pos > oldpos) {
|
|
console.log(`newpos: ${$surfers[i].priority}`);
|
|
$surfers[i].priority = (pos - 1).toString();
|
|
}
|
|
}
|
|
} else {
|
|
$surfers[i].priority = $surfersCount.toString();
|
|
console.log(`last: [${i}] ${$surfers[i].priority}`);
|
|
}
|
|
}
|
|
}
|
|
|
|
if (!dev) {
|
|
SendPriority();
|
|
}
|
|
}
|
|
|
|
async function SendPriority() {
|
|
const res = await fetch(`/api/priority`, {
|
|
method: 'POST',
|
|
body: JSON.stringify({
|
|
surfers: $surfers,
|
|
count: $surfersCount
|
|
}),
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
}
|
|
});
|
|
console.log(`SendPriority: ${res.status} ${res.statusText}`);
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
|
|
</svelte:head>
|
|
|
|
{#if start}
|
|
<div class="container text-center">
|
|
<div class="row">
|
|
<div class="col">
|
|
<button class="button" on:click={StopHeat}>STOP</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<ul>
|
|
{#each Array($surfersCount) as _, id}
|
|
<li style="--height:{setup_height}vh">
|
|
{#if $surfers[id].priority == 'P'}
|
|
<div
|
|
class="priority"
|
|
id="p"
|
|
on:click={() => ChangePriority(id)}
|
|
on:keypress={() => ChangePriority(id)}
|
|
role="button"
|
|
tabindex="-1"
|
|
>
|
|
{$surfers[id].priority}
|
|
</div>
|
|
{:else}
|
|
<div
|
|
class="priority"
|
|
id="n"
|
|
on:click={() => ChangePriority(id)}
|
|
on:keypress={() => ChangePriority(id)}
|
|
role="button"
|
|
tabindex="-1"
|
|
>
|
|
{$surfers[id].priority}
|
|
</div>
|
|
{/if}
|
|
<div class="color" style:background-color={$surfers[id].color}>{$surfers[id].name}</div>
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
|
|
{:else}
|
|
|
|
<div class="container text-center">
|
|
<div class="row">
|
|
<div class="col align-items-left">
|
|
<div class="btn-toolbar btn-group-sm" role="toolbar">
|
|
<button class="btn btn-primary" on:click={AddSurfer}>+</button>
|
|
<button class="btn btn-outline-black disabled">{$surfersCount}</button>
|
|
<button class="btn btn-primary" on:click={RemSurfer}>-</button>
|
|
</div>
|
|
</div>
|
|
<div class="col align-items-center">
|
|
<button class="btn btn-success btn-sm" on:click={StartHeat}>START</button>
|
|
</div>
|
|
<div class="col align-items-right">
|
|
<button class="btn btn-danger btn-sm" on:click={ResetLocalCache}>Reset</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<table class="table is-hoverable is-striped is-bordered is-fullwidth">
|
|
<thead>
|
|
<tr>
|
|
<th> Name </th>
|
|
<td> Color </td>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{#each Array($surfersCount) as _, id}
|
|
<tr>
|
|
<th><input class="input" type="text" bind:value={$surfers[id].name}/></th>
|
|
<td>
|
|
<div class="select">
|
|
<select
|
|
name="color{id}"
|
|
{id}
|
|
bind:value={$surfers[id].color}
|
|
style="background-color: {$surfers[id].color};"
|
|
>
|
|
{#each $colors as color}
|
|
<option value={color} style="background-color: {color}">{color}</option>
|
|
{/each}
|
|
</select>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{:else}
|
|
<tr>
|
|
<th />
|
|
<td />
|
|
</tr>
|
|
{/each}
|
|
</tbody>
|
|
</table>
|
|
{/if}
|
|
|
|
<style>
|
|
:global(body) {
|
|
/* overflow-y: hidden; */
|
|
overflow-x: hidden;
|
|
margin: 0.2vmin;
|
|
align-content: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
li {
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin-top: 0.2vh;
|
|
margin-bottom: 0.2vh;
|
|
overflow: hidden;
|
|
height: var(--height);
|
|
}
|
|
|
|
.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%;
|
|
}
|
|
|
|
.priority#color {
|
|
background-color: lightgrey;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.priority#color select {
|
|
width: 100%;
|
|
/* margin-top: 40%; */
|
|
font-size: 6vmin;
|
|
}
|
|
|
|
.color {
|
|
display: flex;
|
|
width: 100vw;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.color input {
|
|
background-color: lightgray;
|
|
font-size: 5vmin;
|
|
}
|
|
|
|
.card {
|
|
background-color: aquamarine;
|
|
border-radius: 6%;
|
|
}
|
|
|
|
.myfooter {
|
|
display: inline-flex;
|
|
bottom: 0;
|
|
background-color: darkgrey;
|
|
/* border: 2px solid black; */
|
|
width: 100%;
|
|
height: var(--height);
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.control {
|
|
margin-left: 0;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.command {
|
|
margin-left: auto;
|
|
margin-right: 0;
|
|
}
|
|
|
|
.display {
|
|
margin-left: 1vmin;
|
|
margin-right: 1vmin;
|
|
font-size: 2.5vmin;
|
|
}
|
|
|
|
.mybutton {
|
|
margin-left: 1vmin;
|
|
margin-right: 1vmin;
|
|
border-radius: 4px;
|
|
border-style: inset;
|
|
font-size: 2.5vmin;
|
|
}
|
|
</style>
|