132 lines
3.5 KiB
JavaScript
132 lines
3.5 KiB
JavaScript
const img = document.getElementById("personImg");
|
|
const nameEl = document.getElementById("personName");
|
|
const button = document.getElementById("toggleButton");
|
|
const reasonInput = document.getElementById("reasonInput");
|
|
const lastReasonBox = document.getElementById("lastReasonBox");
|
|
const lastReasonText = document.getElementById("lastReasonText");
|
|
const mainContent = document.getElementById("mainContent");
|
|
|
|
// Preload images to prevent flickering
|
|
const imageCache = {};
|
|
function preloadImage(src) {
|
|
return new Promise((resolve, reject) => {
|
|
if (imageCache[src]) {
|
|
resolve(imageCache[src]);
|
|
return;
|
|
}
|
|
|
|
const image = new Image();
|
|
image.onload = () => {
|
|
imageCache[src] = image;
|
|
resolve(image);
|
|
};
|
|
image.onerror = reject;
|
|
image.src = src;
|
|
});
|
|
}
|
|
|
|
// Preload all images on page load
|
|
async function preloadAllImages() {
|
|
try {
|
|
await Promise.all([
|
|
preloadImage('img/a.png'),
|
|
preloadImage('img/b.png'),
|
|
preloadImage('img/bgA.jpg'),
|
|
preloadImage('img/bgB.jpg')
|
|
]);
|
|
console.log("✅ Alle Bilder vorgeladen");
|
|
} catch (err) {
|
|
console.warn("⚠️ Fehler beim Vorladen:", err);
|
|
}
|
|
}
|
|
|
|
async function loadStatus() {
|
|
// Preload images first
|
|
await preloadAllImages();
|
|
|
|
const res = await fetch("/status");
|
|
const data = await res.json();
|
|
|
|
// Set background and image without animation on first load
|
|
setBackgroundAndImage(data.current, false);
|
|
|
|
// Show content smoothly
|
|
img.style.display = 'block';
|
|
mainContent.classList.remove('loading');
|
|
mainContent.classList.add('loaded');
|
|
|
|
// Show last reason if available
|
|
if (data.lastReason) {
|
|
lastReasonText.textContent = data.lastReason;
|
|
lastReasonBox.classList.remove("hidden");
|
|
}
|
|
}
|
|
|
|
function setBackgroundAndImage(person, animate = true) {
|
|
const file = person === "A" ? "img/a.png" : "img/b.png";
|
|
const label = person === "A" ? "Lumpia" : "Pierogi";
|
|
const bgImage = person === "A" ? "url('img/bgA.jpg')" : "url('img/bgB.jpg')";
|
|
|
|
// Set background immediately (smooth transition via CSS)
|
|
document.body.style.backgroundImage = bgImage;
|
|
document.body.style.backgroundSize = "cover";
|
|
document.body.style.backgroundPosition = "center";
|
|
|
|
if (animate) {
|
|
img.classList.add("rotate");
|
|
|
|
// Change image and name in the middle of rotation
|
|
setTimeout(() => {
|
|
img.src = file;
|
|
nameEl.textContent = label;
|
|
}, 300); // Half of rotation duration
|
|
|
|
// Remove rotation class after animation
|
|
setTimeout(() => {
|
|
img.classList.remove("rotate");
|
|
}, 600);
|
|
} else {
|
|
// First load - no animation
|
|
img.src = file;
|
|
nameEl.textContent = label;
|
|
}
|
|
}
|
|
|
|
button.addEventListener("click", async () => {
|
|
const reason = reasonInput.value.trim();
|
|
|
|
try {
|
|
const res = await fetch("/toggle", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json"
|
|
},
|
|
body: JSON.stringify({ reason: reason || undefined })
|
|
});
|
|
|
|
const data = await res.json();
|
|
setBackgroundAndImage(data.current, true);
|
|
|
|
// Update last reason display
|
|
if (reason) {
|
|
lastReasonText.textContent = reason;
|
|
lastReasonBox.classList.remove("hidden");
|
|
}
|
|
|
|
// Clear input
|
|
reasonInput.value = "";
|
|
} catch (err) {
|
|
console.error("Fehler beim Wechseln:", err);
|
|
nameEl.textContent = "Fehler!";
|
|
}
|
|
});
|
|
|
|
// Allow Enter key to trigger switch
|
|
reasonInput.addEventListener("keypress", (e) => {
|
|
if (e.key === "Enter") {
|
|
button.click();
|
|
}
|
|
});
|
|
|
|
// Start loading
|
|
loadStatus(); |