function MainComponent() { const [players, setPlayers] = React.useState([]); const [scores, setScores] = React.useState([]); const [currentLegs, setCurrentLegs] = React.useState([]); const [currentSets, setCurrentSets] = React.useState([]); const [currentPlayerIndex, setCurrentPlayerIndex] = React.useState(0); const [throwHistory, setThrowHistory] = React.useState([]); const [throwCount, setThrowCount] = React.useState(0); const [isDouble, setIsDouble] = React.useState(false); const [isTriple, setIsTriple] = React.useState(false); const handleNewPlayer = ()=>{ const playerName = prompt("Enter player's name:"); if (playerName) { setPlayers((prevPlayers)=>[ ...prevPlayers, playerName ]); setScores((prevScores)=>[ ...prevScores, 501 ]); setCurrentLegs((prevLegs)=>[ ...prevLegs, 0 ]); setCurrentSets((prevSets)=>[ ...prevSets, 0 ]); } }; const handleRemovePlayer = (indexToRemove)=>{ setPlayers((prevPlayers)=>prevPlayers.filter((_, index)=>index !== indexToRemove)); setScores((prevScores)=>prevScores.filter((_, index)=>index !== indexToRemove)); setCurrentLegs((prevLegs)=>prevLegs.filter((_, index)=>index !== indexToRemove)); setCurrentSets((prevSets)=>prevSets.filter((_, index)=>index !== indexToRemove)); }; const handleDoubling = ()=>{ setIsDouble(!isDouble); setIsTriple(false); }; const handleTripling = ()=>{ setIsTriple(!isTriple); setIsDouble(false); }; const handleThrow = (points)=>{ const multiplier = isDouble ? 2 : isTriple && points !== 25 ? 3 : 1; setIsDouble(false); setIsTriple(false); let newScore = scores[currentPlayerIndex] - points * multiplier; let newLegs = currentLegs[currentPlayerIndex]; let newSets = currentSets[currentPlayerIndex]; if (newScore >= 0 && (newScore !== 1 || multiplier === 2)) { if (newScore === 0) { newLegs += 1; if (newLegs === 3) { newSets += 1; newLegs = 0; } newScore = 501; } setScores((prevScores)=>prevScores.map((score, index)=>index === currentPlayerIndex ? newScore : score)); setCurrentLegs((prevLegs)=>prevLegs.map((legs, index)=>index === currentPlayerIndex ? newLegs : legs)); setCurrentSets((prevSets)=>prevSets.map((sets, index)=>index === currentPlayerIndex ? newSets : sets)); setThrowHistory((prev)=>[ ...prev, { playerIndex: currentPlayerIndex, score: points * multiplier } ]); const newThrowCount = (throwCount + 1) % 3; setThrowCount(newThrowCount); if (newThrowCount === 0) { setCurrentPlayerIndex((prev)=>(prev + 1) % players.length); } } }; const handleCancelLastScore = ()=>{ if (throwHistory.length > 0) { const lastThrow = throwHistory[throwHistory.length - 1]; let updatedScores = scores.map((score, index)=>index === lastThrow.playerIndex ? score + lastThrow.score : score); let updatedLegs = currentLegs.map((legs, index)=>index === lastThrow.playerIndex && updatedScores[index] === 501 ? legs - 1 : legs); let updatedSets = currentSets.map((sets, index)=>index === lastThrow.playerIndex && updatedLegs[index] === -1 ? sets - 1 : sets); if (updatedLegs[lastThrow.playerIndex] === -1) { updatedLegs[lastThrow.playerIndex] = 2; } setScores(updatedScores); setCurrentLegs(updatedLegs); setCurrentSets(updatedSets); setCurrentPlayerIndex(lastThrow.playerIndex); setThrowCount(throwCount === 0 ? 2 : throwCount - 1); setThrowHistory(throwHistory.slice(0, -1)); } }; const scoringButtons = Array.from({ length: 21 }, (_, i)=>i).concat(25); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-row w-full", __source: { fileName: "", lineNumber: 94, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-1/2 p-4 space-y-4", __source: { fileName: "", lineNumber: 95, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleNewPlayer, className: "w-full py-2 px-6 text-white font-bold bg-blue-500 text-lg", __source: { fileName: "", lineNumber: 96, columnNumber: 9 }, __self: this }, "Add Player"), players.map((player, index)=>/*#__PURE__*/ React.createElement("div", { key: player, className: "flex justify-between items-center p-3 mt-4 bg-gray-200", __source: { fileName: "", lineNumber: 100, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 101, columnNumber: 13 }, __self: this }, player), /*#__PURE__*/ React.createElement("div", { className: "space-x-4", __source: { fileName: "", lineNumber: 102, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 103, columnNumber: 15 }, __self: this }, "Legs: ", currentLegs[index], " "), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 104, columnNumber: 15 }, __self: this }, "Sets: ", currentSets[index], " "), /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-2xl", __source: { fileName: "", lineNumber: 105, columnNumber: 15 }, __self: this }, "Score: ", scores[index])), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleRemovePlayer(index), className: "text-red-600", __source: { fileName: "", lineNumber: 107, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times-circle", __source: { fileName: "", lineNumber: 108, columnNumber: 15 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { className: "w-1/2 p-4 space-y-4", __source: { fileName: "", lineNumber: 113, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-3 gap-2", __source: { fileName: "", lineNumber: 114, columnNumber: 9 }, __self: this }, scoringButtons.map((points)=>/*#__PURE__*/ React.createElement("button", { key: points, onClick: ()=>handleThrow(points), className: "py-4 px-6 bg-gray-200 text-lg font-bold", __source: { fileName: "", lineNumber: 116, columnNumber: 13 }, __self: this }, points))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-2 mt-4", __source: { fileName: "", lineNumber: 121, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleDoubling, className: `py-4 px-6 text-lg font-bold ${isDouble ? 'text-white bg-blue-600' : 'bg-gray-200'}`, __source: { fileName: "", lineNumber: 122, columnNumber: 11 }, __self: this }, "Double"), /*#__PURE__*/ React.createElement("button", { onClick: handleTripling, className: `py-4 px-6 text-lg font-bold ${isTriple ? 'text-white bg-blue-600' : 'bg-gray-200'}`, __source: { fileName: "", lineNumber: 125, columnNumber: 11 }, __self: this }, "Triple")), /*#__PURE__*/ React.createElement("button", { onClick: handleCancelLastScore, className: "w-full py-4 px-6 bg-gray-200 text-lg font-bold", __source: { fileName: "", lineNumber: 129, columnNumber: 9 }, __self: this }, "Undo"), /*#__PURE__*/ React.createElement("div", { className: "text-center mt-4", __source: { fileName: "", lineNumber: 132, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 133, columnNumber: 11 }, __self: this }, "Current Score"), /*#__PURE__*/ React.createElement("p", { className: "text-6xl font-roboto", __source: { fileName: "", lineNumber: 134, columnNumber: 11 }, __self: this }, scores[currentPlayerIndex]))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 137, columnNumber: 7 }, __self: this }, ` button { border-radius: 0; } `)); }