fix ripple

Co-authored-by: Copilot <copilot@github.com>

Overlord-Server/public/assets/ripple.js

@@ -1,32 +1,50 @@
-function addRippleEffect(element) {
+(() => {
-  element.classList.add("ripple");
+  if (window.__overlordRippleInitialized) {
+    return;
+  }
+  window.__overlordRippleInitialized = true;
 
-  element.addEventListener("click", function (e) {
+  function addRippleEffect(element) {
-    this.classList.remove("ripple-active");
+    if (!element || element.dataset.rippleBound === "1") {
+      return;
+    }
 
-    const rect = this.getBoundingClientRect();
+    element.classList.add("ripple");
-    const x = e.clientX - rect.left;
+    element.dataset.rippleBound = "1";
-    const y = e.clientY - rect.top;
 
-    this.style.setProperty("--x", x + "px");
+    element.addEventListener("click", function (e) {
-    this.style.setProperty("--y", y + "px");
-
-    void this.offsetWidth;
-
-    this.classList.add("ripple-active");
-
-    setTimeout(() => {
       this.classList.remove("ripple-active");
-    }, 600);
-  });
-}
 
-document.addEventListener("DOMContentLoaded", () => {
+      const rect = this.getBoundingClientRect();
-  document
+      const x = e.clientX - rect.left;
-    .querySelectorAll("button:not(.no-ripple), .button:not(.no-ripple)")
+      const y = e.clientY - rect.top;
-    .forEach((btn) => {
+
-      addRippleEffect(btn);
+      this.style.setProperty("--x", x + "px");
+      this.style.setProperty("--y", y + "px");
+
+      void this.offsetWidth;
+
+      this.classList.add("ripple-active");
+
+      setTimeout(() => {
+        this.classList.remove("ripple-active");
+      }, 600);
     });
-});
+  }
 
-window.addRippleEffect = addRippleEffect;
+  function initRippleEffects() {
+    document
+      .querySelectorAll("button:not(.no-ripple), .button:not(.no-ripple)")
+      .forEach((btn) => {
+        addRippleEffect(btn);
+      });
+  }
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", initRippleEffects, { once: true });
+  } else {
+    initRippleEffects();
+  }
+
+  window.addRippleEffect = addRippleEffect;
+})();