Website for Brackt.com
89ceee432a
The LLWS bracket didn't read as a bracket: cards sat above games that don't feed them, connectors joined the wrong pairs, and several games had no line at all. The stored data was correct — LLWS_ADVANCEMENT already matches the official 2026 LLBWS bracket game for game. The renderer was the problem. TreeColumns placed cards at `index * (height / roundSize)` and ConnectorColumn assumed matches 2k and 2k+1 feed match k, which holds only for an exact halving. The LLWS winners bracket is not one: two of the four Opening Round games skip Winners Round 2 and go straight to the semifinals, so those two got stranded in column one with nothing beside them, and the halving branch drew confident, wrong connectors for the rest. Lay out from the graph instead. app/lib/bracket-layout.ts inverts a template's advancement into "what fills each slot", then assigns columns by depth from the group's final, orders each column by the parent's slot order, and centres each card on its feeders. Counting back from the final is what makes a printed bracket line up: a team entering late is drawn in the column where it actually plays. This reproduces the official International bracket exactly, and fixes Elimination Round 3, where the official bracket prints the later game on top but match-number sort put it below. Because column is depth, every in-group edge spans exactly one gutter, so connectors now draw for unplayed games too. Cards also take a fixed height rather than stretching to fill their column, which is what made a lone final tower over the rest. Empty slots name their source — "Loser of Winners SF 1" rather than "TBD". That is the only way to show the feeds crossing between the winners and elimination brackets, which render as separate trees. Also: - Move the LLWS routing table to app/lib/llws-bracket.ts so the renderer can import it without pulling the database context into the browser bundle; models/playoff-match re-exports it. - Page the mobile view one group at a time, matching desktop. A whole double-elimination phase is a DAG, not a tree, so its columns would be arbitrary. - Add a clear-bracket admin action. Nothing else could rewrite a match's participants, so a mis-seeded bracket had no repair path at all. - Lift the PDF transcription into app/test/fixtures/llws-bracket.ts so the routing and layout tests check against one copy of the official bracket. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01HnzbrCHoM8ESbtbDamaqFb |
||
|---|---|---|
| .claude | ||
| .forgejo/workflows | ||
| .opencode/plugins | ||
| .production-info | ||
| .storybook | ||
| .vscode | ||
| app | ||
| cypress | ||
| database | ||
| docs | ||
| drizzle | ||
| plans | ||
| public | ||
| scripts | ||
| server | ||
| test-fixtures/baselines | ||
| .dockerignore | ||
| .env.example | ||
| .gitignore | ||
| .npmrc | ||
| .nvmrc | ||
| .oxlintrc.json | ||
| AGENTS.md | ||
| BETTERAUTH_MIGRATION.md | ||
| CLAUDE.md | ||
| components.json | ||
| cypress.config.js | ||
| docker-compose.yml | ||
| Dockerfile | ||
| drizzle.config.ts | ||
| instrument.server.mjs | ||
| oxlint.json | ||
| package-lock.json | ||
| package.json | ||
| plan.md | ||
| react-router.config.ts | ||
| README.md | ||
| server.ts | ||
| TESTING.md | ||
| tsconfig.json | ||
| tsconfig.node.json | ||
| tsconfig.server.json | ||
| tsconfig.vite.json | ||
| vite.config.ts | ||
| vitest.config.ts | ||
| vitest.shims.d.ts | ||
Welcome to React Router!
A modern, production-ready template for building full-stack React applications using React Router.
Features
- 🚀 Server-side rendering
- ⚡️ Hot Module Replacement (HMR)
- 📦 Asset bundling and optimization
- 🔄 Data loading and mutations
- 🔒 TypeScript by default
- 🎉 TailwindCSS for styling
- 💾 PostgreSQL + DrizzleORM
- 📖 React Router docs
Getting Started
Installation
Install the dependencies:
npm install
Development
Copy .env.example to .env and provide a DATABASE_URL with your connection string.
Run an initial database migration:
npm run db:migrate
Start the development server with HMR:
npm run dev
Your application will be available at http://localhost:5173.
Building for Production
Create a production build:
npm run build
Deployment
Docker Deployment
To build and run using Docker:
# For npm
docker build -t my-app .
# Run the container
docker run -p 3000:3000 my-app
The containerized application can be deployed to any platform that supports Docker, including:
- AWS ECS
- Google Cloud Run
- Azure Container Apps
- Digital Ocean App Platform
- Fly.io
- Railway
DIY Deployment
If you're familiar with deploying Node applications, the built-in app server is production-ready.
Make sure to deploy the output of npm run build
├── package.json
├── package-lock.json (or pnpm-lock.yaml, or bun.lockb)
├── server.js
├── build/
│ ├── client/ # Static assets
│ └── server/ # Server-side code
Styling
This template comes with Tailwind CSS already configured for a simple default starting experience. You can use whatever CSS framework you prefer.
Built with ❤️ using React Router.