src/routes/+page.svelte

<script lang="ts">
    import Leaderboard from "./Leaderboard.svelte";
    import ModelDetails from "./ModelDetails.svelte";
    import Viewer from "./Viewer.svelte";
    import Vote from "./Vote.svelte";
    import About from "./About.svelte";

    interface Scene {
        name: string;
        url: string;
        thumbnail: string;
    }

    let currentView: "Leaderboard" | "Vote" | "ModelDetails" | "Viewer" | "About" = "Vote";
    let selectedEntry: { name: string; path: string } | null = null;
    let selectedScene: Scene | null = null;

    function goHome() {
        window.location.href = "/";
    }

    function showModelDetails(entry: { name: string; path: string }) {
        selectedEntry = entry;
        currentView = "ModelDetails";
    }

    function showScene(scene: Scene) {
        selectedScene = scene;
        currentView = "Viewer";
    }
</script>

<div class="container">
    <div on:pointerdown={goHome} class="banner">
        <h1>3D Arena</h1>
        <p>Generative 3D Leaderboard</p>
    </div>

    {#if currentView === "Leaderboard" || currentView === "Vote" || currentView === "About"}
        <div class="tabs">
            <button on:click={() => (currentView = "Vote")} class={currentView === "Vote" ? "active" : ""}>Vote</button>
            <button on:click={() => (currentView = "Leaderboard")} class={currentView === "Leaderboard" ? "active" : ""}
                >Leaderboard</button
            >
            <button on:click={() => (currentView = "About")} class={currentView === "About" ? "active" : ""}
                >About</button
            >
        </div>
    {/if}

    <div class="content">
        {#if currentView === "Leaderboard"}
            <Leaderboard onEntryClick={showModelDetails} />
        {:else if currentView === "Vote"}
            <Vote />
        {:else if currentView === "ModelDetails" && selectedEntry}
            <ModelDetails
                modelName={selectedEntry.name}
                modelPath={selectedEntry.path}
                onBack={() => (currentView = "Leaderboard")}
                onSceneClick={showScene}
            />
        {:else if currentView === "Viewer" && selectedScene && selectedEntry}
            <Viewer
                modelName={selectedEntry.name}
                scene={selectedScene}
                onBack={() => (currentView = "ModelDetails")}
            />
        {:else if currentView === "About"}
            <About />
        {/if}
    </div>
</div>