Update app.py

app.py

@@ -7,10 +7,9 @@ Pipeline:
          --> injected as base64 into game HTML
 
 Secrets needed:
-  GROQ_API_KEY - console.groq.com (free, no credit card)
+  GROQ_API_KEY  - console.groq.com (free, no credit card)
 """
 
-
 import os
 import re
 import io
@@ -19,29 +18,23 @@ import traceback
 import time
 from urllib.parse import quote
 
-
 import requests
 import gradio as gr
 from openai import OpenAI
 from PIL import Image
 
-
 # ---------------------------------------------------------------------------
 # Clients
 # ---------------------------------------------------------------------------
 
-
 GROQ_API_KEY = os.environ.get("GROQ_API_KEY", "")
 
-
-CODE_MODEL = "llama-3.1-8b-instant"      # Groq — game code
-PROMPT_MODEL = "llama-3.3-70b-versatile" # Groq — creative prompts
-
+CODE_MODEL   = "llama-3.1-8b-instant"      # Groq — game code
+PROMPT_MODEL = "llama-3.3-70b-versatile"   # Groq — creative prompts
 
 # Pollinations.AI — completely free, no API key, no signup needed
 POLLINATIONS_URL = "https://image.pollinations.ai/prompt/{prompt}?width={w}&height={h}&model=flux&nologo=true&seed={seed}"
 
-
 # Canvas dimensions — iframe is fixed to these so game fits perfectly
 CANVAS_W = 800
 CANVAS_H = 450
@@ -63,7 +56,6 @@ def get_groq_client():
 # Z-Image-Engineer system prompt (from BennyDaBall/Qwen3-4b-Z-Image-Engineer-V4)
 # ---------------------------------------------------------------------------
 
-
 Z_ENGINEER_SYSTEM = (
     "Interpret the user seed as production intent, then build a definitive 200-250 word "
     "single-paragraph image prompt that preserves every explicit constraint while intelligently "
@@ -78,17 +70,9 @@ Z_ENGINEER_SYSTEM = (
     "environment. Output ONLY the image prompt paragraph. No explanation, no preamble."
 )
 
-
 # ---------------------------------------------------------------------------
 # Game type configs — Platformer and Top-Down Shooter only
 # ---------------------------------------------------------------------------
-#
-# FIX: The Platformer prompt_template now explicitly requires four-direction
-# movement (WASD + arrow keys in all four directions).  Gravity/grounded
-# physics are kept for vertical feel, but S/ArrowDown is wired to move the
-# player downward (fast-drop / crouch-walk) so all four directions work.
-# ---------------------------------------------------------------------------
-
 
 GAME_TYPES = {
     "Platformer": {
@@ -105,22 +89,17 @@ GAME_TYPES = {
             "  Use new Image() with src='sprite_goal.png'. "
             "  When player bounding box overlaps goal: show WIN screen with score and Restart button.\n"
             "- PLAYER: starts bottom-left. Size 40x40. "
-            "  FOUR-DIRECTION MOVEMENT — implement ALL of the following:\n"
-            "    * Move LEFT:  A key OR ArrowLeft  -> player.x -= 4\n"
-            "    * Move RIGHT: D key OR ArrowRight -> player.x += 4\n"
-            "    * Move UP / JUMP: W key OR ArrowUp OR Space -> if grounded: player.velY = -12; grounded = false\n"
-            "    * Move DOWN (fast-drop): S key OR ArrowDown -> if (!grounded): player.velY += 3 (fast-fall); "
-            "      if (grounded): player.y += 2 (crouch/walk down a step, capped at canvas bottom)\n"
-            "  All four directions MUST be handled in the update loop via a keys Set. "
+            "  Move left/right with A/D or ArrowLeft/ArrowRight (speed 4). "
+            "  Jump with W, ArrowUp, or Space (velY = -12, only when grounded). "
             "  Gravity: velY += 0.5 every frame. "
             "  Platform collision: set grounded=false BEFORE loop; inside loop if player feet hit platform top set grounded=true velY=0. "
-            "  Keep player inside canvas horizontally and vertically (clamp x and y).\n"
+            "  Keep player inside canvas horizontally.\n"
             "- MONSTERS: 3 monsters, each patrolling back-and-forth on its own platform. "
             "  Size 32x32. Speed 1.5 px/frame. Reverse direction at platform edges. "
             "  Use new Image() with src='sprite_enemy.png'. "
             "  If monster bounding box overlaps player: player lives -= 1, respawn player at start. "
             "  0 lives = GAME OVER screen with Restart button.\n"
-            "- HUD: lives top-left, score top-right. Show control hint: 'WASD / Arrows: move | W/Up/Space: jump | S/Down: fast-fall'.\n"
+            "- HUD: lives top-left, score top-right.\n"
             "- IMAGES: declare all at top of script before anything else: "
             "  const playerImg = new Image(); playerImg.src = 'sprite_player.png'; "
             "  const bgImg = new Image(); bgImg.src = 'sprite_background.png'; "
@@ -135,104 +114,47 @@ GAME_TYPES = {
         ),
     },
     "Top-Down Shooter": {
-        "description": "Move in all four directions, shoot chasing monsters, and survive waves.",
+        "description": "Shoot monsters coming from the top before they reach you.",
         "prompt_template": (
             "Create a complete, self-contained HTML5 top-down shooter game with the theme: {theme}.\n"
-            "EXACT GAME RULES — implement every one precisely. This is a TOP-DOWN game, not a platformer.\n"
-            "\n"
-            "VARIABLES — CRITICAL:\n"
-            "- Declare score, health, wave, frameCount, gameOver, spawnInterval as `let`, NOT `const`.\n"
-            "  Example: let score = 0; let health = 5; let wave = 1; let frameCount = 0;\n"
-            "  let gameOver = false; let spawnInterval = 90;\n"
-            "- Mutating a `const` is a silent no-op in JavaScript — the game will break invisibly.\n"
-            "\n"
-            "CANVAS: id='gameCanvas', size 800x450.\n"
-            "\n"
-            "PLAYER:\n"
-            "- Object: {{ x, y, w:48, h:48, speed:4 }}. Start near center-bottom.\n"
-            "- FOUR-DIRECTION MOVEMENT using a keys Set — implement exactly:\n"
-            "    let dx = 0, dy = 0;\n"
-            "    if (keys.has('w') || keys.has('ArrowUp'))    dy -= 1;\n"
-            "    if (keys.has('s') || keys.has('ArrowDown'))  dy += 1;\n"
-            "    if (keys.has('a') || keys.has('ArrowLeft'))  dx -= 1;\n"
-            "    if (keys.has('d') || keys.has('ArrowRight')) dx += 1;\n"
-            "    if (dx !== 0 && dy !== 0) {{ const len = Math.sqrt(2); dx /= len; dy /= len; }}\n"
-            "    player.x += dx * player.speed;\n"
-            "    player.y += dy * player.speed;\n"
-            "- Clamp: player.x = Math.max(0, Math.min(canvas.width - player.w, player.x));\n"
-            "         player.y = Math.max(0, Math.min(canvas.height - player.h, player.y));\n"
-            "- NO gravity, NO velY, NO grounded, NO jumping, NO platforms.\n"
-            "\n"
-            "ENEMIES:\n"
-            "- Each enemy object MUST have: {{ x, y, w:32, h:32, speed }}.\n"
-            "  w and h are required for collision detection — do not omit them.\n"
-            "- Spawn enemies from the TOP EDGE ONLY: x = random within canvas width, y = -32.\n"
-            "- Chase player each frame: const edx = player.x-e.x; const edy = player.y-e.y;\n"
-            "    const edist = Math.sqrt(edx*edx+edy*edy);\n"
-            "    if (edist > 0) {{ e.x += (edx/edist)*e.speed; e.y += (edy/edist)*e.speed; }}\n"
-            "- Enemy speed: 1.2 to 2 px/frame.\n"
-            "- Spawn 2 enemies immediately at game start, then 1 more every spawnInterval frames.\n"
-            "- Use frameCount (incremented each frame) to trigger spawning — NOT score % N.\n"
-            "  Example: if (frameCount % spawnInterval === 0) spawnEnemy();\n"
-            "- Increase difficulty over time by reducing spawnInterval (min 30) as frameCount grows.\n"
-            "\n"
-            "BULLETS:\n"
-            "- Each bullet object: {{ x, y, vx, vy, w:10, h:10 }}.\n"
-            "- Fire from player center toward mouse on mousedown.\n"
-            "- Remove bullets that leave canvas bounds.\n"
-            "- Bullet/enemy collision: use rect overlap (x,y,w,h). Remove both bullet and enemy. score += 10.\n"
-            "- Draw bullets as bright yellow circles so they are visible against dark backgrounds.\n"
-            "\n"
-            "COLLISIONS — use rectangle overlap for everything:\n"
-            "    function rectsOverlap(a, b) {{\n"
-            "        return a.x < b.x+b.w && a.x+a.w > b.x && a.y < b.y+b.h && a.y+a.h > b.y;\n"
-            "    }}\n"
-            "- Enemy overlaps player: health--; remove that enemy. If health <= 0: gameOver = true.\n"
-            "\n"
-            "DRAW ORDER — every frame, in this exact order:\n"
-            "  1. ctx.drawImage(bgImg, 0, 0, canvas.width, canvas.height)  ← background first\n"
-            "  2. ctx.drawImage(playerImg, player.x, player.y, player.w, player.h)\n"
-            "  3. draw all enemies with ctx.drawImage(enemyImg, e.x, e.y, e.w, e.h)\n"
-            "  4. draw bullets as bright yellow filled circles\n"
-            "  5. draw HUD text on top (score top-left, health top-right, wave top-center)\n"
-            "- DO NOT draw a solid black fillRect over the canvas — it hides everything underneath.\n"
-            "\n"
-            "GAME OVER: when gameOver is true, draw a semi-transparent overlay with final score.\n"
-            "  Clicking canvas calls restartGame() which resets all let variables and arrays.\n"
-            "\n"
-            "IMAGES:\n"
-            "- const playerImg = new Image(); playerImg.src = 'sprite_player.png';\n"
-            "- const bgImg = new Image(); bgImg.src = 'sprite_background.png';\n"
-            "- const enemyImg = new Image(); enemyImg.src = 'sprite_enemy.png';\n"
-            "- const keys = new Set();\n"
-            "- function loadImg(img) {{ return new Promise(r => {{ img.onload = r; if (img.complete) r(); }}); }}\n"
-            "- Promise.all([loadImg(playerImg), loadImg(bgImg), loadImg(enemyImg)]).then(startGame);\n"
-            "\n"
-            "STRUCTURE:\n"
-            "- Define ALL functions at TOP LEVEL — not inside Promise.then or startGame.\n"
-            "- startGame() sets up keydown/keyup listeners, mousedown listener, spawns 2 enemies, calls requestAnimationFrame(gameLoop).\n"
+            "EXACT GAME RULES — implement every one precisely:\n"
+            "- Canvas: id='gameCanvas', size 800x450.\n"
+            "- MONSTERS spawn at random x positions along the TOP edge (y=0) and move DOWNWARD only (y += speed each frame).\n"
+            "- Monster size: 32x32. Monster speed: 1-2 px/frame (slower than player speed of 4).\n"
+            "- PLAYER starts at bottom-center, moves left/right only with A/D or ArrowLeft/ArrowRight keys.\n"
+            "- Player size: 48x48. Player speed: 4 px/frame. Keep player inside canvas bounds.\n"
+            "- LEFT MOUSE CLICK fires one bullet from player position toward the click point.\n"
+            "  Bullet speed: 10 px/frame. Remove bullets that leave canvas.\n"
+            "- BULLET HIT: if a bullet rect overlaps a monster rect, remove BOTH the bullet and the monster. Score += 10.\n"
+            "- MONSTER COLLISION: if a monster rect overlaps the player rect, remove the monster. Player health -= 1.\n"
+            "- MONSTER ESCAPED: if a monster reaches y > canvas.height remove it (no health loss).\n"
+            "- New monsters spawn every 90 frames. Spawn rate increases every 500 points.\n"
+            "- HUD: draw score top-left, health top-right (show as hearts or number).\n"
+            "- GAME OVER when health reaches 0: show score and a Restart button.\n"
+            "- NO gravity, NO velY += 0.5, NO grounded, NO jumping.\n"
+            "- Use new Image() with src='sprite_player.png' for the player (48x48).\n"
+            "- Use new Image() with src='sprite_background.png' for the background (full canvas).\n"
+            "- Use new Image() with src='sprite_enemy.png' for monsters (32x32).\n"
+            "- Declare all images at top of script, use Promise.all to wait before starting gameLoop.\n"
+            "- Define all functions at TOP LEVEL, not inside Promise.then or startGame.\n"
+            "- Add window keydown/keyup listeners to a keys Set inside startGame().\n"
             "- NO external libraries, NO CDN links.\n"
-            "\n"
             "Output ONLY the raw HTML. No explanation, no markdown fences."
         ),
     },
 }
 
-
 GAME_TYPE_NAMES = list(GAME_TYPES.keys())
 
-
 THEME_EXAMPLES = {
-    "Platformer": [["Jungle temple with ancient traps"], ["Neon cyberpunk rooftops"], ["Underwater pirate shipwreck"]],
+    "Platformer":       [["Jungle temple with ancient traps"], ["Neon cyberpunk rooftops"], ["Underwater pirate shipwreck"]],
     "Top-Down Shooter": [["Ancient Egyptian tomb raid with cursed mummies"], ["Alien desert invasion"], ["Viking village under siege"]],
 }
 
-
 # ---------------------------------------------------------------------------
 # Step 1: Generate image prompts via Z-Image-Engineer (Groq)
 # ---------------------------------------------------------------------------
 
-
 def generate_image_prompts(theme: str, game_type: str) -> dict:
     client = get_groq_client()
     seeds = {
@@ -261,12 +183,10 @@ def generate_image_prompts(theme: str, game_type: str) -> dict:
             prompts[sprite_name] = seed
     return prompts
 
-
 # ---------------------------------------------------------------------------
 # Step 2: Generate images via Pollinations.AI
 # ---------------------------------------------------------------------------
 
-
 def _pil_to_data_uri(pil_image: Image.Image, size: tuple = None) -> str:
     img = pil_image.resize(size, Image.LANCZOS) if size else pil_image
     buf = io.BytesIO()
@@ -276,8 +196,8 @@ def _pil_to_data_uri(pil_image: Image.Image, size: tuple = None) -> str:
 
 def _colored_placeholder(name: str) -> str:
     colours = ["#e74c3c", "#3498db", "#2ecc71", "#f39c12", "#9b59b6", "#1abc9c"]
-    colour = colours[abs(hash(name)) % len(colours)]
-    label = name.replace("sprite_", "")[:6]
+    colour  = colours[abs(hash(name)) % len(colours)]
+    label   = name.replace("sprite_", "")[:6]
     svg = (
         '<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64">'
         '<rect width="64" height="64" fill="' + colour + '" rx="8"/>'
@@ -289,15 +209,15 @@ def _colored_placeholder(name: str) -> str:
 
 def generate_sprites(image_prompts: dict) -> tuple:
     sprite_map = {}
-    errors = []
+    errors     = []
     for i, (sprite_name, prompt) in enumerate(image_prompts.items()):
         if i > 0:
             time.sleep(20)
         try:
             is_bg = "background" in sprite_name
-            w, h = (CANVAS_W, CANVAS_H) if is_bg else (64, 64)
-            seed = abs(hash(sprite_name)) % 99999
-            url = POLLINATIONS_URL.format(prompt=quote(prompt), w=w, h=h, seed=seed)
+            w, h  = (CANVAS_W, CANVAS_H) if is_bg else (64, 64)
+            seed  = abs(hash(sprite_name)) % 99999
+            url   = POLLINATIONS_URL.format(prompt=quote(prompt), w=w, h=h, seed=seed)
             for attempt in range(3):
                 try:
                     response = requests.get(url, timeout=120)
@@ -309,7 +229,7 @@ def generate_sprites(image_prompts: dict) -> tuple:
                     else:
                         raise retry_exc
             pil_img = Image.open(io.BytesIO(response.content))
-            size = None if is_bg else (64, 64)
+            size    = None if is_bg else (64, 64)
             sprite_map[sprite_name] = _pil_to_data_uri(pil_img, size=size)
             print(f"[Pollinations] OK: {sprite_name}")
         except Exception as exc:
@@ -319,91 +239,70 @@ def generate_sprites(image_prompts: dict) -> tuple:
             sprite_map[sprite_name] = _colored_placeholder(sprite_name.replace(".png", ""))
     return sprite_map, errors
 
-
 # ---------------------------------------------------------------------------
 # Step 3: Inject sprites into HTML
 # ---------------------------------------------------------------------------
 
-
 def _inject_sprites(html_code: str, sprite_map: dict) -> str:
     for fname, data_uri in sprite_map.items():
         html_code = html_code.replace('"' + fname + '"', '"' + data_uri + '"')
         html_code = html_code.replace("'" + fname + "'", "'" + data_uri + "'")
     return html_code
 
-
 # ---------------------------------------------------------------------------
 # Step 4: Generate game code via Groq Llama
 # ---------------------------------------------------------------------------
-#
-# FIX: The CODE_SYSTEM prompt now clearly describes four-direction movement
-# for the Platformer case (S/ArrowDown = fast-fall/step-down) instead of
-# leaving down-movement unspecified.  The top-down section is unchanged.
-# ---------------------------------------------------------------------------
 
 CODE_SYSTEM = (
     "You are an expert HTML5 game developer. "
     "Write a complete, working, single-file HTML5 game using canvas and vanilla JavaScript. "
-    "CRITICAL RULES — follow every one exactly or the game will be broken and unplayable: "
-
-    "RULE 1 — MUTABLE STATE: Declare score, health, wave, frameCount, gameOver, spawnInterval "
-    "and all game-state arrays with `let`, NEVER `const`. "
-    "Assigning to a const is a silent no-op: health-- on a const health stays 5 forever. "
-    "Only use const for objects/images that are never reassigned (playerImg, canvas, ctx, etc.). "
-
-    "RULE 2 — SPRITES: At the very top of the script declare: "
-    "const playerImg = new Image(); playerImg.src = 'sprite_player.png'; "
-    "const bgImg = new Image(); bgImg.src = 'sprite_background.png'; "
-    "const enemyImg = new Image(); enemyImg.src = 'sprite_enemy.png'; "
-    "const keys = new Set(); "
-    "function loadImg(img) { return new Promise(r => { img.onload = r; if (img.complete) r(); }); } "
-    "Promise.all([loadImg(playerImg), loadImg(bgImg), loadImg(enemyImg)]).then(startGame); "
-
-    "RULE 3 — FUNCTION SCOPE: Define gameLoop() and ALL game logic functions at TOP LEVEL, "
-    "not inside startGame() or Promise.then(). "
-
-    "RULE 4 — DRAW ORDER (every frame, this exact order, no exceptions): "
-    "(a) ctx.drawImage(bgImg, 0, 0, canvas.width, canvas.height) — background first. "
-    "(b) draw player, enemies, bullets on top of it. "
-    "(c) draw HUD text last. "
-    "NEVER call ctx.fillRect to paint a solid colour over the whole canvas — it hides everything. "
-
-    "RULE 5 — ENEMY OBJECTS must include w and h: "
-    "enemies.push({ x, y, w: 32, h: 32, speed: ... }); "
-    "Without w/h the collision function gets undefined and nothing works. "
-
-    "RULE 6 — SPAWN TRIGGER: Use frameCount (incremented each frame) to time enemy spawns. "
-    "NEVER use score % N === 0 — this fires on frame 0 (score=0) and floods the screen instantly. "
-    "Correct pattern: if (frameCount % spawnInterval === 0) spawnEnemy(); "
-
-    "RULE 7 — TOP-DOWN SHOOTER MOVEMENT (no gravity, no velY, no grounded): "
-    "let ddx = 0, ddy = 0; "
-    "if (keys.has('w') || keys.has('ArrowUp'))    ddy -= 1; "
-    "if (keys.has('s') || keys.has('ArrowDown'))  ddy += 1; "
-    "if (keys.has('a') || keys.has('ArrowLeft'))  ddx -= 1; "
-    "if (keys.has('d') || keys.has('ArrowRight')) ddx += 1; "
-    "if (ddx !== 0 && ddy !== 0) { const len = Math.sqrt(2); ddx /= len; ddy /= len; } "
-    "player.x += ddx * player.speed; player.y += ddy * player.speed; "
-    "player.x = Math.max(0, Math.min(canvas.width - player.w, player.x)); "
-    "player.y = Math.max(0, Math.min(canvas.height - player.h, player.y)); "
-
-    "RULE 8 — TOP-DOWN SHOOTER ENEMY CHASE: "
-    "const edx = player.x - e.x; const edy = player.y - e.y; "
-    "const edist = Math.sqrt(edx*edx + edy*edy); "
-    "if (edist > 0) { e.x += (edx/edist)*e.speed; e.y += (edy/edist)*e.speed; } "
-
-    "RULE 9 — COLLISION: use rectangle overlap for both bullet-enemy and enemy-player: "
-    "function rectsOverlap(a,b){return a.x<b.x+b.w&&a.x+a.w>b.x&&a.y<b.y+b.h&&a.y+a.h>b.y;} "
-
-    "RULE 10 — BULLETS: draw as bright yellow circles (ctx.fillStyle='#ffe94d') so they are "
-    "visible against dark backgrounds. Each bullet needs w and h (e.g. w:10,h:10) for collision. "
-
-    "RULE 11 — PLATFORMER (only applies to platformer type, not top-down): "
-    "use gravity velY += 0.5, grounded checks, jump with W/ArrowUp/Space. "
-    "S/ArrowDown = fast-fall (!grounded: velY+=3) or step-down (grounded: y+=2 clamped). "
-    "Always include full-width ground platform at y=420. "
-
-    "Output ONLY the raw HTML — no markdown fences, no explanation, nothing else."
+    "CRITICAL RULES - follow every one exactly: "
+    "1. SPRITES: Declare these at the very top of the script BEFORE anything else: "
+    "   const playerImg = new Image(); playerImg.src = 'sprite_player.png'; "
+    "   const bgImg = new Image(); bgImg.src = 'sprite_background.png'; "
+    "   const enemyImg = new Image(); enemyImg.src = 'sprite_enemy.png'; "
+    "   const keys = new Set(); "
+    "2. IMAGE LOADING: After declaring sprites use Promise.all to start the game: "
+    "   function loadImg(img) { return new Promise(r => { img.onload = r; }); } "
+    "   Promise.all([loadImg(playerImg), loadImg(bgImg), loadImg(enemyImg)]).then(startGame); "
+    "3. startGame function sets up listeners and calls gameLoop: "
+    "   function startGame() { "
+    "   window.addEventListener('keydown', e => keys.add(e.key)); "
+    "   window.addEventListener('keyup', e => keys.delete(e.key)); "
+    "   canvas.addEventListener('click', onShoot); "
+    "   requestAnimationFrame(gameLoop); } "
+    "4. Define gameLoop() and ALL game logic functions at TOP LEVEL - NOT inside startGame or Promise.then. "
+    "5. MOVEMENT RULES DEPEND ON GAME TYPE: "
+    "   FOR TOP-DOWN SHOOTER - follow these EXACTLY inside gameLoop() every frame: "
+    "   NO gravity, NO velY += 0.5, NO grounded variable, NO jumping. "
+    "   STEP A - move player from keys every frame: "
+    "   if (keys.has('w') || keys.has('ArrowUp')) player.y -= player.speed; "
+    "   if (keys.has('s') || keys.has('ArrowDown')) player.y += player.speed; "
+    "   if (keys.has('a') || keys.has('ArrowLeft')) player.x -= player.speed; "
+    "   if (keys.has('d') || keys.has('ArrowRight')) player.x += player.speed; "
+    "   player.x = Math.max(0, Math.min(canvas.width-player.w, player.x)); "
+    "   player.y = Math.max(0, Math.min(canvas.height-player.h, player.y)); "
+    "   STEP B - move every bullet forward every frame (THIS IS REQUIRED): "
+    "   bullets.forEach(b => { b.x += b.vx; b.y += b.vy; }); "
+    "   bullets = bullets.filter(b => b.x>=0 && b.x<=canvas.width && b.y>=0 && b.y<=canvas.height); "
+    "   STEP C - move enemies toward player every frame: "
+    "   enemies.forEach(e => { const dx=player.x-e.x; const dy=player.y-e.y; "
+    "   const d=Math.sqrt(dx*dx+dy*dy); if(d>0){e.x+=dx/d*e.speed; e.y+=dy/d*e.speed;} }); "
+    "   STEP D - for shooting, add click listener on canvas inside startGame(): "
+    "   canvas.addEventListener('click', function(e){ "
+    "   const r=canvas.getBoundingClientRect(); "
+    "   const mx=e.clientX-r.left; const my=e.clientY-r.top; "
+    "   const dx=mx-(player.x+player.w/2); const dy=my-(player.y+player.h/2); "
+    "   const d=Math.sqrt(dx*dx+dy*dy); "
+    "   if(d>0) bullets.push({x:player.x+player.w/2, y:player.y+player.h/2, vx:dx/d*10, vy:dy/d*10, w:6, h:6}); }); "
+    "   FOR PLATFORMER: use gravity velY += 0.5, grounded checks, jump with ArrowUp/W/Space (velY=-12). "
+    "   Set grounded=false BEFORE platform loop. Set grounded=true and velY=0 only on landing. "
+    "   Always include full-width ground platform at y=420. "
+    "   FOR PLATFORMER: also declare platformImg and goalImg at top and include them in Promise.all. "
+"6. Draw background FIRST each frame: ctx.drawImage(bgImg, 0, 0, canvas.width, canvas.height). "
+    "7. Draw player/enemies with ctx.drawImage(playerImg, x, y, w, h). "
+    "8. Always keep player inside canvas boundaries. "
+    "Output ONLY the raw HTML - no markdown fences, no explanation, nothing else."
 )
 
 
@@ -412,7 +311,7 @@ def generate_game_code(game_type: str, theme: str, temperature: float, max_new_t
         return "", "", "Please enter a theme first.", _placeholder_html("Enter a theme and generate a game.")
 
     try:
-        client = get_groq_client()
+        client      = get_groq_client()
         user_prompt = GAME_TYPES[game_type]["prompt_template"].format(theme=theme.strip())
 
         # Code generation
@@ -427,7 +326,7 @@ def generate_game_code(game_type: str, theme: str, temperature: float, max_new_t
         )
         code = code_resp.choices[0].message.content.strip()
         code = re.sub(r"^```[a-zA-Z]*\n?", "", code).strip()
-        code = re.sub(r"\n?```$", "", code).strip()
+        code = re.sub(r"\n?```$",           "", code).strip()
         if "<html" not in code.lower() and "<!doctype" not in code.lower():
             code = _wrap_in_html(code, theme)
 
@@ -467,7 +366,6 @@ def generate_game_code(game_type: str, theme: str, temperature: float, max_new_t
 # HTML helpers
 # ---------------------------------------------------------------------------
 
-
 def _placeholder_html(message: str) -> str:
     safe = message.replace("<", "&lt;").replace(">", "&gt;")
     return (
@@ -508,7 +406,6 @@ def launch_game(code: str) -> str:
 # UI helpers
 # ---------------------------------------------------------------------------
 
-
 def update_type_description(game_type: str) -> str:
     return "_" + GAME_TYPES[game_type]["description"] + "_"
 
@@ -521,7 +418,6 @@ def get_first_theme(game_type: str) -> str:
 # Gradio UI
 # ---------------------------------------------------------------------------
 
-
 def build_ui():
     with gr.Blocks(title="Game Generator") as demo:
 
@@ -534,7 +430,7 @@ def build_ui():
 
         with gr.Row():
 
-            # ── Left: controls ──────────────────────────────────────────────
+            # ── Left: controls ───────────────────────────────────────────
             with gr.Column(scale=1, min_width=300):
 
                 gr.Markdown("## 1. Configure your game")
@@ -569,9 +465,9 @@ def build_ui():
                 )
 
                 generate_btn = gr.Button("Generate Game + Sprites", variant="primary")
-                gen_status = gr.Markdown(value="_No game generated yet._")
+                gen_status   = gr.Markdown(value="_No game generated yet._")
 
-            # ── Right: code + game ──────────────────────────────────────────
+            # ── Right: code + game ────────────────────────────────────────
             with gr.Column(scale=2, min_width=500):
 
                 # Collapsible code window
@@ -622,8 +518,7 @@ def build_ui():
             "**Pipeline:** Theme → [Groq Llama] game code + [Groq 70B as Z-Image-Engineer] "
             "cinematic prompts → [Pollinations/FLUX] sprites → embedded in game. "
             f"Game window fixed to {CANVAS_W}×{CANVAS_H}px — matches canvas exactly. "
-            "Edit HTML and click **Launch Game** to hot-reload.\n\n"
-            "**Platformer controls:** A/← Left · D/→ Right · W/↑/Space Jump · S/↓ Fast-fall"
+            "Edit HTML and click **Launch Game** to hot-reload."
         )
 
     return demo
@@ -633,7 +528,6 @@ def build_ui():
 # Entry point
 # ---------------------------------------------------------------------------
 
-
 if __name__ == "__main__":
     app = build_ui()
     app.launch()