adventskalender/2025/js/background.js aktualisiert

adventskalender/2025/js/background.js

@@ -2,37 +2,33 @@
 // Adventskalender 2025 – Hintergrund- & Favicon-Wechsel nach Tag
 // ============================================================
 
-(function() {
+(function () {
   const pathYear = window.location.pathname.match(/(\d{4})/);
   const YEAR = pathYear ? parseInt(pathYear[1], 10) : new Date().getFullYear();
   const DEV_MODE = window.location.search.includes("dev");
   const STORAGE_BASE = `bratonien_${YEAR}_lock`;
 
-  // === Hilfsfunktion: simulierten Tag aus lock.js übernehmen ===
   function getSimulatedDay() {
     if (!DEV_MODE) return null;
     const val = localStorage.getItem(`${STORAGE_BASE}_simday`);
     return val ? parseInt(val, 10) : null;
   }
 
-  // === Aktuellen oder simulierten Tag bestimmen ===
   const now = new Date();
-  let dayToShow = now.getMonth() === 11 ? now.getDate() : 0; // Dezember = 11
+  let dayToShow = now.getMonth() === 11 ? now.getDate() : 0;
-
-  // DEV-Override
   const sim = getSimulatedDay();
-  if (DEV_MODE && sim) {
+  if (DEV_MODE && sim) dayToShow = sim;
-    dayToShow = sim;
-  }
 
-  // === Bildpfad bestimmen ===
+  let padded = "Basisbild";
-  let imgPath = "assets/images/Basisbild.webp";
   if (dayToShow >= 1 && dayToShow <= 24) {
-    const padded = String(dayToShow).padStart(2, "0");
+    padded = String(dayToShow).padStart(2, "0");
-    imgPath = `assets/images/${padded}.webp`;
   }
 
-  // === Funktion zum Setzen des Favicons ===
+  // Basename ohne Extension
+  const filename = `${padded}`;
+  const basePath = "assets/images/";
+
+  // === Funktion zum Setzen des Favicons (.webp reicht völlig aus) ===
   function setFavicon(path) {
     let link = document.querySelector('link[rel="icon"]');
     if (!link) {
@@ -41,18 +37,40 @@
       link.type = "image/png";
       document.head.appendChild(link);
     }
-    link.href = path;
+    link.href = `${basePath}${filename}.webp`;
   }
 
-  // === Anwendung auf das Kalenderbild & Favicon ===
   window.addEventListener("DOMContentLoaded", () => {
-    const kalenderBild = document.querySelector(".kalenderbild img");
+    const picture = document.querySelector(".kalenderbild picture");
-    if (kalenderBild) {
+    const img = picture?.querySelector("img");
-      kalenderBild.src = imgPath;
+    const sources = picture?.querySelectorAll("source");
-      console.log(`[Bratonien] Hintergrund gesetzt: ${imgPath}`);
-    }
 
-    setFavicon(imgPath);
+    if (!picture || !img || !sources) return;
-    console.log(`[Bratonien] Favicon gesetzt: ${imgPath}`);
+
+    // Durch alle <source> durchgehen und neuen srcset setzen
+    sources.forEach(source => {
+      const type = source.getAttribute("type");
+      const format = type?.split("/")[1]; // "avif" oder "webp"
+      if (!format) return;
+
+      const newSrcset = [
+        `assets/images/420/${format}/${filename}.${format} 420w`,
+        `assets/images/768/${format}/${filename}.${format} 768w`,
+        `assets/images/1024/${format}/${filename}.${format} 1024w`,
+        `assets/images/1280/${format}/${filename}.${format} 1280w`,
+        `assets/images/1600/${format}/${filename}.${format} 1600w`,
+        `assets/images/1920/${format}/${filename}.${format} 1920w`,
+        `assets/images/2560/${format}/${filename}.${format} 2560w`,
+        `assets/images/3840/${format}/${filename}.${format} 3840w`,
+      ].join(", ");
+      source.setAttribute("srcset", newSrcset);
+    });
+
+    // JPEG für <img>-Fallback
+    img.src = `assets/images/1920/jpeg/${filename}.jpg`;
+
+    console.log(`[Bratonien] Kalenderbild gesetzt für Tag ${filename}`);
+    setFavicon(`${basePath}${filename}.webp`);
+    console.log(`[Bratonien] Favicon gesetzt für Tag ${filename}`);
   });
 })();