Switch to Svelte

frontend/src/pages/Admin.svelte

@@ -0,0 +1,89 @@
+<script>
+    import { onMount } from 'svelte';
+    import { apiRequest } from '../lib/api';
+
+    export let params = {};
+    let gameId = params.id;
+    let adminKey = '';
+
+    let data = null;
+    let error = '';
+
+    onMount(() => {
+        // Try to load admin_key from local storage
+        adminKey = localStorage.getItem(`admin_key_${gameId}`) || '';
+        if (adminKey) {
+            loadAdminData();
+        }
+    });
+
+    async function loadAdminData() {
+        if (!adminKey) return;
+        try {
+            data = await apiRequest(`/game/${gameId}/admin?key=${encodeURIComponent(adminKey)}`);
+            error = '';
+        } catch (err) {
+            error = err.message;
+            data = null;
+        }
+    }
+</script>
+
+<div class="max-w-4xl mx-auto p-4 space-y-6">
+    <h1 class="text-3xl font-bold text-gold">Admin Panel</h1>
+
+    {#if !data}
+        <div class="card p-6">
+            <h2 class="text-xl mb-4">Enter Admin Key</h2>
+            <form on:submit|preventDefault={loadAdminData} class="flex gap-4">
+                <input type="text" bind:value={adminKey} class="form-control flex-grow" placeholder="Admin Key" required/>
+                <button type="submit" class="btn btn-primary">Login</button>
+            </form>
+            {#if error}
+                <div class="alert alert-danger mt-4">{error}</div>
+            {/if}
+        </div>
+    {:else}
+        <div class="card p-6">
+            <h2 class="text-xl font-bold text-silver mb-4">Game: {data.game.crew_name}</h2>
+            <p><strong>Phase:</strong> {data.game.phase}</p>
+            <p><strong>Admin Key:</strong> <span class="bg-dark-900 px-2 py-1 font-mono text-sm">{data.game.admin_key}</span></p>
+
+            <h3 class="text-xl font-bold text-silver mt-8 mb-4">Players</h3>
+            <table class="w-full text-left bg-dark-900 rounded border border-gray-700">
+                <thead>
+                    <tr class="border-b border-gray-700">
+                        <th class="p-3">Name</th>
+                        <th class="p-3">Role</th>
+                        <th class="p-3">Status</th>
+                        <th class="p-3">Rank</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {#each data.players as p}
+                        <tr class="border-b border-gray-800">
+                            <td class="p-3">{p.name}</td>
+                            <td class="p-3">
+                                {#if p.role === 'deep'} 🌊 Deep
+                                {:else if p.role === 'pirat'} 🐀 Pi-Rat
+                                {:else} None
+                                {/if}
+                            </td>
+                            <td class="p-3">
+                                {#if p.is_ghost} 👻 Ghost
+                                {:else if p.is_dead} 💀 Dead
+                                {:else} Alive
+                                {/if}
+                            </td>
+                            <td class="p-3">{p.rank}</td>
+                        </tr>
+                    {/each}
+                </tbody>
+            </table>
+            
+            <div class="mt-8">
+                <a href="/#/game/{gameId}/join" class="btn btn-secondary">Back to Game Join Page</a>
+            </div>
+        </div>
+    {/if}
+</div>