diff --git a/frontend/src/assets/css/scene-play.css b/frontend/src/assets/css/scene-play.css index 0d76e1e..2c39f7a 100644 --- a/frontend/src/assets/css/scene-play.css +++ b/frontend/src/assets/css/scene-play.css @@ -19,23 +19,6 @@ gap: 0.75rem; } -.crew-objectives-btn { - width: 100%; - padding: 0.6rem 0.5rem; - background: color-mix(in srgb, var(--accent) 14%, transparent); - border: 1px solid var(--accent); - border-radius: var(--radius-md); - color: var(--text); - font-family: var(--font-heading); - font-size: 0.9rem; - cursor: pointer; - transition: var(--transition-smooth); -} - -.crew-objectives-btn:hover { - background: color-mix(in srgb, var(--accent) 24%, transparent); -} - .crew-bubbles { display: flex; flex-direction: column; @@ -92,16 +75,63 @@ color: var(--text-muted); } +/* Crew Objectives toggle at the end of the roster */ +.crew-objectives-toggle { + display: flex; + align-items: center; + justify-content: space-between; + gap: 0.5rem; + 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); + color: var(--text); + font-family: var(--font-heading); + font-size: 0.85rem; + cursor: pointer; + transition: var(--transition-smooth); +} + +.crew-objectives-toggle:hover { + background: color-mix(in srgb, var(--accent) 22%, transparent); +} + +.crew-objectives-toggle .co-count { + font-weight: 700; + color: var(--accent); +} + +.crew-objectives-detail { + padding: 0.6rem 0.7rem; + background: var(--well); + border: 1px solid var(--edge); + border-radius: var(--radius-md); + display: flex; + flex-direction: column; + gap: 0.35rem; + font-size: 0.85rem; +} + /* On narrow screens the crew column becomes a horizontal strip above the board */ @media (max-width: 1100px) { .crew-bubbles { flex-direction: row; flex-wrap: wrap; + align-items: flex-start; } .crew-bubble { width: auto; flex: 1 1 140px; } + .crew-objectives-toggle { + width: auto; + flex: 1 1 100%; + } + .crew-objectives-detail { + flex: 1 1 100%; + } } .card-header { diff --git a/frontend/src/components/scene/CharacterSheet.svelte b/frontend/src/components/scene/CharacterSheet.svelte index b295834..951176a 100644 --- a/frontend/src/components/scene/CharacterSheet.svelte +++ b/frontend/src/components/scene/CharacterSheet.svelte @@ -1,7 +1,7 @@ - -
- -
{#each crew as p (p.id)} {/each} -
-
-{#if openTarget} - openTargetId = null} /> -{/if} - -{#if showObjectives} - + +{#if openTarget} + openTargetId = null} /> {/if} diff --git a/frontend/src/lib/cards.js b/frontend/src/lib/cards.js index 92b9403..70cac8b 100644 --- a/frontend/src/lib/cards.js +++ b/frontend/src/lib/cards.js @@ -89,3 +89,20 @@ export function displayName(p) { export function playerName(players, id) { return displayName(players.find(p => p.id === id)); } + +// The Pi-Rat's name with the "Recruit" honorific swapped for "Captain" (or +// "Captain" prepended once they've earned a real Name). Used to mark the Captain +// in the scene roster without a separate icon. +export function captainName(name) { + if (!name) return 'Captain'; + if (name.startsWith('Recruit ')) return 'Captain ' + name.slice('Recruit '.length); + return 'Captain ' + name; +} + +// displayName, but the Captain is shown as "Captain (player)". +export function crewLabel(p, captainId) { + if (!p) return '???'; + const rat = p.id === captainId ? captainName(p.name) : p.name; + if (p.player_name && p.player_name !== p.name) return `${rat} (${p.player_name})`; + return rat; +}