1584d34b89
Removes light mode entirely in favour of a permanent dark theme with a navy-tinted background and three signature accents (electric blue, amber/gold, coral) exposed as CSS custom properties and Tailwind utilities (bg-electric, text-amber-accent, text-coral-accent). - Set class="dark" on <html> and apply Clerk dark base theme - Rewrite app.css: single :root palette (oklch navy values), custom --electric / --amber-accent / --coral-accent variables, remove duplicate .dark block and light-mode bg-white/bg-gray-950 rule - Install @clerk/themes for Clerk dark modal support - Replace hardcoded Tailwind colors across 30+ files: - Draft grid cells: blue-50/blue-950 → electric/15, green-50/950 → emerald/10 - Timer: green-600/yellow-600/red-600 → emerald-400/amber-accent/coral-accent - Status badges: blue-50/green-50/gray-50 → electric/emerald/muted variants - Success messages: green-500/15 text-green-700 dark:text-green-400 → emerald-500/15 text-emerald-400 - Info cards: blue-50 dark:bg-blue-950 → electric/10 - Warning cards: yellow-500 → amber-accent variants - Medal/placement badges: yellow-500/orange-600 → amber-accent/coral-accent - Movement indicators: green-600/red-600 → emerald-400/coral-accent - Connection dots: green-500/red-500 → emerald-500/coral-accent - Remove dark:hidden/dark:block logo toggle in welcome.tsx (always dark) - Update DraftGrid test assertions to match new class names Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
96 lines
3.6 KiB
TypeScript
96 lines
3.6 KiB
TypeScript
import { Label } from "~/components/ui/label";
|
||
import { Input } from "~/components/ui/input";
|
||
import {
|
||
Card,
|
||
CardContent,
|
||
CardDescription,
|
||
CardHeader,
|
||
CardTitle,
|
||
} from "~/components/ui/card";
|
||
import { DEFAULT_SCORING_RULES, type ScoringRules } from "~/lib/scoring-types";
|
||
|
||
interface ScoringRulesEditorProps {
|
||
scoringRules?: Partial<ScoringRules>;
|
||
disabled?: boolean;
|
||
}
|
||
|
||
export function ScoringRulesEditor({ scoringRules, disabled = false }: ScoringRulesEditorProps) {
|
||
const rules = {
|
||
...DEFAULT_SCORING_RULES,
|
||
...scoringRules,
|
||
};
|
||
|
||
const placementLabels = [
|
||
{ key: "pointsFor1st", label: "1st Place", emoji: "🥇" },
|
||
{ key: "pointsFor2nd", label: "2nd Place", emoji: "🥈" },
|
||
{ key: "pointsFor3rd", label: "3rd Place", emoji: "🥉" },
|
||
{ key: "pointsFor4th", label: "4th Place", emoji: "4️⃣" },
|
||
{ key: "pointsFor5th", label: "5th Place", emoji: "5️⃣" },
|
||
{ key: "pointsFor6th", label: "6th Place", emoji: "6️⃣" },
|
||
{ key: "pointsFor7th", label: "7th Place", emoji: "7️⃣" },
|
||
{ key: "pointsFor8th", label: "8th Place", emoji: "8️⃣" },
|
||
] as const;
|
||
|
||
return (
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>Scoring Rules</CardTitle>
|
||
<CardDescription>
|
||
{disabled
|
||
? "Scoring rules cannot be modified after the draft has started"
|
||
: "Set the fantasy points awarded for each final placement (1st through 8th)"}
|
||
</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="space-y-4">
|
||
<div className="bg-muted/50 border border-muted-foreground/20 rounded-md p-3">
|
||
<p className="text-sm text-muted-foreground">
|
||
<strong>How it works:</strong> At the end of each sport's season, participants will
|
||
be ranked 1st through 8th based on their performance. These point values will be
|
||
awarded to teams that drafted those participants.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||
{placementLabels.map(({ key, label, emoji }) => (
|
||
<div key={key} className="space-y-2">
|
||
<Label htmlFor={key} className="flex items-center gap-2">
|
||
<span className="text-lg">{emoji}</span>
|
||
<span>{label}</span>
|
||
</Label>
|
||
<Input
|
||
id={key}
|
||
name={key}
|
||
type="number"
|
||
min="0"
|
||
max="1000"
|
||
step="1"
|
||
defaultValue={rules[key]}
|
||
disabled={disabled}
|
||
required
|
||
className="text-base font-semibold"
|
||
/>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<div className="bg-electric/10 border border-electric/20 rounded-md p-3">
|
||
<p className="text-sm text-electric">
|
||
<strong>💡 Tip:</strong> The default scoring rewards winning heavily (100 pts for 1st)
|
||
but also values consistency (25 pts for 5th/6th). Customize these values to fit your
|
||
league's strategy preferences.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="border-t pt-4">
|
||
<p className="text-xs text-muted-foreground">
|
||
Preview: 1st={rules.pointsFor1st} • 2nd={rules.pointsFor2nd} • 3rd={rules.pointsFor3rd} •
|
||
4th={rules.pointsFor4th} • 5th={rules.pointsFor5th} • 6th={rules.pointsFor6th} •
|
||
7th={rules.pointsFor7th} • 8th={rules.pointsFor8th} pts
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
);
|
||
}
|