star-sdk-cli 0.1.17 → 0.1.19

package/dist/cli.mjs

@@ -54,27 +54,26 @@ Star.init({ gameId: '<paste gameId from .starrc>' });
 import Star from 'star-sdk';
 Star.init({ gameId: '<gameId from .starrc>' }); // run: npx star-sdk init
 
-Star.game(ctx => {
-  const { canvas, width, height, ctx: c } = ctx;
+Star.game(g => {
+  const { width, height, ctx } = g;
   let score = 0;
 
-  // Preload audio
   Star.audio.preload({ coin: 'coin', jump: 'jump' });
 
-  // Game loop
-  ctx.loop((dt) => {
-    c.fillStyle = '#111827';
-    c.fillRect(0, 0, width, height);
-    c.fillStyle = '#fff';
-    c.font = '24px sans-serif';
-    c.fillText(\`Score: \${score}\`, 20, 40);
-  });
+  g.loop((dt) => {
+    // Input (polling \u2014 check once per frame)
+    if (g.tap) {
+      score += 10;
+      Star.audio.play('coin');
+    }
 
-  // Input
-  canvas.onclick = () => {
-    score += 10;
-    Star.audio.play('coin');
-  };
+    // Draw
+    ctx.fillStyle = '#111827';
+    ctx.fillRect(0, 0, width, height);
+    ctx.fillStyle = '#fff';
+    ctx.font = '24px sans-serif';
+    ctx.fillText(\`Score: \${score}\`, 20, 40);
+  });
 });
 \`\`\`
 
@@ -82,33 +81,44 @@ Star.game(ctx => {
 
 ### Game Over Screen with Leaderboard
 
-Use DOM buttons (via \`ui.render()\` + \`on()\`) for all interactive UI \u2014 never draw buttons on canvas:
+Use \`g.tap\` in the loop with if/else for priority \u2014 check buttons first, then general tap:
 
 \`\`\`javascript
-// UI button handler (register once \u2014 survives ui.render calls)
-ctx.on('click', '#lb-btn', () => Star.leaderboard.show());
-ctx.on('click', '#restart-btn', () => startGame());
+const lbBtn = { x: 200, y: 260, w: 240, h: 50 };
+const restartBtn = { x: 200, y: 330, w: 240, h: 50 };
 
-// Gameplay tap handler (single handler, state-based)
-canvas.addEventListener('pointerdown', () => {
-  if (state === 'playing') { jump(); }
+function inRect(tap, r) {
+  return tap.x >= r.x && tap.x <= r.x + r.w && tap.y >= r.y && tap.y <= r.y + r.h;
+}
+
+g.loop((dt) => {
+  // Input
+  if (g.tap) {
+    if (state === 'gameover') {
+      if (inRect(g.tap, lbBtn)) {
+        Star.leaderboard.show();
+      } else if (inRect(g.tap, restartBtn)) {
+        startGame();
+      }
+    } else if (state === 'playing') {
+      jump();
+    } else if (state === 'menu') {
+      startGame();
+    }
+  }
+
+  // Update & Draw ...
+
+  if (state === 'gameover') {
+    // Draw buttons on canvas
+    drawButton(ctx, 'VIEW LEADERBOARD', lbBtn);
+    drawButton(ctx, 'PLAY AGAIN', restartBtn);
+  }
 });
 
 function endGame() {
   state = 'gameover';
   Star.leaderboard.submit(score);
-  ctx.ui.render(\`
-    <div class="h-full flex flex-col items-center justify-center text-white">
-      <div class="text-3xl font-bold mb-2">GAME OVER</div>
-      <div class="text-6xl font-bold mb-6">\${score}</div>
-      <button id="lb-btn" class="px-6 py-3 mb-4 bg-purple-600 rounded-lg font-bold">
-        VIEW LEADERBOARD
-      </button>
-      <button id="restart-btn" class="px-6 py-3 bg-gray-700 rounded-lg">
-        PLAY AGAIN
-      </button>
-    </div>
-  \`);
 }
 \`\`\`
 
@@ -144,23 +154,38 @@ Star.audio.preload({ coin: 'coin', jump: 'jump' });
 Star.audio.play('coin');  // Works on mobile, desktop, everywhere
 \`\`\`
 
+### Hover Effects for Canvas Buttons
+
+\`g.pointer\` tracks position every frame \u2014 use it for hover states:
+
+\`\`\`javascript
+g.loop((dt) => {
+  const hoverLb = state === 'gameover' && inRect(g.pointer, lbBtn);
+  drawButton('VIEW LEADERBOARD', lbBtn, hoverLb ? '#9061f9' : '#7c3aed');
+  g.canvas.style.cursor = hoverLb ? 'pointer' : 'default';
+});
+\`\`\`
+
 ### Coordinate Handling
 
+\`g.tap\` and \`g.pointer\` are already in canvas-space coordinates. No conversion needed:
+
 \`\`\`javascript
-canvas.onclick = (e) => {
-  const point = ctx.toStagePoint(e);  // Correct coordinates
-  console.log(point.x, point.y);
-};
+g.loop((dt) => {
+  if (g.tap) {
+    console.log(g.tap.x, g.tap.y);  // Already canvas-space
+  }
+});
 \`\`\`
 
 ## Don't Do This
 
 - **Don't** create canvas manually - use \`Star.game()\`
-- **Don't** use \`setInterval\` for game loops - use \`ctx.loop()\`
+- **Don't** use \`setInterval\` for game loops - use \`g.loop()\`
 - **Don't** destructure Star - use \`Star.audio\`, \`Star.leaderboard\`, etc.
 - **Don't** invent audio preset names - only 17 exist (see audio.md)
-- **Don't** draw buttons on canvas (fillRect + hit-test) \u2014 use \`ui.render()\` with HTML \`<button>\` elements + \`on()\` for clicks. Canvas-drawn "buttons" conflict with tap handlers and have no hover/focus states.
-- **Don't** register multiple \`canvas.addEventListener('pointerdown', ...)\` handlers \u2014 use ONE handler with state-based logic. Use \`on()\` for UI button clicks.
+- **Don't** use \`canvas.addEventListener('pointerdown', ...)\` for input \u2014 use \`g.tap\` / \`g.pointer\` / \`g.released\` in the game loop. Polling prevents conflicting handler bugs.
+- **Don't** register multiple event handlers for different game states \u2014 use ONE \`if (g.tap)\` block with if/else for priority.
 
 ## Audio Presets (Full List)
 
@@ -176,102 +201,120 @@ Only these 17 presets exist:
 import Star from 'star-sdk';
 Star.init({ gameId: '<gameId from .starrc>' }); // run: npx star-sdk init
 
-Star.game(ctx => {
-  const { canvas, width, height, ctx: c, ui, on } = ctx;
+Star.game(g => {
+  const { width, height, ctx } = g;
   let score = 0;
-  let state = 'playing';
+  let state = 'menu';
   let playerY = height / 2;
   let obstacles = [];
+  let spawnTimer = 0;
 
-  Star.audio.preload({
-    jump: 'jump',
-    coin: 'coin',
-    hurt: 'hurt'
-  });
+  Star.audio.preload({ jump: 'jump', coin: 'coin', hurt: 'hurt' });
 
-  // Spawn obstacles
-  setInterval(() => {
-    if (state === 'playing') {
-      obstacles.push({ x: width, y: Math.random() * height, passed: false });
-    }
-  }, 2000);
+  const lbBtn = { x: width / 2 - 120, y: height / 2 + 20, w: 240, h: 50 };
+  const restartBtn = { x: width / 2 - 120, y: height / 2 + 90, w: 240, h: 50 };
 
-  // Gameplay input \u2014 ONE handler, state-based
-  canvas.addEventListener('pointerdown', () => {
-    if (state === 'playing') {
-      playerY -= 50;
-      Star.audio.play('jump');
-    }
-  });
+  function inRect(pt, r) {
+    return pt.x >= r.x && pt.x <= r.x + r.w && pt.y >= r.y && pt.y <= r.y + r.h;
+  }
 
-  // UI button clicks \u2014 use on() for DOM buttons, not canvas hit-testing
-  on('click', '#lb-btn', () => Star.leaderboard.show());
-  on('click', '#restart-btn', () => startGame());
+  function drawButton(text, r) {
+    ctx.fillStyle = '#7c3aed';
+    ctx.fillRect(r.x, r.y, r.w, r.h);
+    ctx.fillStyle = '#fff';
+    ctx.font = 'bold 16px sans-serif';
+    ctx.textAlign = 'center';
+    ctx.fillText(text, r.x + r.w / 2, r.y + r.h / 2 + 6);
+    ctx.textAlign = 'left';
+  }
 
   function startGame() {
     state = 'playing';
     score = 0;
     playerY = height / 2;
     obstacles = [];
-    ui.render(''); // Clear game-over UI
+    spawnTimer = 0;
   }
 
   function endGame() {
     state = 'gameover';
     Star.audio.play('hurt');
     Star.leaderboard.submit(score);
-    // Game-over UI with DOM buttons (not canvas-drawn)
-    ui.render(\`
-      <div class="h-full flex flex-col items-center justify-center text-white">
-        <div class="text-3xl font-bold mb-2">GAME OVER</div>
-        <div class="text-6xl font-bold mb-6">\${score}</div>
-        <button id="lb-btn" class="px-6 py-3 mb-4 bg-purple-600 rounded-lg font-bold">
-          VIEW LEADERBOARD
-        </button>
-        <button id="restart-btn" class="px-6 py-3 bg-gray-700 rounded-lg">
-          PLAY AGAIN
-        </button>
-      </div>
-    \`);
   }
 
-  ctx.loop((dt) => {
-    if (state !== 'playing') return;
-
-    // Clear
-    c.fillStyle = '#111827';
-    c.fillRect(0, 0, width, height);
-
-    // Update obstacles
-    obstacles.forEach(obs => {
-      obs.x -= 200 * dt;
-      if (!obs.passed && obs.x < 50) {
-        obs.passed = true;
-        score += 10;
-        Star.audio.play('coin');
+  g.loop((dt) => {
+    // --- Input (polling) ---
+    if (g.tap) {
+      if (state === 'menu') {
+        startGame();
+      } else if (state === 'playing') {
+        playerY -= 50;
+        Star.audio.play('jump');
+      } else if (state === 'gameover') {
+        if (inRect(g.tap, lbBtn)) {
+          Star.leaderboard.show();
+        } else if (inRect(g.tap, restartBtn)) {
+          startGame();
+        }
       }
-      if (Math.abs(obs.x - 50) < 20 && Math.abs(obs.y - playerY) < 30) {
-        endGame();
+    }
+
+    // --- Update ---
+    if (state === 'playing') {
+      spawnTimer += dt;
+      if (spawnTimer > 2) {
+        obstacles.push({ x: width, y: Math.random() * height, passed: false });
+        spawnTimer = 0;
       }
-    });
-    obstacles = obstacles.filter(o => o.x > -20);
-
-    // Draw player
-    c.fillStyle = '#3b82f6';
-    c.beginPath();
-    c.arc(50, playerY, 15, 0, Math.PI * 2);
-    c.fill();
-
-    // Draw obstacles
-    c.fillStyle = '#a855f7';
-    obstacles.forEach(obs => {
-      c.fillRect(obs.x - 10, obs.y - 25, 20, 50);
-    });
+      obstacles.forEach(obs => {
+        obs.x -= 200 * dt;
+        if (!obs.passed && obs.x < 50) {
+          obs.passed = true;
+          score += 10;
+          Star.audio.play('coin');
+        }
+        if (Math.abs(obs.x - 50) < 20 && Math.abs(obs.y - playerY) < 30) {
+          endGame();
+        }
+      });
+      obstacles = obstacles.filter(o => o.x > -20);
+    }
 
-    // Draw score
-    c.fillStyle = '#fff';
-    c.font = '24px sans-serif';
-    c.fillText(\`Score: \${score}\`, 20, 40);
+    // --- Draw ---
+    ctx.fillStyle = '#111827';
+    ctx.fillRect(0, 0, width, height);
+
+    if (state === 'menu') {
+      ctx.fillStyle = '#fff';
+      ctx.font = 'bold 32px sans-serif';
+      ctx.textAlign = 'center';
+      ctx.fillText('TAP TO START', width / 2, height / 2);
+      ctx.textAlign = 'left';
+    } else if (state === 'playing' || state === 'gameover') {
+      ctx.fillStyle = '#3b82f6';
+      ctx.beginPath();
+      ctx.arc(50, playerY, 15, 0, Math.PI * 2);
+      ctx.fill();
+      ctx.fillStyle = '#a855f7';
+      obstacles.forEach(obs => ctx.fillRect(obs.x - 10, obs.y - 25, 20, 50));
+      ctx.fillStyle = '#fff';
+      ctx.font = '24px sans-serif';
+      ctx.fillText(\`Score: \${score}\`, 20, 40);
+    }
+
+    if (state === 'gameover') {
+      ctx.fillStyle = 'rgba(0,0,0,0.6)';
+      ctx.fillRect(0, 0, width, height);
+      ctx.fillStyle = '#fff';
+      ctx.font = 'bold 32px sans-serif';
+      ctx.textAlign = 'center';
+      ctx.fillText('GAME OVER', width / 2, height / 2 - 40);
+      ctx.font = 'bold 48px sans-serif';
+      ctx.fillText(score, width / 2, height / 2);
+      ctx.textAlign = 'left';
+      drawButton('VIEW LEADERBOARD', lbBtn);
+      drawButton('PLAY AGAIN', restartBtn);
+    }
   });
 });
 \`\`\`
@@ -463,40 +506,26 @@ Import \`game\` and wrap your code in it. The \`game\` function handles DOM read
 \`\`\`ts
 import { game } from 'star-canvas';
 
-game(({ ctx, width, height, on, loop, ui, canvas }) => {
-  // ctx: The 2D canvas context
-  // width, height: The logical size (CSS pixels) - READ-ONLY
-  // on: Safe, delegated event listener
-  // loop: Stable game loop (with dt)
-  // ui: Safe overlay for HTML
-  // canvas: The <canvas> element
-
-  // 1. Draw on the canvas
-  loop((dt) => {
-    ctx.clearRect(0, 0, width, height);
-    ctx.fillStyle = '#3b82f6'; // blue-500
-    ctx.fillRect(width / 2 - 25, height / 2 - 25, 50, 50);
-  });
-
-  // 2. Render HTML to the safe UI overlay
-  ui.render(\`
-    <div class="absolute top-4 left-4 text-white">
-      <button id="start-btn" class="px-4 py-2 bg-blue-500 rounded">
-        Click Me
-      </button>
-    </div>
-  \`);
+game((g) => {
+  const { ctx, width, height } = g;
+  let score = 0;
 
-  // 3. Listen for button clicks \u2014 on() auto-enables pointer-events for the target
-  on('click', '#start-btn', () => {
-    console.log('Button clicked!');
-  });
+  // Game loop \u2014 input, update, draw
+  g.loop((dt) => {
+    // Input: check g.tap each frame (null if no tap)
+    if (g.tap) {
+      score++;
+    }
 
-  // 4. Gameplay taps \u2014 use canvas.addEventListener for game mechanics only
-  //    For buttons/menus, use ui.render() + on() above
-  //    The SDK auto-suppresses this handler when a UI button is clicked
-  canvas.addEventListener('pointerdown', (e) => {
-    console.log('Gameplay tap!', e);
+    // Draw
+    ctx.fillStyle = '#0f172a';
+    ctx.fillRect(0, 0, width, height);
+    ctx.fillStyle = '#3b82f6';
+    ctx.font = 'bold 32px sans-serif';
+    ctx.textAlign = 'center';
+    ctx.fillText(\`Score: \${score}\`, width / 2, height / 2);
+    ctx.fillText('TAP ANYWHERE', width / 2, height / 2 + 40);
+    ctx.textAlign = 'left';
   });
 });
 \`\`\`
@@ -524,9 +553,8 @@ The 2D drawing context. Its transform is already scaled for DPR. You **always dr
 
 The \`<canvas>\` element itself.
 
-  - **Use this for gameplay input** (e.g., \`pointerdown\` for tap-to-jump, \`pointermove\` for aiming).
-  - **For buttons and menus, use \`ui.render()\` + \`on()\` instead** \u2014 HTML buttons get hover states, touch targets, accessibility, and never conflict with gameplay handlers.
-  - Use ONE \`addEventListener\` handler with state-based logic. Multiple pointerdown handlers cause ordering bugs.
+  - For drawing, use \`ctx\` (the 2D context).
+  - For input, use \`g.tap\` / \`g.pointer\` / \`g.released\` in the game loop (see Input Polling below).
 
 ### \`width: number\` (getter)
 
@@ -561,7 +589,69 @@ A safe manager for your HTML overlay, stacked on top of the canvas.
   - \`ui.el(selector)\`: Scoped \`querySelector\` for the UI root.
   - \`ui.all(selector)\`: Scoped \`querySelectorAll\` for the UI root.
 
-**Auto-detection:** When you add \`canvas.addEventListener('pointerdown', ...)\`, the SDK automatically makes UI click-through so taps reach the canvas. Elements targeted by \`on()\` are automatically interactive \u2014 no extra CSS classes needed. Native \`<button>\` and \`<a>\` elements are also always interactive.
+### Input Polling: \`tap\`, \`pointer\`, \`released\`
+
+**The standard way to handle input.** Read these in your game loop \u2014 no event handlers needed.
+
+\`\`\`ts
+g.loop((dt) => {
+  if (g.tap) {
+    // Tap/click happened this frame. g.tap.x, g.tap.y are canvas-space.
+  }
+  if (g.pointer.down) {
+    // Pointer is held. g.pointer.x, g.pointer.y track current position.
+  }
+  if (g.released) {
+    // Pointer released this frame.
+  }
+});
+\`\`\`
+
+- **\`g.tap\`** \u2014 \`{ x, y, time } | null\`. Non-null on the frame a pointerdown occurs. Cleared next frame.
+- **\`g.pointer\`** \u2014 \`{ x, y, down }\`. Always available. Tracks current pointer position and held state.
+- **\`g.released\`** \u2014 \`{ x, y, time } | null\`. Non-null on the frame a pointerup occurs. Cleared next frame.
+- **\`g.taps\`** \u2014 \`Array<{ x, y, id, time }>\`. All taps this frame (multi-touch).
+- **\`g.pointers\`** \u2014 \`Array<{ x, y, id, down }>\`. All active pointers (multi-touch).
+
+**Why polling?** One code path with if/else for priority. No conflicting event handlers, no registration order bugs. This is how Unity, Godot, and every game engine handles input.
+
+**Button priority pattern:**
+\`\`\`ts
+if (g.tap) {
+  if (state === 'gameover' && inRect(g.tap, leaderboardBtn)) {
+    leaderboard.show();             // Checked first \u2014 highest priority
+  } else if (state === 'gameover') {
+    startGame();                    // Generic tap \u2014 lower priority
+  } else if (state === 'playing') {
+    jump();
+  }
+}
+\`\`\`
+
+**Hold-to-fire with cooldown:**
+\`\`\`ts
+let fireCooldown = 0;
+const FIRE_RATE = 0.15; // seconds between shots
+
+g.loop((dt) => {
+  fireCooldown -= dt;
+  if (g.pointer.down && fireCooldown <= 0) {
+    spawnBullet();
+    fireCooldown = FIRE_RATE;  // Slow shotgun: 0.8, fast minigun: 0.05
+  }
+});
+\`\`\`
+
+**Hover effects for canvas buttons:**
+\`\`\`ts
+g.loop((dt) => {
+  const hoverLb = state === 'gameover' && inRect(g.pointer, lbBtn);
+  drawButton('VIEW LEADERBOARD', lbBtn, hoverLb ? '#9061f9' : '#7c3aed');
+  g.canvas.style.cursor = hoverLb ? 'pointer' : 'default';
+});
+\`\`\`
+
+Taps on interactive UI elements (from \`on()\` or native \`<button>\`) are automatically suppressed from \`g.tap\`.
 
 ### Cursor Management
 
@@ -706,7 +796,8 @@ For puzzle games, card games, match-3, mobile-style games - use portrait preset.
 \`\`\`ts
 import { game } from 'star-canvas';
 
-game(({ ctx, width, height, loop, canvas, toStagePoint }) => {
+game((g) => {
+  const { ctx, width, height } = g;
   // width = 360, height = 640 (always, with letterboxing)
   const cellSize = 40;
   const gridCols = 8;
@@ -717,12 +808,17 @@ game(({ ctx, width, height, loop, canvas, toStagePoint }) => {
   const gridX = (width - gridWidth) / 2;
   const gridY = 80;
 
-  canvas.addEventListener('pointerdown', (e) => {
-    const { x, y } = toStagePoint(e);
-    // Handle tap on grid...
-  });
+  g.loop((dt) => {
+    // Input
+    if (g.tap) {
+      const col = Math.floor((g.tap.x - gridX) / cellSize);
+      const row = Math.floor((g.tap.y - gridY) / cellSize);
+      if (col >= 0 && col < gridCols && row >= 0 && row < gridRows) {
+        // Handle tap on grid cell...
+      }
+    }
 
-  loop((dt) => {
+    // Draw
     ctx.fillStyle = '#111827';
     ctx.fillRect(0, 0, width, height);
 
@@ -747,16 +843,19 @@ For games that need different dimensions (e.g., pixel art at 320\xD7180).
 \`\`\`ts
 import { game } from 'star-canvas';
 
-game(({ ctx, width, height, loop, toStagePoint, canvas }) => {
+game((g) => {
+  const { ctx, width, height } = g;
   // Custom 320\xD7180 resolution (retro pixel art style)
   const player = { x: 160, y: 90 };  // Center
 
-  canvas.addEventListener('pointerdown', (e) => {
-    const { x, y } = toStagePoint(e);
-    console.log('Tapped at:', x, y);  // Always 0-320, 0-180
-  });
+  g.loop((dt) => {
+    // Input \u2014 g.tap coords are already in canvas-space (0-320, 0-180)
+    if (g.tap) {
+      player.x = g.tap.x;
+      player.y = g.tap.y;
+    }
 
-  loop((dt) => {
+    // Draw
     ctx.fillStyle = '#111827';
     ctx.fillRect(0, 0, width, height);
 
@@ -766,9 +865,9 @@ game(({ ctx, width, height, loop, toStagePoint, canvas }) => {
 }, { width: 320, height: 180 });  // Custom resolution with letterboxing
 \`\`\`
 
-### Recipe 5: Complex Game with Canvas + UI + Events (like FLOW)
+### Recipe 5: Complex Game with Canvas + Leaderboard
 
-**Key pattern:** Canvas for gameplay input, DOM buttons for UI. Never draw buttons on canvas.
+**Key pattern:** All input via \`g.tap\` in the loop. if/else for priority \u2014 check buttons first.
 
 \`\`\`ts
 import { game } from 'star-canvas';
@@ -776,77 +875,75 @@ import { createLeaderboard } from 'star-leaderboard';
 
 const leaderboard = createLeaderboard({ gameId: '<gameId from .starrc>' });
 
-game(({ ctx, width, height, loop, ui, on, canvas, toStagePoint }) => {
+game((g) => {
+  const { ctx, width, height } = g;
   let score = 0;
   let state = 'menu';
 
-  // 1. ONE gameplay tap handler \u2014 state-based logic, no button hit-testing
-  canvas.addEventListener('pointerdown', () => {
-    if (state === 'menu') startGame();
-    else if (state === 'playing') {
-      // ... (player float logic) ...
-    }
-  });
-
-  // 2. DOM button clicks \u2014 on() auto-enables pointer-events
-  //    The SDK suppresses the canvas handler when a button is clicked
-  on('click', '#leaderboard-btn', () => leaderboard.show());
-  on('click', '#restart-btn', () => startGame());
-
-  // 3. Render UI \u2014 elements targeted by on() are automatically interactive
-  let lastState = null;
-  let lastScore = -1;
+  const lbBtn = { x: width / 2 - 120, y: height / 2 + 20, w: 240, h: 50 };
+  const restartBtn = { x: width / 2 - 120, y: height / 2 + 90, w: 240, h: 50 };
 
-  function updateUI() {
-    // CRITICAL: Only render when state/score changes, NOT every frame
-    // Calling ui.render() in the loop breaks buttons (DOM recreation)
-    if (state === lastState && score === lastScore) return;
-    lastState = state;
-    lastScore = score;
-
-    if (state === 'menu') {
-      ui.render(\`
-        <div class="h-full flex flex-col items-center justify-center text-white">
-          <h1 class="text-6xl font-bold mb-4">FLOW</h1>
-          <div class="text-2xl animate-pulse">TAP TO START</div>
-        </div>\`);
-    } else if (state === 'playing') {
-      ui.render(\`
-        <div class="absolute top-8 left-1/2 -translate-x-1/2 text-white">
-          <div class="text-5xl font-bold">\\\${score}</div>
-        </div>\`);
-    } else if (state === 'gameover') {
-      ui.render(\`
-        <div class="h-full flex flex-col items-center justify-center text-white">
-          <div class="text-3xl mb-4">GAME OVER</div>
-          <div class="text-6xl mb-4">\\\${score}</div>
-          <button id="leaderboard-btn" class="px-6 py-3 mb-4 bg-gradient-to-r from-blue-600 to-purple-600 rounded-xl font-bold shadow-lg shadow-blue-500/20">
-            VIEW LEADERBOARD
-          </button>
-          <button id="restart-btn" class="px-6 py-3 bg-gray-700 rounded-xl font-bold">
-            PLAY AGAIN
-          </button>
-        </div>\`);
-    }
+  function inRect(pt, r) {
+    return pt.x >= r.x && pt.x <= r.x + r.w && pt.y >= r.y && pt.y <= r.y + r.h;
   }
 
-  // 4. Call updateUI when state changes (NOT every frame)
-  updateUI();
-
-  // Update when state transitions happen
-  function startGame() {
-    state = 'playing';
-    score = 0;
-    ui.render(''); // Clear game-over buttons
-    updateUI();
+  function drawButton(text, r, color) {
+    ctx.fillStyle = color || '#7c3aed';
+    ctx.fillRect(r.x, r.y, r.w, r.h);
+    ctx.fillStyle = '#fff';
+    ctx.font = 'bold 16px sans-serif';
+    ctx.textAlign = 'center';
+    ctx.fillText(text, r.x + r.w / 2, r.y + r.h / 2 + 6);
   }
 
+  function startGame() { state = 'playing'; score = 0; }
+
   function endGame() {
     state = 'gameover';
-    // Submit score to leaderboard
     leaderboard.submit(score);
-    updateUI();
   }
+
+  g.loop((dt) => {
+    // --- Input (polling) ---
+    if (g.tap) {
+      if (state === 'gameover') {
+        if (inRect(g.tap, lbBtn)) leaderboard.show();
+        else if (inRect(g.tap, restartBtn)) startGame();
+      } else if (state === 'menu') {
+        startGame();
+      } else if (state === 'playing') {
+        // ... (player jump/action logic) ...
+      }
+    }
+
+    // --- Draw ---
+    ctx.fillStyle = '#111827';
+    ctx.fillRect(0, 0, width, height);
+
+    if (state === 'menu') {
+      ctx.fillStyle = '#fff';
+      ctx.font = 'bold 48px sans-serif';
+      ctx.textAlign = 'center';
+      ctx.fillText('FLOW', width / 2, height / 2 - 20);
+      ctx.font = '24px sans-serif';
+      ctx.fillText('TAP TO START', width / 2, height / 2 + 30);
+    } else if (state === 'playing') {
+      ctx.fillStyle = '#fff';
+      ctx.font = 'bold 48px sans-serif';
+      ctx.textAlign = 'center';
+      ctx.fillText(String(score), width / 2, 60);
+    } else if (state === 'gameover') {
+      ctx.fillStyle = '#fff';
+      ctx.font = '24px sans-serif';
+      ctx.textAlign = 'center';
+      ctx.fillText('GAME OVER', width / 2, height / 2 - 60);
+      ctx.font = 'bold 48px sans-serif';
+      ctx.fillText(String(score), width / 2, height / 2 - 10);
+      drawButton('VIEW LEADERBOARD', lbBtn, '#7c3aed');
+      drawButton('PLAY AGAIN', restartBtn, '#374151');
+    }
+    ctx.textAlign = 'left';
+  });
 });
 \`\`\`
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "star-sdk-cli",
-  "version": "0.1.17",
+  "version": "0.1.19",
   "description": "CLI for Star SDK — register games, install AI docs, and deploy to Star hosting",
   "type": "module",
   "bin": {