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

Collapse between-scenes upkeep into a single panel

Browse Source 
During between_scenes there's now just one centered panel with the
voting controls, nomination progress, and Crew Rank Ledger. The separate
"Resting Deep Upkeep" panel (which only said hand refresh would happen
later) is rendered solely during deep_upkeep, where the actual discard/
redraw happens. Moved the rank ledger into the voting panel and added a
.between-grid.single layout.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Tim McCarthy
2026-06-14 10:57:55 -07:00
parent 44bbb88836
commit 8614a6c820
3 changed files with 31 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/assets/css/upkeep.css
View File

@@ -6,6 +6,14 @@
margin: 2rem 0;
}
/* Between scenes there's only the voting/roster panel — center it. */
.between-grid.single {
grid-template-columns: 1fr;
max-width: 640px;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 800px) {
.between-grid {
grid-template-columns: 1fr;

48
frontend/src/components/UpkeepPhase.svelte
View File

@@ -198,7 +198,7 @@
<p style="margin: 0;">🐀 A fresh recruit is on the way! Once upkeep wraps up, you and the crew will create your new Pi-Rat together.</p>
</div>
{/if}
<div class="between-grid">
<div class="between-grid" class:single={state.game.phase !== 'deep_upkeep'}>
<!-- Ranks and Voting Card -->
<div class="card glass-panel voting-card">
<h3>1. Pirate Ranking (Voting)</h3>
@@ -250,19 +250,30 @@
</div>
</div>
{/if}
<div class="roster-sheet-summary margin-top text-left glass-panel">
<h4>Crew Rank Ledger:</h4>
<ul class="ranks-ledger">
{#each state.players as p}
<li>
<strong>{displayName(p)}:</strong> Rank {p.rank}
{#if p.role === 'deep'}<span class="deep-badge">Deep</span>{:else if p.is_ghost}<span class="ghost-badge">Ghost</span>{:else}<span class="pirat-badge">Pi-Rat</span>{/if}
</li>
{/each}
</ul>
</div>
</div>
<!-- Resting Deep Player Card -->
<!-- Resting Deep Player Card — only the actual hand refresh, during deep_upkeep -->
{#if state.game.phase === 'deep_upkeep'}
<div class="card glass-panel deep-rest-card">
<h3>2. Resting Deep Upkeep</h3>
{#if state.player.role === "deep"}
<div class="deep-rest-panel glass-panel">
<p class="info-text">You controlled the Deep in the last scene and your Pi-Rat was resting. You will discard your current hand and redraw back up to your maximum hand size.</p>
{#if state.game.phase === 'between_scenes'}
<p class="info-text text-center gold-text" style="margin-top: 1rem;">Voting is currently in progress. Hand refresh will begin after voting concludes.</p>
{:else if state.game.phase === 'deep_upkeep' && state.player.is_ready}
{#if state.player.is_ready}
<!-- Confirmation: the refresh went through; show the freshly-drawn hand. -->
<div class="voted-confirmation-box glass-panel" style="margin-top: 1rem;">
<p class="success-text">✔️ Hand refreshed! You're holding {hand.length} card{hand.length === 1 ? '' : 's'} for the next scene.</p>
@@ -275,7 +286,7 @@
{/each}
</div>
<p class="info-text text-center" style="margin-top: 1rem;">Waiting for the rest of the crew to finish upkeep...</p>
{:else if state.game.phase === 'deep_upkeep'}
{:else}
<p class="info-text" style="margin-top: 1rem;">
<strong>Your Hand Size Limit: {maxHandSize} cards.</strong><br/>
Drag cards to the "Discard Pile" zone to discard them, or click them to move them.
@@ -329,25 +340,10 @@
{/if}
</div>
{:else}
{#if state.game.phase === 'between_scenes'}
<p class="info-text text-center">Your Pi-Rat was active. Your hand cards carry over to the next scene.</p>
{:else if state.game.phase === 'deep_upkeep'}
<p class="info-text text-center gold-text">Waiting for resting Deep player to refresh their hand...</p>
{/if}
<p class="info-text text-center gold-text">Waiting for resting Deep player to refresh their hand...</p>
{/if}
<div class="roster-sheet-summary margin-top text-left glass-panel">
<h4>Crew Rank Ledger:</h4>
<ul class="ranks-ledger">
{#each state.players as p}
<li>
<strong>{displayName(p)}:</strong> Rank {p.rank}
{#if p.role === 'deep'}<span class="deep-badge">Deep</span>{:else if p.is_ghost}<span class="ghost-badge">Ghost</span>{:else}<span class="pirat-badge">Pi-Rat</span>{/if}
</li>
{/each}
</ul>
</div>
</div>
{/if}
</div>
<!-- Next Scene Ready Up -->