Thomas/Bratonien-Adventskalender
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

experiment zu finktionsstabilisierung

Browse Source
This commit is contained in:
Thomas Dannenberg
2025-11-10 14:59:17 +01:00
parent 37c8bb014f
commit 6e407b8bfc
3 changed files with 120 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
adventskalender/2025/content/day01.html
View File

@@ -88,8 +88,8 @@
<!-- === Hintergrundmusik (optional) === --> <!-- === Hintergrundmusik (optional) === -->
<audio id="bgmusic" autoplay loop> <audio id="bgmusic" loop preload="auto">
<source src="/2025/assets/sounds/FallingSnow.mp3" type="audio/mpeg"> <source src="/2025/assets/sounds/FallingSnow.mp3" type="audio/mpeg">
</audio> </audio>
</section> </section>

99
adventskalender/2025/js/background.js
View File

@@ -39,7 +39,6 @@
link.href = path; link.href = path;
} }
// === Setze Favicon direkt ===
const faviconPath = `${basePath}1920/webp/${filename}.webp`; const faviconPath = `${basePath}1920/webp/${filename}.webp`;
setFavicon(faviconPath); setFavicon(faviconPath);
@@ -51,70 +50,76 @@
if (!picture || !img || !sources) return; if (!picture || !img || !sources) return;
// === Daumenkino (nur für Tag 1, wenn Popup geladen wurde) === // === Daumenkino für Tag 1 ===
if (dayToShow === 1) { document.addEventListener("day01-loaded", () => {
document.addEventListener("day01-loaded", () => { const thumbkino = document.querySelector(".thumbkino-video");
const thumbkino = document.querySelector(".thumbkino-video"); if (!thumbkino) {
if (!thumbkino) { console.warn("[Bratonien] Kein Daumenkino-Element gefunden.");
console.warn("[Bratonien] Kein Daumenkino-Element gefunden."); return;
return; }
}
const formats = ["webm", "mp4"]; const formats = ["webm", "mp4"];
const resolutions = [ const resolutions = [
"nHD", "nHD",
"FWVGA", "FWVGA",
"qHD", "qHD",
"HD", "HD",
"HDplus", "HDplus",
"FullHD", "FullHD",
"1440p", "1440p",
"4K", "4K",
]; ];
const breakpoints = [640, 854, 960, 1280, 1600, 1920, 2560, 3840]; const breakpoints = [640, 854, 960, 1280, 1600, 1920, 2560, 3840];
// alte Quellen entfernen // aktuelle Quellen komplett entfernen
while (thumbkino.firstChild) thumbkino.removeChild(thumbkino.firstChild); while (thumbkino.firstChild) thumbkino.removeChild(thumbkino.firstChild);
formats.forEach((format) => { // neue Quellen basierend auf aktuellem Tag hinzufügen
resolutions.forEach((res, i) => { formats.forEach((format) => {
const mediaQuery = resolutions.forEach((res, i) => {
i === resolutions.length - 1 const mediaQuery =
? "(min-width: 2561px)" i === resolutions.length - 1
: `(max-width: ${breakpoints[i]}px)`; ? "(min-width:2561px)"
: `(max-width:${breakpoints[i]}px)`;
const source = document.createElement("source"); const source = document.createElement("source");
source.src = `/${YEAR}/assets/videos/${res}/${format}/${padded}.${format}`; source.src = `/${YEAR}/assets/videos/${res}/${format}/${padded}.${format}`;
source.type = `video/${format}`; source.type = `video/${format}`;
source.media = mediaQuery; source.media = mediaQuery;
thumbkino.appendChild(source); thumbkino.appendChild(source);
});
}); });
thumbkino.load();
thumbkino.play().catch(() => {});
console.log(`[Bratonien] Daumenkino gesetzt für Tag ${padded}`);
}); });
}
// Video neu initialisieren
thumbkino.pause();
thumbkino.load();
// Sicherstellen, dass das neue Video vollständig geladen ist, bevor es startet
thumbkino.addEventListener(
"loadeddata",
() => {
thumbkino.currentTime = 0;
thumbkino.play().catch(() => {});
console.log(`[Bratonien] Daumenkino aktualisiert für Tag ${padded}`);
},
{ once: true }
);
});
// === Responsive Hintergrundbilder ===
const breakpoints = [420, 768, 1024, 1366, 1600, 1920, 2560, 3840]; const breakpoints = [420, 768, 1024, 1366, 1600, 1920, 2560, 3840];
// === <source> für AVIF und WebP aktualisieren ===
sources.forEach((source) => { sources.forEach((source) => {
const type = source.getAttribute("type"); const type = source.getAttribute("type");
const format = type?.split("/")[1]; // "avif" oder "webp" const format = type?.split("/")[1];
if (!format) return; if (!format) return;
const newSrcset = breakpoints const newSrcset = breakpoints
.map( .map((bp) => `${basePath}${bp}/${format}/${filename}.${format} ${bp}w`)
(bp) => `${basePath}${bp}/${format}/${filename}.${format} ${bp}w`
)
.join(", "); .join(", ");
source.setAttribute("srcset", newSrcset); source.setAttribute("srcset", newSrcset);
}); });
// === <img> (JPEG-Fallback) ===
const jpegSrcset = breakpoints const jpegSrcset = breakpoints
.map((bp) => `${basePath}${bp}/jpeg/${filename}.jpeg ${bp}w`) .map((bp) => `${basePath}${bp}/jpeg/${filename}.jpeg ${bp}w`)
.join(", "); .join(", ");

