function MainComponent() { const [board, setBoard] = React.useState([ ...Array.from({ length: 200 }) ]); const [nextPiece, setNextPiece] = React.useState([ ...Array.from({ length: 16 }) ]); const [score, setScore] = React.useState(0); const [isRunning, setIsRunning] = React.useState(false); const startGame = ()=>{ setIsRunning(true); }; const pauseGame = ()=>{ setIsRunning(false); }; const resetGame = ()=>{ setIsRunning(false); setBoard([ ...Array.from({ length: 200 }) ]); setNextPiece([ ...Array.from({ length: 16 }) ]); setScore(0); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col sm:flex-row justify-center items-center h-screen bg-black", __source: { fileName: "", lineNumber: 23, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-10 gap-1 bg-white p-2 border-4 border-gray-700", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, board.map((_, i)=>/*#__PURE__*/ React.createElement("div", { key: i, className: "w-6 h-6 sm:w-8 sm:h-8 bg-gray-200", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "sm:ml-4 text-white font-roboto mt-4 sm:mt-0", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl mb-4", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, "テトリス"), /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 px-4 py-2 rounded", onClick: startGame, __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, "Start"), /*#__PURE__*/ React.createElement("button", { className: "bg-red-500 px-4 py-2 rounded ml-2", onClick: pauseGame, __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, "Pause"), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 px-4 py-2 rounded ml-2", onClick: resetGame, __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, "Reset")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl mb-4", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, "Score: ", score), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 border-4 border-gray-700 text-black", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl mb-2", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, "Next Piece"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-4 gap-1", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, nextPiece.map((_, i)=>/*#__PURE__*/ React.createElement("div", { key: i, className: "w-6 h-6 sm:w-8 sm:h-8 bg-gray-200", __source: { fileName: "", lineNumber: 42, columnNumber: 17 }, __self: this }))))))); }

テトリス

Score: 0

Next Piece