7dddf2c9a7
- Created ScoringRulesEditor component with 8 placement point inputs - Added scoring-types.ts for shared client/server types - Integrated scoring rules into league settings page - Integrated scoring rules into league creation form - Added validation for point values (0-1000 range) - Disabled editing in settings after draft starts - Included helpful tips and preview display Phase 1.3 complete 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <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-blue-500/10 border border-blue-500/20 rounded-md p-3">
|
||
<p className="text-sm text-blue-700 dark:text-blue-400">
|
||
<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>
|
||
);
|
||
}
|