brackt/app/routes/admin.sports-seasons.$id.elo-ratings.tsx
2026-05-08 12:29:39 -07:00

706 lines
31 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import { Form, redirect, useLoaderData, useActionData, useNavigation } from 'react-router';
import type { Route } from './+types/admin.sports-seasons.$id.elo-ratings';
import { logger } from '~/lib/logger';
import { findSportsSeasonById, updateSportsSeason } from '~/models/sports-season';
import { findParticipantsBySportsSeasonId } from '~/models/season-participant';
import {
getAllParticipantEVsForSeason,
batchSaveSourceElos,
batchUpsertParticipantEVs,
} from '~/models/participant-expected-value';
import { batchUpsertParticipantEvSnapshots } from '~/models/ev-snapshot';
import { getSimulator, type SimulatorType } from '~/services/simulations/registry';
import { calculateEV } from '~/services/ev-calculator';
import { DEFAULT_SCORING_RULES } from '~/lib/scoring-types';
import { recalculateStandings } from '~/models/scoring-calculator';
import { database } from '~/database/context';
import * as schema from '~/database/schema';
import { eq } from 'drizzle-orm';
import { Button } from '~/components/ui/button';
import { Input } from '~/components/ui/input';
import { Label } from '~/components/ui/label';
import { Textarea } from '~/components/ui/textarea';
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from '~/components/ui/card';
import { useState } from 'react';
import { Loader2, CheckCircle2, AlertCircle } from 'lucide-react';
import { normalizeName } from '~/lib/fuzzy-match';
import { getSimulatorConfig, supportsProjectedWins } from '~/services/simulations/simulator-config';
import {
eloToProjectedTablePoints,
eloToProjectedWins,
projectedTablePointsToElo,
projectedWinsToElo,
} from '~/services/probability-engine';
// Simulator types that use worldRanking in addition to sourceElo
const RANKING_SIMULATOR_TYPES = new Set(['darts_bracket', 'cs2_major_qualifying_points', 'college_hockey_bracket']);
const RANK_ONLY_SIMULATOR_TYPES = new Set(['college_hockey_bracket']);
function rankingLabel(simulatorType: string | null | undefined): string {
if (simulatorType === 'cs2_major_qualifying_points') return 'HLTV Rank';
if (simulatorType === 'college_hockey_bracket') return 'NPI Rank';
return 'World Rank';
}
export function meta({ data }: Route.MetaArgs): Route.MetaDescriptors {
return [{ title: `Elo Ratings — ${data?.sportsSeason?.name ?? "Sports Season"} - Brackt Admin` }];
}
export async function loader({ params }: Route.LoaderArgs) {
const sportsSeasonId = params.id;
const sportsSeason = await findSportsSeasonById(sportsSeasonId);
if (!sportsSeason) {
throw new Response('Sports season not found', { status: 404 });
}
const participants = await findParticipantsBySportsSeasonId(sportsSeasonId);
const existingEVs = await getAllParticipantEVsForSeason(sportsSeasonId);
const existingData: Record<string, { elo: number | null; ranking: number | null }> = {};
for (const ev of existingEVs) {
existingData[ev.participantId] = {
elo: ev.sourceElo ?? null,
ranking: ev.worldRanking ?? null,
};
}
const usesRanking = RANKING_SIMULATOR_TYPES.has(sportsSeason.sport?.simulatorType ?? '');
const simulatorConfig = sportsSeason.sport?.simulatorType
? getSimulatorConfig(sportsSeason.sport.simulatorType as SimulatorType)
: null;
const canUseProjectedWins = sportsSeason.sport?.simulatorType
? supportsProjectedWins(sportsSeason.sport.simulatorType as SimulatorType)
: false;
return { sportsSeason, participants, existingData, usesRanking, simulatorConfig, canUseProjectedWins };
}
interface ActionData {
success?: boolean;
message?: string;
}
export async function action({ request, params }: Route.ActionArgs) {
const sportsSeasonId = params.id;
const formData = await request.formData();
const sportsSeason = await findSportsSeasonById(sportsSeasonId);
if (!sportsSeason) {
return { success: false, message: 'Sports season not found' };
}
const participants = await findParticipantsBySportsSeasonId(sportsSeasonId);
const simulatorType = sportsSeason.sport?.simulatorType ?? '';
const usesRanking = RANKING_SIMULATOR_TYPES.has(simulatorType);
const allowsRankOnly = RANK_ONLY_SIMULATOR_TYPES.has(simulatorType);
const rawMode = formData.get('inputMode');
const inputMode = rawMode === 'projectedWins' ? 'projectedWins' : 'elo';
const eloInputs: Array<{ participantId: string; sportsSeasonId: string; sourceElo: number | null; worldRanking?: number | null }> = [];
if (inputMode === 'projectedWins' && sportsSeason.sport?.simulatorType) {
const config = getSimulatorConfig(sportsSeason.sport.simulatorType as SimulatorType);
if (!config) {
return { success: false, message: 'This sport does not support projection input.' };
}
for (const participant of participants) {
const winsVal = formData.get(`wins_${participant.id}`) as string;
if (winsVal && winsVal.trim() !== '') {
const projectedWins = parseFloat(winsVal);
const projectionMax = config.projectionInput === 'tablePoints' ? config.seasonGames * 3 : config.seasonGames;
if (!isNaN(projectedWins) && projectedWins >= 0 && projectedWins <= projectionMax) {
const elo = config.projectionInput === 'tablePoints'
? projectedTablePointsToElo(projectedWins, config.seasonGames, config.parityFactor, config.averageOpponentElo)
: projectedWinsToElo(projectedWins, config.seasonGames, config.parityFactor, config.averageOpponentElo);
eloInputs.push({ participantId: participant.id, sportsSeasonId, sourceElo: elo });
}
}
}
} else {
for (const participant of participants) {
const eloVal = formData.get(`elo_${participant.id}`) as string;
const rankVal = formData.get(`rank_${participant.id}`) as string;
const elo = eloVal && eloVal.trim() !== '' ? Number(eloVal) : null;
const ranking = rankVal && rankVal.trim() !== '' ? Number(rankVal) : null;
const validElo = elo !== null && !isNaN(elo) && elo > 0;
const validRanking = ranking !== null && !isNaN(ranking) && ranking > 0;
if (validElo || (usesRanking && allowsRankOnly && validRanking)) {
if (usesRanking) {
eloInputs.push({
participantId: participant.id,
sportsSeasonId,
sourceElo: validElo ? elo : null,
worldRanking: validRanking ? ranking : null,
});
} else if (validElo) {
eloInputs.push({ participantId: participant.id, sportsSeasonId, sourceElo: elo });
}
}
}
}
if (eloInputs.length === 0) {
return { success: false, message: inputMode === 'projectedWins'
? 'Please enter projections for at least one participant'
: allowsRankOnly
? 'Please enter an Elo rating or NPI rank for at least one participant'
: 'Please enter an Elo rating for at least one participant' };
}
if (!sportsSeason.sport?.simulatorType) {
return { success: false, message: 'This sport has no simulator type configured. Set one on the sport in the admin panel.' };
}
if (sportsSeason.simulationStatus === 'running') {
return { success: false, message: 'A simulation is already running. Please wait.' };
}
await batchSaveSourceElos(eloInputs);
await updateSportsSeason(sportsSeasonId, { simulationStatus: 'running' });
try {
const simulator = getSimulator(sportsSeason.sport.simulatorType as SimulatorType);
const results = await simulator.simulate(sportsSeasonId);
if (results.length === 0) {
throw new Error('Simulation returned no results.');
}
const simulatedIds = new Set(results.map(r => r.participantId));
const ZERO_PROBS = {
probFirst: 0, probSecond: 0, probThird: 0, probFourth: 0,
probFifth: 0, probSixth: 0, probSeventh: 0, probEighth: 0,
};
const evInputs = [
...results.map(r => ({
participantId: r.participantId,
sportsSeasonId,
probabilities: r.probabilities,
scoringRules: DEFAULT_SCORING_RULES,
source: 'elo_simulation' as const,
})),
...participants
.filter(p => !simulatedIds.has(p.id))
.map(p => ({
participantId: p.id,
sportsSeasonId,
probabilities: ZERO_PROBS,
scoringRules: DEFAULT_SCORING_RULES,
source: 'elo_simulation' as const,
})),
];
await batchUpsertParticipantEVs(evInputs);
const seasonSports = await database().query.seasonSports.findMany({
where: eq(schema.seasonSports.sportsSeasonId, sportsSeasonId),
});
await Promise.all(seasonSports.map(({ seasonId }) => recalculateStandings(seasonId)));
const today = new Date().toISOString().slice(0, 10);
await batchUpsertParticipantEvSnapshots(
results.map(r => ({
participantId: r.participantId,
sportsSeasonId,
snapshotDate: today,
probFirst: r.probabilities.probFirst,
probSecond: r.probabilities.probSecond,
probThird: r.probabilities.probThird,
probFourth: r.probabilities.probFourth,
probFifth: r.probabilities.probFifth,
probSixth: r.probabilities.probSixth,
probSeventh: r.probabilities.probSeventh,
probEighth: r.probabilities.probEighth,
calculatedEV: calculateEV(r.probabilities, DEFAULT_SCORING_RULES),
source: r.source,
}))
);
await updateSportsSeason(sportsSeasonId, { simulationStatus: 'idle' });
} catch (error) {
await updateSportsSeason(sportsSeasonId, { simulationStatus: 'failed' });
logger.error('Error running simulation:', error);
return {
success: false,
message: error instanceof Error ? error.message : 'Simulation failed',
};
}
return redirect(`/admin/sports-seasons/${sportsSeasonId}/expected-values`);
}
export default function AdminSportsSeasonEloRatings() {
const { sportsSeason, participants, existingData, usesRanking, simulatorConfig, canUseProjectedWins } = useLoaderData<typeof loader>();
const actionData = useActionData<ActionData>();
const navigation = useNavigation();
const [inputMode, setInputMode] = useState<'elo' | 'projectedWins'>('elo');
const projectionLabel = simulatorConfig?.projectionInput === 'tablePoints' ? 'Projected Points' : 'Projected Wins';
const projectionUnit = simulatorConfig?.projectionInput === 'tablePoints' ? 'points' : 'wins';
const projectionMax = simulatorConfig
? simulatorConfig.projectionInput === 'tablePoints'
? simulatorConfig.seasonGames * 3
: simulatorConfig.seasonGames
: 0;
const [eloValues, setEloValues] = useState<Record<string, string>>(() => {
const initial: Record<string, string> = {};
participants.forEach(p => {
const d = existingData[p.id];
if (d?.elo !== null && d?.elo !== undefined) initial[p.id] = d.elo.toString();
});
return initial;
});
const [rankValues, setRankValues] = useState<Record<string, string>>(() => {
const initial: Record<string, string> = {};
participants.forEach(p => {
const d = existingData[p.id];
if (d?.ranking !== null && d?.ranking !== undefined) initial[p.id] = d.ranking.toString();
});
return initial;
});
const [winsValues, setWinsValues] = useState<Record<string, string>>(() => {
const initial: Record<string, string> = {};
if (simulatorConfig) {
participants.forEach(p => {
const d = existingData[p.id];
if (d?.elo !== null && d?.elo !== undefined) {
initial[p.id] = (simulatorConfig.projectionInput === 'tablePoints'
? eloToProjectedTablePoints(d.elo, simulatorConfig.seasonGames, simulatorConfig.parityFactor, simulatorConfig.averageOpponentElo)
: eloToProjectedWins(d.elo, simulatorConfig.seasonGames, simulatorConfig.parityFactor, simulatorConfig.averageOpponentElo)
).toFixed(1);
}
});
}
return initial;
});
const [bulkText, setBulkText] = useState('');
const [parseResults, setParseResults] = useState<{
matched: Array<{ participantId: string; name: string; elo: number | null; ranking: number | null; inputName: string }>;
unmatched: Array<{ inputName: string; elo: number | null; ranking: number | null }>;
} | null>(null);
function findParticipantMatch(inputName: string) {
const normalizedInput = normalizeName(inputName);
const normalized = participants.map(p => ({ p, n: normalizeName(p.name) }));
const exact = normalized.find(({ n }) => n === normalizedInput);
if (exact) return exact.p;
const contains = normalized.find(({ n }) => n.includes(normalizedInput) || normalizedInput.includes(n));
if (contains) return contains.p;
const inputWords = normalizedInput.split(' ').filter(w => w.length > 2);
const overlap = normalized.find(({ n }) => {
const pWords = n.split(' ').filter(w => w.length > 2);
const shared = inputWords.filter(w => pWords.includes(w));
return shared.length > 0 && shared.length >= Math.min(inputWords.length, pWords.length) * 0.5;
});
return overlap?.p ?? null;
}
function parseBulkText() {
const lines = bulkText.split('\n');
const matched: Array<{ participantId: string; name: string; elo: number | null; ranking: number | null; inputName: string }> = [];
const unmatched: Array<{ inputName: string; elo: number | null; ranking: number | null }> = [];
const seen = new Set<string>();
for (const line of lines) {
const trimmed = line.trim();
if (!trimmed) continue;
if (inputMode === 'projectedWins' && simulatorConfig) {
const match = /^(.+?)[\s,:\t]+(\d+(?:\.\d+)?)\s*$/.exec(trimmed);
if (!match) continue;
const inputName = match[1].trim();
const projectedWins = parseFloat(match[2]);
if (isNaN(projectedWins) || projectedWins < 0 || projectedWins > projectionMax) continue;
const elo = simulatorConfig.projectionInput === 'tablePoints'
? projectedTablePointsToElo(projectedWins, simulatorConfig.seasonGames, simulatorConfig.parityFactor, simulatorConfig.averageOpponentElo)
: projectedWinsToElo(projectedWins, simulatorConfig.seasonGames, simulatorConfig.parityFactor, simulatorConfig.averageOpponentElo);
const participant = findParticipantMatch(inputName);
if (participant && !seen.has(participant.id)) {
seen.add(participant.id);
matched.push({ participantId: participant.id, name: participant.name, elo, ranking: null, inputName });
} else if (!participant) {
unmatched.push({ inputName, elo, ranking: null });
}
} else {
const match = usesRanking
? /^(.+?)[\s,:\t]+(\d{1,5})(?:[\s,:\t]+(\d{1,3}))?\s*$/.exec(trimmed)
: /^(.+?)[\s,:\t]+(\d{3,5})\s*$/.exec(trimmed);
if (!match) continue;
const inputName = match[1].trim();
const firstNumber = parseInt(match[2], 10);
const parsedAsRankOnly = usesRanking && allowsRankOnly && !match[3] && firstNumber < 500;
const elo = parsedAsRankOnly ? null : firstNumber;
const ranking = parsedAsRankOnly
? firstNumber
: usesRanking && match[3]
? parseInt(match[3], 10)
: null;
const validElo = elo !== null && !isNaN(elo) && elo >= 500 && elo <= 5000;
const validRanking = ranking !== null && !isNaN(ranking) && ranking > 0;
if (!validElo && !(allowsRankOnly && validRanking)) continue;
const participant = findParticipantMatch(inputName);
if (participant && !seen.has(participant.id)) {
seen.add(participant.id);
matched.push({ participantId: participant.id, name: participant.name, elo, ranking, inputName });
} else if (!participant) {
unmatched.push({ inputName, elo, ranking });
}
}
}
setParseResults({ matched, unmatched });
}
function applyMatches() {
if (!parseResults) return;
const newElos = { ...eloValues };
const newRanks = { ...rankValues };
const newWins = { ...winsValues };
for (const m of parseResults.matched) {
if (m.elo !== null) newElos[m.participantId] = m.elo.toString();
if (m.ranking !== null) newRanks[m.participantId] = m.ranking.toString();
if (inputMode === 'projectedWins' && simulatorConfig && m.elo !== null) {
newWins[m.participantId] = (simulatorConfig.projectionInput === 'tablePoints'
? eloToProjectedTablePoints(m.elo, simulatorConfig.seasonGames, simulatorConfig.parityFactor, simulatorConfig.averageOpponentElo)
: eloToProjectedWins(m.elo, simulatorConfig.seasonGames, simulatorConfig.parityFactor, simulatorConfig.averageOpponentElo)
).toFixed(1);
}
}
setEloValues(newElos);
setRankValues(newRanks);
setWinsValues(newWins);
setParseResults(null);
setBulkText('');
}
const isSubmitting = navigation.state === 'submitting';
const simulatorType = sportsSeason.sport?.simulatorType ?? null;
const rankLabel = rankingLabel(simulatorType);
const allowsRankOnly = RANK_ONLY_SIMULATOR_TYPES.has(simulatorType ?? '');
const participantLabel = simulatorType === 'college_hockey_bracket' ? 'Team' : 'Player';
// When ranking is available, sort by rank ascending, then unranked alphabetically
const sortedParticipants = usesRanking
? [...participants].toSorted((a, b) => {
const rankA = rankValues[a.id] ? parseInt(rankValues[a.id], 10) : null;
const rankB = rankValues[b.id] ? parseInt(rankValues[b.id], 10) : null;
if (rankA !== null && rankB !== null) return rankA - rankB;
if (rankA !== null) return -1;
if (rankB !== null) return 1;
return a.name.localeCompare(b.name);
})
: participants;
return (
<div className="container mx-auto py-8">
<div className="mb-8">
<h1 className="text-3xl font-bold mb-2">Elo Ratings</h1>
<p className="text-muted-foreground">
{sportsSeason.sport.name} {sportsSeason.name}
</p>
</div>
{/* Input Mode Toggle */}
{canUseProjectedWins && !usesRanking && (
<div className="mb-6 flex gap-2">
<Button
type="button"
variant={inputMode === 'elo' ? 'default' : 'outline'}
onClick={() => setInputMode('elo')}
>
Elo Ratings
</Button>
<Button
type="button"
variant={inputMode === 'projectedWins' ? 'default' : 'outline'}
onClick={() => setInputMode('projectedWins')}
>
{projectionLabel}
</Button>
</div>
)}
{/* Bulk Import */}
<Card className="mb-6">
<CardHeader>
<CardTitle>Bulk Import</CardTitle>
<CardDescription>
{inputMode === 'projectedWins' && simulatorConfig ? (
<>
Paste projected season {projectionUnit} one per line. Format: <code>Team Name, {simulatorConfig.projectionInput === 'tablePoints' ? '76.5' : '15.6'}</code>.
Projections are automatically converted to Elo ratings using {simulatorConfig.seasonGames} total games
and parity factor {simulatorConfig.parityFactor}. Names are fuzzy-matched to participants.
</>
) : usesRanking ? (
<>
Paste one entry per line. Format:{' '}
{allowsRankOnly ? (
<>Use <code>Name, {rankLabel}</code> or <code>Name, Elo, {rankLabel}</code>. Elo is optional when NPI rank is present.</>
) : (
<>Use <code>Name, Elo, {rankLabel}</code> (ranking is optional omit it and the simulator will use Elo order for seeding).</>
)}{' '}
Names are fuzzy-matched to participants.
</>
) : (
<>
Paste Elo ratings one per line. Format: <code>Player Name, 2450</code>. Player names
are fuzzy-matched to participants.
</>
)}
</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<Textarea
placeholder={
inputMode === 'projectedWins'
? simulatorConfig?.projectionInput === 'tablePoints'
? `Team Name, 76.5\nTeam Name, 68.0\nTeam Name, 54.5`
: `Team Name, 15.6\nTeam Name, 14.5\nTeam Name, 13.8`
: usesRanking
? simulatorType === 'college_hockey_bracket'
? `Denver, 1\nBoston College, 2\nMichigan State, 1650, 3`
: simulatorType === 'cs2_major_qualifying_points'
? `Natus Vincere, 1850, 1\nFaZe Clan, 1820, 2\nVitality, 1810, 3`
: `Luke Littler, 2099, 1\nMichael van Gerwen, 1950, 2\nLuke Humphries, 1947, 3`
: `Judd Trump, 2594
Ronnie O'Sullivan, 2441
Mark Selby, 2432`
}
value={bulkText}
onChange={e => { setBulkText(e.target.value); setParseResults(null); }}
rows={8}
className="font-mono text-sm"
/>
<Button type="button" variant="outline" onClick={parseBulkText} disabled={!bulkText.trim()}>
Parse Ratings
</Button>
{parseResults && (
<div className="space-y-3">
{parseResults.matched.length > 0 && (
<div>
<div className="flex items-center gap-2 text-sm font-medium text-emerald-400 mb-2">
<CheckCircle2 className="h-4 w-4" />
Matched ({parseResults.matched.length})
</div>
<div className="rounded-md border border-emerald-500/30 bg-emerald-500/10 divide-y divide-emerald-500/20 text-sm">
{parseResults.matched.map(m => (
<div key={m.participantId} className="flex justify-between px-3 py-1.5">
<span className="text-muted-foreground">{m.inputName}</span>
<span className="font-medium">
{m.name} &rarr; {m.elo !== null ? `Elo ${m.elo}` : 'No Elo'}
{usesRanking && m.ranking !== null ? `, ${rankLabel} #${m.ranking}` : ''}
</span>
</div>
))}
</div>
</div>
)}
{parseResults.unmatched.length > 0 && (
<div>
<div className="flex items-center gap-2 text-sm font-medium text-amber-700 mb-2">
<AlertCircle className="h-4 w-4" />
Not matched ({parseResults.unmatched.length}) enter manually below
</div>
<div className="rounded-md border border-amber-200 bg-amber-50 divide-y divide-amber-100 text-sm">
{parseResults.unmatched.map(u => (
<div key={u.inputName} className="flex justify-between px-3 py-1.5">
<span>{u.inputName}</span>
<span className="font-medium">
{u.elo !== null ? `Elo ${u.elo}` : 'No Elo'}
{usesRanking && u.ranking !== null ? `, ${rankLabel} #${u.ranking}` : ''}
</span>
</div>
))}
</div>
</div>
)}
{parseResults.matched.length > 0 && (
<Button type="button" onClick={applyMatches}>
Apply {parseResults.matched.length} matched ratings to form
</Button>
)}
</div>
)}
</CardContent>
</Card>
<div className="grid gap-6 lg:grid-cols-2">
<Card>
<CardHeader>
<CardTitle>
{inputMode === 'projectedWins'
? `${projectionLabel} (out of ${projectionMax || '?'})`
: usesRanking
? `${participantLabel} Elo${allowsRankOnly ? ' (optional)' : ''} & ${rankLabel}s`
: `${participantLabel} Elo Ratings`}
</CardTitle>
<CardDescription>
{inputMode === 'projectedWins'
? `Enter each team's projected total season ${projectionUnit}. Converted to Elo automatically. Saving will run the simulation and update expected values.`
: usesRanking
? `Enter each ${participantLabel.toLowerCase()}'s Elo${allowsRankOnly ? ' (optional)' : ''} and ${rankLabel}. Saving will automatically run the simulation and update expected values.`
: `Enter each ${participantLabel.toLowerCase()}'s current Elo rating. Saving will automatically run the simulation and update expected values.`}
</CardDescription>
</CardHeader>
<CardContent>
<Form method="post" className="space-y-4">
<input type="hidden" name="inputMode" value={inputMode} />
{usesRanking && inputMode === 'elo' && (
<div className="grid grid-cols-[1fr_100px_90px] gap-x-3 gap-y-1 items-center text-xs font-medium text-muted-foreground">
<span>{participantLabel}</span>
<span>Elo</span>
<span>{rankLabel} #</span>
</div>
)}
{inputMode === 'projectedWins' && (
<div className="grid grid-cols-[1fr_100px] gap-x-3 gap-y-1 items-center text-xs font-medium text-muted-foreground">
<span>Team</span>
<span>{simulatorConfig?.projectionInput === 'tablePoints' ? 'Proj Pts' : 'Proj Wins'}</span>
</div>
)}
<div className="space-y-2">
{sortedParticipants.map(participant => {
if (inputMode === 'projectedWins' && simulatorConfig) {
return (
<div key={participant.id} className="grid grid-cols-[1fr_100px] gap-x-3 items-center">
<Label htmlFor={`wins_${participant.id}`} className="truncate text-sm">
{participant.name}
</Label>
<Input
type="number"
step="0.1"
id={`wins_${participant.id}`}
name={`wins_${participant.id}`}
placeholder={`${(projectionMax / 2).toFixed(1)}`}
value={winsValues[participant.id] ?? ''}
onChange={e =>
setWinsValues(prev => ({ ...prev, [participant.id]: e.target.value }))
}
className="h-8 text-sm"
/>
</div>
);
}
return (
<div
key={participant.id}
className={usesRanking
? 'grid grid-cols-[1fr_100px_90px] gap-x-3 items-center'
: 'grid grid-cols-2 gap-4 items-center'}
>
<Label htmlFor={`elo_${participant.id}`} className="truncate text-sm">
{participant.name}
</Label>
<Input
type="number"
id={`elo_${participant.id}`}
name={`elo_${participant.id}`}
placeholder={usesRanking ? (allowsRankOnly ? 'optional' : '1800') : '2450'}
value={eloValues[participant.id] ?? ''}
onChange={e =>
setEloValues(prev => ({ ...prev, [participant.id]: e.target.value }))
}
className={usesRanking ? 'h-8 text-sm' : undefined}
/>
{usesRanking && (
<Input
type="number"
name={`rank_${participant.id}`}
placeholder="—"
value={rankValues[participant.id] ?? ''}
onChange={e =>
setRankValues(prev => ({ ...prev, [participant.id]: e.target.value }))
}
className="h-8 text-sm"
/>
)}
</div>
);
})}
</div>
{actionData && !actionData.success && actionData.message && (
<div className="text-sm text-destructive">{actionData.message}</div>
)}
<Button type="submit" disabled={isSubmitting}>
{isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
{isSubmitting ? 'Saving & Running Simulation...' : 'Save Ratings & Run Simulation'}
</Button>
</Form>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>How It Works</CardTitle>
</CardHeader>
<CardContent className="text-sm space-y-2">
{inputMode === 'projectedWins' ? (
<ol className="list-decimal list-inside space-y-2">
<li>Enter each team's projected total season {projectionUnit}</li>
<li>Projections are converted to Elo ratings using the inverse Elo formula</li>
<li>Elo ratings are saved and the simulation runs automatically</li>
<li>Results: probability distributions across 1st8th place buckets</li>
<li>Expected fantasy value is calculated per team</li>
</ol>
) : (
<ol className="list-decimal list-inside space-y-2">
<li>Save Elo ratings{usesRanking ? ` and ${rankLabel}s` : ''} for all participants</li>
<li>Compute per-game win probability from Elo difference</li>
<li>Compute match win probability using the Bernoulli model for each round's format</li>
<li>Run Monte Carlo simulations of the full event</li>
<li>Distribute probabilities across 1st8th place buckets</li>
<li>Calculate expected fantasy value per player</li>
</ol>
)}
{usesRanking && inputMode === 'elo' && (
<div className="mt-4 text-muted-foreground text-xs">
{rankLabel} is optional if omitted, the simulator uses Elo order for seeding. {allowsRankOnly ? 'For college hockey, Elo is optional when an NPI rank is entered.' : ''}
</div>
)}
{inputMode === 'projectedWins' && simulatorConfig && (
<div className="mt-4 text-muted-foreground text-xs">
Conversion: Elo = {simulatorConfig.averageOpponentElo} &minus; {simulatorConfig.parityFactor} &times; log&#8321;&#8320;((1 &minus; rate) / rate),
where rate = projection / {projectionMax}.
</div>
)}
</CardContent>
</Card>
</div>
</div>
);
}