Add toast notification system

Add more toast types

games/static/js/htmx-redirect-toast.js

@@ -0,0 +1,37 @@
+(function() {
+  htmx.defineExtension("hx-redirect-toast", {
+    isInlineSwap: function(swapStyle) {
+      return swapStyle === "hx-redirect-toast";
+    },
+    handleSwap: function(swapStyle, target, fragment, settleInfo, htmxConfig) {
+      var xhr = htmxConfig.xhr;
+      var hxRedirect = xhr.getResponseHeader("HX-Redirect");
+      var hxTrigger = xhr.getResponseHeader("HX-Trigger");
+
+      // Redirect immediately (toast will be shown on the new page)
+      if (hxRedirect) {
+        window.location.href = hxRedirect;
+      }
+
+      // Only dispatch HX-Trigger events for toasts when not redirecting
+      if (!hxRedirect && hxTrigger) {
+        var triggers = JSON.parse(hxTrigger);
+        var events = Array.isArray(triggers) ? triggers : [triggers];
+        events.forEach(function(triggerObj) {
+          Object.entries(triggerObj).forEach(function(entry) {
+            var name = entry[0];
+            var detail = entry[1];
+            try { detail = JSON.parse(detail); } catch(e) {}
+            target.dispatchEvent(new CustomEvent(name, {
+              detail: detail,
+              bubbles: true,
+              cancelable: true
+            }));
+          });
+        });
+      }
+      // Return null to prevent any DOM swap
+      return null;
+    }
+  });
+})();

games/static/js/toast.js

