Make scene scaling responsive

main.js

@@ -36,6 +36,7 @@
 
   let width = sceneEl.clientWidth;
   let height = sceneEl.clientHeight;
+  const BALL_BASELINE = 680; // reference height used for relative ball sizing
 
   const engine = Engine.create();
   engine.gravity.y = config.gravity;
@@ -122,8 +123,10 @@
     const next = scenes.find((s) => s.id === sceneId) || scenes[0];
     currentScene = next;
     ui.setSceneSelection(next.id);
+    const prevRadius = config.ballRadius;
     Object.assign(config, next.config);
     config.link = { ...next.config.link };
+    updateBallRadius(prevRadius);
     engine.gravity.y = config.gravity;
     highScore = loadHighScore(next.id);
     rebuildSceneBodies();
@@ -432,17 +435,73 @@
     ui.buildLegend(config.palette);
   };
 
+  const computeBallRadius = () => {
+    const baseRadius =
+      (currentScene && currentScene.config && currentScene.config.ballRadius) ||
+      config.ballRadius ||
+      18;
+    const dim = Math.max(1, Math.min(width, height));
+    const scaled = (baseRadius * dim) / BALL_BASELINE;
+    return Math.round(Math.max(12, Math.min(52, scaled)));
+  };
+
+  const updateBallRadius = (prevRadius) => {
+    const nextRadius = computeBallRadius();
+    if (
+      Number.isFinite(prevRadius) &&
+      prevRadius > 0 &&
+      nextRadius !== prevRadius
+    ) {
+      const scale = nextRadius / prevRadius;
+      balls.forEach((ball) => {
+        Body.scale(ball, scale, scale);
+        ball.circleRadius = nextRadius;
+      });
+    }
+    config.ballRadius = nextRadius;
+  };
+
+  const clampBodiesIntoView = (prevWidth, prevHeight) => {
+    const scaleX = width / (prevWidth || width);
+    const scaleY = height / (prevHeight || height);
+    const margin = config.ballRadius * 1.2;
+    balls.forEach((ball) => {
+      const nextX = Math.min(
+        Math.max(ball.position.x * scaleX, margin),
+        Math.max(margin, width - margin),
+      );
+      const nextY = Math.min(
+        ball.position.y * scaleY,
+        Math.max(height - margin, margin),
+      );
+      Body.setPosition(ball, { x: nextX, y: nextY });
+      Body.setVelocity(ball, { x: 0, y: 0 });
+    });
+    resetChainVisuals();
+  };
+
   const handleResize = () => {
+    const prevWidth = width;
+    const prevHeight = height;
+    const prevRadius = config.ballRadius;
     width = sceneEl.clientWidth;
     height = sceneEl.clientHeight;
-    render.canvas.width = width;
-    render.canvas.height = height;
+    const pixelRatio = window.devicePixelRatio || 1;
     render.options.width = width;
     render.options.height = height;
-    Render.lookAt(render, {
-      min: { x: 0, y: 0 },
-      max: { x: width, y: height },
-    });
+    render.options.pixelRatio = pixelRatio;
+    render.canvas.style.width = `${width}px`;
+    render.canvas.style.height = `${height}px`;
+    render.canvas.width = width * pixelRatio;
+    render.canvas.height = height * pixelRatio;
+    Render.setPixelRatio(render, pixelRatio);
+    render.bounds.min.x = 0;
+    render.bounds.min.y = 0;
+    render.bounds.max.x = width;
+    render.bounds.max.y = height;
+    Render.lookAt(render, render.bounds);
+    updateBallRadius(prevRadius);
+    clampBodiesIntoView(prevWidth, prevHeight);
     rebuildSceneBodies();
   };
 
@@ -537,5 +596,6 @@
     scenes,
     (currentScene && currentScene.id) || defaultSceneId,
   );
+  updateBallRadius();
   applyScene((currentScene && currentScene.id) || defaultSceneId);
 })();