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

24
frontend/src/components/SceneSetupPhase.svelte
View File

@@ -52,12 +52,12 @@
<p class="description">Select your role for the upcoming scene. There must be at least one Pi-Rat and one Deep player. If you played the Deep in the last scene, you must play a Pi-Rat this scene!</p>
{#if state.game.current_scene_number === 1}
<div class="glass-panel" style="max-width: 700px; margin: 0 auto 1.5rem; padding: 1rem 1.5rem; border: 1px dashed var(--gold); border-radius: 8px; background: rgba(212, 175, 55, 0.08); text-align: left;">
<h4 style="color: var(--gold); margin: 0 0 0.5rem 0; font-family: var(--font-heading);">🚢 First Scene Framing</h4>
<div class="notice-banner accent">
<h4>🚢 First Scene Framing</h4>
<p class="info-text" style="margin: 0; font-size: 0.95rem;">
The first scene must establish that the Pi-Rats are <strong>on a ship they can steal</strong> (or have an immediate opportunity to steal one). <strong>Don't start far from water!</strong>
{#if state.player.role === 'deep'}
<br/><span style="color: var(--gold);">You're playing the Deep — once the scene starts, describe where the crew is and what ship is ripe for the taking before calling any Challenges.</span>
<br/><span class="text-accent">You're playing the Deep — once the scene starts, describe where the crew is and what ship is ripe for the taking before calling any Challenges.</span>
{/if}
</p>
</div>
@@ -85,16 +85,16 @@
<div class="role-restrictions mt-4">
{#if !allowedRoles.includes('pirat')}
{#if state.game.current_scene_number === 1}
<p class="text-red-400 text-sm italic">You start at Rank 3, so you must play The Deep for the first scene!</p>
<p class="text-danger text-sm italic">You start at Rank 3, so you must play The Deep for the first scene!</p>
{:else}
<p class="text-red-400 text-sm italic">You are the only eligible player for The Deep this scene!</p>
<p class="text-danger text-sm italic">You are the only eligible player for The Deep this scene!</p>
{/if}
{/if}
{#if !allowedRoles.includes('deep')}
{#if state.game.current_scene_number === 1}
<p class="text-red-400 text-sm italic">You start at Rank 1, so you must play your Pi-Rat for the first scene!</p>
<p class="text-danger text-sm italic">You start at Rank 1, so you must play your Pi-Rat for the first scene!</p>
{:else}
<p class="text-red-400 text-sm italic">You played The Deep last scene, so you must play a Pi-Rat!</p>
<p class="text-danger text-sm italic">You played The Deep last scene, so you must play a Pi-Rat!</p>
{/if}
{/if}
</div>
@@ -106,7 +106,7 @@
<div class="roster-list" id="scene-roster-list">
{#each state.players as p}
<div class="roster-item">
<span class="player-name">{displayName(p)} <span class="text-sm text-gray-400">(Rank {p.rank})</span></span>
<span class="player-name">{displayName(p)} <span class="text-sm text-muted">(Rank {p.rank})</span></span>
{#if p.role === 'pirat'}
<span class="role-badge pirat">Pi-Rat</span>
{:else if p.role === 'deep'}
@@ -132,13 +132,13 @@
{starting ? 'Starting Scene...' : 'Confirm Roles & Shuffle Deck'}
</button>
{:else if !allRolesAssigned}
<p class="text-gray-400 italic mt-4">Waiting for all players to choose a role...</p>
<p class="text-muted italic mt-4">Waiting for all players to choose a role...</p>
{:else if !deepPlayer}
<p class="text-red-400 italic mt-4">Someone must play as The Deep!</p>
<p class="text-danger italic mt-4">Someone must play as The Deep!</p>
{:else if !piratPlayer}
<p class="text-red-400 italic mt-4">Someone must play as a Pi-Rat!</p>
<p class="text-danger italic mt-4">Someone must play as a Pi-Rat!</p>
{:else}
<p class="text-gray-400 italic mt-4">Waiting for The Deep or Creator to start the scene...</p>
<p class="text-muted italic mt-4">Waiting for The Deep or Creator to start the scene...</p>
{/if}
</div>
</div>