Switch to globals: load scenes and main via script order

2025-12-12 21:19:03 +01:00
parent c2535c6e65
commit a489cd839c
3 changed files with 158 additions and 142 deletions
--- a/index.html
+++ b/index.html
@@ -11,7 +11,6 @@
            rel="stylesheet"
        />
        <link rel="stylesheet" href="styles.css" />
-
    </head>
    <body>
        <div class="shell">
@@ -76,6 +75,7 @@
        </div>

        <script src="https://unpkg.com/matter-js@0.19.0/build/matter.min.js"></script>
-        <script src="main.js"></script>
+        <script src="./scenes.js"></script>
+        <script src="./main.js"></script>
    </body>
 </html>
--- a/main.js
+++ b/main.js
@@ -12,6 +12,8 @@
    Vector,
  } = Matter;

+  const { scenes = [], defaultSceneId } = window.PhysilinksScenes || {};
+
  const config = {
    gravity: 1,
    spawnIntervalMs: 520,
@@ -29,144 +31,6 @@
    },
  };

-  const scenes = [
-    {
-      id: "scene1",
-      name: "Balanced (default)",
-      config: {
-        gravity: 0.88,
-        spawnIntervalMs: 520,
-        minChain: 3,
-        palette: ["#ff595e", "#ffca3a", "#8ac926", "#1982c4", "#6a4c93"],
-        ballRadius: 38,
-        link: {
-          stiffness: 0.85,
-          lengthScale: 1.05,
-          damping: 0.08,
-          lineWidth: 3,
-          rope: true,
-          renderType: "line",
-          maxLengthMultiplier: 3.2,
-        },
-      },
-      createBodies: (w, h) => [
-        Bodies.rectangle(w / 2, h + 40, w, 80, {
-          isStatic: true,
-          restitution: 0.8,
-          render: { fillStyle: "#0ea5e9", strokeStyle: "#0ea5e9" },
-        }),
-        Bodies.rectangle(-40, h / 2, 80, h * 2, {
-          isStatic: true,
-          render: { fillStyle: "#f97316", strokeStyle: "#f97316" },
-        }),
-        Bodies.rectangle(w + 40, h / 2, 80, h * 2, {
-          isStatic: true,
-          render: { fillStyle: "#f97316", strokeStyle: "#f97316" },
-        }),
-        Bodies.rectangle(w * 0.25, h * 0.55, 160, 20, {
-          isStatic: true,
-          angle: -0.3,
-          render: { fillStyle: "#22c55e", strokeStyle: "#22c55e" },
-          plugin: { rotSpeed: 0.1 },
-        }),
-        Bodies.rectangle(w * 0.7, h * 0.4, 220, 24, {
-          isStatic: true,
-          angle: 0.26,
-          render: { fillStyle: "#a855f7", strokeStyle: "#a855f7" },
-          plugin: { rotSpeed: -0.08 },
-        }),
-      ],
-    },
-    {
-      id: "scene2",
-      name: "Low-G terraces",
-      config: {
-        gravity: 0.65,
-        spawnIntervalMs: 600,
-        minChain: 3,
-        palette: ["#fb7185", "#fbbf24", "#34d399", "#38bdf8"],
-        ballRadius: 22,
-        link: {
-          stiffness: 0.6,
-          lengthScale: 1,
-          damping: 0.01,
-          lineWidth: 4,
-          rope: false,
-          renderType: "spring",
-          maxLengthMultiplier: 6.7,
-        },
-      },
-      createBodies: (w, h) => [
-        Bodies.rectangle(w / 2, h + 50, w, 100, {
-          isStatic: true,
-          restitution: 0.9,
-        }),
-        Bodies.rectangle(-50, h / 2, 100, h * 2, { isStatic: true }),
-        Bodies.rectangle(w + 50, h / 2, 100, h * 2, { isStatic: true }),
-        Bodies.rectangle(w * 0.2, h * 0.45, 200, 18, {
-          isStatic: true,
-          angle: 0.08,
-        }),
-        Bodies.rectangle(w * 0.5, h * 0.6, 260, 18, {
-          isStatic: true,
-          angle: -0.04,
-        }),
-        Bodies.rectangle(w * 0.8, h * 0.42, 180, 18, {
-          isStatic: true,
-          angle: 0.14,
-        }),
-      ],
-    },
-    {
-      id: "scene3",
-      name: "Fast drop maze",
-      config: {
-        gravity: 1.25,
-        spawnIntervalMs: 420,
-        minChain: 3,
-        palette: ["#e879f9", "#38bdf8", "#f97316", "#22c55e"],
-        ballRadius: 16,
-        link: {
-          stiffness: 1,
-          lengthScale: 0.85,
-          damping: 0.15,
-          lineWidth: 3,
-          rope: false,
-          renderType: "line",
-          maxLengthMultiplier: 16.8,
-        },
-      },
-      createBodies: (w, h) => {
-        const bodies = [
-          Bodies.rectangle(w / 2, h + 40, w, 80, {
-            isStatic: true,
-            restitution: 0.75,
-          }),
-          Bodies.rectangle(-40, h / 2, 80, h * 2, { isStatic: true }),
-          Bodies.rectangle(w + 40, h / 2, 80, h * 2, { isStatic: true }),
-        ];
-        for (let i = 0; i < 5; i += 1) {
-          const x = (w * (i + 1)) / 6;
-          const y = h * 0.35 + (i % 2 === 0 ? 40 : -30);
-          bodies.push(
-            Bodies.circle(x, y, 18, { isStatic: true, restitution: 0.9 }),
-          );
-        }
-        bodies.push(
-          Bodies.rectangle(w * 0.3, h * 0.55, 140, 16, {
-            isStatic: true,
-            angle: -0.3,
-          }),
-          Bodies.rectangle(w * 0.7, h * 0.58, 160, 16, {
-            isStatic: true,
-            angle: 0.28,
-          }),
-        );
-        return bodies;
-      },
-    },
-  ];
-
  const sceneEl = document.getElementById("scene-wrapper");
  const activeColorEl = document.getElementById("active-color");
  const chainLenEl = document.getElementById("chain-length");
