euchre_camp/docs/UI_DESIGN.md

EuchreCamp UI Design

Overview

Design for four distinct user views with role-based access control:

1. Tournament Admin View
2. Club Admin View (Superuser)
3. Player Profile View
4. Player Tournament Schedule View

Layout Structure

Navigation Bar (All Views)

// src/components/Navigation.tsx
<nav className="main-nav">
  <div className="nav-brand">
    <Link href="/">EuchreCamp</Link>
  </div>
  <div className="nav-links">
    <Link href="/rankings">Rankings</Link>
    {session && (
      <>
        <Link href={`/players/${session.user.id}/profile`}>My Profile</Link>
        <Link href={`/players/${session.user.id}/schedule`}>My Schedule</Link>
        {session.user.role === 'club_admin' && (
          <Link href="/admin">Admin</Link>
        )}
      </>
    )}
  </div>
  <div className="nav-user">
    {session ? (
      <>
        <span>{session.user.name}</span>
        <button onClick={() => signOut()}>Logout</button>
      </>
    ) : (
      <>
        <Link href="/auth/login">Login</Link>
        <Link href="/auth/register">Register</Link>
      </>
    )}
  </div>
</nav>

Authentication Views

Login Page

URL: /login
Purpose: Allow existing users to sign in

Layout:

+-------------------------------------------+
|  EuchreCamp - Login                       |
+-------------------------------------------+
|                                           |
|  [Logo/Brand]                             |
|                                           |
|  Email:    [_______________________]      |
|  Password: [_______________________]      |
|  [ ] Remember me                          |
|                                           |
|  [Login]                                  |
|                                           |
|  Don't have an account?                   |
|  [Register here]                          |
|                                           |
|  Forgot password?                         |
|  [Reset password]                         |
+-------------------------------------------+

Registration Page

URL: /register
Purpose: Allow new users to create accounts

Layout:

+-------------------------------------------+
|  EuchreCamp - Create Account              |
+-------------------------------------------+
|                                           |
|  Join EuchreCamp to track your games      |
|  and partnerships!                        |
|                                           |
|  Full Name:    [_______________________]  |
|  Email:        [_______________________]  |
|  Password:     [_______________________]  |
|  Confirm:      [_______________________]  |
|                                           |
|  [Create Account]                         |
|                                           |
|  Already have an account?                 |
|  [Login here]                             |
+-------------------------------------------+

Password Reset Page

URL: /password/reset
Purpose: Allow users to reset forgotten passwords

Layout:

+-------------------------------------------+
|  Reset Password                           |
+-------------------------------------------+
|                                           |
|  Enter your email address and we'll       |
|  send you a reset link.                   |
|                                           |
|  Email: [___________________________]     |
|                                           |
|  [Send Reset Link]                        |
|                                           |
|  Remember your password?                  |
|  [Login here]                             |
+-------------------------------------------+

Email Confirmation Page

URL: /confirm
Purpose: Display confirmation status

Layout:

+-------------------------------------------+
|  Email Confirmation                       |
+-------------------------------------------+
|                                           |
|  ✓ Email Confirmed!                       |
|  Your account is now active.              |
|                                           |
|  [Go to Dashboard]                        |
|                                           |
|  OR                                       |
|                                           |
|  ✗ Confirmation Failed                    |
|  The link has expired or is invalid.      |
|                                           |
|  [Request new confirmation]               |
+-------------------------------------------+

1. Tournament Admin View

URL: /admin/tournaments

Purpose: Create, manage, and monitor tournaments

Components:

Dashboard

• Upcoming Tournaments Table
  • Name, Date, Format, Status, Actions (View/Edit/Manage)
  • Quick action buttons: Schedule, Add Teams, Record Results

Tournament Detail Page

• Tournament Info Header

  • Name, Format, Status, Dates
  • Quick stats: Teams, Rounds, Matches, Participants

• Tournament Management Tabs

  Overview | Participants | Teams | Schedule | Results | Analytics
  

• Overview Tab

  • Current standings
  • Next matches
  • Tournament progress bar

• Participants Tab

  • List of registered players
  • Add/Remove participants
  • Bulk import from CSV

• Teams Tab

  • Team management (create/edit/delete teams)
  • Assign players to teams
  • Team standings

• Schedule Tab

  • Generate round-robin schedule
  • Generate bracket (single/double elim)
  • View round matchups
  • Re-schedule matches

