feat: Add scoring rules editor to league settings and creation pages

- 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>
2025-10-29 00:04:27 -07:00 · 2025-10-29 00:04:27 -07:00 · 7dddf2c9a7
commit 7dddf2c9a7
parent e49bb3df8b
6 changed files with 194 additions and 34 deletions
--- a/app/components/scoring/ScoringRulesEditor.tsx
+++ b/app/components/scoring/ScoringRulesEditor.tsx
@ -0,0 +1,96 @@
+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>
+  );
+}
--- a/app/lib/scoring-types.ts
+++ b/app/lib/scoring-types.ts
@ -0,0 +1,25 @@
+/**
+ * Shared scoring types that can be used on both client and server
+ */
+
+export interface ScoringRules {
+  pointsFor1st: number;
+  pointsFor2nd: number;
+  pointsFor3rd: number;
+  pointsFor4th: number;
+  pointsFor5th: number;
+  pointsFor6th: number;
+  pointsFor7th: number;
+  pointsFor8th: number;
+}
+
+export const DEFAULT_SCORING_RULES: ScoringRules = {
+  pointsFor1st: 100,
+  pointsFor2nd: 70,
+  pointsFor3rd: 50,
+  pointsFor4th: 40,
+  pointsFor5th: 25,
+  pointsFor6th: 25,
+  pointsFor7th: 15,
+  pointsFor8th: 15,
+};
--- a/app/models/scoring-rules.ts
+++ b/app/models/scoring-rules.ts
@ -1,35 +1,10 @@
 import { database } from "~/database/context";
 import * as schema from "~/database/schema";
 import { eq } from "drizzle-orm";
+import { DEFAULT_SCORING_RULES, type ScoringRules } from "~/lib/scoring-types";

-/**
- * Scoring rules configuration for a season
- * These define the points awarded for each placement (1st through 8th)
- */
-export interface ScoringRules {
-  pointsFor1st: number;
-  pointsFor2nd: number;
-  pointsFor3rd: number;
-  pointsFor4th: number;
-  pointsFor5th: number;
-  pointsFor6th: number;
-  pointsFor7th: number;
-  pointsFor8th: number;
-}
-
-/**
- * Default scoring rules used when creating new seasons
- */
-export const DEFAULT_SCORING_RULES: ScoringRules = {
-  pointsFor1st: 100,
-  pointsFor2nd: 70,
-  pointsFor3rd: 50,
-  pointsFor4th: 40,
-  pointsFor5th: 25,
-  pointsFor6th: 25,
-  pointsFor7th: 15,
-  pointsFor8th: 15,
-};
+// Re-export for convenience
+export { DEFAULT_SCORING_RULES, type ScoringRules };

 /**
 * Get scoring rules for a season
--- a/app/routes/leagues/$leagueId.settings.tsx
+++ b/app/routes/leagues/$leagueId.settings.tsx
@ -52,6 +52,7 @@ import {
  AlertDialogTitle,
  AlertDialogTrigger,
 } from "~/components/ui/alert-dialog";
+import { ScoringRulesEditor } from "~/components/scoring/ScoringRulesEditor";

 export async function loader(args: Route.LoaderArgs) {
  const { userId } = await getAuth(args);
@ -369,7 +370,7 @@ export async function action(args: Route.ActionArgs) {

      // Update season settings
      const seasonUpdates: any = {};
-      
+
      // Handle draft rounds
      if (typeof draftRounds === "string") {
        const draftRoundsNum = parseInt(draftRounds, 10);
@ -394,6 +395,27 @@ export async function action(args: Route.ActionArgs) {
      seasonUpdates.draftInitialTime = draftInitialTime;
      seasonUpdates.draftIncrementTime = draftIncrementTime;

+      // Handle scoring rules (only if in pre_draft status)
+      if (season.status === "pre_draft") {
+        const scoringFields = [
+          "pointsFor1st", "pointsFor2nd", "pointsFor3rd", "pointsFor4th",
+          "pointsFor5th", "pointsFor6th", "pointsFor7th", "pointsFor8th"
+        ];
+
+        for (const field of scoringFields) {
+          const value = formData.get(field);
+          if (typeof value === "string") {
+            const points = parseInt(value, 10);
+            if (!isNaN(points)) {
+              if (points < 0 || points > 1000) {
+                return { error: `${field} must be between 0 and 1000 points` };
+              }
+              seasonUpdates[field] = points;
+            }
+          }
+        }
+      }
+
      // Update season if there are changes
      if (Object.keys(seasonUpdates).length > 0) {
        await updateSeason(season.id, seasonUpdates);
@ -743,6 +765,21 @@ export default function LeagueSettings({ loaderData, actionData }: Route.Compone
          </CardContent>
        </Card>

+        {/* Scoring Rules */}
+        <ScoringRulesEditor
+          scoringRules={season ? {
+            pointsFor1st: season.pointsFor1st,
+            pointsFor2nd: season.pointsFor2nd,
+            pointsFor3rd: season.pointsFor3rd,
+            pointsFor4th: season.pointsFor4th,
+            pointsFor5th: season.pointsFor5th,
+            pointsFor6th: season.pointsFor6th,
+            pointsFor7th: season.pointsFor7th,
+            pointsFor8th: season.pointsFor8th,
+          } : undefined}
+          disabled={!season || season.status !== "pre_draft"}
+        />
+
        {/* Sports Seasons */}
        <Card>
          <CardHeader>
