# 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 ``` ## 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