import React, { useState, useEffect } from "react"; import { useFireproof } from "use-fireproof"; import { callAI } from "call-ai"; export default function App() { const { useDocument, useLiveQuery, database } = useFireproof("baseball-scorekeeper-pro"); const [currentInning, setCurrentInning] = useState(1); const [isTop, setIsTop] = useState(true); const [generating, setGenerating] = useState(false); const [generatedText, setGeneratedText] = useState(""); const [activeTab, setActiveTab] = useState("game"); const [activePlayer, setActivePlayer] = useState(null); // For creating a new game const { doc: newGame, merge: mergeNewGame, submit: submitNewGame } = useDocument({ type: "game", homeTeam: "", awayTeam: "", date: new Date().toISOString().split("T")[0], inProgress: true, createdAt: Date.now(), }); // For tracking the current at-bat const { doc: atBat, merge: mergeAtBat, submit: submitAtBat, reset: resetAtBat } = useDocument({ type: "atBat", gameId: "", inning: 1, isTop: true, batterId: "", pitcherId: "", balls: 0, strikes: 0, outs: 0, result: "", bases: { first: null, second: null, third: null }, pitches: [], createdAt: Date.now(), }); // Get all games const { docs: games } = useLiveQuery("type", { key: "game", descending: true }); // Get current game (most recent in progress) const currentGame = games.find(game => game.inProgress) || games[0]; // Get innings for the current game const { docs: innings } = useLiveQuery( (doc) => doc.type === "inning" && doc.gameId === currentGame?._id ? [doc.gameId, doc.inning, doc.isTop] : null, { descending: false } ); // Get all at-bats for the current game const { docs: atBats } = useLiveQuery( (doc) => doc.type === "atBat" && doc.gameId === currentGame?._id ? [doc.gameId, doc.inning, doc.isTop] : null, { descending: true } ); // Get all players for the current game const { docs: players } = useLiveQuery( (doc) => doc.type === "player" && doc.gameId === currentGame?._id ? [doc.gameId, doc.teamType] : null ); // Get the current at-bat state const currentAtBatState = atBats.find(ab => ab.inning === currentInning && ab.isTop === isTop && !ab.result ); // Get player statistics const getPlayerStats = (playerId) => { const playerAtBats = atBats.filter(ab => ab.batterId === playerId && ab.result); const stats = { atBats: playerAtBats.length, hits: playerAtBats.filter(ab => ["single", "double", "triple", "homerun"].includes(ab.result)).length, walks: playerAtBats.filter(ab => ab.result === "walk").length, strikeouts: playerAtBats.filter(ab => ab.result === "strikeout").length, runs: 0, rbi: 0, }; // Calculate batting average stats.avg = stats.atBats > 0 ? (stats.hits / stats.atBats).toFixed(3) : ".000"; return stats; }; // Initialize at-bat useEffect(() => { if (currentGame && !currentAtBatState) { mergeAtBat({ gameId: currentGame._id, inning: currentInning, isTop: isTop, outs: innings.find(i => i.inning === currentInning && i.isTop === isTop)?.outs || 0, bases: innings.find(i => i.inning === currentInning && i.isTop === isTop)?.bases || { first: null, second: null, third: null } }); } else if (currentAtBatState) { mergeAtBat(currentAtBatState); } }, [currentGame, currentInning, isTop, innings, currentAtBatState]); // Add a pitch to the current at-bat const addPitch = (type) => { if (!atBat.batterId || !atBat.pitcherId) { alert("Please select a batter and pitcher first"); return; } const newPitches = [...atBat.pitches, { type, timestamp: Date.now() }]; let newBalls = atBat.balls; let newStrikes = atBat.strikes; if (type === "ball") { newBalls += 1; } else if (type === "strike" || type === "foul" && atBat.strikes < 2) { newStrikes += 1; } mergeAtBat({ pitches: newPitches, balls: newBalls, strikes: newStrikes }); // Check for walk or strikeout if (newBalls >= 4) { completeAtBat("walk"); } else if (newStrikes >= 3) { completeAtBat("strikeout"); } }; // Complete the current at-bat with a result const completeAtBat = async (result) => { const currentOuts = atBat.outs; let newOuts = currentOuts; let newBases = { ...atBat.bases }; let runsScored = 0; // Update outs if (["strikeout", "groundout", "flyout", "doubleplay"].includes(result)) { newOuts += result === "doubleplay" ? 2 : 1; } // Update bases based on hit type if (result === "walk") { // Walk - advance runners if forced if (newBases.first) { if (newBases.second) { if (newBases.third) { runsScored += 1; } newBases.third = newBases.second; } newBases.second = newBases.first; } newBases.first = atBat.batterId; } else if (result === "single") { // Single - advance runners one base if (newBases.third) { runsScored += 1; } newBases.third = newBases.second; newBases.second = newBases.first; newBases.first = atBat.batterId; } else if (result === "double") { // Double - advance runners two bases if (newBases.third) { runsScored += 1; } if (newBases.second) { runsScored += 1; } newBases.third = newBases.first; newBases.second = atBat.batterId; newBases.first = null; } else if (result === "triple") { // Triple - advance runners three bases if (newBases.third) { runsScored += 1; } if (newBases.second) { runsScored += 1; } if (newBases.first) { runsScored += 1; } newBases.third = atBat.batterId; newBases.second = null; newBases.first = null; } else if (result === "homerun") { // Home run - all runners score runsScored += 1; // Batter scores if (newBases.first) runsScored += 1; if (newBases.second) runsScored += 1; if (newBases.third) runsScored += 1; newBases = { first: null, second: null, third: null }; } else if (["strikeout", "groundout", "flyout", "doubleplay"].includes(result)) { // Out - no base advancement for simple model } // Save the completed at-bat await database.put({ ...atBat, result, outs: newOuts, runsScored, bases: newBases, completedAt: Date.now() }); // Update or create inning record const existingInning = innings.find(i => i.inning === currentInning && i.isTop === isTop); if (existingInning) { await database.put({ ...existingInning, outs: newOuts, bases: newBases, runs: (existingInning.runs || 0) + runsScored }); } else { await database.put({ type: "inning", gameId: currentGame._id, inning: currentInning, isTop: isTop, outs: newOuts, bases: newBases, runs: runsScored, createdAt: Date.now() }); } // Start a new at-bat or change innings if 3 outs if (newOuts >= 3) { changeInning(); } else { resetAtBat(); mergeAtBat({ gameId: currentGame._id, inning: currentInning, isTop: isTop, outs: newOuts, bases: newBases, balls: 0, strikes: 0, pitches: [] }); } }; // Change inning const changeInning = () => { if (isTop) { setIsTop(false); } else { setIsTop(true); setCurrentInning(currentInning + 1); } // Reset at-bat for new inning resetAtBat(); }; // Calculate total score for a team const calculateScore = (isHomeTeam) => { return innings .filter(inning => inning.isTop !== isHomeTeam) .reduce((total, inning) => total + (inning.runs || 0), 0); }; // Add a player to the game const addPlayer = async (name, number, position, teamType) => { if (!currentGame) return; await database.put({ type: "player", gameId: currentGame._id, name, number, position, teamType, // "home" or "away" createdAt: Date.now() }); }; // Get players for a specific team const getTeamPlayers = (teamType) => { return players.filter(player => player.teamType === teamType); }; // Generate game summary const generateSummary = async () => { if (!currentGame) return; setGenerating(true); const homeScore = calculateScore(true); const awayScore = calculateScore(false); try { // Get top performers const homePlayers = getTeamPlayers("home"); const awayPlayers = getTeamPlayers("away"); const allPlayers = [...homePlayers, ...awayPlayers]; const playerStats = {}; allPlayers.forEach(player => { playerStats[player._id] = { name: player.name, team: player.teamType === "home" ? currentGame.homeTeam : currentGame.awayTeam, ...getPlayerStats(player._id) }; }); // Find top hitters const topHitters = Object.values(playerStats) .filter(stats => stats.atBats > 0) .sort((a, b) => b.hits - a.hits) .slice(0, 3); const promptData = { homeTeam: currentGame.homeTeam, homeScore, awayTeam: currentGame.awayTeam, awayScore, innings: innings.reduce((acc, inning) => { if (!acc[inning.inning]) { acc[inning.inning] = { top: 0, bottom: 0 }; } if (inning.isTop) { acc[inning.inning].top = inning.runs || 0; } else { acc[inning.inning].bottom = inning.runs || 0; } return acc; }, {}), topHitters: topHitters.map(h => `${h.name} (${h.team}): ${h.hits} hits, ${h.avg} avg`) }; const result = await callAI( `Generate a detailed baseball game summary for ${promptData.awayTeam} vs ${promptData.homeTeam}. Final score: ${promptData.awayTeam} ${promptData.awayScore}, ${promptData.homeTeam} ${promptData.homeScore}. Include details about the innings where runs were scored and mention these top performers: ${promptData.topHitters.join(", ")}. Use professional baseball terminology.`, { stream: true } ); let summary = ""; for await (const chunk of result) { summary = chunk; setGeneratedText(summary); } if (summary) { await database.put({ type: "summary", gameId: currentGame._id, text: summary, homeScore, awayScore, createdAt: Date.now() }); // Mark game as complete await database.put({ ...currentGame, inProgress: false }); } } catch (error) { console.error("Error generating summary:", error); } finally { setGenerating(false); } }; // Get summary for current game const { docs: summaries } = useLiveQuery( (doc) => doc.type === "summary" && doc.gameId === currentGame?._id ? doc.gameId : null ); const currentSummary = summaries[0]; // Demo data generation const generateDemoData = async () => { const demoPrompt = "Generate statistics for a baseball game between the Boston Red Sox and New York Yankees with detailed at-bats and pitch counts."; setGenerating(true); try { const result = await callAI(demoPrompt, { stream: true, schema: { properties: { game: { type: "object", properties: { homeTeam: { type: "string" }, awayTeam: { type: "string" }, innings: { type: "array", items: { type: "object", properties: { inning: { type: "integer" }, isTop: { type: "boolean" }, runs: { type: "integer" }, outs: { type: "integer" } } } }, players: { type: "array", items: { type: "object", properties: { name: { type: "string" }, number: { type: "integer" }, position: { type: "string" }, teamType: { type: "string" } } } }, atBats: { type: "array", items: { type: "object", properties: { inning: { type: "integer" }, isTop: { type: "boolean" }, batter: { type: "string" }, pitcher: { type: "string" }, result: { type: "string" }, pitches: { type: "array", items: { type: "string" } } } } } } } } } }); let demoData = ""; for await (const chunk of result) { demoData = chunk; setGeneratedText(chunk); } const parsedData = JSON.parse(demoData); const game = parsedData.game; // Create demo game const gameResponse = await database.put({ type: "game", homeTeam: game.homeTeam, awayTeam: game.awayTeam, date: new Date().toISOString().split("T")[0], inProgress: false, createdAt: Date.now() }); // Add players const playerMap = {}; for (const player of game.players) { const playerResponse = await database.put({ type: "player", gameId: gameResponse.id, name: player.name, number: player.number, position: player.position, teamType: player.teamType, createdAt: Date.now() }); playerMap[player.name] = playerResponse.id; } // Add innings for (const inning of game.innings) { await database.put({ type: "inning", gameId: gameResponse.id, inning: inning.inning, isTop: inning.isTop, runs: inning.runs, outs: inning.outs, bases: { first: null, second: null, third: null }, createdAt: Date.now() }); } // Add at-bats for (const ab of game.atBats) { const pitches = ab.pitches.map(p => ({ type: p, timestamp: Date.now() })); await database.put({ type: "atBat", gameId: gameResponse.id, inning: ab.inning, isTop: ab.isTop, batterId: playerMap[ab.batter], pitcherId: playerMap[ab.pitcher], balls: pitches.filter(p => p.type === "ball").length, strikes: pitches.filter(p => ["strike", "foul"].includes(p.type)).length, outs: 0, result: ab.result, pitches: pitches, bases: { first: null, second: null, third: null }, runsScored: ab.result === "homerun" ? 1 : 0, createdAt: Date.now(), completedAt: Date.now() }); } // Add summary await database.put({ type: "summary", gameId: gameResponse.id, text: `In an exciting matchup at Fenway Park, the ${game.homeTeam} faced off against the ${game.awayTeam} in a game that showcased baseball at its finest. The final score was ${game.homeTeam} ${game.innings.filter(i => !i.isTop).reduce((sum, i) => sum + i.runs, 0)}, ${game.awayTeam} ${game.innings.filter(i => i.isTop).reduce((sum, i) => sum + i.runs, 0)}.`, homeScore: game.innings.filter(i => !i.isTop).reduce((sum, i) => sum + i.runs, 0), awayScore: game.innings.filter(i => i.isTop).reduce((sum, i) => sum + i.runs, 0), createdAt: Date.now() }); } catch (error) { console.error("Error generating demo data:", error); } finally { setGenerating(false); } }; const renderGameSetup = () => (

New Game

{ e.preventDefault(); if (newGame.homeTeam && newGame.awayTeam) { submitNewGame(); } }}>

