script.js

function setupFlipCard(card) {
  if (!card) return;
  card.addEventListener("click", () => {
    const flipped = card.classList.toggle("is-flipped");
    card.setAttribute("aria-pressed", String(flipped));
    card.setAttribute("aria-label", flipped ? "Turn the talisman to return to the face marked one" : "Turn the talisman to reveal the face marked zero");
    const front = card.querySelector(".card-face--one");
    const reverse = card.querySelector(".card-face--zero");
    if (front) front.setAttribute("aria-hidden", String(flipped));
    if (reverse) reverse.setAttribute("aria-hidden", String(!flipped));
  });
}

setupFlipCard(document.querySelector("#hero-card"));
setupFlipCard(document.querySelector("#card-stage"));

const reveals = document.querySelectorAll(".reveal");
if ("IntersectionObserver" in window && !window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add("is-visible");
        observer.unobserve(entry.target);
      }
    });
  }, { threshold: 0.14 });
  reveals.forEach((element) => observer.observe(element));
} else {
  reveals.forEach((element) => element.classList.add("is-visible"));
}

const babelReader = document.querySelector("#babel-reader");
const babelCatalog = document.querySelector("#babel-catalog");
const babelLines = document.querySelector("#babel-lines");
const babelSource = document.querySelector("#babel-source");
const nextRoomButton = document.querySelector("#next-room");
const readerClockFill = document.querySelector("#reader-clock-fill");
const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
let libraryPages = [];
let currentPageIndex = -1;
let roomTimer;
let roomTransitionTimer;
let isRoomTransitioning = false;

function restartReaderClock() {
  if (!readerClockFill) return;
  readerClockFill.classList.remove("is-running");
  void readerClockFill.offsetWidth;
  readerClockFill.classList.add("is-running");
}

function selectNextPage() {
  if (libraryPages.length < 2) return 0;
  let nextIndex = currentPageIndex;
  while (nextIndex === currentPageIndex) {
    nextIndex = Math.floor(Math.random() * libraryPages.length);
  }
  return nextIndex;
}

function renderLibraryPage(pageIndex) {
  const page = libraryPages[pageIndex];
  if (!page || !babelCatalog || !babelLines || !babelSource) return;
  currentPageIndex = pageIndex;
  babelCatalog.textContent = page.catalog;
  babelSource.href = page.reference;
  babelLines.replaceChildren(...page.lines.map((line) => {
    const item = document.createElement("li");
    item.textContent = line;
    return item;
  }));
  restartReaderClock();
}

function scheduleNextRoom() {
  window.clearTimeout(roomTimer);
  roomTimer = window.setTimeout(transitionToNextRoom, 30000);
}

function transitionToNextRoom() {
  if (!babelReader || libraryPages.length === 0 || isRoomTransitioning) return;
  const nextIndex = selectNextPage();
  if (reducedMotion) {
    renderLibraryPage(nextIndex);
    scheduleNextRoom();
    return;
  }
  isRoomTransitioning = true;
  babelReader.classList.add("is-departing");
  window.clearTimeout(roomTransitionTimer);
  roomTransitionTimer = window.setTimeout(() => {
    renderLibraryPage(nextIndex);
    babelReader.classList.remove("is-departing");
    isRoomTransitioning = false;
  }, 700);
  scheduleNextRoom();
}

if (babelReader) {
  fetch("library-pages.json")
    .then((response) => {
      if (!response.ok) throw new Error("The shelf could not be opened");
      return response.json();
    })
    .then((pages) => {
      libraryPages = pages;
      renderLibraryPage(Math.floor(Math.random() * libraryPages.length));
      scheduleNextRoom();
    })
    .catch(() => {
      if (babelCatalog) babelCatalog.textContent = "The catalogue is momentarily out of reach.";
    });
}

nextRoomButton?.addEventListener("click", () => {
  transitionToNextRoom();
});