streaming/stream-score
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

+ stores

Browse source
This commit is contained in:
mikif70 2025-02-22 18:17:19 +01:00
parent f72576878d
commit 646c998fb1
4 changed files with 326 additions and 161 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
src/lib/stores/categories.js Normal file
View file

@ -0,0 +1,36 @@
import { readable } from "svelte/store"
export const categories = readable([
{
name: "Under 12 Women",
title: "U12 W",
},
{
name: "Under 12 Men",
title: "U12 M",
},
{
name: "Under 14 Women",
title: "U14 W",
},
{
name: "Under 14 Men",
title: "U14 M",
},
{
name: "Under 16 Women",
title: "U16 W",
},
{
name: "Under 16 Men",
title: "U16 M",
},
{
name: "Under 18 Women",
title: "U18 W",
},
{
name: "Under 18 Men",
title: "U18 M",
}
])

9
src/lib/stores/colors.js Normal file
View file

@ -0,0 +1,9 @@
import { readable } from "svelte/store"
export const colors = readable([
"black",
"red",
"green",
"yellow",
"white",
]);

40
src/lib/stores/rounds.js Normal file
View file

@ -0,0 +1,40 @@
import { readable } from "svelte/store"
export const rounds = readable([
{
name: "Qualifying",
title: "QR",
},
{
name: "Opening",
title: "OR",
},
{
name: "Elimination",
title: "ER",
},
{
name: "Round of 48",
title: "R48",
},
{
name: "Round of 32",
title: "R32",
},
{
name: "Round of 16",
title: "R16",
},
{
name: "Quarterfinal",
title: "QF",
},
{
name: "Semifinal",
title: "SF",
},
{
name: "Final",
title: "F",
}
])

198
src/routes/+page.svelte
View file

