Add floating goal messages

src/main.js

@@ -38,6 +38,13 @@
     }
   };
 
+  const defaultMessageConfig = {
+    durationMs: 4200,
+    position: { xPercent: 50, yPercent: 10 },
+    text: null,
+    colors: null,
+  };
+
   const config = {
     gravity: 1,
     spawnIntervalMs: 520,
@@ -54,6 +61,7 @@
       renderType: "line",
       maxLengthMultiplier: 3.1,
     },
+    messages: { ...defaultMessageConfig },
   };
 
   const ui = window.PhysilinksUI.create();
@@ -167,7 +175,31 @@
     setSceneIdInUrl(next.id);
     const prevRadius = config.ballRadius;
     Object.assign(config, next.config);
-    config.link = { ...next.config.link };
+    config.link = { ...(next.config?.link || {}) };
+    const sceneMessages = next.config?.messages || {};
+    config.messages = {
+      durationMs: Number.isFinite(sceneMessages.durationMs)
+        ? sceneMessages.durationMs
+        : defaultMessageConfig.durationMs,
+      text:
+        typeof sceneMessages.text === "string" && sceneMessages.text.trim()
+          ? sceneMessages.text.trim()
+          : defaultMessageConfig.text,
+      position: {
+        xPercent:
+          typeof sceneMessages.position?.xPercent === "number"
+            ? sceneMessages.position.xPercent
+            : defaultMessageConfig.position.xPercent,
+        yPercent:
+          typeof sceneMessages.position?.yPercent === "number"
+            ? sceneMessages.position.yPercent
+            : defaultMessageConfig.position.yPercent,
+      },
+      colors: Array.isArray(sceneMessages.colors)
+        ? sceneMessages.colors
+        : defaultMessageConfig.colors,
+    };
+    ui.setMessageDefaults(config.messages);
     engine.gravity.scale =
       typeof next.config.gravityScale === "number"
         ? next.config.gravityScale
@@ -453,6 +485,7 @@
       spawnInitialBurst();
       startSpawner();
     }
+    announceGoalMessage();
   };
 
   const setHighlight = (body, on) => {
@@ -987,6 +1020,25 @@
     return null;
   };
 
+  const announceGoalMessage = () => {
+    const goal = getGoalState();
+    const text =
+      config.messages?.text ||
+      (goal && goal.label && goal.label !== "—" ? goal.label : null);
+    if (!text) return;
+    const colors =
+      (Array.isArray(config.messages?.colors) && config.messages.colors) ||
+      goal?.colors ||
+      null;
+    ui.showFloatingMessage(
+      { text, colors },
+      {
+        durationMs: config.messages.durationMs,
+        position: config.messages.position,
+      },
+    );
+  };
+
   const clampBodiesIntoView = (prevWidth, prevHeight) => {
     const scaleX = width / (prevWidth || width);
     const scaleY = height / (prevHeight || height);