how to play copy
This commit is contained in:
Chris Parsons
parent
bd8828565a
commit
756b84242c
1 changed files with 101 additions and 112 deletions
|
|
@ -1,4 +1,5 @@
|
|||
import { Link } from "react-router";
|
||||
import { Button } from "app/components/ui/button";
|
||||
|
||||
export function meta() {
|
||||
return [
|
||||
|
|
@ -27,8 +28,8 @@ export default function HowToPlay() {
|
|||
<section>
|
||||
<h2 className="text-2xl font-semibold mb-3">The Big Picture</h2>
|
||||
<p className="text-muted-foreground">
|
||||
Before the season starts, every participant in your league holds a
|
||||
draft — picking real athletes and teams across a set of sports
|
||||
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.
|
||||
|
|
@ -39,17 +40,19 @@ export default function HowToPlay() {
|
|||
<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 —
|
||||
think NFL, NBA, golf, Formula 1, tennis, and more. Your roster has
|
||||
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 — great for grabbing a second
|
||||
player in a sport where you see value, or doubling down on a safe
|
||||
bet.
|
||||
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>
|
||||
|
|
@ -65,7 +68,7 @@ export default function HowToPlay() {
|
|||
<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
|
||||
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:
|
||||
|
|
@ -124,24 +127,27 @@ export default function HowToPlay() {
|
|||
</div>
|
||||
<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. Drafting rare picks can pay
|
||||
off.
|
||||
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">
|
||||
Golf, Tennis, CS2 — Sports with Majors
|
||||
</h2>
|
||||
<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. For these sports,
|
||||
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 major:
|
||||
at each one:
|
||||
</p>
|
||||
<div className="bg-muted rounded-lg overflow-hidden mb-4">
|
||||
<table className="w-full text-sm">
|
||||
|
|
@ -215,71 +221,89 @@ export default function HowToPlay() {
|
|||
</p>
|
||||
</section>
|
||||
|
||||
{/* The Draft */}
|
||||
{/* The Draft Room */}
|
||||
<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">
|
||||
The draft is a snake draft — pick order reverses every round. If
|
||||
you pick last in round 1, you pick first in round 2. No trading
|
||||
picks, and once you make a selection it's yours for the whole
|
||||
season.
|
||||
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>
|
||||
|
||||
{/* Chess Clock */}
|
||||
<div className="border rounded-lg p-5 mb-6 space-y-3">
|
||||
<h3 className="text-lg font-semibold">
|
||||
The Chess Clock — A Brackt Original
|
||||
</h3>
|
||||
{/* Timing Mechanics */}
|
||||
<div className="space-y-3 mb-6">
|
||||
<h3 className="text-lg font-semibold">Timing Mechanics</h3>
|
||||
<p className="text-muted-foreground">
|
||||
Most fantasy drafts use a simple countdown: you get X seconds per
|
||||
pick and that's it. Brackt does it differently with a{" "}
|
||||
<span className="font-semibold text-foreground">
|
||||
Fischer increment timer
|
||||
</span>
|
||||
, borrowed from competitive chess.
|
||||
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>
|
||||
<p className="text-muted-foreground">
|
||||
Every participant starts the draft with a personal time bank.
|
||||
Your clock counts down while it's your turn. When you make a
|
||||
pick,{" "}
|
||||
<ul className="space-y-2 text-muted-foreground pl-4">
|
||||
<li>
|
||||
<span className="font-semibold text-foreground">
|
||||
time is added back
|
||||
Standard Clock:
|
||||
</span>{" "}
|
||||
to your bank. Any time you don't use carries over to your next
|
||||
pick.
|
||||
</p>
|
||||
<p className="text-muted-foreground">
|
||||
Pick quickly early on and you'll build up a bigger bank for the
|
||||
later rounds when decisions get harder. Deliberate too long and
|
||||
your bank shrinks. It rewards decisiveness without penalizing you
|
||||
for taking a moment when you really need it.
|
||||
</p>
|
||||
<div className="bg-muted rounded-md p-3 text-sm text-muted-foreground">
|
||||
<span className="font-semibold text-foreground">Example:</span>{" "}
|
||||
On Standard speed, you start with 2 minutes. You make your first
|
||||
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>
|
||||
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>
|
||||
|
||||
{/* Draft Queue & Autodraft */}
|
||||
<div className="space-y-3">
|
||||
<h3 className="text-lg font-semibold">Draft Queue & Autodraft</h3>
|
||||
{/* Flexible Pacing */}
|
||||
<div className="space-y-3 mb-6">
|
||||
<h3 className="text-lg font-semibold">Flexible Pacing</h3>
|
||||
<p className="text-muted-foreground">
|
||||
Before and during the draft you can build a{" "}
|
||||
<span className="font-semibold text-foreground">draft queue</span>{" "}
|
||||
— an ordered list of picks you want to make. When it's your turn,
|
||||
you can pick manually or let your queue guide you.
|
||||
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">
|
||||
If your time bank runs out,{" "}
|
||||
<span className="font-semibold text-foreground">autodraft</span>{" "}
|
||||
kicks in automatically. It'll grab the first available pick from
|
||||
your queue. If your queue is empty or everything in it has
|
||||
already been taken, it'll grab from the top of the available player pool.
|
||||
Keep your queue updated and you'll never get stuck with a random
|
||||
pick.
|
||||
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>
|
||||
|
|
@ -300,56 +324,21 @@ export default function HowToPlay() {
|
|||
</p>
|
||||
</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 */}
|
||||
<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">
|
||||
<Link
|
||||
to="/rules"
|
||||
className="underline underline-offset-4 hover:text-foreground transition-colors"
|
||||
>
|
||||
official rules
|
||||
</Link>
|
||||
.
|
||||
</p>
|
||||
<Link
|
||||
to="/leagues/new"
|
||||
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"
|
||||
>
|
||||
Create a League
|
||||
</Link>
|
||||
<Button asChild size="lg">
|
||||
<Link to="/leagues/new">Create a League</Link>
|
||||
</Button>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue