infini-website

As a user I want to explore the XOcean platform on a visually stunning landing page based on the existing v3 JSX design. Implement all sections: NavBar, Hero (full-viewport starfield, floating emojis, CTAs), SignatureFeatureCube (3D rotating CSS cube with 6 feature faces including GameRoom), HowItWorks (3-step flow), FeatureHighlights (bento grid), EmojiCommunication, Leaderboard Preview, SocialProof stats, CallToAction band, and Footer. Navigation leads to Login and Signup pages.

As a user I want to sign in to my XOcean account via a polished login page based on the existing v3 JSX design. Implement the centered glassmorphism login card over the starfield background, email/password fields with Electric Blue focus states, 'Sign In' CTA with glow, 'Forgot Password' link, and redirect to Signup. On success, navigate to Player Dashboard or Admin Dashboard based on role.

As an admin I want to monitor and manage the XOcean platform via the Admin Dashboard based on the existing v3 JSX design. Implement AdminTopBar (global search, notification bell, avatar menu), AdminSidebar (nav: Dashboard, Players, Leaderboard, Reports, System), OverviewStatsBar (4 KPI cards: Total Players, Active Games, Games Today, Open Disputes), ActivityMonitor (live event feed + games-per-hour chart), PlayersManagement table, LeaderboardManagement (inline score editing + adjustment log), DisputesReports (tabbed dispute cards), SystemHealth panel, and AdminFooter.

As a user I want to use backend APIs for code-based matchmaking on XOcean. Implement FastAPI endpoints: POST /lobby/create (generates a unique 6-char game code, stores pending game in DB), POST /lobby/join (validates code, assigns second player, transitions game to 'active'), GET /lobby/{code}/status (polling/WebSocket upgrade for waiting state). Ensure codes expire after 10 minutes if unclaimed.

As a user I want to create a new XOcean account via the signup page based on the existing v3 JSX design. Implement the registration form (username, email, password, confirm password) with inline validation, Electric Blue CTA, and a link back to Login. On success, redirect to Login.

As a user I want to view my personal XOcean dashboard after login, based on the existing v3 JSX design. Implement DashboardTopBar, DashboardSidebar (with nav: Dashboard, Play Game, Game History, Leaderboard, GameRoom, Settings), WelcomeBanner with personalized greeting, StatsOverview (4 KPI cards: Wins, Losses, Win Rate, Games Played), QuickActions (Generate Code + Join With Code cards), ActiveGamePanel, RecentGamesHistory list, LeaderboardPreview snippet, and DashboardFooter.

As a user I want to review all past XOcean games on the History page based on the existing v3 JSX design. Implement PageHeader with TTT watermark and breadcrumb, StatsBar (lifetime aggregates), FilterToolbar (search, result filter pills, sort dropdown, date picker), GameHistoryTable (paginated rows with Win/Loss/Draw badges, opponent, date, duration, score, eye-icon detail action), GameDetailDrawer (slide-in with final board replay, move log, emoji chat transcript), PaginationControls, and EmptyState.

As a user I want to view global XOcean rankings on the Leaderboard page based on the existing v3 JSX design. Implement the ranked table with gold/silver/bronze badges for top 3, player avatar initials, username, wins, win rate, and score columns. Add filter tabs (All Time, Weekly, Monthly), search by username, highlighted current-user row, real-time update indicator (pulsing green dot), and animated staggered row entrance. Navigation from Results and Dashboard.

As a user I want to generate or join an XOcean game via the Lobby page based on the existing v3 JSX design. Implement the two-panel layout: 'Create a Match' panel (generates a shareable code with animated code reveal and copy-to-clipboard) and 'Join a Match' panel (code input field + Join Now button). Show waiting state after code generation. On match start, navigate to the Game page.

As a user I want the Login and Signup pages to communicate with the real XOcean Auth API. Wire up the Login form to POST /auth/login, store JWT in httpOnly cookie or memory, handle error states (invalid credentials, account suspended). Wire Signup form to POST /auth/register. Implement protected route HOC that redirects unauthenticated users to Login. Role-based redirect: player → Dashboard, admin → Admin Dashboard.

As an admin I want to review and resolve disputes on the XOcean Reports page based on the existing v3 JSX design. Implement tabbed dispute interface (Open, In Review, Resolved), dispute cards with severity left-border color coding (red=cheating, amber=abuse), expandable game transcript and emoji chat log, action buttons (Review, Dismiss, Escalate), and empty-state illustration for resolved tab.

As an admin I want to manage player accounts on the XOcean Players page based on the existing v3 JSX design. Implement the full-width player accounts table with search/filter bar, status badges (Active/Suspended), rank indicators for top players, action buttons (View Profile, Suspend, Delete) with confirmation modals, export CSV, pagination, and mobile card-list view.

As a user I want to use a real-time backend for live XOcean Tic Tac Toe gameplay. Implement WebSocket endpoint /ws/game/{game_id} with FastAPI WebSockets: broadcast moves to both players, validate move legality (correct turn, empty cell, game active), detect win/draw conditions, persist each move to DB (game_moves table), and emit game-end events with outcome payload.

As a user I want to use backend APIs to view my XOcean game history. Implement FastAPI endpoints: GET /games/history (paginated list of completed games for the current user — result, opponent, date, duration, score, move count), GET /games/{game_id} (full game detail including move log, chat messages, and final board state). Support query filters: result (win/loss/draw), date range, opponent name search, and sort order.

