refactor; level reorder

src/ui.js

@@ -232,6 +232,8 @@
       el.appendChild(textSpan);
     };
 
+    const activeMessages = [];
+
     const showFloatingMessage = (message, options = {}) => {
       if (!floatingMessagesEl) return;
       const msgObj =
@@ -250,18 +252,24 @@
       el.className = "floating-message";
       renderFloatingMessage(el, text, colors);
       el.style.left = `${position.xPercent ?? 50}%`;
-      el.style.top = `${position.yPercent ?? 10}%`;
+      const verticalOffset = activeMessages.length * 34;
+      el.style.top = `calc(${position.yPercent ?? 10}% + ${verticalOffset}px)`;
       floatingMessagesEl.appendChild(el);
       requestAnimationFrame(() => {
         el.classList.add("visible");
       });
       setTimeout(() => {
         el.classList.remove("visible");
-        setTimeout(() => el.remove(), 260);
+        setTimeout(() => {
+          el.remove();
+          const idx = activeMessages.indexOf(el);
+          if (idx >= 0) activeMessages.splice(idx, 1);
+        }, 260);
       }, durationMs);
+      activeMessages.push(el);
     };
 
-    return {
+    const api = {
       sceneEl,
       updateHud,
       buildLegend,
@@ -278,7 +286,15 @@
       showFloatingMessage,
       setMessageDefaults,
     };
+    return api;
   };
 
-  window.PhysilinksUI = { create };
+  window.PhysilinksUI = {
+    create: (...args) => {
+      const instance = create(...args);
+      window.PhysilinksUI.instance = instance;
+      return instance;
+    },
+    instance: null,
+  };
 })();