function MainComponent({ score, onNewGame, grid, onKeydown }) { const colors = { background: '#1f3134', cellBackground: '#274a4e', cellBorder: '#404040', piece: '#000000', pieceAlt: '#FFFFFF', buttonBackground: '#808080', buttonText: '#FFFFFF', font: 'text-white' }; React.useEffect(()=>{ window.addEventListener('keydown', onKeydown); return ()=>window.removeEventListener('keydown', onKeydown); }, [ onKeydown ]); const renderGrid = ()=>{ return grid.map((row, rowIndex)=>/*#__PURE__*/ React.createElement("div", { key: rowIndex, className: "flex", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, row.map((cell, colIndex)=>{ const cellStyle = cell ? { backgroundColor: colors.piece } : { backgroundColor: colors.cellBackground }; return /*#__PURE__*/ React.createElement("div", { key: `${rowIndex}-${colIndex}`, className: `w-[30px] h-[30px] border`, style: cellStyle, __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }); }))); }; const buttonClassName = 'mt-4 py-2 px-4 rounded font-inter text-[16px]'; const buttonStyle = { backgroundColor: colors.buttonBackground, color: colors.buttonText }; return /*#__PURE__*/ React.createElement("div", { className: `h-screen flex flex-col items-center justify-center ${colors.font}`, style: { backgroundColor: colors.background }, __source: { fileName: "", lineNumber: 42, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4 text-[16px] font-inter", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, "スコア: ", score), /*#__PURE__*/ React.createElement("div", { className: "grid gap-0", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, renderGrid()), /*#__PURE__*/ React.createElement("button", { className: buttonClassName, style: buttonStyle, onClick: onNewGame, __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, "新しいゲームを始める"), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, ` @keyframes fall { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } } `)); } function StoryComponent() { const [grid, setGrid] = React.useState(Array.from({ length: 20 }).map(()=>Array.from({ length: 10 }).fill(null))); const handleKeydown = (e)=>{ // Add logic to handle movement and rotation }; const startNewGame = ()=>{ setGrid(Array.from({ length: 20 }).map(()=>Array.from({ length: 10 }).fill(null))); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 70, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { score: 0, onNewGame: startNewGame, grid: grid, onKeydown: handleKeydown, __source: { fileName: "", lineNumber: 71, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MainComponent, { score: 10, onNewGame: startNewGame, grid: grid, onKeydown: handleKeydown, __source: { fileName: "", lineNumber: 72, columnNumber: 7 }, __self: this })); }