Refine relax scene with draggable soft blobs and batch spawns

main.js

@@ -202,51 +202,23 @@
     const y = spawnFromBottom
       ? height + config.ballRadius * 2
       : -config.ballRadius * 2;
-    const batchMin = currentScene?.config?.spawnBatchMin ?? 1;
+    const ball = createBallBody(x, y, color);
-    const batchMax = currentScene?.config?.spawnBatchMax ?? 1;
+    ball.plugin = {
-    const batchCount =
-      batchMin === batchMax
-        ? batchMin
-        : Math.max(
-            batchMin,
-            Math.floor(Math.random() * (batchMax - batchMin + 1)) + batchMin,
-          );
-    for (let i = 0; i < batchCount; i += 1) {
-      const blob = createBallBodies(
-        Math.min(
-          Math.max(
-            config.ballRadius + 10,
-            x + (i - batchCount / 2) * config.ballRadius * 1.5,
-          ),
-          width - config.ballRadius - 10,
-        ),
-        y +
-          i *
-            (spawnFromBottom
-              ? -config.ballRadius * 0.5
-              : config.ballRadius * 0.5),
       color,
-      );
+      hasEntered: false,
-      if (blob.constraints.length > 0 && blob.blobId) {
+      entryCheckId: null,
-        blobConstraints.set(blob.blobId, blob.constraints);
+      squishX: 1,
-      }
+      squishY: 1,
-      blob.bodies.forEach((body) => {
+    };
-        balls.push(body);
+    balls.push(ball);
-        World.add(world, body);
+    World.add(world, ball);
-        if (!currentScene?.config?.noGameOver) {
+    ball.plugin.entryCheckId = setTimeout(() => {
-          body.plugin.entryCheckId = setTimeout(() => {
+      ball.plugin.entryCheckId = null;
-            body.plugin.entryCheckId = null;
       if (gameOver) return;
-            if (!body.plugin.hasEntered && Math.abs(body.velocity.y) < 0.2) {
+      if (!ball.plugin.hasEntered && Math.abs(ball.velocity.y) < 0.2) {
         triggerGameOver();
       }
     }, 1500);
-        }
-      });
-      if (blob.constraints.length > 0) {
-        World.add(world, blob.constraints);
-      }
-    }
   };
 
   const startSpawner = () => {

scenes/scene-relax.js

@@ -50,20 +50,20 @@
             render: { fillStyle: "#0ea5e9", strokeStyle: "#0ea5e9" },
           },
         ),
-        Bodies.rectangle(w / 2, -wallThickness / 2, w + wallThickness * 2, wallThickness, {
-          isStatic: true,
-          render: { fillStyle: "#0ea5e9", strokeStyle: "#0ea5e9" },
-        }),
         Bodies.rectangle(
+          w / 2,
           -wallThickness / 2,
-          h / 2,
+          w + wallThickness * 2,
           wallThickness,
-          wallHeight,
           {
             isStatic: true,
-            render: { fillStyle: "#7c3aed", strokeStyle: "#7c3aed" },
+            render: { fillStyle: "#0ea5e9", strokeStyle: "#0ea5e9" },
           },
         ),
+        Bodies.rectangle(-wallThickness / 2, h / 2, wallThickness, wallHeight, {
+          isStatic: true,
+          render: { fillStyle: "#7c3aed", strokeStyle: "#7c3aed" },
+        }),
         Bodies.rectangle(
           w + wallThickness / 2,
           h / 2,