@ -1,56 +1,110 @@
<script>
let surfers = [
{ name: "", score: 0, colore: "black" },
{ name: "", score: 0, colore: "black" },
];
let colors = [
"red",
"yellow",
"green",
"white",
"blue",
"black",
"cyan",
"violet",
"pink",
];
let round = [
"Qualifying",
"Opening",
"Elimination",
"Round 48",
"Round 32",
"Round 16",
"Quarterfinal",
"Semifinal",
"Final",
];
let category = [
"U12 M",
"U12 W",
"U14 M",
"U14 W",
"U16 M",
"U16 W",
"U18 M",
"U18 W",
];
import { onMount } from "svelte";
import { colors } from "$lib/stores/colors.js";
import { rounds } from "$lib/stores/rounds.js";
import { categories } from "$lib/stores/categories.js";
let surfers = [];
let start = false;
let info = {
time: "00",
cat: "U12 M",
round: "Qualifying",
heat: "1",
};
let round_name = false;
onMount(async () => {
LoadFromLocalCache();
console.log(`onMount: ${JSON.stringify(surfers)}`);
});
function LoadFromLocalCache() {
let srf = window.sessionStorage.getItem("surfers");
if (srf) {
console.log(`load cache: ${srf}`);
surfers = JSON.parse(srf);
start = JSON.parse(window.sessionStorage.getItem("start"));
info = JSON.parse(window.sessionStorage.getItem("info"));
console.log(
`loaded cache: ${JSON.stringify(surfers)} - ${start} - ${info}`,
);
} else {
ResetLocalCache();
console.log(`no cache found`);
}
}
function ResetLocalCache() {
console.log("ResetLocalCache");
window.sessionStorage.clear();
surfers = [
{ name: "", score: 0, colore: "black" },
{ name: "", score: 0, colore: "black" },
];
start = false;
info = {
time: "00",
cat: "U12 M",
round: "Qualifying",
heat: "1",
};
round_name = false;
console.log(`reset store: ${JSON.stringify(surfers)}`);
}
function SaveToLocalCahe() {
window.sessionStorage.setItem("surfers", JSON.stringify(surfers));
window.sessionStorage.setItem("info", JSON.stringify(info));
window.sessionStorage.setItem("start", JSON.stringify(start));
console.log(`update cache: ${JSON.stringify(surfers)}`);
}
function StartHeat() {
start = true;
SaveToLocalCahe();
}
function StopHeat() {
start = false;
SaveToLocalCahe;
}
function CheckRound() {
if (!round_name) {
info.round = "Qualifying";
} else {
info.round = "QR";
}
}
function hasDuplicateColors() {
const colors = [];
console.log(JSON.stringify(priority.surfers));
for (let i = 0; i < priority.surfersCount; i++) {
const color = priority.surfers[i].color;
if (colors.includes(color)) {
console.log(`duplicate color: ${color}`);
return true;
}
colors.push(color);
}
return false;
}
</script>
<div id="score-container">
<div class="body">
<div id="score-container">
<div class="info-box">
<div class="Time">
{#if info.time > "00"}
<span id="time">{info.time}:00</span>
{/if}
</div>
<div class="Cat">
<small><span id="round">{info.cat}</span></small>
@ -72,14 +126,16 @@
id="color-{surfer.colore}">
</div>
<div class="surfer">{surfer.name}</div>
{#if surfer.score != 0}
<div class="score" id="score-1">{surfer.score}</div>
{/if}
</div>
{/if}
{/each}
</div>
</div>
<!-- Form -->
<div class="form-box">
<!-- Form -->
<div class="form-box">
<form>
<button type="submit" class="btn btn-primary mt-1 mb-3 w-100"
>Start</button>
@ -100,8 +156,8 @@
name="category"
aria-label="Category"
bind:value={info.cat}>
{#each category as cat}
<option value={cat}>{cat}</option>
{#each $categories as cat}
<option value={cat.title}>{cat.title}</option>
{/each}
</select>
</div>
@ -113,8 +169,22 @@
class="form-select"
aria-label="Round"
bind:value={info.round}>
{#each round as rnd}<option value={rnd}>{rnd}</option>{/each}
{#each $rounds as rnd}
{#if round_name}
<option value={rnd.title}>{rnd.name}</option>
{:else}
<option value={rnd.name}>{rnd.name}</option>
{/if}
{/each}
</select>
<div class="input-group-text">
<input
class="form-check-input mt-0"
type="checkbox"
bind:checked={round_name}
on:change={CheckRound}
aria-label="Checkbox for following text input" />
</div>
<span class="input-group-text">heat</span>
<input
type="text"
@ -128,7 +198,7 @@
<hr />
<div class="surfer">
<ul>
{#each surfers as id}
{#each surfers as surfer, id}
<li>
<div class="input-group">
<!-- <span class="input-group-text">colore</span> -->
@ -137,9 +207,9 @@
name="color"
aria-label="Color"
size="1"
bind:value={surfers[id].colore}
style="background-color: {surfers[id].colore};">
{#each colors as col}
bind:value={surfer.colore}
style="background-color: {surfer.colore};">
{#each $colors as col}
<option
value={col}
class="color"
@ -152,14 +222,14 @@
type="text"
class="form-control"
name="nome-{id}"
value="" />
bind:value={surfer.name} />
<span class="input-group-text">score</span>
<input
type="number"
class="form-control"
name="score-{id}"
value="8.5" />
bind:value={surfer.score} />
</div>
</li>
{/each}
@ -167,7 +237,18 @@
</div>
<button type="button" class="btn btn-primary mt-1 mb-1 w-100"
>Add</button>
<div class="btn-group w-100" role="group" aria-label="save">
<button
type="button"
class="btn btn-primary mt-1 mb-1 w-100"
on:click={SaveToLocalCahe}>Save</button>
<button
type="button"
class="btn btn-primary mt-1 mb-1 w-100"
on:click={ResetLocalCache}>Reset</button>
</div>
</form>
</div>
</div>
<style>
@ -218,7 +299,7 @@
.Cat {
grid-area: Cat;
font-size: 14px;
justify-self: center;
justify-self: start;
align-self: center;
margin-left: 30px;
#font-weight: bold;
@ -226,7 +307,7 @@
.Round {
grid-area: Round;
font-size: 14px;
justify-self: center;
justify-self: start;
align-self: center;
margin-left: 30px;
#font-weight: bold;
@ -234,7 +315,7 @@
.Heat {
grid-area: Heat;
font-size: 14px;
justify-self: center;
justify-self: start;
align-self: center;
margin-left: 30px;
#font-weight: bold;
@ -274,12 +355,11 @@
margin-right: 2px;
}
.form-box {
position: grid;
width: 400px;
width: 500px;
background: rgba(50, 50, 50, 0.7);
color: white;
margin-top: 150px;
margin-left: 100px;
margin-left: 450px;
margin-top: 100px;
padding: 10px;
}