function MainComponent() { const [loading, setLoading] = React.useState(false); const [chatResponse, setChatResponse] = React.useState(""); function beginGame() { setLoading(true); fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { "role": "user", "content": "Make it more extreme than regular chess" } ], system_prompt: "Explain this content" }) }).then((response)=>response.json()).then((data)=>{ const content = data.choices[0].message.content; setChatResponse(content); setLoading(false); }).catch(()=>{ setLoading(false); }); } function resetBoard() { setChatResponse(""); } return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center bg-[#1a1a1a] min-h-screen p-8", __source: { fileName: "", lineNumber: 35, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-white font-roboto", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, "Extreme Chess"), /*#__PURE__*/ React.createElement("div", { className: "mt-8 grid grid-cols-9 gap-1", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, Array.from({ length: 81 }).map((_, index)=>{ const isRowEven = Math.floor(index / 9) % 2 === 0; const isColEven = index % 2 === 0; const isWhite = isRowEven ? isColEven : !isColEven; const bgColor = isWhite ? 'bg-white' : 'bg-black'; return /*#__PURE__*/ React.createElement("div", { key: index, className: `w-[40px] h-[40px] ${bgColor}`, __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }); })), /*#__PURE__*/ React.createElement("div", { className: "mt-8 flex gap-4", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#f0ad4e] text-white font-roboto py-2 px-4 rounded hover:bg-[#ec971f]", onClick: beginGame, disabled: loading, __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, loading ? "Loading..." : "Start Game"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#d9534f] text-white font-roboto py-2 px-4 rounded hover:bg-[#c9302c]", onClick: resetBoard, __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, "Reset Board")), chatResponse && /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-white font-roboto", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, "Game Rules:"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, chatResponse))); } /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 76, columnNumber: 1 }, __self: this }, ` .bg-white { background-color: #f8f8f8; } .bg-black { background-color: #2b2b2b; } `);