function MainComponent({ grid, currentTetromino, nextTetromino, score, isGameOver, onRestart }) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, "Tetris"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-10 gap-0.5", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, grid.map((row, rowIndex)=>row.map((cell, cellIndex)=>/*#__PURE__*/ React.createElement("div", { key: `${rowIndex}-${cellIndex}`, className: `w-6 h-6 ${cell ? 'bg-blue-500' : 'bg-gray-200'}`, __source: { fileName: "", lineNumber: 8, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold", __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }, "Next Tetromino"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center", __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }, nextTetromino.map((row, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex", __source: { fileName: "", lineNumber: 17, columnNumber: 15 }, __self: this }, row.map((cell, cellIndex)=>/*#__PURE__*/ React.createElement("div", { key: cellIndex, className: `w-4 h-4 m-0.5 ${cell ? 'bg-green-500' : 'bg-gray-300'}`, __source: { fileName: "", lineNumber: 19, columnNumber: 19 }, __self: this })))))), /*#__PURE__*/ React.createElement("p", { className: "text-xl font-roboto mt-2", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, "Score: ", score), isGameOver && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("p", { className: "text-red-500 text-xl mt-2", __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }, "Game Over"), /*#__PURE__*/ React.createElement("button", { onClick: onRestart, className: "px-4 py-2 mt-2 bg-blue-500 text-white rounded", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, "Restart")), /*#__PURE__*/ React.createElement("div", { className: "flex mt-4", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-blue-500 text-white rounded mx-2", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, "Left"), /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-blue-500 text-white rounded mx-2", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, "Right"), /*#__PURE__*/ React.createElement("button", { onClick: onRestart, className: "px-4 py-2 bg-blue-500 text-white rounded", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, "Start")))); } function StoryComponent() { const initializeGrid = ()=>Array.from({ length: 20 }, ()=>Array.from({ length: 10 }, ()=>0)); const tetrominos = [ [ [ 0, 0, 0, 0 ], [ 1, 1, 1, 1 ], [ 0, 0, 0, 0 ], [ 0, 0, 0, 0 ] ], [ [ 2, 2 ], [ 2, 2 ] ], [ [ 0, 0, 0 ], [ 0, 3, 3 ], [ 3, 3, 0 ] ], [ [ 0, 4, 0 ], [ 4, 4, 4 ], [ 0, 0, 0 ] ] ]; const generateTetromino = ()=>tetrominos[Math.floor(Math.random() * tetrominos.length)]; const [grid, setGrid] = React.useState(initializeGrid()); const [currentTetromino, setCurrentTetromino] = React.useState(generateTetromino()); const [nextTetromino, setNextTetromino] = React.useState(generateTetromino()); const [score, setScore] = React.useState(0); const [isGameOver, setIsGameOver] = React.useState(false); const handleRestart = ()=>{ setGrid(initializeGrid()); setCurrentTetromino(generateTetromino()); setNextTetromino(generateTetromino()); setScore(0); setIsGameOver(false); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 84, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { grid: grid, currentTetromino: currentTetromino, nextTetromino: nextTetromino, score: score, isGameOver: isGameOver, onRestart: handleRestart, __source: { fileName: "", lineNumber: 85, columnNumber: 7 }, __self: this })); }