@@ -209,7 +73,13 @@
  // Static boundaries and scene-specific obstacles.
  let boundaries = [];
  let rotators = [];
-  let currentScene = scenes[0];
+  let currentScene =
+    scenes.find((s) => s.id === defaultSceneId) || scenes[0] || null;
+
+  if (currentScene && currentScene.config) {
+    Object.assign(config, currentScene.config);
+    config.link = { ...currentScene.config.link };
+  }

  const rebuildSceneBodies = () => {
    boundaries.forEach((b) => World.remove(world, b));
@@ -701,5 +571,5 @@
    sceneSelectEl.addEventListener("change", (e) => applyScene(e.target.value));
  }
  populateSceneSelect();
-  applyScene(currentScene.id);
+  applyScene((currentScene && currentScene.id) || defaultSceneId);
 })();
--- a/scenes.js
+++ b/scenes.js
@@ -0,0 +1,146 @@
+(() => {
+  const { Bodies } = Matter;
+
+  const scenes = [
+    {
+      id: "scene1",
+      name: "Balanced (default)",
+      config: {
+        gravity: 0.88,
+        spawnIntervalMs: 520,
+        minChain: 3,
+        palette: ["#ff595e", "#ffca3a", "#8ac926", "#1982c4", "#6a4c93"],
+        ballRadius: 38,
+        link: {
+          stiffness: 0.85,
+          lengthScale: 1.05,
+          damping: 0.08,
+          lineWidth: 3,
+          rope: true,
+          renderType: "line",
+          maxLengthMultiplier: 3.2,
+        },
+      },
+      createBodies: (w, h) => [
+        Bodies.rectangle(w / 2, h + 40, w, 80, {
+          isStatic: true,
+          restitution: 0.8,
+          render: { fillStyle: "#0ea5e9", strokeStyle: "#0ea5e9" },
+        }),
+        Bodies.rectangle(-40, h / 2, 80, h * 2, {
+          isStatic: true,
+          render: { fillStyle: "#f97316", strokeStyle: "#f97316" },
+        }),
+        Bodies.rectangle(w + 40, h / 2, 80, h * 2, {
+          isStatic: true,
+          render: { fillStyle: "#f97316", strokeStyle: "#f97316" },
+        }),
+        Bodies.rectangle(w * 0.25, h * 0.55, 160, 20, {
+          isStatic: true,
+          angle: -0.3,
+          render: { fillStyle: "#22c55e", strokeStyle: "#22c55e" },
+          plugin: { rotSpeed: 0.1 },
+        }),
+        Bodies.rectangle(w * 0.7, h * 0.4, 220, 24, {
+          isStatic: true,
+          angle: 0.26,
+          render: { fillStyle: "#a855f7", strokeStyle: "#a855f7" },
+          plugin: { rotSpeed: -0.08 },
+        }),
+      ],
+    },
+    {
+      id: "scene2",
+      name: "Low-G terraces",
+      config: {
+        gravity: 0.65,
+        spawnIntervalMs: 600,
+        minChain: 3,
+        palette: ["#fb7185", "#fbbf24", "#34d399", "#38bdf8"],
+        ballRadius: 22,
+        link: {
+          stiffness: 0.6,
+          lengthScale: 1,
+          damping: 0.01,
+          lineWidth: 4,
+          rope: false,
+          renderType: "spring",
+          maxLengthMultiplier: 2.7,
+        },
+      },
+      createBodies: (w, h) => [
+        Bodies.rectangle(w / 2, h + 50, w, 100, {
+          isStatic: true,
+          restitution: 0.9,
+        }),
+        Bodies.rectangle(-50, h / 2, 100, h * 2, { isStatic: true }),
+        Bodies.rectangle(w + 50, h / 2, 100, h * 2, { isStatic: true }),
+        Bodies.rectangle(w * 0.2, h * 0.45, 200, 18, {
+          isStatic: true,
+          angle: 0.08,
+        }),
+        Bodies.rectangle(w * 0.5, h * 0.6, 260, 18, {
+          isStatic: true,
+          angle: -0.04,
+        }),
+        Bodies.rectangle(w * 0.8, h * 0.42, 180, 18, {
+          isStatic: true,
+          angle: 0.14,
+        }),
+      ],
+    },
+    {
+      id: "scene3",
+      name: "Fast drop maze",
+      config: {
+        gravity: 1.25,
+        spawnIntervalMs: 420,
+        minChain: 3,
+        palette: ["#e879f9", "#38bdf8", "#f97316", "#22c55e"],
+        ballRadius: 16,
+        link: {
+          stiffness: 1,
+          lengthScale: 0.85,
+          damping: 0.15,
+          lineWidth: 3,
+          rope: false,
+          renderType: "line",
+          maxLengthMultiplier: 3.8,
+        },
+      },
+      createBodies: (w, h) => {
+        const bodies = [
+          Bodies.rectangle(w / 2, h + 40, w, 80, {
+            isStatic: true,
+            restitution: 0.75,
+          }),
+          Bodies.rectangle(-40, h / 2, 80, h * 2, { isStatic: true }),
+          Bodies.rectangle(w + 40, h / 2, 80, h * 2, { isStatic: true }),
+        ];
+        for (let i = 0; i < 5; i += 1) {
+          const x = (w * (i + 1)) / 6;
+          const y = h * 0.35 + (i % 2 === 0 ? 40 : -30);
+          bodies.push(
+            Bodies.circle(x, y, 18, { isStatic: true, restitution: 0.9 }),
+          );
+        }
+        bodies.push(
+          Bodies.rectangle(w * 0.3, h * 0.55, 140, 16, {
+            isStatic: true,
+            angle: -0.3,
+          }),
+          Bodies.rectangle(w * 0.7, h * 0.58, 160, 16, {
+            isStatic: true,
+            angle: 0.28,
+          }),
+        );
+        return bodies;
+      },
+    },
+  ];
+
+  window.PhysilinksScenes = {
+    scenes,
+    defaultSceneId: scenes[0]?.id || "scene1",
+  };
+})();