Keep crew roster in a consistent sidebar

2026-07-10 19:17:39 -07:00
parent 3e912b9458
commit b9cbbda1a2
16 changed files with 159 additions and 273 deletions
@@ -0,0 +1,97 @@
+<script>
+    import { displayName, crewLabel } from '../lib/cards';
+    import CharacterSheet from './scene/CharacterSheet.svelte';
+
+    export let state;
+
+    let openTargetId = null;
+
+    $: captainId = state.game.captain_player_id;
+    $: crew = [...state.players].sort((a, b) => (a.role === 'deep' ? 1 : 0) - (b.role === 'deep' ? 1 : 0));
+    $: openTarget = openTargetId ? state.players.find(p => p.id === openTargetId) : null;
+
+    function iconFor(p) {
+        if (p.role === 'deep') return '🌊';
+        if (p.is_ghost) return '👻';
+        if (p.is_dead) return '💀';
+        return '🐀';
+    }
+
+    function safeArray(value) {
+        try { return JSON.parse(value || '[]'); } catch { return []; }
+    }
+
+    function statusFor(p) {
+        const phase = state.game.phase;
+        if (phase === 'lobby') {
+            if (p.is_creator) return 'Creator';
+            if (p.is_admin) return 'Admin';
+            return 'Crew member';
+        }
+        if (phase === 'character_creation') {
+            if (p.needs_reroll) return 'Spectating';
+            return safeArray(p.created_techniques).length === 3 ? 'Techniques submitted' : 'Writing sheet';
+        }
+        if (phase === 'swap_techniques') {
+            if (p.is_ready) return 'Done swapping';
+            const ownLeft = safeArray(p.held_techniques).filter(t => t.creator_id === p.id).length;
+            return `Swapping · ${ownLeft} own left`;
+        }
+        if (phase === 'assign_techniques') return p.tech_jack ? 'Ready' : 'Assigning face cards';
+        if (phase === 'scene_setup') {
+            if (p.needs_reroll) return 'Spectating';
+            if (p.role === 'deep') return 'The Deep';
+            if (p.role === 'pirat') return `Pi-Rat · Rank ${p.rank}`;
+            return 'Choosing a role…';
+        }
+        if (phase === 'between_scenes') {
+            const voted = (state.votes || []).some(v => v.voter_player_id === p.id);
+            const canVote = state.players.some(candidate =>
+                candidate.id !== p.id && candidate.role !== 'deep' && !candidate.is_dead && !candidate.needs_reroll
+            );
+            return `Rank ${p.rank} · ${voted ? 'Nomination done' : canVote ? 'Nominating…' : 'No vote'}`;
+        }
+        if (phase === 'deep_upkeep') return `Rank ${p.rank} · ${p.is_ready ? 'Ready' : 'Finishing upkeep…'}`;
+        if (phase === 'recruit_creation') return p.needs_reroll ? 'Creating a new Pi-Rat' : `Rank ${p.rank} · Helping recruits`;
+        if (phase === 'ended') {
+            const story = p.completed_personal_3 ? 'Story complete' : 'Still sailing';
+            return `Rank ${p.rank} · ${story}`;
+        }
+        return `Rank ${p.rank}`;
+    }
+</script>
+
+<aside class="crew-column phase-crew-column" aria-label="Crew roster">
+    <div class="crew-bubbles">
+        {#each crew as p (p.id)}
+            {#if state.game.phase === 'lobby'}
+                <div
+                    class="crew-bubble is-static"
+                    class:is-you={p.id === state.player.id}
+                >
+                    <span class="bubble-icon">{iconFor(p)}</span>
+                    <span class="bubble-name">{displayName(p)}</span>
+                    <span class="bubble-meta">{statusFor(p)}</span>
+                </div>
+            {:else}
+                <button
+                    class="crew-bubble"
+                    class:is-you={p.id === state.player.id}
+                    class:is-deep={p.role === 'deep'}
+                    class:is-dead={p.is_dead}
+                    class:is-ghost={p.is_ghost}
+                    title="View {p.name}'s character sheet"
+                    on:click={() => openTargetId = p.id}
+                >
+                    <span class="bubble-icon">{iconFor(p)}</span>
+                    <span class="bubble-name">{crewLabel(p, captainId)}</span>
+                    <span class="bubble-meta">{statusFor(p)}</span>
+                </button>
+            {/if}
+        {/each}
+    </div>
+</aside>
+
+{#if openTarget}
+    <CharacterSheet {state} target={openTarget} on:close={() => openTargetId = null} />
+{/if}