Commit Graph

16 Commits

Author SHA1 Message Date
Cal Corum
6bfc928169 Refactor user store to use apiClient instead of direct fetch
- Replace manual fetch calls with apiClient.get() and apiClient.patch()
- Remove manual token handling (apiClient handles this automatically)
- Add typed UserProfileResponse interface for API response
- Improve error handling with ApiError type checking
- Gains automatic token refresh on 401 with retry logic

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-31 00:36:42 -06:00
Cal Corum
cd3efcb528 Implement ProfilePage and profanity filter for display names (F1-006)
ProfilePage implementation:
- Full profile page with avatar, editable display name, session count
- LinkedAccountCard and DisplayNameEditor components
- useProfile composable wrapping user store operations
- Support for linking/unlinking OAuth providers
- Logout and logout-all-devices functionality

Profanity service with bypass detection:
- Uses better-profanity library for base detection
- Enhanced to catch common bypass attempts:
  - Number suffixes/prefixes (shit123, 69fuck)
  - Leet-speak substitutions (sh1t, f@ck, $hit)
  - Separator characters (s.h.i.t, f-u-c-k)
- Integrated into PATCH /api/users/me endpoint
- 17 unit tests covering all normalization strategies

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-30 16:06:42 -06:00
Cal Corum
3cc8d6645e Implement auth composables and starter selection (F1-003, F1-004, F1-005)
Features:
- Add useAuth composable with OAuth flow and token management
- Add useStarter composable with API integration and dev mock fallback
- Implement app auth initialization blocking navigation until ready
- Complete StarterSelectionPage with 5 themed deck options

Bug fixes:
- Fix CORS by adding localhost:3001 to allowed origins
- Fix OAuth URL to include redirect_uri parameter
- Fix emoji rendering in nav components (use actual chars, not escapes)
- Fix requireStarter guard timing by allowing navigation from /starter
- Fix starter "already selected" detection for 400 status code

Documentation:
- Update dev-server skill to use `docker compose` (newer CLI syntax)
- Update .env.example with port 3001 in CORS comment

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-30 15:36:14 -06:00
Cal Corum
f687909f91 Implement OAuth callback with token handling and profile fetch (F1-002)
Complete the AuthCallbackPage to handle OAuth redirects by parsing tokens
from URL fragment, fetching user profile, and redirecting based on starter
deck status. Includes open-redirect protection and comprehensive tests.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-30 12:39:18 -06:00
Cal Corum
09844cbf3f Add dev-server skill and update development ports
- Add /dev-server skill with preflight checks for environment, deps,
  ports, and services before starting frontend/backend
- Add /frontend-phase skill for tracking implementation phases
- Register skills in .claude/settings.json
- Update .env.development ports (8001 for API, 3001 for frontend)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-30 11:56:25 -06:00
Cal Corum
913b1e7eae Fix audit issues: OAuth login, remove dead code, add error boundary
Code audit fixes:
- Update LoginPage for OAuth (Google/Discord buttons, no password)
- Delete RegisterPage.vue (OAuth-only app)
- Delete AppHeader.vue (superseded by NavSidebar, had bugs)
- Add ErrorBoundary component for graceful error handling

Also adds Phase F1 (Authentication Flow) plan with 10 tasks.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-30 11:42:26 -06:00
Cal Corum
0dc52f74bc Add app shell with layouts and navigation (F0-007)
Create responsive layout system based on route meta:
- DefaultLayout: sidebar (desktop) / bottom tabs (mobile)
- MinimalLayout: centered content for auth pages
- GameLayout: full viewport for Phaser game

Navigation components:
- NavSidebar: desktop sidebar with main nav + user menu
- NavBottomTabs: mobile bottom tab bar

UI components (tied to UI store):
- LoadingOverlay: full-screen overlay with spinner
- ToastContainer: stacked notification toasts

Also adds Vue Router meta type declarations.

Phase F0 is now complete (8/8 tasks).

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-30 11:26:15 -06:00
Cal Corum
3a566ffd5a Add Socket.IO client with typed game events (F0-006)
- Create typed event interfaces for game namespace
- Add full game state types (GameState, Card, CardInPlay, etc.)
- Implement connection manager singleton with auth
- Add auto-reconnection with exponential backoff
- Provide helper methods for game actions (joinGame, sendAction, etc.)
- Add typed event subscription helpers with unsubscribe

