Bratonien-Adventskalender/adventskalender/2025/js/popup.js

// Adventskalender 2025 – Popup-Logik (Bratonien Edition)

const popupOverlay = document.getElementById("popup-overlay");
const popupContent = document.getElementById("popup-content");
const popupClose = document.getElementById("popup-close");

let activeDay = null;

// === Platzhalterfunktion ===
function placeholder(text) {
  return `
    <div class="placeholder">
      <p><em>${text}</em></p>
      <p style="opacity:0.7;">(Inhalt wird noch produziert)</p>
    </div>`;
}

// === Inhalte 1–24 (Platzhalter) ===
const popupData = {
  1: { title: "🎁 Adventskalenderstart + Daumenkino", content: placeholder("QR-Code zum Daumenkino & Intro-Post") },
  2: { title: "🍰 Foodcheck: Tassenkuchen", content: placeholder("3-Zutaten-Rezept – Quickclip folgt") },
  3: { title: "🎧 Mini-Podcast: Kindheitsweihnachten", content: placeholder("Audioaufnahme folgt") },
  4: { title: "🎞️ Mini-Comic", content: placeholder("Comic folgt") },
  5: { title: "👗 Cosplay-Winter-Transformation", content: placeholder("Reel folgt") },
  6: { title: "☕ Foodcheck: Winterdrink", content: placeholder("Rezeptclip folgt") },
  7: { title: "🎧 Mini-Podcast: Was ist Bratonien?", content: placeholder("Kurzpodcast folgt") },
  8: { title: "📱 Bratonien Icon-Pack", content: placeholder("Download-Link folgt") },
  9: { title: "🍽️ Foodcheck: Last-Minute-Snack", content: placeholder("Humorclip folgt") },
  10:{ title: "🥕 Fiktive Bratonien-Tradition", content: placeholder("Text folgt") },
  11:{ title: "👑 Cosplay-Inspo: Accessoires", content: placeholder("Foto folgt") },
  12:{ title: "🎥 POV: So beginnt ein Bratonien-Stream", content: placeholder("Video folgt") },
  13:{ title: "🎙️ Mini-Podcast: Weihnachtscringe", content: placeholder("Podcast folgt") },
  14:{ title: "🍪 Foodcheck: Last-Minute-Plätzchen", content: placeholder("Clip folgt") },
  15:{ title: "🧠 Mini-Podcast: Der große Wunsch", content: placeholder("Kurztext folgt") },
  16:{ title: "📦 5 Dinge, die du nicht mehr kaufen solltest", content: placeholder("Reel folgt") },
  17:{ title: "🎞️ Die besten Weihnachtsfilme in Bratonien", content: placeholder("Liste folgt") },
  18:{ title: "🎧 Mini-Podcast: Weihnachten früher", content: placeholder("Audio folgt") },
  19:{ title: "🍪 Foodcheck: Das hässlichste Plätzchen", content: placeholder("Humorclip folgt") },
  20:{ title: "🎁 3 Arten von Menschen beim Geschenkeeinpacken", content: placeholder("Sketch folgt") },
  21:{ title: "📞 Audio-Sketch: Der Weihnachtsanruf", content: placeholder("Audio folgt") },
  22:{ title: "🎲 Bratonischer Geschenke-Generator", content: placeholder("Minispiel folgt") },
  23:{ title: "🍨 Foodcheck: Deko-Dessert (Schneekugel)", content: placeholder("Foodfoto folgt") },
  24:{ title: "🎬 Danke & Geschenk", content: placeholder("Finale folgt") }
};


// ============================================================
// POPUP ÖFFNEN
// ============================================================

