tim.mccarthy/pirats
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Re-theme the app: token-based CSS and a full face lift

Browse Source 
CSS refactor: every color, font, radius, and shadow is now defined once
in theme.css; all other styles derive translucent variants with
color-mix(), so re-theming means editing one file. Removed the
duplicate core.css/style.css import chains, dead styles, and the
Bootstrap/Tailwind orphan classes that were silently unstyled
(the main reason the splash page looked broken).

New "Lantern & Brine" look: brass and parchment on a lantern-lit
ink-navy night, Pirata One wordmark with Alegreya SC/Sans body fonts
(self-hosted via fontsource — they were previously referenced but
never loaded), parchment-faced playing cards, and a rebuilt splash
page. Inline color styles in components were replaced with semantic
classes (prompt-box, notice-banner, status chips, etc.), the rulebook's
embedded palette was updated to match, and the leftover Vite favicon
and "frontend" page title were replaced.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Tim McCarthy
2026-06-12 06:50:00 -07:00
parent ba6bf35579
commit 0744893e7b
36 changed files with 1442 additions and 1185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
frontend/src/pages/Admin.svelte
View File

@@ -42,14 +42,14 @@
}
</script>
<div class="max-w-4xl mx-auto p-4 space-y-6">
<h1 class="text-3xl font-bold text-gold">Admin Panel</h1>
<div class="admin-page">
<h1>Admin Panel</h1>
{#if !data}
<div class="card p-6">
<h2 class="text-xl mb-4">Enter Admin Key</h2>
<div class="card">
<h2 class="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/>
<input type="text" bind:value={adminKey} class="input-field flex-grow" placeholder="Admin Key" required/>
<button type="submit" class="btn btn-primary">Login</button>
</form>
{#if error}
@@ -57,42 +57,42 @@
{/if}
</div>
{:else}
<div class="card p-6">
<h2 class="text-xl font-bold text-silver mb-4">Game: {data.game.crew_name}</h2>
<div class="card">
<h2 class="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>
<p><strong>Admin Key:</strong> <span class="admin-key-chip">{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">
<h3 class="mt-8 mb-4">Players</h3>
<table class="admin-table">
<thead>
<tr class="border-b border-gray-700">
<th class="p-3">Pi-Rat</th>
<th class="p-3">Player</th>
<th class="p-3">Role</th>
<th class="p-3">Status</th>
<th class="p-3">Rank</th>
<th class="p-3">Re-join Link</th>
<tr>
<th>Pi-Rat</th>
<th>Player</th>
<th>Role</th>
<th>Status</th>
<th>Rank</th>
<th>Re-join Link</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">{p.player_name || p.name}</td>
<td class="p-3">
<tr>
<td>{p.name}</td>
<td>{p.player_name || p.name}</td>
<td>
{#if p.role === 'deep'} 🌊 Deep
{:else if p.role === 'pirat'} 🐀 Pi-Rat
{:else} None
{/if}
</td>
<td class="p-3">
<td>
{#if p.is_ghost} 👻 Ghost
{:else if p.is_dead} 💀 Dead
{:else} Alive
{/if}
</td>
<td class="p-3">{p.rank}</td>
<td class="p-3">
<td>{p.rank}</td>
<td>
<div class="link-copy-action">
<a href={rejoinLink(p.id)} class="btn btn-secondary btn-small">Open</a>
<button on:click={() => copyRejoinLink(p.id)} class="btn btn-secondary btn-small">
@@ -104,7 +104,7 @@
{/each}
</tbody>
</table>
<div class="mt-8">
<a href="/#/game/{gameId}/join" class="btn btn-secondary">Back to Game Join Page</a>
</div>