--- a/app/routes/leagues/new.tsx
+++ b/app/routes/leagues/new.tsx
@ -38,6 +38,7 @@ import {
  PopoverTrigger,
 } from "~/components/ui/popover";
 import { cn } from "~/lib/utils";
+import { ScoringRulesEditor } from "~/components/scoring/ScoringRulesEditor";

 export async function loader() {
  const templates = await findActiveSeasonTemplates();
@ -123,6 +124,26 @@ export async function action(args: Route.ActionArgs) {
    return { error: "Draft rounds must be between 1 and 50" };
  }

+  // Extract and validate scoring rules
+  const scoringFields = [
+    "pointsFor1st", "pointsFor2nd", "pointsFor3rd", "pointsFor4th",
+    "pointsFor5th", "pointsFor6th", "pointsFor7th", "pointsFor8th"
+  ];
+
+  const scoringRules: Record<string, number> = {};
+  for (const field of scoringFields) {
+    const value = formData.get(field);
+    if (typeof value === "string") {
+      const points = parseInt(value, 10);
+      if (!isNaN(points)) {
+        if (points < 0 || points > 1000) {
+          return { error: `${field} must be between 0 and 1000 points` };
+        }
+        scoringRules[field] = points;
+      }
+    }
+  }
+
  try {
    // Create league
    const league = await createLeague({
@ -147,6 +168,7 @@ export async function action(args: Route.ActionArgs) {
      draftDateTime: typeof draftDateTime === "string" && draftDateTime ? new Date(draftDateTime) : null,
      draftInitialTime: draftInitialTimeNum,
      draftIncrementTime: draftIncrementTimeNum,
+      ...scoringRules,
    });

    // Set this as the current season for the league
@ -374,6 +396,8 @@ export default function NewLeague({ loaderData, actionData }: Route.ComponentPro
              </p>
            </div>

+            <ScoringRulesEditor disabled={false} />
+
            <div className="space-y-4">
              <Label>Sports Selection</Label>
              <p className="text-sm text-muted-foreground">
--- a/plans/scoring-system.md
+++ b/plans/scoring-system.md
@ -950,11 +950,14 @@ All clarification questions (Q1-Q21) have been answered and confirmed:
  - [x] Add draftPicks relations to schema
  - [x] All TypeScript compilation passes

- [ ] **1.3** Update season settings UI
-  - [ ] Add scoring rules editor component
-  - [ ] Add 8 input fields for placement points
-  - [ ] Update season create/edit forms
-  - [ ] Add validation for point values
+- [x] **1.3** Update season settings UI ✅ *Completed*
+  - [x] Add scoring rules editor component (ScoringRulesEditor.tsx)
+  - [x] Add 8 input fields for placement points with emojis
+  - [x] Update league settings form to include scoring rules
+  - [x] Update league creation form to include scoring rules
+  - [x] Add validation for point values (0-1000 range)
+  - [x] Disable editing after draft starts (settings page only)
+  - [x] Show helpful tips and preview

 - [ ] **1.4** Basic admin result entry UI
  - [ ] Create admin route structure for sports seasons