49 lines
1.2 KiB
JavaScript
49 lines
1.2 KiB
JavaScript
const img = document.getElementById("personImg");
|
|
const nameEl = document.getElementById("personName");
|
|
const button = document.getElementById("toggleButton");
|
|
|
|
async function loadStatus() {
|
|
const res = await fetch("/status");
|
|
const data = await res.json();
|
|
showStatus(data.current, false);
|
|
}
|
|
|
|
function showStatus(person, animate = true) {
|
|
const file = person === "A" ? "img/a.png" : "img/b.png";
|
|
const label = person === "A" ? "Honey" : "Kirby";
|
|
|
|
// Hintergrundbilder für A und B
|
|
const bgA = "url('img/bgA.jpg')";
|
|
const bgB = "url('img/bgB.jpg')";
|
|
|
|
// Hintergrundanimation (optional)
|
|
document.body.style.transition = "background 0.4s ease";
|
|
|
|
// Hintergrund setzen
|
|
document.body.style.backgroundImage = person === "A" ? bgA : bgB;
|
|
document.body.style.backgroundSize = "cover";
|
|
document.body.style.backgroundPosition = "center";
|
|
|
|
if (animate) {
|
|
img.classList.add("rotate");
|
|
}
|
|
|
|
setTimeout(() => {
|
|
img.src = file;
|
|
nameEl.textContent = label;
|
|
}, 150);
|
|
|
|
setTimeout(() => {
|
|
img.classList.remove("rotate");
|
|
}, 600);
|
|
}
|
|
|
|
|
|
button.addEventListener("click", async () => {
|
|
const res = await fetch("/toggle", { method: "POST" });
|
|
const data = await res.json();
|
|
showStatus(data.current);
|
|
});
|
|
|
|
loadStatus();
|