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 };
+})();