function MainComponent() { const [start, setStart] = React.useState(5); const [end, setEnd] = React.useState(25); const [current, setCurrent] = React.useState(start); const [steps, setSteps] = React.useState([]); const [dailyOperations] = React.useState([ { type: 'add', value: 2 }, { type: 'add', value: 3 }, { type: 'multiply', value: 2 }, { type: 'multiply', value: 3 } ]); const [hint, setHint] = React.useState(null); const [showHint, setShowHint] = React.useState(false); const [gameStatus, setGameStatus] = React.useState('playing'); const handleOperation = (operation)=>{ if (gameStatus !== 'playing') return; let newValue = current; if (operation.type === 'add') newValue += operation.value; if (operation.type === 'multiply') newValue *= operation.value; const newSteps = [ ...steps, { operation: operation.type, value: operation.value, result: newValue } ]; setSteps(newSteps); setCurrent(newValue); if (newValue === end) { setGameStatus('won'); } else if (newValue > end) { setGameStatus('lost'); } }; const resetGame = ()=>{ setCurrent(start); setSteps([]); setHint(null); setShowHint(false); setGameStatus('playing'); }; const getHint = ()=>{ setShowHint(true); if (steps.length > 0) { setHint(`Try ${dailyOperations[0].type === 'add' ? `+${dailyOperations[0].value}` : `x${dailyOperations[0].value}`}`); } else { setHint(`You can start with ${dailyOperations[0].type === 'add' ? `+${dailyOperations[0].value}` : `x${dailyOperations[0].value}`}`); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#121212] p-4 font-petemoss font-ibm-plex-sans-arabic", __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-6xl font-bold mb-8 text-center text-[#fcfffc]", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, "NumberPath"), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1e1e1e] rounded-lg shadow-lg w-full max-w-md p-6", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mb-4", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-medium font-sans text-[#fcfffc]", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, "Start: ", start), /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-medium font-sans text-[#fcfffc]", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, "End: ", end)), /*#__PURE__*/ React.createElement("div", { className: "text-4xl font-bold mb-6 font-sans text-center text-[#fcfffc]", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, "Current: ", current), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4 mb-6", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, dailyOperations.map((op, index)=>/*#__PURE__*/ React.createElement("button", { key: index, onClick: ()=>handleOperation(op), className: `bg-[#4a4a4a] text-[#fcfffc] px-4 py-3 rounded-full font-sans text-xl transition-colors duration-200 ${gameStatus !== 'playing' ? 'opacity-50 cursor-not-allowed' : 'hover:bg-[#5a5a5a]'}`, disabled: gameStatus !== 'playing', __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, op.type === 'add' ? `+${op.value}` : `×${op.value}`))), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-2 font-sans text-[#fcfffc]", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, "Steps:"), /*#__PURE__*/ React.createElement("div", { className: "bg-[#2a2a2a] p-3 rounded-lg max-h-40 overflow-y-auto", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, steps.map((step, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "font-sans text-[#fcfffc] mb-1", __source: { fileName: "", lineNumber: 73, columnNumber: 15 }, __self: this }, step.operation === 'add' ? '+' : '×', step.value, " = ", step.result)))), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 79, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: resetGame, className: "bg-[#d32f2f] text-[#fcfffc] px-4 py-2 rounded-full font-sans flex-grow transition-colors duration-200 hover:bg-[#b71c1c]", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, "Reset"), /*#__PURE__*/ React.createElement("button", { onClick: getHint, className: "bg-[#388e3c] text-[#fcfffc] px-4 py-2 rounded-full font-sans flex-grow transition-colors duration-200 hover:bg-[#2e7d32]", __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }, "Hint")), showHint && /*#__PURE__*/ React.createElement("div", { className: "text-xl font-medium mt-4 font-sans text-center text-[#fcfffc]", __source: { fileName: "", lineNumber: 93, columnNumber: 22 }, __self: this }, hint), gameStatus === 'won' && /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-bold mt-6 text-center text-[#4caf50]", __source: { fileName: "", lineNumber: 95, columnNumber: 11 }, __self: this }, "Congratulations! You've reached the target number!"), gameStatus === 'lost' && /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-bold mt-6 text-center text-[#f44336]", __source: { fileName: "", lineNumber: 100, columnNumber: 11 }, __self: this }, "Oops! You've gone past the target number. Try again!"))); }