star-sdk-cli 0.1.21 → 0.1.23

package/dist/cli.mjs

@@ -685,39 +685,34 @@ if (state === 'menu' || state === 'gameover') canvas.style.cursor = 'auto';  //
 
 **Decision:** Does player click on game objects? \u2192 \`'pointer'\` | Aim precisely? \u2192 \`'crosshair'\` | WASD/touch only? \u2192 \`'none'\` during play, \`'auto'\` for menus
 
-### \`toStagePoint(event)\`
+### Drag and Drop (Polling Pattern)
 
-Converts \`MouseEvent\` or \`PointerEvent\` client coordinates to the stage's logical coordinates.
-
-  - **USE THIS** for all canvas pointer input.
-
-### \`createDrag()\`
-
-Creates a drag state helper that handles coordinate conversion and offset tracking automatically.
+Use \`g.tap\`, \`g.pointer\`, and \`g.released\` for drag-and-drop \u2014 coordinates are automatic.
 
 \`\`\`ts
-const drag = createDrag();
-
-canvas.addEventListener('pointerdown', (e) => {
-  canvas.setPointerCapture(e.pointerId);  // IMPORTANT: Capture for reliable drags
-  const { x, y } = drag.point(e);         // Convert coordinates
-  const hit = pieces.find(p => /* hit test */);
-  if (hit) drag.grab(e, hit);             // Start drag with offset
-});
+let dragging = null;
+let offsetX = 0, offsetY = 0;
 
-canvas.addEventListener('pointermove', (e) => drag.move(e));  // Updates position
-canvas.addEventListener('pointerup', () => {
-  const dropped = drag.release();  // Returns dropped object (or null)
+g.loop((dt) => {
+  if (g.tap) {
+    const hit = pieces.find(p => inRect(g.tap, p));
+    if (hit) {
+      dragging = hit;
+      offsetX = hit.x - g.tap.x;  // Offset so piece doesn't jump to cursor
+      offsetY = hit.y - g.tap.y;
+    }
+  }
+  if (dragging && g.pointer.down) {
+    dragging.x = g.pointer.x + offsetX;
+    dragging.y = g.pointer.y + offsetY;
+  }
+  if (g.released && dragging) {
+    handleDrop(dragging);
+    dragging = null;
+  }
 });
 \`\`\`
 
-**API:**
-- \`point(e)\` - Pure coordinate conversion, no side effects
-- \`grab(e, obj)\` - Start dragging an object, computing offset from cursor
-- \`move(e)\` - Update dragged object's position
-- \`release()\` - End drag, returns dropped object or null
-- \`dragging\` - The currently dragged object (or null)
-
 ### \`GameOptions\` (optional)
 
 Pass an options object as the second argument to \`game()\`:
@@ -991,15 +986,15 @@ game(({ ctx, scoped, loop }) => {
 
 **Why use \`scoped()\`:** Prevents transform stack corruption from early returns, exceptions, or forgetting \`ctx.restore()\`. The context is always restored, even if the function exits early.
 
-### Recipe 7: Drag and Drop with createDrag() (RECOMMENDED)
+### Recipe 7: Drag and Drop
 
-Use the \`createDrag()\` helper - it handles coordinate conversion and offset tracking automatically.
+Use \`g.tap\`, \`g.pointer\`, and \`g.released\` for drag-and-drop. Coordinates are canvas-space automatically.
 
 \`\`\`ts
 import { game } from 'star-canvas';
 
-game(({ ctx, width, height, loop, canvas, createDrag }) => {
-  // Size relative to height for consistency
+game((g) => {
+  const { ctx, width, height } = g;
   const pieceSize = height * 0.15;
 
   const pieces = [
@@ -1008,77 +1003,8 @@ game(({ ctx, width, height, loop, canvas, createDrag }) => {
     { x: width * 0.6, y: height * 0.3, color: '#3b82f6' },
   ];
 
-  // Create drag helper - handles coordinate conversion automatically
-  const drag = createDrag();
-
-  function hitTest(x, y) {
-    for (let i = pieces.length - 1; i >= 0; i--) {
-      const p = pieces[i];
-      if (x >= p.x && x < p.x + pieceSize && y >= p.y && y < p.y + pieceSize) {
-        return p;
-      }
-    }
-    return null;
-  }
-
-  canvas.addEventListener('pointerdown', (e) => {
-    canvas.setPointerCapture(e.pointerId); // IMPORTANT: Ensures drag works outside canvas
-    const { x, y } = drag.point(e);        // Convert coordinates
-    const hit = hitTest(x, y);
-    if (hit) {
-      drag.grab(e, hit);                   // Start drag with offset from cursor
-      canvas.style.cursor = 'grabbing';
-    }
-  });
-
-  canvas.addEventListener('pointermove', (e) => {
-    drag.move(e);                          // Updates grabbed object position
-    if (!drag.dragging) {
-      const { x, y } = drag.point(e);
-      canvas.style.cursor = hitTest(x, y) ? 'grab' : 'default';
-    }
-  });
-
-  canvas.addEventListener('pointerup', () => {
-    const dropped = drag.release();        // Returns dropped object (or null)
-    if (dropped) {
-      console.log('Dropped:', dropped);
-    }
-    canvas.style.cursor = 'default';
-  });
-
-  loop(() => {
-    ctx.fillStyle = '#1f2937';
-    ctx.fillRect(0, 0, width, height);
-
-    for (const p of pieces) {
-      ctx.fillStyle = drag.dragging === p ? '#f59e0b' : p.color;
-      ctx.fillRect(p.x, p.y, pieceSize, pieceSize);
-    }
-  });
-});
-\`\`\`
-
-**CRITICAL: Always use \`setPointerCapture()\`** - This ensures drags work even when the pointer moves outside the canvas. Without it, fast drags can leave objects stuck mid-drag.
-
-### Recipe 8: Drag and Drop (Manual Pattern)
-
-If you need more control, here's the manual approach with \`toStagePoint()\`.
-
-\`\`\`ts
-import { game } from 'star-canvas';
-
-game(({ ctx, width, height, loop, canvas, toStagePoint }) => {
-  const pieceSize = height * 0.15;
-  const pieces = [
-    { x: width * 0.2, y: height * 0.3, color: '#ef4444' },
-    { x: width * 0.4, y: height * 0.4, color: '#10b981' },
-  ];
-
-  // Manual drag state
   let dragging = null;
-  let dragOffsetX = 0;
-  let dragOffsetY = 0;
+  let offsetX = 0, offsetY = 0;
 
   function hitTest(px, py) {
     for (let i = pieces.length - 1; i >= 0; i--) {
@@ -1090,34 +1016,28 @@ game(({ ctx, width, height, loop, canvas, toStagePoint }) => {
     return null;
   }
 
-  canvas.addEventListener('pointerdown', (e) => {
-    canvas.setPointerCapture(e.pointerId);  // Ensures drag works outside canvas
-    const { x, y } = toStagePoint(e);       // CRITICAL: Convert coordinates!
-    const hit = hitTest(x, y);
-    if (hit) {
-      dragging = hit;
-      dragOffsetX = x - hit.x;              // Store offset
-      dragOffsetY = y - hit.y;
-      canvas.style.cursor = 'grabbing';
+  g.loop(() => {
+    // Grab
+    if (g.tap) {
+      const hit = hitTest(g.tap.x, g.tap.y);
+      if (hit) {
+        dragging = hit;
+        offsetX = hit.x - g.tap.x;  // Offset so piece doesn't jump to cursor
+        offsetY = hit.y - g.tap.y;
+      }
     }
-  });
-
-  canvas.addEventListener('pointermove', (e) => {
-    const { x, y } = toStagePoint(e);  // CRITICAL: Convert here too!
-    if (dragging) {
-      dragging.x = x - dragOffsetX;
-      dragging.y = y - dragOffsetY;
-    } else {
-      canvas.style.cursor = hitTest(x, y) ? 'grab' : 'default';
+    // Move
+    if (dragging && g.pointer.down) {
+      dragging.x = g.pointer.x + offsetX;
+      dragging.y = g.pointer.y + offsetY;
+    }
+    // Drop
+    if (g.released && dragging) {
+      console.log('Dropped:', dragging);
+      dragging = null;
     }
-  });
-
-  canvas.addEventListener('pointerup', () => {
-    dragging = null;
-    canvas.style.cursor = 'default';
-  });
 
-  loop(() => {
+    // Draw
     ctx.fillStyle = '#1f2937';
     ctx.fillRect(0, 0, width, height);
 
@@ -1129,16 +1049,6 @@ game(({ ctx, width, height, loop, canvas, toStagePoint }) => {
 });
 \`\`\`
 
-**Common Drag-Drop Mistakes:**
-
-1. \u274C Forgetting \`toStagePoint()\` in pointermove \u2192 \`createDrag()\` fixes this
-2. \u274C No drag offset (piece "jumps" to cursor) \u2192 \`createDrag()\` fixes this
-3. \u274C Using \`e.clientX/clientY\` directly \u2192 \`createDrag()\` fixes this
-4. \u274C Not clearing state on pointerup \u2192 \`createDrag()\` fixes this
-5. \u274C Missing \`setPointerCapture()\` (drags break outside canvas) \u2192 **You must add this!**
-
-**Recommendation:** Use \`createDrag()\` + \`setPointerCapture()\` for bulletproof drag-and-drop.
-
 ### Recipe 9: Image Backgrounds
 
 Two patterns for backgrounds: **full-canvas** (unique scenes) or **tileable patterns** (repeating textures).

package/package.json

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