From 1f766846b07e987e3951c45daf8df21e7f9441ae Mon Sep 17 00:00:00 2001
From: Anthony Correa <a@correa.co>
Date: Tue, 6 Jan 2026 20:40:52 -0600
Subject: [PATCH] Add playoff round support to cost estimator

- Introduced `PlayoffRound` model with cost inputs for games, umpires, balls, and fields.
- Added UI to manage multiple playoff rounds, each with configurable fields.
- Extended cost computations to include playoff-specific totals for umpires, balls, and fields.
- Updated import/export logic to handle a new save file version (v2) including playoff data.
- Implemented `localStorage` auto-save/load for persistence across sessions.
---
 src/App.tsx | 566 +++++++++++++++++++++++++++-------------------------
 1 file changed, 295 insertions(+), 271 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 1152225..a678edb 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useRef, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 
 // --- Helpers ---------------------------------------------------------------
 const currency = (n: number) =>
@@ -10,7 +10,6 @@ const currency = (n: number) =>
 
 const clamp = (v: number, min: number, max: number) => Math.min(max, Math.max(min, v));
 
-// Map 1..5 to human-friendly week labels
 const weekLabel = (w: number) =>
   ({ 1: "1st", 2: "2nd", 3: "3rd", 4: "4th", 5: "5th" } as Record<number, string>)[w] ?? `${w}th`;
 
@@ -29,21 +28,19 @@ const months = [
   "December",
 ];
 
-// Approximate how many weeks between (month, week) pairs (inclusive)
 function approxWeeksBetween(
   startMonthIdx: number,
   startWeek: number,
   endMonthIdx: number,
   endWeek: number
 ) {
-  const weeksPerMonth = 4.34524; // avg weeks per month
+  const weeksPerMonth = 4.34524;
   const start = startMonthIdx + (startWeek - 1) / 5;
   const end = endMonthIdx + (endWeek - 1) / 5;
   const monthsBetween = Math.max(0, end - start);
   return Math.max(0, Math.round(monthsBetween * weeksPerMonth + 1));
 }
 
