5f4f1fde33
Adds real-time document detection to the camera capture on session summary pages. Uses OpenCV.js for edge detection and perspective correction. Key features: - Multi-quad tracking: detects ALL quadrilaterals, not just largest - Scores quads by stability over time (filters transient detections) - Visual feedback: yellow (detecting) → green (stable) → bright green (locked) - Auto-crops and deskews captured documents - Falls back to raw photo if no document detected Technical details: - OpenCV.js (~8MB) lazy-loaded only when camera opens - Tracks quads across frames by matching corner positions - Filters by area (15-95% of frame) and document aspect ratios - Locks on after 5 frames with 50%+ stability 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> |
||
|---|---|---|
| .. | ||
| .claude | ||
| .storybook | ||
| __tests__ | ||
| content/blog | ||
| data | ||
| docs | ||
| drizzle | ||
| e2e | ||
| public | ||
| scripts | ||
| src | ||
| test-results | ||
| .dockerignore.test | ||
| .gitignore | ||
| CARD_SORTING_PORT_PLAN.md | ||
| COMPLEMENT_RACE_PORT_PLAN.md | ||
| DEVELOPMENT_STANDARDS.md | ||
| LINTING.md | ||
| README.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 | ||
README.md
Soroban Web Application
Interactive web application for learning soroban (Japanese abacus) calculation with tutorials, practice sessions, and multiplayer arcade games.
Features
- Tutorials - Step-by-step lessons for learning soroban techniques
- Practice Sessions - Adaptive practice with progressive help system
- Arcade Games - Multiplayer educational games for reinforcement
- Worksheet Generator - Create printable math worksheets
Getting Started
# Install dependencies
pnpm install
# Start development server
pnpm dev
# Run type checks
npm run type-check
# Run all quality checks
npm run pre-commit
Documentation
Components
| Component | Description |
|---|---|
| Decomposition Display | Interactive mathematical decomposition visualization |
| Worksheet Generator | Math worksheet creation with Typst PDF generation |
Games
| Game | Description |
|---|---|
| Arcade System | Modular multiplayer game architecture |
| Know Your World | Geography quiz game |
Developer Documentation
Located in .claude/ directory:
CLAUDE.md- Project conventions and guidelinesCODE_QUALITY_REGIME.md- Quality check proceduresGAME_SETTINGS_PERSISTENCE.md- Game config architectureZ_INDEX_MANAGEMENT.md- Z-index layering systemDEPLOYMENT.md- Deployment and CI/CD
Project Structure
apps/web/
├── src/
│ ├── app/ # Next.js App Router pages
│ ├── components/ # Shared React components
│ │ ├── decomposition/ # Math decomposition display
│ │ ├── practice/ # Practice session components
│ │ └── tutorial/ # Tutorial player components
│ ├── contexts/ # React context providers
│ ├── arcade-games/ # Multiplayer game implementations
│ ├── hooks/ # Custom React hooks
│ ├── lib/ # Utilities and libraries
│ └── db/ # Database schema and queries
├── .claude/ # Developer documentation
├── public/ # Static assets
└── styled-system/ # Generated Panda CSS
Technology Stack
- Framework: Next.js 14 (App Router)
- Language: TypeScript
- Styling: Panda CSS
- Database: SQLite with Drizzle ORM
- Abacus Visualization: @soroban/abacus-react
Related Documentation
Parent: Main README - Complete project overview Abacus Component: packages/abacus-react - Abacus visualization library