Fehlerkorrekturen

adventskalender/2025/js/background.js

@@ -51,10 +51,15 @@
 
     if (!picture || !img || !sources) return;
 
-    // === Daumenkino (nur für Tag 1) ===
+    // === Daumenkino (nur für Tag 1, wenn Popup geladen wurde) ===
     if (dayToShow === 1) {
-      const thumbkino = document.querySelector(".thumbkino-video");
-      if (thumbkino) {
+      document.addEventListener("day01-loaded", () => {
+        const thumbkino = document.querySelector(".thumbkino-video");
+        if (!thumbkino) {
+          console.warn("[Bratonien] Kein Daumenkino-Element gefunden.");
+          return;
+        }
+
         const formats = ["webm", "mp4"];
         const resolutions = [
           "nHD",
@@ -90,7 +95,7 @@
         thumbkino.play().catch(() => {});
 
         console.log(`[Bratonien] Daumenkino gesetzt für Tag ${padded}`);
-      }
+      });
     }
 
     const breakpoints = [420, 768, 1024, 1366, 1600, 1920, 2560, 3840];

adventskalender/2025/js/popup.js

@@ -13,8 +13,7 @@ function placeholder(text) {
     <div class="placeholder">
       <p><em>${text}</em></p>
       <p style="opacity:0.7;">(Inhalt wird noch produziert)</p>
-    </div> 
-  `;
+    </div>`;
 }
 
 // === Inhalte 1–24 (Platzhalter) ===
@@ -50,7 +49,7 @@ function openPopup(day) {
   const data = popupData[day];
   if (!data) return;
 
-  const tag = String(day).padStart(2, '0');
+  const tag = String(day).padStart(2, "0");
   const url = `/2025/content/day${tag}.html`;
 
   fetch(url)
@@ -62,28 +61,36 @@ function openPopup(day) {
       popupContent.innerHTML = `<h2>${data.title}</h2>${html}`;
       popupOverlay.classList.add("active");
 
-      // === Tag 1: Soundeffekt + Daumenkino starten ===
+      // === Event an background.js senden, sobald day01 geladen ist ===
+      if (day === 1) {
+        document.dispatchEvent(new CustomEvent("day01-loaded"));
+      }
+
+      // === Tag 1: Sound + Daumenkino starten ===
       if (day === 1) {
         setTimeout(() => {
           try {
-            // --- Soundeffekt FallingSnow ---
-            activeSound = new Audio("/2025/assets/sounds/FallingSnow.mp3");
-            activeSound.volume = 0.5;
-            activeSound.play().catch(() => {});
-
-            // --- Daumenkino-Video (Fallback-Start) ---
+            const bg = popupContent.querySelector("#bgmusic");
             const thumbkino = popupContent.querySelector(".thumbkino-video");
+
+            if (bg) {
+              bg.volume = 0.5;
+              bg.currentTime = 0;
+              bg.play().catch(() => {});
+              activeSound = bg;
+            }
+
             if (thumbkino) {
               thumbkino.muted = true;
               thumbkino.loop = true;
               thumbkino.play().catch(() => {});
             }
           } catch (err) {
-            console.warn("FallingSnow oder Daumenkino konnten nicht abgespielt werden:", err);
+            console.warn("Audio oder Video konnten nicht gestartet werden:", err);
           }
-        }, 250); // leichte Verzögerung nach DOM-Einbindung
+        }, 250);
       } else {
-        // === alle anderen Tage: nur Video-Autoplay sicherstellen ===
+        // === alle anderen Tage: nur Video-Autoplay sichern ===
         setTimeout(() => {
           const videos = popupContent.querySelectorAll("video[autoplay]");
           videos.forEach(v => v.play().catch(() => {}));
@@ -91,7 +98,6 @@ function openPopup(day) {
       }
     })
     .catch(err => {
-      // === Fallback auf Platzhalterinhalt ===
       popupContent.innerHTML = `<h2>${data.title}</h2>${data.content}`;
       popupOverlay.classList.add("active");
       console.warn(`Türchen ${day}: HTML konnte nicht geladen werden. Fallback verwendet.`, err);
@@ -130,37 +136,31 @@ window.showLockedPopup = function (day) {
   let timeText = "";
   if (days > 0) timeText += `${days} Tag${days !== 1 ? "en" : ""}`;
   if (hours > 0) timeText += `${timeText ? ", " : ""}${hours} Stunde${hours !== 1 ? "n" : ""}`;
-  if (minutes > 0 || timeText === "") timeText += `${timeText ? " und " : ""}${minutes} Minute${minutes !== 1 ? "n" : ""}`;
+  if (minutes > 0 || timeText === "")
+    timeText += `${timeText ? " und " : ""}${minutes} Minute${minutes !== 1 ? "n" : ""}`;
 
   popupContent.innerHTML = `
     <h2>Türchen ${day} ist noch geschlossen</h2>
     <p>${zufall}</p>
     <p style="margin-top: 10px; opacity: 0.8;">🔓 Öffnet in <strong>${timeText}</strong></p>
   `;
-
   popupOverlay.classList.add("active");
 };
 
-// === Schließen ===
-popupClose.addEventListener("click", () => {
+// === Schließen – Overlay oder X-Button ===
+popupClose.addEventListener("click", closePopup);
+popupOverlay.addEventListener("click", e => {
+  if (e.target === popupOverlay) closePopup();
+});
+
+function closePopup() {
   popupOverlay.classList.remove("active");
   if (activeSound) {
     activeSound.pause();
     activeSound.currentTime = 0;
     activeSound = null;
   }
-});
-
-popupOverlay.addEventListener("click", e => {
-  if (e.target === popupOverlay) {
-    popupOverlay.classList.remove("active");
-    if (activeSound) {
-      activeSound.pause();
-      activeSound.currentTime = 0;
-      activeSound = null;
-    }
-  }
-});
+}
 
 // === Export für door-open.js ===
 window.openPopup = openPopup;