kuldvillak-mvp-ei-forki/src/routes/kuldvillak/+page.svelte

<script lang="ts">
    import { Settings } from "$lib/components";
    import { KvButtonPrimary, KvLogo } from "$lib/components/kuldvillak/ui";
    import * as m from "$lib/paraglide/messages";

    let settingsOpen = $state(false);
    let fileInput: HTMLInputElement;

    function openSettings() {
        settingsOpen = true;
    }

    function handleLoadGame(event: Event) {
        const file = (event.target as HTMLInputElement).files?.[0];
        if (!file) return;
        // Store file data and navigate to editor
        const reader = new FileReader();
        reader.onload = (e) => {
            try {
                const data = JSON.parse(e.target?.result as string);
                localStorage.setItem(
                    "kuldvillak-editor-autosave",
                    JSON.stringify(data),
                );
                window.location.href = "/kuldvillak/edit";
            } catch {
                console.error("Invalid game file");
            }
        };
        reader.readAsText(file);
    }
</script>

<svelte:head>
    <title>Kuldvillak - Ultimate Gaming</title>
</svelte:head>

<div
    class="relative min-h-screen flex items-center justify-center overflow-hidden"
>
    <!-- Background Grid -->
    <div class="kv-grid-bg absolute inset-0 z-0"></div>

    <!-- Content -->
    <div class="relative z-10 flex flex-col items-center gap-8 md:gap-16 p-4">
        <!-- Kuldvillak Logo -->
        <KvLogo
            size="lg"
            class="md:h-48 md:max-w-[768px] drop-shadow-[6px_6px_4px_rgba(0,0,0,0.5)]"
        />

        <!-- Menu Buttons -->
        <div
            class="flex flex-col gap-2 p-2 w-56 md:w-64 bg-kv-black border-2 border-kv-black"
        >
            <KvButtonPrimary
                href="/kuldvillak/edit"
                class="w-full !text-lg md:!text-2xl !py-3 md:!py-4"
            >
                {m.kv_new_game()}
            </KvButtonPrimary>
            <KvButtonPrimary
                onclick={() => fileInput.click()}
                class="w-full !text-lg md:!text-2xl !py-3 md:!py-4"
            >
                {m.kv_load_game()}
            </KvButtonPrimary>
            <input
                type="file"
                accept=".json"
                class="hidden"
                bind:this={fileInput}
                onchange={handleLoadGame}
            />
            <KvButtonPrimary
                onclick={openSettings}
                class="w-full !text-lg md:!text-2xl !py-3 md:!py-4"
            >
                {m.kv_settings()}
            </KvButtonPrimary>
            <KvButtonPrimary
                href="/"
                class="w-full !text-lg md:!text-2xl !py-3 md:!py-4"
            >
                {m.kv_exit()}
            </KvButtonPrimary>
        </div>
    </div>
</div>

<Settings bind:open={settingsOpen} />

<style>
    .kv-grid-bg {
        background-color: var(--kv-blue);
        background-image: linear-gradient(
                color-mix(in srgb, var(--kv-background) 50%, transparent) 2px,
                transparent 2px
            ),
            linear-gradient(
                90deg,
                color-mix(in srgb, var(--kv-background) 50%, transparent) 2px,
                transparent 2px
            );
        background-size: 60px 60px;
    }

    @media (max-width: 768px) {
        .kv-grid-bg {
            background-size: 40px 40px;
        }
    }
</style>