shiny-game

As a user I want to be able to use the app with a consistent color palette and theme across all pages. Apply the official Shiny-Game design tokens: Background #1A1A2E, Surface #16213E, Text #E94560, Accent #0F3460, Muted Tones #53354A. Set up a global theme/token system in the React Native project so all pages inherit the correct colors, fonts, and visual style aligned with the battle royale atmosphere described in the SRD.

As a user I want to be able to use the Mode Select page to choose a game mode (4 vs 4, 2 vs 2, 1 vs 1, Class Squad). This page is reached from Settings (Casual Gamer) or Character Select (Solo Player). Each mode card displays player count, match duration, and a Quick Start button. Navigates forward to Character Select. Implement with animated mode cards following the Shiny-Game dark theme.

As a user I want to be able to use the Settings page to adjust sound, controls, and graphics preferences. This page is accessible from the Home page (Casual Gamer flow: Home → Settings → Mode Select). Include toggles and sliders for audio volume, control sensitivity, and graphics quality options. Design and implement the page following the Shiny-Game color theme.

As a user I want to be able to use the Multiplayer page to host or join a local match via Bluetooth or Wi-Fi. This page is accessed directly from the Home page (Multiplayer Enthusiast flow). Shows 'Host Match' and 'Join Match' options, device pairing animation, and connection status indicators (Bluetooth/Wi-Fi icons). Highlights low-latency (<50ms) guarantee. Navigates to Lobby after successful connection.

As a user I want to be able to use the Character Select page to choose between Adam and the female character. This page is reached from Mode Select (Casual/Solo flow) or Lobby (Multiplayer flow). Each character card shows name, idle animation loop, and stats (health, speed, special ability). Tapping a card expands it for detailed abilities. Navigates to Loadout or Match depending on flow. Implement with carousel/swipe navigation on mobile.

As a user I want to be able to use the Loadout page to select weapons and equipment before a match. Reached from Character Select (Multiplayer Enthusiast flow) or Map Select (Solo Player flow). Displays weapon categories (Guns, Melee, Grenades) in a grid with 3D previews, damage stats, and fire rates. Users pick their loadout before proceeding to Match. Filter tabs by weapon type. Implement with animated weapon float effects.

As a user I want to be able to use the Lobby page to invite players, view connected players, and start the match. Reached from Multiplayer page after hosting or joining. Shows player slots, invite controls, team formation UI, and a ready/start button. Navigates to Character Select once all players are ready. Implement with real-time player list updates using local network state.

As a user I want to be able to use the Map Select page to choose a battleground map (e.g., Bermuda). Reached from Mode Select in the Solo Player flow. Displays available maps with previews, region highlights, loot density info, and strategic tips. Currently features the Bermuda map. Navigates to Loadout after selection. Implement with interactive map thumbnail and region label overlays.

As a user I want to be able to use the backend API for saving and retrieving player settings (sound, controls, graphics). Build a FastAPI endpoint to persist settings to MySQL via Alembic migrations. Supports GET and POST/PUT for player settings. This API serves the Settings page on the frontend.

As a user I want to be able to use the Match page to play a battle royale match against AI bots or real players. This is the core gameplay screen reached from Loadout (all flows). Displays the Bermuda map HUD, player health/inventory, minimap, action controls, and real-time battle state. Handles both single-player (vs AI bots) and multiplayer (vs real players via local network) modes. Navigates to Results page upon match end.

As a user I want to be able to use the local multiplayer server to host and join matches via Bluetooth or Wi-Fi with minimal latency (<50ms). Build a FastAPI-based local server that handles player discovery, lobby management, match state sync, and real-time game events over local network. Supports up to 4 players per session.

As a user I want to be able to use the Results page to view my match score, kills, survival time, and rank after a match ends. Reached from the Match page (Casual Gamer flow). Displays individual and team stats, a victory/defeat banner, and options to play again or return to Home. Implement with animated score reveal and stat cards following the Shiny-Game dark crimson theme.

As a user I want to be able to use AI bots that exhibit realistic behavior including strategic movement, weapon usage, and positioning during a match. Build the Python-based AI bot logic using Claude 4.6 for behavior scripting. Bots should adapt to game mode (1v1, 2v2, 4v4) and map (Bermuda). Integrates with the Match game loop.

As a user I want to be able to use the backend API for saving and loading player progress including match history, stats, and loadout preferences to MySQL. Build FastAPI endpoints for player profile CRUD and match result persistence. This supports the Results page and Loadout page data.