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

Join crew objectives toggle and checklist in one panel

Browse Source
This commit is contained in:
tim.mccarthy
2026-09-04 19:42:11 -07:00
parent 9b673cb8bc
commit ad9f450343
4 changed files with 49 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/assets/css/scene-play.css
+17 -7
View File
@@ -157,7 +157,14 @@
color: var(--text-muted);
}
/* Crew Objectives toggle at the end of the roster */
/* The toggle and revealed objectives share one continuous panel. */
.crew-objectives-panel {
background: color-mix(in srgb, var(--accent) 12%, transparent);
border: 1px solid var(--accent);
border-radius: var(--radius-md);
overflow: hidden;
}
.crew-objectives-toggle {
display: flex;
align-items: center;
@@ -166,9 +173,9 @@
width: 100%;
text-align: left;
padding: 0.55rem 0.7rem;
background: color-mix(in srgb, var(--accent) 12%, transparent);
border: 1px solid var(--accent);
border-radius: var(--radius-md);
background: transparent;
border: 0;
border-radius: 0;
color: var(--text);
font-family: var(--font-heading);
font-size: 0.85rem;
@@ -180,6 +187,11 @@
background: color-mix(in srgb, var(--accent) 22%, transparent);
}
.crew-objectives-toggle:focus-visible {
outline: 2px solid var(--accent);
outline-offset: -3px;
}
.crew-objectives-toggle .co-count {
font-weight: 700;
color: var(--accent);
@@ -187,9 +199,7 @@
.crew-objectives-detail {
padding: 0.6rem 0.7rem;
background: var(--well);
border: 1px solid var(--edge);
border-radius: var(--radius-md);
border-top: 1px solid var(--edge-accent);
display: flex;
flex-direction: column;
gap: 0.35rem;
frontend/src/components/scene/CrewColumn.svelte
+29 -27
View File
@@ -79,33 +79,35 @@
</button>
{/each}
<!-- Crew Objectives sits at the end of the roster and slides open in place -->
<button
class="crew-objectives-toggle"
aria-expanded={showObjectives}
on:click={() => showObjectives = !showObjectives}
>
<span class="co-label">{showObjectives ? '▾' : '▸'} Crew Objectives</span>
<span class="co-count">{crewDone}/3</span>
</button>
{#if showObjectives}
<div class="crew-objectives-detail" transition:slide>
{#if objError}<div class="alert alert-danger">{objError}</div>{/if}
<label class="checkbox-label">
<input type="checkbox" checked={state.game.completed_crew_1} disabled={!isDeep} on:change={() => toggleCrew('crew_1')}>
<span>Steal a Ship</span>
</label>
<label class="checkbox-label">
<input type="checkbox" checked={state.game.completed_crew_2} disabled={!isDeep} on:change={() => toggleCrew('crew_2')}>
<span>Choose a Captain</span>
</label>
<label class="checkbox-label">
<input type="checkbox" checked={state.game.completed_crew_3} disabled={!isDeep} on:change={() => toggleCrew('crew_3')}>
<span>Commit Piracy</span>
</label>
{#if isDeep}<p class="info-text" style="font-size: 0.75rem; margin: 0.25rem 0 0;">As the Deep, tick these off as the crew earns them.</p>{/if}
</div>
{/if}
<!-- One shared panel keeps the toggle attached to its contents. -->
<div class="crew-objectives-panel">
<button
class="crew-objectives-toggle"
aria-expanded={showObjectives}
on:click={() => showObjectives = !showObjectives}
>
<span class="co-label">{showObjectives ? '▾' : '▸'} Crew Objectives</span>
<span class="co-count">{crewDone}/3</span>
</button>
{#if showObjectives}
<div class="crew-objectives-detail" transition:slide>
{#if objError}<div class="alert alert-danger">{objError}</div>{/if}
<label class="checkbox-label">
<input type="checkbox" checked={state.game.completed_crew_1} disabled={!isDeep} on:change={() => toggleCrew('crew_1')}>
<span>Steal a Ship</span>
</label>
<label class="checkbox-label">
<input type="checkbox" checked={state.game.completed_crew_2} disabled={!isDeep} on:change={() => toggleCrew('crew_2')}>
<span>Choose a Captain</span>
</label>
<label class="checkbox-label">
<input type="checkbox" checked={state.game.completed_crew_3} disabled={!isDeep} on:change={() => toggleCrew('crew_3')}>
<span>Commit Piracy</span>
</label>
{#if isDeep}<p class="info-text" style="font-size: 0.75rem; margin: 0.25rem 0 0;">As the Deep, tick these off as the crew earns them.</p>{/if}
</div>
{/if}
</div>
</div>
</div>
frontend/src/lib/changelog.js
+2 -1
View File
@@ -6,10 +6,11 @@
// - Add a CHANGELOG entry only when a commit changes something players can
// see. Skip refactors, tests, and tooling. Keep wording player-facing.
export const VERSION = 43;
export const VERSION = 44;
// Newest first. Each entry: { version, date: 'YYYY-MM-DD', changes: [string, ...] }.
export const CHANGELOG = [
{ version: 44, date: '2026-09-04', changes: ['Crew Objectives opens as one connected panel, with the toggle and checklist sharing a border and background.'] },
{ version: 43, date: '2026-09-04', changes: ['The crew roster keeps players in the same order when roles or ranks change, including when someone becomes the Deep.'] },
{ version: 42, date: '2026-09-04', changes: ['Gats require a description, including older Gats that were left blank. Read descriptions on character sheets or hover over Gat icons in the crew roster.', 'Gat descriptions and prompts follow Gat Taxes correctly and clear when you create a new recruit.'] },
{ version: 41, date: '2026-09-04', changes: ['Dismiss a completed duel once you have read the result. Other players can still read it, and dismissed results stay hidden after a reload.'] },