Phase F0 progress: 7/8 tasks complete

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-30 11:15:17 -06:00
Cal Corum
0720084cb1 Add typed API client with auth and error handling (F0-005)
- Create ApiError class with status helpers (isNotFound, etc.)
- Create typed fetch wrapper with get/post/put/patch/delete methods
- Auto-inject Authorization header from auth store
- Handle 401 with automatic token refresh and retry
- Add query parameter support and proper URL building
- Add comprehensive tests (11 tests)

Phase F0 progress: 6/8 tasks complete

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-30 11:11:11 -06:00
Cal Corum
f63e8be600 Add Pinia stores for auth, user, and UI (F0-004)
- Refactor auth store for OAuth flow (access/refresh tokens)
- Add token refresh logic and expiry tracking
- Create user store for profile data and linked accounts
- Create UI store for loading overlay, toasts, and modals
- Update router guard tests for new auth store structure
- Add comprehensive tests (45 total passing)

Phase F0 progress: 5/8 tasks complete

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-30 11:07:25 -06:00
Cal Corum
5424bf9086 Add environment config and Vue Router with guards (F0-003, F0-008)
- Add environment configuration with type-safe config.ts
- Implement navigation guards (requireAuth, requireGuest, requireStarter)
- Update router to match sitePlan routes and layouts
- Create placeholder pages for all sitePlan routes
- Update auth store User interface for OAuth flow
- Add phase plan tracking for F0

Phase F0 progress: 4/8 tasks complete

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-30 10:59:04 -06:00
Cal Corum
b9b803da66 Scaffold Vue 3 + TypeScript frontend (Phase F0)
Vue 3 with Composition API, Pinia, Vue Router, Tailwind v4:
- Vite build with @/ path aliases and backend proxy
- TypeScript strict mode with proper type imports
- Pinia stores (auth, game) with setup syntax and persistence
- Vue Router with auth guards and lazy-loaded routes
- Tailwind v4 with custom theme (Pokemon types, dark UI)
- Vitest configured for component testing
- ESLint v9 flat config with Vue/TypeScript support

Pages: Home, Login, Register, Campaign, Collection, DeckBuilder, Match
Components: AppHeader with auth-aware navigation
Types: Card, GameState, Player, Deck, Campaign types

Also adds frontend-code-audit skill with patterns for:
- Error handling (unhandled promises, empty catches)
- Security (XSS, token storage, input validation)
- Architecture (Composition API, Pinia patterns, Phaser rules)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-30 09:23:53 -06:00
Cal Corum
5b12df0cb1 Add backend API reference to frontend CLAUDE.md
- REST endpoints for auth, users, collections, decks, games
- WebSocket events (client→server and server→client)
- Key backend files to reference
- Type definitions to mirror from backend schemas

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-30 08:24:34 -06:00
Cal Corum
f27830d19e Add frontend CLAUDE.md with coding standards
- Vue 3 Composition API patterns (<script setup>)
- Pinia setup store syntax
- Composable patterns for API calls
- Vue-Phaser integration guidelines
- Tailwind mobile-first approach
- TypeScript strict mode requirements
- Testing patterns with docstrings
- Path aliases and environment config
- Common patterns (loading states, guards, error handling)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-30 08:22:14 -06:00
Cal Corum
29b5d36621 Add site plan to frontend project plan
- Mobile-first, desktop first-class citizen
- Navigation: left sidebar (desktop), bottom tabs (mobile)
- 11 routes defined with auth requirements and layouts
- 3 layout types: minimal (login), game (full viewport), default (nav)
- Auth flow: login → starter (if needed) → dashboard
- Dashboard widgets and profile page v1 scope defined

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-30 08:19:52 -06:00
Cal Corum
6f871d7187 Add frontend project plan (F0-F8)
Comprehensive Vue 3 + Phaser 3 frontend plan with 8 phases:
- F0: Project Foundation (Vite, Vue, Tailwind, Pinia, Socket.IO)
- F1: Authentication (OAuth flow, token management)
- F2: Deck Management (collection, deck builder, starter selection)
- F3: Phaser Integration (Vue-Phaser bridge, board layout, cards)
- F4: Live Gameplay (WebSocket sync, actions, turn flow)
- F5: Polish & UX (reconnection, animations, timer)
- F6: Campaign Mode (blocked on backend Phase 5)
- F7: Multiplayer (blocked on backend Phase 6)
- F8: Pack Opening (blocked on backend Phase 5)

F0-F5 are unblocked - all backend dependencies (Phases 2-4) complete.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-30 08:02:07 -06:00