david/euchre_camp
Public Access
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects 1 Releases 1 Wiki Activity

feat: initialize Next.js project with Prisma, authentication, and rankings page

Browse Source
This commit is contained in:
David Gwilliam
2026-03-27 14:50:00 -07:00
parent 96f7cb86d3
commit 66e4baa643
208 changed files with 8522 additions and 9035 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/UI_DESIGN.md
+550
View File
@@ -0,0 +1,550 @@
# 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