• Results Tab

  • Match result entry form
  • CSV upload for batch results
  • Verify and submit results

• Analytics Tab

  • Tournament statistics
  • Partnership performance
  • Elo changes

Wireframe Layout:

+-------------------------------------------+
|  Tournament Admin                         |
|  [Create New] [Generate Schedule]         |
+-------------------------------------------+
|  Active: Spring Championship (Round 3/5)  |
|  [Overview] [Teams] [Schedule] [Results]  |
+-------------------------------------------+
|  Match Schedule - Round 3                 |
|  ---------------------------------------  |
|  Match 1: Team A vs Team B [Enter Result] |
|  Match 2: Team C vs Team D [Enter Result] |
|  Match 3: Team E vs Team F [Enter Result] |
+-------------------------------------------+

2. Club Admin View (Superuser)

URL: /admin or /admin/club

Purpose: Club-wide management and oversight

Components:

Club Dashboard

• Quick Stats Overview

  • Total Players
  • Active Tournaments
  • Matches This Week
  • Average Elo Rating

• Recent Activity Feed

  • New player registrations
  • Tournament creations
  • Match results
  • Partnership records

Player Management

• Player Directory

  • Searchable list of all players
  • Filter by status, rating range, activity
  • Bulk actions: Email, Export, Update ratings

• Player Editor

  • Edit player details
  • View player history
  • Manage player status

Tournament Management

• All Tournaments List
  • Filter by status, format, date range
  • Archive/completed tournaments
  • Clone existing tournaments

Club Settings

• Configuration
  • Default tournament settings
  • Elo rating parameters
  • Partnership tracking preferences
  • Notification settings

Analytics & Reports

• Club Statistics
  • Rating distribution charts
  • Activity heatmaps
  • Partnership network graph
  • Export reports (PDF/CSV)

Wireframe Layout:

+-------------------------------------------+
|  Club Admin Dashboard                     |
|  [Players] [Tournaments] [Reports] [Settings]
+-------------------------------------------+
|  Quick Stats: 45 Players | 3 Tournaments  |
+-------------------------------------------+
|  Recent Activity                          |
|  - John joined the club                   |
|  - Spring Championship started            |
|  - Emma & Alice won match vs Bob & Charlie|
+-------------------------------------------+
|  Player Directory                         |
|  [Search] [Filter by Rating] [Export]     |
|  ---------------------------------------  |
|  Rank | Name      | Elo   | Status        |
|  1    | Emma      | 1200  | Active        |
|  2    | Alice     | 1150  | Active        |
+-------------------------------------------+

3. Player Profile View

URL: /players/:id/profile

Purpose: Display player information and partnership analytics

Components:

Profile Header

• Player name and avatar
• Current Elo rating (with trend indicator)
• Club affiliation
• Member since date

Statistics Grid

+------------------+------------------+------------------+
| Current Elo      | Total Games      | Win Rate         |
| 1,200            | 45               | 58.2%            |
+------------------+------------------+------------------+
| Partnership Elo  | Best Partnership | Games with Best  |
| +150             | Alice (65%)      | 12 games         |
+------------------+------------------+------------------+

Partnership Performance Table

• Partner name (clickable link)
• Games played together
• Win rate with confidence indicator
• Total Elo change
• Average Elo change per match
• Last played together

Recent Games Timeline

• Chronological list of recent matches
• Shows teams, scores, and result
• Partner information for each game

Tournament History

• List of tournaments participated in
• Final standings
• Performance summary

Wireframe Layout:

+-------------------------------------------+
|  Player Profile: Emma                     |
|  ELO: 1200 (+25 this week)                |
+-------------------------------------------+
|  Partnership Performance                  |
|  ---------------------------------------  |
|  Partner    Games  Win Rate  ELO Change   |
|  Alice      12     65%       +45          |
|  Bob        8      50%       -20          |
|  Charlie    5      60%       +30          |
+-------------------------------------------+
|  Recent Games                             |
|  ---------------------------------------  |
|  2024-03-27  Win vs Bob+Charlie 10-7      |
|  Partner: Alice                           |
+-------------------------------------------+

4. Player Tournament Schedule View

URL: /players/:id/schedule

Purpose: View upcoming matches and tournament brackets

Components:

Upcoming Matches

• This Week

  • Match date/time
  • Opponent team
  • Tournament name
  • Location/notes
  • Action: Record Result (if applicable)

