function GameGridDisplay({ board, gameOver, rotateCurrentPiece, moveCurrentPiece }) { React.useEffect(()=>{ const interval = setInterval(()=>{ // Call a prop function or handle logic for automatic updates every second }, 1000); return ()=>clearInterval(interval); }, [ gameOver ]); const boardCells = board.flat().map((cell, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "w-full h-full bg-[#333]", __source: { fileName: "", lineNumber: 10, columnNumber: 5 }, __self: this })); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#121212]", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[#ffffff] font-roboto text-2xl mb-4", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, "Tetris Game"), /*#__PURE__*/ React.createElement("div", { className: "relative flex flex-col items-center bg-[#000] p-4 w-[220px] h-[440px]", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, gameOver && /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 right-0 m-2 text-[#ff0000] font-roboto text-xl", __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }, "Game Over"), /*#__PURE__*/ React.createElement("div", { className: "border-2 border-[#fff] w-full h-full grid grid-cols-10 grid-rows-20 gap-[1px]", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, boardCells), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-0 right-0 m-2", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#00ff00] text-[#000] font-roboto px-2 py-1", onClick: rotateCurrentPiece, name: "rotate", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, "回転"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#00ff00] text-[#000] font-roboto px-2 py-1 ml-2", onClick: ()=>moveCurrentPiece("left"), name: "left", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, "Left"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#00ff00] text-[#000] font-roboto px-2 py-1 ml-2", onClick: ()=>moveCurrentPiece("right"), name: "right", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, "Right"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#00ff00] text-[#000] font-roboto px-2 py-1 ml-2", onClick: ()=>moveCurrentPiece("down"), name: "down", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, "Down")))); } function GameGridDisplayStory() { const board = Array.from({ length: 20 }).fill(Array.from({ length: 10 }).fill(0)); const [gameOver, setGameOver] = React.useState(false); const rotateCurrentPiece = ()=>{ if (gameOver) return; // Logic to rotate piece }; const moveCurrentPiece = (direction)=>{ if (gameOver) return; // Logic to move piece }; return /*#__PURE__*/ React.createElement(GameGridDisplay, { board: board, gameOver: gameOver, rotateCurrentPiece: rotateCurrentPiece, moveCurrentPiece: moveCurrentPiece, __source: { fileName: "", lineNumber: 75, columnNumber: 5 }, __self: this }); } function MainComponent() { const [board, setBoard] = React.useState(Array.from({ length: 20 }).fill(Array.from({ length: 10 }).fill(0))); const [gameOver, setGameOver] = React.useState(false); const [currentPiece, setCurrentPiece] = React.useState(null); const moveCurrentPiece = (direction)=>{ if (gameOver) return; const newPiece = { ...currentPiece }; newPiece.move(direction); if (collides(newPiece)) { newPiece.undo_move(); } setCurrentPiece(newPiece); updateBoard(newPiece); }; const rotateCurrentPiece = ()=>{ if (gameOver) return; const newPiece = { ...currentPiece }; newPiece.rotate(); if (collides(newPiece)) { newPiece.undo_rotation(); } setCurrentPiece(newPiece); updateBoard(newPiece); }; const updateGame = ()=>{ if (gameOver) return; const newPiece = { ...currentPiece }; newPiece.move_down(); if (collides(newPiece)) { newPiece.undo_move(); lockPiece(); checkLines(); spawnPiece(); if (collides(currentPiece)) { setGameOver(true); } } else { setCurrentPiece(newPiece); } updateBoard(newPiece); }; const checkLines = ()=>{ // Logic to check lines }; const lockPiece = ()=>{ // Logic to lock piece }; const spawnPiece = ()=>{ // Logic to spawn piece const piece = generateRandomPiece(); // Placeholder for actual piece generation setCurrentPiece(piece); }; const collides = (piece)=>{ // Logic to check collision return false; // Placeholder for actual collision logic }; const updateBoard = (newPiece)=>{ const newBoard = [ ...board ]; // Logic to update board with the new piece position setBoard(newBoard); }; React.useEffect(()=>{ const interval = setInterval(updateGame, 1000); return ()=>clearInterval(interval); }, [ gameOver, currentPiece ]); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#121212]", __source: { fileName: "", lineNumber: 77, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[#ffffff] font-roboto text-2xl mb-4", __source: { fileName: "", lineNumber: 78, columnNumber: 7 }, __self: this }, "Tetris Game"), /*#__PURE__*/ React.createElement("div", { className: "relative flex flex-col items-center bg-[#000] p-4 w-[220px] h-[440px]", __source: { fileName: "", lineNumber: 79, columnNumber: 7 }, __self: this }, gameOver && /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 right-0 m-2 text-[#ff0000] font-roboto text-xl", __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, "Game Over"), /*#__PURE__*/ React.createElement("div", { className: "border-2 border-[#fff] w-full h-full grid grid-cols-10 grid-rows-20 gap-[1px]", __source: { fileName: "", lineNumber: 85, columnNumber: 9 }, __self: this }, board.flat().map((cell, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "w-full h-full bg-[#333]", __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-0 right-0 m-2", __source: { fileName: "", lineNumber: 90, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#00ff00] text-[#000] font-roboto px-2 py-1", onClick: rotateCurrentPiece, __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }, "Rotate"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#00ff00] text-[#000] font-roboto px-2 py-1 ml-2", onClick: ()=>moveCurrentPiece("left"), __source: { fileName: "", lineNumber: 97, columnNumber: 11 }, __self: this }, "Left"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#00ff00] text-[#000] font-roboto px-2 py-1 ml-2", onClick: ()=>moveCurrentPiece("right"), __source: { fileName: "", lineNumber: 103, columnNumber: 11 }, __self: this }, "Right"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#00ff00] text-[#000] font-roboto px-2 py-1 ml-2", onClick: ()=>moveCurrentPiece("down"), __source: { fileName: "", lineNumber: 109, columnNumber: 11 }, __self: this }, "Down")))); }