function MainComponent() { const [filledRectangles, setFilledRectangles] = React.useState(0); const [score, setScore] = React.useState(0); const fillRectangles = ()=>{ if (filledRectangles < 24) { setFilledRectangles(filledRectangles + 1); updateScore(filledRectangles + 1); } }; const undoLastFill = ()=>{ if (filledRectangles > 0) { setFilledRectangles(filledRectangles - 1); updateScore(filledRectangles - 1); } }; const resetRectangles = ()=>{ setFilledRectangles(0); setScore(score + 3000); }; const updateScore = (rectIndex)=>{ if (rectIndex === 8 || rectIndex === 16 || rectIndex === 24) { setScore(score + 1000 * (rectIndex / 8)); } }; const rectangles = Array.from({ length: 24 }, (_, i)=>/*#__PURE__*/ React.createElement("div", { key: i, className: `w-full h-[20px] mb-1 last:mb-0 relative ${i < filledRectangles ? 'bg-[#FFD700]' : 'bg-white'}`, __source: { fileName: "", lineNumber: 31, columnNumber: 5 }, __self: this }, i === 7 || i === 15 || i === 23 ? /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 flex items-center justify-center", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, `$${(i / 8 + 1) * 1000}`) : null)); return /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center h-screen bg-[#000080]", __source: { fileName: "", lineNumber: 46, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center w-[300px] bg-white p-4", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "mb-8 text-[#FFFFFF] font-show text-4xl", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, "Jacob's Limitless Win"), /*#__PURE__*/ React.createElement("div", { className: "w-full mb-4", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, rectangles), /*#__PURE__*/ React.createElement("div", { className: "mb-4 text-xl font-bold", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, `Score: $${score}`), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "py-2 px-4 bg-[#D3D3D3] text-white font-bold rounded", onClick: fillRectangles, __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, "Dial"), /*#__PURE__*/ React.createElement("button", { className: "py-2 px-4 bg-[#FF0000] text-white font-bold rounded", onClick: undoLastFill, __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, "Undo"), /*#__PURE__*/ React.createElement("button", { className: "py-2 px-4 bg-[#FFA500] text-white font-bold rounded", onClick: resetRectangles, __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, "Reset")))); } /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 76, columnNumber: 1 }, __self: this }, ` @font-face { font-family: 'Game Show'; src: url('/path-to-game-show-font.woff2') format('woff2'), url('/path-to-game-show-font.woff') format('woff'); } .font-show { font-family: 'Game Show', sans-serif; } body { background-image: linear-gradient(145deg, #000080, #0000cd, #000080); background-size: 400% 400%; animation: AnimationName 10s ease infinite; } @keyframes AnimationName { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } `);