551 lines
15 KiB
Markdown
551 lines
15 KiB
Markdown
# 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)
|
|
```html
|
|
<nav class="main-nav">
|
|
<div class="nav-brand">
|
|
<a href="/">EuchreCamp</a>
|
|
</div>
|
|
<div class="nav-links">
|
|
<a href="/rankings">Rankings</a>
|
|
<% if defined?(current_player) && current_player %>
|
|
<a href="/players/<%= current_player.id %>/profile">My Profile</a>
|
|
<a href="/players/<%= current_player.id %>/schedule">My Schedule</a>
|
|
<% if current_player.admin? %>
|
|
<a href="/admin">Admin</a>
|
|
<% end %>
|
|
<% end %>
|
|
</div>
|
|
<div class="nav-user">
|
|
<% if defined?(current_player) && current_player %>
|
|
<span><%= current_player.name %></span>
|
|
<a href="/logout">Logout</a>
|
|
<% else %>
|
|
<a href="/login">Login</a>
|
|
<a href="/register">Register</a>
|
|
<% end %>
|
|
</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
|
|
|
|
### Hanami View Structure
|
|
```
|
|
app/
|
|
actions/
|
|
players/
|
|
profile.rb
|
|
schedule.rb
|
|
admin/
|
|
tournaments/
|
|
index.rb
|
|
show.rb
|
|
club/
|
|
dashboard.rb
|
|
templates/
|
|
layouts/
|
|
app.html.erb
|
|
admin.html.erb
|
|
players/
|
|
profile.html.erb
|
|
schedule.html.erb
|
|
admin/
|
|
tournaments/
|
|
index.html.erb
|
|
show.html.erb
|
|
club/
|
|
dashboard.html.erb
|
|
```
|
|
|
|
### 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
|