/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState, useRef, useEffect } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; // Expanded Game Element Types const ELEMENT_TYPES = [ 'player', 'enemy', 'obstacle', 'collectible', 'platform', 'power-up', 'boss', 'terrain' ]; // More Detailed Game Mechanics const GAME_MECHANICS = [ 'Platformer', 'Top-Down Adventure', 'Puzzle', 'Survival', 'Endless Runner', 'RPG', 'Strategy', 'Roguelike' ]; function AIGameBuilderLanding() { const [activeSection, setActiveSection] = useState('home'); const [gameMechanic, setGameMechanic] = useState(''); const [gameElements, setGameElements] = useState([]); const [aiSuggestions, setAiSuggestions] = useState(''); const canvasRef = useRef(null); const [selectedElement, setSelectedElement] = useState(null); // New Chat State const [messages, setMessages] = useState([ { role: 'assistant', content: 'Hello! I\'m your AI game design assistant. How can I help you create an amazing game today? 🎮' } ]); const [inputMessage, setInputMessage] = useState(''); const [isLoading, setIsLoading] = useState(false); const chatEndRef = useRef(null); const generateAISuggestion = async () => { try { const { OpenAI } = await import("https://esm.town/v/std/openai"); const openai = new OpenAI(); if (!gameMechanic) { alert("Please select a game mechanic first!"); return; } const prompt = `Advanced game design for a ${gameMechanic} game: - Unique core gameplay loop - Innovative mechanics - Potential narrative themes - Distinctive art style or visual concept - Potential monetization or player engagement strategy`; const response = await openai.chat.completions.create({ model: "gpt-4o-mini", messages: [{ role: "user", content: prompt }], max_tokens: 400 }); setAiSuggestions(response.choices[0].message.content || 'No suggestions generated.'); } catch (error) { console.error("AI Suggestion Error:", error); } }; const sendChatMessage = async () => { if (!inputMessage.trim()) return; const userMessage = { role: 'user', content: inputMessage }; const updatedMessages = [...messages, userMessage]; setMessages(updatedMessages); setInputMessage(''); setIsLoading(true); try { const { OpenAI } = await import("https://esm.town/v/std/openai"); const openai = new OpenAI(); const response = await openai.chat.completions.create({ model: "gpt-4o-mini", messages: [ { role: 'system', content: 'You are a helpful AI game design assistant. Focus on providing creative, actionable advice for game development.' }, ...updatedMessages ], max_tokens: 300 }); const aiResponse = { role: 'assistant', content: response.choices[0].message.content || 'I\'m having trouble generating a response. Could you rephrase your question?' }; setMessages(prev => [...prev, aiResponse]); } catch (error) { console.error("Chat Error:", error); setMessages(prev => [...prev, { role: 'assistant', content: 'Sorry, there was an error processing your message. Please try again.' }]); } finally { setIsLoading(false); } }; useEffect(() => { chatEndRef.current?.scrollIntoView({ behavior: "smooth" }); }, [messages]); const renderSection = () => { switch(activeSection) { case 'home': return (

🎮 AI Game Builder

Create your dream game using AI-powered design tools

); case 'chat': return (

{messages.map((msg, index) => (

{msg.content}

))} {isLoading && (

Thinking... 🤔

)}

setInputMessage(e.target.value)} onKeyPress={(e) => e.key === 'Enter' && sendChatMessage()} placeholder="Ask about game design..." style={{ flex: 1, padding: '10px', backgroundColor: '#16213e', color: 'white', border: 'none', borderRadius: '5px', marginRight: '10px' }} />

); // Existing sections (learn, builder) remain unchanged case 'learn': return (

How AI Helps You Build Games 🤖

🎲 Generate unique game concepts
🧩 Suggest innovative gameplay mechanics
📝 Create narrative frameworks
🎨 Provide design inspiration
🚀 Accelerate game development process

); case 'builder': return ( <>

🎮 2D Game Builder AI

{aiSuggestions && (

AI Game Suggestion 💡

{aiSuggestions}

)} {/* Rest of the existing game builder code */}

); default: return null; } }; return (

{renderSection()}

); } function client() { const root = document.getElementById("root"); if (root) { createRoot(root).render(); } } if (typeof document !== "undefined") { client(); } export default async function server(request: Request) { return new Response(` AI Game Builder

`, { headers: { 'Content-Type': 'text/html' } }); }

kutasartem