Home Team mergeNewGame({ homeTeam: e.target.value })} className="w-full p-2 border-2 border-blue-300 rounded-md" placeholder="Home Team" required />

Away Team mergeNewGame({ awayTeam: e.target.value })} className="w-full p-2 border-2 border-blue-300 rounded-md" placeholder="Away Team" required />

Date mergeNewGame({ date: e.target.value })} className="w-full p-2 border-2 border-blue-300 rounded-md" />

); const renderPlayerManagement = () => { const [newPlayer, setNewPlayer] = useState({ name: "", number: "", position: "", teamType: "home" }); const handleAddPlayer = (e) => { e.preventDefault(); addPlayer( newPlayer.name, parseInt(newPlayer.number, 10), newPlayer.position, newPlayer.teamType ); setNewPlayer({ name: "", number: "", position: "", teamType: newPlayer.teamType }); }; return (

Roster Management

Team

Player Name setNewPlayer({...newPlayer, name: e.target.value})} className="w-full p-2 border-2 border-blue-300 rounded-md" placeholder="Player Name" required />

Number setNewPlayer({...newPlayer, number: e.target.value})} className="w-full p-2 border-2 border-blue-300 rounded-md" placeholder="Player Number" required />

Position

{currentGame?.homeTeam || "Home Team"}

