function MainComponent() { const [player1, setPlayer1] = React.useState({ x: 1, y: 1, score: 0 }); const [player2, setPlayer2] = React.useState({ x: 8, y: 8, score: 0 }); const handleKeyDown = (event)=>{ event.preventDefault(); let newX, newY; switch(event.key){ case 'w': newX = player1.x; newY = player1.y - 1; setPlayer1({ ...player1, y: newY }); break; case 'a': newX = player1.x - 1; newY = player1.y; setPlayer1({ ...player1, x: newX }); break; case 's': newX = player1.x; newY = player1.y + 1; setPlayer1({ ...player1, y: newY }); break; case 'd': newX = player1.x + 1; newY = player1.y; setPlayer1({ ...player1, x: newX }); break; case 'ArrowUp': newX = player2.x; newY = player2.y - 1; setPlayer2({ ...player2, y: newY }); break; case 'ArrowLeft': newX = player2.x - 1; newY = player2.y; setPlayer2({ ...player2, x: newX }); break; case 'ArrowDown': newX = player2.x; newY = player2.y + 1; setPlayer2({ ...player2, y: newY }); break; case 'ArrowRight': newX = player2.x + 1; newY = player2.y; setPlayer2({ ...player2, x: newX }); break; } }; React.useEffect(()=>{ window.addEventListener('keydown', handleKeyDown); return ()=>{ window.removeEventListener('keydown', handleKeyDown); }; }, [ player1, player2 ]); const isPlayer = (x, y, player)=>player.x === x && player.y === y; const statusDisplay = /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center space-x-4 mb-8", __source: { fileName: "", lineNumber: 58, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[#FFD700] font-roboto font-bold text-xl", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, "🕹️ Player 1: ", player1.score), /*#__PURE__*/ React.createElement("div", { className: "text-[#FFD700] font-roboto font-bold text-xl", __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, "🕹️ Player 2: ", player2.score)); const maze = /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-10 gap-1 w-[500px] h-[500px] bg-black mx-auto", __source: { fileName: "", lineNumber: 68, columnNumber: 5 }, __self: this }, [ ...Array.from({ length: 100 }) ].map((_, index)=>{ const x = index % 10; const y = Math.floor(index / 10); const isPlayer1Here = isPlayer(x, y, player1); const isPlayer2Here = isPlayer(x, y, player2); return /*#__PURE__*/ React.createElement("div", { key: index, className: `w-full h-full rounded ${isPlayer1Here ? 'bg-[#FFD700]' : ''} ${isPlayer2Here ? 'bg-[#0000FF]' : ''} ${!isPlayer1Here && !isPlayer2Here ? 'bg-[#242424]' : ''}`, __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }); })); const controls = /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center space-x-8 mt-8", __source: { fileName: "", lineNumber: 88, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-white font-roboto text-lg", __source: { fileName: "", lineNumber: 89, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold", __source: { fileName: "", lineNumber: 90, columnNumber: 9 }, __self: this }, "Controls Player 1:"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 91, columnNumber: 9 }, __self: this }, "W - Up"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 92, columnNumber: 9 }, __self: this }, "A - Left"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 93, columnNumber: 9 }, __self: this }, "S - Down"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 94, columnNumber: 9 }, __self: this }, "D - Right")), /*#__PURE__*/ React.createElement("div", { className: "text-white font-roboto text-lg", __source: { fileName: "", lineNumber: 96, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold", __source: { fileName: "", lineNumber: 97, columnNumber: 9 }, __self: this }, "Controls Player 2:"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 98, columnNumber: 9 }, __self: this }, "↑ - Up"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 99, columnNumber: 9 }, __self: this }, "← - Left"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 100, columnNumber: 9 }, __self: this }, "↓ - Down"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 101, columnNumber: 9 }, __self: this }, "→ - Right"))); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col items-center justify-center bg-[#010101]", __source: { fileName: "", lineNumber: 106, columnNumber: 5 }, __self: this }, statusDisplay, maze, controls, /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 110, columnNumber: 7 }, __self: this }, ` @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .blink { animation: blink 1s infinite; } `)); }