Extract config defaults

src/main.js

@@ -2,6 +2,24 @@
   const { Engine, Render, Runner, World, Body, Constraint, Events, Vector } =
     Matter;
 
+  const { config: baseConfig, defaultMessageConfig } = window.PhysilinksConfig
+    ?.create
+    ? window.PhysilinksConfig.create()
+    : {
+        config: {},
+        defaultMessageConfig: {
+          durationMs: 4200,
+          position: { xPercent: 50, yPercent: 10 },
+          text: null,
+          colors: null,
+        },
+      };
+  const config = {
+    ...baseConfig,
+    link: { ...(baseConfig?.link || {}) },
+    messages: { ...(baseConfig?.messages || {}) },
+  };
+
   const {
     scenes = [],
     defaultSceneId,
@@ -10,33 +28,6 @@
   const { getSceneById, getSceneIdFromUrl, setSceneIdInUrl, getNextSceneId } =
     window.PhysilinksSceneRegistry || {};
 
-  const defaultMessageConfig = {
-    durationMs: 4200,
-    position: { xPercent: 50, yPercent: 10 },
-    text: null,
-    colors: null,
-  };
-
-  const config = {
-    gravity: 1,
-    spawnIntervalMs: 520,
-    autoSpawn: true,
-    minChain: 3,
-    palette: ["#ff595e", "#ffca3a", "#8ac926", "#1982c4", "#6a4c93"],
-    ballRadius: 18,
-    ballShape: "circle",
-    link: {
-      stiffness: 0.85,
-      lengthScale: 1.05, // max stretch factor; slack below this
-      damping: 0.08,
-      lineWidth: 3,
-      rope: true,
-      renderType: "line",
-      maxLengthMultiplier: 3.1,
-    },
-    messages: { ...defaultMessageConfig },
-  };
-
   const ui = window.PhysilinksUI.create();
   const { sceneEl } = ui;
 
@@ -87,10 +78,13 @@
   let rotators = [];
   let oscillators = [];
   const initialSceneId =
-    getSceneIdFromUrl() ||
-    (getSceneById(defaultSceneId) ? defaultSceneId : null) ||
+    (getSceneIdFromUrl && getSceneIdFromUrl(scenes)) ||
+    (getSceneById && getSceneById(scenes, defaultSceneId)
+      ? defaultSceneId
+      : null) ||
     scenes[0]?.id;
-  let currentScene = getSceneById(initialSceneId) || scenes[0] || null;
+  let currentScene =
+    (getSceneById && getSceneById(scenes, initialSceneId)) || scenes[0] || null;
 
   if (currentScene && currentScene.config) {
     Object.assign(config, currentScene.config);
@@ -128,7 +122,7 @@
   } = window.PhysilinksStorage || {};
 
   const applyScene = (sceneId) => {
-    const next = getSceneById(sceneId) || scenes[0];
+    const next = (getSceneById && getSceneById(scenes, sceneId)) || scenes[0];
     if (!next) return;
     currentScene = next;
     ui.setSceneSelection(next.id);