function ClickableActionButton({ onClick, children }) { return /*#__PURE__*/ React.createElement("button", { onClick: onClick, className: "py-2 px-4 bg-[#007bff] text-white font-roboto rounded-md mb-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, children); } function ClickableActionButtonStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ClickableActionButton, { onClick: ()=>alert("Button clicked!"), __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, "Click Me"), /*#__PURE__*/ React.createElement(ClickableActionButton, { onClick: ()=>alert("Another action!"), __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, "Another Button")); } function GameStartButton({ onStartGame }) { return /*#__PURE__*/ React.createElement(ClickableActionButton, { onClick: onStartGame, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, "ゲーム開始"); } function GameStartButtonStory() { const startGame = ()=>alert("Game is starting..."); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(GameStartButton, { onStartGame: startGame, __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this })); } function MainComponent() { const [gameState, setGameState] = React.useState('title'); const handleStartGame = ()=>setGameState('playing'); const handleClose = ()=>window.close(); const handleBackToTitle = ()=>setGameState('title'); if (gameState === 'title') { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-roboto text-[#121212] mb-8", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, "テトリスゲーム"), /*#__PURE__*/ React.createElement(GameStartButton, { onStartGame: handleStartGame, __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleClose, className: "py-2 px-4 bg-[#dc3545] text-white font-roboto rounded-md mt-4", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, "ゲーム終了")); } if (gameState === 'playing') { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row items-center justify-center h-screen bg-gray-100", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "md:flex-grow flex flex-col items-center m-4", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto mb-4", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, "プレイヤー"), /*#__PURE__*/ React.createElement("div", { className: "md:w-[120px] w-full h-[480px] bg-black", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-start", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto mb-4 mt-4 md:mt-0", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, "経過時間: ", /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 28, columnNumber: 71 }, __self: this }, "00:00")), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center space-x-2", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "py-2 px-3 bg-[#17a2b8] text-white font-roboto rounded-md", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, "⬅️"), /*#__PURE__*/ React.createElement("button", { className: "py-2 px-3 bg-[#28a745] text-white font-roboto rounded-md", __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, "↻"), /*#__PURE__*/ React.createElement("button", { className: "py-2 px-3 bg-[#ffc107] text-white font-roboto rounded-md", __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }, "➡️"))), /*#__PURE__*/ React.createElement("div", { className: "md:flex-grow flex flex-col items-center m-4", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto mb-4", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, "CPU"), /*#__PURE__*/ React.createElement("div", { className: "md:w-[120px] w-full h-[480px] bg-black", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }))); } if (gameState === 'result') { return /*#__PURE__*/ React.createElement("div", { onClick: handleBackToTitle, className: "flex flex-col items-center justify-center h-screen cursor-pointer bg-gray-100", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-roboto text-[#121212] mb-8", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, "ゲーム終了"), /*#__PURE__*/ React.createElement("p", { className: "text-xl font-roboto", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, "結果: プレイヤーの勝ち")); } }