b3b769c0e2
Wire up the vision broadcast pipeline: 1. DockedVisionFeed captures rectified frames from canvas and emits them at 5fps via the context's emitVisionFrame callback 2. PracticeClient wires setVisionFrameCallback to call sendVisionFrame from useSessionBroadcast, connecting the context to the socket 3. useSessionBroadcast sends VisionFrameEvent to the session channel with imageData, detectedValue, and confidence 4. socket-server relays vision-frame events to observers 5. useSessionObserver receives and stores visionFrame for display 6. SessionObserverModal shows ObserverVisionFeed when visionFrame is available, replacing the interactive AbacusDock with the student's live camera feed 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
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