chrisp/brackt
1
1
Fork 0
Code Issues 42 Pull requests Projects Releases Packages Wiki Activity Actions 1

how to play copy

Browse source
This commit is contained in:
Chris Parsons 2026-04-22 16:34:50 -07:00
parent bd8828565a
commit 756b84242c
1 changed files with 101 additions and 112 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

213
app/routes/how-to-play.tsx
View file

@ -1,4 +1,5 @@
import { Link } from "react-router"; import { Link } from "react-router";
import { Button } from "app/components/ui/button";
export function meta() { export function meta() {
return [ return [
@ -27,8 +28,8 @@ export default function HowToPlay() {
<section> <section>
<h2 className="text-2xl font-semibold mb-3">The Big Picture</h2> <h2 className="text-2xl font-semibold mb-3">The Big Picture</h2>
<p className="text-muted-foreground"> <p className="text-muted-foreground">
Before the season starts, every participant in your league holds a Before the season starts, everyone in the league participates in a
draft — picking real athletes and teams across a set of sports draft by picking real teams (and athletes in individual sports) across a set of sports
chosen by your commissioner. Over the following months, those picks chosen by your commissioner. Over the following months, those picks
compete in their actual seasons. When it's all said and done, compete in their actual seasons. When it's all said and done,
whoever earned the most points from their picks wins. whoever earned the most points from their picks wins.
@ -39,17 +40,19 @@ export default function HowToPlay() {
<section> <section>
<h2 className="text-2xl font-semibold mb-3">Building Your Roster</h2> <h2 className="text-2xl font-semibold mb-3">Building Your Roster</h2>
<p className="text-muted-foreground mb-4"> <p className="text-muted-foreground mb-4">
Your league includes a set of sports selected by the commissioner — Your league includes a set of sports selected by the commissioner, such as
think NFL, NBA, golf, Formula 1, tennis, and more. Your roster has the NFL, NBA, Golf, Formula 1, Tennis, and more. Your roster has
one dedicated spot for each sport, so you need to draft at least one dedicated spot for each sport, so you need to draft at least
one pick from every sport in the league. one pick from every sport in the league.
</p> </p>
<p className="text-muted-foreground mb-4"> <p className="text-muted-foreground mb-4">
Extra draft rounds beyond the number of sports create{" "} Extra draft rounds beyond the number of sports create{" "}
<span className="font-semibold text-foreground">flex spots</span>. <span className="font-semibold text-foreground">flex spots</span>.
Flex picks can come from any sport — great for grabbing a second Flex picks can come from any sport. These are great for grabbing a
player in a sport where you see value, or doubling down on a safe second (or even a third and a fourth!) player in a sport where you
bet. see value, or doubling down on a safe bet. How you use your flex
spots can be the difference between winning the league and
finishing at the bottom of the table.
</p> </p>
<div className="bg-muted rounded-lg p-4 text-sm text-muted-foreground"> <div className="bg-muted rounded-lg p-4 text-sm text-muted-foreground">
<p> <p>
@ -65,7 +68,7 @@ export default function HowToPlay() {
<section> <section>
<h2 className="text-2xl font-semibold mb-3">How Points Work</h2> <h2 className="text-2xl font-semibold mb-3">How Points Work</h2>
<p className="text-muted-foreground mb-4"> <p className="text-muted-foreground mb-4">
Points are awarded based on where your picks finish — 1st through Points are awarded based on where your picks finish: 1st through
8th. The better they finish, the more you earn. Your commissioner 8th. The better they finish, the more you earn. Your commissioner
can adjust point values before the draft, but here's what a typical can adjust point values before the draft, but here's what a typical
league looks like: league looks like:
@ -124,24 +127,27 @@ export default function HowToPlay() {
</div> </div>
<p className="text-sm text-muted-foreground"> <p className="text-sm text-muted-foreground">
If nobody in your league drafted a team that finishes in the top 8, If nobody in your league drafted a team that finishes in the top 8,
those points aren't awarded to anyone. Drafting rare picks can pay those points aren't awarded to anyone in your league. In other
off. words, if no one picks Indiana to win the NCAA Football
championship, the manager who drafted Miami, the team that lost to
them, still only would receive the 2nd place points.
</p> </p>
</section> </section>
{/* Major-Based Sports */} {/* Major-Based Sports */}
<section> <section>
<h2 className="text-2xl font-semibold mb-3"> <h2 className="text-2xl font-semibold mb-3">Sports with Majors</h2>
Golf, Tennis, CS2 — Sports with Majors
</h2>
<p className="text-muted-foreground mb-4"> <p className="text-muted-foreground mb-4">
Some sports don't have a single championship — they have multiple Some sports don't have a single championship, they have multiple
major tournaments spread throughout the year. For these sports, major tournaments spread throughout the year. Classic examples are
golf and tennis, but other sports may be scored by majors as well.
You can see on your league pages how each sport is scored. For
these sports with majors,
players earn{" "} players earn{" "}
<span className="font-semibold text-foreground"> <span className="font-semibold text-foreground">
qualifying points (QP) qualifying points (QP)
</span>{" "} </span>{" "}
at each major: at each one:
</p> </p>
<div className="bg-muted rounded-lg overflow-hidden mb-4"> <div className="bg-muted rounded-lg overflow-hidden mb-4">
<table className="w-full text-sm"> <table className="w-full text-sm">
@ -215,71 +221,89 @@ export default function HowToPlay() {
</p> </p>
</section> </section>
{/* The Draft */} {/* The Draft Room */}
<section> <section>
<h2 className="text-2xl font-semibold mb-3">The Draft</h2> <h2 className="text-2xl font-semibold mb-3">The Draft Room</h2>
<p className="text-muted-foreground mb-6"> <p className="text-muted-foreground mb-6">
The draft is a snake draft — pick order reverses every round. If Because Brackt is a "draft and done" league, the draft is your only
you pick last in round 1, you pick first in round 2. No trading opportunity to take action. Once the final pick is made, your roster
picks, and once you make a selection it's yours for the whole is locked for the entire year. There are no trades, waivers, or
season. mid-season pickups. Your success depends entirely on the strategy
you execute during the draft.
</p> </p>
{/* Chess Clock */} {/* Timing Mechanics */}
<div className="border rounded-lg p-5 mb-6 space-y-3"> <div className="space-y-3 mb-6">
<h3 className="text-lg font-semibold"> <h3 className="text-lg font-semibold">Timing Mechanics</h3>
The Chess Clock — A Brackt Original
</h3>
<p className="text-muted-foreground"> <p className="text-muted-foreground">
Most fantasy drafts use a simple countdown: you get X seconds per The draft uses a snake format where the pick order reverses every
pick and that's it. Brackt does it differently with a{" "} round. You can configure the timing of the draft using one of two
<span className="font-semibold text-foreground"> primary mechanics:
Fischer increment timer
</span>
, borrowed from competitive chess.
</p> </p>
<p className="text-muted-foreground"> <ul className="space-y-2 text-muted-foreground pl-4">
Every participant starts the draft with a personal time bank. <li>
Your clock counts down while it's your turn. When you make a <span className="font-semibold text-foreground">
pick,{" "} Standard Clock:
<span className="font-semibold text-foreground"> </span>{" "}
time is added back A traditional fixed countdown (such as 60 seconds per pick). It
</span>{" "} is a straightforward and consistent pace.
to your bank. Any time you don't use carries over to your next </li>
pick. <li>
</p> <span className="font-semibold text-foreground">
<p className="text-muted-foreground"> Chess Clock (Fischer Increment):
Pick quickly early on and you'll build up a bigger bank for the </span>{" "}
later rounds when decisions get harder. Deliberate too long and This system uses a Time Bank and an Increment. You start with a
your bank shrinks. It rewards decisiveness without penalizing you pool of time (for example, 2 minutes). Each time you make a
for taking a moment when you really need it. pick, a set bonus like 15 seconds is added back to your bank.
</p> This allows you to pick quickly in the early rounds to save up
<div className="bg-muted rounded-md p-3 text-sm text-muted-foreground"> time for more difficult decisions later on.
<span className="font-semibold text-foreground">Example:</span>{" "} </li>
On Standard speed, you start with 2 minutes. You make your first </ul>
pick in 30 seconds — 15 seconds are added back, leaving you with
1 minute 45 seconds for your next turn. Keep picking fast and
that bank grows.
</div>
</div> </div>
{/* Draft Queue & Autodraft */} {/* Flexible Pacing */}
<div className="space-y-3"> <div className="space-y-3 mb-6">
<h3 className="text-lg font-semibold">Draft Queue & Autodraft</h3> <h3 className="text-lg font-semibold">Flexible Pacing</h3>
<p className="text-muted-foreground"> <p className="text-muted-foreground">
Before and during the draft you can build a{" "} These mechanics can be applied to any draft speed. Whether you
<span className="font-semibold text-foreground">draft queue</span>{" "} want to finish in an hour or over the course of a week, the system
— an ordered list of picks you want to make. When it's your turn, scales to your needs:
you can pick manually or let your queue guide you.
</p> </p>
<ul className="space-y-2 text-muted-foreground pl-4">
<li>
<span className="font-semibold text-foreground">
Live Drafts:
</span>{" "}
Uses short timers (seconds or minutes) for a fast-paced,
single-session event.
</li>
<li>
<span className="font-semibold text-foreground">
Slow Drafts:
</span>{" "}
Uses extended timers (hours) for leagues that want to draft over
several days. Slow drafts include a customizable{" "}
<span className="font-semibold text-foreground">
Overnight Pause
</span>
. The commissioner sets a uniform window (such as 10:00 PM to
8:00 AM) where the clock stops for everyone. This ensures no one
is forced to make a pick in the middle of the night.
</li>
</ul>
</div>
{/* Queue and Autodraft */}
<div className="space-y-3">
<h3 className="text-lg font-semibold">Queue and Autodraft</h3>
<p className="text-muted-foreground"> <p className="text-muted-foreground">
If your time bank runs out,{" "} To keep the draft moving regardless of the pace, you can use the{" "}
<span className="font-semibold text-foreground">autodraft</span>{" "} <span className="font-semibold text-foreground">Draft Queue</span>{" "}
kicks in automatically. It'll grab the first available pick from to pre-rank your targets. If your clock expires, the system
your queue. If your queue is empty or everything in it has automatically selects the highest available player from your
already been taken, it'll grab from the top of the available player pool. queue. If your queue is empty, the system will select the
Keep your queue updated and you'll never get stuck with a random highest-ranked athlete remaining in the pool to ensure the draft
pick. never stalls.
</p> </p>
</div> </div>
</section> </section>
@ -300,56 +324,21 @@ export default function HowToPlay() {
</p> </p>
</section> </section>
{/* Tips */}
<section className="bg-primary/5 p-6 rounded-lg border border-primary/20">
<h2 className="text-xl font-semibold mb-4">Quick Tips</h2>
<ul className="space-y-3 text-muted-foreground">
<li>
<span className="font-semibold text-foreground">
Know your sports.
</span>{" "}
Understanding how each sport determines its top 8 (playoffs vs.
regular season vs. bracket) is the biggest edge you can have.
</li>
<li>
<span className="font-semibold text-foreground">
Build your queue early.
</span>{" "}
The draft moves fast. Having a ranked queue ready means you'll
always get a pick you're happy with, even if you step away.
</li>
<li>
<span className="font-semibold text-foreground">
Pick fast early on.
</span>{" "}
The chess clock rewards quick decisions. Bank extra time for the
tricky later rounds.
</li>
<li>
<span className="font-semibold text-foreground">
Flex spots are strategic.
</span>{" "}
Use them to double up on sports you feel confident about, not
just to fill the roster.
</li>
</ul>
</section>
{/* Links */} {/* Links */}
<section className="flex flex-col sm:flex-row gap-4 items-center justify-between pt-2"> <section className="flex flex-col sm:flex-row gap-4 items-center justify-between pt-2">
<p className="text-muted-foreground"> <p className="text-muted-foreground">
Want the full breakdown? Read the{" "} Want the full breakdown? Read the{" "}
<Link to="/rules" className="underline underline-offset-4 hover:text-foreground transition-colors"> <Link
to="/rules"
className="underline underline-offset-4 hover:text-foreground transition-colors"
>
official rules official rules
</Link> </Link>
. .
</p> </p>
<Link <Button asChild size="lg">
to="/leagues/new" <Link to="/leagues/new">Create a League</Link>
className="inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground shadow hover:bg-primary/90 h-11 px-8 text-base whitespace-nowrap" </Button>
>
Create a League
</Link>
</section> </section>
</div> </div>