\n \n \n \n `;\n \n // Load the HTML content into the iframe\n const blob = new Blob([htmlContent], { type: 'text/html' });\n const url = URL.createObjectURL(blob);\n this.iframe.src = url;\n \n // Set up message listener for game state updates\n window.addEventListener('message', this.handleGameMessage);\n \n return true;\n } catch (error) {\n console.error('Error running game:', error);\n return false;\n }\n }\n \n private handleGameMessage = (event: MessageEvent) => {\n if (event.data.type === 'gameState') {\n this.gameState = {\n ...this.gameState,\n ...event.data.state\n };\n } else if (event.data.type === 'error') {\n console.error('Game error:', event.data.error);\n }\n };\n \n getGameState(): GameState {\n return {...this.gameState};\n }\n \n stopGame() {\n window.removeEventListener('message', this.handleGameMessage);\n if (this.iframe) {\n this.iframe.src = 'about:blank';\n }\n }\n}\n\n// Code editor component\nfunction CodeEditor({ initialCode, onChange }: { initialCode: string, onChange: (code: string) => void }) {\n const editorRef = useRef(null);\n const monacoInstance = useRef(null);\n \n useEffect(() => {\n if (editorRef.current) {\n monacoInstance.current = monaco.editor.create(editorRef.current, {\n value: initialCode,\n language: 'typescript',\n theme: 'vs-dark',\n automaticLayout: true,\n minimap: { enabled: false }\n });\n \n monacoInstance.current.onDidChangeModelContent(() => {\n onChange(monacoInstance.current.getValue());\n });\n }\n \n return () => {\n if (monacoInstance.current) {\n monacoInstance.current.dispose();\n }\n };\n }, []);\n \n return

;\n}\n\n// Logging utility function\nfunction log(level: \"INFO\" | \"WARN\" | \"ERROR\", message: string, context?: any) {\n const timestamp = new Date().toISOString();\n console[level.toLowerCase() as 'info' | 'warn' | 'error'](`[${timestamp}] [${level}] ${message}`, context || '');\n}\n\n// Main React application component\nfunction App() {\n // State management for messages, games, and UI\n const [messages, setMessages] = useState([\n {\n role: \"system\",\n content: \"Welcome to the Game Development Sandbox. I'm your assistant that can help you create, modify, and run simple browser games. What kind of game would you like to build today?\",\n timestamp: new Date()\n }\n ]);\n const [inputMessage, setInputMessage] = useState(\"\");\n const [isLoading, setIsLoading] = useState(false);\n const [error, setError] = useState(null);\n const [currentGame, setCurrentGame] = useState(null);\n const [gameCode, setGameCode] = useState(\"\");\n const [showEditor, setShowEditor] = useState(false);\n \n const gameRunnerRef = useRef(null);\n const gameContainerRef = useRef(null);\n \n // Initialize game runner\n useEffect(() => {\n if (gameContainerRef.current && !gameRunnerRef.current) {\n gameRunnerRef.current = new GameRunner(gameContainerRef.current);\n }\n }, []);\n \n // Function to send user message and process responses\n const sendMessage = async () => {\n if (!inputMessage.trim()) return;\n \n const userMessage: ChatMessage = {\n role: \"user\",\n content: inputMessage,\n timestamp: new Date()\n };\n \n // Add game state if a game is running\n if (currentGame && gameRunnerRef.current) {\n userMessage.gameState = gameRunnerRef.current.getGameState();\n }\n \n setMessages(prev => [...prev, userMessage]);\n setInputMessage(\"\");\n setIsLoading(true);\n \n try {\n log(\"INFO\", \"Sending message to agent\", { message: userMessage.content });\n \n // Prepare the complete conversation history for context\n const conversationHistory = messages.map(m => ({\n role: m.role,\n content: m.content,\n gameState: m.gameState\n }));\n \n // Add the new user message\n conversationHistory.push({\n role: userMessage.role,\n content: userMessage.content,\n gameState: userMessage.gameState\n });\n \n // Send request to agent processing endpoint\n const response = await fetch(\"/process\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({\n messages: conversationHistory,\n currentGame: currentGame\n }),\n });\n \n if (!response.ok) {\n throw new Error(`Server responded with status: ${response.status}`);\n }\n \n const agentResponse: AgentResponse = await response.json();\n \n // Handle different types of agent responses\n const agentMessage: ChatMessage = {\n role: \"agent\",\n content: agentResponse.response,\n timestamp: new Date()\n };\n \n setMessages(prev => [...prev, agentMessage]);\n \n // Handle game creation or modification\n if (agentResponse.actionType === \"create_game\" || agentResponse.actionType === \"modify_game\") {\n if (agentResponse.gameSpec) {\n setCurrentGame(agentResponse.gameSpec);\n setGameCode(agentResponse.gameSpec.code);\n setShowEditor(true);\n \n // Wait for UI to update before running the game\n setTimeout(() => {\n if (gameRunnerRef.current) {\n gameRunnerRef.current.runGame(agentResponse.gameSpec!);\n }\n }, 100);\n }\n }\n // Handle game execution\n else if (agentResponse.actionType === \"run_game\") {\n if (currentGame && gameRunnerRef.current) {\n const updatedGame = {\n ...currentGame,\n code: gameCode,\n updated: new Date()\n };\n setCurrentGame(updatedGame);\n gameRunnerRef.current.runGame(updatedGame);\n }\n }\n \n } catch (error) {\n log(\"ERROR\", \"Error processing message\", { error });\n setError(error instanceof Error ? error.message : \"An unknown error occurred\");\n \n // Add error message to chat\n setMessages(prev => [\n ...prev,\n {\n role: \"system\",\n content: `Error: ${error instanceof Error ? error.message : \"An unknown error occurred\"}`,\n timestamp: new Date()\n }\n ]);\n } finally {\n setIsLoading(false);\n }\n };\n \n // Handle code changes in the editor\n const handleCodeChange = (newCode: string) => {\n setGameCode(newCode);\n };\n \n // Run the current game with updated code\n const runCurrentGame = () => {\n if (currentGame && gameRunnerRef.current) {\n const updatedGame = {\n ...currentGame,\n code: gameCode,\n updated: new Date()\n };\n setCurrentGame(updatedGame);\n gameRunnerRef.current.runGame(updatedGame);\n \n // Add system message about game execution\n setMessages(prev => [\n ...prev,\n {\n role: \"system\",\n content: `Running updated game: ${updatedGame.name}`,\n timestamp: new Date()\n }\n ]);\n }\n };\n \n // UI rendering with Tailwind CSS classes\n return (\n

\n {/* Header */}\n

Game Development Sandbox

\n \n {/* Main content area */}\n

\n {/* Chat and message area */}\n

\n {/* Chat messages */}\n

\n {messages.map((message, index) => (\n

\n {message.role === \"user\" ? \"You\" : \n message.role === \"agent\" ? \"Agent\" : \"System\"}\n

{message.content}

\n {message.gameState && (\n

Game State:

{JSON.stringify(message.gameState, null, 2)}

\n )}\n

\n ))}\n {isLoading && (\n

\n )}\n

\n \n {/* Input area */}\n

\n setInputMessage(e.target.value)}\n onKeyPress={(e) => e.key === \"Enter\" && sendMessage()}\n placeholder=\"Ask about game development or give instructions...\"\n className=\"flex-1 p-2 border rounded-l focus:outline-none focus:ring-2 focus:ring-blue-500\"\n disabled={isLoading}\n />\n \n Send\n \n

\n \n {/* Game and code editor area */}\n

\n {currentGame ? (\n <>\n {/* Game title and controls */}\n

{currentGame.name}

\n setShowEditor(!showEditor)}\n className=\"px-3 py-1 bg-gray-200 rounded hover:bg-gray-300\"\n >\n {showEditor ? \"Hide Code\" : \"Show Code\"}\n \n \n Run Game\n \n

\n \n {/* Game description */}\n

{currentGame.description}

\n \n {/* Code editor */}\n {showEditor && (\n

\n \n

\n )}\n \n {/* Game container */}\n

\n \n ) : (\n

\n \n

No game loaded

Ask the agent to create a new game or load an existing one

\n )}\n

\n );\n}\n\n// Initialize React on client side\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\n// Server-side handler for all API routes\nexport default async function server(request: Request): Promise {\n // Import necessary dependencies\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n\n // Server-side logging function\n function serverLog(level: \"INFO\" | \"WARN\" | \"ERROR\", message: string, context?: any) {\n const timestamp = new Date().toISOString();\n console[level.toLowerCase() as 'info' | 'warn' | 'error'](`[${timestamp}] [${level}] ${message}`, context || '');\n }\n\n // Extract API key from URL\n const extractKey = (url: URL): string => {\n // In a real implementation, this would extract an API key\n // For now, return a placeholder\n return \"dummy-api-key\";\n };\n\n // Initialize OpenAI client\n const openai = new OpenAI();\n \n // Set constants\n const KEY = extractKey(new URL(import.meta.url));\n const SCHEMA_VERSION = 1;\n const CACHE_TTL = 24 * 60 * 60 * 1000; // 24 hours in milliseconds\n\n try {\n // Initialize database for game storage\n const db = await sqlite(`./games-db-v${SCHEMA_VERSION}.sqlite`);\n \n // Create games table if it doesn't exist\n await db.execute(`\n CREATE TABLE IF NOT EXISTS games (\n id TEXT PRIMARY KEY,\n name TEXT NOT NULL,\n description TEXT NOT NULL,\n code TEXT NOT NULL,\n version INTEGER NOT NULL DEFAULT 1,\n created TEXT NOT NULL,\n updated TEXT NOT NULL\n )\n `);\n \n // Create game_templates table for starter templates\n await db.execute(`\n CREATE TABLE IF NOT EXISTS game_templates (\n id TEXT PRIMARY KEY,\n name TEXT NOT NULL,\n description TEXT NOT NULL,\n code TEXT NOT NULL,\n category TEXT NOT NULL,\n difficulty TEXT NOT NULL,\n created TEXT NOT NULL\n )\n `);\n \n // Insert some game templates if the table is empty\n const templateCount = await db.get(\"SELECT COUNT(*) as count FROM game_templates\");\n if (templateCount.count === 0) {\n // Insert basic game templates\n // Simple Pong template\n await db.execute(`\n INSERT INTO game_templates (id, name, description, code, category, difficulty, created)\n VALUES (?, ?, ?, ?, ?, ?, ?)\n `, [\n uuidv4(),\n \"Simple Pong\",\n \"A basic implementation of the classic Pong game\",\n `// Simple Pong Game Template\nconst canvas = document.getElementById('game-canvas');\nconst ctx = canvas.getContext('2d');\nconst debugPanel = document.getElementById('debug-panel');\n\n// Game constants\nconst PADDLE_WIDTH = 10;\nconst PADDLE_HEIGHT = 60;\nconst BALL_SIZE = 10;\nconst PADDLE_SPEED = 5;\n\n// Game state\nlet gameState = {\n score: 0,\n level: 1,\n lives: 3,\n gameOver: false,\n custom: {\n playerPaddle: { x: 20, y: 200, dy: 0 },\n computerPaddle: { x: 570, y: 200, dy: 0 },\n ball: { x: 300, y: 200, dx: 3, dy: 3 }\n }\n};\n\n// Resize canvas to fit container\nfunction resizeCanvas() {\n canvas.width = canvas.parentElement.clientWidth;\n canvas.height = canvas.parentElement.clientHeight;\n}\n\n// Initialize game\nfunction initGame() {\n // Set up canvas\n resizeCanvas();\n window.addEventListener('resize', resizeCanvas);\n \n // Set up game loop\n requestAnimationFrame(gameLoop);\n \n // Set up keyboard input\n window.addEventListener('keydown', (e) => {\n if (e.key === 'ArrowUp') {\n gameState.custom.playerPaddle.dy = -PADDLE_SPEED;\n } else if (e.key === 'ArrowDown') {\n gameState.custom.playerPaddle.dy = PADDLE_SPEED;\n }\n });\n \n window.addEventListener('keyup', (e) => {\n if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n gameState.custom.playerPaddle.dy = 0;\n }\n });\n}\n\n// Game loop\nfunction gameLoop() {\n update();\n render();\n \n // Report game state to parent window\n window.reportGameState(gameState);\n \n requestAnimationFrame(gameLoop);\n}\n\n// Update game state\nfunction update() {\n // Move player paddle\n gameState.custom.playerPaddle.y += gameState.custom.playerPaddle.dy;\n \n // Keep paddle within bounds\n if (gameState.custom.playerPaddle.y < 0) {\n gameState.custom.playerPaddle.y = 0;\n } else if (gameState.custom.playerPaddle.y > canvas.height - PADDLE_HEIGHT) {\n gameState.custom.playerPaddle.y = canvas.height - PADDLE_HEIGHT;\n }\n \n // Simple AI for computer paddle\n const paddleCenter = gameState.custom.computerPaddle.y + PADDLE_HEIGHT / 2;\n const ballY = gameState.custom.ball.y;\n \n if (paddleCenter < ballY - 10) {\n gameState.custom.computerPaddle.y += 3;\n } else if (paddleCenter > ballY + 10) {\n gameState.custom.computerPaddle.y -= 3;\n }\n \n // Keep computer paddle within bounds\n if (gameState.custom.computerPaddle.y < 0) {\n gameState.custom.computerPaddle.y = 0;\n } else if (gameState.custom.computerPaddle.y > canvas.height - PADDLE_HEIGHT) {\n gameState.custom.computerPaddle.y = canvas.height - PADDLE_HEIGHT;\n }\n \n // Move ball\n gameState.custom.ball.x += gameState.custom.ball.dx;\n gameState.custom.ball.y += gameState.custom.ball.dy;\n \n // Ball collision with top and bottom\n if (gameState.custom.ball.y < 0 || gameState.custom.ball.y > canvas.height - BALL_SIZE) {\n gameState.custom.ball.dy = -gameState.custom.ball.dy;\n }\n \n // Ball collision with paddles\n if (\n gameState.custom.ball.x <= gameState.custom.playerPaddle.x + PADDLE_WIDTH &&\n gameState.custom.ball.y >= gameState.custom.playerPaddle.y &&\n gameState.custom.ball.y <= gameState.custom.playerPaddle.y + PADDLE_HEIGHT\n ) {\n gameState.custom.ball.dx = -gameState.custom.ball.dx;\n gameState.score += 10;\n }\n \n if (\n gameState.custom.ball.x + BALL_SIZE >= gameState.custom.computerPaddle.x &&\n gameState.custom.ball.y >= gameState.custom.computerPaddle.y &&\n gameState.custom.ball.y <= gameState.custom.computerPaddle.y + PADDLE_HEIGHT\n ) {\n gameState.custom.ball.dx = -gameState.custom.ball.dx;\n gameState.score += 10;\n }\n \n // Ball out of bounds\n if (gameState.custom.ball.x < 0 || gameState.custom.ball.x > canvas.width) {\n // Reset ball\n gameState.custom.ball.x = canvas.width / 2;\n gameState.custom.ball.y = canvas.height / 2;\n gameState.custom.ball.dx = gameState.custom.ball.dx > 0 ? 3 : -3;\n gameState.custom.ball.dy = gameState.custom.ball.dy > 0 ? 3 : -3;\n \n gameState.lives--;\n \n if (gameState.lives <= 0) {\n gameState.gameOver = true;\n }\n }\n}\n\n// Render game\nfunction render() {\n // Clear canvas\n ctx.fillStyle = 'black';\n ctx.fillRect(0, 0, canvas.width, canvas.height);\n \n // Draw paddles\n ctx.fillStyle = 'white';\n ctx.fillRect(\n gameState.custom.playerPaddle.x,\n gameState.custom.playerPaddle.y,\n PADDLE_WIDTH,\n PADDLE_HEIGHT\n );\n \n ctx.fillRect(\n gameState.custom.computerPaddle.x,\n gameState.custom.computerPaddle.y,\n PADDLE_WIDTH,\n PADDLE_HEIGHT\n );\n \n // Draw ball\n ctx.fillRect(\n gameState.custom.ball.x,\n gameState.custom.ball.y,\n BALL_SIZE,\n BALL_SIZE\n );\n \n // Draw score\n ctx.font = '20px Arial';\n ctx.fillText(\\`Score: \\${gameState.score}\\`, 20, 30);\n ctx.fillText(\\`Lives: \\${gameState.lives}\\`, 20, 60);\n \n // Game over\n if (gameState.gameOver) {\n ctx.fillStyle = 'rgba(0, 0, 0, 0.75)';\n ctx.fillRect(0, 0, canvas.width, canvas.height);\n \n ctx.fillStyle = 'white';\n ctx.font = '36px Arial';\n ctx.textAlign = 'center';\n ctx.fillText('Game Over', canvas.width / 2, canvas.height / 2);\n ctx.font = '24px Arial';\n ctx.fillText(\\`Final Score: \\${gameState.score}\\`, canvas.width / 2, canvas.height / 2 + 40);\n ctx.font = '18px Arial';\n ctx.fillText('Press F5 to restart', canvas.width / 2, canvas.height / 2 + 80);\n }\n \n // Update debug panel\n debugPanel.textContent = \\`\n Ball: (x: \\${Math.round(gameState.custom.ball.x)}, y: \\${Math.round(gameState.custom.ball.y)})\n Velocity: (dx: \\${gameState.custom.ball.dx}, dy: \\${gameState.custom.ball.dy})\n Score: \\${gameState.score}\n Lives: \\${gameState.lives}\n \\`;\n}`,\n \"arcade\",\n \"beginner\",\n new Date().toISOString()\n ]);\n \n // Snake game template\n await db.execute(`\n INSERT INTO game_templates (id, name, description, code, category, difficulty, created)\n VALUES (?, ?, ?, ?, ?, ?, ?)\n `, [\n uuidv4(),\n \"Snake Game\",\n \"Classic snake game where you collect food to grow longer\",\n `// Snake Game Template\nconst canvas = document.getElementById('game-canvas');\nconst ctx = canvas.getContext('2d');\nconst debugPanel = document.getElementById('debug-panel');\n\n// Game constants\nconst GRID_SIZE = 20;\nconst SNAKE_SPEED = 150; // ms per move\n\n// Game state\nlet gameState = {\n score: 0,\n level: 1,\n lives: 1,\n gameOver: false,\n custom: {\n snake: [\n { x: 10, y: 10 }, // head\n ],\n food: { x: 15, y: 15 },\n direction: { x: 1, y: 0 },\n lastMoveTime: 0\n }\n};\n\n// Initialize game\nfunction initGame() {\n // Resize canvas\n resizeCanvas();\n window.addEventListener('resize', resizeCanvas);\n \n // Set up keyboard controls\n window.addEventListener('keydown', handleKeyDown);\n \n // Start game loop\n requestAnimationFrame(gameLoop);\n \n // Place food\n placeFood();\n}\n\n// Resize canvas to fit container\nfunction resizeCanvas() {\n canvas.width = Math.floor(canvas.parentElement.clientWidth / GRID_SIZE) * GRID_SIZE;\n canvas.height = Math.floor(canvas.parentElement.clientHeight / GRID_SIZE) * GRID_SIZE;\n}\n\n// Handle keyboard input\nfunction handleKeyDown(e) {\n // Prevent arrow keys from scrolling the page\n if(['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key)) {\n e.preventDefault();\n }\n \n switch(e.key) {\n case 'ArrowUp':\n if (gameState.custom.direction.y === 0) {\n gameState.custom.direction = { x: 0, y: -1 };\n }\n break;\n case 'ArrowDown':\n if (gameState.custom.direction.y === 0) {\n gameState.custom.direction = { x: 0, y: 1 };\n }\n break;\n case 'ArrowLeft':\n if (gameState.custom.direction.x === 0) {\n gameState.custom.direction = { x: -1, y: 0 };\n }\n break;\n case 'ArrowRight':\n if (gameState.custom.direction.x === 0) {\n gameState.custom.direction = { x: 1, y: 0 };\n }\n break;\n }\n}\n\n// Place food at random position\n// Place food at random position\nfunction placeFood() {\n const gridWidth = Math.floor(canvas.width / GRID_SIZE);\n const gridHeight = Math.floor(canvas.height / GRID_SIZE);\n \n // Generate random position that's not on the snake\n let newFood;\n do {\n newFood = {\n x: Math.floor(Math.random() * gridWidth),\n y: Math.floor(Math.random() * gridHeight)\n };\n } while (gameState.custom.snake.some(segment => \n segment.x === newFood.x && segment.y === newFood.y));\n \n gameState.custom.food = newFood;\n}\n\n// Main game loop\nfunction gameLoop(timestamp) {\n // Update\n if (!gameState.gameOver) {\n // Move snake at defined intervals\n if (timestamp - gameState.custom.lastMoveTime > SNAKE_SPEED) {\n moveSnake();\n gameState.custom.lastMoveTime = timestamp;\n }\n }\n \n // Render\n render();\n \n // Report game state to parent window\n window.reportGameState(gameState);\n \n // Continue game loop\n requestAnimationFrame(gameLoop);\n}\n\n// Move snake based on current direction\nfunction moveSnake() {\n // Get current head\n const head = gameState.custom.snake[0];\n \n // Calculate new head position\n const newHead = {\n x: head.x + gameState.custom.direction.x,\n y: head.y + gameState.custom.direction.y\n };\n \n // Check for collisions with walls\n const gridWidth = Math.floor(canvas.width / GRID_SIZE);\n const gridHeight = Math.floor(canvas.height / GRID_SIZE);\n \n if (\n newHead.x < 0 || \n newHead.x >= gridWidth || \n newHead.y < 0 || \n newHead.y >= gridHeight\n ) {\n gameState.gameOver = true;\n return;\n }\n \n // Check for collision with self\n if (gameState.custom.snake.some(segment => \n segment.x === newHead.x && segment.y === newHead.y)) {\n gameState.gameOver = true;\n return;\n }\n \n // Add new head to snake\n gameState.custom.snake.unshift(newHead);\n \n // Check for food collision\n if (newHead.x === gameState.custom.food.x && newHead.y === gameState.custom.food.y) {\n // Increase score\n gameState.score += 10;\n \n // Level up every 100 points\n if (gameState.score % 100 === 0) {\n gameState.level++;\n }\n \n // Place new food\n placeFood();\n } else {\n // If no food was eaten, remove the tail\n gameState.custom.snake.pop();\n }\n}\n\n// Render game\nfunction render() {\n // Clear canvas\n ctx.fillStyle = 'black';\n ctx.fillRect(0, 0, canvas.width, canvas.height);\n \n // Draw grid (optional, for debugging)\n if (gameState.level === 1) {\n ctx.strokeStyle = '#333';\n for (let x = 0; x < canvas.width; x += GRID_SIZE) {\n ctx.beginPath();\n ctx.moveTo(x, 0);\n ctx.lineTo(x, canvas.height);\n ctx.stroke();\n }\n for (let y = 0; y < canvas.height; y += GRID_SIZE) {\n ctx.beginPath();\n ctx.moveTo(0, y);\n ctx.lineTo(canvas.width, y);\n ctx.stroke();\n }\n }\n \n // Draw snake\n ctx.fillStyle = 'green';\n gameState.custom.snake.forEach((segment, index) => {\n // Head is slightly different color\n if (index === 0) {\n ctx.fillStyle = 'lime';\n } else {\n ctx.fillStyle = 'green';\n }\n \n ctx.fillRect(\n segment.x * GRID_SIZE, \n segment.y * GRID_SIZE, \n GRID_SIZE, \n GRID_SIZE\n );\n \n // Add eye details to head\n if (index === 0) {\n ctx.fillStyle = 'black';\n const eyeSize = GRID_SIZE / 5;\n const eyeOffset = GRID_SIZE / 3;\n \n // Left eye\n ctx.fillRect(\n segment.x * GRID_SIZE + eyeOffset, \n segment.y * GRID_SIZE + eyeOffset, \n eyeSize, \n eyeSize\n );\n \n // Right eye\n ctx.fillRect(\n segment.x * GRID_SIZE + GRID_SIZE - eyeOffset - eyeSize, \n segment.y * GRID_SIZE + eyeOffset, \n eyeSize, \n eyeSize\n );\n }\n });\n \n // Draw food\n ctx.fillStyle = 'red';\n ctx.beginPath();\n ctx.arc(\n gameState.custom.food.x * GRID_SIZE + GRID_SIZE / 2,\n gameState.custom.food.y * GRID_SIZE + GRID_SIZE / 2,\n GRID_SIZE / 2,\n 0,\n Math.PI * 2\n );\n ctx.fill();\n \n // Draw score and level\n ctx.fillStyle = 'white';\n ctx.font = '20px Arial';\n ctx.textAlign = 'left';\n ctx.fillText(`Score: ${gameState.score}`, 10, 30);\n ctx.fillText(`Level: ${gameState.level}`, 10, 60);\n \n // Game over screen\n if (gameState.gameOver) {\n ctx.fillStyle = 'rgba(0, 0, 0, 0.75)';\n ctx.fillRect(0, 0, canvas.width, canvas.height);\n \n ctx.fillStyle = 'white';\n ctx.font = '36px Arial';\n ctx.textAlign = 'center';\n ctx.fillText('Game Over', canvas.width / 2, canvas.height / 2);\n ctx.font = '24px Arial';\n ctx.fillText(`Final Score: ${gameState.score}`, canvas.width / 2, canvas.height / 2 + 40);\n ctx.font = '18px Arial';\n ctx.fillText('Press F5 to restart', canvas.width / 2, canvas.height / 2 + 80);\n }\n \n // Update debug panel\n debugPanel.textContent = `\n Snake Length: ${gameState.custom.snake.length}\n Direction: (${gameState.custom.direction.x}, ${gameState.custom.direction.y})\n Head Position: (${gameState.custom.snake[0].x}, ${gameState.custom.snake[0].y})\n Food Position: (${gameState.custom.food.x}, ${gameState.custom.food.y})\n Score: ${gameState.score}\n Level: ${gameState.level}\n `;\n}`,\n \"arcade\",\n \"intermediate\",\n new Date().toISOString()\n ]);\n \n // Platformer template\n await db.execute(`\n INSERT INTO game_templates (id, name, description, code, category, difficulty, created)\n VALUES (?, ?, ?, ?, ?, ?, ?)\n `, [\n uuidv4(),\n \"Platformer\",\n \"A simple platformer game with gravity, jumping and obstacles\",\n `// Platformer Game Template\nconst canvas = document.getElementById('game-canvas');\nconst ctx = canvas.getContext('2d');\nconst debugPanel = document.getElementById('debug-panel');\n\n// Game constants\nconst GRAVITY = 0.5;\nconst JUMP_FORCE = -12;\nconst MOVEMENT_SPEED = 5;\n\n// Game state\nlet gameState = {\n score: 0,\n level: 1,\n lives: 3,\n gameOver: false,\n custom: {\n player: {\n x: 100,\n y: 100,\n width: 30,\n height: 50,\n velocityX: 0,\n velocityY: 0,\n isJumping: false,\n facingRight: true\n },\n platforms: [\n // Starting platform\n { x: 0, y: 500, width: 800, height: 20 },\n // Other platforms\n { x: 200, y: 400, width: 200, height: 20 },\n { x: 500, y: 300, width: 200, height: 20 },\n { x: 100, y: 200, width: 200, height: 20 }\n ],\n coins: [\n { x: 250, y: 370, width: 20, height: 20, collected: false },\n { x: 550, y: 270, width: 20, height: 20, collected: false },\n { x: 150, y: 170, width: 20, height: 20, collected: false }\n ],\n keys: {\n left: false,\n right: false,\n up: false\n },\n camera: {\n x: 0,\n y: 0\n }\n }\n};\n\n// Initialize game\nfunction initGame() {\n // Set up canvas\n resizeCanvas();\n window.addEventListener('resize', resizeCanvas);\n \n // Set up keyboard input\n window.addEventListener('keydown', (e) => {\n if (e.key === 'ArrowLeft') {\n gameState.custom.keys.left = true;\n gameState.custom.player.facingRight = false;\n } else if (e.key === 'ArrowRight') {\n gameState.custom.keys.right = true;\n gameState.custom.player.facingRight = true;\n } else if (e.key === 'ArrowUp' || e.key === ' ') {\n gameState.custom.keys.up = true;\n }\n \n // Prevent scrolling with arrow keys\n if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', ' '].includes(e.key)) {\n e.preventDefault();\n }\n });\n \n window.addEventListener('keyup', (e) => {\n if (e.key === 'ArrowLeft') {\n gameState.custom.keys.left = false;\n } else if (e.key === 'ArrowRight') {\n gameState.custom.keys.right = false;\n } else if (e.key === 'ArrowUp' || e.key === ' ') {\n gameState.custom.keys.up = false;\n }\n });\n \n // Start game loop\n requestAnimationFrame(gameLoop);\n}\n\n// Resize canvas to fit container\nfunction resizeCanvas() {\n canvas.width = canvas.parentElement.clientWidth;\n canvas.height = canvas.parentElement.clientHeight;\n}\n\n// Game loop\nfunction gameLoop() {\n if (!gameState.gameOver) {\n update();\n }\n render();\n \n // Report game state to parent window\n window.reportGameState(gameState);\n \n requestAnimationFrame(gameLoop);\n}\n\n// Update game state\nfunction update() {\n // Apply gravity\n gameState.custom.player.velocityY += GRAVITY;\n \n // Movement\n if (gameState.custom.keys.left) {\n gameState.custom.player.velocityX = -MOVEMENT_SPEED;\n } else if (gameState.custom.keys.right) {\n gameState.custom.player.velocityX = MOVEMENT_SPEED;\n } else {\n // Apply friction\n gameState.custom.player.velocityX *= 0.8;\n \n // Stop completely if very slow\n if (Math.abs(gameState.custom.player.velocityX) < 0.1) {\n gameState.custom.player.velocityX = 0;\n }\n }\n \n // Jumping\n if (gameState.custom.keys.up && !gameState.custom.player.isJumping) {\n gameState.custom.player.velocityY = JUMP_FORCE;\n gameState.custom.player.isJumping = true;\n }\n \n // Update position\n gameState.custom.player.x += gameState.custom.player.velocityX;\n gameState.custom.player.y += gameState.custom.player.velocityY;\n \n // Platform collision\n gameState.custom.player.isJumping = true; // Assume falling unless on platform\n \n for (const platform of gameState.custom.platforms) {\n if (\n gameState.custom.player.x + gameState.custom.player.width > platform.x &&\n gameState.custom.player.x < platform.x + platform.width &&\n gameState.custom.player.y + gameState.custom.player.height > platform.y &&\n gameState.custom.player.y + gameState.custom.player.height < platform.y + platform.height &&\n gameState.custom.player.velocityY > 0\n ) {\n // Land on platform\n gameState.custom.player.y = platform.y - gameState.custom.player.height;\n gameState.custom.player.velocityY = 0;\n gameState.custom.player.isJumping = false;\n }\n }\n \n // Coin collection\n for (const coin of gameState.custom.coins) {\n if (\n !coin.collected &&\n gameState.custom.player.x < coin.x + coin.width &&\n gameState.custom.player.x + gameState.custom.player.width > coin.x &&\n gameState.custom.player.y < coin.y + coin.height &&\n gameState.custom.player.y + gameState.custom.player.height > coin.y\n ) {\n coin.collected = true;\n gameState.score += 100;\n \n // Check if all coins are collected\n if (gameState.custom.coins.every(c => c.collected)) {\n gameState.level++;\n resetCoins();\n }\n }\n }\n \n // Falling off the bottom of the screen\n if (gameState.custom.player.y > canvas.height) {\n gameState.lives--;\n if (gameState.lives <= 0) {\n gameState.gameOver = true;\n } else {\n resetPlayer();\n }\n }\n \n // Camera follows player\n gameState.custom.camera.x = gameState.custom.player.x - canvas.width / 2;\n gameState.custom.camera.y = gameState.custom.player.y - canvas.height / 2;\n \n // Keep camera within level bounds\n gameState.custom.camera.x = Math.max(0, gameState.custom.camera.x);\n gameState.custom.camera.y = Math.max(0, gameState.custom.camera.y);\n}\n\n// Render game\nfunction render() {\n // Clear canvas\n ctx.fillStyle = '#87CEEB'; // Sky blue background\n ctx.fillRect(0, 0, canvas.width, canvas.height);\n \n // Save context before applying camera transformation\n ctx.save();\n \n // Apply camera transformation\n ctx.translate(-gameState.custom.camera.x, -gameState.custom.camera.y);\n \n // Draw platforms\n ctx.fillStyle = '#8B4513'; // Brown\n for (const platform of gameState.custom.platforms) {\n ctx.fillRect(platform.x, platform.y, platform.width, platform.height);\n \n // Add platform details\n ctx.fillStyle = '#A0522D'; // Darker brown for detail\n ctx.fillRect(platform.x, platform.y, platform.width, 5);\n ctx.fillStyle = '#8B4513'; // Reset for next platform\n }\n \n // Draw coins\n ctx.fillStyle = 'gold';\n for (const coin of gameState.custom.coins) {\n if (!coin.collected) {\n ctx.beginPath();\n ctx.arc(\n coin.x + coin.width / 2,\n coin.y + coin.height / 2,\n coin.width / 2,\n 0,\n Math.PI * 2\n );\n ctx.fill();\n \n // Inner detail\n ctx.fillStyle = 'yellow';\n ctx.beginPath();\n ctx.arc(\n coin.x + coin.width / 2,\n coin.y + coin.height / 2,\n coin.width / 4,\n 0,\n Math.PI * 2\n );\n ctx.fill();\n ctx.fillStyle = 'gold'; // Reset for next coin\n }\n }\n \n // Draw player\n ctx.fillStyle = 'blue';\n ctx.fillRect(\n gameState.custom.player.x,\n gameState.custom.player.y,\n gameState.custom.player.width,\n gameState.custom.player.height\n );\n \n // Player details - eyes and direction indicator\n ctx.fillStyle = 'white';\n \n // Eyes\n const eyeSize = 5;\n const eyeY = gameState.custom.player.y + 10;\n \n if (gameState.custom.player.facingRight) {\n ctx.fillRect(\n gameState.custom.player.x + gameState.custom.player.width - 10,\n eyeY,\n eyeSize,\n eyeSize\n );\n \n ctx.fillRect(\n gameState.custom.player.x + gameState.custom.player.width - 20,\n eyeY,\n eyeSize,\n eyeSize\n );\n } else {\n ctx.fillRect(\n gameState.custom.player.x + 5,\n eyeY,\n eyeSize,\n eyeSize\n );\n \n ctx.fillRect(\n gameState.custom.player.x + 15,\n eyeY,\n eyeSize,\n eyeSize\n );\n }\n \n // Restore context after camera transformation\n ctx.restore();\n \n // HUD elements (not affected by camera)\n ctx.fillStyle = 'white';\n ctx.font = '20px Arial';\n ctx.fillText(\\`Score: \\${gameState.score}\\`, 20, 30);\n ctx.fillText(\\`Level: \\${gameState.level}\\`, 20, 60);\n ctx.fillText(\\`Lives: \\${gameState.lives}\\`, 20, 90);\n \n // Game over screen\n if (gameState.gameOver) {\n ctx.fillStyle = 'rgba(0, 0, 0, 0.75)';\n ctx.fillRect(0, 0, canvas.width, canvas.height);\n \n ctx.fillStyle = 'white';\n ctx.font = '36px Arial';\n ctx.textAlign = 'center';\n ctx.fillText('Game Over', canvas.width / 2, canvas.height / 2);\n ctx.font = '24px Arial';\n ctx.fillText(\\`Final Score: \\${gameState.score}\\`, canvas.width / 2, canvas.height / 2 + 40);\n ctx.font = '18px Arial';\n ctx.fillText('Press F5 to restart', canvas.width / 2, canvas.height / 2 + 80);\n }\n \n // Update debug panel\n debugPanel.textContent = \\`\n Player: (x: \\${Math.round(gameState.custom.player.x)}, y: \\${Math.round(gameState.custom.player.y)})\n Velocity: (dx: \\${gameState.custom.player.velocityX.toFixed(2)}, dy: \\${gameState.custom.player.velocityY.toFixed(2)})\n Jumping: \\${gameState.custom.player.isJumping}\n Score: \\${gameState.score}\n Level: \\${gameState.level}\n Lives: \\${gameState.lives}\n \\`;\n}\n\n// Reset player position after falling\nfunction resetPlayer() {\n gameState.custom.player.x = 100;\n gameState.custom.player.y = 100;\n gameState.custom.player.velocityX = 0;\n gameState.custom.player.velocityY = 0;\n}\n\n// Reset coins when leveling up\nfunction resetCoins() {\n for (const coin of gameState.custom.coins) {\n coin.collected = false;\n }\n}`,\n \"platformer\",\n \"intermediate\",\n new Date().toISOString()\n ]);\n }\n \n // Handle different API routes\n const url = new URL(request.url);\n const pathname = url.pathname;\n \n if (pathname === \"/process\") {\n // Process agent requests for game development\n if (request.method !== \"POST\") {\n return new Response(\"Method not allowed\", { status: 405 });\n }\n \n // Parse request body\n const requestData = await request.json();\n const messages = requestData.messages || [];\n const currentGame = requestData.currentGame || null;\n \n serverLog(\"INFO\", \"Processing agent request\", { messageCount: messages.length });\n \n // Prepare system prompt for the AI\n const systemPrompt = `\n You are a game development assistant in a sandbox environment that helps users create, modify, and run simple browser games.\n You can help with:\n 1. Creating new games from scratch or templates\n 2. Modifying existing game code\n 3. Adding features and fixing bugs\n 4. Explaining game development concepts\n \n When creating or modifying games, you will provide TypeScript/JavaScript code that runs in an HTML5 canvas environment.\n The code should follow these guidelines:\n - Use standard canvas API for rendering\n - Structure game with clear initialization, update, and render functions\n - Include appropriate comments\n - Use a game state object to track score, level, and other properties\n - Report game state using window.reportGameState() function\n \n The game code should define the following key functions:\n - initGame(): Set up the game, event listeners, and initial state\n - gameLoop(): Main loop that calls update and render functions\n - update(): Update game state based on input and game logic\n - render(): Draw the current game state to the canvas\n \n You have access to the following HTML elements:\n - canvas#game-canvas: Main rendering canvas\n - div#debug-panel: Element for debugging information\n \n IMPORTANT: Always provide complete, runnable code. Do not omit sections with comments like \"// rest of code here\".\n `;\n \n // Prepare messages for OpenAI API\n const aiMessages = [\n { role: \"system\", content: systemPrompt },\n ...messages.map(m => ({ role: m.role === \"agent\" ? \"assistant\" : m.role, content: m.content }))\n ];\n \n try {\n // Call OpenAI API\n const completion = await openai.chat.completions.create({\n model: \"gpt-4-turbo\",\n messages: aiMessages,\n temperature: 0.7,\n max_tokens: 4096\n });\n \n const responseContent = completion.choices[0].message.content || \"\";\n \n // Parse AI response to determine action type\n let actionType: \"create_game\" | \"modify_game\" | \"run_game\" | \"direct_response\" = \"direct_response\";\n let gameSpec: GameSpec | undefined = undefined;\n \n // Check for code blocks in the response\n const codeBlockRegex = /```(?:javascript|typescript|js|ts)?\\s*([\\s\\S]*?)```/g;\n const codeBlocks = [];\n let match;\n \n while ((match = codeBlockRegex.exec(responseContent)) !== null) {\n codeBlocks.push(match[1]);\n }\n \n // If there's a code block and it seems substantial, treat it as a game\n if (codeBlocks.length > 0 && codeBlocks[0].length > 200) {\n // Check for game creation keywords in the response\n if (responseContent.toLowerCase().includes(\"new game\") || \n responseContent.toLowerCase().includes(\"create game\") ||\n !currentGame) {\n actionType = \"create_game\";\n \n // Extract name and description from response\n let gameName = \"New Game\";\n let gameDescription = \"A browser game created in the sandbox\";\n \n const nameMatch = responseContent.match(/(?:title|name):\\s*[\"']?([^\"'\\n]+)[\"']?/i);\n if (nameMatch && nameMatch[1]) {\n gameName = nameMatch[1].trim();\n }\n \n const descMatch = responseContent.match(/description:\\s*[\"']?([^\"'\\n]+(?:\\n[^\"'\\n]+)*)[\"']?/i);\n if (descMatch && descMatch[1]) {\n gameDescription = descMatch[1].trim();\n }\n \n // Create new game specification\n gameSpec = {\n id: uuidv4(),\n name: gameName,\n description: gameDescription,\n code: codeBlocks[0],\n version: 1,\n created: new Date(),\n updated: new Date()\n };\n \n // Save to database\n await db.execute(\n `INSERT INTO games (id, name, description, code, version, created, updated)\n VALUES (?, ?, ?, ?, ?, ?, ?)`,\n [\n gameSpec.id,\n gameSpec.name,\n gameSpec.description,\n gameSpec.code,\n gameSpec.version,\n gameSpec.created.toISOString(),\n gameSpec.updated.toISOString()\n ]\n );\n } else {\n // This is a modification to existing game\n actionType = \"modify_game\";\n \n // Update existing game with new code\n gameSpec = {\n ...currentGame,\n code: codeBlocks[0],\n version: (currentGame.version || 0) + 1,\n updated: new Date()\n };\n \n // Save to database\n await db.execute(\n `UPDATE games \n SET code = ?, version = ?, updated = ?\n WHERE id = ?`,\n [\n gameSpec.code,\n gameSpec.version,\n gameSpec.updated.toISOString(),\n gameSpec.id\n ]\n );\n }\n } else if (responseContent.toLowerCase().includes(\"run\") && \n (responseContent.toLowerCase().includes(\"game\") || \n responseContent.toLowerCase().includes(\"code\"))) {\n // User likely wants to run the current code\n actionType = \"run_game\";\n }\n \n // Return response to client\n const agentResponse: AgentResponse = {\n actionType,\n response: responseContent,\n gameSpec\n };\n \n return new Response(JSON.stringify(agentResponse), {\n headers: { \"Content-Type\": \"application/json\" }\n });\n \n } catch (error) {\n serverLog(\"ERROR\", \"Error calling OpenAI API\", { error });\n return new Response(JSON.stringify({ \n error: \"Failed to process request\", \n details: error instanceof Error ? error.message : \"Unknown error\" \n }), {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" }\n });\n }\n } \n // Handle GET requests for game data\n else if (pathname.startsWith(\"/games\") && request.method === \"GET\") {\n try {\n const gameId = pathname.split(\"/\")[2];\n \n if (gameId) {\n // Fetch specific game\n const game = await db.get(\n \"SELECT * FROM games WHERE id = ?\",\n [gameId]\n );\n \n if (!game) {\n return new Response(JSON.stringify({ error: \"Game not found\" }), {\n status: 404,\n headers: { \"Content-Type\": \"application/json\" }\n });\n }\n \n return new Response(JSON.stringify(game), {\n headers: { \"Content-Type\": \"application/json\" }\n });\n } else {\n // List all games\n const games = await db.all(\"SELECT id, name, description, version, created, updated FROM games\");\n \n return new Response(JSON.stringify(games), {\n headers: { \"Content-Type\": \"application/json\" }\n });\n }\n } catch (error) {\n return new Response(JSON.stringify({ error: \"Database error\" }), {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" }\n });\n }\n }\n // Handle GET requests for game templates\n else if (pathname.startsWith(\"/templates\") && request.method === \"GET\") {\n try {\n const templates = await db.all(\n \"SELECT id, name, description, category, difficulty FROM game_templates\"\n );\n \n return new Response(JSON.stringify(templates), {\n headers: { \"Content-Type\": \"application/json\" }\n });\n } catch (error) {\n return new Response(JSON.stringify({ error: \"Database error\" }), {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" }\n });\n }\n }\n // If no API route matches, serve the React app\n else {\n return new Response(\n `\n \n \n \n \n \n Game Development Sandbox\n \n \n \n

\n \n \n \n `,\n {\n headers: {\n \"Content-Type\": \"text/html\"\n }\n }\n );\n }\n \n } catch (error) {\n serverLog(\"ERROR\", \"Unhandled server error\", { error });\n return new Response(JSON.stringify({ error: \"Server error\" }), {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" }\n });\n }\n}","deleted","label",[98],"permalink","https://www.val.town/x/web/games/code/main.tsx","extension","actionData","errors"]