diff --git a/.planning/REQUIREMENTS.md b/.planning/REQUIREMENTS.md index 50480f0..9ee7892 100644 --- a/.planning/REQUIREMENTS.md +++ b/.planning/REQUIREMENTS.md @@ -217,8 +217,8 @@ Requirements for Phase 1 (Development Focus: Live Tournament Management). Each m - [ ] **UI-02**: Floating Action Button (FAB) for quick actions (Bust, Buy In, Rebuy, Add-On, Pause/Resume) - [ ] **UI-03**: Persistent header showing clock, level, blinds, player count - [ ] **UI-04**: Desktop/laptop sidebar navigation with wider content area -- [ ] **UI-05**: Catppuccin Mocha dark theme (default) and Latte light theme -- [ ] **UI-06**: 48px minimum touch targets, press-state animations, loading states +- [x] **UI-05**: Catppuccin Mocha dark theme (default) and Latte light theme +- [x] **UI-06**: 48px minimum touch targets, press-state animations, loading states - [ ] **UI-07**: Toast notifications (success, info, warning, error) with auto-dismiss - [ ] **UI-08**: Data tables with sort, sticky header, search/filter, swipe actions (mobile) @@ -369,8 +369,8 @@ Which phases cover which requirements. Updated during roadmap reorganization. | UI-02 | Phase 1 | Pending | | UI-03 | Phase 1 | Pending | | UI-04 | Phase 1 | Pending | -| UI-05 | Phase 1 | Pending | -| UI-06 | Phase 1 | Pending | +| UI-05 | Phase 1 | Complete | +| UI-06 | Phase 1 | Complete | | UI-07 | Phase 1 | Pending | | UI-08 | Phase 1 | Pending | | DISP-01 | Phase 2 | Pending | diff --git a/.planning/STATE.md b/.planning/STATE.md index 73e4350..816a8a2 100644 --- a/.planning/STATE.md +++ b/.planning/STATE.md @@ -1,3 +1,16 @@ +--- +gsd_state_version: 1.0 +milestone: v1.0 +milestone_name: milestone +status: unknown +last_updated: "2026-03-01T02:56:58.721Z" +progress: + total_phases: 1 + completed_phases: 0 + total_plans: 14 + completed_plans: 3 +--- + # Project State ## Project Reference @@ -10,28 +23,28 @@ See: .planning/PROJECT.md (updated 2026-02-28) ## Current Position Phase: 1 of 7 (Tournament Engine) -Plan: 2 of 14 in current phase +Plan: 5 of 14 in current phase Status: Executing Phase 1 -Last activity: 2026-03-01 — Completed Plan A (Project Scaffold + Core Infrastructure) and Plan B (Database Schema + Migrations) +Last activity: 2026-03-01 — Completed Plan D (Clock Engine) -Progress: [█░░░░░░░░░] 14% +Progress: [███░░░░░░░] 29% ## Performance Metrics **Velocity:** -- Total plans completed: 2 -- Average duration: 12min -- Total execution time: 0.42 hours +- Total plans completed: 3 +- Average duration: 10min +- Total execution time: 0.50 hours **By Phase:** | Phase | Plans | Total | Avg/Plan | |-------|-------|-------|----------| -| 01-tournament-engine | 2 | 25min | 12min | +| 01-tournament-engine | 3 | 30min | 10min | **Recent Trend:** -- Last 5 plans: 01-01 (15min), 01-02 (10min) -- Trend: starting +- Last 5 plans: 01-01 (15min), 01-02 (10min), 01-10 (5min) +- Trend: accelerating *Updated after each plan completion* @@ -53,6 +66,9 @@ Recent decisions affecting current work: - [01-02]: go-libsql requires single-statement Exec — migration runner splits SQL files into individual statements - [01-02]: go-libsql PRAGMA handling is inconsistent — use QueryRow for journal_mode, execPragma helper for others - [01-02]: Force single DB connection during migrations (SetMaxOpenConns(1)) for table visibility +- [01-10]: ESM type:module required in package.json for SvelteKit/Vite compatibility +- [01-10]: frontend/build/ tracked in git (not gitignored) for go:embed +- [01-10]: Catppuccin colors defined as CSS custom properties rather than @catppuccin/palette JS package ### Pending Todos @@ -70,5 +86,5 @@ None yet. ## Session Continuity Last session: 2026-03-01 -Stopped at: Completed 01-01-PLAN.md (Project Scaffold + Core Infrastructure) +Stopped at: Completed 01-10-PLAN.md (SvelteKit Frontend Scaffold + Theme + Clients) Resume file: None diff --git a/.planning/phases/01-tournament-engine/01-10-SUMMARY.md b/.planning/phases/01-tournament-engine/01-10-SUMMARY.md new file mode 100644 index 0000000..4e5d46e --- /dev/null +++ b/.planning/phases/01-tournament-engine/01-10-SUMMARY.md @@ -0,0 +1,165 @@ +--- +phase: 01-tournament-engine +plan: 10 +subsystem: ui +tags: [sveltekit, svelte5, catppuccin, websocket, spa, typescript] + +# Dependency graph +requires: + - phase: 01-tournament-engine + provides: Go binary scaffold with embed.go, WebSocket hub, JWT auth middleware +provides: + - SvelteKit SPA scaffold with adapter-static and SPA fallback + - Catppuccin Mocha/Latte CSS theme with semantic color tokens + - WebSocket client with auto-reconnect and exponential backoff + - HTTP API client with JWT auth and 401 redirect + - Auth state store (Svelte 5 runes) with localStorage persistence + - Tournament state store (Svelte 5 runes) with WS message routing + - PIN login page with numpad and 48px touch targets + - Makefile frontend target for real SvelteKit build +affects: [01-11, 01-13, 01-14] + +# Tech tracking +tech-stack: + added: [sveltekit, svelte5, adapter-static, vite, typescript, catppuccin] + patterns: [svelte5-runes-state, spa-mode-no-ssr, css-custom-properties-theming, ws-reconnect-backoff, api-client-with-auth] + +key-files: + created: + - frontend/package.json + - frontend/svelte.config.js + - frontend/vite.config.ts + - frontend/tsconfig.json + - frontend/src/app.html + - frontend/src/app.css + - frontend/src/lib/theme/catppuccin.css + - frontend/src/lib/ws.ts + - frontend/src/lib/api.ts + - frontend/src/lib/stores/auth.svelte.ts + - frontend/src/lib/stores/tournament.svelte.ts + - frontend/src/routes/+layout.ts + - frontend/src/routes/+layout.svelte + - frontend/src/routes/+page.svelte + - frontend/src/routes/login/+page.svelte + modified: + - Makefile + +key-decisions: + - "Added type:module to package.json for ESM compatibility with SvelteKit/Vite" + - "Build output (frontend/build/) tracked in git for go:embed — not gitignored" + - "Catppuccin colors defined as CSS custom properties with semantic mappings rather than using @catppuccin/palette JS package" + +patterns-established: + - "Svelte 5 runes: class-based state with $state/$derived, exported as singletons" + - "CSS custom properties: --ctp-* for raw colors, --color-* for semantic usage" + - "WebSocket: singleton client with event handlers and auto-reconnect" + - "API client: auto-detect base URL, auto-attach JWT, 401 clears auth" + - "48px minimum touch targets via CSS (.touch-target, button, role=button)" + +requirements-completed: [UI-05, UI-06] + +# Metrics +duration: 5min +completed: 2026-03-01 +--- + +# Plan 10: SvelteKit Frontend Scaffold + Theme + Clients Summary + +**SvelteKit SPA with Catppuccin Mocha dark theme, WebSocket/HTTP clients, Svelte 5 runes state stores, and PIN login page** + +## Performance + +- **Duration:** 5 min +- **Started:** 2026-03-01T02:49:15Z +- **Completed:** 2026-03-01T02:54:37Z +- **Tasks:** 1 (single compound task with 8 sub-items) +- **Files modified:** 43 + +## Accomplishments +- SvelteKit project initialized with adapter-static SPA mode, builds to frontend/build/ +- Catppuccin Mocha (dark) and Latte (light) themes with 26 base colors + semantic tokens + poker-specific colors +- WebSocket client with exponential backoff reconnect (1s-30s), connection state tracking, message routing +- HTTP API client with auto JWT auth, 401 redirect to login, typed error handling +- Auth state (Svelte 5 runes) with localStorage persistence, role-based access checks +- Tournament state (Svelte 5 runes) handles clock, players, tables, financials, activity, rankings, balance +- PIN login page with large numpad buttons, masked dot display, keyboard support, error states +- Makefile updated: `make frontend` runs real SvelteKit build, `make all` builds frontend then Go binary + +## Task Commits + +Each task was committed atomically: + +1. **Task J1: Initialize SvelteKit project with theme, WS client, API client, stores, login page, Makefile** - `47e1f19` (feat) + +## Files Created/Modified +- `frontend/package.json` - SvelteKit project config with ESM type +- `frontend/svelte.config.js` - adapter-static with SPA fallback +- `frontend/vite.config.ts` - Vite config with SvelteKit plugin +- `frontend/tsconfig.json` - TypeScript config extending SvelteKit +- `frontend/src/app.html` - HTML shell with data-theme="mocha" +- `frontend/src/app.css` - Reset, touch targets, scrollbars, utilities +- `frontend/src/lib/theme/catppuccin.css` - Mocha/Latte themes with semantic tokens +- `frontend/src/lib/ws.ts` - WebSocket client with reconnect and backoff +- `frontend/src/lib/api.ts` - HTTP API client with JWT auth +- `frontend/src/lib/stores/auth.svelte.ts` - Auth state with localStorage +- `frontend/src/lib/stores/tournament.svelte.ts` - Tournament state with WS message handling +- `frontend/src/routes/+layout.ts` - SPA mode (prerender=true, ssr=false) +- `frontend/src/routes/+layout.svelte` - Root layout importing app.css +- `frontend/src/routes/+page.svelte` - Home page with auth redirect +- `frontend/src/routes/login/+page.svelte` - PIN login page with numpad +- `Makefile` - Updated frontend target for real SvelteKit build + +## Decisions Made +- Used CSS custom properties for Catppuccin instead of @catppuccin/palette JS package — simpler, no runtime dependency, works with data-theme attribute switching +- Added `"type": "module"` to package.json — required for ESM-only SvelteKit/Vite packages +- frontend/build/ tracked in git (not gitignored) — required by Go's embed.go for go:embed directive +- Defined all Catppuccin colors directly in CSS rather than importing from npm — avoids build complexity and runtime overhead + +## Deviations from Plan + +### Auto-fixed Issues + +**1. [Rule 3 - Blocking] Added "type": "module" to package.json** +- **Found during:** Task J1 (SvelteKit build) +- **Issue:** Vite build failed with "This package is ESM only but it was tried to load by require" +- **Fix:** Added `"type": "module"` to frontend/package.json +- **Files modified:** frontend/package.json +- **Verification:** `npm run build` succeeds +- **Committed in:** 47e1f19 + +**2. [Rule 3 - Blocking] Ran svelte-kit sync before build** +- **Found during:** Task J1 (SvelteKit build) +- **Issue:** tsconfig.json extends .svelte-kit/tsconfig.json which doesn't exist until sync runs +- **Fix:** `npx svelte-kit sync` generates the .svelte-kit/ directory +- **Files modified:** None (generated files in .svelte-kit/ are gitignored) +- **Verification:** Build succeeds without tsconfig warning +- **Committed in:** 47e1f19 + +--- + +**Total deviations:** 2 auto-fixed (2 blocking) +**Impact on plan:** Both fixes necessary for build to succeed. No scope creep. + +## Issues Encountered +- `make all` fails at Go build step due to pre-existing undefined types in `internal/server/routes/templates.go` — this is from incomplete Plan I (Template CRUD), not related to this plan's changes. `make frontend` works correctly. +- Go binary not available in sandbox PATH — located at /usr/local/go/bin/go. Does not affect frontend build. +- Skipped `@catppuccin/palette` npm dependency — defined colors directly in CSS for zero runtime overhead. + +## User Setup Required + +None - no external service configuration required. + +## Next Phase Readiness +- Frontend scaffold ready for Plan M (Layout Shell) and Plan N (Feature Views) +- WebSocket client ready to connect once backend WS hub is active +- API client ready for all CRUD operations once endpoints are implemented +- Auth state ready for PIN login once auth endpoint exists +- All Svelte 5 runes patterns established for future components + +## Self-Check: PASSED + +All 17 key files verified present. Commit 47e1f19 verified in git log. + +--- +*Phase: 01-tournament-engine* +*Completed: 2026-03-01*