Add new test case

rexrainbow · rexrainbow · commit 6dbb31eb496f · 2025-10-10T18:05:48.000+08:00
diff --git a/docs/docs/prompts/shape-spinner-custom.md b/docs/docs/prompts/shape-spinner-custom.md
@@ -309,3 +309,96 @@ new Phaser.Game(config);
 * **Rotating box**: first half fill; second half `rotateAround(cx, cy, angle)`.
 
 > This document provides **all authority information GPT needs**—no external files required.
+
+---
+
+## 10) Build a Live Demo (drop-in `.html` that runs immediately)
+
+> **Goal**: In addition to `Add<SpinnerName>Spinner(...)` and the minimal scene, include a **complete HTML file** in the reply. Save as `demo.html` and open in a browser to see the spinner.
+
+**Rules (bake these into your reply template):**
+
+1. Load Phaser 3 from the official CDN.
+2. In `preload()`, load the rexSpinner scene plugin using `this.load.scenePlugin(...)` (GitHub raw URL).
+3. In `create()`, call the just-generated `Add<SpinnerName>Spinner(...)`.
+4. Emit the HTML below and replace the `<Add...>` call, its parameters, and colors to match the user’s request.
+
+**HTML template (runnable as-is):**
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Custom Spinner Live Demo</title>
+  <style>
+    html, body { height: 100%; margin: 0; background:#222; }
+    #game-root { width: 100%; height: 100%; }
+  </style>
+  <!-- Phaser CDN -->
+  <script src="https://cdn.jsdelivr.net/npm/phaser@3/dist/phaser.js"></script>
+</head>
+<body>
+  <div id="game-root"></div>
+  <script>
+    class Demo extends Phaser.Scene {
+      constructor(){ super('demo'); }
+      preload(){
+        this.load.scenePlugin({
+          key: 'rexspinnerplugin',
+          url: 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexspinnerplugin.min.js',
+          sceneKey: 'rexSpinner'
+        });
+      }
+      create(){
+        // Call the spinner function you generated in your reply:
+        AddOrbitDotsSpinner(this, 400, 300, 120, 120, {
+          count: 10, thickness: 0.15, ring: 0.78, duration: 900
+        });
+      }
+    }
+
+    // === Example spinner definition (replace/extend with the user-specific spinner you produce) ===
+    function AddOrbitDotsSpinner(scene, x, y, width, height, options = {}) {
+      const { count = 12, thickness = 0.12, ring = 0.8, duration = 1000, start = true } = options;
+      return scene.rexSpinner.add.custom({
+        x, y, width, height, duration, start,
+        create: { circle: Array.from({ length: count }, (_, i) => `dot${i}`) },
+        update: function () {
+          const cx = this.centerX, cy = this.centerY, R = this.radius;
+          const t = this.value; // 0..1
+          const shapes = this.getShapes();
+          const angleStep = 360 / count;
+          const ringR = R * ring;
+          const dotR = R * thickness;
+          for (let i = 0; i < count; i++) {
+            const phase = (i / count + t) % 1;
+            const deg = i * angleStep + phase * 360;
+            const rad = Phaser.Math.DEG_TO_RAD * deg;
+            const x = cx + ringR * Math.cos(rad);
+            const y = cy + ringR * Math.sin(rad);
+            const s = shapes[i];
+            const alpha = Phaser.Math.Linear(0.35, 1, 1 - phase);
+            s.setCenterPosition(x, y).setRadius(dotR, dotR).fillStyle(this.color, alpha);
+          }
+        }
+      });
+    }
+
+    const config = {
+      type: Phaser.AUTO,
+      parent: 'game-root',
+      width: 800,
+      height: 600,
+      backgroundColor: '#222222',
+      scale: { mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH },
+      scene: Demo,
+    };
+    new Phaser.Game(config);
+  </script>
+</body>
+</html>
+```
+
+> When delivering, replace the `AddOrbitDotsSpinner(...)` call and the function body above with the spinner you generated for the user, and the demo will run instantly.
diff --git a/examples/spinner/custom-explode-ring.js b/examples/spinner/custom-explode-ring.js
@@ -11,16 +11,23 @@ class Demo extends Phaser.Scene {
     preload() { }
 
     create() {
-        var spinner = AddExplodeBlobSpinner(this, 400, 300, 260, 260, {
+        var spinner = AddDualBlobSpinner(this, 400, 300, 280, 280, {
             count: 64,
             base: 0.2,
             amp: 0.7,
             jitter: 0.8,
+            innerMin: 0.60,
+            innerMax: 0.85,
+
             duration: 1100,
-            stroke: true,
-            strokeWidth: 1.5,
+            strokeWidth: 0,
+
+            color: 0x4dabf7,
+            innerColor: 0xffe066,
+
             start: true
         });
+
         var graphics = this.add.graphics({
             lineStyle: {
                 width: 2, color: 0xff0000, alpha: 1
@@ -33,15 +40,18 @@ class Demo extends Phaser.Scene {
     update() { }
 }
 
-function AddExplodeBlobSpinner(scene, x, y, width, height, options = {}) {
+function AddDualBlobSpinner(scene, x, y, width, height, options = {}) {
     const {
         count = 64,
         base = 0.55,
         amp = 0.35,
         jitter = 0.25,
+        innerMin = 0.55,
+        innerMax = 0.85,
         duration = 1000,
-        stroke = true,
-        strokeWidth = 1,
+        strokeWidth = 0,
+        innerColor = 0xffffff,
+        color = 0x33aaff,
         start = true
     } = options;
 
@@ -50,63 +60,71 @@ function AddExplodeBlobSpinner(scene, x, y, width, height, options = {}) {
 
     return scene.rexSpinner.add.custom({
         x, y, width, height, duration, start,
+        color,
 
-        create: { lines: ['rim'] },
+        create: { lines: ['outer', 'inner'] },
 
         update: function () {
             const cx = this.centerX, cy = this.centerY, R = this.radius;
-            const t = this.value; // 0..1
+            const t = this.value;
             const step = 360 / count;
             const rBase = R * base;
             const rAmp = R * amp;
 
-            const path = this.getShape('rim');
+            const outer = this.getShape('outer');
+            const inner = this.getShape('inner');
 
-            let prevT = path.getData('_prevT', 1);
-            let targets = path.getData('targets', null);
+            let prevT = outer.getData('_prevT', 1);
+            let targets = outer.getData('targets', null);
+            let scales = outer.getData('scales', null);
 
-            if (t < prevT || !targets) {
-                if (!targets) {
-                    targets = new Array(count);
-                    path.setData('targets', targets);
-                }
+            if (t < prevT || !targets || !scales) {
+                if (!targets) { targets = new Array(count); outer.setData('targets', targets); }
+                if (!scales) { scales = new Array(count); outer.setData('scales', scales); }
                 for (let i = 0; i < count; i++) {
                     targets[i] = clamp01(1 - jitter + rand(0, jitter * 2));
+                    scales[i] = rand(innerMin, innerMax);
                 }
             }
-            path.setData('_prevT', t);
+            outer.setData('_prevT', t);
 
             let k;
-            if (t < 0.5) {
-                const u = t * 2;
-                k = 1 - Math.pow(1 - u, 3);
-            } else {
-                const u = (t - 0.5) * 2;
-                k = 1 - u * u * u;
-            }
+            if (t < 0.5) { const u = t * 2; k = 1 - Math.pow(1 - u, 3); }
+            else { const u = (t - 0.5) * 2; k = 1 - u * u * u; }
+
+            let fx = 0, fy = 0, gfx = 0, gfy = 0;
 
-            let firstX = 0, firstY = 0;
             for (let i = 0; i < count; i++) {
-                const deg = i * step;
+                const deg = i * (360 / count);
                 const rad = deg * (Math.PI / 180);
-                const rNow = rBase + rAmp * k * targets[i];
-                const x = cx + rNow * Math.cos(rad);
-                const y = cy + rNow * Math.sin(rad);
+
+                const rOuter = rBase + rAmp * k * targets[i];
+                const rInner = rOuter * scales[i];
+
+                const xo = cx + rOuter * Math.cos(rad);
+                const yo = cy + rOuter * Math.sin(rad);
+                const xi = cx + rInner * Math.cos(rad);
+                const yi = cy + rInner * Math.sin(rad);
 
                 if (i === 0) {
-                    path.startAt(x, y);
-                    firstX = x; firstY = y;
+                    outer.startAt(xo, yo); inner.startAt(xi, yi);
+                    fx = xo; fy = yo; gfx = xi; gfy = yi;
                 } else {
-                    path.lineTo(x, y);
+                    outer.lineTo(xo, yo); inner.lineTo(xi, yi);
                 }
             }
-            path.lineTo(firstX, firstY).close();
 
-            path.fillStyle(this.color, 1);
-            if (stroke) {
-                path.lineStyle(strokeWidth, this.color, 1);
+            outer.lineTo(fx, fy).close();
+            inner.lineTo(gfx, gfy).close();
+
+            outer.fillStyle(this.color, 1);
+            inner.fillStyle(innerColor, 1);
+
+            if (strokeWidth > 0) {
+                outer.lineStyle(strokeWidth, this.color, 1);
+                inner.lineStyle(strokeWidth, innerColor, 1);
             } else {
-                path.lineStyle();
+                outer.lineStyle(); inner.lineStyle();
             }
         }
     });
diff --git a/examples/spinner/custom-snake.bat b/examples/spinner/custom-snake.bat
@@ -0,0 +1,4 @@
+set main=./examples/spinner/custom-snake.js
+cd ..
+cd ..
+npm run dev
diff --git a/examples/spinner/custom-snake.js b/examples/spinner/custom-snake.js

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +set main=./examples/spinner/custom-snake.js
 +cd ..
 +cd ..
 +npm run dev