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>
This commit is contained in:
Cal Corum
parent
5b12df0cb1
commit
b9b803da66
153
.claude/skills/frontend-code-audit/SKILL.md
Normal file
153
.claude/skills/frontend-code-audit/SKILL.md
Normal file
@ -0,0 +1,153 @@
|
||||
# Frontend Code Audit Skill
|
||||
|
||||
Perform systematic code audits on Vue/TypeScript/Phaser frontend code to find anti-patterns, hidden errors, security issues, and architecture violations.
|
||||
|
||||
## Usage
|
||||
|
||||
```
|
||||
/frontend-code-audit [category] [path]
|
||||
```
|
||||
|
||||
**Categories:**
|
||||
- `errors` - Unhandled errors, silent failures, missing error states
|
||||
- `security` - XSS risks, data exposure, auth token handling
|
||||
- `architecture` - Vue/Pinia patterns, Phaser integration, component design
|
||||
- `all` - Run all audit categories (default)
|
||||
|
||||
**Path:** Optional path to audit (defaults to `frontend/src/`)
|
||||
|
||||
## Examples
|
||||
|
||||
```
|
||||
/frontend-code-audit # Full audit of frontend/src/
|
||||
/frontend-code-audit errors # Just error handling patterns
|
||||
/frontend-code-audit security stores/ # Security audit of stores/
|
||||
/frontend-code-audit architecture game/ # Architecture audit of Phaser code
|
||||
```
|
||||
|
||||
## Instructions
|
||||
|
||||
When this skill is invoked:
|
||||
|
||||
1. **Load Pattern Definitions**
|
||||
Read the YAML files in `patterns/` directory for the requested category.
|
||||
|
||||
2. **Search Codebase**
|
||||
For each pattern, use Grep with the specified regex to find matches.
|
||||
Focus on production code (skip test files unless pattern specifies otherwise).
|
||||
|
||||
3. **Analyze Context**
|
||||
For each match, read surrounding code to determine verdict:
|
||||
- **ISSUE**: Code should be changed (explain why)
|
||||
- **WARNING**: Potential problem, needs review
|
||||
- **OK**: Pattern detected but implementation is correct (explain why)
|
||||
|
||||
4. **Generate Report**
|
||||
Output structured report with:
|
||||
- Summary stats (issues/warnings/ok by category)
|
||||
- Detailed findings with file:line references
|
||||
- Recommendations for each issue
|
||||
|
||||
## Verdict Guidelines
|
||||
|
||||
### Error Handling
|
||||
|
||||
**ISSUE** when:
|
||||
- Promise rejection unhandled (no `.catch()` or try/catch)
|
||||
- Fetch error caught but UI shows no feedback
|
||||
- Error logged but component renders as if success
|
||||
- Empty catch block swallows error
|
||||
|
||||
**OK** when:
|
||||
- Error caught and user notified (toast, error state)
|
||||
- Error boundary catches and displays fallback
|
||||
- Retry logic with eventual user feedback
|
||||
- Graceful degradation documented
|
||||
|
||||
### Security
|
||||
|
||||
**ISSUE** when:
|
||||
- `v-html` used with any user-provided data
|
||||
- Auth token stored in localStorage without httpOnly consideration
|
||||
- Sensitive data (passwords, tokens) in console.log
|
||||
- Query params contain auth tokens
|
||||
|
||||
**OK** when:
|
||||
- `v-html` only used with sanitized/trusted content
|
||||
- Token storage follows project auth pattern
|
||||
- Logging excludes sensitive fields
|
||||
- Auth handled via httpOnly cookies or secure headers
|
||||
|
||||
### Architecture
|
||||
|
||||
**ISSUE** when:
|
||||
- Game logic (damage calc, turn state) in Phaser scene
|
||||
- API calls made directly in component (not via composable/store)
|
||||
- Phaser scene imports from stores without bridge pattern
|
||||
- Component has >200 lines (should split)
|
||||
|
||||
**OK** when:
|
||||
- Phaser only handles rendering/animation
|
||||
- API access through typed composables
|
||||
- Vue-Phaser communication via event bridge
|
||||
- Large component is page-level layout
|
||||
|
||||
## Pattern File Format
|
||||
|
||||
```yaml
|
||||
name: Category Name
|
||||
description: What this category audits
|
||||
|
||||
patterns:
|
||||
- id: unique-pattern-id
|
||||
description: Human-readable description
|
||||
grep_pattern: 'regex pattern for Grep tool'
|
||||
file_glob: '*.vue' # Optional, defaults to *.{vue,ts}
|
||||
exclude_tests: true # Optional, defaults to true
|
||||
multiline: false # Optional, for cross-line patterns
|
||||
context_lines: 3 # Lines to read around match
|
||||
verdict_hints:
|
||||
ISSUE_IF: "condition that makes this an issue"
|
||||
OK_IF: "condition that makes this acceptable"
|
||||
```
|
||||
|
||||
## Output Format
|
||||
|
||||
```markdown
|
||||
# Frontend Code Audit Report
|
||||
|
||||
**Scope:** frontend/src/
|
||||
**Categories:** errors, security, architecture
|
||||
**Date:** YYYY-MM-DD
|
||||
|
||||
## Summary
|
||||
|
||||
| Category | Issues | Warnings | OK |
|
||||
|----------|--------|----------|-----|
|
||||
| Errors | 2 | 1 | 5 |
|
||||
| Security | 0 | 2 | 3 |
|
||||
| Architecture | 1 | 0 | 4 |
|
||||
|
||||
## Issues (Fix Required)
|
||||
|
||||
### [ISSUE] security.v-html-user-data
|
||||
**File:** src/components/CardDescription.vue:42
|
||||
**Pattern:** v-html with potentially unsafe content
|
||||
|
||||
```vue
|
||||
<div v-html="card.description" />
|
||||
```
|
||||
|
||||
**Problem:** Card description from API could contain malicious scripts.
|
||||
**Recommendation:** Use text interpolation or sanitize with DOMPurify.
|
||||
|
||||
---
|
||||
|
||||
## Warnings (Review Needed)
|
||||
|
||||
...
|
||||
|
||||
## OK (Verified Correct)
|
||||
|
||||
...
|
||||
```
|
||||
204
.claude/skills/frontend-code-audit/patterns/architecture.yaml
Normal file
204
.claude/skills/frontend-code-audit/patterns/architecture.yaml
Normal file
@ -0,0 +1,204 @@
|
||||
# Frontend Architecture Anti-Patterns
|
||||
# Patterns that violate Mantimon TCG frontend architecture principles
|
||||
|
||||
name: Architecture
|
||||
description: |
|
||||
Detects violations of the project's frontend architecture principles:
|
||||
- Vue Composition API patterns (no Options API)
|
||||
- Pinia store patterns (setup syntax, proper actions)
|
||||
- Phaser integration (rendering only, no game logic)
|
||||
- Component organization (composables for reuse)
|
||||
- Backend authority (client never authoritative for game state)
|
||||
|
||||
patterns:
|
||||
# Vue Composition API
|
||||
- id: options-api-usage
|
||||
description: Options API instead of Composition API
|
||||
grep_pattern: 'export default \{[\s\S]*?(data\(\)|methods:|computed:|watch:)'
|
||||
multiline: true
|
||||
file_glob: '*.vue'
|
||||
context_lines: 5
|
||||
verdict_hints:
|
||||
ISSUE_IF: "Using Options API - project uses Composition API only"
|
||||
OK_IF: "Never OK - convert to <script setup> with Composition API"
|
||||
|
||||
- id: missing-script-setup
|
||||
description: Script without setup attribute
|
||||
grep_pattern: '<script lang="ts">\s*$'
|
||||
file_glob: '*.vue'
|
||||
context_lines: 2
|
||||
verdict_hints:
|
||||
ISSUE_IF: "Missing setup - should use <script setup lang=\"ts\">"
|
||||
OK_IF: "Rare cases needing defineComponent; document why"
|
||||
|
||||
- id: options-api-definecomponent
|
||||
description: defineComponent with options object
|
||||
grep_pattern: 'defineComponent\(\{[\s\S]*?(data|methods|computed):'
|
||||
multiline: true
|
||||
file_glob: '*.vue'
|
||||
context_lines: 5
|
||||
verdict_hints:
|
||||
ISSUE_IF: "Options API via defineComponent"
|
||||
OK_IF: "Never OK - use <script setup>"
|
||||
|
||||
# Pinia Store Patterns
|
||||
- id: store-options-syntax
|
||||
description: Pinia store using options syntax instead of setup
|
||||
grep_pattern: 'defineStore\([^,]+,\s*\{[\s\S]*?state:'
|
||||
multiline: true
|
||||
file_glob: 'stores/*.ts'
|
||||
context_lines: 5
|
||||
verdict_hints:
|
||||
ISSUE_IF: "Options syntax - project uses setup store syntax"
|
||||
OK_IF: "Never OK - convert to setup syntax with ref/computed"
|
||||
|
||||
- id: store-mutation-outside-action
|
||||
description: Store state mutated directly from component
|
||||
grep_pattern: 'Store\(\)\.\w+\s*='
|
||||
file_glob: '*.vue'
|
||||
context_lines: 3
|
||||
verdict_hints:
|
||||
ISSUE_IF: "Direct state mutation - use store action instead"
|
||||
OK_IF: "Assigning to local ref that shadows store property"
|
||||
|
||||
- id: store-no-error-state
|
||||
description: Store without error state for async operations
|
||||
grep_pattern: 'defineStore.*\{[\s\S]*?async.*fetch[\s\S]*?\}'
|
||||
multiline: true
|
||||
file_glob: 'stores/*.ts'
|
||||
context_lines: 20
|
||||
verdict_hints:
|
||||
ISSUE_IF: "Async store without error ref for failure handling"
|
||||
OK_IF: "Error state exists; or errors handled by caller"
|
||||
|
||||
# Phaser Integration
|
||||
- id: phaser-game-logic
|
||||
description: Game logic in Phaser scene (should be backend)
|
||||
grep_pattern: '(calculateDamage|resolveTurn|checkWin|applyEffect)'
|
||||
file_glob: 'game/**/*.ts'
|
||||
context_lines: 5
|
||||
verdict_hints:
|
||||
ISSUE_IF: "Game logic in Phaser - backend is authoritative"
|
||||
OK_IF: "Animation/display logic with same name; not actual game rules"
|
||||
|
||||
- id: phaser-direct-api
|
||||
description: Phaser scene making API calls directly
|
||||
grep_pattern: '(fetch|axios|api\.)'
|
||||
file_glob: 'game/**/*.ts'
|
||||
context_lines: 4
|
||||
verdict_hints:
|
||||
ISSUE_IF: "Phaser calling API - should go through Vue layer"
|
||||
OK_IF: "Asset loading (images, audio); not game data"
|
||||
|
||||
- id: phaser-store-import
|
||||
description: Phaser importing store directly (use bridge)
|
||||
grep_pattern: 'import.*from.*stores/'
|
||||
file_glob: 'game/**/*.ts'
|
||||
context_lines: 3
|
||||
verdict_hints:
|
||||
ISSUE_IF: "Direct store import - use event bridge pattern"
|
||||
OK_IF: "Type-only import (import type); bridge.ts file"
|
||||
|
||||
- id: phaser-modifies-state
|
||||
description: Phaser scene modifying game state
|
||||
grep_pattern: 'gameState\.\w+\s*='
|
||||
file_glob: 'game/**/*.ts'
|
||||
context_lines: 4
|
||||
verdict_hints:
|
||||
ISSUE_IF: "Phaser modifying state - should only render"
|
||||
OK_IF: "Local animation state; not shared game state"
|
||||
|
||||
# Component Organization
|
||||
- id: api-call-in-component
|
||||
description: Direct fetch/API call in component (use composable)
|
||||
grep_pattern: 'fetch\(|axios\.|api\.'
|
||||
file_glob: 'components/**/*.vue'
|
||||
context_lines: 5
|
||||
verdict_hints:
|
||||
ISSUE_IF: "API call in component - extract to composable"
|
||||
OK_IF: "Component is in pages/; or uses composable internally"
|
||||
|
||||
- id: large-component
|
||||
description: Component with many lines (consider splitting)
|
||||
grep_pattern: '</script>'
|
||||
file_glob: '*.vue'
|
||||
context_lines: 0
|
||||
verdict_hints:
|
||||
ISSUE_IF: "Script section >150 lines - split into composables"
|
||||
OK_IF: "Page component; or logic is cohesive and documented"
|
||||
|
||||
- id: prop-drilling
|
||||
description: Props passed through multiple levels
|
||||
grep_pattern: 'defineProps.*\{[\s\S]*?(Props|\.\.\.)'
|
||||
multiline: true
|
||||
file_glob: '*.vue'
|
||||
context_lines: 10
|
||||
verdict_hints:
|
||||
ISSUE_IF: "Props drilled >2 levels - use provide/inject or store"
|
||||
OK_IF: "Props are component-specific; not passed through"
|
||||
|
||||
# Type Safety
|
||||
- id: any-type-usage
|
||||
description: Using 'any' type
|
||||
grep_pattern: ':\s*any\b|as\s+any\b|<any>'
|
||||
file_glob: '*.{vue,ts}'
|
||||
context_lines: 2
|
||||
verdict_hints:
|
||||
ISSUE_IF: "Explicit any - defeats TypeScript benefits"
|
||||
OK_IF: "Temporary during migration; or external lib without types"
|
||||
|
||||
- id: type-assertion-abuse
|
||||
description: Type assertion (as) that might hide errors
|
||||
grep_pattern: '\s+as\s+[A-Z]\w+'
|
||||
file_glob: '*.{vue,ts}'
|
||||
context_lines: 3
|
||||
verdict_hints:
|
||||
ISSUE_IF: "Assertion used to bypass type error"
|
||||
OK_IF: "Narrowing from unknown; or after runtime check"
|
||||
|
||||
- id: missing-prop-types
|
||||
description: Props without TypeScript types
|
||||
grep_pattern: 'defineProps\(\[\s*["\']'
|
||||
file_glob: '*.vue'
|
||||
context_lines: 3
|
||||
verdict_hints:
|
||||
ISSUE_IF: "Array prop syntax - no type safety"
|
||||
OK_IF: "Never OK - use defineProps<{...}>()"
|
||||
|
||||
# Import Organization
|
||||
- id: relative-import-deep
|
||||
description: Deep relative imports (use @ alias)
|
||||
grep_pattern: 'from ["\']\.\.\/\.\.\/\.\.\/'
|
||||
file_glob: '*.{vue,ts}'
|
||||
context_lines: 2
|
||||
verdict_hints:
|
||||
ISSUE_IF: "Deep relative path - use @/ alias"
|
||||
OK_IF: "Never OK for 3+ levels - always use @/"
|
||||
|
||||
- id: missing-type-import
|
||||
description: Type import without 'import type'
|
||||
grep_pattern: 'import \{[^}]*(Type|Interface|Props)[^}]*\} from'
|
||||
file_glob: '*.{vue,ts}'
|
||||
context_lines: 2
|
||||
verdict_hints:
|
||||
ISSUE_IF: "Type imported as value - use 'import type'"
|
||||
OK_IF: "Also used as value (class, enum); not pure type"
|
||||
|
||||
# Backend Authority
|
||||
- id: client-state-authority
|
||||
description: Client treating its state as authoritative
|
||||
grep_pattern: '(emit|send)\([^)]*\{[^}]*(hp|damage|winner|gameState)'
|
||||
file_glob: '*.{vue,ts}'
|
||||
context_lines: 5
|
||||
verdict_hints:
|
||||
ISSUE_IF: "Sending computed game state to server - server is authority"
|
||||
OK_IF: "Sending action intent (playCard, attack); server computes result"
|
||||
|
||||
- id: local-game-calculation
|
||||
description: Calculating game outcomes client-side
|
||||
grep_pattern: '(damage|hp|energy)\s*[-+*]=|Math\.(random|floor).*damage'
|
||||
file_glob: '*.{vue,ts}'
|
||||
context_lines: 5
|
||||
verdict_hints:
|
||||
ISSUE_IF: "Game calculation on client - server must compute"
|
||||
OK_IF: "Animation preview; actual result from server"
|
||||
103
.claude/skills/frontend-code-audit/patterns/error-handling.yaml
Normal file
103
.claude/skills/frontend-code-audit/patterns/error-handling.yaml
Normal file
@ -0,0 +1,103 @@
|
||||
# Frontend Error Handling Anti-Patterns
|
||||
# Patterns that hide errors or fail to provide user feedback
|
||||
|
||||
name: Error Handling
|
||||
description: |
|
||||
Detects patterns where errors are silently swallowed, promises unhandled,
|
||||
or users left without feedback when operations fail. These patterns lead
|
||||
to confusing UX and hard-to-debug issues.
|
||||
|
||||
patterns:
|
||||
- id: unhandled-promise
|
||||
description: Async function called without await or .catch()
|
||||
grep_pattern: '^\s+\w+\([^)]*\)\s*$'
|
||||
file_glob: '*.{vue,ts}'
|
||||
context_lines: 3
|
||||
verdict_hints:
|
||||
ISSUE_IF: "Async function (fetch, API call) with no error handling"
|
||||
OK_IF: "Sync function; or fire-and-forget with documented reason"
|
||||
|
||||
- id: empty-catch-block
|
||||
description: Catch block that does nothing with the error
|
||||
grep_pattern: 'catch\s*\([^)]*\)\s*\{\s*\}'
|
||||
file_glob: '*.{vue,ts}'
|
||||
context_lines: 3
|
||||
verdict_hints:
|
||||
ISSUE_IF: "Error completely swallowed - user gets no feedback"
|
||||
OK_IF: "Never OK - at minimum log or set error state"
|
||||
|
||||
- id: catch-only-console
|
||||
description: Catch block that only logs to console
|
||||
grep_pattern: 'catch.*\{[\s\n]*console\.(log|error|warn)'
|
||||
multiline: true
|
||||
file_glob: '*.{vue,ts}'
|
||||
context_lines: 5
|
||||
verdict_hints:
|
||||
ISSUE_IF: "Error logged but UI shows success/no feedback to user"
|
||||
OK_IF: "Also sets error state or shows toast notification"
|
||||
|
||||
- id: fetch-no-error-check
|
||||
description: Fetch without checking response.ok
|
||||
grep_pattern: 'fetch\([^)]+\)[\s\S]*?\.json\(\)'
|
||||
multiline: true
|
||||
file_glob: '*.{vue,ts}'
|
||||
context_lines: 7
|
||||
verdict_hints:
|
||||
ISSUE_IF: "Response not checked for errors before parsing JSON"
|
||||
OK_IF: "Uses wrapper that handles errors; or response.ok checked"
|
||||
|
||||
- id: missing-loading-state
|
||||
description: Async operation without loading indicator
|
||||
grep_pattern: 'async.*\{[\s\S]*?await.*fetch'
|
||||
multiline: true
|
||||
file_glob: '*.vue'
|
||||
context_lines: 10
|
||||
verdict_hints:
|
||||
ISSUE_IF: "No isLoading ref set before/after async operation"
|
||||
OK_IF: "Loading state managed by composable; or instant operation"
|
||||
|
||||
- id: missing-error-state
|
||||
description: API call without error state handling
|
||||
grep_pattern: 'await.*(fetch|api|axios)'
|
||||
file_glob: '*.vue'
|
||||
context_lines: 8
|
||||
verdict_hints:
|
||||
ISSUE_IF: "No error ref or error handling visible in component"
|
||||
OK_IF: "Error handling in composable; or uses error boundary"
|
||||
|
||||
- id: silent-store-action
|
||||
description: Store action that catches but doesn't surface errors
|
||||
grep_pattern: 'catch.*\{[\s\S]*?return (false|null|undefined|\[\]|\{\})'
|
||||
multiline: true
|
||||
file_glob: 'stores/*.ts'
|
||||
context_lines: 6
|
||||
verdict_hints:
|
||||
ISSUE_IF: "Store swallows error, returns falsy - caller can't show error"
|
||||
OK_IF: "Also sets store.error state that UI can display"
|
||||
|
||||
- id: onmounted-no-error-handling
|
||||
description: onMounted with async call but no error handling
|
||||
grep_pattern: 'onMounted\(\s*async'
|
||||
file_glob: '*.vue'
|
||||
context_lines: 10
|
||||
verdict_hints:
|
||||
ISSUE_IF: "Async onMounted without try/catch - errors crash silently"
|
||||
OK_IF: "Has try/catch with error state; or uses error boundary"
|
||||
|
||||
- id: watch-async-no-catch
|
||||
description: Watch callback with async but no error handling
|
||||
grep_pattern: 'watch\([^)]+,\s*async'
|
||||
file_glob: '*.vue'
|
||||
context_lines: 8
|
||||
verdict_hints:
|
||||
ISSUE_IF: "Async watch without error handling"
|
||||
OK_IF: "Has try/catch; or errors handled by called function"
|
||||
|
||||
- id: socket-no-error-handler
|
||||
description: Socket.io without error event handler
|
||||
grep_pattern: 'socket\.(on|emit)\('
|
||||
file_glob: '*.{vue,ts}'
|
||||
context_lines: 10
|
||||
verdict_hints:
|
||||
ISSUE_IF: "Socket used without socket.on('error') or socket.on('connect_error')"
|
||||
OK_IF: "Error handlers registered elsewhere (socket setup file)"
|
||||
152
.claude/skills/frontend-code-audit/patterns/security.yaml
Normal file
152
.claude/skills/frontend-code-audit/patterns/security.yaml
Normal file
@ -0,0 +1,152 @@
|
||||
# Frontend Security Anti-Patterns
|
||||
# Patterns that may expose security vulnerabilities in Vue/TypeScript
|
||||
|
||||
name: Security
|
||||
description: |
|
||||
Detects patterns that could lead to security vulnerabilities including
|
||||
XSS risks, sensitive data exposure, insecure storage, and auth issues.
|
||||
Specific to Vue 3, TypeScript, and browser security concerns.
|
||||
|
||||
patterns:
|
||||
# XSS Risks
|
||||
- id: v-html-usage
|
||||
description: v-html directive (potential XSS)
|
||||
grep_pattern: 'v-html\s*='
|
||||
file_glob: '*.vue'
|
||||
context_lines: 3
|
||||
verdict_hints:
|
||||
ISSUE_IF: "Content from API, user input, or any external source"
|
||||
OK_IF: "Only static/trusted content; or sanitized with DOMPurify"
|
||||
|
||||
- id: innerhtml-assignment
|
||||
description: Direct innerHTML assignment
|
||||
grep_pattern: '\.innerHTML\s*='
|
||||
file_glob: '*.{vue,ts}'
|
||||
context_lines: 3
|
||||
verdict_hints:
|
||||
ISSUE_IF: "Assigns user-controlled or API content"
|
||||
OK_IF: "Static trusted HTML only; prefer v-html with sanitization"
|
||||
|
||||
- id: document-write
|
||||
description: document.write usage (XSS and performance)
|
||||
grep_pattern: 'document\.write'
|
||||
file_glob: '*.{vue,ts}'
|
||||
context_lines: 2
|
||||
verdict_hints:
|
||||
ISSUE_IF: "Almost never acceptable in modern apps"
|
||||
OK_IF: "Never OK - refactor to DOM manipulation"
|
||||
|
||||
# Sensitive Data Exposure
|
||||
- id: console-log-sensitive
|
||||
description: Console logging potentially sensitive data
|
||||
grep_pattern: 'console\.(log|debug|info)\(.*\b(token|password|secret|auth|credential|key)\b'
|
||||
file_glob: '*.{vue,ts}'
|
||||
context_lines: 2
|
||||
verdict_hints:
|
||||
ISSUE_IF: "Logs sensitive values - visible in browser devtools"
|
||||
OK_IF: "Logs field names only, not values; or dev-only code"
|
||||
|
||||
- id: localstorage-sensitive
|
||||
description: Storing sensitive data in localStorage
|
||||
grep_pattern: 'localStorage\.setItem\([^)]*\b(password|secret|credit|ssn)\b'
|
||||
file_glob: '*.{vue,ts}'
|
||||
context_lines: 3
|
||||
verdict_hints:
|
||||
ISSUE_IF: "Sensitive data in localStorage - accessible to XSS"
|
||||
OK_IF: "Never OK for passwords/secrets; tokens need careful review"
|
||||
|
||||
- id: token-in-url
|
||||
description: Auth token in URL or query params
|
||||
grep_pattern: '(url|href|src).*\?(.*&)?(token|auth|key)='
|
||||
file_glob: '*.{vue,ts}'
|
||||
context_lines: 3
|
||||
verdict_hints:
|
||||
ISSUE_IF: "Token in URL - logged in server logs, browser history"
|
||||
OK_IF: "One-time tokens (email verification); not session tokens"
|
||||
|
||||
- id: hardcoded-secret
|
||||
description: Hardcoded API key or secret
|
||||
grep_pattern: '(api_?key|secret|password)\s*[:=]\s*["\'][^"\']{8,}["\']'
|
||||
file_glob: '*.{vue,ts}'
|
||||
context_lines: 2
|
||||
exclude_tests: false
|
||||
verdict_hints:
|
||||
ISSUE_IF: "Real credential in source code"
|
||||
OK_IF: "Placeholder; real value from VITE_* env variable"
|
||||
|
||||
# Auth Issues
|
||||
- id: auth-check-client-only
|
||||
description: Auth check only on client side
|
||||
grep_pattern: '(isAuthenticated|isLoggedIn|user)\s*\?\s*<'
|
||||
file_glob: '*.vue'
|
||||
context_lines: 5
|
||||
verdict_hints:
|
||||
ISSUE_IF: "UI hidden but API not protected - security by obscurity"
|
||||
OK_IF: "UI hint only; API has proper auth middleware"
|
||||
|
||||
- id: token-in-state
|
||||
description: Auth token stored in reactive state without persistence consideration
|
||||
grep_pattern: 'ref<.*token.*>\s*\('
|
||||
file_glob: '*.{vue,ts}'
|
||||
context_lines: 4
|
||||
verdict_hints:
|
||||
ISSUE_IF: "Token in memory only - lost on refresh without secure persistence"
|
||||
OK_IF: "Intentional session-only token; or persisted securely elsewhere"
|
||||
|
||||
# Game-Specific Security
|
||||
- id: game-state-trust
|
||||
description: Trusting game state from client
|
||||
grep_pattern: '(damage|hp|energy|prize|winner)\s*=\s*(props|data|event)'
|
||||
file_glob: '*.{vue,ts}'
|
||||
context_lines: 5
|
||||
verdict_hints:
|
||||
ISSUE_IF: "Game state from client used without server validation"
|
||||
OK_IF: "Display only; actual state from server via WebSocket"
|
||||
|
||||
- id: hidden-info-client
|
||||
description: Accessing hidden game info that should be server-only
|
||||
grep_pattern: '\.(deck|opponentHand|prizes)\.(cards|contents|order)'
|
||||
file_glob: '*.{vue,ts}'
|
||||
context_lines: 4
|
||||
verdict_hints:
|
||||
ISSUE_IF: "Accessing hidden zone contents - should only have counts"
|
||||
OK_IF: "Own hand/prizes (visible to player); or mock data in tests"
|
||||
|
||||
# Input Validation
|
||||
- id: unsanitized-user-input
|
||||
description: User input used directly without validation
|
||||
grep_pattern: '(v-model|@input).*\n.*(?!.*validate|sanitize|escape)'
|
||||
multiline: true
|
||||
file_glob: '*.vue'
|
||||
context_lines: 5
|
||||
verdict_hints:
|
||||
ISSUE_IF: "Input sent to API without validation"
|
||||
OK_IF: "Validated before submission; or display-only local state"
|
||||
|
||||
- id: eval-usage
|
||||
description: eval() or Function() constructor
|
||||
grep_pattern: '\b(eval|Function)\s*\('
|
||||
file_glob: '*.{vue,ts}'
|
||||
context_lines: 3
|
||||
verdict_hints:
|
||||
ISSUE_IF: "Executing dynamic code - XSS/injection risk"
|
||||
OK_IF: "Never OK in frontend code"
|
||||
|
||||
# Network Security
|
||||
- id: http-url
|
||||
description: HTTP (non-HTTPS) URL in code
|
||||
grep_pattern: '["\']http://(?!localhost|127\.0\.0\.1)'
|
||||
file_glob: '*.{vue,ts}'
|
||||
context_lines: 2
|
||||
verdict_hints:
|
||||
ISSUE_IF: "Production URL using HTTP - data sent unencrypted"
|
||||
OK_IF: "Development URL; production uses HTTPS"
|
||||
|
||||
- id: cors-credential-any
|
||||
description: Credentials with wildcard or any origin
|
||||
grep_pattern: 'credentials:\s*["\']include["\']'
|
||||
file_glob: '*.{vue,ts}'
|
||||
context_lines: 4
|
||||
verdict_hints:
|
||||
ISSUE_IF: "Credentials sent to any origin - CSRF risk"
|
||||
OK_IF: "Server has strict CORS; or same-origin requests only"
|
||||
24
frontend/.gitignore
vendored
Normal file
24
frontend/.gitignore
vendored
Normal file
@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
5
frontend/README.md
Normal file
5
frontend/README.md
Normal file
@ -0,0 +1,5 @@
|
||||
# Vue 3 + TypeScript + Vite
|
||||
|
||||
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
|
||||
|
||||
Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
|
||||
37
frontend/eslint.config.js
Normal file
37
frontend/eslint.config.js
Normal file
@ -0,0 +1,37 @@
|
||||
import js from '@eslint/js'
|
||||
import globals from 'globals'
|
||||
import vue from 'eslint-plugin-vue'
|
||||
import tseslint from 'typescript-eslint'
|
||||
|
||||
export default [
|
||||
js.configs.recommended,
|
||||
...tseslint.configs.recommended,
|
||||
...vue.configs['flat/recommended'],
|
||||
{
|
||||
files: ['**/*.{ts,vue}'],
|
||||
languageOptions: {
|
||||
globals: {
|
||||
...globals.browser,
|
||||
},
|
||||
parserOptions: {
|
||||
parser: tseslint.parser,
|
||||
},
|
||||
},
|
||||
rules: {
|
||||
// Vue rules
|
||||
'vue/multi-word-component-names': 'off',
|
||||
'vue/require-default-prop': 'off',
|
||||
|
||||
// TypeScript rules
|
||||
'@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
|
||||
'@typescript-eslint/explicit-function-return-type': 'off',
|
||||
'@typescript-eslint/explicit-module-boundary-types': 'off',
|
||||
|
||||
// General rules - allow console in dev guards
|
||||
'no-console': 'off',
|
||||
},
|
||||
},
|
||||
{
|
||||
ignores: ['dist/', 'node_modules/', '*.config.js', '*.config.ts'],
|
||||
},
|
||||
]
|
||||
13
frontend/index.html
Normal file
13
frontend/index.html
Normal file
@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>mantimon-frontend-scaffold</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
5621
frontend/package-lock.json
generated
Normal file
5621
frontend/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
42
frontend/package.json
Normal file
42
frontend/package.json
Normal file
@ -0,0 +1,42 @@
|
||||
{
|
||||
"name": "mantimon-tcg-frontend",
|
||||
"private": true,
|
||||
"version": "0.1.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vue-tsc -b && vite build",
|
||||
"preview": "vite preview",
|
||||
"test": "vitest",
|
||||
"test:watch": "vitest --watch",
|
||||
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix",
|
||||
"typecheck": "vue-tsc --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tailwindcss/postcss": "^4.1.18",
|
||||
"pinia": "^3.0.2",
|
||||
"pinia-plugin-persistedstate": "^4.2.0",
|
||||
"socket.io-client": "^4.8.1",
|
||||
"vue": "^3.5.24",
|
||||
"vue-router": "^4.5.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.39.2",
|
||||
"@types/node": "^24.10.1",
|
||||
"@vitejs/plugin-vue": "^6.0.1",
|
||||
"@vue/test-utils": "^2.4.6",
|
||||
"@vue/tsconfig": "^0.8.1",
|
||||
"autoprefixer": "^10.4.21",
|
||||
"eslint": "^9.21.0",
|
||||
"eslint-plugin-vue": "^10.1.0",
|
||||
"globals": "^17.2.0",
|
||||
"jsdom": "^27.4.0",
|
||||
"postcss": "^8.5.3",
|
||||
"tailwindcss": "^4.1.4",
|
||||
"typescript": "~5.9.3",
|
||||
"typescript-eslint": "^8.54.0",
|
||||
"vite": "^7.2.4",
|
||||
"vitest": "^3.1.2",
|
||||
"vue-tsc": "^3.1.4"
|
||||
}
|
||||
}
|
||||
6
frontend/postcss.config.js
Normal file
6
frontend/postcss.config.js
Normal file
@ -0,0 +1,6 @@
|
||||
export default {
|
||||
plugins: {
|
||||
'@tailwindcss/postcss': {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
1
frontend/public/vite.svg
Normal file
1
frontend/public/vite.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
20
frontend/src/App.vue
Normal file
20
frontend/src/App.vue
Normal file
@ -0,0 +1,20 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
|
||||
import AppHeader from '@/components/AppHeader.vue'
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
// Hide header on match page for full-screen game view
|
||||
const showHeader = computed(() => route.name !== 'match')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="min-h-screen flex flex-col">
|
||||
<AppHeader v-if="showHeader" />
|
||||
<main class="flex-1">
|
||||
<RouterView />
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
74
frontend/src/assets/main.css
Normal file
74
frontend/src/assets/main.css
Normal file
@ -0,0 +1,74 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
/* Import pixel font for retro GBC aesthetic */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
|
||||
|
||||
/* Custom theme */
|
||||
@theme {
|
||||
/* Pokemon type colors */
|
||||
--color-type-grass: #78C850;
|
||||
--color-type-fire: #F08030;
|
||||
--color-type-water: #6890F0;
|
||||
--color-type-lightning: #F8D030;
|
||||
--color-type-psychic: #F85888;
|
||||
--color-type-fighting: #C03028;
|
||||
--color-type-darkness: #705848;
|
||||
--color-type-metal: #B8B8D0;
|
||||
--color-type-fairy: #EE99AC;
|
||||
--color-type-dragon: #7038F8;
|
||||
--color-type-colorless: #A8A878;
|
||||
|
||||
/* UI colors */
|
||||
--color-primary: #3B82F6;
|
||||
--color-primary-dark: #2563EB;
|
||||
--color-primary-light: #60A5FA;
|
||||
--color-secondary: #6366F1;
|
||||
--color-secondary-dark: #4F46E5;
|
||||
--color-secondary-light: #818CF8;
|
||||
--color-success: #22C55E;
|
||||
--color-warning: #F59E0B;
|
||||
--color-error: #EF4444;
|
||||
|
||||
/* Dark theme surfaces */
|
||||
--color-surface: #374151;
|
||||
--color-surface-dark: #1F2937;
|
||||
--color-surface-light: #4B5563;
|
||||
|
||||
/* Font family */
|
||||
--font-pixel: "Press Start 2P", cursive;
|
||||
}
|
||||
|
||||
@layer base {
|
||||
html {
|
||||
@apply bg-gray-900 text-gray-100;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply min-h-screen;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
/* Card styling */
|
||||
.card {
|
||||
@apply bg-surface rounded-lg shadow-lg overflow-hidden;
|
||||
}
|
||||
|
||||
/* Button variants */
|
||||
.btn {
|
||||
@apply px-4 py-2 rounded font-medium transition-colors duration-200;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
@apply bg-primary hover:bg-primary-dark text-white;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
@apply bg-secondary hover:bg-secondary-dark text-white;
|
||||
}
|
||||
|
||||
/* Type badges */
|
||||
.type-badge {
|
||||
@apply px-2 py-1 rounded text-xs font-bold uppercase;
|
||||
}
|
||||
}
|
||||
78
frontend/src/components/AppHeader.vue
Normal file
78
frontend/src/components/AppHeader.vue
Normal file
@ -0,0 +1,78 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { RouterLink, useRouter } from 'vue-router'
|
||||
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
|
||||
const authStore = useAuthStore()
|
||||
const router = useRouter()
|
||||
|
||||
const isAuthenticated = computed(() => authStore.isAuthenticated)
|
||||
const username = computed(() => authStore.user?.username)
|
||||
|
||||
function handleLogout() {
|
||||
authStore.logout()
|
||||
router.push({ name: 'home' })
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header class="bg-surface-dark border-b border-gray-700">
|
||||
<div class="container mx-auto px-4 py-3 flex items-center justify-between">
|
||||
<RouterLink
|
||||
to="/"
|
||||
class="text-xl font-bold text-primary-light"
|
||||
>
|
||||
Mantimon TCG
|
||||
</RouterLink>
|
||||
|
||||
<nav class="flex items-center gap-6">
|
||||
<template v-if="isAuthenticated">
|
||||
<RouterLink
|
||||
to="/campaign"
|
||||
class="text-gray-300 hover:text-white transition-colors"
|
||||
>
|
||||
Campaign
|
||||
</RouterLink>
|
||||
<RouterLink
|
||||
to="/collection"
|
||||
class="text-gray-300 hover:text-white transition-colors"
|
||||
>
|
||||
Collection
|
||||
</RouterLink>
|
||||
<RouterLink
|
||||
to="/deck-builder"
|
||||
class="text-gray-300 hover:text-white transition-colors"
|
||||
>
|
||||
Decks
|
||||
</RouterLink>
|
||||
|
||||
<div class="flex items-center gap-3 ml-4 pl-4 border-l border-gray-600">
|
||||
<span class="text-gray-400">{{ username }}</span>
|
||||
<button
|
||||
class="text-gray-400 hover:text-white transition-colors"
|
||||
@click="handleLogout"
|
||||
>
|
||||
Logout
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<RouterLink
|
||||
to="/login"
|
||||
class="text-gray-300 hover:text-white transition-colors"
|
||||
>
|
||||
Login
|
||||
</RouterLink>
|
||||
<RouterLink
|
||||
to="/register"
|
||||
class="btn btn-primary"
|
||||
>
|
||||
Sign Up
|
||||
</RouterLink>
|
||||
</template>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
19
frontend/src/main.ts
Normal file
19
frontend/src/main.ts
Normal file
@ -0,0 +1,19 @@
|
||||
import { createApp } from 'vue'
|
||||
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import pinia from './stores'
|
||||
import { useAuthStore } from './stores/auth'
|
||||
|
||||
import './assets/main.css'
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
app.use(pinia)
|
||||
app.use(router)
|
||||
|
||||
// Initialize auth state from localStorage
|
||||
const authStore = useAuthStore()
|
||||
authStore.init()
|
||||
|
||||
app.mount('#app')
|
||||
20
frontend/src/pages/CampaignPage.vue
Normal file
20
frontend/src/pages/CampaignPage.vue
Normal file
@ -0,0 +1,20 @@
|
||||
<script setup lang="ts">
|
||||
// Campaign page - placeholder for Phase F2
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container mx-auto px-4 py-8">
|
||||
<h1 class="text-3xl font-bold mb-8">
|
||||
Campaign
|
||||
</h1>
|
||||
|
||||
<div class="bg-surface p-8 rounded-lg text-center">
|
||||
<p class="text-gray-400 mb-4">
|
||||
Campaign mode coming in Phase F2
|
||||
</p>
|
||||
<p class="text-sm text-gray-500">
|
||||
Challenge NPCs, defeat Club Leaders, and become Champion!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
20
frontend/src/pages/CollectionPage.vue
Normal file
20
frontend/src/pages/CollectionPage.vue
Normal file
@ -0,0 +1,20 @@
|
||||
<script setup lang="ts">
|
||||
// Collection page - placeholder for Phase F3
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container mx-auto px-4 py-8">
|
||||
<h1 class="text-3xl font-bold mb-8">
|
||||
Collection
|
||||
</h1>
|
||||
|
||||
<div class="bg-surface p-8 rounded-lg text-center">
|
||||
<p class="text-gray-400 mb-4">
|
||||
Collection view coming in Phase F3
|
||||
</p>
|
||||
<p class="text-sm text-gray-500">
|
||||
Browse your cards, filter by type, and track your collection progress.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
20
frontend/src/pages/DeckBuilderPage.vue
Normal file
20
frontend/src/pages/DeckBuilderPage.vue
Normal file
@ -0,0 +1,20 @@
|
||||
<script setup lang="ts">
|
||||
// Deck builder page - placeholder for Phase F3
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container mx-auto px-4 py-8">
|
||||
<h1 class="text-3xl font-bold mb-8">
|
||||
Deck Builder
|
||||
</h1>
|
||||
|
||||
<div class="bg-surface p-8 rounded-lg text-center">
|
||||
<p class="text-gray-400 mb-4">
|
||||
Deck builder coming in Phase F3
|
||||
</p>
|
||||
<p class="text-sm text-gray-500">
|
||||
Build and manage your decks with drag-and-drop interface.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
86
frontend/src/pages/HomePage.vue
Normal file
86
frontend/src/pages/HomePage.vue
Normal file
@ -0,0 +1,86 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { RouterLink } from 'vue-router'
|
||||
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
|
||||
const authStore = useAuthStore()
|
||||
const isAuthenticated = computed(() => authStore.isAuthenticated)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container mx-auto px-4 py-16">
|
||||
<div class="max-w-2xl mx-auto text-center">
|
||||
<h1 class="text-4xl md:text-5xl font-bold text-primary-light mb-6">
|
||||
Mantimon TCG
|
||||
</h1>
|
||||
<p class="text-xl text-gray-300 mb-8">
|
||||
A single-player trading card game adventure inspired by the
|
||||
classic Gameboy Color Pokemon TCG.
|
||||
</p>
|
||||
|
||||
<div
|
||||
v-if="isAuthenticated"
|
||||
class="space-y-4"
|
||||
>
|
||||
<RouterLink
|
||||
to="/campaign"
|
||||
class="btn btn-primary block w-full text-lg py-3"
|
||||
>
|
||||
Continue Campaign
|
||||
</RouterLink>
|
||||
<RouterLink
|
||||
to="/collection"
|
||||
class="btn btn-secondary block w-full text-lg py-3"
|
||||
>
|
||||
View Collection
|
||||
</RouterLink>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else
|
||||
class="space-y-4"
|
||||
>
|
||||
<RouterLink
|
||||
to="/register"
|
||||
class="btn btn-primary block w-full text-lg py-3"
|
||||
>
|
||||
Start Your Journey
|
||||
</RouterLink>
|
||||
<RouterLink
|
||||
to="/login"
|
||||
class="btn btn-secondary block w-full text-lg py-3"
|
||||
>
|
||||
Continue Adventure
|
||||
</RouterLink>
|
||||
</div>
|
||||
|
||||
<div class="mt-16 grid grid-cols-1 md:grid-cols-3 gap-8 text-left">
|
||||
<div class="bg-surface p-6 rounded-lg">
|
||||
<h3 class="text-lg font-bold text-type-fire mb-2">
|
||||
Campaign Mode
|
||||
</h3>
|
||||
<p class="text-gray-400">
|
||||
Challenge NPCs at themed clubs, defeat leaders, and collect medals.
|
||||
</p>
|
||||
</div>
|
||||
<div class="bg-surface p-6 rounded-lg">
|
||||
<h3 class="text-lg font-bold text-type-water mb-2">
|
||||
Build Your Deck
|
||||
</h3>
|
||||
<p class="text-gray-400">
|
||||
Collect cards from booster packs and build powerful decks.
|
||||
</p>
|
||||
</div>
|
||||
<div class="bg-surface p-6 rounded-lg">
|
||||
<h3 class="text-lg font-bold text-type-lightning mb-2">
|
||||
PvP Battles
|
||||
</h3>
|
||||
<p class="text-gray-400">
|
||||
Test your skills against other players in multiplayer matches.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
93
frontend/src/pages/LoginPage.vue
Normal file
93
frontend/src/pages/LoginPage.vue
Normal file
@ -0,0 +1,93 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const authStore = useAuthStore()
|
||||
|
||||
const username = ref('')
|
||||
const password = ref('')
|
||||
|
||||
async function handleSubmit() {
|
||||
const success = await authStore.login(username.value, password.value)
|
||||
if (success) {
|
||||
const redirect = route.query.redirect as string
|
||||
router.push(redirect || '/campaign')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container mx-auto px-4 py-16">
|
||||
<div class="max-w-md mx-auto">
|
||||
<h1 class="text-3xl font-bold text-center mb-8">
|
||||
Login
|
||||
</h1>
|
||||
|
||||
<form
|
||||
class="space-y-6"
|
||||
@submit.prevent="handleSubmit"
|
||||
>
|
||||
<div
|
||||
v-if="authStore.error"
|
||||
class="bg-error/20 text-error p-4 rounded"
|
||||
>
|
||||
{{ authStore.error }}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
for="username"
|
||||
class="block text-sm font-medium mb-2"
|
||||
>
|
||||
Username
|
||||
</label>
|
||||
<input
|
||||
id="username"
|
||||
v-model="username"
|
||||
type="text"
|
||||
required
|
||||
class="w-full px-4 py-2 bg-surface rounded border border-gray-600 focus:border-primary focus:outline-none"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
for="password"
|
||||
class="block text-sm font-medium mb-2"
|
||||
>
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
id="password"
|
||||
v-model="password"
|
||||
type="password"
|
||||
required
|
||||
class="w-full px-4 py-2 bg-surface rounded border border-gray-600 focus:border-primary focus:outline-none"
|
||||
>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="authStore.isLoading"
|
||||
class="btn btn-primary w-full py-3"
|
||||
>
|
||||
{{ authStore.isLoading ? 'Logging in...' : 'Login' }}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<p class="mt-6 text-center text-gray-400">
|
||||
Don't have an account?
|
||||
<RouterLink
|
||||
to="/register"
|
||||
class="text-primary-light hover:underline"
|
||||
>
|
||||
Sign up
|
||||
</RouterLink>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
55
frontend/src/pages/MatchPage.vue
Normal file
55
frontend/src/pages/MatchPage.vue
Normal file
@ -0,0 +1,55 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, onUnmounted } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
|
||||
import { useGameStore } from '@/stores/game'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const gameStore = useGameStore()
|
||||
|
||||
const matchId = route.params.id as string | undefined
|
||||
|
||||
onMounted(() => {
|
||||
if (!matchId) {
|
||||
// No match ID - redirect to campaign
|
||||
router.push('/campaign')
|
||||
return
|
||||
}
|
||||
|
||||
// TODO: Connect to game via WebSocket (Phase F4)
|
||||
if (import.meta.env.DEV) {
|
||||
console.log('Joining match:', matchId)
|
||||
}
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
gameStore.clearGame()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="h-screen bg-surface-dark flex items-center justify-center">
|
||||
<div
|
||||
v-if="!gameStore.gameState"
|
||||
class="text-center"
|
||||
>
|
||||
<div class="animate-pulse mb-4">
|
||||
<div class="w-16 h-16 mx-auto bg-primary rounded-full" />
|
||||
</div>
|
||||
<p class="text-gray-400">
|
||||
Connecting to match...
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else
|
||||
class="w-full h-full"
|
||||
>
|
||||
<!-- Phaser game canvas will mount here in Phase F4 -->
|
||||
<p class="text-center text-gray-400 pt-8">
|
||||
Match UI coming in Phase F4
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
142
frontend/src/pages/RegisterPage.vue
Normal file
142
frontend/src/pages/RegisterPage.vue
Normal file
@ -0,0 +1,142 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
|
||||
const router = useRouter()
|
||||
const authStore = useAuthStore()
|
||||
|
||||
const username = ref('')
|
||||
const email = ref('')
|
||||
const password = ref('')
|
||||
const confirmPassword = ref('')
|
||||
const localError = ref<string | null>(null)
|
||||
|
||||
async function handleSubmit() {
|
||||
localError.value = null
|
||||
|
||||
if (password.value !== confirmPassword.value) {
|
||||
localError.value = 'Passwords do not match'
|
||||
return
|
||||
}
|
||||
|
||||
if (password.value.length < 8) {
|
||||
localError.value = 'Password must be at least 8 characters'
|
||||
return
|
||||
}
|
||||
|
||||
const success = await authStore.register(
|
||||
username.value,
|
||||
email.value,
|
||||
password.value
|
||||
)
|
||||
if (success) {
|
||||
router.push('/campaign')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container mx-auto px-4 py-16">
|
||||
<div class="max-w-md mx-auto">
|
||||
<h1 class="text-3xl font-bold text-center mb-8">
|
||||
Create Account
|
||||
</h1>
|
||||
|
||||
<form
|
||||
class="space-y-6"
|
||||
@submit.prevent="handleSubmit"
|
||||
>
|
||||
<div
|
||||
v-if="localError || authStore.error"
|
||||
class="bg-error/20 text-error p-4 rounded"
|
||||
>
|
||||
{{ localError || authStore.error }}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
for="username"
|
||||
class="block text-sm font-medium mb-2"
|
||||
>
|
||||
Username
|
||||
</label>
|
||||
<input
|
||||
id="username"
|
||||
v-model="username"
|
||||
type="text"
|
||||
required
|
||||
class="w-full px-4 py-2 bg-surface rounded border border-gray-600 focus:border-primary focus:outline-none"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
for="email"
|
||||
class="block text-sm font-medium mb-2"
|
||||
>
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
id="email"
|
||||
v-model="email"
|
||||
type="email"
|
||||
required
|
||||
class="w-full px-4 py-2 bg-surface rounded border border-gray-600 focus:border-primary focus:outline-none"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
for="password"
|
||||
class="block text-sm font-medium mb-2"
|
||||
>
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
id="password"
|
||||
v-model="password"
|
||||
type="password"
|
||||
required
|
||||
class="w-full px-4 py-2 bg-surface rounded border border-gray-600 focus:border-primary focus:outline-none"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
for="confirmPassword"
|
||||
class="block text-sm font-medium mb-2"
|
||||
>
|
||||
Confirm Password
|
||||
</label>
|
||||
<input
|
||||
id="confirmPassword"
|
||||
v-model="confirmPassword"
|
||||
type="password"
|
||||
required
|
||||
class="w-full px-4 py-2 bg-surface rounded border border-gray-600 focus:border-primary focus:outline-none"
|
||||
>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="authStore.isLoading"
|
||||
class="btn btn-primary w-full py-3"
|
||||
>
|
||||
{{ authStore.isLoading ? 'Creating account...' : 'Create Account' }}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<p class="mt-6 text-center text-gray-400">
|
||||
Already have an account?
|
||||
<RouterLink
|
||||
to="/login"
|
||||
class="text-primary-light hover:underline"
|
||||
>
|
||||
Login
|
||||
</RouterLink>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
63
frontend/src/router/index.ts
Normal file
63
frontend/src/router/index.ts
Normal file
@ -0,0 +1,63 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
|
||||
import type { RouteRecordRaw } from 'vue-router'
|
||||
|
||||
const routes: RouteRecordRaw[] = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'home',
|
||||
component: () => import('@/pages/HomePage.vue'),
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
name: 'login',
|
||||
component: () => import('@/pages/LoginPage.vue'),
|
||||
},
|
||||
{
|
||||
path: '/register',
|
||||
name: 'register',
|
||||
component: () => import('@/pages/RegisterPage.vue'),
|
||||
},
|
||||
{
|
||||
path: '/campaign',
|
||||
name: 'campaign',
|
||||
component: () => import('@/pages/CampaignPage.vue'),
|
||||
meta: { requiresAuth: true },
|
||||
},
|
||||
{
|
||||
path: '/collection',
|
||||
name: 'collection',
|
||||
component: () => import('@/pages/CollectionPage.vue'),
|
||||
meta: { requiresAuth: true },
|
||||
},
|
||||
{
|
||||
path: '/deck-builder',
|
||||
name: 'deck-builder',
|
||||
component: () => import('@/pages/DeckBuilderPage.vue'),
|
||||
meta: { requiresAuth: true },
|
||||
},
|
||||
{
|
||||
path: '/match/:id?',
|
||||
name: 'match',
|
||||
component: () => import('@/pages/MatchPage.vue'),
|
||||
meta: { requiresAuth: true },
|
||||
},
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes,
|
||||
})
|
||||
|
||||
// Navigation guard for auth
|
||||
router.beforeEach((to, _from, next) => {
|
||||
const isAuthenticated = localStorage.getItem('auth_token')
|
||||
|
||||
if (to.meta.requiresAuth && !isAuthenticated) {
|
||||
next({ name: 'login', query: { redirect: to.fullPath } })
|
||||
} else {
|
||||
next()
|
||||
}
|
||||
})
|
||||
|
||||
export default router
|
||||
48
frontend/src/stores/auth.spec.ts
Normal file
48
frontend/src/stores/auth.spec.ts
Normal file
@ -0,0 +1,48 @@
|
||||
import { describe, it, expect, beforeEach } from 'vitest'
|
||||
import { setActivePinia, createPinia } from 'pinia'
|
||||
|
||||
import { useAuthStore } from './auth'
|
||||
|
||||
describe('useAuthStore', () => {
|
||||
beforeEach(() => {
|
||||
setActivePinia(createPinia())
|
||||
})
|
||||
|
||||
it('starts with no authenticated user', () => {
|
||||
/**
|
||||
* Test that the auth store initializes in an unauthenticated state.
|
||||
*
|
||||
* New users should not be authenticated until they log in,
|
||||
* ensuring protected routes are inaccessible by default.
|
||||
*/
|
||||
const store = useAuthStore()
|
||||
|
||||
expect(store.isAuthenticated).toBe(false)
|
||||
expect(store.user).toBeNull()
|
||||
expect(store.token).toBeNull()
|
||||
})
|
||||
|
||||
it('tracks loading state', () => {
|
||||
/**
|
||||
* Test that the loading state ref is accessible.
|
||||
*
|
||||
* Components need to check loading state to show spinners
|
||||
* and disable buttons during async operations.
|
||||
*/
|
||||
const store = useAuthStore()
|
||||
|
||||
expect(store.isLoading).toBe(false)
|
||||
})
|
||||
|
||||
it('tracks error state', () => {
|
||||
/**
|
||||
* Test that the error state ref is accessible.
|
||||
*
|
||||
* Components need to display error messages when
|
||||
* login or registration fails.
|
||||
*/
|
||||
const store = useAuthStore()
|
||||
|
||||
expect(store.error).toBeNull()
|
||||
})
|
||||
})
|
||||
112
frontend/src/stores/auth.ts
Normal file
112
frontend/src/stores/auth.ts
Normal file
@ -0,0 +1,112 @@
|
||||
import { ref, computed } from 'vue'
|
||||
import { defineStore } from 'pinia'
|
||||
|
||||
export interface User {
|
||||
id: string
|
||||
username: string
|
||||
email: string
|
||||
}
|
||||
|
||||
export const useAuthStore = defineStore('auth', () => {
|
||||
const user = ref<User | null>(null)
|
||||
const token = ref<string | null>(null)
|
||||
const isLoading = ref(false)
|
||||
const error = ref<string | null>(null)
|
||||
|
||||
const isAuthenticated = computed(() => !!token.value)
|
||||
|
||||
async function login(username: string, password: string): Promise<boolean> {
|
||||
isLoading.value = true
|
||||
error.value = null
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/auth/login', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ username, password }),
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
const data = await response.json()
|
||||
throw new Error(data.detail || 'Login failed')
|
||||
}
|
||||
|
||||
const data = await response.json()
|
||||
token.value = data.access_token
|
||||
user.value = data.user
|
||||
// Note: localStorage is used for token persistence across page reloads.
|
||||
// This is standard for SPAs but tokens are accessible to XSS. The backend
|
||||
// should use short-lived access tokens + httpOnly refresh cookies for
|
||||
// production. See: https://auth0.com/docs/secure/security-guidance/data-security/token-storage
|
||||
localStorage.setItem('auth_token', data.access_token)
|
||||
|
||||
return true
|
||||
} catch (e) {
|
||||
error.value = e instanceof Error ? e.message : 'Login failed'
|
||||
return false
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function register(
|
||||
username: string,
|
||||
email: string,
|
||||
password: string
|
||||
): Promise<boolean> {
|
||||
isLoading.value = true
|
||||
error.value = null
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/auth/register', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ username, email, password }),
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
const data = await response.json()
|
||||
throw new Error(data.detail || 'Registration failed')
|
||||
}
|
||||
|
||||
// Auto-login after registration
|
||||
return await login(username, password)
|
||||
} catch (e) {
|
||||
error.value = e instanceof Error ? e.message : 'Registration failed'
|
||||
return false
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function logout() {
|
||||
user.value = null
|
||||
token.value = null
|
||||
localStorage.removeItem('auth_token')
|
||||
}
|
||||
|
||||
// Restore token from localStorage on init
|
||||
function init() {
|
||||
const storedToken = localStorage.getItem('auth_token')
|
||||
if (storedToken) {
|
||||
token.value = storedToken
|
||||
// TODO: Validate token and fetch user profile
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
user,
|
||||
token,
|
||||
isLoading,
|
||||
error,
|
||||
isAuthenticated,
|
||||
login,
|
||||
register,
|
||||
logout,
|
||||
init,
|
||||
}
|
||||
}, {
|
||||
persist: {
|
||||
pick: ['token'],
|
||||
},
|
||||
})
|
||||
74
frontend/src/stores/game.ts
Normal file
74
frontend/src/stores/game.ts
Normal file
@ -0,0 +1,74 @@
|
||||
import { ref, computed } from 'vue'
|
||||
import { defineStore } from 'pinia'
|
||||
|
||||
import type { GameState, Card, Player } from '@/types'
|
||||
|
||||
export const useGameStore = defineStore('game', () => {
|
||||
const gameState = ref<GameState | null>(null)
|
||||
const isLoading = ref(false)
|
||||
const error = ref<string | null>(null)
|
||||
|
||||
// Computed properties for current player's view
|
||||
const myPlayer = computed<Player | null>(() => {
|
||||
if (!gameState.value) return null
|
||||
return gameState.value.players.find(p => p.isMe) ?? null
|
||||
})
|
||||
|
||||
const opponent = computed<Player | null>(() => {
|
||||
if (!gameState.value) return null
|
||||
return gameState.value.players.find(p => !p.isMe) ?? null
|
||||
})
|
||||
|
||||
const myHand = computed<Card[]>(() => myPlayer.value?.hand ?? [])
|
||||
|
||||
const myActive = computed<Card | null>(() => myPlayer.value?.active ?? null)
|
||||
|
||||
const myBench = computed<Card[]>(() => myPlayer.value?.bench ?? [])
|
||||
|
||||
const isMyTurn = computed(() => {
|
||||
if (!gameState.value || !myPlayer.value) return false
|
||||
return gameState.value.currentPlayerId === myPlayer.value.id
|
||||
})
|
||||
|
||||
const currentPhase = computed(() => gameState.value?.phase ?? null)
|
||||
|
||||
// Actions
|
||||
function updateGameState(state: GameState) {
|
||||
gameState.value = state
|
||||
}
|
||||
|
||||
function clearGame() {
|
||||
gameState.value = null
|
||||
error.value = null
|
||||
}
|
||||
|
||||
function setError(message: string) {
|
||||
error.value = message
|
||||
}
|
||||
|
||||
function clearError() {
|
||||
error.value = null
|
||||
}
|
||||
|
||||
return {
|
||||
// State
|
||||
gameState,
|
||||
isLoading,
|
||||
error,
|
||||
|
||||
// Computed
|
||||
myPlayer,
|
||||
opponent,
|
||||
myHand,
|
||||
myActive,
|
||||
myBench,
|
||||
isMyTurn,
|
||||
currentPhase,
|
||||
|
||||
// Actions
|
||||
updateGameState,
|
||||
clearGame,
|
||||
setError,
|
||||
clearError,
|
||||
}
|
||||
})
|
||||
11
frontend/src/stores/index.ts
Normal file
11
frontend/src/stores/index.ts
Normal file
@ -0,0 +1,11 @@
|
||||
import { createPinia } from 'pinia'
|
||||
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
|
||||
|
||||
const pinia = createPinia()
|
||||
pinia.use(piniaPluginPersistedstate)
|
||||
|
||||
export default pinia
|
||||
|
||||
// Re-export stores for convenience
|
||||
export { useAuthStore } from './auth'
|
||||
export { useGameStore } from './game'
|
||||
148
frontend/src/types/index.ts
Normal file
148
frontend/src/types/index.ts
Normal file
@ -0,0 +1,148 @@
|
||||
// Card Types
|
||||
export type CardType =
|
||||
| 'grass'
|
||||
| 'fire'
|
||||
| 'water'
|
||||
| 'lightning'
|
||||
| 'psychic'
|
||||
| 'fighting'
|
||||
| 'darkness'
|
||||
| 'metal'
|
||||
| 'fairy'
|
||||
| 'dragon'
|
||||
| 'colorless'
|
||||
|
||||
export type CardCategory = 'pokemon' | 'trainer' | 'energy'
|
||||
|
||||
export interface Card {
|
||||
id: string
|
||||
definitionId: string
|
||||
name: string
|
||||
category: CardCategory
|
||||
type?: CardType
|
||||
hp?: number
|
||||
currentHp?: number
|
||||
attacks?: Attack[]
|
||||
imageUrl?: string
|
||||
// Status effects for Pokemon
|
||||
status?: StatusEffect[]
|
||||
// Attached cards (energy, tools)
|
||||
attachments?: Card[]
|
||||
}
|
||||
|
||||
export interface Attack {
|
||||
name: string
|
||||
cost: CardType[]
|
||||
damage: number
|
||||
effect?: string
|
||||
effectParams?: Record<string, unknown>
|
||||
}
|
||||
|
||||
export interface StatusEffect {
|
||||
type: 'poisoned' | 'burned' | 'asleep' | 'paralyzed' | 'confused'
|
||||
turnsRemaining?: number
|
||||
}
|
||||
|
||||
// Game State Types
|
||||
export type GamePhase = 'setup' | 'draw' | 'main' | 'attack' | 'end'
|
||||
|
||||
export interface Player {
|
||||
id: string
|
||||
username: string
|
||||
isMe: boolean
|
||||
hand: Card[]
|
||||
active: Card | null
|
||||
bench: Card[]
|
||||
prizes: Card[]
|
||||
prizeCount: number
|
||||
deckCount: number
|
||||
discardPile: Card[]
|
||||
}
|
||||
|
||||
export interface GameState {
|
||||
id: string
|
||||
players: Player[]
|
||||
currentPlayerId: string
|
||||
phase: GamePhase
|
||||
turnNumber: number
|
||||
winner?: string
|
||||
// Actions available to current player
|
||||
availableActions?: string[]
|
||||
}
|
||||
|
||||
// API Response Types
|
||||
export interface ApiError {
|
||||
detail: string
|
||||
code?: string
|
||||
}
|
||||
|
||||
export interface PaginatedResponse<T> {
|
||||
items: T[]
|
||||
total: number
|
||||
page: number
|
||||
pageSize: number
|
||||
totalPages: number
|
||||
}
|
||||
|
||||
// Collection Types
|
||||
export interface CollectionCard {
|
||||
cardDefinitionId: string
|
||||
quantity: number
|
||||
card: CardDefinition
|
||||
}
|
||||
|
||||
export interface CardDefinition {
|
||||
id: string
|
||||
name: string
|
||||
category: CardCategory
|
||||
type?: CardType
|
||||
hp?: number
|
||||
attacks?: Attack[]
|
||||
imageUrl: string
|
||||
rarity: 'common' | 'uncommon' | 'rare' | 'holo' | 'ultra'
|
||||
setId: string
|
||||
setNumber: number
|
||||
}
|
||||
|
||||
// Deck Types
|
||||
export interface Deck {
|
||||
id: string
|
||||
name: string
|
||||
cards: DeckCard[]
|
||||
isValid: boolean
|
||||
cardCount: number
|
||||
}
|
||||
|
||||
export interface DeckCard {
|
||||
cardDefinitionId: string
|
||||
quantity: number
|
||||
card: CardDefinition
|
||||
}
|
||||
|
||||
// Campaign Types
|
||||
export interface Club {
|
||||
id: string
|
||||
name: string
|
||||
description: string
|
||||
iconUrl: string
|
||||
members: ClubMember[]
|
||||
leader: ClubMember
|
||||
isDefeated: boolean
|
||||
}
|
||||
|
||||
export interface ClubMember {
|
||||
id: string
|
||||
name: string
|
||||
portraitUrl: string
|
||||
difficulty: 'easy' | 'medium' | 'hard' | 'leader'
|
||||
isDefeated: boolean
|
||||
deckTheme: CardType
|
||||
}
|
||||
|
||||
export interface CampaignProgress {
|
||||
clubsDefeated: string[]
|
||||
medalsEarned: string[]
|
||||
currentClub?: string
|
||||
totalWins: number
|
||||
totalLosses: number
|
||||
}
|
||||
22
frontend/tsconfig.app.json
Normal file
22
frontend/tsconfig.app.json
Normal file
@ -0,0 +1,22 @@
|
||||
{
|
||||
"extends": "@vue/tsconfig/tsconfig.dom.json",
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
"types": ["vite/client"],
|
||||
|
||||
/* Path Aliases */
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["src/*"]
|
||||
},
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true
|
||||
},
|
||||
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
|
||||
}
|
||||
7
frontend/tsconfig.json
Normal file
7
frontend/tsconfig.json
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{ "path": "./tsconfig.app.json" },
|
||||
{ "path": "./tsconfig.node.json" }
|
||||
]
|
||||
}
|
||||
26
frontend/tsconfig.node.json
Normal file
26
frontend/tsconfig.node.json
Normal file
@ -0,0 +1,26 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||
"target": "ES2023",
|
||||
"lib": ["ES2023"],
|
||||
"module": "ESNext",
|
||||
"types": ["node"],
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
27
frontend/vite.config.ts
Normal file
27
frontend/vite.config.ts
Normal file
@ -0,0 +1,27 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import { fileURLToPath, URL } from 'node:url'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||
}
|
||||
},
|
||||
server: {
|
||||
port: 3000,
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://localhost:8000',
|
||||
changeOrigin: true
|
||||
},
|
||||
'/socket.io': {
|
||||
target: 'http://localhost:8000',
|
||||
changeOrigin: true,
|
||||
ws: true
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
17
frontend/vitest.config.ts
Normal file
17
frontend/vitest.config.ts
Normal file
@ -0,0 +1,17 @@
|
||||
import { defineConfig } from 'vitest/config'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import { fileURLToPath, URL } from 'node:url'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
test: {
|
||||
globals: true,
|
||||
environment: 'jsdom',
|
||||
include: ['src/**/*.{test,spec}.{js,ts}'],
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||
}
|
||||
}
|
||||
})
|
||||
Loading…
Reference in New Issue
Block a user