david/euchre_camp
Public Access
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects 1 Releases 1 Wiki Activity
Files
26d9c7e79eba9b5d3dac7415a61a187d04f3ebd6
euchre_camp/docs/UI_DESIGN.md
T

557 lines
15 KiB
Markdown
Raw Blame History

# 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)
```tsx
// 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
Reference in New Issue View Git Blame Copy Permalink