[EPIC] Frontend: Retro UI Components with Storybook

[sarkarshuvojit]

Overview

Reimplement the frontend using a Retro/NeoBrutalism UI design system. Create all pages as presentation-only components exposed via Storybook. Logic and state management will be wired later via container components.

Design Principles

Per AGENTS.md, we're using RetroUI (NeoBrutalism Design System):

• Bold borders and strong shadows
• High contrast colors
• Raw, brutalist aesthetic
• Pixel-perfect retro feel

Architecture Approach

1. Presentation Components Only - No business logic, just props and callbacks
2. Storybook First - All components documented and viewable in isolation
3. Hooks Later - Custom hooks for logic will be added in phase 2
4. Container Pattern - Smart containers will connect to Redux later

Pages to Create

1. Landing/Welcome Page - Retro game intro screen
2. Signup Page - Username/avatar selection with retro styling
3. Lobby Page - Create/Join room selection
4. Waiting Room Page - Show players joining, ready states
5. Board Setup Page - Ship placement with drag-and-drop
6. Game Page - Main gameplay with opponent boards
7. Game Over Page - Victory/defeat screens

Component Library

• Buttons (Primary, Secondary, Danger)
• Input fields
• Cards/Panels
• Modals/Dialogs
• Grid components (10x10 game grid)
• Ship pieces
• Avatar selectors
• Status indicators
• Navigation components

Acceptance Criteria

• Storybook is set up and configured
• All pages exist as presentation components
• Each component has Storybook stories with variants
• Retro/NeoBrutalism styling applied consistently
• Components accept props for data, no internal state management
• Responsive design for mobile/desktop
• yarn storybook runs and shows all components

Labels

• frontend
• epic
• ui/ux