Empty Form

New Form

Start typing to generate your form...

`, position: { x: 50, y: 50 } }; setContainers([emptyForm]); setSelectedComponent("puzzle"); }, []); const handleSend = async () => { if (!input.trim()) return; const userMessage = { role: "user", content: input }; setMessages((prev) => [...prev, userMessage]); setInput(""); setIsLoading(true); setLoadingProgress(0); try { setLoadingProgress(30); const response = await fetch( "/integrations/anthropic-claude-sonnet-3-5/", { method: "POST", body: JSON.stringify({ messages: [ { role: "system", content: 'Interpret all prompts as requests for a full web app game. Always respond with complete, well-structured HTML code including a DOCTYPE declaration, , , and tags. Use semantic HTML5 elements where appropriate. Include inline CSS for styling and basic interactivity. Aim for visually appealing designs with proper layout, color schemes, and typography. Ensure the code is responsive and works well on both desktop and mobile devices. Do not specify any font names and do not use any external libraries. Surround the entire HTML code with "-----" and the "html" language identifier. After the code block, provide a brief summary of the key features implemented.' }, ...messages, userMessage ] }) } ); const data = await response.json(); const aiMessage = { role: "assistant", content: data.choices[0].message.content }; setLoadingProgress(60); const codeSnippet = extractCodeSnippet(aiMessage.content); const summary = aiMessage.content.split("-----")[2]?.trim() || ""; await fetch("/api/db/code_snippets", { method: "POST", body: JSON.stringify({ query: "INSERT INTO `snippets` (`title`, `language`, `code_content`, `created_at`) VALUES (?, ?, ?, ?)", values: [input, "html", codeSnippet, (/* @__PURE__ */ new Date()).toISOString()] }) }); setLoadingProgress(90); const newComponent = { id: Date.now(), type: selectedComponent, code: codeSnippet, position: { x: 50, y: 50 } }; setContainers([newComponent]); setMessages((prev) => [...prev, { ...aiMessage, summary }]); setSelectedCode(codeSnippet); setShowSourceCode(false); setLoadingProgress(100); setTimeout(() => { setIsLoading(false); setLoadingProgress(0); }, 2e3); } catch (error) { console.error("Error:", error); setIsLoading(false); setLoadingProgress(0); } }; const extractCodeSnippet = (content) => { const codeBlockRegex = /-----html\n([\s\S]*?)-----/; const match = content.match(codeBlockRegex); return match ? match[1].trim() : ""; }; const handleKeyDown = (e) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); handleSend(); } }; import_react.default.useEffect(() => { if (chatContainerRef.current) { chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight; } }, [messages]); const showCode = (code) => { setSelectedCode(code); setShowSourceCode(false); }; const toggleSourceCode = () => { setShowSourceCode((prev) => !prev); }; const handleComponentSelect = (type) => { setSelectedComponent(type.id); setInput(`${type.name.toLowerCase()}`); }; const handleDragStart = (e, id) => { const rect = e.target.getBoundingClientRect(); const offsetX = e.clientX - rect.left; const offsetY = e.clientY - rect.top; setDragOffset({ x: offsetX, y: offsetY }); setIsDragging(true); setDraggedId(id); const img = new Image(); img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"; e.dataTransfer.setDragImage(img, 0, 0); }; const handleDrop = (e) => { e.preventDefault(); setIsDragging(false); setDraggedId(null); }; const handleDragOver = (e) => { e.preventDefault(); if (isDragging && draggedId) { const rect = e.currentTarget.getBoundingClientRect(); const x = e.clientX - rect.left - dragOffset.x; const y = e.clientY - rect.top - dragOffset.y; setContainers( (prev) => prev.map( (container) => container.id === draggedId ? { ...container, position: { x: Math.max(0, x), y: Math.max(0, y) } } : container ) ); } }; const handleSuggest = () => { if (!selectedComponent) return; const suggestions = gameSubgenres[selectedComponent]; const suggestion = suggestions[Math.floor(Math.random() * suggestions.length)]; setInput(suggestion); }; return /* @__PURE__ */ import_react.default.createElement("div", { className: "flex h-screen bg-gray-900 text-gray-100" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "flex-1 flex flex-col" }, /* @__PURE__ */ import_react.default.createElement("header", { className: "bg-purple-900 text-white p-2 flex items-center justify-between" }, /* @__PURE__ */ import_react.default.createElement("h1", { className: "text-xl font-bold" }, "Game Generator"), /* @__PURE__ */ import_react.default.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ import_react.default.createElement( "button", { onClick: toggleSourceCode, className: "px-3 py-1 bg-purple-700 rounded hover:bg-purple-600" }, showSourceCode ? "Preview" : "Code" ))), /* @__PURE__ */ import_react.default.createElement("div", { className: "flex-1 flex" }, /* @__PURE__ */ import_react.default.createElement( "div", { className: "flex-1 bg-gray-50 relative overflow-auto", onDrop: handleDrop, onDragOver: handleDragOver }, containers.map((container) => /* @__PURE__ */ import_react.default.createElement( "div", { key: container.id, draggable: true, onDragStart: (e) => handleDragStart(e, container.id), style: { position: "absolute", left: container.position.x, top: container.position.y, cursor: "move" }, className: "border-2 border-purple-500 rounded-2xl overflow-hidden bg-white shadow-lg" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "bg-purple-500 text-white px-2 py-1 text-sm flex justify-between items-center" }, /* @__PURE__ */ import_react.default.createElement("span", null, container.type), /* @__PURE__ */ import_react.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ import_react.default.createElement( "input", { type: "number", value: previewWidth, onChange: (e) => setPreviewWidth(Number(e.target.value)), className: "w-16 bg-purple-600 text-white px-1 py-0.5 rounded text-xs" } ), /* @__PURE__ */ import_react.default.createElement("span", null, "x"), /* @__PURE__ */ import_react.default.createElement( "input", { type: "number", value: previewHeight, onChange: (e) => setPreviewHeight(Number(e.target.value)), className: "w-16 bg-purple-600 text-white px-1 py-0.5 rounded text-xs" } ), /* @__PURE__ */ import_react.default.createElement( "input", { type: "number", value: previewScale, onChange: (e) => setPreviewScale(Number(e.target.value)), min: "0.1", max: "2", step: "0.1", className: "w-16 bg-purple-600 text-white px-1 py-0.5 rounded text-xs" } ), /* @__PURE__ */ import_react.default.createElement( "button", { onClick: () => setShowSourceCode(!showSourceCode), className: "px-2 py-0.5 bg-purple-600 rounded hover:bg-purple-500" }, /* @__PURE__ */ import_react.default.createElement( "i", { className: `fas ${showSourceCode ? "fa-eye" : "fa-code"}` } ) )), /* @__PURE__ */ import_react.default.createElement("span", { className: "text-xs opacity-75" }, "Drag to move")), /* @__PURE__ */ import_react.default.createElement( "div", { className: `w-[${previewWidth}px] h-[${previewHeight}px] transform scale-[${previewScale}] origin-top-left` }, showSourceCode ? /* @__PURE__ */ import_react.default.createElement("pre", { className: "bg-gray-900 text-gray-100 p-4 overflow-auto h-full" }, /* @__PURE__ */ import_react.default.createElement("code", null, container.code)) : /* @__PURE__ */ import_react.default.createElement( "iframe", { srcDoc: container.code, className: "w-full h-full border-none bg-white", title: `${container.type} preview` } ) ) )) ), /* @__PURE__ */ import_react.default.createElement("div", { className: "w-[240px] bg-gray-800 border-l border-gray-700 flex flex-col" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "p-4" }, /* @__PURE__ */ import_react.default.createElement("h2", { className: "text-lg font-semibold mb-4" }, "Game Types"), /* @__PURE__ */ import_react.default.createElement("div", { className: "grid grid-cols-2 gap-2" }, componentTypes.map((type) => /* @__PURE__ */ import_react.default.createElement( "button", { key: type.id, onClick: () => handleComponentSelect(type), className: `flex flex-col items-center p-2 rounded-lg ${selectedComponent === type.id ? "bg-purple-600" : "bg-gray-700"} hover:bg-purple-500 transition-colors text-sm` }, /* @__PURE__ */ import_react.default.createElement("i", { className: `fas ${type.icon} mb-1` }), /* @__PURE__ */ import_react.default.createElement("span", { className: "text-xs" }, type.name) )))), /* @__PURE__ */ import_react.default.createElement("div", { className: "flex-grow overflow-y-auto p-4" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "space-y-2" }, messages.map((message, index) => /* @__PURE__ */ import_react.default.createElement("div", { key: index, className: "text-sm bg-gray-700 rounded p-2" }, message.role === "user" ? /* @__PURE__ */ import_react.default.createElement("p", null, message.content) : /* @__PURE__ */ import_react.default.createElement("p", null, message.summary))))), /* @__PURE__ */ import_react.default.createElement("div", { className: "p-4 border-t border-gray-700" }, /* @__PURE__ */ import_react.default.createElement( "button", { onClick: handleSuggest, className: "w-full mb-2 bg-purple-700 text-white px-4 py-2 rounded hover:bg-purple-600" }, /* @__PURE__ */ import_react.default.createElement("i", { className: "fas fa-lightbulb mr-2" }), "Suggest Game Idea" ), /* @__PURE__ */ import_react.default.createElement( "textarea", { value: input, onChange: (e) => setInput(e.target.value), onKeyDown: handleKeyDown, className: "w-full border border-gray-600 rounded-xl px-3 py-2 resize-none bg-gray-700 text-gray-100 text-sm", rows: "3", placeholder: `Describe your ${selectedComponent} game...` } ), /* @__PURE__ */ import_react.default.createElement( "button", { onClick: handleSend, className: "w-full mt-2 bg-purple-600 text-white px-4 py-2 rounded hover:bg-purple-500" }, "Generate" )))), /* @__PURE__ */ import_react.default.createElement("footer", { className: "bg-gray-800 py-1 px-4 text-center text-xs text-gray-400" }, "Built with Create"))); } var page_default = MainComponent; return __toCommonJS(page_exports); })();