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>

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>
+  );
+}

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,
+};

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";
 
-/**
+// Re-export for convenience
- * Scoring rules configuration for a season
+export { DEFAULT_SCORING_RULES, type ScoringRules };
- * 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,
-};
 
 /**
  * Get scoring rules for a season

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);
@@ -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>

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">

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
+- [x] **1.3** Update season settings UI ✅ *Completed*
-  - [ ] Add scoring rules editor component
+  - [x] Add scoring rules editor component (ScoringRulesEditor.tsx)
-  - [ ] Add 8 input fields for placement points
+  - [x] Add 8 input fields for placement points with emojis
-  - [ ] Update season create/edit forms
+  - [x] Update league settings form to include scoring rules
-  - [ ] Add validation for point values
+  - [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