stream-score/src/routes/+page.svelte

<script>
    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 wWidth = $state(window.innerWidth);
    // let wHeight = $state(window.innerHeight);

    let timer;

    let surfers = $state([]);
    let start = $state(false);

    let info = $state({
        category: "U12 M",
        round: "Qualifying",
        heat: "1",
        time: 0,
    });
    let mins = $state(0);
    let secs = $state(0);

    let round_name = $state(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 = [
            {
                id: 1,
                name: "",
                score: 0,
                color: "lightgray",
                priority: 0,
                delete: false,
            },
            {
                id: 2,
                name: "",
                score: 0,
                color: "lightgray",
                priority: 0,
                delete: false,
            },
        ];
        start = false;
        info = {
            category: "U12 M",
            round: "Qualifying",
            heat: "1",
            time: 0,
        };
        mins = info.time;
        secs = 0;
        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));
        console.log(`update cache: ${JSON.stringify(surfers)}`);
    }

    function StartHeat() {
        console.log("StartHeat");
        start = true;
        mins = info.time;
        secs = 0;
        SaveToLocalCahe();
        timer = setInterval(Timer, 1000);
    }

    function pad(n) {
        return n < 10 ? "0" + n : n;
    }

    function Timer() {
        if (mins == 0 && secs == 0) {
            StopHeat();
        }
        if (secs == 0) {
            mins = mins - 1;
            secs = 59;
        } else {
            secs = secs - 1;
        }
    }

    function StopHeat() {
        console.log("StopHeat");
        start = false;
        SaveToLocalCahe;
        clearInterval(timer);
    }

    function CheckRound() {
        if (!round_name) {
            info.round = "Qualifying";
        } else {
            info.round = "QR";
        }
    }

    function AddSurfer() {
        if (surfers.length < 5) {
            let newSurfer = {
                id: surfers.length + 1,
                name: "",
                score: 0,
                rank: 0,
                color: "lightgray",
                delete: true,
            };
            surfers.push(newSurfer);
            SaveToLocalCahe();
        }
    }

    function DelSurfer() {
        if (surfers.length > 2) {
            surfers.pop();
            SaveToLocalCahe();
        }
    }

    async function SendStatus() {
        if (dev) {
            return;
        }
        const res = await fetch(`/api/status`, {
            method: "POST",
            body: JSON.stringify({
                surfers: surfers,
                info: info,
                start: start,
            }),
            headers: {
                "Content-Type": "application/json",
            },
        });
        console.log(`SendPriority: ${JSON.stringify(info)}`);
    }
</script>

<!-- <svelte:window bind:innerWidth={wWidth} bind:innerHeight={wHeight} /> -->