176
adventskalender/2025/js/popup.js
View File

@@ -1,11 +1,10 @@
// Adventskalender 2025 – Popup-Logik (Bratonien Edition) // Adventskalender 2025 – Popup-Logik (Bratonien Edition)
const popupOverlay = document.getElementById("popup-overlay"); const popupOverlay = document.getElementById("popup-overlay");
const popupBox = document.getElementById("popup-box");
const popupContent = document.getElementById("popup-content"); const popupContent = document.getElementById("popup-content");
const popupClose = document.getElementById("popup-close"); const popupClose = document.getElementById("popup-close");
let activeSound = null; // aktuell laufender Hintergrundsound let activeDay = null;
// === Platzhalterfunktion === // === Platzhalterfunktion ===
function placeholder(text) { function placeholder(text) {
@@ -20,31 +19,31 @@ function placeholder(text) {
const popupData = { const popupData = {
1: { title: "🎁 Adventskalenderstart + Daumenkino", content: placeholder("QR-Code zum Daumenkino & Intro-Post") }, 1: { title: "🎁 Adventskalenderstart + Daumenkino", content: placeholder("QR-Code zum Daumenkino & Intro-Post") },
2: { title: "🍰 Foodcheck: Tassenkuchen", content: placeholder("3-Zutaten-Rezept – Quickclip folgt") }, 2: { title: "🍰 Foodcheck: Tassenkuchen", content: placeholder("3-Zutaten-Rezept – Quickclip folgt") },
3: { title: "🎧 Mini-Podcast: Kindheitsweihnachten", content: placeholder("Audioaufnahme folgt – Thema: Kindheitsweihnachten") }, 3: { title: "🎧 Mini-Podcast: Kindheitsweihnachten", content: placeholder("Audioaufnahme folgt") },
4: { title: "🎞️ Mini-Comic", content: placeholder("Comic (1–3 Panels) folgt") }, 4: { title: "🎞️ Mini-Comic", content: placeholder("Comic folgt") },
5: { title: "👗 Cosplay-Winter-Transformation", content: placeholder("Reel oder Kurzvideo folgt") }, 5: { title: "👗 Cosplay-Winter-Transformation", content: placeholder("Reel folgt") },
6: { title: "☕ Foodcheck: Winterdrink", content: placeholder("Rezeptclip / Ästhetikaufnahme folgt") }, 6: { title: "☕ Foodcheck: Winterdrink", content: placeholder("Rezeptclip folgt") },
7: { title: "🎧 Mini-Podcast: Was ist Bratonien?", content: placeholder("Kurzpodcast mit Stimme & Haltung folgt") }, 7: { title: "🎧 Mini-Podcast: Was ist Bratonien?", content: placeholder("Kurzpodcast folgt") },
8: { title: "📱 Bratonien Icon-Pack", content: placeholder("Download-Link & Vorschau folgen") }, 8: { title: "📱 Bratonien Icon-Pack", content: placeholder("Download-Link folgt") },
9: { title: "🍽️ Foodcheck: Last-Minute-Snack", content: placeholder("Schneller Clip / Humorige Variante folgt") }, 9: { title: "🍽️ Foodcheck: Last-Minute-Snack", content: placeholder("Humorclip folgt") },
10: { title: "🥕 Fiktive Bratonien-Tradition", content: placeholder("Text oder Kurzclip zur Möhre auf dem Fenstersims folgt") }, 10: { title: "🥕 Fiktive Bratonien-Tradition", content: placeholder("Text folgt") },
11: { title: "👑 Cosplay-Inspo: Accessoires", content: placeholder("Foto / Nahaufnahme folgt") }, 11: { title: "👑 Cosplay-Inspo: Accessoires", content: placeholder("Foto folgt") },
12: { title: "🎥 POV: So beginnt ein Bratonien-Stream", content: placeholder("Stream-Intro-Video folgt") }, 12: { title: "🎥 POV: So beginnt ein Bratonien-Stream", content: placeholder("Video folgt") },
13: { title: "🎙️ Mini-Podcast: Weihnachtscringe", content: placeholder("Podcastaufnahme folgt") }, 13: { title: "🎙️ Mini-Podcast: Weihnachtscringe", content: placeholder("Podcast folgt") },
14: { title: "🍪 Foodcheck: Last-Minute-Plätzchen", content: placeholder("Clip oder Foto folgt") }, 14: { title: "🍪 Foodcheck: Last-Minute-Plätzchen", content: placeholder("Clip folgt") },
15: { title: "🧠 Mini-Podcast: Der große Wunsch", content: placeholder("Kurzer Audio-Text 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("Humor-Reel 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 oder humorige Zusammenstellung folgt") }, 17: { title: "🎞️ Die besten Weihnachtsfilme in Bratonien", content: placeholder("Liste folgt") },
18: { title: "🎧 Mini-Podcast: Weihnachten früher", content: placeholder("Audioaufnahme folgt") }, 18: { title: "🎧 Mini-Podcast: Weihnachten früher", content: placeholder("Audio folgt") },
19: { title: "🍪 Foodcheck: Das hässlichste Plätzchen", content: placeholder("Humorclip oder Foto folgt") }, 19: { title: "🍪 Foodcheck: Das hässlichste Plätzchen", content: placeholder("Humorclip folgt") },
20: { title: "🎁 3 Arten von Menschen beim Geschenkeeinpacken", content: placeholder("Sketch-Reel folgt") }, 20: { title: "🎁 3 Arten von Menschen beim Geschenkeeinpacken", content: placeholder("Sketch folgt") },
21: { title: "📞 Audio-Sketch: Der Weihnachtsanruf", content: placeholder("Audioaufnahme folgt") }, 21: { title: "📞 Audio-Sketch: Der Weihnachtsanruf", content: placeholder("Audio folgt") },
22: { title: "🎲 Bratonischer Geschenke-Generator", content: placeholder("Minispiel folgt") }, 22: { title: "🎲 Bratonischer Geschenke-Generator", content: placeholder("Minispiel folgt") },
23: { title: "🍨 Foodcheck: Deko-Dessert (Schneekugel)", content: placeholder("Foodfoto / Clip folgt") }, 23: { title: "🍨 Foodcheck: Deko-Dessert (Schneekugel)", content: placeholder("Foodfoto folgt") },
24: { title: "🎬 Danke & Geschenk", content: placeholder("Finale Video & Freebie folgen") } 24: { title: "🎬 Danke & Geschenk", content: placeholder("Finale folgt") }
}; };
// === Türchen öffnen – HTML laden oder Fallback === // === Popup öffnen ===
function openPopup(day) { function openPopup(day) {
const data = popupData[day]; const data = popupData[day];
if (!data) return; if (!data) return;
@@ -53,114 +52,69 @@ function openPopup(day) {
const url = `/2025/content/day${tag}.html`; const url = `/2025/content/day${tag}.html`;
fetch(url) fetch(url)
.then(res => { .then(res => res.ok ? res.text() : Promise.reject("Inhalt nicht gefunden"))
if (!res.ok) throw new Error("Inhalt nicht gefunden");
return res.text();
})
.then(html => { .then(html => {
activeDay = day;
popupContent.innerHTML = `<h2>${data.title}</h2>${html}`; popupContent.innerHTML = `<h2>${data.title}</h2>${html}`;
popupOverlay.classList.add("active"); popupOverlay.classList.add("active");
// === Event an background.js senden, sobald day01 geladen ist === // Event für background.js
if (day === 1) {
document.dispatchEvent(new CustomEvent("day01-loaded"));
}
// === Tag 1: Sound + Daumenkino starten ===
if (day === 1) { if (day === 1) {
setTimeout(() => { setTimeout(() => {
try { document.dispatchEvent(new CustomEvent("day01-loaded"));
const bg = popupContent.querySelector("#bgmusic"); }, 100);
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("Audio oder Video konnten nicht gestartet werden:", err);
}
}, 250);
} else {
// === alle anderen Tage: nur Video-Autoplay sichern ===
setTimeout(() => {
const videos = popupContent.querySelectorAll("video[autoplay]");
videos.forEach(v => v.play().catch(() => {}));
}, 250);
} }
// Medien 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 => { .catch(err => {
popupContent.innerHTML = `<h2>${data.title}</h2>${data.content}`; popupContent.innerHTML = `<h2>${data.title}</h2>${data.content}`;
popupOverlay.classList.add("active"); popupOverlay.classList.add("active");
console.warn(`Türchen ${day}: HTML konnte nicht geladen werden. Fallback verwendet.`, err); console.warn(`Türchen ${day}: ${err}`);
}); });
} }
// === Gesperrte Türchen – Zufallsspruch + Countdown === // === Popup schließen ===
window.showLockedPopup = function (day) { function closePopup() {
const sprueche = [ popupOverlay.classList.remove("active");
"🎁 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)]; // Alle Audioelemente im Popup stoppen
popupContent.querySelectorAll("audio").forEach(a => {
a.pause();
a.currentTime = 0;
});
const yearMatch = document.title.match(/\d{4}/); // Alle Videos im Popup stoppen
const year = yearMatch ? parseInt(yearMatch[0], 10) : new Date().getFullYear(); popupContent.querySelectorAll("video").forEach(v => {
const unlockDate = new Date(year, 11, parseInt(day, 10), 0, 0, 0); v.pause();
const now = new Date(); v.currentTime = 0;
});
let diff = unlockDate - now; activeDay = null;
if (diff < 0) diff = 0; }
const totalMinutes = Math.floor(diff / 60000); // === Schließen-Events ===
const days = Math.floor(totalMinutes / (60 * 24));
const hours = Math.floor((totalMinutes % (60 * 24)) / 60);
const minutes = totalMinutes % 60;
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" : ""}`;
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 – Overlay oder X-Button ===
popupClose.addEventListener("click", closePopup); popupClose.addEventListener("click", closePopup);
popupOverlay.addEventListener("click", e => { popupOverlay.addEventListener("click", e => {
if (e.target === popupOverlay) closePopup(); if (e.target === popupOverlay) closePopup();
}); });
function closePopup() {
popupOverlay.classList.remove("active");
if (activeSound) {
activeSound.pause();
activeSound.currentTime = 0;
activeSound = null;
}
}
// === Export für door-open.js === // === Export für door-open.js ===
window.openPopup = openPopup; window.openPopup = openPopup;
window.closePopup = closePopup;