strat-gameplay-webapp/.claude/F1_VISUAL_GUIDE.md

Phase F1 Visual Guide - What You Can See

Frontend URL: http://localhost:3000 (after running npm run dev)

---

🎨 Pages Available

1. Home Page - /

File: pages/index.vue

Guest View (not logged in):

┌─────────────────────────────────────────────┐
│ SBA  Stratomatic Baseball Association      │  ← Header (blue)
│                                    [Login]  │
└─────────────────────────────────────────────┘

        Welcome to SBA
    Experience real-time multiplayer baseball
         simulation powered by Strat-O-Matic

    ⚾                🎲              👥
  Real-Time        Strategic      Multiplayer
  Gameplay        Decisions      & Spectator

           [Get Started Button]

┌─────────────────────────────────────────────┐
│  © 2025 Stratomatic Baseball Association   │  ← Footer
└─────────────────────────────────────────────┘

Authenticated View (logged in):

┌─────────────────────────────────────────────┐
│ SBA  Stratomatic Baseball      [username▾] │
│                     [Games]      [Logout]   │
└─────────────────────────────────────────────┘

    Welcome back, [username]!
    Ready to play some baseball?

    ┌─────────────┐  ┌─────────────┐  ┌─────────────┐
    │   + Create  │  │  📋 My      │  │  👥 My      │
    │     Game    │  │    Games    │  │   Teams     │
    └─────────────┘  └─────────────┘  └─────────────┘

    Recent Activity
    ┌───────────────────────────────────────────┐
    │ No recent activity yet...                 │
    │ Create your first game to get started!    │
    └───────────────────────────────────────────┘

---

2. Login Page - /auth/login

