pal-e-docs

Phase 10: Playground — Complete App Prototype

phase-wkq-10-playground Phase

phase
Project
Goal: Build the complete Westside app as static HTML/CSS prototypes. Design source of truth — every page here maps 1:1 to a SvelteKit route in production. 11 pages covering public landing, tryout registration, member dashboards, billing, and admin ops.
Owner: Lucas (design) + Dev agent
Repo: forgejo_admin/westside-playground
Depends on: phase-wkq-8-design-system

Scope

14 HTML files (13 active routes + 1 deprecated). CSS/JS fully consolidated into shared files — zero inline styles or scripts in any HTML file:
File Production Route Role Purpose
<code>index.html</code> <code>/</code> Public Landing — coaches, about, tryout banner, FAQ, partners
<code>tryouts.html</code> <code>/tryouts</code> Public Shareable tryout page — date, details, register CTA
<code>register.html</code> <code>/register</code> Public Registration — player-first, age gate, cash option, confirmation with credentials
<code>signin.html</code> <code>/signin</code> Public Login page (Keycloak in production)
<code>parent.html</code> <code>/player</code> Player Parent dashboard — child’s profile, team, payment status
<code>player-profile.html</code> <code>/players/:id</code> All (role-based edit) Full player profile — info cards, edit form, billing link
<code>billing.html</code> <code>/players/:id/billing</code> Player Card on file, update card (Stripe Elements), invoices
<code>team.html</code> <code>/teams/:id</code> Player/Coach Team detail — roster, coaches, playbooks, schedule
<code>coach.html</code> <code>/coach</code> Coach Coach dashboard — tabs (Team/Plays), player cards with parent contact
<code>coach-profile.html</code> <code>/coaches/:id</code> All (authenticated) Coach bio page — photo, title, contact, teams
<code>admin.html</code> <code>/admin</code> Admin CRM pipeline dashboard — clickable stat cards linking to CRM/Teams
<code>admin-players.html</code> <code>/admin/players</code> Admin Player CRM — filter by pipeline stage, search, card-based list
<code>admin-teams.html</code> <code>/admin/teams</code> Admin Team management — collapsible teams, inline assignment, save/reset
Design system: shared/app.css (2,406 lines) + shared/app.js (382 lines). Zero inline CSS or JS in any HTML file. Dark theme (#0a0a0a background, #d42026 red brand). Mobile-first (390px target). All colors as CSS custom properties.
Assets: MinIO at minio-api.tail5b443a.ts.net/assets/westside/ — 11 files including coach photos (Marcus, James Taylor, KJ Ng, Ken Seka, Abbie Sa) and partner logos.

User Stories (documented in playground README)

  • US-1: Parent Dashboard — child’s profile, team, payment at a glance
  • US-2: Self-Service Billing — update card, view invoices, subscription changes through Marcus
  • US-3: Coach Roster — team players with parent contact, tabs (Team/Plays), no payment badges
  • US-4: Admin Dashboard — CRM pipeline stat cards (Registered, Active, Teams, Overdue), each clickable to CRM or Teams
  • US-5: Player Profiles — view/edit based on role, team linkage
  • US-6: Team Detail — roster, coaches. Playbooks + Schedule = TBD (separate services)
  • US-7: Tryout Registration — player-first, age gate (18+ self-sign), cash option, digital signature, confirmation with credentials
  • US-8: Coach Playbooks — DEFERRED (separate service, own repo)
  • US-9: Player CRM — admin sees all players by pipeline stage, search, filter, card-based list
  • US-10: Team Management — collapsible teams, inline player assignment, coaches per team, save/reset draft, create/delete teams
  • US-11: Coach Profiles — bio pages visible to all authenticated users
  • US-12: Age Gate Registration — player-first form, under 18 = parent signs, 18+ = self-sign, digital signature

Action Items

  • FIX: Tryouts page date — DONE (PR #6, March 21)
  • FIX: Location — set to TBD (PR #6). Update when Marcus confirms gym.
  • FIX: Register Now links — DONE (PR #6, wired to basketball-api.tail5b443a.ts.net/register)
  • CSS: Consolidate all inline CSS into shared/app.css — DONE (2,406 lines, zero inline)
  • JS: Consolidate all inline JS into shared/app.js — DONE (382 lines, zero inline)
  • QA: Review every page against CSS philosophy — zero inline CSS/JS, consistent component usage, mobile-first. NEXT SESSION
  • REVIEW: shared/style.css (804 lines) — legacy landing page CSS, evaluate for merge into app.css or deletion
  • UX: Admin stat cards — rename "Active Players" vs "Current" to be clearer
  • UX: Team cards on /admin should be clickable → /teams/:id detail view
  • UX: /teams/:id should be role-aware — admin can edit, coaches read-only

Design Decisions (made during this phase)

  • Coaches see no payment info — admin/player-owner only
  • Stripe portal restricted — no self-serve cancellation
  • Enterprise billing UX — Stripe Elements embedded, never redirect to Stripe
  • Tap-tap draft interface for team assignment meetings
  • 2x2 coach roster — compact cards: name, position, height, school, grad class, phone
  • Tryout number hidden post-placement
  • Player photos → MinIO (placeholders until upload built)
  • Skip playground for future ports — design system locked, push straight to prod
  • Registration flow: player-first form → age gate → Stripe/cash → auto Keycloak → confirmation with credentials
  • Cash payments = admin only (needs "mark paid manually" endpoint)
  • SPA + keycloak-js for Capacitor/iOS readiness (validated by mcd-tracker)
  • Player is primary entity, not family — CRM organizes by player, parent is contact column
  • Division names only (e.g., "16U Boys"), no team nicknames
  • Playbooks, schedule, stats = separate services (own repos, shared Keycloak auth)
  • Team assignment from Teams page or player profile only
  • Coaches can have multiple teams (many-to-many)
  • Admin can create/delete teams dynamically
  • Zero inline CSS/JS — all styles in app.css, all interactions in app.js

Deliverables

  • 13 active pages live on playground (14 HTML files, 1 deprecated) — design approved by Lucas
  • CSS consolidated: shared/app.css (2,621 lines) — single source for all styling, zero inline
  • JS consolidated: shared/app.js (410 lines) — all interactions, zero inline scripts
  • 12 user stories documented in playground README (US-1 through US-12, US-8 deferred)
  • Architecture diagram updated — SPA (adapter-static + keycloak-js), expanded route tree
  • 18 design decisions documented in playground README
  • 8 PRs merged across 3 repos during this phase (westside-app, basketball-api, westside-playground)
  • QA pass complete — all 13 pages phone-approved, input contract validated (ONE css, ONE js, zero inline, @-comments on all pages), all onclick handlers verified