easter-egg-quest 1.0.14 → 1.0.16

package/dist/easter-egg-quest.es.js

@@ -462,6 +462,12 @@ class InputTracker {
     this._phases = [];
     this._currentPhaseType = "still";
     this._currentPhaseStart = Date.now();
+    this._snapshot.isMoving = false;
+    this._snapshot.velocity = 0;
+    if (this._stillTimer) {
+      clearTimeout(this._stillTimer);
+      this._stillTimer = null;
+    }
   }
   resetCounts() {
     this._snapshot.totalClicks = 0;
@@ -567,6 +573,10 @@ class HiddenEntry {
     this._hintVisibleStart = 0;
     this._hintCheckInterval = null;
     this._hintVisibilityHandler = null;
+    this._domObserver = null;
+    this._intersectionObserver = null;
+    this._mutationDebounce = null;
+    this._navigationHandler = null;
     this.config = config;
     this.script = script;
     this.onFound = onFound;
@@ -600,6 +610,7 @@ class HiddenEntry {
       this.targetElement.style.removeProperty("animation");
       this.targetElement.classList.remove("eeq-entry-target");
     }
+    this._stopWatchdog();
     (_a2 = this._injectedElement) == null ? void 0 : _a2.remove();
     this._injectedElement = null;
     (_b2 = this.hintContainer) == null ? void 0 : _b2.remove();
@@ -620,8 +631,8 @@ class HiddenEntry {
     ).filter((el) => {
       var _a2;
       const text = ((_a2 = el.textContent) == null ? void 0 : _a2.trim()) ?? "";
-      const rect = el.getBoundingClientRect();
-      return text.length >= 2 && rect.width > 0 && rect.height > 0 && !el.closest("[data-eeq]");
+      if (text.length < 2 || el.closest("[data-eeq]")) return false;
+      return isElementVisible(el);
     });
     const sorted = candidates.sort((a, b) => {
       const aNav = a.closest("nav") !== null || a.closest("header") !== null ? 1 : 0;
@@ -708,10 +719,113 @@ class HiddenEntry {
       this._injectedElement = span;
       this.targetElement = span;
       this._attachToElement(span);
+      this._startWatchdog();
       return;
     }
     this._createFallbackEntry();
   }
+  /**
+   * Watch for the injected trigger element being removed from the DOM
+   * (SPA re-render, route change, virtual scroll) or scrolled out of view.
+   *
+   * Uses IntersectionObserver (zero layout cost) for visibility,
+   * a MutationObserver on a stable ancestor (survives Angular/React re-renders),
+   * and navigation event listeners for SPA route changes.
+   */
+  _startWatchdog() {
+    this._stopWatchdog();
+    if (!this._injectedElement) return;
+    this._intersectionObserver = new IntersectionObserver(
+      (entries) => {
+        if (this._destroyed || !this._injectedElement) return;
+        const entry = entries[0];
+        if (entry && !entry.isIntersecting) {
+          this._reinject();
+        }
+      },
+      { threshold: 0 }
+    );
+    this._intersectionObserver.observe(this._injectedElement);
+    const observeTarget = this._findStableAncestor(this._injectedElement);
+    this._domObserver = new MutationObserver(() => {
+      if (this._destroyed || !this._injectedElement) return;
+      if (this._mutationDebounce) clearTimeout(this._mutationDebounce);
+      this._mutationDebounce = setTimeout(() => {
+        if (this._destroyed || !this._injectedElement) return;
+        if (!document.body.contains(this._injectedElement)) {
+          this._reinject();
+        }
+      }, 300);
+    });
+    this._domObserver.observe(observeTarget, { childList: true, subtree: true });
+    this._navigationHandler = () => {
+      if (this._destroyed || !this._injectedElement) return;
+      setTimeout(() => {
+        if (this._destroyed || !this._injectedElement) return;
+        if (!document.body.contains(this._injectedElement)) {
+          this._reinject();
+        }
+      }, 500);
+    };
+    window.addEventListener("popstate", this._navigationHandler);
+    window.addEventListener("hashchange", this._navigationHandler);
+  }
+  /**
+   * Walk up the DOM to find a stable ancestor that won't be replaced
+   * by SPA framework routing (Angular <router-outlet>, React root, etc.).
+   */
+  _findStableAncestor(el) {
+    let node = el.parentElement;
+    while (node && node !== document.body) {
+      const tag = node.tagName.toLowerCase();
+      if (tag === "main" || tag === "body" || tag.includes("app-") || // Angular app-root, app-component, etc.
+      tag.includes("-root") || // custom element roots
+      node.querySelector("router-outlet") !== null || node.id === "app" || node.id === "root" || node.id === "__next") {
+        return node;
+      }
+      node = node.parentElement;
+    }
+    return document.body;
+  }
+  _stopWatchdog() {
+    if (this._domObserver) {
+      this._domObserver.disconnect();
+      this._domObserver = null;
+    }
+    if (this._intersectionObserver) {
+      this._intersectionObserver.disconnect();
+      this._intersectionObserver = null;
+    }
+    if (this._mutationDebounce) {
+      clearTimeout(this._mutationDebounce);
+      this._mutationDebounce = null;
+    }
+    if (this._navigationHandler) {
+      window.removeEventListener("popstate", this._navigationHandler);
+      window.removeEventListener("hashchange", this._navigationHandler);
+      this._navigationHandler = null;
+    }
+  }
+  /** Remove old trigger (if still in DOM) and re-inject into a new element. */
+  _reinject() {
+    this._stopWatchdog();
+    if (this.clickHandler && this.targetElement) {
+      this.targetElement.removeEventListener("click", this.clickHandler);
+    }
+    if (this._injectedElement && document.body.contains(this._injectedElement)) {
+      this._injectedElement.remove();
+    }
+    this._injectedElement = null;
+    this.targetElement = null;
+    setTimeout(() => {
+      if (this._destroyed) return;
+      const eligible = findEligibleEntryElements(
+        this.config.hiddenEntry.selector,
+        this.config.hiddenEntry.excludeSelectors
+      );
+      this._injectIntoExisting(eligible);
+    }, 1200);
+  }
   /**
    * Try to insert the trigger span between words inside a text node.
    * Picks a random word boundary in the element's first direct text node.
@@ -1059,7 +1173,7 @@ class NarrativeRenderer {
       width: "100%",
       height: "100%",
       pointerEvents: "none",
-      zIndex: "999990"
+      zIndex: "999993"
     });
     document.body.appendChild(this.host);
     this.shadow = this.host.attachShadow({ mode: "closed" });
@@ -1889,6 +2003,13 @@ class ThreeRenderer {
       }
     }
   }
+  /** Mark all ambient particles for rapid fade-out (rhythm lost). */
+  fadeOutAmbientParticles() {
+    for (const p of this._ambientParticles) {
+      p.fadeIn = false;
+      if (p.life > 0.3) p.life = 0.3;
+    }
+  }
   /** Start the finale composition. */
   startFinale() {
     this._finaleActive = true;
@@ -2209,17 +2330,17 @@ class ThreeRenderer {
     this.eggBodies.push(body3);
   }
   // ── Mini egg helpers for particles ─────────────────────────────────────
-  /** Create a tiny egg-shaped geometry (same squash as main eggs, lower poly). */
+  /** Create a tiny egg-shaped geometry — rounder, less elongated. */
   _createMiniEggGeo(T, radius) {
-    const geo = new T.SphereGeometry(radius, 8, 8);
+    const geo = new T.SphereGeometry(radius, 12, 12);
     const pos = geo.attributes.position;
     for (let i = 0; i < pos.count; i++) {
       let y = pos.getY(i);
       const x = pos.getX(i);
       const z = pos.getZ(i);
-      const topSquash = y > 0 ? 0.92 : 1;
-      y = y * 1.15 * topSquash;
-      const narrowing = 1 - Math.abs(y) * 0.06;
+      const topSquash = y > 0 ? 0.95 : 1;
+      y = y * 1.08 * topSquash;
+      const narrowing = 1 - Math.abs(y) * 0.03;
       pos.setX(i, x * narrowing);
       pos.setY(i, y);
       pos.setZ(i, z * narrowing);
@@ -2235,8 +2356,8 @@ class ThreeRenderer {
     c.height = 64;
     const ctx = c.getContext("2d");
     const hue = Math.random() * 360;
-    const sat = 45 + Math.random() * 30;
-    const light = 65 + Math.random() * 15;
+    const sat = 60 + Math.random() * 25;
+    const light = 68 + Math.random() * 14;
     ctx.fillStyle = `hsl(${hue}, ${sat}%, ${light}%)`;
     ctx.fillRect(0, 0, 64, 64);
     const accentHue = (hue + 80 + Math.random() * 100) % 360;
@@ -2307,7 +2428,7 @@ class ThreeRenderer {
     return new T.MeshBasicMaterial({
       map: tex,
       transparent: true,
-      opacity
+      opacity: opacity || 0.85
     });
   }
   _createEggGeometry(T) {
@@ -3037,12 +3158,12 @@ class ThreeRenderer {
       p.mesh.rotation.z += dt * 0.5;
       if (p.fadeIn && p.life > 0.7) {
         p.mesh.material.opacity = Math.min(
-          0.55,
-          p.mesh.material.opacity + dt * 0.6
+          0.9,
+          p.mesh.material.opacity + dt * 1
         );
-        if (p.mesh.material.opacity >= 0.5) p.fadeIn = false;
+        if (p.mesh.material.opacity >= 0.85) p.fadeIn = false;
       } else {
-        p.mesh.material.opacity = Math.max(0, p.life * 0.55);
+        p.mesh.material.opacity = Math.max(0, p.life * 0.85);
       }
       if (p.life <= 0) {
         this.scene.remove(p.mesh);
@@ -4511,6 +4632,7 @@ class RhythmStage {
         if (isGood) {
           this._goodCycles++;
         } else {
+          this._goodCycles = Math.max(0, this._goodCycles - 1);
           this._showReaction();
         }
         this._lastPhaseCount += 2;
@@ -4670,6 +4792,7 @@ class PageBreather {
     this._startTime = 0;
     this._isUserMoving = false;
     this._inSync = false;
+    this._accuracy = 0;
     this.CYCLE_MS = 6e3;
     this._tick = () => {
       if (!this._active || !this._overlay) return;
@@ -4679,7 +4802,7 @@ class PageBreather {
       const phase = elapsed % this.CYCLE_MS / this.CYCLE_MS;
       const wave = (Math.sin(phase * Math.PI * 2 - Math.PI / 2) + 1) * 0.5;
       const shouldMove = phase < 0.5;
-      this._inSync = shouldMove === this._isUserMoving;
+      this._inSync = this._accuracy > 0 && shouldMove === this._isUserMoving;
       const baseOpacity = wave * 0.85;
       const syncBonus = this._inSync ? 0.15 : 0;
       const opacity = this._intensity * (baseOpacity + (1 - wave) * 0.05 + syncBonus);
@@ -4710,6 +4833,7 @@ class PageBreather {
   update(accuracy, isMoving) {
     if (!this._active) return;
     this._isUserMoving = isMoving;
+    this._accuracy = accuracy;
     const raw = Math.max(0, Math.min(1, (accuracy - 0.05) / 0.5));
     this._targetIntensity = 0.5 + raw * 0.5;
   }
@@ -4727,6 +4851,7 @@ class PageBreather {
     this._intensity = 0;
     this._targetIntensity = 0;
     this._inSync = false;
+    this._accuracy = 0;
   }
   destroy() {
     this.stop();
@@ -4825,11 +4950,13 @@ class GameController {
       (_a3 = this.eggRenderer) == null ? void 0 : _a3.addTrail(data.x, data.y, data.velocity);
     });
     this.bus.on("rhythm:breathe", (data) => {
-      var _a3, _b3, _c;
+      var _a3, _b3;
       (_a3 = this.eggRenderer) == null ? void 0 : _a3.setBreathIntensity(data.accuracy);
       (_b3 = this.pageBreather) == null ? void 0 : _b3.update(data.accuracy, data.isMoving);
-      if (((_c = this.pageBreather) == null ? void 0 : _c.isInSync()) && this.threeRenderer) {
+      if (data.accuracy > 0 && this.threeRenderer) {
         this.threeRenderer.showProgressParticles(0.6 + data.accuracy * 0.4);
+      } else if (this.threeRenderer) {
+        this.threeRenderer.fadeOutAmbientParticles();
       }
     });
     this.overlay = new OverlayManager(this.config);
@@ -5147,6 +5274,7 @@ class GameController {
     }
     const successLines = eggIndex === 0 ? this.script.stage1Success : eggIndex === 1 ? this.script.stage2Success : this.script.stage3Success;
     await ((_c = this.narrative) == null ? void 0 : _c.showSequence(successLines, 4500));
+    await this._wait(3e3);
     (_d = this.narrative) == null ? void 0 : _d.clear();
     await this._wait(800);
     if (this.threeRenderer) {