function FallingBlocksGame({ blocks }) { return /*#__PURE__*/ React.createElement("div", { className: "bg-black w-[400px] h-[800px] border-4 border-gray-700 relative", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, blocks.map((block, index)=>{ const { top, left, color } = block; const style = { top: top, left: left, backgroundColor: color, ...color === "#FFFF00" && { animation: "fall 2s infinite linear" } }; return /*#__PURE__*/ React.createElement("div", { key: index, className: `absolute w-[38px] h-[38px]`, style: style, __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }); })); } function FallingBlocksGameStory() { const blocks = [ { top: "8px", left: "8px", color: "#FF0000" }, { top: "8px", left: "42px", color: "#00FF00" }, { top: "42px", left: "8px", color: "#0000FF" }, { top: "82px", left: "8px", color: "#FFFF00" } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 34, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(FallingBlocksGame, { blocks: blocks, __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this })); } /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 40, columnNumber: 1 }, __self: this }, ` @keyframes fall { 0% { transform: translateY(0); } 100% { transform: translateY(760px); } } `); function TetrisGame({ title, blocks, loading, message }) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-900 text-white", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl mb-8 font-crimson-text", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, title), /*#__PURE__*/ React.createElement("div", { className: "bg-black w-[400px] h-[800px] border-4 border-gray-700 relative", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, blocks.map((block, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `absolute ${block.class}`, style: { top: block.top, left: block.left, width: '38px', height: '38px', backgroundColor: block.color }, __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }))), loading ? /*#__PURE__*/ React.createElement("p", { className: "text-xl font-crimson-text mt-4", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, "Loading...") : /*#__PURE__*/ React.createElement("p", { className: "text-xl font-crimson-text mt-4", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, message), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, ` @keyframes fall { from { top: 0; } to { top: 760px; } } .animate-fall { animation: fall 5s linear infinite; } `)); } function TetrisGameStory() { const blocks = [ { top: '2px', left: '2px', color: '#FF0000' }, { top: '2px', left: '42px', color: '#00FF00' }, { top: '42px', left: '2px', color: '#0000FF' }, { top: '82px', left: '2px', color: '#FFFF00', class: 'animate-fall' } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 45, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(TetrisGame, { title: "ChatGPT Tetris Game", blocks: blocks, loading: false, message: "Game Over", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this })); } function MainComponent() { const [loading, setLoading] = React.useState(false); const [message, setMessage] = React.useState(""); const sendMessage = async ()=>{ setLoading(true); const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: "テトリスを作って" } ], system_prompt: "Explain this content" }) }); const data = await response.json(); setMessage(data.choices[0].message.content); setLoading(false); }; React.useEffect(()=>{ sendMessage(); }, []); const blocks = [ { top: "2px", left: "2px", color: "#FF0000" }, { top: "2px", left: "42px", color: "#00FF00" }, { top: "42px", left: "2px", color: "#0000FF" }, { top: "82px", left: "2px", color: "#FFFF00", class: "animate-fall" } ]; return /*#__PURE__*/ React.createElement(TetrisGame, { title: "ChatGPT Tetris Game", blocks: blocks, loading: loading, message: message, __source: { fileName: "", lineNumber: 34, columnNumber: 5 }, __self: this }); }