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.
This commit is contained in:
566
src/App.tsx
566
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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user