-// File download helper
 function downloadText(filename: string, text: string) {
   const blob = new Blob([text], { type: "application/json" });
   const url = URL.createObjectURL(blob);
@@ -54,7 +51,6 @@ function downloadText(filename: string, text: string) {
   URL.revokeObjectURL(url);
 }
 
-// Generic labeled number+slider input pair
 function NumberSlider({
   label,
   value,
@@ -78,7 +74,7 @@ function NumberSlider({
   return (
     <div className="space-y-2">
       <div className="flex items-baseline justify-between">
-        <label htmlFor={sliderId} className="text-sm font-medium text-gray-800">
+        <label htmlFor={sliderId} className="text-sm font-medium">
           {label}
         </label>
         <input
@@ -107,47 +103,65 @@ function NumberSlider({
   );
 }
 
-// --- Main App --------------------------------------------------------------
+interface FieldRow { id: string; name: string; pct: number; costPerGame: number }
+interface PlayoffRound {
+  id: string;
+  name: string;
+  games: number;
+  umpiresPerGame: number;
+  costPerUmpPerGame: number;
+  ballsPerGame: number;
+  costPerDozenBalls: number;
+  fields: FieldRow[];
+}
+
 export default function BaseballLeagueCostEstimator() {
-  // Fixed costs: name + amount
   const [fixedCosts, setFixedCosts] = useState<Array<{ id: string; name: string; amount: number }>>([
     { id: crypto.randomUUID(), name: "Insurance", amount: 1500 },
     { id: crypto.randomUUID(), name: "Commissioner", amount: 2000 },
   ]);
 
-  // Variables
   const [teams, setTeams] = useState(12);
-  const [gamesPerTeam, setGamesPerTeam] = useState(10); // number of games per team
+  const [gamesPerTeam, setGamesPerTeam] = useState(10);
   const [umpiresPerGame, setUmpiresPerGame] = useState(2);
   const [costPerUmpPerGame, setCostPerUmpPerGame] = useState(70);
   const [avgTeamSize, setAvgTeamSize] = useState(12);
 
-  // Per-game consumables
   const [ballsPerGame, setBallsPerGame] = useState(4);
   const [costPerDozenBalls, setCostPerDozenBalls] = useState(60);
 
-  // Season window
-  const [startMonth, setStartMonth] = useState(4); // 0-indexed; May
+  const [startMonth, setStartMonth] = useState(4);
   const [startWeek, setStartWeek] = useState(1);
-  const [endMonth, setEndMonth] = useState(7); // August
+  const [endMonth, setEndMonth] = useState(7);
   const [endWeek, setEndWeek] = useState(4);
 
-  // Fields table rows: name, pct of games, cost per game (optional)
-  const [fields, setFields] = useState<Array<{ id: string; name: string; pct: number; costPerGame: number }>>([
+  const [fields, setFields] = useState<FieldRow[]>([
     { id: crypto.randomUUID(), name: "Main Park #1", pct: 60, costPerGame: 40 },
     { id: crypto.randomUUID(), name: "Riverside #2", pct: 40, costPerGame: 25 },
   ]);
 
-  // Derived calculations
+  const newRound = (i: number): PlayoffRound => ({
+    id: crypto.randomUUID(),
+    name: `Round ${i}`,
+    games: 12,
+    umpiresPerGame: 2,
+    costPerUmpPerGame: 80,
+    ballsPerGame: 5,
+    costPerDozenBalls: 70,
+    fields: [
+      { id: crypto.randomUUID(), name: "Stadium A", pct: 70, costPerGame: 100 },
+      { id: crypto.randomUUID(), name: "Stadium B", pct: 30, costPerGame: 80 },
+    ],
+  });
+  const [playoffRounds, setPlayoffRounds] = useState<PlayoffRound[]>([newRound(1)]);
+
   const fixedCostTotal = useMemo(
     () => fixedCosts.reduce((sum, fc) => sum + (Number(fc.amount) || 0), 0),
     [fixedCosts]
   );
 
-  // Total league games, given each game involves exactly two teams
   const totalGames = useMemo(() => (teams || 0) * (gamesPerTeam || 0) / 2, [teams, gamesPerTeam]);
 
-  // Scheduling references (games-per-opponent distribution)
   const opponentsPerTeam = useMemo(() => Math.max(0, (teams || 0) - 1), [teams]);
   const gamesPerOpponentExact = useMemo(() => {
     if (!opponentsPerTeam) return 0;
@@ -180,22 +194,53 @@ export default function BaseballLeagueCostEstimator() {
     );
   }, [fields, fieldsPctSum, totalGames]);
 
-  // Per-game baseballs cost
   const perBallCost = useMemo(() => (Number(costPerDozenBalls) || 0) / 12, [costPerDozenBalls]);
   const baseballsCostPerGame = useMemo(() => (Number(ballsPerGame) || 0) * perBallCost, [ballsPerGame, perBallCost]);
   const baseballsCostTotal = useMemo(() => (totalGames || 0) * baseballsCostPerGame, [totalGames, baseballsCostPerGame]);
 
-  // Split costs: league (fixed + fields + consumables) vs umpires
-  const leagueCostsTotal = useMemo(
-    () => fixedCostTotal + fieldRentalCostTotal + baseballsCostTotal,
-    [fixedCostTotal, fieldRentalCostTotal, baseballsCostTotal]
-  );
+  function pctSum(rows: FieldRow[]) { return rows.reduce((s, r) => s + (Number(r.pct) || 0), 0) || 100; }
 
-  const grandTotal = leagueCostsTotal + umpireCostTotal;
+  const playoffRoundCosts = useMemo(() => {
+    return playoffRounds.map((r) => {
+      const totalPct = pctSum(r.fields);
+      const fieldCost = r.fields
+        .map((f) => ((Number(f.pct) || 0) / totalPct) * (Number(f.costPerGame) || 0))
+        .reduce((a, b) => a + b, 0) * (Number(r.games) || 0);
+
+      const umps = (Number(r.games) || 0) * (Number(r.umpiresPerGame) || 0) * (Number(r.costPerUmpPerGame) || 0);
+      const ballCostPerGame = (Number(r.ballsPerGame) || 0) * ((Number(r.costPerDozenBalls) || 0) / 12);
+      const balls = (Number(r.games) || 0) * ballCostPerGame;
+
+      return { fieldCost, umpireCost: umps, baseballsCost: balls, games: Number(r.games) || 0 };
+    });
+  }, [playoffRounds]);
+
+  const playoffTotals = useMemo(() => {
+    return playoffRoundCosts.reduce(
+      (acc, c) => ({
+        field: acc.field + c.fieldCost,
+        umps: acc.umps + c.umpireCost,
+        balls: acc.balls + c.baseballsCost,
+        games: acc.games + c.games,
+      }),
+      { field: 0, umps: 0, balls: 0, games: 0 }
+    );
+  }, [playoffRoundCosts]);
+
+  const playoffLeagueCostsTotal = useMemo(() => playoffTotals.field + playoffTotals.balls, [playoffTotals]);
+  const playoffUmpireCostTotal = useMemo(() => playoffTotals.umps, [playoffTotals]);
+
+  const leagueCostsTotal = useMemo(
+    () => fixedCostTotal + fieldRentalCostTotal + baseballsCostTotal + playoffLeagueCostsTotal,
+    [fixedCostTotal, fieldRentalCostTotal, baseballsCostTotal, playoffLeagueCostsTotal]
+  );
+  const allUmpireCostsTotal = useMemo(() => umpireCostTotal + playoffUmpireCostTotal, [umpireCostTotal, playoffUmpireCostTotal]);
+
+  const grandTotal = leagueCostsTotal + allUmpireCostsTotal;
 
   const costPerTeam = useMemo(() => (teams > 0 ? grandTotal / teams : 0), [grandTotal, teams]);
   const costPerTeamLeague = useMemo(() => (teams > 0 ? leagueCostsTotal / teams : 0), [leagueCostsTotal, teams]);
-  const costPerTeamUmpires = useMemo(() => (teams > 0 ? umpireCostTotal / teams : 0), [umpireCostTotal, teams]);
+  const costPerTeamUmpires = useMemo(() => (teams > 0 ? allUmpireCostsTotal / teams : 0), [allUmpireCostsTotal, teams]);
 
   const costPerPlayer = useMemo(
     () => (teams > 0 && avgTeamSize > 0 ? grandTotal / (teams * avgTeamSize) : 0),
@@ -217,7 +262,6 @@ export default function BaseballLeagueCostEstimator() {
     return (totalGames || 0) / approxWeeks;
   }, [totalGames, approxWeeks]);
 
-  // Mutators
   const addFixed = () => setFixedCosts((x) => [...x, { id: crypto.randomUUID(), name: "New Fixed Cost", amount: 0 }]);
   const removeFixed = (id: string) => setFixedCosts((x) => x.filter((r) => r.id !== id));
 
@@ -228,11 +272,35 @@ export default function BaseballLeagueCostEstimator() {
     ]);
   const removeField = (id: string) => setFields((x) => x.filter((r) => r.id !== id));
 
+  const addRound = () => setPlayoffRounds((rs) => [...rs, newRound(rs.length + 1)]);
+  const removeRound = (id: string) => setPlayoffRounds((rs) => rs.filter((r) => r.id !== id));
+  const updateRound = (id: string, patch: Partial<PlayoffRound>) =>
+    setPlayoffRounds((rs) => rs.map((r) => (r.id === id ? { ...r, ...patch } : r)));
+  const updateRoundField = (rid: string, fid: string, patch: Partial<FieldRow>) =>
+    setPlayoffRounds((rs) =>
+      rs.map((r) =>
+        r.id !== rid
+          ? r
+          : { ...r, fields: r.fields.map((f) => (f.id === fid ? { ...f, ...patch } : f)) }
+      )
+    );
+  const addRoundField = (rid: string) =>
+    setPlayoffRounds((rs) =>
+      rs.map((r) =>
+        r.id !== rid
+          ? r
+          : { ...r, fields: [...r.fields, { id: crypto.randomUUID(), name: `Field ${r.fields.length + 1}`, pct: 0, costPerGame: 0 }] }
+      )
+    );
+  const removeRoundField = (rid: string, fid: string) =>
+    setPlayoffRounds((rs) =>
+      rs.map((r) => (r.id !== rid ? r : { ...r, fields: r.fields.filter((f) => f.id !== fid) }))
+    );
+
   const pctWarning = fieldsPctSum !== 100;
 
-  // --- Import/Export -------------------------------------------------------
   type SaveShape = {
-    version: 1;
+    version: 2;
     data: {
       fixedCosts: Array<{ name: string; amount: number }>;
       teams: number;
@@ -244,6 +312,11 @@ export default function BaseballLeagueCostEstimator() {
       costPerDozenBalls: number;
       startMonth: number; startWeek: number; endMonth: number; endWeek: number;
       fields: Array<{ name: string; pct: number; costPerGame: number }>;
+      playoffRounds: Array<{
+        name: string; games: number; umpiresPerGame: number; costPerUmpPerGame: number;
+        ballsPerGame: number; costPerDozenBalls: number;
+        fields: Array<{ name: string; pct: number; costPerGame: number }>;
+      }>;
     };
   };
 
@@ -251,7 +324,7 @@ export default function BaseballLeagueCostEstimator() {
 
   const exportJSON = () => {
     const payload: SaveShape = {
-      version: 1,
+      version: 2,
       data: {
         fixedCosts: fixedCosts.map(({ name, amount }) => ({ name, amount })),
         teams,
@@ -266,6 +339,15 @@ export default function BaseballLeagueCostEstimator() {
         endMonth,
         endWeek,
         fields: fields.map(({ name, pct, costPerGame }) => ({ name, pct, costPerGame })),
+        playoffRounds: playoffRounds.map((r) => ({
+          name: r.name,
+          games: r.games,
+          umpiresPerGame: r.umpiresPerGame,
+          costPerUmpPerGame: r.costPerUmpPerGame,
+          ballsPerGame: r.ballsPerGame,
+          costPerDozenBalls: r.costPerDozenBalls,
+          fields: r.fields.map(({ name, pct, costPerGame }) => ({ name, pct, costPerGame })),
+        })),
       },
     };
     const ts = new Date();
@@ -288,13 +370,23 @@ export default function BaseballLeagueCostEstimator() {
     setEndMonth(s.endMonth ?? endMonth);
     setEndWeek(s.endWeek ?? endWeek);
     setFields((s.fields || []).map(f => ({ id: crypto.randomUUID(), ...f })));
+    setPlayoffRounds((s.playoffRounds || []).map((r, i) => ({
+      id: crypto.randomUUID(),
+      name: r.name || `Round ${i+1}`,
+      games: r.games ?? 0,
+      umpiresPerGame: r.umpiresPerGame ?? 0,
+      costPerUmpPerGame: r.costPerUmpPerGame ?? 0,
+      ballsPerGame: r.ballsPerGame ?? 0,
+      costPerDozenBalls: r.costPerDozenBalls ?? 0,
+      fields: (r.fields || []).map(f => ({ id: crypto.randomUUID(), ...f })),
+    })));
   };
 
   const importFromFile = async (file: File) => {
     try {
       const text = await file.text();
       const parsed = JSON.parse(text);
-      if (!parsed || parsed.version !== 1 || !parsed.data) throw new Error("Invalid or unsupported file format.");
+      if (!parsed || !parsed.data) throw new Error("Invalid file format.");
       applyImported(parsed.data);
       alert("Import successful ✅");
     } catch (err: any) {
@@ -307,6 +399,36 @@ export default function BaseballLeagueCostEstimator() {
 
   const onClickImport = () => fileInputRef.current?.click();
 
+  const STORAGE_KEY = "league-cost-estimator:v2";
+  useEffect(() => {
+    const payload: SaveShape = {
+      version: 2,
+      data: {
+        fixedCosts: fixedCosts.map(({ name, amount }) => ({ name, amount })),
+        teams, gamesPerTeam, umpiresPerGame, costPerUmpPerGame, avgTeamSize,
+        ballsPerGame, costPerDozenBalls,
+        startMonth, startWeek, endMonth, endWeek,
+        fields: fields.map(({ name, pct, costPerGame }) => ({ name, pct, costPerGame })),
+        playoffRounds: playoffRounds.map((r) => ({
+          name: r.name, games: r.games, umpiresPerGame: r.umpiresPerGame, costPerUmpPerGame: r.costPerUmpPerGame,
+          ballsPerGame: r.ballsPerGame, costPerDozenBalls: r.costPerDozenBalls,
+          fields: r.fields.map(({ name, pct, costPerGame }) => ({ name, pct, costPerGame })),
+        })),
+      },
+    };
+    try { localStorage.setItem(STORAGE_KEY, JSON.stringify(payload)); } catch {}
+  }, [fixedCosts, teams, gamesPerTeam, umpiresPerGame, costPerUmpPerGame, avgTeamSize, ballsPerGame, costPerDozenBalls, startMonth, startWeek, endMonth, endWeek, fields, playoffRounds]);
+
+  useEffect(() => {
+    try {
+      const raw = localStorage.getItem(STORAGE_KEY);
+      if (raw) {
+        const parsed = JSON.parse(raw);
+        if (parsed && parsed.data) applyImported(parsed.data);
+      }
+    } catch {}
+  }, []);
+
   return (
     <div className="mx-auto max-w-6xl p-6">
       <header className="mb-6 flex items-center justify-between">
@@ -322,25 +444,17 @@ export default function BaseballLeagueCostEstimator() {
               if (f) importFromFile(f);
             }}
           />
-          <button onClick={onClickImport} className="rounded-xl border border-gray-300 bg-white px-3 py-1.5 text-sm shadow hover:bg-gray-50">Import</button>
-          <button onClick={exportJSON} className="rounded-xl bg-blue-600 px-3 py-1.5 text-sm font-medium text-white shadow hover:bg-blue-700">Export</button>
+          <button onClick={onClickImport} className="rounded-xl border hover:bg-gray-50">Import</button>
+          <button onClick={exportJSON} className="rounded-xl bg-blue-600 text-white shadow hover:bg-blue-700">Export</button>
         </div>
       </header>
 
       <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
-        {/* Left column: Variables */}
         <section className="lg:col-span-2 space-y-6">
-          {/* League Basics */}
-          <div className="rounded-2xl border border-gray-200 bg-white p-5 shadow-sm">
+          <div className="rounded-2xl border bg-white p-5 shadow-sm">
             <h2 className="mb-4 text-lg font-semibold">League Basics</h2>
             <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
-              <NumberSlider
-                label="Number of teams"
-                value={teams}
-                onChange={setTeams}
-                min={0}
-                max={50}
-              />
+              <NumberSlider label="Number of teams" value={teams} onChange={setTeams} min={0} max={50} />
 
               <NumberSlider
                 label="Games per team"
@@ -352,62 +466,22 @@ export default function BaseballLeagueCostEstimator() {
                 help={`League total games: ${totalGames}`}
               />
 
-              <NumberSlider
-                label="Umpires per game"
-                value={umpiresPerGame}
-                onChange={setUmpiresPerGame}
-                min={0}
-                max={6}
-                step={1}
-              />
+              <NumberSlider label="Umpires per game" value={umpiresPerGame} onChange={setUmpiresPerGame} min={0} max={6} step={1} />
+              <NumberSlider label="Cost per umpire per game ($)" value={costPerUmpPerGame} onChange={setCostPerUmpPerGame} min={0} max={300} step={1} />
 
-              <NumberSlider
-                label="Cost per umpire per game ($)"
-                value={costPerUmpPerGame}
-                onChange={setCostPerUmpPerGame}
-                min={0}
-                max={300}
-                step={1}
-              />
+              <NumberSlider label="Average team size (players)" value={avgTeamSize} onChange={setAvgTeamSize} min={1} max={30} step={1} help="Used for per-player cost" />
 
-              <NumberSlider
-                label="Average team size (players)"
-                value={avgTeamSize}
-                onChange={setAvgTeamSize}
-                min={1}
-                max={30}
-                step={1}
-                help="Used for per-player cost"
-              />
-
-              <NumberSlider
-                label="Baseballs used per game"
-                value={ballsPerGame}
-                onChange={setBallsPerGame}
-                min={0}
-                max={24}
-                step={1}
-              />
-
-              <NumberSlider
-                label="Cost of baseballs per dozen ($)"
-                value={costPerDozenBalls}
-                onChange={setCostPerDozenBalls}
-                min={0}
-                max={200}
-                step={1}
-                help={`≈ ${currency(perBallCost)} per ball • ${currency(baseballsCostPerGame)} per game`}
-              />
+              <NumberSlider label="Baseballs used per game" value={ballsPerGame} onChange={setBallsPerGame} min={0} max={24} step={1} />
+              <NumberSlider label="Cost of baseballs per dozen ($)" value={costPerDozenBalls} onChange={setCostPerDozenBalls} min={0} max={200} step={1} help={`≈ ${currency(perBallCost)} per ball • ${currency(baseballsCostPerGame)} per game`} />
             </div>
 
-            {/* Scheduling reference */}
-            <div className="mt-4 rounded-xl border border-gray-100 bg-gray-50 p-3 text-sm">
+            <div className="mt-4 rounded-xl border bg-gray-50 p-3 text-sm">
               <div className="flex flex-wrap gap-x-6 gap-y-1">
                 <div>Opponents per team: <span className="font-medium">{opponentsPerTeam}</span></div>
                 <div>Games per opponent (avg): <span className="font-medium">{gamesPerOpponentExact.toFixed(2)}</span></div>
               </div>
               {opponentsPerTeam > 0 && (
-                <div className="mt-1 text-gray-700">
+                <div className="mt-1">
                   Distribution (as even as possible): each team plays <span className="font-medium">{remainderOpponents}</span> opponents <span className="font-medium">{gamesPerOpponentFloor + 1}×</span> and <span className="font-medium">{opponentsPerTeam - remainderOpponents}</span> opponents <span className="font-medium">{gamesPerOpponentFloor}×</span>.
                 </div>
               )}
@@ -415,69 +489,35 @@ export default function BaseballLeagueCostEstimator() {
             </div>
           </div>
 
-          {/* Season Window */}
-          <div className="rounded-2xl border border-gray-200 bg-white p-5 shadow-sm">
+          <div className="rounded-2xl border bg-white p-5 shadow-sm">
             <h2 className="mb-4 text-lg font-semibold">Season Window</h2>
             <div className="grid grid-cols-1 items-end gap-4 sm:grid-cols-4">
               <div className="space-y-2">
-                <label className="text-sm font-medium text-gray-800">Start month</label>
-                <select
-                  className="w-full rounded-xl border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none"
-                  value={startMonth}
-                  onChange={(e) => setStartMonth(parseInt(e.target.value))}
-                >
-                  {months.map((m, i) => (
-                    <option key={m} value={i}>
-                      {m}
-                    </option>
-                  ))}
+                <label className="text-sm font-medium">Start month</label>
+                <select className="w-full rounded-xl border px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none" value={startMonth} onChange={(e) => setStartMonth(parseInt(e.target.value))}>
+                  {months.map((m, i) => (<option key={m} value={i}>{m}</option>))}
                 </select>
               </div>
               <div className="space-y-2">
-                <label className="text-sm font-medium text-gray-800">Start week</label>
-                <select
-                  className="w-full rounded-xl border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none"
-                  value={startWeek}
-                  onChange={(e) => setStartWeek(parseInt(e.target.value))}
-                >
-                  {[1, 2, 3, 4, 5].map((w) => (
-                    <option key={w} value={w}>
-                      {weekLabel(w)}
-                    </option>
-                  ))}
-                </select>
-              </div>
-
-              <div className="space-y-2">
-                <label className="text-sm font-medium text-gray-800">End month</label>
-                <select
-                  className="w-full rounded-xl border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none"
-                  value={endMonth}
-                  onChange={(e) => setEndMonth(parseInt(e.target.value))}
-                >
-                  {months.map((m, i) => (
-                    <option key={m} value={i}>
-                      {m}
-                    </option>
-                  ))}
+                <label className="text-sm font-medium">Start week</label>
+                <select className="w-full rounded-xl border px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none" value={startWeek} onChange={(e) => setStartWeek(parseInt(e.target.value))}>
+                  {[1,2,3,4,5].map((w) => (<option key={w} value={w}>{weekLabel(w)}</option>))}
                 </select>
               </div>
               <div className="space-y-2">
-                <label className="text-sm font-medium text-gray-800">End week</label>
-                <select
-                  className="w-full rounded-xl border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none"
-                  value={endWeek}
-                  onChange={(e) => setEndWeek(parseInt(e.target.value))}
-                >
-                  {[1, 2, 3, 4, 5].map((w) => (
-                    <option key={w} value={w}>
-                      {weekLabel(w)}
-                    </option>
-                  ))}
+                <label className="text-sm font-medium">End month</label>
+                <select className="w-full rounded-xl border px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none" value={endMonth} onChange={(e) => setEndMonth(parseInt(e.target.value))}>
+                  {months.map((m, i) => (<option key={m} value={i}>{m}</option>))}
+                </select>
+              </div>
+              <div className="space-y-2">
+                <label className="text-sm font-medium">End week</label>
+                <select className="w-full rounded-xl border px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none" value={endWeek} onChange={(e) => setEndWeek(parseInt(e.target.value))}>
+                  {[1,2,3,4,5].map((w) => (<option key={w} value={w}>{weekLabel(w)}</option>))}
                 </select>
               </div>
             </div>
-            <div className="mt-3 grid grid-cols-1 gap-2 text-sm text-gray-700 sm:grid-cols-2 lg:grid-cols-4">
+            <div className="mt-3 grid grid-cols-1 gap-2 text-sm sm:grid-cols-2 lg:grid-cols-4">
               <div><span className="text-gray-600">Approx. season length:</span> <span className="font-medium">{approxWeeks} weeks</span></div>
               <div><span className="text-gray-600">Games/week per team:</span> <span className="font-medium">{gamesPerWeekPerTeam.toFixed(2)}</span></div>
               <div><span className="text-gray-600">Games/week league-wide:</span> <span className="font-medium">{gamesPerWeekLeague.toFixed(2)}</span></div>
@@ -485,16 +525,10 @@ export default function BaseballLeagueCostEstimator() {
             </div>
           </div>
 
-          {/* Fields Table */}
-          <div className="rounded-2xl border border-gray-200 bg-white p-5 shadow-sm">
+          <div className="rounded-2xl border bg-white p-5 shadow-sm">
             <div className="mb-4 flex items-center justify-between">
-              <h2 className="text-lg font-semibold">Fields & Game Allocation</h2>
-              <button
-                onClick={addField}
-                className="rounded-xl bg-blue-600 px-3 py-1.5 text-sm font-medium text-white shadow hover:bg-blue-700"
-              >
-                + Add field
-              </button>
+              <h2 className="text-lg font-semibold">Fields & Game Allocation (Regular Season)</h2>
+              <button onClick={addField} className="rounded-xl bg-blue-600 text-white shadow hover:bg-blue-700">+ Add field</button>
             </div>
             <div className="overflow-x-auto">
               <table className="w-full table-auto">
@@ -508,151 +542,143 @@ export default function BaseballLeagueCostEstimator() {
                 </thead>
                 <tbody>
                   {fields.map((f) => (
-                    <tr key={f.id} className="border-t border-gray-100">
-                      <td className="p-2">
-                        <input
-                          className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none"
-                          value={f.name}
-                          onChange={(e) =>
-                            setFields((rows) => rows.map((r) => (r.id === f.id ? { ...r, name: e.target.value } : r)))
-                          }
-                        />
-                      </td>
-                      <td className="p-2">
-                        <input
-                          type="number"
-                          className="w-28 rounded-lg border border-gray-300 px-3 py-2 text-right text-sm focus:border-blue-500 focus:outline-none"
-                          min={0}
-                          max={100}
-                          step={1}
-                          value={f.pct}
-                          onChange={(e) =>
-                            setFields((rows) =>
-                              rows.map((r) => (r.id === f.id ? { ...r, pct: clamp(parseFloat(e.target.value || "0"), 0, 100) } : r))
-                            )
-                          }
-                        />
-                      </td>
-                      <td className="p-2">
-                        <input
-                          type="number"
-                          className="w-40 rounded-lg border border-gray-300 px-3 py-2 text-right text-sm focus:border-blue-500 focus:outline-none"
-                          min={0}
-                          step={1}
-                          value={f.costPerGame}
-                          onChange={(e) =>
-                            setFields((rows) =>
-                              rows.map((r) =>
-                                r.id === f.id
-                                  ? { ...r, costPerGame: clamp(parseFloat(e.target.value || "0"), 0, 10000) }
-                                  : r
-                              )
-                            )
-                          }
-                        />
-                      </td>
-                      <td className="p-2 text-right">
-                        <button
-                          onClick={() => removeField(f.id)}
-                          className="text-sm text-red-600 hover:underline"
-                        >
-                          Remove
-                        </button>
-                      </td>
+                    <tr key={f.id} className="border-t">
+                      <td className="p-2"><input className="w-full rounded-lg border px-3 py-2 text-sm focus:border-blue-500 focus:outline-none" value={f.name} onChange={(e) => setFields((rows) => rows.map((r) => (r.id === f.id ? { ...r, name: e.target.value } : r)))} /></td>
+                      <td className="p-2"><input type="number" className="w-28 rounded-lg border px-3 py-2 text-right text-sm focus:border-blue-500 focus:outline-none" min={0} max={100} step={1} value={f.pct} onChange={(e) => setFields((rows) => rows.map((r) => (r.id === f.id ? { ...r, pct: clamp(parseFloat(e.target.value || "0"), 0, 100) } : r)))} /></td>
+                      <td className="p-2"><input type="number" className="w-40 rounded-lg border px-3 py-2 text-right text-sm focus:border-blue-500 focus:outline-none" min={0} step={1} value={f.costPerGame} onChange={(e) => setFields((rows) => rows.map((r) => (r.id === f.id ? { ...r, costPerGame: clamp(parseFloat(e.target.value || "0"), 0, 10000) } : r)))} /></td>
+                      <td className="p-2 text-right"><button onClick={() => removeField(f.id)} className="text-sm text-red-600 hover:underline">Remove</button></td>
                     </tr>
                   ))}
                 </tbody>
                 <tfoot>
-                  <tr className="border-t border-gray-200 text-sm">
-                    <td className="p-2 font-medium text-gray-700">Totals</td>
-                    <td className="p-2 font-medium {pctWarning ? 'text-red-600' : 'text-gray-700'}">{fieldsPctSum}%</td>
-                    <td className="p-2 font-medium text-gray-700">—</td>
+                  <tr className="border-t text-sm">
+                    <td className="p-2 font-medium">Totals</td>
+                    <td className={`p-2 font-medium ${pctWarning ? 'text-red-600' : ''}`}>{fieldsPctSum}%</td>
+                    <td className="p-2 font-medium">—</td>
                     <td></td>
                   </tr>
                 </tfoot>
               </table>
             </div>
             {pctWarning && (
-              <div className="mt-3 rounded-xl border border-yellow-300 bg-yellow-50 px-3 py-2 text-sm text-yellow-900">
-                Heads up: your field allocation adds to {fieldsPctSum}%. Calculations will normalize
-                percentages to 100%.
+              <div className="mt-3 rounded-xl border bg-yellow-50 px-3 py-2 text-sm text-yellow-900">
+                Heads up: your field allocation adds to {fieldsPctSum}%. Calculations will normalize percentages to 100%.
               </div>
             )}
           </div>
+
+          <div className="rounded-2xl border p-5 shadow-sm">
+            <div className="mb-4 flex items-center justify-between">
+              <h2 className="text-lg font-semibold">Playoffs</h2>
+              <button onClick={addRound} className="rounded-xl bg-purple-600 text-white shadow hover:bg-purple-700">+ Add round</button>
+            </div>
+
+            <div className="space-y-6">
+              {playoffRounds.map((r, idx) => {
+                const totalPct = pctSum(r.fields);
+                const warn = totalPct !== 100;
+                const perBall = (Number(r.costPerDozenBalls) || 0) / 12;
+                const perGameBalls = (Number(r.ballsPerGame) || 0) * perBall;
+                return (
+                  <div key={r.id} className="rounded-2xl border p-4">
+                    <div className="mb-3 flex items-center justify-between">
+                      <div className="flex items-center gap-2">
+                        <input className="rounded-lg border px-3 py-2 text-sm font-medium focus:border-purple-500 focus:outline-none" value={r.name} onChange={(e) => updateRound(r.id, { name: e.target.value })} />
+                        <span className="text-xs">{`Round ${idx + 1}`}</span>
+                      </div>
+                      <button onClick={() => removeRound(r.id)} className="text-sm text-red-600 hover:underline">Remove round</button>
+                    </div>
+
+                    <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+                      <NumberSlider label="Total games in this round" value={r.games} onChange={(v) => updateRound(r.id, { games: v })} min={0} max={200} step={1} />
+                      <NumberSlider label="Umpires per game" value={r.umpiresPerGame} onChange={(v) => updateRound(r.id, { umpiresPerGame: v })} min={0} max={6} step={1} />
+                      <NumberSlider label="Cost per umpire per game ($)" value={r.costPerUmpPerGame} onChange={(v) => updateRound(r.id, { costPerUmpPerGame: v })} min={0} max={500} step={1} />
+                      <NumberSlider label="Baseballs per game" value={r.ballsPerGame} onChange={(v) => updateRound(r.id, { ballsPerGame: v })} min={0} max={36} step={1} />
+                      <NumberSlider label="Cost of baseballs per dozen ($)" value={r.costPerDozenBalls} onChange={(v) => updateRound(r.id, { costPerDozenBalls: v })} min={0} max={300} step={1} help={`≈ ${currency(perBall)} per ball • ${currency(perGameBalls)} per game`} />
+                    </div>
+
+                    <div className="mt-4 overflow-x-auto">
+                      <table className="w-full table-auto">
+                        <thead>
+                          <tr className="text-left text-sm">
+                            <th className="p-2">Field name</th>
+                            <th className="p-2">% of games</th>
+                            <th className="p-2">Cost per game ($)</th>
+                            <th className="p-2"></th>
+                          </tr>
+                        </thead>
+                        <tbody>
+                          {r.fields.map((f) => (
+                            <tr key={f.id} className="border-t">
+                              <td className="p-2"><input className="w-full rounded-lg border px-3 py-2 text-sm focus:border-purple-500 focus:outline-none" value={f.name} onChange={(e) => updateRoundField(r.id, f.id, { name: e.target.value })} /></td>
+                              <td className="p-2"><input type="number" className="w-28 rounded-lg border px-3 py-2 text-right text-sm focus:border-purple-500 focus:outline-none" min={0} max={100} step={1} value={f.pct} onChange={(e) => updateRoundField(r.id, f.id, { pct: clamp(parseFloat(e.target.value || "0"), 0, 100) })} /></td>
+                              <td className="p-2"><input type="number" className="w-40 rounded-lg border px-3 py-2 text-right text-sm focus:border-purple-500 focus:outline-none" min={0} step={1} value={f.costPerGame} onChange={(e) => updateRoundField(r.id, f.id, { costPerGame: clamp(parseFloat(e.target.value || "0"), 0, 10000) })} /></td>
+                              <td className="p-2 text-right"><button onClick={() => removeRoundField(r.id, f.id)} className="text-sm text-red-600 hover:underline">Remove</button></td>
+                            </tr>
+                          ))}
+                        </tbody>
+                        <tfoot>
+                          <tr className="border-t text-sm">
+                            <td className="p-2 font-medium">Totals</td>
+                            <td className="p-2 font-medium">{totalPct}%</td>
+                            <td className="p-2 font-medium">—</td>
+                            <td className="p-2 text-right"><button onClick={() => addRoundField(r.id)} className="text-sm text-purple-700 hover:underline">+ Add field</button></td>
+                          </tr>
+                        </tfoot>
+                      </table>
+                    </div>
+                    {warn && (
+                      <div className="mt-3 rounded-xl border bg-yellow-50 px-3 py-2 text-sm text-yellow-900">
+                        Heads up: field allocation adds to {totalPct}%. We'll normalize to 100%.
+                      </div>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+
+            <div className="mt-4 grid grid-cols-1 gap-3 rounded-xl bg-purple-50 p-3 text-sm sm:grid-cols-2 lg:grid-cols-4">
+              <div className="flex justify-between"><span>Playoff games (total)</span><span className="font-medium">{playoffTotals.games}</span></div>
+              <div className="flex justify-between"><span>Playoff field costs</span><span className="font-medium">{currency(playoffTotals.field)}</span></div>
+              <div className="flex justify-between"><span>Playoff baseballs</span><span className="font-medium">{currency(playoffTotals.balls)}</span></div>
+              <div className="flex justify-between"><span>Playoff umpires</span><span className="font-medium">{currency(playoffTotals.umps)}</span></div>
+            </div>
+          </div>
         </section>
 
-        {/* Right column: Fixed costs + Summary */}
         <section className="space-y-6">
-          {/* Fixed costs */}
-          <div className="rounded-2xl border border-gray-200 bg-white p-5 shadow-sm">
+          <div className="rounded-2xl border bg-white p-5 shadow-sm">
             <div className="mb-4 flex items-center justify-between">
               <h2 className="text-lg font-semibold">Fixed Costs</h2>
-              <button
-                onClick={addFixed}
-                className="rounded-xl bg-blue-600 px-3 py-1.5 text-sm font-medium text-white shadow hover:bg-blue-700"
-              >
-                + Add item
-              </button>
+              <button onClick={addFixed} className="rounded-xl bg-blue-600 text-white shadow hover:bg-blue-700">+ Add item</button>
             </div>
             <div className="space-y-3">
               {fixedCosts.map((fc) => (
                 <div key={fc.id} className="grid grid-cols-5 items-center gap-2">
-                  <input
-                    className="col-span-3 rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none"
-                    value={fc.name}
-                    onChange={(e) =>
-                      setFixedCosts((rows) => rows.map((r) => (r.id === fc.id ? { ...r, name: e.target.value } : r)))
-                    }
-                  />
-                  <input
-                    type="number"
-                    className="col-span-2 rounded-lg border border-gray-300 px-3 py-2 text-right text-sm focus:border-blue-500 focus:outline-none"
-                    min={0}
-                    step={1}
-                    value={fc.amount}
-                    onChange={(e) =>
-                      setFixedCosts((rows) =>
-                        rows.map((r) =>
-                          r.id === fc.id
-                            ? { ...r, amount: clamp(parseFloat(e.target.value || "0"), 0, 1_000_000) }
-                            : r
-                        )
-                      )
-                    }
-                  />
-                  <div className="col-span-5 flex justify-end">
-                    <button
-                      onClick={() => removeFixed(fc.id)}
-                      className="text-sm text-red-600 hover:underline"
-                    >
-                      Remove
-                    </button>
-                  </div>
+                  <input className="col-span-3 rounded-lg border px-3 py-2 text-sm focus:border-blue-500 focus:outline-none" value={fc.name} onChange={(e) => setFixedCosts((rows) => rows.map((r) => (r.id === fc.id ? { ...r, name: e.target.value } : r)))} />
+                  <input type="number" className="col-span-2 rounded-lg border px-3 py-2 text-right text-sm focus:border-blue-500 focus:outline-none" min={0} step={1} value={fc.amount} onChange={(e) => setFixedCosts((rows) => rows.map((r) => (r.id === fc.id ? { ...r, amount: clamp(parseFloat(e.target.value || "0"), 0, 1_000_000) } : r)))} />
+                  <div className="col-span-5 flex justify-end"><button onClick={() => removeFixed(fc.id)} className="text-sm text-red-600 hover:underline">Remove</button></div>
                 </div>
               ))}
             </div>
             <div className="mt-4 flex items-center justify-between border-t pt-3 text-sm">
-              <div className="font-medium text-gray-700">Fixed cost total</div>
+              <div className="font-medium">Fixed cost total</div>
               <div className="font-semibold">{currency(fixedCostTotal)}</div>
             </div>
           </div>
 
-          {/* Summary */}
-          <div className="rounded-2xl border border-gray-200 bg-white p-5 shadow-sm">
+          <div className="rounded-2xl border bg-white p-5 shadow-sm">
             <h2 className="mb-4 text-lg font-semibold">Summary</h2>
             <div className="space-y-2 text-sm">
-              <div className="flex justify-between"><span>Umpire costs</span><span className="font-medium">{currency(umpireCostTotal)}</span></div>
-              <div className="flex justify-between"><span>Field rental costs</span><span className="font-medium">{currency(fieldRentalCostTotal)}</span></div>
-              <div className="flex justify-between"><span>Baseballs (per-game consumables)</span><span className="font-medium">{currency(baseballsCostTotal)}</span></div>
+              <div className="flex justify-between"><span>Umpire costs (regular)</span><span className="font-medium">{currency(umpireCostTotal)}</span></div>
+              <div className="flex justify-between"><span>Umpire costs (playoffs)</span><span className="font-medium">{currency(playoffUmpireCostTotal)}</span></div>
+              <div className="flex justify-between"><span>Field rental (regular)</span><span className="font-medium">{currency(fieldRentalCostTotal)}</span></div>
+              <div className="flex justify-between"><span>Field rental (playoffs)</span><span className="font-medium">{currency(playoffTotals.field)}</span></div>
+              <div className="flex justify-between"><span>Baseballs (regular)</span><span className="font-medium">{currency(baseballsCostTotal)}</span></div>
+              <div className="flex justify-between"><span>Baseballs (playoffs)</span><span className="font-medium">{currency(playoffTotals.balls)}</span></div>
               <div className="flex justify-between"><span>Fixed costs</span><span className="font-medium">{currency(fixedCostTotal)}</span></div>
-              <div className="flex justify-between border-t pt-2">
-                <span>League costs subtotal</span>
-                <span className="font-medium">{currency(leagueCostsTotal)}</span>
-              </div>
-              <div className="flex justify-between border-t pt-2 text-base">
-                <span className="font-semibold">Grand total</span>
-                <span className="font-bold">{currency(grandTotal)}</span>
-              </div>
+              <div className="flex justify-between border-t pt-2"><span>League costs subtotal</span><span className="font-medium">{currency(leagueCostsTotal)}</span></div>
+              <div className="flex justify-between border-t pt-2 text-base"><span className="font-semibold">Grand total</span><span className="font-bold">{currency(grandTotal)}</span></div>
             </div>
             <div className="mt-4 space-y-2 rounded-xl bg-gray-50 p-3 text-sm">
               <div className="flex justify-between"><span>Per team to league</span><span className="font-semibold">{currency(costPerTeamLeague)}</span></div>
@@ -664,19 +690,17 @@ export default function BaseballLeagueCostEstimator() {
             <div className="mt-4 text-xs text-gray-500">
               Notes:
               <ul className="list-disc pl-5">
-                <li>League total games = teams × games per team ÷ 2.</li>
-                <li>Field cost = total games × % allocation × per-field cost per game.</li>
-                <li>Percentages are normalized if they don't add up to 100%.</li>
-                <li>Season window drives weekly rates only; it doesn't alter totals.</li>
+                <li>Regular-season league games = teams × games per team ÷ 2.</li>
+                <li>Field cost = total games × % allocation × per-field cost per game (normalized to 100%).</li>
+                <li>Playoff rounds accept total games per round. Costs are computed per round then summed.</li>
+                <li>Autosaves to your browser (localStorage). Use Export for backups or sharing.</li>
               </ul>
             </div>
           </div>
         </section>
       </div>
 
-      <footer className="mt-8 text-center text-xs text-gray-500">
-        Built for quick budgeting. Adjust anything and the math updates instantly.
-      </footer>
+      <footer className="mt-8 text-center text-xs text-gray-500">Built for quick budgeting. Adjust anything and the math updates instantly.</footer>
     </div>
   );
 }