soroban-abacus-flashcards/apps/web
Thomas Hallock 74565b93af fix(tracing): use resourceFromAttributes for OTel SDK 2.x compatibility
@opentelemetry/resources v2.x changed the API - Resource class constructor
was replaced with resourceFromAttributes() factory function.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-24 16:57:05 -06:00
..
.claude perf(worksheets): defer preview to client-side API fetch 2026-01-23 19:29:59 -06:00
.storybook Add KidNumberInput component for kid-friendly number entry 2026-01-17 15:44:37 -06:00
__tests__ feat(vision): improve remote camera calibration UX 2026-01-15 10:51:59 -06:00
content/blog
data feat(flowchart): add animated background tiles to FlowchartCards 2026-01-20 10:10:49 -06:00
docs feat(flowchart): add animated background tiles to FlowchartCards 2026-01-20 10:10:49 -06:00
drizzle feat(monitoring): add E2E smoke tests with Gatus integration 2026-01-24 05:08:50 -06:00
e2e fix(smoke-tests): simplify tests to only reliable critical paths 2026-01-24 09:08:47 -06:00
public feat(flowchart): add animated background tiles to FlowchartCards 2026-01-20 10:10:49 -06:00
scripts feat(dev): add dev.abaci.one for build artifacts 2026-01-24 09:52:26 -06:00
src feat(observability): add OpenTelemetry tracing with Tempo backend 2026-01-24 16:31:18 -06:00
test-results
.dockerignore.test
.gitignore feat(docs): add auto-generated API documentation with Scalar UI 2026-01-15 15:56:27 -06:00
CARD_SORTING_PORT_PLAN.md
COMPLEMENT_RACE_PORT_PLAN.md
DEVELOPMENT_STANDARDS.md
Dockerfile.smoke-tests fix(smoke-tests): update Playwright Docker image to v1.56.0 2026-01-24 07:42:06 -06:00
LINTING.md
README.md
biome.jsonc feat(vision): improve remote camera calibration UX 2026-01-15 10:51:59 -06:00
drizzle.config.ts feat(vision): improve remote camera calibration UX 2026-01-15 10:51:59 -06:00
eslint.config.js feat(vision): improve remote camera calibration UX 2026-01-15 10:51:59 -06:00
instrumentation.js fix(tracing): use resourceFromAttributes for OTel SDK 2.x compatibility 2026-01-24 16:57:05 -06:00
litefs.yml refactor(flowchart): remove legacy schema-specific formatting, add display.problem check 2026-01-22 11:03:15 -06:00
next-env.d.ts
next.config.js feat(vision): improve remote camera calibration UX 2026-01-15 10:51:59 -06:00
next.openapi.json chore: formatting cleanup for MCP and API files 2026-01-15 18:32:55 -06:00
package.json feat(observability): add OpenTelemetry tracing with Tempo backend 2026-01-24 16:31:18 -06:00
panda.config.ts feat: Restructure FlowchartWalker with centered Time Machine layout 2026-01-19 04:48:23 -06:00
playwright.config.ts feat(vision): improve remote camera calibration UX 2026-01-15 10:51:59 -06:00
pnpm-lock.yaml
server.js fix(server): skip migrations on LiteFS replicas 2026-01-23 14:31:19 -06:00
svg-processing-test.js feat(vision): improve remote camera calibration UX 2026-01-15 10:51:59 -06:00
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 feat(vision): improve remote camera calibration UX 2026-01-15 10:51:59 -06:00

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 guidelines
  • CODE_QUALITY_REGIME.md - Quality check procedures
  • GAME_SETTINGS_PERSISTENCE.md - Game config architecture
  • Z_INDEX_MANAGEMENT.md - Z-index layering system
  • DEPLOYMENT.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

Parent: Main README - Complete project overview Abacus Component: packages/abacus-react - Abacus visualization library