ai-code-battle/PROGRESS.md
jedarden 6f1cbbcad2 Start Phase 5: Add SPA web platform with routing and pages
- Create app.html as SPA shell with navigation header and dark theme
- Add hash-based router (router.ts) for client-side navigation
- Implement page components:
  - Home page with hero section and feature overview
  - Leaderboard with ranking table and status indicators
  - Match history with match cards and participant info
  - Bot directory with bot cards sorted by rating
  - Bot profile with stats, rating sparkline chart, and recent matches
  - Registration form with API key display
  - Replay viewer (integrated from Phase 3)
  - Docs/Getting Started page with protocol overview
- Add API client (api-types.ts) for fetching data from Worker API
- Update vite.config.ts for multi-page build (index.html + app.html)
- Update PROGRESS.md with Phase 5 status and exit criteria

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-24 09:14:15 -04:00

5.9 KiB

AI Code Battle - Implementation Progress

Current Phase: Phase 5 - Web Platform

Status: 🔄 In Progress

Phase 5 Progress

  • SPA application shell (web/app.html)
    • Navigation header with links to all sections
    • Dark theme with CSS custom properties
    • Responsive layout
  • Hash-based router (web/src/router.ts)
    • Pattern matching with parameter extraction
    • Navigation and history support
  • Page components (web/src/pages/)
    • Home page with hero, features, quick links
    • Leaderboard with ranking table
    • Match history with match cards
    • Bot directory with bot cards
    • Bot profile with stats, rating chart, recent matches
    • Registration form with API key display
    • Replay viewer (integrated from Phase 3)
    • Docs/Getting Started page
  • API client (web/src/api-types.ts)
    • fetchLeaderboard()
    • fetchBotDirectory()
    • fetchBotProfile()
    • fetchMatchIndex()
    • registerBot()
    • rotateApiKey()
  • Cloudflare Pages deployment configuration
  • R2 bucket custom domain for replays

Phase 4 Completed

Phase 3 Completed

Phase 2 Completed

Phase 5 Exit Criteria

Criterion Status
SPA with navigation (leaderboard, matches, bots, register) Complete
Home page with getting started info Complete
Registration form with API key display Complete
Bot profiles with rating history chart Complete
Match history page Complete
Leaderboard with rankings Complete
Getting started / docs page Complete
Cloudflare Pages deployment config Pending
R2 bucket custom domain for replays Pending

Phase 1 Completed

File Structure

ai-code-battle/
├── go.mod
├── engine/
│   ├── types.go        # Core data types
│   ├── grid.go         # Toroidal grid implementation
│   ├── game.go         # Game state management
│   ├── turn.go         # Turn execution phases
│   ├── replay.go       # Replay recording
│   ├── match.go        # Match runner
│   ├── bot_local.go    # Local bot interface
│   ├── bot_http.go     # HTTP bot client
│   ├── auth.go         # HMAC authentication
│   └── *_test.go       # Test files
├── cmd/
│   ├── acb-local/      # CLI match runner
│   ├── acb-mapgen/     # Map generator
│   ├── acb-worker/     # Match execution worker
│   │   ├── main.go      # Worker entry point
│   │   ├── api.go       # Worker API client
│   │   ├── api_test.go  # API client tests
│   │   └── r2.go        # R2 upload client
│   └── acb-indexer/    # Index builder
│       ├── package.json
│       ├── Dockerfile
│       └── src/
│           ├── index.ts       # Entry point
│           ├── api.ts         # Worker API client
│           ├── generator.ts   # Index file generator
│           ├── writer.ts      # File system writer
│           └── generator.test.ts
├── worker-api/
│   ├── package.json    # npm dependencies
│   ├── wrangler.toml   # Cloudflare Worker config
│   └── src/
│       ├── index.ts        # Router + cron dispatcher
│       ├── types.ts        # TypeScript types
│       ├── glicko2.ts      # Glicko-2 rating system
│       ├── glicko2.test.ts # Rating system tests
│       ├── jobs.ts         # Job coordination endpoints
│       ├── bots.ts         # Bot management endpoints
│       ├── export.ts       # Data export endpoint
│       └── cron.ts         # Cron handlers
├── web/
│   ├── package.json    # npm dependencies
│   ├── tsconfig.json   # TypeScript config
│   ├── vite.config.ts  # Vite bundler config
│   ├── index.html      # Standalone replay viewer
│   ├── app.html        # SPA shell with navigation
│   └── src/
│       ├── types.ts        # Replay type definitions
│       ├── api-types.ts    # API client and types
│       ├── router.ts       # Hash-based SPA router
│       ├── replay-viewer.ts # Canvas viewer class
│       ├── main.ts         # Standalone replay viewer
│       ├── app.ts          # SPA entry point
│       └── pages/          # SPA page components
│           ├── home.ts
│           ├── leaderboard.ts
│           ├── matches.ts
│           ├── bots.ts
│           ├── bot-profile.ts
│           └── register.ts
├── bots/
│   ├── random/         # Python - RandomBot
│   ├── gatherer/       # Go - GathererBot
│   ├── rusher/         # Rust - RusherBot
│   ├── guardian/       # PHP - GuardianBot
│   ├── swarm/          # TypeScript - SwarmBot
│   └── hunter/         # Java - HunterBot
└── docs/
    └── plan/
        └── plan.md     # Full implementation plan

Strategy Bot Summary

Bot Language Strategy Expected Rank
RandomBot Python Random valid moves 6th (floor)
GathererBot Go Energy collection, avoid combat 4th-5th
RusherBot Rust Rush enemy cores aggressively 4th-5th
GuardianBot PHP Defend cores, cautious expansion 3rd-4th
SwarmBot TypeScript Formation cohesion, group advance 1st-2nd
HunterBot Java Target isolated enemies 1st-2nd

Running Tests

# Go engine tests
go test ./engine/... -v

# Web build verification
cd web && npm run build

Building CLI Tools

go build ./cmd/acb-local
go build ./cmd/acb-mapgen

Running a Match

./acb-local -seed 42 -max-turns 100 -output replay.json -verbose

Viewing a Replay

cd web
npm run dev
# Standalone viewer: http://localhost:3000/index.html
# Full SPA: http://localhost:3000/app.html (then go to #/replay)