function MainComponent() { const [loading, setLoading] = React.useState(false); const [story, setStory] = React.useState(""); const [selectedWorlds, setSelectedWorlds] = React.useState([]); const [race, setRace] = React.useState(""); const [characterOption, setCharacterOption] = React.useState(""); const handleWorldChange = (e)=>{ const options = e.target.options; let value = []; for(let i = 0, l = options.length; i < l; i++){ if (options[i].selected) { value.push(options[i].value); } } setSelectedWorlds(value); }; const handleRaceChange = (e)=>{ setRace(e.target.value); }; const handleCharacterOptionChange = (e)=>{ setCharacterOption(e.target.value); }; const generateStory = 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: `Worlds: ${selectedWorlds.join(", ")}. Race: ${race}. Character option: ${characterOption}.` } ], system_prompt: 'Generate a unique manga adventure based on the selected worlds, race, and character options. The story should include details about battles, powers, encounters, starting skills and items, as well as the character’s progression.' }) }); const jsonData = await response.json(); if (jsonData.status) { setStory(jsonData.result); } setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen p-4 bg-[#000000]", __source: { fileName: "", lineNumber: 52, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "mb-4 text-4xl font-bold font-crimson-text text-[#FFD700]", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, "Custom Manga Adventure Creator"), !story ? /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("select", { multiple: true, name: "worldsSelection", className: "w-full p-2 h-[120px] overflow-y-auto font-roboto border border-[#FFD700] rounded-md text-[#000]", onChange: handleWorldChange, __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "One Piece", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, "One Piece"), /*#__PURE__*/ React.createElement("option", { value: "Dragon Ball", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, "Dragon Ball"), /*#__PURE__*/ React.createElement("option", { value: "Naruto", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, "Naruto"), /*#__PURE__*/ React.createElement("option", { value: "My Hero Academia", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, "My Hero Academia"), /*#__PURE__*/ React.createElement("option", { value: "Bleach", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, "Bleach"), /*#__PURE__*/ React.createElement("option", { value: "Hybrid", __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }, "Hybrid")), /*#__PURE__*/ React.createElement("select", { name: "raceSelection", className: "w-full p-2 mt-4 font-roboto border border-[#FFD700] rounded-md text-[#000]", onChange: handleRaceChange, __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, "Select Race"), /*#__PURE__*/ React.createElement("option", { value: "Human", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, "Human"), /*#__PURE__*/ React.createElement("option", { value: "Saiyan", __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, "Saiyan"), /*#__PURE__*/ React.createElement("option", { value: "Shinigami", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, "Shinigami"), /*#__PURE__*/ React.createElement("option", { value: "Ninja", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, "Ninja"), /*#__PURE__*/ React.createElement("option", { value: "Quirk User", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, "Quirk User"), /*#__PURE__*/ React.createElement("option", { value: "Pirate", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, "Pirate")), /*#__PURE__*/ React.createElement("input", { type: "text", name: "characterOption", placeholder: "Enter your chosen character option (e.g., Fire Sword, Shadow Clone)", className: "w-full mt-4 p-2 font-roboto border border-[#FFD700] rounded-md text-[#000]", onChange: handleCharacterOptionChange, __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: generateStory, disabled: loading, className: `mt-4 px-4 py-2 bg-[#FFD700] text-[#000] rounded-md font-roboto ${loading && 'opacity-50 cursor-not-allowed'}`, __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, loading ? "Generating your adventure..." : "Create Adventure")) : /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md p-4 bg-[#FFF] rounded-md shadow-md", __source: { fileName: "", lineNumber: 79, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "mb-2 text-2xl font-bold font-crimson-text text-[#FFD700]", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, "Your Custom Manga Adventure"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#000]", __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, story), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setStory(""); setSelectedWorlds([]); setCharacterOption(""); setRace(""); }, className: "mt-4 px-4 py-2 bg-[#FFD700] text-[#000] rounded-md font-roboto", __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this }, "Create Another Adventure")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 87, columnNumber: 7 }, __self: this }, ` body { background-color: #000000; color: #FFD700; } @keyframes goldenDragon { from { opacity: 0; transform: translateX(-100px); } to { opacity: 1; transform: translateX(0); } } `), /*#__PURE__*/ React.createElement("div", { style: { animation: 'goldenDragon 1s ease-in-out' }, className: "w-full max-w-xs mt-10", __source: { fileName: "", lineNumber: 103, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "golden-dragon.png", alt: "A majestic golden dragon at the end of the manga adventure creation screen", className: "w-full", __source: { fileName: "", lineNumber: 104, columnNumber: 9 }, __self: this }))); }