function openPopup(day) {

  const data = popupData[day];
  if (!data) return;

  const tag = String(day).padStart(2, "0");
  const url = `/2025/content/day${tag}.html`;

  fetch(url)
    .then(res => res.ok ? res.text() : Promise.reject("Inhalt nicht gefunden"))
    .then(html => {

      activeDay = day;
      popupContent.innerHTML = html;
      popupOverlay.classList.add("active");

      // Tools (Font / Zoom) initialisieren NACH dem Einfügen
      initPopupTools();

      // Medien verzögert starten
      setTimeout(() => {
        const bg = popupContent.querySelector("#bgmusic");
        const videos = popupContent.querySelectorAll("video");

        if (day === "1" && bg) {
          bg.volume = 0.5;
          bg.currentTime = 0;
          bg.play().catch(() => {});
        }

        videos.forEach(v => {
          v.muted = true;
          v.loop = true;
          v.play().catch(() => {});
        });

      }, 300);

    })
    .catch(err => {
      popupContent.innerHTML = `<h2>${data.title}</h2>${data.content}`;
      popupOverlay.classList.add("active");
      initPopupTools();
      console.warn(`Türchen ${day}: ${err}`);
    });
}


// ============================================================
// POPUP SCHLIESSEN
// ============================================================

function closePopup() {
  popupOverlay.classList.remove("active");

  popupContent.querySelectorAll("audio").forEach(a => {
    a.pause();
    a.currentTime = 0;
  });

  popupContent.querySelectorAll("video").forEach(v => {
    v.pause();
    v.currentTime = 0;
  });

  activeDay = null;
}


// === Schließen-Events ===
if (popupClose) popupClose.addEventListener("click", closePopup);
if (popupOverlay) {
  popupOverlay.addEventListener("click", e => {
    if (e.target === popupOverlay) closePopup();
  });
}

window.openPopup = openPopup;
window.closePopup = closePopup;


// ============================================================
// GESPERRTE TÜRECHEN
// ============================================================

window.showLockedPopup = function (day) {
  const sprueche = [
    "🎁 Na na na, hier wird nicht geschummelt!",
    "❄️ Geduld ist auch eine Form von Magie.",
    "🎅 Ho ho ho – zu früh! Versuch es später nochmal.",
    "⏳ Die Tür klemmt noch – vielleicht morgen?",
    "🍪 Kein Plätzchen für Ungeduldige!",
    "🎄 Schön, dass du neugierig bist – aber noch ist Geheimniszeit!",
    "🔒 Tür verriegelt. Der Weihnachtszauber hat Öffnungszeiten.",
    "✨ Geduld, kleiner Weihnachtself – noch ein bisschen Glitzer abwarten!",
    "🕯️ Zu früh dran? Das Lichtlein brennt noch nicht für dich."
  ];

  const zufall = sprueche[Math.floor(Math.random() * sprueche.length)];

  const yearMatch = document.title.match(/\d{4}/);
  const year = yearMatch ? parseInt(yearMatch[0], 10) : new Date().getFullYear();
  const unlockDate = new Date(year, 11, parseInt(day, 10), 0, 0, 0);

  const dateText = unlockDate.toLocaleString("de-DE", {
    day: "2-digit", month: "long", year: "numeric",
    hour: "2-digit", minute: "2-digit"
  }).replace(" um", ",");

  popupContent.innerHTML = `
    <h2>Türchen ${day} ist noch geschlossen</h2>
    <p>${zufall}</p>
    <p style="margin-top: 10px; opacity: 0.8;">🔓 Öffnet sich am <strong>${dateText}</strong></p>
  `;

  popupOverlay.classList.add("active");
  initPopupTools();
};


// ============================================================
// POPUP-TOOLS (FONT-TOGGLE & ZOOM)
// ============================================================

function initPopupTools() {

  const popupBody = popupContent.querySelector(".popup-body");
  if (!popupBody) return;

  const btnFontToggle = document.getElementById("btn-font-toggle");
  const btnFontUp     = document.getElementById("btn-font-up");
  const btnFontDown   = document.getElementById("btn-font-down");

  // Schriftart umschalten
  if (btnFontToggle) {
    btnFontToggle.onclick = () => {
      popupBody.classList.toggle("font-readable");
    };
  }

  // Schriftgröße
  let currentScale = 1;

  function applyScale() {
    popupBody.style.fontSize = `${currentScale}em`;
  }

  if (btnFontUp) {
    btnFontUp.onclick = () => {
      currentScale = Math.min(currentScale + 0.1, 2);
      applyScale();
    };
  }

  if (btnFontDown) {
    btnFontDown.onclick = () => {
      currentScale = Math.max(currentScale - 0.1, 0.5);
      applyScale();
    };
  }
}