@@ -0,0 +1,173 @@
+document.addEventListener("alpine:init", () => {
+  let idCounter = 0;
+
+  console.log("[toast] Alpine available:", typeof Alpine !== "undefined");
+
+  Alpine.store("toasts", {
+    toasts: [],
+
+    addToast(message, type) {
+      console.log("[toast] addToast called:", { message, type });
+      if (!type) type = "info";
+      const validTypes = ["success", "error", "info", "warning", "debug"];
+      if (!validTypes.includes(type)) type = "info";
+
+      if (this.toasts.length >= 3) {
+        console.log("[toast] max 3 toasts reached, removing oldest");
+        this.toasts.shift();
+      }
+
+      const id = ++idCounter;
+      console.log("[toast] toast added, count:", this.toasts.length);
+      this.toasts.push({ id, message, type, visible: true, timer: null, pausedAt: null });
+
+      if (type !== "error") {
+        const toast = this.toasts[this.toasts.length - 1];
+        const autoDismissDelay = type === "debug" ? 3000 : 5000;
+        toast.timer = setTimeout(() => {
+          console.log("[toast] auto-dismiss after " + (autoDismissDelay / 1000) + "s");
+          this.dismissToast(id);
+        }, autoDismissDelay);
+      }
+    },
+
+    dismissToast(id) {
+      console.log("[toast] dismissToast for id:", id);
+      const idx = this.toasts.findIndex((t) => t.id === id);
+      if (idx === -1) { console.log("[toast] toast not found"); return; }
+
+      const toast = this.toasts[idx];
+      if (toast.timer) clearTimeout(toast.timer);
+      toast.visible = false;
+
+      setTimeout(() => {
+        this.toasts = this.toasts.filter((t) => t.id !== id);
+        console.log("[toast] after dismiss, count:", this.toasts.length);
+      }, 300);
+    },
+
+    clearToastTimer(id) {
+      const toast = this.toasts.find((t) => t.id === id);
+      if (toast?.timer) {
+        console.log("[toast] pause timer for toast id:", id);
+        clearTimeout(toast.timer);
+        toast.timer = null;
+        toast.pausedAt = Date.now();
+      }
+    },
+
+    resumeToastTimer(id, duration) {
+      const toast = this.toasts.find((t) => t.id === id);
+      if (toast?.pausedAt && toast.timer === null) {
+        console.log("[toast] resume timer for toast id:", id);
+        toast.timer = setTimeout(() => {
+          this.dismissToast(id);
+        }, duration);
+        toast.pausedAt = null;
+      }
+    },
+  });
+
+  Alpine.data("toastStore", () => ({
+    init() {
+      console.log("[toast] toastStore.init running");
+      console.log("[toast] Alpine store toasts:", Alpine.store("toasts").toasts);
+
+      window.addEventListener("show-toast", (e) => {
+        console.log("[toast] show-toast event received:", e.detail);
+        if (Array.isArray(e.detail)) {
+          e.detail.forEach((msg) => {
+            Alpine.store("toasts").addToast(msg.message, msg.type);
+          });
+        } else {
+          Alpine.store("toasts").addToast(e.detail.message, e.detail.type);
+        }
+      });
+
+      try {
+        const script = document.getElementById("django-messages");
+        if (script) {
+          const msgs = JSON.parse(
+            script.textContent || script.innerText || "[]"
+          );
+          console.log("[toast] django-messages script found:", msgs);
+          if (Array.isArray(msgs)) {
+            msgs.forEach((msg) => {
+              console.log("[toast] loading django-message:", msg);
+              Alpine.store("toasts").addToast(msg.message, msg.type || "info");
+            });
+          }
+        }
+      } catch (e) {
+        console.error("[toast] localStorage restore failed:", e);
+        // ignore parse errors
+      }
+    },
+
+    addToast(message, type) {
+      console.log("[toast] toastStore.addToast delegating:", { message, type });
+      Alpine.store("toasts").addToast(message, type);
+    },
+
+    dismissToast(id) {
+      console.log("[toast] toastStore.dismissToast delegating:", id);
+      Alpine.store("toasts").dismissToast(id);
+    },
+  }));
+});
+
+function toast(message, type) {
+  console.log("[toast] toast() called:", { message, type });
+  const evt = new CustomEvent("show-toast", {
+    detail: { message, type },
+    bubbles: true,
+  });
+  document.dispatchEvent(evt);
+  console.log("[toast] CustomEvent dispatched, type:", evt.type);
+}
+window.toast = toast;
+
+/**
+ * Wrapper around fetch() that dispatches HTMX HX-Trigger events.
+ * Use this for any fetch() call that expects HX-Trigger headers
+ * (e.g., to show toasts via the HTMX middleware).
+ *
+ * @todo Migrate these call sites to hx-post + hx-on::after-request
+ * for HTMX-native toast handling.
+ */
+window.fetchWithHtmxTriggers = function fetchWithHtmxTriggers(url, options = {}) {
+  console.log("[fetchWithHtmxTriggers] fetching:", url);
+  return fetch(url, options).then(async (response) => {
+    console.log("[fetchWithHtmxTriggers] response status:", response.status);
+    const htmxTrigger = response.headers.get("HX-Trigger");
+    console.log("[fetchWithHtmxTriggers] HX-Trigger header:", htmxTrigger);
+    if (htmxTrigger) {
+      let triggers;
+      try {
+        triggers = JSON.parse(htmxTrigger);
+        console.log("[fetchWithHtmxTriggers] parsed triggers:", triggers);
+      } catch {
+        console.warn("[fetchWithHtmxTriggers] failed to parse HX-Trigger JSON");
+        return response;
+      }
+      // Handle both single object and array of events
+      const events = Array.isArray(triggers) ? triggers : [triggers];
+      events.forEach((triggerObj) => {
+        Object.entries(triggerObj).forEach(([name, detail]) => {
+          console.log("[fetchWithHtmxTriggers] dispatching event:", name, detail);
+          let parsedDetail = detail;
+          try {
+            parsedDetail = JSON.parse(detail);
+          } catch {
+            // keep as string
+          }
+          document.dispatchEvent(new CustomEvent(name, {
+            detail: parsedDetail,
+            bubbles: true,
+          }));
+        });
+      });
+    }
+    return response;
+  });
+};