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
```bash
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:
```javascript
// 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:
  ```javascript
  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:
```javascript
// 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!