* Redesign home page with new layout and component system

- Two-column layout (My Leagues 2/3, Upcoming Events 1/3) with mobile stack
- LeagueRow: square avatar, gradient draft highlight, rank/points display, progress bar
- MyLeaguesCard, CreateLeagueCard with shared SectionCardHeader
- UpcomingEventsCard: vertical timeline with grouped multi-league events
- Shared gradient system: BracktGradients SVG defs, GradientIcon wrapper, brand.ts constants
- Button default variant updated to green→cyan gradient
- Navbar: plain nav links with gradient hover, support/admin icon buttons
- Accessibility fixes: semantic h2 headings, aria-label on LeagueAvatar and nav elements
- Storybook stories for all new components

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* Responsive league row layout and mobile polish

- League rows stack avatar+name on top, stats full-width below on mobile
- Stats spread to right side on sm+ screens with border separator on mobile
- Tighter padding on mobile (px-3/py-3), full padding on sm+
- Card headers and content use px-3 sm:px-6 to reduce mobile gutters
- Two-column home layout deferred to lg breakpoint (tablet gets stacked)
- Active leagues sorted by completion percentage descending
- Default rank 1 / 0 points for active leagues with no scoring events yet
- Fix ordinal bug for 11th/12th/13th; add aria-labels to rank change indicators
- Remove dead StatDivider className prop

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* Improve claude file.

* Add StandingsPreview card component with podium row styling

- New StandingsPreview component with gold/silver/bronze row tints for
  top 3, team avatar, and LeagueRow-style stat columns (Ranking + Points)
  with rank and 7-day point change indicators
- Fix GradientIcon in Storybook by adding BracktGradients decorator to
  preview.tsx (renamed from .ts to support JSX)
- Fix degenerate SVG gradient on horizontal strokes by switching
  BracktGradients to gradientUnits="userSpaceOnUse" with Lucide-space
  coordinates (0→24)
- Revert erroneous fill: url(#gradient) from GradientIcon; stroke-only
  fix was sufficient once gradientUnits was corrected

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* Update components on league homepage.

* Finish up league page styling.

* Work on standings page.

* Add story for RecentScoresCard

* Update Point Progression Chart.

* Sort point progression legend by ranking and add team links to standings rows

* Fix standings discrepancy on change.

* Create draft cell component.

* Update draft board page

* Draft room improvements.

* Update some draft room styling.

* Fix context menu missing.

* Move tab navigation and autodraft to header row, narrow sidebar

* Virtualize available participants list, memoize draft room props

Adds @tanstack/react-virtual to replace separate mobile/desktop lists
with a single unified virtual scroll loop. Also memoizes miniDraftGrid
and availableParticipantsSectionProps, and switches pick lookup from
Array.find to a Map for O(1) access.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* Update draft room UI.

* More draft room fixes.

* Draft room tweaks.

* Fix Rosters page.

* Queue Section fixes.

* Mobile Draft fixes.

* Fix draft board page.

* Create bracket look.

* Bracket work.

* Finish bracket page.

* Homepage initial styling

* homepage copy

* Add privacy policy. Fixes #88.

* how to play copy

* rules copy

* Fix brackets on homepage.

* Add footer to website.

* Glow on dots.

* Landing page copy.

* Fix sidebar.

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

2026-04-23 13:14:55 -07:00

2 KiB

Raw Blame History

Architecture

Server

Dual-server setup:

server.ts — HTTP server entry point, initializes Socket.IO
server/app.ts — Express app with React Router SSR handler and database context
server/socket.ts — Socket.IO server for real-time draft updates
server/timer.ts — Runs every second via setInterval to advance draft timers. Uses a dedicated DB connection. Must be started for draft functionality to work.

Database Layer

Schema: database/schema.ts
Context: database/context.ts — DB connection injected via AsyncLocalStorage
Models: app/models/ — all DB queries live here, organized by domain (e.g. league.ts, season.ts, draft-pick.ts)

Always query through the model layer — never write Drizzle queries directly in route files.

Frontend

Routes config: app/routes.ts — all routes must be explicitly registered here (React Router 7 does not auto-discover files)
Route files: app/routes/ — file naming uses . as path separator; $param for dynamic segments; _index.tsx for index routes
Components: app/components/ — UI primitives in app/components/ui/ (ShadCN)
Hooks: app/hooks/ — custom React hooks
Lib: app/lib/ — pure utility functions

Real-time (Socket.IO)

Clients join a room per season. Key events:

Event	Direction	Trigger
`join-draft`	client → server	on draft page load
`timer-update`	server → client	every second during active draft
`pick-made`	server → client	participant drafted
`autodraft-updated`	server → client	team enables/disables autodraft
`team-connected` / `team-disconnected`	server → client	presence

Server emits via getSocketIO() from server/socket.ts. Clients consume via useDraftSocket() hook at app/hooks/useDraftSocket.ts.

Adding a Socket Event

Define types in server/socket.d.ts
Add handler in server/socket.ts
Emit from server: getSocketIO().to(room).emit(...)
Listen in client component or hook

2 KiB Raw Blame History