Fable will fix it! Pt 2

frontend/src/components/scene/CharacterSheet.svelte

@@ -0,0 +1,156 @@
+<script>
+    import { apiRequest } from '../../lib/api';
+    import { getCardDisplay, isJoker } from '../../lib/cards';
+
+    export let state;
+
+    let error = '';
+    let newNameInput = '';
+    let pvpOpponentId = '';
+    let pvpCard = '';
+
+    $: hand = state.player.hand_cards ? JSON.parse(state.player.hand_cards) : [];
+    $: scenePirats = state.players.filter(p => p.role === 'pirat');
+    $: duelTargets = scenePirats.filter(p => p.id !== state.player.id && !p.is_dead);
+
+    async function submitNewName() {
+        if (!newNameInput.trim()) return;
+        error = '';
+        try {
+            await apiRequest(`/game/${state.game.id}/player/${state.player.id}/set-name`, 'POST', {
+                new_name: newNameInput.trim()
+            });
+            newNameInput = '';
+        } catch(e) {
+            error = e.message;
+        }
+    }
+
+    async function createPvp() {
+        error = '';
+        try {
+            await apiRequest(`/game/${state.game.id}/player/${state.player.id}/challenge/pvp/create`, 'POST', {
+                defender_id: pvpOpponentId,
+                card_code: pvpCard
+            });
+            pvpOpponentId = '';
+            pvpCard = '';
+        } catch(e) {
+            error = e.message;
+        }
+    }
+</script>
+
+<div class="card glass-panel sheet-card">
+    <h3>🐀 {state.player.name}'s Character Sheet</h3>
+
+    <div class="character-sheet-details">
+        {#if error}
+            <div class="alert alert-danger">{error}</div>
+        {/if}
+
+        {#if state.player.is_dead}
+            <div class="sheet-group prompt-box" style="background: rgba(255, 42, 95, 0.1); border: 1px dashed var(--red-suit); padding: 1rem; border-radius: 8px; margin-bottom: 1rem; text-align: center;">
+                <h4 style="color: var(--red-suit); margin-top: 0; font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700;">💀 You have Died / Retired!</h4>
+                <p class="info-text" style="margin-bottom: 0; font-size: 0.9rem;">Your story arc is complete. You will choose to become a Ghost or roll a new character during the upkeep phase between scenes.</p>
+            </div>
+        {/if}
+
+        {#if state.player.is_ghost}
+            <div class="sheet-group prompt-box" style="background: rgba(120, 150, 180, 0.1); border: 1px dashed #7890a8; padding: 1rem; border-radius: 8px; margin-bottom: 1rem; text-align: center;">
+                <h4 style="color: #a0b0c0; margin-top: 0; font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700;">👻 Playing as a Ghost</h4>
+                <p class="info-text" style="margin-bottom: 0; font-size: 0.9rem;">You are in the Ghost World (grayscale view). You cannot interact well with the living but you can still help them resolve challenges!</p>
+            </div>
+        {/if}
+
+        {#if state.player.needs_name}
+            <div class="sheet-group prompt-box" style="background: rgba(212, 175, 55, 0.1); border: 1px dashed var(--gold); padding: 1rem; border-radius: 8px; margin-bottom: 1rem;">
+                <h4 style="color: var(--gold); margin-top: 0;">🏴‍☠️ You Earned a Name!</h4>
+                <p class="info-text" style="margin-bottom: 0.5rem;">You completed your second objective and ranked up! What is your new Pirate Name?</p>
+                <div style="display: flex; gap: 0.5rem;">
+                    <input type="text" bind:value={newNameInput} class="form-control" placeholder="Enter new name...">
+                    <button class="btn btn-gold" on:click={submitNewName} disabled={!newNameInput.trim()}>Claim Name</button>
+                </div>
+            </div>
+        {/if}
+
+        {#if state.player.tax_banned}
+            <div class="sheet-group prompt-box" style="background: rgba(255, 42, 95, 0.08); border: 1px dashed var(--red-suit); padding: 0.75rem; border-radius: 8px; margin-bottom: 1rem; text-align: center;">
+                <p class="info-text" style="margin: 0; font-size: 0.9rem;">🚫 You failed a refused Tax — no more Gat/Name Taxes for you this scene.</p>
+            </div>
+        {/if}
+
+        <div class="sheet-group">
+            <h4>Description:</h4>
+            <p><strong>Look:</strong> {state.player.avatar_look}</p>
+            <p><strong>Smell:</strong> {state.player.avatar_smell}</p>
+            <p><strong>First Words:</strong> "{state.player.first_words}"</p>
+        </div>
+
+        <div class="sheet-group margin-top">
+            <h4>Assigned Secret Techniques (J/Q/K):</h4>
+            <ul class="techniques-list-sheet">
+                <li><strong>Jack (J):</strong> "{state.player.tech_jack}"</li>
+                <li><strong>Queen (Q):</strong> "{state.player.tech_queen}"</li>
+                <li><strong>King (K):</strong> "{state.player.tech_king}"</li>
+            </ul>
+        </div>
+
+        <!-- Duel another Pi-Rat -->
+        {#if !state.player.is_dead && duelTargets.length > 0}
+            <div class="sheet-group margin-top">
+                <h4 style="color: var(--gold);">⚔️ Duel a Pi-Rat</h4>
+                <p class="info-text" style="font-size: 0.85rem;">Challenge a crewmate (e.g. for the Captaincy)! Your card becomes a temporary Obstacle they must beat. Both cards are discarded afterwards.</p>
+                <select class="select-field" bind:value={pvpOpponentId} style="width: 100%; margin-bottom: 0.5rem;">
+                    <option value="">Challenge whom?</option>
+                    {#each duelTargets as p}
+                        <option value={p.id}>{p.name} (Rank {p.rank})</option>
+                    {/each}
+                </select>
+                <select class="select-field" bind:value={pvpCard} style="width: 100%; margin-bottom: 0.5rem;">
+                    <option value="">Throw which card?</option>
+                    {#each hand.filter(c => !isJoker(c)) as card}
+                        <option value={card}>{getCardDisplay(card)}</option>
+                    {/each}
+                </select>
+                <button class="btn btn-secondary btn-full" on:click={createPvp} disabled={!pvpOpponentId || !pvpCard}>Throw Down!</button>
+            </div>
+        {/if}
+
+        <div class="sheet-group margin-top">
+            <h4 style="color: var(--gold);">Crew Objectives</h4>
+            <div class="objectives-checklist">
+                <label class="checkbox-label">
+                    <input type="checkbox" checked={state.game.completed_crew_1} disabled>
+                    <span>Steal a Ship</span>
+                </label>
+                <label class="checkbox-label">
+                    <input type="checkbox" checked={state.game.completed_crew_2} disabled>
+                    <span>Choose a Captain</span>
+                </label>
+                <label class="checkbox-label">
+                    <input type="checkbox" checked={state.game.completed_crew_3} disabled>
+                    <span>Commit Piracy</span>
+                </label>
+            </div>
+        </div>
+
+        <div class="sheet-group margin-top">
+            <h4 style="color: var(--gold);">Personal Objectives</h4>
+            <div class="objectives-checklist">
+                <label class="checkbox-label">
+                    <input type="checkbox" checked={state.player.completed_personal_1} disabled>
+                    <span>1. Gat</span>
+                </label>
+                <label class="checkbox-label">
+                    <input type="checkbox" checked={state.player.completed_personal_2} disabled>
+                    <span>2. Name</span>
+                </label>
+                <label class="checkbox-label">
+                    <input type="checkbox" checked={state.player.completed_personal_3} disabled>
+                    <span>3. Die/Retire</span>
+                </label>
+            </div>
+        </div>
+    </div>
+</div>