reverting x1

assets/scripts/hidden-details.js

@@ -750,19 +750,27 @@
   function addWhispers() {
     // Event: click one of the tiny "?" marks appended to long paragraphs.
     const paragraphs = Array.from(document.querySelectorAll("main p, #content p, article p")).filter((p) => p.textContent.trim().length > 80);
+    let added = 0;
     paragraphs.slice(0, 5).forEach((p, index) => {
-      if ((hash(path + index) + index) % 3 !== 0) return;
+      if ((hash(path + index) + index) % 3 !== 0 && added > 0) return;
+      const message = pick(index % 2 ? poems : details, `whisper-${index}`);
       const mark = document.createElement("span");
       mark.className = "hidden-whisper";
       mark.tabIndex = 0;
       mark.textContent = " ?";
-      mark.title = pick(index % 2 ? poems : details, `whisper-${index}`);
-      mark.dataset.character = characterFromText(mark.title);
+      mark.title = message;
+      mark.dataset.hiddenMemory = message;
+      mark.dataset.character = characterFromText(message);
       mark.addEventListener("click", () => {
         awardLayer(index % 2 ? 2 : 1, "paragraph whisper");
-        toast(mark.title, undefined, mark.dataset.character);
+        toast(message, undefined, mark.dataset.character);
       });
+      mark.addEventListener("focus", () => showInlineHint(mark, message));
+      mark.addEventListener("mouseenter", () => showInlineHint(mark, message));
+      mark.addEventListener("mouseleave", () => hideInlineHint(mark));
+      mark.addEventListener("blur", () => hideInlineHint(mark));
       p.appendChild(mark);
+      added += 1;
     });
   }
 
@@ -1164,9 +1172,40 @@
       if (index > 5) return;
       heading.classList.add("hidden-hover-memory");
       heading.dataset.hiddenMemory = pick([...lore.quotes, ...lore.journals, ...poems], `heading-${index}`);
+      heading.tabIndex = heading.tabIndex >= 0 ? heading.tabIndex : 0;
+      heading.addEventListener("mouseenter", () => showHeadingMemory(heading));
+      heading.addEventListener("focus", () => showHeadingMemory(heading));
+      heading.addEventListener("mouseleave", () => hideHeadingMemory(heading));
+      heading.addEventListener("blur", () => hideHeadingMemory(heading));
     });
   }
 
+  function showInlineHint(anchor, message) {
+    hideInlineHint(anchor);
+    const hint = document.createElement("span");
+    hint.className = "hidden-inline-hint";
+    hint.textContent = message;
+    anchor.insertAdjacentElement("afterend", hint);
+  }
+
+  function hideInlineHint(anchor) {
+    const next = anchor.nextElementSibling;
+    if (next?.classList.contains("hidden-inline-hint")) next.remove();
+  }
+
+  function showHeadingMemory(heading) {
+    hideHeadingMemory(heading);
+    const note = document.createElement("div");
+    note.className = "hidden-heading-memory";
+    note.textContent = heading.dataset.hiddenMemory || "";
+    heading.insertAdjacentElement("afterend", note);
+  }
+
+  function hideHeadingMemory(heading) {
+    const next = heading.nextElementSibling;
+    if (next?.classList.contains("hidden-heading-memory")) next.remove();
+  }
+
   function playTinySong() {
     try {
       const AudioContext = window.AudioContext || window.webkitAudioContext;
@@ -1227,6 +1266,12 @@
 
   document.addEventListener("DOMContentLoaded", () => {
     const memory = rememberVisit();
-    FEATURES.forEach((addFeature) => addFeature(memory));
+    FEATURES.forEach((addFeature) => {
+      try {
+        addFeature(memory);
+      } catch (error) {
+        console.warn("hidden detail feature failed", addFeature.name, error);
+      }
+    });
   });
 }());