Re-theme the app: token-based CSS and a full face lift
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:
@@ -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>
|
||||
|
||||
@@ -24,38 +24,41 @@
|
||||
</script>
|
||||
|
||||
<div class="welcome-container">
|
||||
<div class="header">
|
||||
<h1>RATS with GATS</h1>
|
||||
<p class="subtitle">A Remote Play Companion App</p>
|
||||
</div>
|
||||
<header class="welcome-hero">
|
||||
<p class="hero-overline">A Remote Play Companion for</p>
|
||||
<h1 class="wordmark">Rats <span class="amp">with</span> Gats</h1>
|
||||
<p class="subtitle">Stowaway rats, transformed by math magic, out to steal a ship and commit some piracy.</p>
|
||||
<div class="hero-flourish" aria-hidden="true">🐀 ⚓ 🐀</div>
|
||||
</header>
|
||||
|
||||
<div class="card creation-card">
|
||||
<h2>Start a New Game</h2>
|
||||
<div class="glass-panel creation-card">
|
||||
<h2>Muster a New Crew</h2>
|
||||
<form on:submit|preventDefault={createGame}>
|
||||
<div class="form-group">
|
||||
<label for="crewName">Crew Name</label>
|
||||
<input
|
||||
type="text"
|
||||
id="crewName"
|
||||
bind:value={crewName}
|
||||
required
|
||||
placeholder="e.g. The Salty Dogs"
|
||||
class="form-control input-large"
|
||||
<input
|
||||
type="text"
|
||||
id="crewName"
|
||||
bind:value={crewName}
|
||||
required
|
||||
placeholder="e.g. The Salty Dogs"
|
||||
class="input-field input-large"
|
||||
autocomplete="off"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
{#if error}
|
||||
<div class="alert alert-danger">{error}</div>
|
||||
{/if}
|
||||
|
||||
<button type="submit" class="btn btn-primary btn-large btn-block mt-4" disabled={creating}>
|
||||
<button type="submit" class="btn btn-primary btn-large btn-full" disabled={creating}>
|
||||
{creating ? 'Creating...' : 'Create Game'}
|
||||
</button>
|
||||
</form>
|
||||
<p class="join-hint">Joining someone else's crew? Ask the game creator for the join link from their lobby.</p>
|
||||
</div>
|
||||
|
||||
<div class="links mt-4">
|
||||
<a href="/rules" class="text-muted">Read the Rules</a>
|
||||
<div class="welcome-links">
|
||||
<a href="/rules" target="_blank" rel="noopener" class="btn btn-secondary">📖 Read the Rules</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -26,11 +26,12 @@
|
||||
</script>
|
||||
|
||||
<div class="welcome-container">
|
||||
<div class="header">
|
||||
<h1>Join Crew</h1>
|
||||
</div>
|
||||
<header class="welcome-hero">
|
||||
<p class="hero-overline">Rats with Gats</p>
|
||||
<h1 class="wordmark">Join the Crew</h1>
|
||||
</header>
|
||||
|
||||
<div class="card creation-card">
|
||||
<div class="glass-panel creation-card">
|
||||
<h2>Enter your name</h2>
|
||||
<p class="info-text" style="margin-bottom: 1rem;">
|
||||
This is <strong>your</strong> name as a player, not your Pi-Rat's. Your Pi-Rat will be known
|
||||
@@ -44,7 +45,7 @@
|
||||
id="playerName"
|
||||
bind:value={playerName}
|
||||
required
|
||||
class="form-control input-large"
|
||||
class="input-field input-large"
|
||||
autocomplete="off"
|
||||
autofocus
|
||||
/>
|
||||
@@ -54,7 +55,7 @@
|
||||
<div class="alert alert-danger">{error}</div>
|
||||
{/if}
|
||||
|
||||
<button type="submit" class="btn btn-primary btn-large btn-block mt-4" disabled={joining}>
|
||||
<button type="submit" class="btn btn-primary btn-large btn-full mt-4" disabled={joining}>
|
||||
{joining ? 'Joining...' : 'Join Game'}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
Reference in New Issue
Block a user