5b03b22267
Commissioners can add Brackt to any league. Each team drafts one manager from their own league; at season end, that manager's final overall fantasy ranking earns placement points. Resolution fires automatically when all other sports finalize. Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
258 lines
12 KiB
TypeScript
258 lines
12 KiB
TypeScript
import { Link } from "react-router";
|
|
import { Button } from "app/components/ui/button";
|
|
import { ScoringPointsTable, QualifyingPointsTable } from "~/components/marketing/ScoringTables";
|
|
|
|
export function meta() {
|
|
return [
|
|
{ title: "How To Play - Brackt" },
|
|
{
|
|
name: "description",
|
|
content:
|
|
"Learn how to play Brackt and compete in multi-sport fantasy leagues",
|
|
},
|
|
];
|
|
}
|
|
|
|
export default function HowToPlay() {
|
|
return (
|
|
<div className="container mx-auto px-4 py-8 max-w-4xl">
|
|
<h1 className="text-4xl font-bold mb-2">How To Play</h1>
|
|
<p className="text-lg text-muted-foreground mb-10">
|
|
Brackt is a multi-sport fantasy league where you draft athletes and
|
|
teams across dozens of sports, then watch your roster compete all year
|
|
long. Here's everything you need to know to get started.
|
|
</p>
|
|
|
|
<div className="space-y-10">
|
|
|
|
{/* The Big Picture */}
|
|
<section>
|
|
<h2 className="text-2xl font-semibold mb-3">The Big Picture</h2>
|
|
<p className="text-muted-foreground">
|
|
Before the season starts, everyone in the league participates in a
|
|
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
|
|
compete in their actual seasons. When it's all said and done,
|
|
whoever earned the most points from their picks wins.
|
|
</p>
|
|
</section>
|
|
|
|
{/* Building Your Roster */}
|
|
<section>
|
|
<h2 className="text-2xl font-semibold mb-3">Building Your Roster</h2>
|
|
<p className="text-muted-foreground mb-4">
|
|
Your league includes a set of sports selected by the commissioner, such as
|
|
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 pick from every sport in the league.
|
|
</p>
|
|
<p className="text-muted-foreground mb-4">
|
|
Extra draft rounds beyond the number of sports create{" "}
|
|
<span className="font-semibold text-foreground">flex spots</span>.
|
|
Flex picks can come from any sport. These are great for grabbing a
|
|
second (or even a third and a fourth!) player in a sport where you
|
|
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>
|
|
<div className="bg-muted rounded-lg p-4 text-sm text-muted-foreground">
|
|
<p>
|
|
<span className="font-semibold text-foreground">Example:</span>{" "}
|
|
Your league has 20 sports and 24 draft rounds. That means you
|
|
fill 20 dedicated sport spots and have 4 flex picks to use
|
|
however you like.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
{/* How Points Work */}
|
|
<section>
|
|
<h2 className="text-2xl font-semibold mb-3">How Points Work</h2>
|
|
<p className="text-muted-foreground mb-4">
|
|
Points are awarded based on where your picks finish: 1st through
|
|
8th. The better they finish, the more you earn. Your commissioner
|
|
can adjust point values before the draft, but here's what a typical
|
|
league looks like:
|
|
</p>
|
|
<ScoringPointsTable className="mb-4" />
|
|
<p className="text-sm text-muted-foreground">
|
|
If nobody in your league drafted a team that finishes in the top 8,
|
|
those points aren't awarded to anyone in your league. In other
|
|
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>
|
|
</section>
|
|
|
|
{/* Major-Based Sports */}
|
|
<section>
|
|
<h2 className="text-2xl font-semibold mb-3">Sports with Majors</h2>
|
|
<p className="text-muted-foreground mb-4">
|
|
Some sports don't have a single championship, they have multiple
|
|
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{" "}
|
|
<span className="font-semibold text-foreground">
|
|
qualifying points (QP)
|
|
</span>{" "}
|
|
at each one:
|
|
</p>
|
|
<QualifyingPointsTable className="mb-4" />
|
|
<p className="text-muted-foreground">
|
|
QP don't go straight to your score — they determine the final
|
|
ranking within that sport. Once all the majors are done, total QP
|
|
are added up, and whoever's ranked 1st through 8th earns the
|
|
standard league points. Consistency across majors is the key.
|
|
</p>
|
|
</section>
|
|
|
|
{/* The Draft Room */}
|
|
<section>
|
|
<h2 className="text-2xl font-semibold mb-3">The Draft Room</h2>
|
|
<p className="text-muted-foreground mb-6">
|
|
Because Brackt is a "draft and done" league, the draft is your only
|
|
opportunity to take action. Once the final pick is made, your roster
|
|
is locked for the entire year. There are no trades, waivers, or
|
|
mid-season pickups. Your success depends entirely on the strategy
|
|
you execute during the draft.
|
|
</p>
|
|
|
|
{/* Timing Mechanics */}
|
|
<div className="space-y-3 mb-6">
|
|
<h3 className="text-lg font-semibold">Timing Mechanics</h3>
|
|
<p className="text-muted-foreground">
|
|
The draft uses a snake format where the pick order reverses every
|
|
round. You can configure the timing of the draft using one of two
|
|
primary mechanics:
|
|
</p>
|
|
<ul className="space-y-2 text-muted-foreground pl-4">
|
|
<li>
|
|
<span className="font-semibold text-foreground">
|
|
Standard Clock:
|
|
</span>{" "}
|
|
A traditional fixed countdown (such as 60 seconds per pick). It
|
|
is a straightforward and consistent pace.
|
|
</li>
|
|
<li>
|
|
<span className="font-semibold text-foreground">
|
|
Chess Clock (Fischer Increment):
|
|
</span>{" "}
|
|
This system uses a Time Bank and an Increment. You start with a
|
|
pool of time (for example, 2 minutes). Each time you make a
|
|
pick, a set bonus like 15 seconds is added back to your bank.
|
|
This allows you to pick quickly in the early rounds to save up
|
|
time for more difficult decisions later on.
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Flexible Pacing */}
|
|
<div className="space-y-3 mb-6">
|
|
<h3 className="text-lg font-semibold">Flexible Pacing</h3>
|
|
<p className="text-muted-foreground">
|
|
These mechanics can be applied to any draft speed. Whether you
|
|
want to finish in an hour or over the course of a week, the system
|
|
scales to your needs:
|
|
</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">
|
|
To keep the draft moving regardless of the pace, you can use the{" "}
|
|
<span className="font-semibold text-foreground">Draft Queue</span>{" "}
|
|
to pre-rank your targets. If your clock expires, the system
|
|
automatically selects the highest available player from your
|
|
queue. If your queue is empty, the system will select the
|
|
highest-ranked athlete remaining in the pool to ensure the draft
|
|
never stalls.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
{/* The Meta Game */}
|
|
<section>
|
|
<h2 className="text-2xl font-semibold mb-3">The Meta Game: Brackt</h2>
|
|
<p className="text-muted-foreground mb-4">
|
|
Some leagues include <span className="font-semibold text-foreground">Brackt</span> as
|
|
an optional meta-sport. Instead of drafting an athlete or team, you draft{" "}
|
|
<span className="font-semibold text-foreground">another manager from your own league</span>.
|
|
At the end of the season, their final overall fantasy ranking — 1st through 8th across
|
|
all the other sports — earns you the standard placement points.
|
|
</p>
|
|
<div className="bg-muted rounded-lg p-4 text-sm text-muted-foreground space-y-2 mb-4">
|
|
<p className="font-semibold text-foreground">Strategic angles:</p>
|
|
<ul className="space-y-1 pl-3 list-disc">
|
|
<li>Draft timing matters — managers who pick strong early show higher projected value.</li>
|
|
<li>Drafting yourself is allowed and is a valid strategy.</li>
|
|
<li>Brackt scores are revealed at season end, after all other sports finalize.</li>
|
|
</ul>
|
|
</div>
|
|
<p className="text-muted-foreground">
|
|
Brackt is resolved automatically once every other sport concludes. It's the last piece
|
|
of the puzzle — and sometimes the most dramatic.
|
|
</p>
|
|
</section>
|
|
|
|
{/* During the Season */}
|
|
<section>
|
|
<h2 className="text-2xl font-semibold mb-3">After the Draft</h2>
|
|
<p className="text-muted-foreground mb-4">
|
|
Once the draft ends, your roster is locked. No trades, no waivers,
|
|
no pickups. Just watch your picks compete across the year and see
|
|
how your draft decisions play out. Points accumulate as sports
|
|
seasons wrap up, and standings update in real time.
|
|
</p>
|
|
<p className="text-muted-foreground">
|
|
If there's a tie in the final standings, it's broken by who has
|
|
more 1st-place finishes. If that's still a tie, it goes to
|
|
2nd-place finishes, then 3rd, and so on.
|
|
</p>
|
|
</section>
|
|
|
|
{/* Links */}
|
|
<section className="flex flex-col sm:flex-row gap-4 items-center justify-between pt-2">
|
|
<p className="text-muted-foreground">
|
|
Want the full breakdown? Read the{" "}
|
|
<Link
|
|
to="/rules"
|
|
className="underline underline-offset-4 hover:text-foreground transition-colors"
|
|
>
|
|
official rules
|
|
</Link>
|
|
.
|
|
</p>
|
|
<Button asChild size="lg">
|
|
<Link to="/leagues/new">Create a League</Link>
|
|
</Button>
|
|
</section>
|
|
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|