Empty Form

"use client"; "use client"; function MainComponent() { const [messages, setMessages] = React.useState([]); const [input, setInput] = React.useState(""); const [selectedCode, setSelectedCode] = React.useState(""); const [showSourceCode, setShowSourceCode] = React.useState(false); const [isLoading, setIsLoading] = React.useState(false); const [loadingProgress, setLoadingProgress] = React.useState(0); const [selectedComponent, setSelectedComponent] = React.useState(null); const [containers, setContainers] = React.useState([]); const [previewWidth, setPreviewWidth] = React.useState(1024); const [previewHeight, setPreviewHeight] = React.useState(768); const [previewScale, setPreviewScale] = React.useState(1); const [isDragging, setIsDragging] = React.useState(false); const [draggedId, setDraggedId] = React.useState(null); const [dragOffset, setDragOffset] = React.useState({ x: 0, y: 0 }); const chatContainerRef = React.useRef(null); const componentTypes = [ { id: "puzzle", name: "Puzzle", icon: "fa-puzzle-piece" }, { id: "arcade", name: "Arcade", icon: "fa-gamepad" }, { id: "card", name: "Card", icon: "fa-cards" }, { id: "quiz", name: "Quiz", icon: "fa-question" }, { id: "memory", name: "Memory", icon: "fa-brain" }, { id: "platformer", name: "Platform", icon: "fa-running" }, { id: "strategy", name: "Strategy", icon: "fa-chess" }, { id: "rpg", name: "RPG", icon: "fa-sword" } ]; const gameSubgenres = { puzzle: [ "Create a challenging puzzle game where players rearrange colored blocks to match patterns", "Design a physics-based puzzle game where players use gravity and momentum", "Build a word search puzzle with multiple difficulty levels and themes", "Make a sliding puzzle game with custom image upload feature", "Develop a connect-the-dots puzzle with animated solutions", "Create a maze solver with pathfinding visualization" ], arcade: [ "Build a retro-style space shooter with power-ups and boss battles", "Design a fast-paced endless runner with obstacle randomization", "Create a Tetris-inspired block stacking game with special pieces", "Make a pinball game with realistic physics and multiple tables", "Develop a bubble shooter with chain reaction mechanics", "Build an asteroid field navigation game with shield mechanics" ], card: [ "Create a memory card matching game with timer and scoring", "Design a solitaire variant with unique rule modifications", "Build a deck-building game with special card abilities", "Make a blackjack game with betting system and statistics", "Develop a poker game with AI opponents and tells", "Create a card battle game with element-based mechanics" ], quiz: [ "Build a trivia game with real-time multiplayer support", "Create a picture quiz with image recognition challenges", "Design a math quiz with progressive difficulty", "Make a geography quiz with interactive maps", "Develop a music quiz with audio clips and artist facts", "Build a science quiz with animated explanations" ], memory: [ "Create a Simon Says game with increasing pattern complexity", "Design a visual memory test with timed challenges", "Build a number sequence memory game with statistics", "Make a picture memory game with category matching", "Develop a sound pattern memory game with rhythm elements", "Create a spatial memory game with 3D elements" ], platformer: [ "Build a side-scrolling platformer with double-jump mechanics", "Create a vertical climbing game with power-ups", "Design a platformer with grappling hook mechanics", "Make a time-trial platformer with ghost replay feature", "Develop a platformer with wall-jumping and sliding", "Build a platformer with weather effect mechanics" ], strategy: [ "Create a turn-based strategy game with resource management", "Design a tower defense game with upgradeable units", "Build a civilization building game with tech trees", "Make a chess variant with special piece abilities", "Develop a tactical combat game with terrain effects", "Create a resource trading game with market dynamics" ], rpg: [ "Build a text-based RPG with branching storylines", "Create a character progression system with skill trees", "Design an inventory management system with crafting", "Make a turn-based combat system with status effects", "Develop a quest system with multiple endings", "Build a party management system with class synergies" ] }; React.useEffect(()=>{ const emptyForm = { id: Date.now(), type: "form", code: ` 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, 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); }, 2000); } 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(); } }; React.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__*/ React.createElement("div", { className: "flex h-screen bg-gray-900 text-gray-100", __source: { fileName: "", lineNumber: 279, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 flex flex-col", __source: { fileName: "", lineNumber: 280, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-purple-900 text-white p-2 flex items-center justify-between", __source: { fileName: "", lineNumber: 281, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-bold", __source: { fileName: "", lineNumber: 282, columnNumber: 11 }, __self: this }, "Game Generator"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 283, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: toggleSourceCode, className: "px-3 py-1 bg-purple-700 rounded hover:bg-purple-600", __source: { fileName: "", lineNumber: 284, columnNumber: 13 }, __self: this }, showSourceCode ? "Preview" : "Code"))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 flex", __source: { fileName: "", lineNumber: 292, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 bg-gray-50 relative overflow-auto", onDrop: handleDrop, onDragOver: handleDragOver, __source: { fileName: "", lineNumber: 293, columnNumber: 11 }, __self: this }, containers.map((container)=>/*#__PURE__*/ React.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", __source: { fileName: "", lineNumber: 299, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-purple-500 text-white px-2 py-1 text-sm flex justify-between items-center", __source: { fileName: "", lineNumber: 311, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 312, columnNumber: 19 }, __self: this }, container.type), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 313, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.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", __source: { fileName: "", lineNumber: 314, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 320, columnNumber: 21 }, __self: this }, "x"), /*#__PURE__*/ React.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", __source: { fileName: "", lineNumber: 321, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.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", __source: { fileName: "", lineNumber: 327, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowSourceCode(!showSourceCode), className: "px-2 py-0.5 bg-purple-600 rounded hover:bg-purple-500", __source: { fileName: "", lineNumber: 336, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${showSourceCode ? "fa-eye" : "fa-code"}`, __source: { fileName: "", lineNumber: 340, columnNumber: 23 }, __self: this }))), /*#__PURE__*/ React.createElement("span", { className: "text-xs opacity-75", __source: { fileName: "", lineNumber: 347, columnNumber: 19 }, __self: this }, "Drag to move")), /*#__PURE__*/ React.createElement("div", { className: `w-[${previewWidth}px] h-[${previewHeight}px] transform scale-[${previewScale}] origin-top-left`, __source: { fileName: "", lineNumber: 349, columnNumber: 17 }, __self: this }, showSourceCode ? /*#__PURE__*/ React.createElement("pre", { className: "bg-gray-900 text-gray-100 p-4 overflow-auto h-full", __source: { fileName: "", lineNumber: 353, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("code", { __source: { fileName: "", lineNumber: 354, columnNumber: 23 }, __self: this }, container.code)) : /*#__PURE__*/ React.createElement("iframe", { srcDoc: container.code, className: "w-full h-full border-none bg-white", title: `${container.type} preview`, __source: { fileName: "", lineNumber: 357, columnNumber: 21 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { className: "w-[240px] bg-gray-800 border-l border-gray-700 flex flex-col", __source: { fileName: "", lineNumber: 367, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 368, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold mb-4", __source: { fileName: "", lineNumber: 369, columnNumber: 15 }, __self: this }, "Game Types"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-2", __source: { fileName: "", lineNumber: 370, columnNumber: 15 }, __self: this }, componentTypes.map((type)=>/*#__PURE__*/ React.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`, __source: { fileName: "", lineNumber: 372, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${type.icon} mb-1`, __source: { fileName: "", lineNumber: 381, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-xs", __source: { fileName: "", lineNumber: 382, columnNumber: 21 }, __self: this }, type.name))))), /*#__PURE__*/ React.createElement("div", { className: "flex-grow overflow-y-auto p-4", __source: { fileName: "", lineNumber: 387, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 388, columnNumber: 15 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "text-sm bg-gray-700 rounded p-2", __source: { fileName: "", lineNumber: 390, columnNumber: 19 }, __self: this }, message.role === "user" ? /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 392, columnNumber: 23 }, __self: this }, message.content) : /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 394, columnNumber: 23 }, __self: this }, message.summary))))), /*#__PURE__*/ React.createElement("div", { className: "p-4 border-t border-gray-700", __source: { fileName: "", lineNumber: 400, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleSuggest, className: "w-full mb-2 bg-purple-700 text-white px-4 py-2 rounded hover:bg-purple-600", __source: { fileName: "", lineNumber: 401, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-lightbulb mr-2", __source: { fileName: "", lineNumber: 405, columnNumber: 17 }, __self: this }), "Suggest Game Idea"), /*#__PURE__*/ React.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...`, __source: { fileName: "", lineNumber: 408, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleSend, className: "w-full mt-2 bg-purple-600 text-white px-4 py-2 rounded hover:bg-purple-500", __source: { fileName: "", lineNumber: 416, columnNumber: 15 }, __self: this }, "Generate")))), /*#__PURE__*/ React.createElement("footer", { className: "bg-gray-800 py-1 px-4 text-center text-xs text-gray-400", __source: { fileName: "", lineNumber: 425, columnNumber: 9 }, __self: this }, "Built with Create"))); }