Roll-Cube Master Plan

Three parallel color systems exist and none talk to each other: 1. theme.js U object — 18 hardcoded hex values, used in 15+ components via inline styles 2. index.css CSS vars — full shadcn oklch tokens (--primary, --muted) + --rc-* bridge. ALL ORPHANED. 3. ui-kit.js / styles.js — style factory functions returning JS objects Decision: Keep theme.js U for game-specific colors (felt, pips, board chrome). Remap --rc-* CSS vars to match U values. Use .glass-panel CSS classes (already defined, never used) for all UI chrome. Kill styles.js entirely — merge into ui-kit.js. Do NOT adopt shadcn stone base tokens — they’re light-theme defaults that don’t match this app. This foundation MUST land before any component extraction or visual work.

These are live vulnerabilities. The admin dashboard is public. Anyone with curl can inflate their rating. Fix before touching CSS. 1a. Gate /admin behind auth — server/index.js lines 100-107 Check for ROLL_CUBE_ADMIN_TOKEN env var in cookie or Authorization header before serving admin HTML. Return 401 with a login form if missing. 1b. Fix /record-ai-game — server/playerRegistry.js lines 1096-1172 Add server-side validation: require a signed game-completion token from the game logic, not just client-reported won/lost. Minimum viable: add a nonce issued at game start, verified at submission. 1c. Fix dice modulo bias — server/gameCore.js lines 193-206 Replace (buf[0] % 6) + 1 with rejection sampling. Only accept values < 4294967292. 1d. Fix timingSafeEqual — server/index.js line 423, server/playerRegistry.js line 82 Pad shorter string to match length before comparing. Or use crypto.timingSafeEqual from CF Workers runtime. 1e. Sanitize chat messages — server/gameRoom.js line 293 Strip HTML tags from chat text server-side before broadcasting. 1f. Extract server/shared.js Move sanitizeName, isAllowedOrigin, normalizeRoomCode, ALLOWED_ORIGINS, MAX_NAME_LENGTH, corsHeaders into server/shared.js. Update imports in index.js, gameRoom.js, matchmakingQueue.js, playerRegistry.js.

The shadcn/Tailwind infrastructure exists. The glass-panel CSS classes are defined. The --rc-* vars are set. Nothing uses them. This batch connects the dots. 2a. Import JetBrains Mono npm install @fontsource-variable/jetbrains-mono Add import to src/index.css: @import "@fontsource-variable/jetbrains-mono"; Update --font-mono in @theme inline to: 'JetBrains Mono Variable', monospace 2b. Fix dark-mode CSS tokens The .dark {} block in index.css has oklch values that don’t match the actual app colors. Remap key tokens to match theme.js U values: --background → oklch from #111 (U.bg) --card → oklch from #1a1a1a (U.panel) --border → oklch from #2a2a2a (U.border) --foreground → oklch from #ccc (U.text) --muted-foreground → oklch from #8a8a8a (U.textDim) --primary → oklch from #4a9aca (U.select) --destructive → oklch from #c44 (U.red) 2c. Merge styles.js into ui-kit.js Move buttonStyle and compactButtonStyle from styles.js into ui-kit.js. Delete styles.js. Update all imports (FrontDoor, Lobby, GameLog — grep for from "../styles.js"). 2d. Consolidate glassmorphism Delete surface() from FrontDoor.jsx (lines 14-24). Delete surfaceStyle() from Lobby.jsx (lines 55-65). Make glassPanel() in ui-kit.js the ONLY glass function. Ensure glassPanel() signature covers all variants: glassPanel(tint, extra) 2e. Add cn() utility Create src/lib/utils.js (needed for any future shadcn component use): import { clsx } from "clsx"; import { twMerge } from "tailwind-merge"; export function cn(...inputs) { return twMerge(clsx(inputs)); }

3a. Create TopNav.jsx New file: src/components/TopNav.jsx Fixed position, 48px height, glass surface background (use glassPanel from ui-kit.js). Left: “ROLL CUBE” in JetBrains Mono 600 weight, 14px, letter-spacing 3px. Center: Home | Play | Leaderboard | Profile — text buttons, active = bottom border in U.cyan. Right: mute toggle (use Lucide Volume2/VolumeX icons). Mobile: convert to 56px bottom tab bar with icons + labels. Prop: hideNav (boolean) — render null during active gameplay. Style with glassPanel + inline styles matching existing codebase pattern. 3b. Wire TopNav in App.jsx Import TopNav (NOT lazy — always visible). Render above the view switch ternary. Pass: view, onNavigate, auth, isMobile, muted, toggleMute, hideNav. hideNav = true when in active local game or active online game (mp.connected + mp.phase === “playing”). Add padding-top 48px on desktop content, 0 on mobile (nav at bottom). 3c. Clean FrontDoor Delete QuickMatchCard component + its render (duplicate entry point). Delete ReturningPlayerCard component + its render (profile now in nav). Delete “Profile benefits” section (~40 lines around line 471). Make MiniStats clickable (add onClick prop, render as button when provided). 3d. Clean Lobby Delete all “Back Home” buttons (8+ instances). Delete AccountCard from every mode except the auth flow. Delete “What this screen is for” and “Best default” InfoCards. Add initialMode prop to Lobby — useState(initialMode || null).