Scaffold a Phase Screen Component

When to Use

• •Creating any of the 5 missing phase screens
• •Adding a new game phase that needs a UI
• •Replacing a screen component with a full implementation

All 5 Screens Are Missing

The app does not compile until src/components/screens/ exists with these files:

Procedure

1. Identify the target screen

Check which phase this screen belongs to. Refer to screen-props.md for the exact props already expected by Index.tsx.

2. Create the file

Path: src/components/screens/<Name>Screen.tsx

Use ScreenTemplate.tsx as your starting scaffold. Replace:

• •ExampleScreenProps → <Name>ScreenProps
• •ExampleScreen → <Name>Screen
• •Props with the correct signatures from screen-props.md
• •Placeholder content with the actual phase UI

3. Apply the design system

shadcn/ui primitives available: Button, Card, Badge, Dialog, Progress, ScrollArea, Separator, etc. Import from @/components/ui/.

4. Import guards

Never import game logic directly — all actions come in as props from Index.tsx.

// ✅ Correct
interface GameplayScreenProps {
  gameState: GameState;
  onPlayCard: (playerId: string, cardId: string, targetFactId?: string, narrationText?: string) => void;
}

// ❌ Wrong — don't call useGameState inside a screen component
const { gameState } = useGameState();

5. Register the export

The file should use a named export, not a default export:

export function SetupScreen({ onStart }: SetupScreenProps) { ... }

Index.tsx already has the correct import paths — no changes needed there once the files exist.

6. Verify

• •TypeScript compiles without errors: npm run build
• •The screen renders at the correct phase
• •All action callbacks are wired to UI elements
• •No direct state mutations inside the component