function MainComponent() { const [gamePrompt, setGamePrompt] = React.useState(""); const [generatedCode, setGeneratedCode] = React.useState(""); const [isGenerating, setIsGenerating] = React.useState(false); const [showPublishModal, setShowPublishModal] = React.useState(false); const [publishType, setPublishType] = React.useState(""); const [alias, setAlias] = React.useState(""); const [isPublishing, setIsPublishing] = React.useState(false); const [publishedLink, setPublishedLink] = React.useState(""); const [embedCode, setEmbedCode] = React.useState(""); const [error, setError] = React.useState(""); // Check if we're viewing a hosted game React.useEffect(()=>{ const params = new URLSearchParams(window.location.search); const aliasParam = params.get("alias"); if (aliasParam) { loadHostedGame(aliasParam); } }, []); const loadHostedGame = async (gameAlias)=>{ try { const response = await fetch("/api/get-game", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ alias: gameAlias }) }); const data = await response.json(); if (data.success) { // Replace the entire page with the game content document.open(); document.write(data.content); document.close(); } else { setError(`Game not found: ${gameAlias}`); } } catch (err) { setError("Failed to load game"); } }; const generateGame = async ()=>{ if (!gamePrompt.trim()) { setError("Please enter a game description"); return; } setIsGenerating(true); setError(""); try { const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "system", content: "You are an expert web game developer. Create complete, playable HTML games with embedded CSS and JavaScript. The game should be fully functional, responsive, and include proper styling. Return only the complete HTML code that can be saved as an .html file and run in a browser." }, { role: "user", content: `Create a web-based game: ${gamePrompt}. Make it fully playable with clear instructions, good styling, and responsive design. Include all CSS and JavaScript inline in the HTML.` } ] }) }); if (!response.ok) { throw new Error("Failed to generate game"); } const data = await response.json(); const gameCode = data.choices[0].message.content; setGeneratedCode(gameCode); } catch (err) { setError("Failed to generate game. Please try again."); } finally{ setIsGenerating(false); } }; const handlePublish = (type)=>{ setPublishType(type); setShowPublishModal(true); setPublishedLink(""); setEmbedCode(""); setError(""); }; const publishWithAlias = async ()=>{ if (!alias.trim() || !/^[A-Za-z0-9-_]+$/.test(alias)) { setError("Enter a valid alias (letters, numbers, hyphens or underscores only)"); return; } setIsPublishing(true); try { const response = await fetch("/api/save-game", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ alias: alias, content: generatedCode }) }); const data = await response.json(); if (data.success) { const hostedLink = `${window.location.origin}/?alias=${encodeURIComponent(alias)}`; setPublishedLink(hostedLink); setEmbedCode(``); } else { setError(data.error || "Failed to publish game"); } } catch (err) { setError("Failed to publish game"); } finally{ setIsPublishing(false); } }; const publishWithoutAlias = ()=>{ setIsPublishing(true); try { const blob = new Blob([ generatedCode ], { type: "text/html" }); const reader = new FileReader(); reader.onload = function(event) { const base64Data = event.target.result; const base64Link = `http://gchainedconsensus.atwebpages.com/com/blog/bio.html#${base64Data.split(",")[1]}`; setPublishedLink(base64Link); setEmbedCode(``); setIsPublishing(false); }; reader.readAsDataURL(blob); } catch (err) { setError("Failed to create game link"); setIsPublishing(false); } }; const executePublish = ()=>{ if (publishType === "alias") { publishWithAlias(); } else { publishWithoutAlias(); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 p-4", __source: { fileName: "", lineNumber: 169, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto", __source: { fileName: "", lineNumber: 170, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-8", __source: { fileName: "", lineNumber: 171, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-gray-800 mb-2", __source: { fileName: "", lineNumber: 172, columnNumber: 11 }, __self: this }, "AI Game Generator"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 175, columnNumber: 11 }, __self: this }, "Describe your game idea and let AI create it for you!")), error && /*#__PURE__*/ React.createElement("div", { className: "bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4", __source: { fileName: "", lineNumber: 181, columnNumber: 11 }, __self: this }, error), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-6", __source: { fileName: "", lineNumber: 186, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-lg p-6", __source: { fileName: "", lineNumber: 188, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 189, columnNumber: 13 }, __self: this }, "Game Description"), /*#__PURE__*/ React.createElement("textarea", { value: gamePrompt, onChange: (e)=>setGamePrompt(e.target.value), placeholder: "Describe the game you want to create... (e.g., 'A simple snake game with colorful graphics' or 'A memory card matching game with animals')", className: "w-full h-32 p-3 border border-gray-300 rounded-lg resize-none focus:ring-2 focus:ring-blue-500 focus:border-transparent", __source: { fileName: "", lineNumber: 190, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: generateGame, disabled: isGenerating || !gamePrompt.trim(), className: "w-full mt-4 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-400 text-white font-semibold py-3 px-6 rounded-lg transition-colors", __source: { fileName: "", lineNumber: 196, columnNumber: 13 }, __self: this }, isGenerating ? /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 202, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2", __source: { fileName: "", lineNumber: 203, columnNumber: 19 }, __self: this }), "Generating Game...") : "Generate Game")), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-lg p-6", __source: { fileName: "", lineNumber: 213, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 214, columnNumber: 13 }, __self: this }, "Game Preview"), generatedCode ? /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 216, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "border border-gray-300 rounded-lg h-64 overflow-hidden", __source: { fileName: "", lineNumber: 217, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("iframe", { srcDoc: generatedCode, className: "w-full h-full", title: "Game Preview", __source: { fileName: "", lineNumber: 218, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-3", __source: { fileName: "", lineNumber: 224, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handlePublish("alias"), className: "flex-1 bg-green-600 hover:bg-green-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors", __source: { fileName: "", lineNumber: 225, columnNumber: 19 }, __self: this }, "Publish with Alias"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handlePublish("no-alias"), className: "flex-1 bg-purple-600 hover:bg-purple-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors", __source: { fileName: "", lineNumber: 231, columnNumber: 19 }, __self: this }, "Publish without Alias"))) : /*#__PURE__*/ React.createElement("div", { className: "h-64 border-2 border-dashed border-gray-300 rounded-lg flex items-center justify-center text-gray-500", __source: { fileName: "", lineNumber: 240, columnNumber: 15 }, __self: this }, "Generate a game to see preview"))), generatedCode && /*#__PURE__*/ React.createElement("div", { className: "mt-6 bg-white rounded-lg shadow-lg p-6", __source: { fileName: "", lineNumber: 249, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 250, columnNumber: 13 }, __self: this }, "Generated Code"), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100 rounded-lg p-4 max-h-96 overflow-y-auto", __source: { fileName: "", lineNumber: 251, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("pre", { className: "text-sm text-gray-800 whitespace-pre-wrap", __source: { fileName: "", lineNumber: 252, columnNumber: 15 }, __self: this }, generatedCode))), showPublishModal && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50", __source: { fileName: "", lineNumber: 261, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-xl p-6 w-full max-w-md", __source: { fileName: "", lineNumber: 262, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 263, columnNumber: 15 }, __self: this }, "Publish Game", " ", publishType === "alias" ? "with Alias" : "without Alias"), publishType === "alias" && /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 269, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 270, columnNumber: 19 }, __self: this }, "Game Alias"), /*#__PURE__*/ React.createElement("input", { type: "text", value: alias, onChange: (e)=>setAlias(e.target.value), placeholder: "my-awesome-game", className: "w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent", __source: { fileName: "", lineNumber: 273, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-xs text-gray-500 mt-1", __source: { fileName: "", lineNumber: 280, columnNumber: 19 }, __self: this }, "Only letters, numbers, hyphens, and underscores allowed")), publishedLink && /*#__PURE__*/ React.createElement("div", { className: "mb-4 space-y-3", __source: { fileName: "", lineNumber: 287, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 288, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1", __source: { fileName: "", lineNumber: 289, columnNumber: 21 }, __self: this }, "Game Link"), /*#__PURE__*/ React.createElement("div", { className: "p-2 bg-gray-100 rounded border text-sm break-all", __source: { fileName: "", lineNumber: 292, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: publishedLink, target: "_blank", rel: "noopener noreferrer", className: "text-blue-600 hover:underline", __source: { fileName: "", lineNumber: 293, columnNumber: 23 }, __self: this }, publishedLink))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 303, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1", __source: { fileName: "", lineNumber: 304, columnNumber: 21 }, __self: this }, "Embed Code"), /*#__PURE__*/ React.createElement("textarea", { value: embedCode, readOnly: true, className: "w-full p-2 bg-gray-100 rounded border text-sm h-20 resize-none", __source: { fileName: "", lineNumber: 307, columnNumber: 21 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-3", __source: { fileName: "", lineNumber: 316, columnNumber: 15 }, __self: this }, !publishedLink && /*#__PURE__*/ React.createElement("button", { onClick: executePublish, disabled: isPublishing || publishType === "alias" && !alias.trim(), className: "flex-1 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-400 text-white font-semibold py-2 px-4 rounded-lg transition-colors", __source: { fileName: "", lineNumber: 318, columnNumber: 19 }, __self: this }, isPublishing ? /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 326, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2", __source: { fileName: "", lineNumber: 327, columnNumber: 25 }, __self: this }), "Publishing...") : "Publish"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowPublishModal(false), className: "flex-1 bg-gray-500 hover:bg-gray-600 text-white font-semibold py-2 px-4 rounded-lg transition-colors", __source: { fileName: "", lineNumber: 335, columnNumber: 17 }, __self: this }, "Close")))))); }