• Next 30 Days

  • Calendar view of upcoming matches
  • Grouped by tournament

Active Tournaments

• My Tournaments List

  • Tournament name and status
  • Current round
  • My team's position
  • Next match details

• Tournament Bracket View

  • Visual bracket display
  • My team highlighted
  • Progress tracking

Match History

• Past Matches
  • Results from previous tournaments
  • Performance trends

Wireframe Layout:

+-------------------------------------------+
|  Emma's Schedule                          |
+-------------------------------------------+
|  This Week                                |
|  ---------------------------------------  |
|  Mar 28  Spring Championship              |
|  vs Team B (Bob + Charlie)                |
|  Court 3, 7:00 PM                         |
|  [Record Result]                          |
+-------------------------------------------+
|  Upcoming Matches                         |
|  [Calendar View] [List View]              |
|  ---------------------------------------  |
|  Apr 1  Tournament X - Round 2            |
|  Apr 5  Tournament Y - Quarterfinal       |
|  Apr 8  Tournament X - Round 3            |
+-------------------------------------------+
|  Active Tournaments                       |
|  ---------------------------------------  |
|  Spring Championship                      |
|  Round 3 of 5 | Position: 2nd             |
|  Next: vs Team C (Apr 1)                  |
+-------------------------------------------+

Role-Based Access Control

Player Role (Default)

• View own profile and schedule
• View rankings and other player profiles
• Record own match results (with verification)

Tournament Admin Role

• All Player role permissions
• Create and manage tournaments they admin
• Add/remove participants
• Record match results
• View tournament analytics

Club Admin Role (Superuser)

• All Tournament Admin permissions
• Manage all players
• Manage all tournaments
• View club-wide analytics
• Configure club settings
• Export reports

UI Components to Build

1. Navigation

• Main navigation bar
• Breadcrumb navigation
• Tab navigation for multi-view pages

2. Data Display

• Data tables with sorting/filtering
• Statistics cards
• Charts (using Chart.js or similar)
• Calendar views

3. Forms

• Player registration/edit forms
• Tournament creation/edit forms
• Match result entry forms
• CSV upload forms

4. Interactive Elements

• Modal dialogs for quick actions
• Dropdown menus
• Search/filter controls
• Pagination controls

5. Visual Elements

• Elo rating indicators (with trends)
• Win/loss badges
• Partnership confidence indicators
• Tournament bracket visualization

Implementation Plan

Phase 0: Authentication (Week 0)

• Create login page
• Create registration page
• Implement session management
• Add navigation for logged-in users
• Protect admin routes

Phase 1: Navigation & Layout (Week 1)

• Add navigation bar to all templates
• Implement role-based navigation links
• Create consistent layout structure

Phase 2: Player Profile Enhancements (Week 1-2)

• Improve profile header with stats grid
• Enhance partnership table with confidence indicators
• Add recent games timeline

Phase 3: Tournament Admin View (Week 2-3)

• Build tournament dashboard
• Implement management tabs
• Add match result entry forms

Phase 4: Club Admin View (Week 3-4)

• Create superuser dashboard
• Build player directory with search
• Add club settings page

Phase 5: Player Schedule View (Week 4)

• Build upcoming matches view
• Implement calendar integration
• Add bracket visualization

Phase 6: Polish & Testing (Week 5)

• Mobile responsiveness
• Accessibility improvements
• Cross-browser testing
• User feedback incorporation

Technical Considerations

Next.js App Router Structure

src/
  app/
    auth/
      login/page.tsx
      register/page.tsx
    admin/
      tournaments/
        page.tsx
        [id]/page.tsx
        new/page.tsx
      page.tsx
    players/
      [id]/
        profile/page.tsx
        schedule/page.tsx
    rankings/page.tsx
  components/
    Navigation.tsx
    SessionProvider.tsx
    EditTournamentForm.tsx
  lib/
    auth.ts
    prisma.ts

CSS Architecture

• Use Tailwind CSS or custom CSS
• Consistent color scheme (green for wins, red for losses)
• Responsive breakpoints for mobile
• Accessibility: color contrast, focus states

JavaScript Interactions

• Calendar navigation
• Modal dialogs
• Form validation
• Real-time updates (optional)

Success Metrics

• User satisfaction with navigation
• Time to complete common tasks
• Mobile usage statistics
• Accessibility compliance score