Add Stack Blocks Chaos scene

index.html

@@ -103,6 +103,7 @@
         <script src="./src/scenes/scene-relax.js"></script>
         <script src="./src/scenes/scene-swirl-arena.js"></script>
         <script src="./src/scenes/scene-storm-grid.js"></script>
+        <script src="./src/scenes/scene-stack-blocks-chaos.js"></script>
         <script src="./src/scenes/scene-stack-blocks.js"></script>
         <script src="./src/scenes/index.js"></script>
         <script src="./src/config.js"></script>

src/scenes/index.js

@@ -7,6 +7,7 @@
     "scene-lava",
     "swirl-arena",
     "relax",
+    "stack-blocks-chaos",
     "low-g-terraces",
     "fast-drop-maze",
     "storm-grid",

src/scenes/scene-stack-blocks-chaos.js

@@ -0,0 +1,87 @@
+(() => {
+  const { Bodies } = Matter;
+  const scenes = (window.PhysilinksSceneDefs =
+    window.PhysilinksSceneDefs || []);
+
+  scenes.push({
+    id: "stack-blocks-chaos",
+    name: "Stack Blocks Chaos",
+    config: {
+      gravity: 1.85,
+      spawnIntervalMs: 750,
+      autoSpawn: true,
+      minChain: 3,
+      palette: ["#fb7185", "#8b5cf6", "#22d3ee", "#fbbf24", "#24fbbf"],
+      ballRadius: 18,
+      ballShape: "rect",
+      spawnColumns: 12,
+      sizeFromColumns: true,
+      initialRows: 3,
+      requireClearSpawn: true,
+      squarePlayArea: true,
+      rowGapMultiplier: 1,
+      spawnInsets: ({ width }) => {
+        const wallThickness = Math.max(20, width * 0.02);
+        return { left: 0, right: 0 };
+      },
+      winCondition: {
+        type: "clearCount",
+        target: 100,
+      },
+      link: {
+        stiffness: 0.85,
+        lengthScale: 1.05,
+        damping: 0.08,
+        lineWidth: 3,
+        rope: true,
+        renderType: "line",
+        maxLengthMultiplier: 2.5,
+      },
+    },
+    createBodies: (w, h) => {
+      const squareSize = Math.min(w, h);
+      const left = (w - squareSize) / 2;
+      const top = (h - squareSize) / 2;
+      const wallThickness = Math.max(20, w * 0.02);
+      const floorHeight = Math.max(30, squareSize * 0.06);
+      const wallRender = {
+        fillStyle: "#1e293b",
+        strokeStyle: "#94a3b8",
+        lineWidth: 2,
+      };
+      return [
+        Bodies.rectangle(
+          left - wallThickness / 2,
+          h / 2,
+          wallThickness,
+          h + wallThickness * 2,
+          {
+            isStatic: true,
+            render: wallRender,
+          },
+        ),
+        Bodies.rectangle(
+          left + squareSize + wallThickness / 2,
+          h / 2,
+          wallThickness,
+          h + wallThickness * 2,
+          {
+            isStatic: true,
+            render: wallRender,
+          },
+        ),
+        Bodies.rectangle(
+          w / 2,
+          h + floorHeight / 2,
+          w + wallThickness * 2,
+          floorHeight,
+          {
+            isStatic: true,
+            restitution: 0.2,
+            render: wallRender,
+          },
+        ),
+      ];
+    },
+  });
+})();