8c9b131c00
* Update how-to-play scoring rules to match standard scoring - Update placement points: 1st 100, 2nd 70, 3rd-4th 45, 5th-8th 20 - Add Counter-Strike to the special majors scoring section alongside Golf & Tennis - Add qualifying points breakdown (8/5/3/2/1) per major tournament https://claude.ai/code/session_01JUAqVZgo7M7XRBLzpeaWpH * Fix scoring to show all 8 individual placements correctly Display each placement (1st-8th) with its own point value rather than grouping/averaging: 100, 70, 50, 40, 25, 25, 15, 15 https://claude.ai/code/session_01JUAqVZgo7M7XRBLzpeaWpH --------- Co-authored-by: Claude <noreply@anthropic.com>
197 lines
8.4 KiB
TypeScript
197 lines
8.4 KiB
TypeScript
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-8">How To Play</h1>
|
|
|
|
<div className="space-y-8">
|
|
<section>
|
|
<h2 className="text-2xl font-semibold mb-4">🎯 The Goal</h2>
|
|
<p className="text-lg text-muted-foreground">
|
|
Draft teams and athletes across multiple sports and earn points
|
|
based on how well they perform. The player with the most points at
|
|
the end of the season wins!
|
|
</p>
|
|
</section>
|
|
|
|
<section>
|
|
<h2 className="text-2xl font-semibold mb-4">
|
|
📋 Building Your Roster
|
|
</h2>
|
|
<p className="text-lg text-muted-foreground mb-4">
|
|
Your roster has spots for different sports. You'll draft teams or
|
|
individual athletes depending on the sport:
|
|
</p>
|
|
<ul className="list-disc list-inside space-y-2 text-muted-foreground ml-4">
|
|
<li>Each sport has at least one required spot on your roster</li>
|
|
<li>
|
|
You'll also get flex spots that can be filled with any sport you
|
|
choose
|
|
</li>
|
|
<li>
|
|
Pick wisely - you're stuck with your roster for the whole season!
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section>
|
|
<h2 className="text-2xl font-semibold mb-4">🏆 How Scoring Works</h2>
|
|
<p className="text-lg text-muted-foreground mb-4">
|
|
Points are awarded based on final standings. The better your pick
|
|
finishes, the more points you earn:
|
|
</p>
|
|
<div className="bg-muted p-6 rounded-lg">
|
|
<div className="grid grid-cols-2 gap-x-8 gap-y-3">
|
|
<div className="flex justify-between items-center">
|
|
<span className="font-semibold">🥇 1st Place</span>
|
|
<span className="text-xl font-bold">100 pts</span>
|
|
</div>
|
|
<div className="flex justify-between items-center">
|
|
<span className="font-semibold">🥈 2nd Place</span>
|
|
<span className="text-xl font-bold">70 pts</span>
|
|
</div>
|
|
<div className="flex justify-between items-center">
|
|
<span className="font-semibold">🥉 3rd Place</span>
|
|
<span className="text-xl font-bold">50 pts</span>
|
|
</div>
|
|
<div className="flex justify-between items-center">
|
|
<span className="font-semibold">4th Place</span>
|
|
<span className="text-xl font-bold">40 pts</span>
|
|
</div>
|
|
<div className="flex justify-between items-center">
|
|
<span className="font-semibold">5th Place</span>
|
|
<span className="text-xl font-bold">25 pts</span>
|
|
</div>
|
|
<div className="flex justify-between items-center">
|
|
<span className="font-semibold">6th Place</span>
|
|
<span className="text-xl font-bold">25 pts</span>
|
|
</div>
|
|
<div className="flex justify-between items-center">
|
|
<span className="font-semibold">7th Place</span>
|
|
<span className="text-xl font-bold">15 pts</span>
|
|
</div>
|
|
<div className="flex justify-between items-center">
|
|
<span className="font-semibold">8th Place</span>
|
|
<span className="text-xl font-bold">15 pts</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p className="text-sm text-muted-foreground mt-4 italic">
|
|
Note: If nobody drafted a team that finishes in the top 8, those
|
|
points aren't awarded to anyone.
|
|
</p>
|
|
</section>
|
|
|
|
<section>
|
|
<h2 className="text-2xl font-semibold mb-4">
|
|
⛳ Special Scoring for Golf, Tennis & Counter-Strike
|
|
</h2>
|
|
<p className="text-lg text-muted-foreground mb-4">
|
|
Golf, tennis, and Counter-Strike work a bit differently since they
|
|
each have multiple major tournaments throughout the year:
|
|
</p>
|
|
<ul className="list-disc list-inside space-y-2 text-muted-foreground ml-4">
|
|
<li>
|
|
Players/teams earn qualifying points at each major tournament
|
|
throughout the year
|
|
</li>
|
|
<li>
|
|
After all majors are complete, we add up everyone's qualifying
|
|
points
|
|
</li>
|
|
<li>
|
|
The top 8 by total qualifying points then earn the regular scoring
|
|
points (100, 70, 50, 40, 25, 25, 15, 15)
|
|
</li>
|
|
<li>This rewards consistency across all the major tournaments!</li>
|
|
</ul>
|
|
<div className="bg-muted p-4 rounded-lg mt-4">
|
|
<p className="font-semibold mb-2">Qualifying points per major:</p>
|
|
<div className="grid grid-cols-2 gap-1 text-sm text-muted-foreground">
|
|
<span>1st Place</span><span className="font-medium">8 QP</span>
|
|
<span>2nd Place</span><span className="font-medium">5 QP</span>
|
|
<span>3rd Place</span><span className="font-medium">3 QP</span>
|
|
<span>4th Place</span><span className="font-medium">2 QP</span>
|
|
<span>5th Place</span><span className="font-medium">1 QP</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<h2 className="text-2xl font-semibold mb-4">🎲 The Draft</h2>
|
|
<p className="text-lg text-muted-foreground mb-4">
|
|
Before the season starts, you'll participate in a snake draft:
|
|
</p>
|
|
<ul className="list-disc list-inside space-y-2 text-muted-foreground ml-4">
|
|
<li>
|
|
<strong>Snake draft</strong> means the order reverses each round
|
|
(if you pick last in round 1, you pick first in round 2)
|
|
</li>
|
|
<li>You'll have a time limit to make each pick</li>
|
|
<li>
|
|
Once you draft a team or athlete, they're yours for the entire
|
|
season
|
|
</li>
|
|
<li>No trading picks or players - choose carefully!</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section>
|
|
<h2 className="text-2xl font-semibold mb-4">📅 During the Season</h2>
|
|
<p className="text-lg text-muted-foreground mb-4">
|
|
Once the season starts, it's all about watching your picks compete:
|
|
</p>
|
|
<ul className="list-disc list-inside space-y-2 text-muted-foreground ml-4">
|
|
<li>No trades - your roster is locked in</li>
|
|
<li>No waivers or free agent pickups</li>
|
|
<li>Just sit back and cheer for your teams and athletes!</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section className="bg-primary/5 p-6 rounded-lg border border-primary/20">
|
|
<h2 className="text-2xl font-semibold mb-4">💡 Quick Tips</h2>
|
|
<ul className="space-y-2 text-muted-foreground">
|
|
<li>
|
|
✓ <strong>Diversify:</strong> Don't put all your eggs in one
|
|
basket - spread your picks across different sports
|
|
</li>
|
|
<li>
|
|
✓ <strong>Know the format:</strong> Some sports score based on
|
|
playoffs, others on regular season performance
|
|
</li>
|
|
<li>
|
|
✓ <strong>Draft early:</strong> The best teams and athletes go
|
|
fast!
|
|
</li>
|
|
<li>
|
|
✓ <strong>Have fun:</strong> This is about enjoying sports across
|
|
the calendar year
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section className="text-center pt-8">
|
|
<p className="text-xl text-muted-foreground mb-6">
|
|
Ready to compete?
|
|
</p>
|
|
<a
|
|
href="/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"
|
|
>
|
|
Create a League
|
|
</a>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|