File: pages/auth/login.vue

        ╔═════════════════════════╗
        ║                         ║
        ║         SBA             ║  ← Large logo
        ║                         ║
        ║    Welcome Back         ║
        ║  Sign in to access      ║
        ║     your games          ║
        ║                         ║
        ║  ┌───────────────────┐  ║
        ║  │  [Discord Logo]   │  ║  ← Discord button
        ║  │ Continue with     │  ║     (purple #5865F2)
        ║  │    Discord        │  ║
        ║  └───────────────────┘  ║
        ║                         ║
        ║  Terms • Privacy Policy ║
        ╚═════════════════════════╝

            ← Back to Home

Features:

• Beautiful gradient background (blue)
• Discord branding (official color)
• Loading spinner when clicked
• Error messages display if OAuth fails

---

3. OAuth Callback - /auth/callback

File: pages/auth/callback.vue

While Processing:

        ╔═════════════════════════╗
        ║                         ║
        ║      ⟳ Spinning         ║  ← Animated spinner
        ║                         ║
        ║  Authenticating...      ║
        ║  Please wait while we   ║
        ║  complete your sign in  ║
        ║                         ║
        ╚═════════════════════════╝

On Success:

        ╔═════════════════════════╗
        ║                         ║
        ║      ✓ Checkmark        ║  ← Green checkmark
        ║                         ║
        ║  Sign In Successful!    ║
        ║  Redirecting you now... ║
        ║                         ║
        ╚═════════════════════════╝

On Error:

        ╔═════════════════════════╗
        ║                         ║
        ║      ✗ X Icon           ║  ← Red X
        ║                         ║
        ║ Authentication Failed   ║
        ║  [Error message here]   ║
        ║                         ║
        ║    [Try Again Button]   ║
        ║                         ║
        ╚═════════════════════════╝

---

4. Games List - /games

File: pages/games/index.vue Protected: Requires login

┌─────────────────────────────────────────────┐
│ SBA  Stratomatic Baseball      [username▾] │
│                     [Games]      [Logout]   │
└─────────────────────────────────────────────┘

    My Games                [Create New Game]
    View and manage your active and completed games

    [Active Games]  [Completed]
    ════════════

    ┌───────────────────────────────────────────┐
    │          📋                               │
    │      No Active Games                      │
    │                                           │
    │  You don't have any active games right    │
    │  now. Create a new game to get started!   │
    │                                           │
    │     [Create Your First Game]              │
    └───────────────────────────────────────────┘

---

5. Create Game - /games/create

File: pages/games/create.vue Protected: Requires login

┌─────────────────────────────────────────────┐
│ SBA  Stratomatic Baseball      [username▾] │
└─────────────────────────────────────────────┘

    Create New Game
    Set up a new game to play with friends

    ╔═══════════════════════════════════════════╗
    ║  Game Name                                ║
    ║  [Enter a name for this game............ ]║
    ║                                           ║
    ║  Home Team                                ║
    ║  [Select home team            ▾]          ║
    ║                                           ║
    ║  Away Team                                ║
    ║  [Select away team            ▾]          ║
    ║                                           ║
    ║  Game Mode                                ║
    ║  ○ Human vs Human                         ║
    ║     Play against another player           ║
    ║  ○ Human vs AI                            ║
    ║     Play against the computer             ║
    ║                                           ║
    ║  [Cancel]              [Create Game]      ║
    ╚═══════════════════════════════════════════╝

    ℹ️ Coming in Phase F6
    This is a placeholder form. Full game creation
    will be implemented in Phase F6.

---

6. Game View - /games/[id]

File: pages/games/[id].vue Protected: Requires login Layout: Uses game.vue layout (dark theme)

┌─────────────────────────────────────────────┐
│ ← Back to Games      SBA    🟢 Connected    │  ← Dark header
└─────────────────────────────────────────────┘

    Game game-123

    ┌─────────┐  ┌─────────┐  ┌─────────┐
    │ Away    │  │ Inning  │  │  Home   │
    │   0     │  │   1     │  │   0     │
    │         │  │  Top    │  │         │
    └─────────┘  └─────────┘  └─────────┘

    ┌──────────────┐  ┌──────────────┐
    │ Game State   │  │ Play-by-Play │
    │              │  │              │
    │ Outs:     0  │  │ No plays yet │
    │ Balls:    0  │  │ Game will    │
    │ Strikes:  0  │  │ start soon   │
    │ Runners: ⚪⚪⚪│  │              │
    └──────────────┘  └──────────────┘

    Actions
    [Roll Dice] [Set Defense] [Set Offense]

    ℹ️ Phase F2 Coming Soon
    Full game interface will be implemented
    in Phase F2 with real-time updates.

---

🎨 Design Features You Can See

Color Scheme (SBA)

• Primary Blue: #1e40af (header, buttons, links)
• Secondary: Grays for text and backgrounds
• Success: Green for positive actions
• Error: Red for errors
• Warning: Yellow/orange for warnings

Responsive Breakpoints

• Mobile: 375px+ (default)
• Tablet: 768px+ (md:)
• Desktop: 1024px+ (lg:)

Interactive Elements

• ✅ Hover effects on all buttons and links
• ✅ Loading spinners for async operations
• ✅ Smooth transitions (0.3s)
• ✅ Shadow effects on cards
• ✅ Discord button with official branding

Typography

• Headings: Bold, clear hierarchy
• Body: Gray-600 for secondary text
• Buttons: Semibold, clear labels

---

🔄 State Management You Can Test

Authentication Flow

1. Visit /auth/login
2. Click "Continue with Discord"
3. (Will redirect to Discord OAuth - requires Discord app setup)
4. After auth, redirected back with user data
5. User data stored in localStorage
6. Navigation shows username
7. Protected routes accessible

Route Protection

1. Try to access /games while logged out
2. Should redirect to /auth/login?redirect=/games
3. After login, should redirect back to /games

Layout Switching

1. Visit / or /games → Uses default.vue layout
2. Visit /games/123 → Uses game.vue layout (dark theme)

---

🧪 How to Test Locally

1. Start Dev Server

cd /mnt/NV2/Development/strat-gameplay-webapp/frontend-sba
npm run dev

Visit: http://localhost:3000

2. Test Navigation

• ✅ Home page loads
• ✅ Click "Login" → Goes to /auth/login
• ✅ Click "Back to Home" → Returns to /
• ✅ Try accessing /games → Redirects to login

3. Test Store (Dev Tools)

Open browser console:

// Access Pinia stores
const authStore = useAuthStore()
const gameStore = useGameStore()
const uiStore = useUiStore()

// Check state
console.log(authStore.isAuthenticated)
console.log(gameStore.gameState)
console.log(uiStore.toasts)

4. Test Responsive Design

• Open browser dev tools
• Toggle device toolbar
• Test at 375px (iPhone), 768px (iPad), 1024px (Desktop)
• All pages should be fully responsive

---

📸 What to Screenshot

1. Home page (guest view)
2. Login page with Discord button
3. Home page (mocked auth view - you'd need to mock auth store)
4. Games list with empty state
5. Create game form
6. Game view placeholder
7. Mobile view of any page (375px width)

---

⚠️ Current Limitations

Backend Not Connected

• Discord OAuth requires backend setup
• Can mock auth by setting localStorage:

  localStorage.setItem('auth_token', 'mock-token')
  localStorage.setItem('user', JSON.stringify({
    id: '123',
    username: 'TestUser',
    discriminator: '0001',
    avatar: null,
    email: 'test@example.com'
  }))
  

Placeholder Data

• Games list is empty (Phase F6 will add API)
• Game view is placeholder (Phase F2 will implement)
• Create game doesn't save (Phase F6)

What Works

• ✅ All page routing
• ✅ Layout switching
• ✅ Auth middleware redirects
• ✅ Store state management
• ✅ Responsive design
• ✅ UI components render

---

🎯 To Fully Test Auth Flow

You'll need to:

1. Set up Discord OAuth app (get client ID)
2. Configure backend OAuth endpoint
3. Update nuxt.config.ts with Discord credentials
4. Start backend server
5. Then full OAuth flow works

OR mock it for testing:

// In browser console after loading app
const authStore = useAuthStore()
authStore.setAuth({
  access_token: 'mock-token',
  refresh_token: 'mock-refresh',
  expires_in: 3600,
  user: {
    id: '123456789',
    username: 'TestUser',
    discriminator: '0001',
    avatar: null,
    email: 'test@example.com'
  }
})

---

Summary: Phase F1 provides a complete, navigable frontend with 8 pages, 2 layouts, full routing, auth middleware, and beautiful UI. Everything renders and works - it just needs backend integration (Phases F6-F9) to have real data!