6527c26a81
Add comprehensive real-time statistics sidebar for spectators with smooth collapse/expand functionality and color-coded metrics. Features: - Collapsible sidebar (280px width, slides in from right) - Collapse toggle button with smooth animations - Real-time statistics cards with gradient backgrounds: - Time Elapsed (blue gradient, MM:SS format) - Cards Placed (green gradient, with completion percentage) - Current Accuracy (yellow gradient, % of correctly positioned cards) - Numbers Revealed status (pink/gray gradient based on state) - Each stat card has emoji icons and descriptive labels - Smooth slide-in/out transition (0.3s ease) - Fixed position below spectator banner - Z-index 90 (below banner which is 100) UI Details: - Sidebar positioned at top: 56px (below banner) - Right slide animation from -280px to 0 - Toggle button extends slightly on hover (40px → 44px) - Arrow indicators (◀ when collapsed, ▶ when expanded) - Semi-transparent white background (95% opacity) - Subtle box shadow for depth - Scrollable content area for long stat lists 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> |
||
|---|---|---|
| .. | ||
| .claude | ||
| .storybook | ||
| __tests__ | ||
| data | ||
| docs | ||
| drizzle | ||
| e2e | ||
| public | ||
| scripts | ||
| src | ||
| .gitignore | ||
| CARD_SORTING_PORT_PLAN.md | ||
| COMPLEMENT_RACE_PORT_PLAN.md | ||
| DEVELOPMENT_STANDARDS.md | ||
| LINTING.md | ||
| biome.jsonc | ||
| drizzle.config.ts | ||
| eslint.config.js | ||
| next-env.d.ts | ||
| next.config.js | ||
| package.json | ||
| panda.config.ts | ||
| playwright.config.ts | ||
| pnpm-lock.yaml | ||
| server.js | ||
| svg-processing-test.js | ||
| test-arcade-api.sh | ||
| test-flashcards-final.pdf | ||
| test-flashcards.pdf | ||
| test-simplified.pdf | ||
| test_fullscreen_persistence.html | ||
| test_panda_simple.html | ||
| tsconfig.json | ||
| tsconfig.server.json | ||
| vitest.config.ts | ||