{getTeamPlayers("home").map(player => ( setActivePlayer(player._id)} > ))}

#	Name	Pos
{player.number}	{player.name}	{player.position}

{currentGame?.awayTeam || "Away Team"}

{getTeamPlayers("away").map(player => ( setActivePlayer(player._id)} > ))}

#	Name	Pos
{player.number}	{player.name}	{player.position}

{activePlayer && (

Player Stats

{(() => { const player = players.find(p => p._id === activePlayer); if (!player) return

Player not found

; const stats = getPlayerStats(player._id); return (

{player.name} #{player.number} - {player.position}

AVG

{stats.avg}

{stats.atBats}

{stats.hits}

{stats.walks}

{stats.strikeouts}

); })()}

)}

); }; const renderAtBatInterface = () => { const currentBatter = players.find(p => p._id === atBat.batterId); const currentPitcher = players.find(p => p._id === atBat.pitcherId); // Get available batters (from the team that's batting) const availableBatters = players.filter(p => p.teamType === (isTop ? "away" : "home") && p.position !== "P" ); // Get available pitchers (from the team that's fielding) const availablePitchers = players.filter(p => p.teamType === (isTop ? "home" : "away") && p.position === "P" ); return (

{isTop ? "Top" : "Bottom"} of {currentInning}{getInningOrdinal(currentInning)}

{currentGame?.awayTeam}: {calculateScore(false)} {currentGame?.homeTeam}: {calculateScore(true)}

Current At-Bat

Batter

Pitcher

Balls

{atBat.balls}

Strikes

{atBat.strikes}

Outs

{atBat.outs}

Pitch Result

{atBat.pitches.some(p => p.type === "in_play") && (

Play Result

)}

Field Status

{/* Baseball diamond representation */}

{/* Home plate */}

{/* First base */}

{atBat.bases?.first && ( 1B )}

{/* Second base */}

{atBat.bases?.second && ( 2B )}

{/* Third base */}

{atBat.bases?.third && ( 3B )}

{/* Pitcher's mound */}

Recent At-Bats

{atBats.filter(ab => ab.result).slice(0, 5).map(ab => { const batter = players.find(p => p._id === ab.batterId); return ( ); })}

Inning	Batter	Result
{ab.inning} {ab.isTop ? "T" : "B"}	{batter?.name \|\| "Unknown"}	{ab.result}

); }; const renderScoreboard = () => (

Scoreboard

{Array.from({ length: Math.max(9, currentInning) }, (_, i) => ( ))} {Array.from({ length: Math.max(9, currentInning) }, (_, i) => { const inningData = innings.find(inn => inn.inning === i + 1 && inn.isTop); return ( ); })} {Array.from({ length: Math.max(9, currentInning) }, (_, i) => { const inningData = innings.find(inn => inn.inning === i + 1 && !inn.isTop); return ( ); })}

Team	{i + 1}	R
{currentGame?.awayTeam}	{inningData ? inningData.runs : ""}	{calculateScore(false)}
{currentGame?.homeTeam}	{inningData ? inningData.runs : ""}	{calculateScore(true)}

{currentSummary && (

Game Summary

{currentSummary.text}

Final Score: {currentGame?.awayTeam} {currentSummary.awayScore}, {currentGame?.homeTeam} {currentSummary.homeScore}

)}

); const renderBoxScore = () => { const homeTeamPlayers = getTeamPlayers("home"); const awayTeamPlayers = getTeamPlayers("away"); return (

Box Score

{currentGame?.awayTeam}

{awayTeamPlayers.map(player => { const stats = getPlayerStats(player._id); return ( ); })}

Player	AB	H	BB	SO	AVG
{player.position} {player.name}	{stats.atBats}	{stats.hits}	{stats.walks}	{stats.strikeouts}	{stats.avg}

{currentGame?.homeTeam}

{homeTeamPlayers.map(player => { const stats = getPlayerStats(player._id); return ( ); })}

Player	AB	H	BB	SO	AVG
{player.position} {player.name}	{stats.atBats}	{stats.hits}	{stats.walks}	{stats.strikeouts}	{stats.avg}

); }; // Helper function for inning ordinal function getInningOrdinal(inning) { if (inning === 1) return "st"; if (inning === 2) return "nd"; if (inning === 3) return "rd"; return "th"; } return (

⚾ Baseball Score Keeper Pro

*Track every pitch, at-bat, and play with this comprehensive baseball scorekeeping app!*

{currentGame && (

)}

{!currentGame ? ( renderGameSetup() ) : (

{activeTab === 'game' && renderAtBatInterface()} {activeTab === 'players' && renderPlayerManagement()} {activeTab === 'scoreboard' && renderScoreboard()} {activeTab === 'boxscore' && renderBoxScore()}

)} {games.length > 0 && !currentGame && (

Previous Games

{games.map(game => (

{game.awayTeam} @ {game.homeTeam}

{new Date(game.date).toLocaleDateString()}

{(() => { const summary = summaries.find(s => s.gameId === game._id); if (summary) { return (

Final Score: {game.awayTeam} {summary.awayScore}, {game.homeTeam} {summary.homeScore}

); } else { return No summary available; } })()}

))}

)}

); }