function MainComponent() { const [gameState, setGameState] = React.useState({ playerPositionX: 0, playerPositionY: 0, coinsCollected: 0, isGameOver: false }); const handleKeyDown = (e)=>{ if (gameState.isGameOver) { return; } const newPosition = { ...gameState }; switch(e.key){ case 'ArrowUp': newPosition.playerPositionY -= 10; break; case 'ArrowDown': newPosition.playerPositionY += 10; break; case 'ArrowLeft': newPosition.playerPositionX -= 10; break; case 'ArrowRight': newPosition.playerPositionX += 10; break; default: return; } setGameState(newPosition); }; const collectCoin = ()=>{ if (!gameState.isGameOver) { setGameState((prevState)=>({ ...prevState, coinsCollected: prevState.coinsCollected + 1 })); } }; const gameOver = ()=>{ setGameState((prevState)=>({ ...prevState, isGameOver: true })); }; React.useEffect(()=>{ window.addEventListener('keydown', handleKeyDown); return ()=>{ window.removeEventListener('keydown', handleKeyDown); }; }, [ gameState.isGameOver ]); let playerStyle = { transform: `translate(${gameState.playerPositionX}px, ${gameState.playerPositionY}px)` }; let coinStyle = { animation: 'spin 2s linear infinite' }; let gameOverMessage = gameState.isGameOver ? /*#__PURE__*/ React.createElement("div", { className: "fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 px-4 py-2 bg-[#f56565]", __source: { fileName: "", lineNumber: 58, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-2xl font-bold text-white font-roboto", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, "Game Over!")) : null; return /*#__PURE__*/ React.createElement("div", { className: "w-full h-screen bg-[#87ceeb] overflow-hidden font-roboto", tabIndex: "0", __source: { fileName: "", lineNumber: 63, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: playerStyle, className: "w-16 h-16 bg-[#ffcc00] absolute", __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { role: "img", "aria-label": "player", className: "text-4xl", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, "🕹️")), /*#__PURE__*/ React.createElement("div", { style: coinStyle, onClick: collectCoin, className: "w-10 h-10 bg-[#ffff00] rounded-full absolute top-20 right-10", __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { role: "img", "aria-label": "coin", className: "text-2xl", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, "💰")), /*#__PURE__*/ React.createElement("p", { className: "absolute bottom-5 left-5 text-2xl font-bold text-white", __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }, "Coins: ", gameState.coinsCollected), /*#__PURE__*/ React.createElement("button", { onClick: gameOver, className: "absolute bottom-5 right-5 bg-[#f56565] text-white rounded px-4 py-2", __source: { fileName: "", lineNumber: 71, columnNumber: 7 }, __self: this }, "End Game"), gameOverMessage, /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 75, columnNumber: 7 }, __self: this }, ` @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } `)); }