function MainComponent() { const [score, setScore] = React.useState(0); const [level, setLevel] = React.useState(1); const [grid, setGrid] = React.useState(Array.from({ length: 200 }).fill(0)); const [activePiece, setActivePiece] = React.useState(null); const [isRunning, setIsRunning] = React.useState(false); const [piecePosition, setPiecePosition] = React.useState({ x: 4, y: 0 }); React.useEffect(()=>{ if (isRunning) { const interval = setInterval(()=>{ movePieceDown(); }, 1000 - level * 100); return ()=>clearInterval(interval); } }, [ isRunning, level, activePiece, piecePosition ]); const movePieceDown = ()=>{ const newPosition = { ...piecePosition, y: piecePosition.y + 1 }; if (canMoveTo(newPosition)) { setPiecePosition(newPosition); } else { placePiece(); setActivePiece(generateNewPiece()); } }; const canMoveTo = ({ x, y })=>{ return !(y >= 20 || x < 0 || x >= 10 || grid[y * 10 + x] !== 0); }; const placePiece = ()=>{ setGrid((prevGrid)=>{ const newGrid = [ ...prevGrid ]; activePiece.shape.forEach((row, rowIndex)=>{ row.forEach((cell, cellIndex)=>{ if (cell) { newGrid[(piecePosition.y + rowIndex) * 10 + (piecePosition.x + cellIndex)] = 1; } }); }); return newGrid; }); clearLines(); }; const clearLines = ()=>{ setGrid((prevGrid)=>{ const newGrid = []; let linesCleared = 0; for(let i = 0; i < 20; i++){ const row = prevGrid.slice(i * 10, i * 10 + 10); if (row.every((cell)=>cell !== 0)) { linesCleared++; for(let j = 0; j < 10; j++){ row[j] = 0; } } else { newGrid.push(...row); } } setScore(score + linesCleared * 100); setLevel(Math.floor(score / 1000) + 1); return [ ...Array(200 - newGrid.length).fill(0), ...newGrid ]; }); }; const movePieceLeft = ()=>{ const newPosition = { ...piecePosition, x: piecePosition.x - 1 }; if (canMoveTo(newPosition)) { setPiecePosition(newPosition); } }; const movePieceRight = ()=>{ const newPosition = { ...piecePosition, x: piecePosition.x + 1 }; if (canMoveTo(newPosition)) { setPiecePosition(newPosition); } }; const rotatePiece = ()=>{ const rotatedPiece = { ...activePiece, shape: activePiece.shape[0].map((_, index)=>activePiece.shape.map((row)=>row[index]).reverse()) }; if (canMoveTo(piecePosition)) { setActivePiece(rotatedPiece); } }; const generateNewPiece = ()=>{ const pieces = [ { shape: [ [ 1, 1, 1, 1 ] ] }, { shape: [ [ 1, 1 ], [ 1, 1 ] ] }, { shape: [ [ 1, 1, 0 ], [ 0, 1, 1 ] ] }, { shape: [ [ 0, 1, 1 ], [ 1, 1, 0 ] ] }, { shape: [ [ 1, 1, 1 ], [ 0, 1, 0 ] ] }, { shape: [ [ 1, 0, 0 ], [ 1, 1, 1 ] ] }, { shape: [ [ 0, 0, 1 ], [ 1, 1, 1 ] ] } ]; const randomPiece = pieces[Math.floor(Math.random() * pieces.length)]; return { ...randomPiece, x: 4, y: 0 }; }; const startGame = ()=>{ setIsRunning(true); setActivePiece(generateNewPiece()); setGrid(Array.from({ length: 200 }).fill(0)); setScore(0); setLevel(1); }; const resetGame = ()=>{ setIsRunning(false); setActivePiece(null); setGrid(Array.from({ length: 200 }).fill(0)); setScore(0); setLevel(1); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#000000] text-[#ffffff] font-roboto", __source: { fileName: "", lineNumber: 124, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl mb-4", __source: { fileName: "", lineNumber: 125, columnNumber: 7 }, __self: this }, "Tetris Game"), /*#__PURE__*/ React.createElement("div", { className: "w-[300px] h-[600px] bg-[#121212] border border-[#ffffff] relative", __source: { fileName: "", lineNumber: 126, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-2 right-2 text-sm", __source: { fileName: "", lineNumber: 127, columnNumber: 9 }, __self: this }, "Score: ", score), /*#__PURE__*/ React.createElement("div", { className: "absolute top-12 right-2 text-sm", __source: { fileName: "", lineNumber: 128, columnNumber: 9 }, __self: this }, "Level: ", level), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-10 gap-[1px] relative w-full h-full", __source: { fileName: "", lineNumber: 129, columnNumber: 9 }, __self: this }, grid.map((cell, idx)=>/*#__PURE__*/ React.createElement("div", { key: idx, className: `w-full h-full ${cell === 0 ? 'bg-[#1d1d1d]' : 'bg-[#ffffff]'} border border-[#2c2c2c]`, __source: { fileName: "", lineNumber: 131, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "flex mt-4 space-x-4", __source: { fileName: "", lineNumber: 138, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: startGame, className: "px-4 py-2 bg-[#007bff] text-white rounded font-roboto", __source: { fileName: "", lineNumber: 139, columnNumber: 9 }, __self: this }, "Start"), /*#__PURE__*/ React.createElement("button", { onClick: resetGame, className: "px-4 py-2 bg-[#dc3545] text-white rounded font-roboto", __source: { fileName: "", lineNumber: 140, columnNumber: 9 }, __self: this }, "Reset")), /*#__PURE__*/ React.createElement("div", { className: "flex mt-4 space-x-2", __source: { fileName: "", lineNumber: 142, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: movePieceLeft, className: "px-4 py-2 bg-[#007bff] text-white rounded font-roboto", __source: { fileName: "", lineNumber: 143, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-left", __source: { fileName: "", lineNumber: 144, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: movePieceRight, className: "px-4 py-2 bg-[#007bff] text-white rounded font-roboto", __source: { fileName: "", lineNumber: 146, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-right", __source: { fileName: "", lineNumber: 147, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: rotatePiece, className: "px-4 py-2 bg-[#007bff] text-white rounded font-roboto", __source: { fileName: "", lineNumber: 149, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-undo", __source: { fileName: "", lineNumber: 150, columnNumber: 11 }, __self: this })))); }