<div class="body">
    <div id="score-container">
        <div class="info-box">
            <div class="Time">
                {#if mins >= 0}
                    <span id="time">{pad(mins)}:{pad(secs)}</span>
                {/if}
            </div>
            <div class="Cat">
                <small><span id="round">{info.category}</span></small>
            </div>
            <div class="Round">
                <small><span id="round">{info.round}</span></small>
            </div>
            <div class="Heat">
                <small><span id="heat">Heat {info.heat}</span></small>
            </div>
        </div>

        {#each surfers as surfer}
            {#if surfer.name != ""}
                <div class="score-box">
                    <div
                        class="color"
                        style="background-color: {surfer.color};"
                        id="color-{surfer.color}">
                    </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>

    <!-- Form -->
    <div class="form-box">
        <form>
            {#if start}
                <button
                    type="submit"
                    class="btn btn-danger mt-1 mb-3 w-100"
                    onclick={StopHeat}>Stop</button>
            {:else}
                <button
                    type="submit"
                    class="btn btn-primary mt-1 mb-3 w-100"
                    onclick={StartHeat}>Start</button>
            {/if}

            <div class="input-group mb-1">
                <span class="input-group-text">time</span>
                <input
                    disabled={start}
                    type="text"
                    class="form-control time"
                    name="time"
                    required
                    pattern="^[0-9][0-9]$"
                    maxlength="2"
                    size="2"
                    onchange={() => {
                        secs = 0;
                        mins = info.time;
                    }}
                    bind:value={info.time} />
                <span class="input-group-text">category</span>
                <select
                    class="form-select"
                    name="category"
                    aria-label="Category"
                    bind:value={info.category}>
                    {#each $categories as cat}
                        <option value={cat.title}>{cat.title}</option>
                    {/each}
                </select>
            </div>

            <div class="input-group">
                <span class="input-group-text">round</span>
                <select
                    name="round"
                    class="form-select"
                    aria-label="Round"
                    bind:value={info.round}>
                    {#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}
                        onchange={CheckRound}
                        aria-label="Checkbox for following text input" />
                </div>
                <span class="input-group-text">heat</span>
                <input
                    type="text"
                    class="form-control"
                    name="heat"
                    bind:value={info.heat}
                    pattern="^[0-9][0-9]?$"
                    maxlength="2"
                    size="2" />
            </div>
            <hr />
            <div class="surfer">
                <ul>
                    {#each surfers as surfer, id}
                        <li>
                            <div
                                class="d-grid gap-2 d-md-flex justify-content-md-center mb-2">
                                <!-- <div class="input-group"> -->
                                <!-- <span class="input-group-text">colore</span> -->
                                <select
                                    class="form-select w-25"
                                    name="color"
                                    aria-label="Color"
                                    size="1"
                                    bind:value={surfer.color}
                                    style="background-color: {surfer.color};">
                                    {#each $colors as col}
                                        <option
                                            value={col}
                                            class="color"
                                            style="background-color: {col}"
                                            >{col}</option>
                                    {/each}
                                </select>
                                <span class="badge bg-secondary">nome</span>
                                <input
                                    type="text"
                                    class="form-control"
                                    name="nome-{id}"
                                    bind:value={surfer.name} />

                                <span class="badge bg-secondary">score</span>
                                <input
                                    type="number"
                                    class="form-control w-25"
                                    name="score-{id}"
                                    bind:value={surfer.score} />
                            </div>
                        </li>
                    {/each}
                </ul>
            </div>
            <div class="d-grid gap-2 d-md-flex justify-content-md-center mb-2">
                <button
                    type="button"
                    class="btn btn-primary w-50"
                    onclick={AddSurfer}>Add</button>
                <button
                    type="button"
                    class="btn btn-warning w-50"
                    onclick={DelSurfer}>Del</button>

                <!-- <div class="btn-group w-100" role="group" aria-label="save"> -->
            </div>
            <div class="d-grid gap-2 d-md-flex justify-content-md-center mt-2">
                <button
                    type="button"
                    class="btn btn-primary w-50"
                    onclick={SaveToLocalCahe}>Save</button>
                <button
                    type="button"
                    class="btn btn-danger w-50"
                    onclick={ResetLocalCache}>Reset</button>
            </div>
            <!-- <div class="d-grid gap-2 d-md-flex justify-content-md-center mt-2">
                <button class="justify-content-md-center"
                    >{wWidth} - {wHeight}</button>
            </div> -->
        </form>
    </div>
</div>

<style>
    .body {
        background-color: lightgreen;
        color: black;
        font-family: Arial, sans-serif;
        min-height: 895px;
        min-width: 1024px;
    }
    .info-box {
        display: grid;
        top: 6px;
        left: 6px;
        width: 254px;
        padding-left: 6px;
        padding-right: 4px;
        background: rgba(40, 40, 40, 0.8);
        color: white;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        gap: 1px 1px;
        grid-template-areas:
            "Time Time Time Cat Cat"
            "Time Time Time Round Round"
            "Time Time Time Heat Heat";
        margin: 2px;
    }
    .score-box {
        display: grid;
        grid-template-columns: 1fr 4fr 1fr;
        grid-template-areas: "color surfer score";
        width: 254px;
        padding-left: 6px;
        padding-right: 6px;
        padding-top: 2px;
        padding-bottom: 2px;
        background: rgba(40, 40, 40, 0.8);
        color: white;
        margin-left: 2px;
    }
    .Time {
        grid-area: Time;
        font-size: 48px;
        font-weight: bold;
        justify-self: start;
        align-self: center;
    }
    .Cat {
        grid-area: Cat;
        font-size: 14px;
        justify-self: start;
        align-self: center;
        margin-left: 28px;
        #font-weight: bold;
    }
    .Round {
        grid-area: Round;
        font-size: 14px;
        justify-self: start;
        align-self: center;
        margin-left: 28px;
        #font-weight: bold;
    }
    .Heat {
        grid-area: Heat;
        font-size: 14px;
        justify-self: start;
        align-self: center;
        margin-left: 28px;
        #font-weight: bold;
    }
    .surfer {
        grid-area: surfer;
        display: flex;
        align-items: center;
        padding: 6px;
        width: 100%;
        align-content: center;
    }
    .surfer ul {
        list-style-type: none;
        margin-left: 0px;
        padding-left: 0px;
    }
    .surfer select {
        -moz-appearance: none; /* Firefox */
        -webkit-appearance: none; /* Safari and Chrome */
        appearance: none;
    }
    .color {
        grid-area: color;
        width: 30px;
        height: 30px;
        border-radius: 2px;
        margin-right: 10px;
        margin-top: 4px;
        margin-left: 4px;
    }
    .score {
        grid-area: score;
        font-weight: bold;
        text-align: start;
        align-content: center;
        margin-right: 2px;
    }
    .form-box {
        width: 700px;
        background: rgba(50, 50, 50, 0.7);
        color: white;
        margin-left: 550px;
        margin-top: 100px;
        padding: 10px;
    }

    .form-box .time {
        font-size: 16px;
        font-weight: bold;
        justify-self: start;
        align-self: center;
    }

    .form-box .surfer {
        font-size: 16px;
        font-weight: bold;
        justify-self: end;
    }
</style>