function MainComponent() { const [grid, setGrid] = React.useState(createInitialGrid()); React.useEffect(()=>{ const handleKeyDown = (event)=>{ if (event.key.includes("Arrow")) { const newGrid = moveGrid(grid, event.key); if (newGrid !== grid) { setGrid(addRandomTile(newGrid)); } } }; window.addEventListener('keydown', handleKeyDown); return ()=>{ window.removeEventListener('keydown', handleKeyDown); }; }, [ grid ]); const gridStyle = { display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gridGap: '10px', width: '400px', height: '400px' }; const cellStyle = { width: '100px', height: '100px', display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: '#CDC1B4', fontSize: '24px', fontWeight: 'bold' }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen bg-[#FAF8EF]", __source: { fileName: "", lineNumber: 39, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-4xl mb-6", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, "2048 Game"), /*#__PURE__*/ React.createElement("div", { style: gridStyle, __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, grid.flat().map((cell, index)=>/*#__PURE__*/ React.createElement("div", { key: index, style: { ...cellStyle, backgroundColor: getCellColor(cell) }, __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, cell !== 0 ? cell : "")))); } function createInitialGrid() { const grid = Array.from({ length: 4 }).fill().map(()=>Array.from({ length: 4 }).fill(0)); addRandomTile(grid); addRandomTile(grid); return grid; } function addRandomTile(grid) { const emptyCells = []; grid.forEach((row, rowIndex)=>{ row.forEach((cell, colIndex)=>{ if (cell === 0) { emptyCells.push([ rowIndex, colIndex ]); } }); }); if (emptyCells.length > 0) { const [row, col] = emptyCells[Math.floor(Math.random() * emptyCells.length)]; grid[row][col] = Math.random() < 0.9 ? 2 : 4; } return grid; } function moveGrid(grid, direction) { const newGrid = grid.map((row)=>[ ...row ]); if (direction === "ArrowUp") { for(let col = 0; col < 4; col++){ let stack = []; for(let row = 0; row < 4; row++){ if (newGrid[row][col] !== 0) { stack.push(newGrid[row][col]); newGrid[row][col] = 0; } } stack = mergeStack(stack); for(let row = 0; row < stack.length; row++){ newGrid[row][col] = stack[row]; } } } else if (direction === "ArrowDown") { for(let col = 0; col < 4; col++){ let stack = []; for(let row = 3; row >= 0; row--){ if (newGrid[row][col] !== 0) { stack.push(newGrid[row][col]); newGrid[row][col] = 0; } } stack = mergeStack(stack); stack.reverse(); for(let row = 0; row < stack.length; row++){ newGrid[3 - row][col] = stack[row]; } } } else if (direction === "ArrowLeft") { for(let row = 0; row < 4; row++){ let stack = []; for(let col = 0; col < 4; col++){ if (newGrid[row][col] !== 0) { stack.push(newGrid[row][col]); newGrid[row][col] = 0; } } stack = mergeStack(stack); for(let col = 0; col < stack.length; col++){ newGrid[row][col] = stack[col]; } } } else if (direction === "ArrowRight") { for(let row = 0; row < 4; row++){ let stack = []; for(let col = 3; col >= 0; col--){ if (newGrid[row][col] !== 0) { stack.push(newGrid[row][col]); newGrid[row][col] = 0; } } stack = mergeStack(stack); stack.reverse(); for(let col = 0; col < stack.length; col++){ newGrid[row][3 - col] = stack[col]; } } } return newGrid; } function mergeStack(stack) { const newStack = []; while(stack.length > 0){ if (stack.length > 1 && stack[0] === stack[1]) { newStack.push(stack.shift() * 2); stack.shift(); } else { newStack.push(stack.shift()); } } return newStack; } function getCellColor(value) { switch(value){ case 2: return '#EEE4DA'; case 4: return '#EDE0C8'; case 8: return '#F2B179'; case 16: return '#F59563'; case 32: return '#F67C5F'; case 64: return '#F65E3B'; case 128: return '#EDCF72'; case 256: return '#EDCC61'; case 512: return '#EDC850'; case 1024: return '#EDC53F'; case 2048: return '#EDC22E'; default: return '#CDC1B4'; } }