[FE-7] Create Game Layout & Navigation Components

[sarkarshuvojit]

Parent Epic

#23

Description

Create the layout and navigation wrapper components.

Components to Create

1. RetroLayout

• Main app layout wrapper
• Props: children, showHeader, showFooter
• Features:
  • Retro border frame around content
  • Optional header with game title
  • Optional footer with version/links
  • CRT screen effect (optional)

2. RetroHeader

• Game header/navbar
• Props: playerName, roomCode, onLeave, showLeave
• Features:
  • Game logo/title
  • Player info
  • Room code display
  • Leave button

3. RetroGameLog

• Scrollable game event log
• Props: events, maxEvents
• Features:
  • Timestamped events
  • Color coded by event type
  • Auto-scroll to latest
  • Retro terminal styling

4. RetroPlayerCard

• Player info display card
• Props: name, avatar, shipsRemaining, isCurrentTurn, isEliminated
• Features:
  • Avatar display
  • Name
  • Ship count indicator
  • Turn indicator glow
  • Eliminated styling

5. RetroTurnIndicator

• Shows whose turn it is
• Props: currentPlayer, isMyTurn, timeRemaining
• Features:
  • Animated indicator
  • "YOUR TURN" flash effect
  • Timer (if applicable)

File Structure

src/components/layout/
├── RetroLayout.tsx
├── RetroLayout.stories.tsx
├── RetroHeader.tsx
├── RetroHeader.stories.tsx
├── RetroGameLog.tsx
├── RetroGameLog.stories.tsx
├── RetroPlayerCard.tsx
├── RetroPlayerCard.stories.tsx
├── RetroTurnIndicator.tsx
├── RetroTurnIndicator.stories.tsx
└── index.ts

Acceptance Criteria

• All layout components created
• Consistent retro theme
• Stories for all variants
• Composable for page building