90 lines
3.3 KiB
Svelte
90 lines
3.3 KiB
Svelte
<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>
|