easter-egg-quest 1.0.11 → 1.0.13

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

@@ -141,19 +141,21 @@ function resolveConfig(raw = {}) {
     theme,
     hiddenEntry: {
       mode: ((_b2 = raw.hiddenEntry) == null ? void 0 : _b2.mode) ?? "auto",
-      selector: (_c = raw.hiddenEntry) == null ? void 0 : _c.selector,
+      selector: sanitizeSelector((_c = raw.hiddenEntry) == null ? void 0 : _c.selector),
       excludeSelectors: [
         ...DEFAULT_EXCLUDE_SELECTORS,
-        ...((_d = raw.hiddenEntry) == null ? void 0 : _d.excludeSelectors) ?? []
+        ...(((_d = raw.hiddenEntry) == null ? void 0 : _d.excludeSelectors) ?? []).filter(
+          (s) => typeof s === "string" && s.length < 200
+        )
       ]
     },
     hud: typeof raw.hud === "boolean" ? { enabled: raw.hud, position: "top-left" } : { enabled: ((_e = raw.hud) == null ? void 0 : _e.enabled) ?? true, position: ((_f = raw.hud) == null ? void 0 : _f.position) ?? "top-left" },
     shrine: typeof raw.shrine === "boolean" ? { enabled: raw.shrine, position: "bottom-right" } : { enabled: ((_g = raw.shrine) == null ? void 0 : _g.enabled) ?? true, position: ((_h = raw.shrine) == null ? void 0 : _h.position) ?? "bottom-right" },
     sounds: raw.sounds ?? false,
     stageDurations: {
-      stillnessMs: ((_i = raw.stageDurations) == null ? void 0 : _i.stillnessMs) ?? 2e4,
-      motionMs: ((_j = raw.stageDurations) == null ? void 0 : _j.motionMs) ?? 2e4,
-      rhythmCycles: ((_k = raw.stageDurations) == null ? void 0 : _k.rhythmCycles) ?? 6
+      stillnessMs: clampDuration((_i = raw.stageDurations) == null ? void 0 : _i.stillnessMs, 2e4),
+      motionMs: clampDuration((_j = raw.stageDurations) == null ? void 0 : _j.motionMs, 2e4),
+      rhythmCycles: clampInt((_k = raw.stageDurations) == null ? void 0 : _k.rhythmCycles, 6, 1, 50)
     },
     renderer: raw.renderer ?? "auto",
     scoring: {
@@ -169,11 +171,48 @@ function resolveConfig(raw = {}) {
     callbacks: raw.callbacks ?? {}
   };
 }
+function clampDuration(val, def) {
+  if (val === void 0) return def;
+  const n = Number(val);
+  if (!Number.isFinite(n) || n < 1e3 || n > 3e5) return def;
+  return n;
+}
+function clampInt(val, def, min, max) {
+  if (val === void 0) return def;
+  const n = Math.round(Number(val));
+  if (!Number.isFinite(n) || n < min || n > max) return def;
+  return n;
+}
+function sanitizeSelector(sel) {
+  if (!sel || typeof sel !== "string") return void 0;
+  if (sel.length > 200) return void 0;
+  try {
+    document.querySelector(sel);
+  } catch {
+    return void 0;
+  }
+  return sel;
+}
 function resolveTheme(input) {
   if (!input || input === "auto" || input === "light" || input === "dark") {
     return { ...THEME_DEFAULTS };
   }
-  return { ...THEME_DEFAULTS, ...input };
+  const allowed = [
+    "overlayBg",
+    "textColor",
+    "textSecondary",
+    "accent",
+    "accentGlow",
+    "hudBg",
+    "hudText"
+  ];
+  const filtered = {};
+  for (const key of allowed) {
+    if (key in input && typeof input[key] === "string") {
+      filtered[key] = input[key];
+    }
+  }
+  return { ...THEME_DEFAULTS, ...filtered };
 }
 function resolveNarrative(overrides) {
   if (!overrides) return { ...DEFAULT_SCRIPT };
@@ -524,6 +563,10 @@ class HiddenEntry {
     this.fallbackButton = null;
     this._injectedElement = null;
     this._destroyed = false;
+    this._hintVisibleElapsed = 0;
+    this._hintVisibleStart = 0;
+    this._hintCheckInterval = null;
+    this._hintVisibilityHandler = null;
     this.config = config;
     this.script = script;
     this.onFound = onFound;
@@ -547,6 +590,7 @@ class HiddenEntry {
   cleanup() {
     var _a2, _b2, _c, _d;
     this._destroyed = true;
+    this._stopHintTimer();
     for (const t of this.hintTimers) clearTimeout(t);
     this.hintTimers = [];
     if (this.clickHandler && this.targetElement) {
@@ -728,45 +772,126 @@ class HiddenEntry {
     this._injectShimmerStyles();
     this._createHintContainer();
     const hints = this.script.hiddenEntryHints;
-    const FIRST_HINT_DELAY = 12e4;
+    const FIRST_HINT_DELAY = 6e4;
     const HINT_INTERVAL = 6e4;
-    for (let i = 0; i < hints.length; i++) {
-      const delay = FIRST_HINT_DELAY + i * HINT_INTERVAL;
-      const timer = setTimeout(() => {
-        if (this._destroyed) return;
-        this._showHintWhenVisible(hints[i]);
-      }, delay);
-      this.hintTimers.push(timer);
-    }
-    const shimmerDelay = 24e4;
-    const shimmerTimer = setTimeout(() => {
-      if (this._destroyed || !this.targetElement) return;
-      this.targetElement.classList.add("eeq-entry-target");
-    }, shimmerDelay);
-    this.hintTimers.push(shimmerTimer);
-  }
-  /** Show hint only when the page is visible. If hidden, wait for visibility change. */
-  _showHintWhenVisible(text) {
-    if (this._destroyed) return;
-    if (document.visibilityState === "visible" && document.hasFocus()) {
-      this._showHint(text);
-    } else {
-      const handler = () => {
-        if (this._destroyed) {
-          document.removeEventListener("visibilitychange", handler);
-          window.removeEventListener("focus", handler);
-          return;
+    const SHIMMER_DELAY = 12e4;
+    const showFirstHint = () => {
+      this._stopHintTimer();
+      this._showFirstHintWithConfirm(hints[0] ?? "", () => {
+        const remaining = hints.slice(1);
+        const thresholds = [];
+        for (let i = 0; i < remaining.length; i++) {
+          thresholds.push({
+            at: (i + 1) * HINT_INTERVAL,
+            fired: false,
+            action: () => this._showHint(remaining[i])
+          });
         }
-        if (document.visibilityState === "visible" && document.hasFocus()) {
-          document.removeEventListener("visibilitychange", handler);
-          window.removeEventListener("focus", handler);
-          setTimeout(() => {
-            if (!this._destroyed) this._showHint(text);
-          }, 800);
+        thresholds.push({
+          at: SHIMMER_DELAY,
+          fired: false,
+          action: () => {
+            if (this.targetElement) {
+              this.targetElement.classList.add("eeq-entry-target");
+            }
+          }
+        });
+        if (thresholds.length === 0) return;
+        this._startVisibilityTimer(thresholds);
+      });
+    };
+    const phase1 = [
+      { at: FIRST_HINT_DELAY, fired: false, action: showFirstHint }
+    ];
+    this._startVisibilityTimer(phase1);
+  }
+  _startVisibilityTimer(thresholds) {
+    this._hintVisibleElapsed = 0;
+    this._hintVisibleStart = 0;
+    const getVisibleElapsed = () => this._hintVisibleElapsed + (this._hintVisibleStart ? Date.now() - this._hintVisibleStart : 0);
+    const checkThresholds = () => {
+      if (this._destroyed) return;
+      const elapsed = getVisibleElapsed();
+      for (const t of thresholds) {
+        if (!t.fired && elapsed >= t.at) {
+          t.fired = true;
+          t.action();
         }
-      };
-      document.addEventListener("visibilitychange", handler);
-      window.addEventListener("focus", handler);
+      }
+      if (thresholds.every((t) => t.fired)) this._stopHintTimer();
+    };
+    const startTimer = () => {
+      if (this._hintCheckInterval) return;
+      this._hintVisibleStart = Date.now();
+      this._hintCheckInterval = setInterval(checkThresholds, 1e3);
+    };
+    const pauseTimer = () => {
+      if (this._hintVisibleStart) {
+        this._hintVisibleElapsed += Date.now() - this._hintVisibleStart;
+        this._hintVisibleStart = 0;
+      }
+      if (this._hintCheckInterval) {
+        clearInterval(this._hintCheckInterval);
+        this._hintCheckInterval = null;
+      }
+    };
+    this._hintVisibilityHandler = () => {
+      if (this._destroyed) return;
+      if (document.visibilityState === "visible") startTimer();
+      else pauseTimer();
+    };
+    document.addEventListener("visibilitychange", this._hintVisibilityHandler);
+    if (document.visibilityState === "visible") startTimer();
+  }
+  _showFirstHintWithConfirm(text, onConfirm) {
+    if (!this.hintContainer) return;
+    const snack = document.createElement("div");
+    snack.className = "eeq-snackbar";
+    const msg = document.createElement("span");
+    msg.textContent = text;
+    snack.appendChild(msg);
+    const goBtn = document.createElement("button");
+    goBtn.className = "eeq-snackbar-btn";
+    goBtn.textContent = "Let's go!";
+    Object.assign(goBtn.style, {
+      background: "rgba(76,175,80,0.85)",
+      color: "#fff"
+    });
+    goBtn.addEventListener("click", () => {
+      dismiss();
+      onConfirm();
+    });
+    snack.appendChild(goBtn);
+    const noBtn = document.createElement("button");
+    noBtn.className = "eeq-snackbar-btn";
+    noBtn.textContent = "Not interested";
+    noBtn.addEventListener("click", () => {
+      try {
+        localStorage.setItem("eeq_optout", "1");
+      } catch {
+      }
+      this.cleanup();
+    });
+    snack.appendChild(noBtn);
+    this.hintContainer.appendChild(snack);
+    const dismiss = () => {
+      snack.style.transform = "translateY(20px)";
+      snack.style.opacity = "0";
+      setTimeout(() => snack.remove(), 400);
+    };
+    requestAnimationFrame(() => {
+      snack.style.transform = "translateY(0)";
+      snack.style.opacity = "1";
+    });
+  }
+  _stopHintTimer() {
+    if (this._hintCheckInterval) {
+      clearInterval(this._hintCheckInterval);
+      this._hintCheckInterval = null;
+    }
+    if (this._hintVisibilityHandler) {
+      document.removeEventListener("visibilitychange", this._hintVisibilityHandler);
+      this._hintVisibilityHandler = null;
     }
   }
   _showHint(text) {
@@ -1418,7 +1543,7 @@ class ThreeRenderer {
         const egg2 = this.eggs[bestIdx];
         this._dragRotX = egg2.rotation.x;
         this._dragRotY = egg2.rotation.y;
-        document.body.style.cursor = "grabbing";
+        if (this.canvas) this.canvas.style.cursor = "grabbing";
         return;
       }
       if (this._interactiveEgg === null) return;
@@ -1431,7 +1556,7 @@ class ThreeRenderer {
       if (dist > 120) return;
       e.preventDefault();
       e.stopPropagation();
-      if (this.canvas) document.body.style.cursor = "grabbing";
+      if (this.canvas) this.canvas.style.cursor = "grabbing";
       this._isDragging = true;
       this._dragMoved = false;
       this._dragStartX = e.clientX;
@@ -1481,7 +1606,7 @@ class ThreeRenderer {
       this._finaleDragTarget = null;
       this._cancelLongPress();
       if (this._interactiveEgg !== null || this._finaleInteractive) {
-        document.body.style.cursor = "grab";
+        if (this.canvas) this.canvas.style.cursor = "grab";
       }
     };
     this._onWheel = (e) => {
@@ -1623,7 +1748,7 @@ class ThreeRenderer {
   /** Make an egg interactively draggable. */
   enableInteraction(index) {
     this._interactiveEgg = index;
-    document.body.style.cursor = "grab";
+    if (this.canvas) this.canvas.style.cursor = "grab";
   }
   /** Disable drag interaction. */
   disableInteraction() {
@@ -1632,7 +1757,7 @@ class ThreeRenderer {
     this._finaleDragTarget = null;
     this._finaleInteractive = false;
     this._cancelLongPress();
-    document.body.style.cursor = "";
+    if (this.canvas) this.canvas.style.cursor = "";
   }
   /** Trigger spectacular egg reveal. */
   revealEgg(index) {
@@ -1776,7 +1901,7 @@ class ThreeRenderer {
     this._finaleInteractive = true;
     this._finaleDragTarget = null;
     this._finalePausedRotation = [false, false, false];
-    document.body.style.cursor = "grab";
+    if (this.canvas) this.canvas.style.cursor = "grab";
     for (let i = 0; i < 3; i++) {
       const state = this._eggStates[i];
       state.phase = "finale";
@@ -1800,14 +1925,27 @@ class ThreeRenderer {
       fontFamily: "'Georgia', 'Times New Roman', serif",
       textAlign: "center"
     });
-    this._greetingOverlay.innerHTML = `
-      <div style="font-size: 48px; color: #fff8e8; text-shadow: 0 0 60px rgba(212,165,80,0.7), 0 0 20px rgba(212,165,80,0.4), 0 2px 8px rgba(0,0,0,0.6); margin-bottom: 10px; letter-spacing: 0.03em; font-weight: bold;">
-        Happy Easter! 🐰🥚
-      </div>
-      <div style="font-size: 17px; color: rgba(245,240,230,0.85); font-style: italic; text-shadow: 0 0 12px rgba(212,165,80,0.3), 0 1px 6px rgba(0,0,0,0.4);">
-        Wishing you joy, peace, and light
-      </div>
-    `;
+    this._greetingOverlay.innerHTML = "";
+    const headingDiv = document.createElement("div");
+    Object.assign(headingDiv.style, {
+      fontSize: "48px",
+      color: "#fff8e8",
+      textShadow: "0 0 60px rgba(212,165,80,0.7), 0 0 20px rgba(212,165,80,0.4), 0 2px 8px rgba(0,0,0,0.6)",
+      marginBottom: "10px",
+      letterSpacing: "0.03em",
+      fontWeight: "bold"
+    });
+    headingDiv.textContent = "Happy Easter! 🐰🥚";
+    this._greetingOverlay.appendChild(headingDiv);
+    const subDiv = document.createElement("div");
+    Object.assign(subDiv.style, {
+      fontSize: "17px",
+      color: "rgba(245,240,230,0.85)",
+      fontStyle: "italic",
+      textShadow: "0 0 12px rgba(212,165,80,0.3), 0 1px 6px rgba(0,0,0,0.4)"
+    });
+    subDiv.textContent = "Wishing you joy, peace, and light";
+    this._greetingOverlay.appendChild(subDiv);
     document.body.appendChild(this._greetingOverlay);
     requestAnimationFrame(() => {
       requestAnimationFrame(() => {
@@ -3244,7 +3382,7 @@ const _ResultsRenderer = class _ResultsRenderer {
     this.shadow.appendChild(style);
     const panel = document.createElement("div");
     panel.className = "eeq-results";
-    panel.innerHTML = this._buildContent(score);
+    this._buildContentDOM(panel, score);
     this.shadow.appendChild(panel);
     requestAnimationFrame(() => {
       requestAnimationFrame(() => {
@@ -3264,7 +3402,7 @@ const _ResultsRenderer = class _ResultsRenderer {
     this.shadow = null;
   }
   // ─── Content ───────────────────────────────────────────────────────────
-  _buildContent(s) {
+  _buildContentDOM(parent, s) {
     const bp = s.behaviorProfile;
     const actionIcons = {
       clicker: "🖱",
@@ -3285,31 +3423,56 @@ const _ResultsRenderer = class _ResultsRenderer {
       explorer: "🧭",
       philosopher: "🕊"
     };
-    const badges = [];
-    const ai = actionIcons[bp.dominantAction] ?? "";
-    const mi = mouseIcons[bp.mousePersonality] ?? "";
-    const pi = paceIcons[bp.pace] ?? "";
-    if (ai) badges.push(`<span class="eeq-badge" title="${bp.dominantAction}">${ai}</span>`);
-    if (mi) badges.push(`<span class="eeq-badge" title="${bp.mousePersonality}">${mi}</span>`);
-    if (pi) badges.push(`<span class="eeq-badge" title="${bp.pace}">${pi}</span>`);
-    return `
-      <div class="eeq-results-inner">
-        <div class="eeq-results-title">« ${this._escapeHtml(bp.title)} »</div>
-        <div class="eeq-time">${formatTime(s.totalTime)}</div>
-        <div class="eeq-badges">${badges.join("")}</div>
-        <div class="eeq-share-invite">share your result with friends 🥚</div>
-        <div class="eeq-results-actions">
-          <button class="eeq-btn eeq-btn-share" title="share result">
-            <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M4.5 10.5a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm7-4a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" stroke="currentColor" stroke-width="1.2"/><path d="M6.3 9.2l3.4 1.6M6.3 7.8l3.4-1.6" stroke="currentColor" stroke-width="1.2"/></svg>
-            <span>share</span>
-          </button>
-          <button class="eeq-btn eeq-btn-finish" title="finish">
-            <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M4 8.5l3 3 5-6.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
-            <span>finish</span>
-          </button>
-        </div>
-      </div>
-    `;
+    const inner = document.createElement("div");
+    inner.className = "eeq-results-inner";
+    const title = document.createElement("div");
+    title.className = "eeq-results-title";
+    title.textContent = `« ${bp.title} »`;
+    inner.appendChild(title);
+    const time = document.createElement("div");
+    time.className = "eeq-time";
+    time.textContent = formatTime(s.totalTime);
+    inner.appendChild(time);
+    const badgesDiv = document.createElement("div");
+    badgesDiv.className = "eeq-badges";
+    const icons = [
+      { icon: actionIcons[bp.dominantAction], label: bp.dominantAction },
+      { icon: mouseIcons[bp.mousePersonality], label: bp.mousePersonality },
+      { icon: paceIcons[bp.pace], label: bp.pace }
+    ];
+    for (const { icon, label } of icons) {
+      if (!icon) continue;
+      const span = document.createElement("span");
+      span.className = "eeq-badge";
+      span.title = label;
+      span.textContent = icon;
+      badgesDiv.appendChild(span);
+    }
+    inner.appendChild(badgesDiv);
+    const invite = document.createElement("div");
+    invite.className = "eeq-share-invite";
+    invite.textContent = "share your result with friends 🥚";
+    inner.appendChild(invite);
+    const actions = document.createElement("div");
+    actions.className = "eeq-results-actions";
+    const shareBtn = document.createElement("button");
+    shareBtn.className = "eeq-btn eeq-btn-share";
+    shareBtn.title = "share result";
+    shareBtn.innerHTML = '<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M4.5 10.5a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm7-4a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" stroke="currentColor" stroke-width="1.2"/><path d="M6.3 9.2l3.4 1.6M6.3 7.8l3.4-1.6" stroke="currentColor" stroke-width="1.2"/></svg>';
+    const shareLabel = document.createElement("span");
+    shareLabel.textContent = "share";
+    shareBtn.appendChild(shareLabel);
+    actions.appendChild(shareBtn);
+    const finishBtn = document.createElement("button");
+    finishBtn.className = "eeq-btn eeq-btn-finish";
+    finishBtn.title = "finish";
+    finishBtn.innerHTML = '<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M4 8.5l3 3 5-6.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+    const finishLabel = document.createElement("span");
+    finishLabel.textContent = "finish";
+    finishBtn.appendChild(finishLabel);
+    actions.appendChild(finishBtn);
+    inner.appendChild(actions);
+    parent.appendChild(inner);
   }
   // ─── 2D Egg Drawing (type-accurate) ─────────────────────────────────
   _makeRand(seed) {
@@ -3674,9 +3837,6 @@ const _ResultsRenderer = class _ResultsRenderer {
       span.textContent = orig;
     }, 1500);
   }
-  _escapeHtml(s) {
-    return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-  }
   // ─── Styles ────────────────────────────────────────────────────────────
   _getStyles() {
     const t = this.config.theme;
@@ -4063,7 +4223,11 @@ class Persistence {
     try {
       const raw = localStorage.getItem(STORAGE_KEY);
       if (!raw) return [];
-      return JSON.parse(raw);
+      const parsed = JSON.parse(raw);
+      if (!Array.isArray(parsed)) return [];
+      return parsed.filter(
+        (item) => typeof item === "object" && item !== null && typeof item.totalTime === "number" && Number.isFinite(item.totalTime)
+      );
     } catch {
       return [];
     }