Extract engine setup

src/engine.js

@@ -0,0 +1,73 @@
+(() => {
+  const { Engine, Render, Runner } = Matter;
+
+  const create = ({
+    sceneEl,
+    width,
+    height,
+    background = "transparent",
+    wireframes = false,
+    showAngleIndicator = false,
+  }) => {
+    const engine = Engine.create();
+    const render = Render.create({
+      element: sceneEl,
+      engine,
+      options: {
+        width,
+        height,
+        wireframes,
+        background,
+        showAngleIndicator,
+        pixelRatio: window.devicePixelRatio || 1,
+      },
+    });
+    Render.run(render);
+
+    const runner = Runner.create();
+    Runner.run(runner, engine);
+    let runnerActive = true;
+
+    const startRunner = () => {
+      if (!runnerActive) {
+        Runner.run(runner, engine);
+        runnerActive = true;
+      }
+    };
+
+    const stopRunner = () => {
+      if (runnerActive) {
+        Runner.stop(runner);
+        runnerActive = false;
+      }
+    };
+
+    const setRenderSize = (nextWidth, nextHeight) => {
+      const pixelRatio = window.devicePixelRatio || 1;
+      render.options.width = nextWidth;
+      render.options.height = nextHeight;
+      render.options.pixelRatio = pixelRatio;
+      render.canvas.style.width = `${nextWidth}px`;
+      render.canvas.style.height = `${nextHeight}px`;
+      render.canvas.width = nextWidth * pixelRatio;
+      render.canvas.height = nextHeight * pixelRatio;
+      Render.setPixelRatio(render, pixelRatio);
+      render.bounds.min.x = 0;
+      render.bounds.min.y = 0;
+      render.bounds.max.x = nextWidth;
+      render.bounds.max.y = nextHeight;
+      Render.lookAt(render, render.bounds);
+    };
+
+    return {
+      engine,
+      render,
+      runner,
+      startRunner,
+      stopRunner,
+      setRenderSize,
+    };
+  };
+
+  window.PhysilinksEngine = { create };
+})();

src/main.js

@@ -1,6 +1,5 @@
 (() => {
-  const { Engine, Render, Runner, World, Body, Constraint, Events, Vector } =
-    Matter;
+  const { World, Body, Constraint, Events, Vector } = Matter;
 
   const { config: baseConfig, defaultMessageConfig } = window.PhysilinksConfig
     ?.create
@@ -14,6 +13,7 @@
           colors: null,
         },
       };
+
   const config = {
     ...baseConfig,
     link: { ...(baseConfig?.link || {}) },
@@ -25,6 +25,7 @@
     defaultSceneId,
     order: sceneOrder = [],
   } = window.PhysilinksScenes || {};
+
   const { getSceneById, getSceneIdFromUrl, setSceneIdInUrl, getNextSceneId } =
     window.PhysilinksSceneRegistry || {};
 
@@ -35,44 +36,20 @@
   let height = sceneEl.clientHeight;
   const BALL_BASELINE = 680; // reference height used for relative ball sizing
 
-  const engine = Engine.create();
+  const { engine, render, runner, startRunner, stopRunner, setRenderSize } =
+    window.PhysilinksEngine.create({
+      sceneEl,
+      width,
+      height,
+      background: "transparent",
+      wireframes: false,
+      showAngleIndicator: false,
+    });
   const defaultGravityScale = engine.gravity.scale;
   const defaultTimeScale = engine.timing.timeScale || 1;
   engine.gravity.y = config.gravity;
   const world = engine.world;
 
-  const render = Render.create({
-    element: sceneEl,
-    engine,
-    options: {
-      width,
-      height,
-      wireframes: false,
-      background: "transparent",
-      showAngleIndicator: false,
-      pixelRatio: window.devicePixelRatio || 1,
-    },
-  });
-  Render.run(render);
-
-  const runner = Runner.create();
-  Runner.run(runner, engine);
-  let runnerActive = true;
-
-  const startRunner = () => {
-    if (!runnerActive) {
-      Runner.run(runner, engine);
-      runnerActive = true;
-    }
-  };
-
-  const stopRunner = () => {
-    if (runnerActive) {
-      Runner.stop(runner);
-      runnerActive = false;
-    }
-  };
-
   // Static boundaries and scene-specific obstacles.
   let boundaries = [];
   let rotators = [];
@@ -580,20 +557,7 @@
     const prevRadius = config.ballRadius;
     width = sceneEl.clientWidth;
     height = sceneEl.clientHeight;
-    const pixelRatio = window.devicePixelRatio || 1;
-    render.options.width = width;
-    render.options.height = 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);
+    setRenderSize(width, height);
     spawnSystem.updateBallRadius(prevRadius);
     clampBodiesIntoView(prevWidth, prevHeight);
     rebuildSceneBodies();