initial commit
This commit is contained in:
491
main.js
Normal file
491
main.js
Normal file
@@ -0,0 +1,491 @@
|
||||
import React, { useMemo, useState } from "react";
|
||||
|
||||
// --- Helpers ---------------------------------------------------------------
|
||||
const currency = (n: number) =>
|
||||
(isFinite(n) ? n : 0).toLocaleString(undefined, {
|
||||
style: "currency",
|
||||
currency: "USD",
|
||||
maximumFractionDigits: 0,
|
||||
});
|
||||
|
||||
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`;
|
||||
|
||||
const months = [
|
||||
"January",
|
||||
"February",
|
||||
"March",
|
||||
"April",
|
||||
"May",
|
||||
"June",
|
||||
"July",
|
||||
"August",
|
||||
"September",
|
||||
"October",
|
||||
"November",
|
||||
"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 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));
|
||||
}
|
||||
|
||||
// Generic labeled number+slider input pair
|
||||
function NumberSlider({
|
||||
label,
|
||||
value,
|
||||
onChange,
|
||||
min = 0,
|
||||
max = 100,
|
||||
step = 1,
|
||||
help,
|
||||
id,
|
||||
}: {
|
||||
label: string;
|
||||
value: number;
|
||||
onChange: (v: number) => void;
|
||||
min?: number;
|
||||
max?: number;
|
||||
step?: number;
|
||||
help?: string;
|
||||
id?: string;
|
||||
}) {
|
||||
const sliderId = id ?? label.replace(/\s+/g, "-").toLowerCase();
|
||||
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}
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
inputMode="decimal"
|
||||
className="w-36 rounded-xl border border-gray-300 px-3 py-1 text-right shadow-sm focus:border-blue-500 focus:outline-none"
|
||||
value={Number.isFinite(value) ? value : 0}
|
||||
min={min}
|
||||
max={max}
|
||||
step={step}
|
||||
onChange={(e) => onChange(clamp(parseFloat(e.target.value || "0"), min, max))}
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
id={sliderId}
|
||||
type="range"
|
||||
min={min}
|
||||
max={max}
|
||||
step={step}
|
||||
className="w-full accent-blue-600"
|
||||
value={Number.isFinite(value) ? value : 0}
|
||||
onChange={(e) => onChange(clamp(parseFloat(e.target.value || "0"), min, max))}
|
||||
/>
|
||||
{help && <p className="text-xs text-gray-500">{help}</p>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// --- Main App --------------------------------------------------------------
|
||||
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: "Website/Registration", amount: 600 },
|
||||
]);
|
||||
|
||||
// Variables
|
||||
const [teams, setTeams] = useState(12);
|
||||
const [totalGames, setTotalGames] = useState(120); // total across league
|
||||
const [umpiresPerGame, setUmpiresPerGame] = useState(2);
|
||||
const [costPerUmpPerGame, setCostPerUmpPerGame] = useState(70);
|
||||
const [avgTeamSize, setAvgTeamSize] = useState(12);
|
||||
|
||||
// Season window
|
||||
const [startMonth, setStartMonth] = useState(4); // 0-indexed; May
|
||||
const [startWeek, setStartWeek] = useState(1);
|
||||
const [endMonth, setEndMonth] = useState(7); // August
|
||||
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 }>>([
|
||||
{ id: crypto.randomUUID(), name: "Main Park #1", pct: 60, costPerGame: 40 },
|
||||
{ id: crypto.randomUUID(), name: "Riverside #2", pct: 40, costPerGame: 25 },
|
||||
]);
|
||||
|
||||
// Derived calculations
|
||||
const fixedCostTotal = useMemo(
|
||||
() => fixedCosts.reduce((sum, fc) => sum + (Number(fc.amount) || 0), 0),
|
||||
[fixedCosts]
|
||||
);
|
||||
|
||||
const umpireCostTotal = useMemo(
|
||||
() => (totalGames || 0) * (umpiresPerGame || 0) * (costPerUmpPerGame || 0),
|
||||
[totalGames, umpiresPerGame, costPerUmpPerGame]
|
||||
);
|
||||
|
||||
const fieldsPctSum = useMemo(() => fields.reduce((s, f) => s + (Number(f.pct) || 0), 0), [fields]);
|
||||
|
||||
const fieldRentalCostTotal = useMemo(() => {
|
||||
const totalPct = fieldsPctSum || 100;
|
||||
const normalized = fields.map((f) => ({ ...f, w: (Number(f.pct) || 0) / totalPct }));
|
||||
return normalized.reduce(
|
||||
(sum, f) => sum + (totalGames || 0) * f.w * (Number(f.costPerGame) || 0),
|
||||
0
|
||||
);
|
||||
}, [fields, fieldsPctSum, totalGames]);
|
||||
|
||||
const grandTotal = fixedCostTotal + umpireCostTotal + fieldRentalCostTotal;
|
||||
|
||||
const costPerTeam = useMemo(() => (teams > 0 ? grandTotal / teams : 0), [grandTotal, teams]);
|
||||
const costPerPlayer = useMemo(
|
||||
() => (teams > 0 && avgTeamSize > 0 ? grandTotal / (teams * avgTeamSize) : 0),
|
||||
[grandTotal, teams, avgTeamSize]
|
||||
);
|
||||
|
||||
const approxWeeks = useMemo(
|
||||
() => approxWeeksBetween(startMonth, startWeek, endMonth, endWeek),
|
||||
[startMonth, startWeek, endMonth, endWeek]
|
||||
);
|
||||
|
||||
// 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));
|
||||
|
||||
const addField = () =>
|
||||
setFields((x) => [
|
||||
...x,
|
||||
{ id: crypto.randomUUID(), name: `Field ${x.length + 1}`, pct: 0, costPerGame: 0 },
|
||||
]);
|
||||
const removeField = (id: string) => setFields((x) => x.filter((r) => r.id !== id));
|
||||
|
||||
const pctWarning = fieldsPctSum !== 100;
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-6xl p-6">
|
||||
<header className="mb-6 flex items-center justify-between">
|
||||
<h1 className="text-2xl font-bold">Baseball League Cost Estimator</h1>
|
||||
<div className="text-sm text-gray-500">Single-page app • Tailwind CSS</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">
|
||||
<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="Total number of games"
|
||||
value={totalGames}
|
||||
onChange={setTotalGames}
|
||||
min={0}
|
||||
max={1000}
|
||||
step={1}
|
||||
help="League-wide total across the season"
|
||||
/>
|
||||
|
||||
<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="Average team size (players)"
|
||||
value={avgTeamSize}
|
||||
onChange={setAvgTeamSize}
|
||||
min={1}
|
||||
max={30}
|
||||
step={1}
|
||||
help="Used for per-player cost"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Season Window */}
|
||||
<div className="rounded-2xl border border-gray-200 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>
|
||||
))}
|
||||
</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>
|
||||
))}
|
||||
</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>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<p className="mt-3 text-sm text-gray-600">
|
||||
Approx. season length: <span className="font-medium">{approxWeeks} weeks</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Fields Table */}
|
||||
<div className="rounded-2xl border border-gray-200 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>
|
||||
</div>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full table-auto">
|
||||
<thead>
|
||||
<tr className="text-left text-sm text-gray-500">
|
||||
<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>
|
||||
{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>
|
||||
))}
|
||||
</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>
|
||||
<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>
|
||||
)}
|
||||
</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="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>
|
||||
</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>
|
||||
</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-semibold">{currency(fixedCostTotal)}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Summary */}
|
||||
<div className="rounded-2xl border border-gray-200 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>Fixed costs</span><span className="font-medium">{currency(fixedCostTotal)}</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</span><span className="font-semibold">{currency(costPerTeam)}</span></div>
|
||||
<div className="flex justify-between"><span>Per player (avg team size {avgTeamSize})</span><span className="font-semibold">{currency(costPerPlayer)}</span></div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 text-xs text-gray-500">
|
||||
Notes:
|
||||
<ul className="list-disc pl-5">
|
||||
<li>Field cost is computed as: 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 is informational and does not alter calculations.</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>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user