As a user I want to use backend APIs for real-time XOcean leaderboard data. Implement FastAPI endpoints: GET /leaderboard (paginated global rankings — rank, username, wins, losses, win rate, score; supports period filter: all-time, weekly, monthly), GET /leaderboard/me (current player's rank + 2 above and 2 below context rows). Use MySQL aggregation queries on game_results; invalidate and refresh Redis cache on each game completion for real-time updates.

As a user I want to use backend APIs to send and receive emojis and messages during an XOcean game. Implement WebSocket message types for in-game chat (emoji reactions + short text messages) within the existing /ws/game/{game_id} socket. Persist messages to a game_messages table with encryption at rest. Enforce message rate limiting (max 10/min per player). Broadcast received messages to the opponent in real time.

As a user I want the Lobby page to communicate with the real XOcean Matchmaking API. Wire 'Generate Code' button to POST /lobby/create and animate the generated code reveal. Wire 'Join Now' button to POST /lobby/join with the entered code. Handle error states (invalid code, game full, code expired). On successful join/create, open WebSocket connection to /ws/game/{game_id} and navigate to the Game page.

As a user I want to play a real-time XOcean Tic Tac Toe match on the Game page based on the existing v2 JSX design. Implement the 3x3 interactive board (X in Electric Blue, O in Gold), turn indicator, player info panels, real-time move sync via WebSocket, in-game emoji/message chat panel with floating emoji bubbles, win/draw/loss detection with animated highlight of winning cells, and navigation to the Results page on game end.

As a user I want to watch top XOcean players' live games in the GameRoom page. Implement the GameRoom layout: live game board viewer (read-only 3x3 board synced via WebSocket), featured game selector (list of ongoing top-player matches), live chat panel (spectator messages, emoji reactions), player stats sidebar (both players' win rate, rank, score), leaderboard context strip, viewer count indicator, and spectator join/leave handling. Navigation accessible from Dashboard sidebar and Landing page cube face.

As a user I want to use backend APIs to watch live top-player games in the GameRoom. Implement FastAPI endpoints and WebSocket support: GET /gameroom/live-games (list of currently active top-player games with player info, viewer count, game state), WebSocket /ws/gameroom/{game_id}/spectate (broadcast live board state and move events to all spectators), GET /gameroom/{game_id}/stats (player stats for both participants), WebSocket /ws/gameroom/{game_id}/chat (spectator live chat with emoji support, rate-limited). Auto-promote games to GameRoom when both players are in the top 50 leaderboard.

As a user I want the XOcean History page to load real game data. Wire FilterToolbar controls (search, result filter, sort, date range) to GET /games/history query params. Render paginated GameHistoryTable rows from API response. On eye-icon click, fetch GET /games/{game_id} and populate the GameDetailDrawer with move log, board replay, and emoji chat transcript. Wire PaginationControls to page param. Show EmptyState when API returns empty list.

As an admin I want to use backend APIs to manage players, leaderboard scores, and disputes on XOcean. Implement FastAPI admin-role-protected endpoints: GET/PATCH/DELETE /admin/players (list, suspend, delete accounts), PATCH /admin/leaderboard/{player_id}/score (override score with audit log entry), GET /admin/disputes (list disputes by status), PATCH /admin/disputes/{id} (update status: in_review, resolved, dismissed), GET /admin/stats (platform KPIs: total players, active games, games today, open disputes), GET /admin/activity (recent event feed).

As a user I want the XOcean Leaderboard page and Dashboard LeaderboardPreview to show real rankings. Wire period filter tabs to GET /leaderboard?period= query param. Fetch GET /leaderboard/me for the current-user context rows. Implement count-up animation on score numbers. Wire 'Full Leaderboard →' link from Dashboard LeaderboardPreview. Ensure the table updates in real-time by polling GET /leaderboard every 30 seconds.

As a user I want the XOcean Game page to sync moves and chat in real time. Connect to /ws/game/{game_id} on page mount. Send move events on cell click and update the board on received move events. Send and receive emoji/chat messages via the same socket, rendering them in the chat panel with floating emoji animations. Handle disconnect/reconnect gracefully with a reconnecting overlay. On game-end event, navigate to Results page with outcome payload.

As a user I want to see my XOcean match outcome on the Results page based on the existing v3 JSX design. Implement ResultHero (Win/Draw/Loss with animated confetti or glow), GameSummary stats strip (Moves, Time, Points Earned), BoardReplay (final board state with winning line animation and move-by-move replay toggle), EmojiHighlights (chat recap bubbles), PlayerStats comparison cards, PostGameActions (Play Again, View Leaderboard, Game History, Share Victory), and LeaderboardSnippet.

As a user I want the GameRoom page to display real live game data from the backend. Wire featured game list to GET /gameroom/live-games with auto-refresh every 10 seconds. Connect spectator WebSocket /ws/gameroom/{game_id}/spectate to sync the read-only board in real time. Wire spectator live chat to /ws/gameroom/{game_id}/chat for sending and receiving emoji/message events. Fetch player stats from GET /gameroom/{game_id}/stats and populate the stats sidebar. Handle graceful disconnect, empty state when no live games are available, and viewer count updates.

As an admin I want the XOcean Admin Dashboard, Players, and Reports pages to load real data. Wire OverviewStatsBar and ActivityMonitor to GET /admin/stats and GET /admin/activity (polling every 10s). Wire PlayersManagement table to GET /admin/players with search/filter, and action buttons to PATCH/DELETE endpoints. Wire LeaderboardManagement to PATCH /admin/leaderboard/{id}/score with optimistic UI update. Wire DisputesReports tabs to GET /admin/disputes?status= and action buttons to PATCH /admin/disputes/{id}.