770 lines
27 KiB
HTML
770 lines
27 KiB
HTML
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<link rel="stylesheet" href="index.css" />
|
|
<link rel="icon" type="image/x-icon" href="/pictures/favicon.ico" />
|
|
|
|
<title>NinjaCross Timer</title>
|
|
</head>
|
|
<body>
|
|
<!-- Batterie-Banner -->
|
|
<div id="battery-banner" class="battery-banner">
|
|
<div class="banner-content">
|
|
<div class="banner-icon">🔋</div>
|
|
<div>
|
|
<div class="banner-text">⚠️ Niedrige Batterie erkannt!</div>
|
|
<div class="banner-devices" id="battery-devices">
|
|
Deine Geräte mit niedriger Batterie:
|
|
<span id="low-battery-list"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button class="close-btn" onclick="closeBatteryBanner()">×</button>
|
|
</div>
|
|
|
|
<img src="/pictures/erlebniss.png" class="logo" alt="NinjaCross Logo" />
|
|
<a href="/leaderboard.html" class="leaderboard-btn">🏆</a>
|
|
<a href="/settings" class="settings-btn">⚙️</a>
|
|
|
|
<div class="heartbeat-indicators">
|
|
<div
|
|
class="heartbeat-indicator"
|
|
id="heartbeat1"
|
|
data-label="Start1"
|
|
></div>
|
|
<div class="heartbeat-indicator" id="heartbeat2" data-label="Stop1"></div>
|
|
<div
|
|
class="heartbeat-indicator"
|
|
id="heartbeat3"
|
|
data-label="Start2"
|
|
></div>
|
|
<div class="heartbeat-indicator" id="heartbeat4" data-label="Stop2"></div>
|
|
</div>
|
|
|
|
<div class="header">
|
|
<h1>🏊♀️ NinjaCross Timer</h1>
|
|
<p>Dein professioneller Zeitmesser für Ninjacross Wettkämpfe</p>
|
|
</div>
|
|
|
|
<div id="learning-display" class="learning-mode" style="display: none">
|
|
<h3>📚 Lernmodus aktiv</h3>
|
|
<p>Drücke jetzt den Button für: <span id="learning-button"></span></p>
|
|
</div>
|
|
|
|
<div class="timer-container">
|
|
<div class="lane">
|
|
<div id="name1" class="swimmer-name" style="display: none"></div>
|
|
<h2>🏊♀️ Bahn 1</h2>
|
|
<div id="status1" class="status standby">
|
|
Standby: Drücke beide Buttons einmal
|
|
</div>
|
|
<div id="time1" class="time-display">00.00</div>
|
|
</div>
|
|
|
|
<div class="lane">
|
|
<div id="name2" class="swimmer-name" style="display: none"></div>
|
|
<h2>🏊♂️ Bahn 2</h2>
|
|
<div id="status2" class="status standby">
|
|
Standby: Drücke beide Buttons einmal
|
|
</div>
|
|
<div id="time2" class="time-display">00.00</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="best-times">
|
|
<h3>🏆 Lokales Leaderboard</h3>
|
|
<div id="leaderboard-container"></div>
|
|
</div>
|
|
|
|
<script>
|
|
// State variables
|
|
let timer1 = 0;
|
|
let timer2 = 0;
|
|
let status1 = "ready";
|
|
let status2 = "ready";
|
|
let best1 = 0;
|
|
let best2 = 0;
|
|
let lastSync = Date.now();
|
|
let learningMode = false;
|
|
let learningButton = "";
|
|
let name1 = "";
|
|
let name2 = "";
|
|
let leaderboardData = [];
|
|
|
|
// Lane Configuration
|
|
let laneConfigType = 0; // 0=Identical, 1=Different
|
|
let lane1DifficultyType = 0; // 0=Light, 1=Heavy
|
|
let lane2DifficultyType = 0; // 0=Light, 1=Heavy
|
|
|
|
// Batterie-Banner State
|
|
let lowBatteryDevices = new Set();
|
|
let batteryBannerDismissed = false;
|
|
|
|
const ws = new WebSocket(`ws://${window.location.host}/ws`);
|
|
|
|
// Heartbeat timeout tracker
|
|
const heartbeatTimeouts = {
|
|
start1: 0,
|
|
stop1: 0,
|
|
start2: 0,
|
|
stop2: 0,
|
|
};
|
|
|
|
// Set all heartbeats to red initially
|
|
["heartbeat1", "heartbeat2", "heartbeat3", "heartbeat4"].forEach((id) => {
|
|
document.getElementById(id).classList.remove("active");
|
|
});
|
|
|
|
// Funktion um zu prüfen ob beide Buttons einer Bahn verbunden sind
|
|
function areBothButtonsConnected(laneNumber) {
|
|
const now = Date.now();
|
|
if (laneNumber === 1) {
|
|
return (
|
|
now - heartbeatTimeouts.start1 <= 10000 &&
|
|
now - heartbeatTimeouts.stop1 <= 10000
|
|
);
|
|
} else if (laneNumber === 2) {
|
|
return (
|
|
now - heartbeatTimeouts.start2 <= 10000 &&
|
|
now - heartbeatTimeouts.stop2 <= 10000
|
|
);
|
|
}
|
|
return false;
|
|
}
|
|
|
|
// Handle WebSocket events
|
|
ws.onopen = () => {
|
|
console.log("WebSocket connected");
|
|
};
|
|
|
|
ws.onclose = () => {
|
|
console.log("WebSocket disconnected");
|
|
};
|
|
|
|
ws.onmessage = (event) => {
|
|
const data = JSON.parse(event.data);
|
|
if (data.button && data.mac && data.active !== undefined) {
|
|
const indicatorId =
|
|
data.button === "start1"
|
|
? "heartbeat1"
|
|
: data.button === "stop1"
|
|
? "heartbeat2"
|
|
: data.button === "start2"
|
|
? "heartbeat3"
|
|
: data.button === "stop2"
|
|
? "heartbeat4"
|
|
: null;
|
|
if (indicatorId) {
|
|
if (data.active) {
|
|
document.getElementById(indicatorId).classList.add("active");
|
|
} else {
|
|
document.getElementById(indicatorId).classList.remove("active");
|
|
}
|
|
}
|
|
}
|
|
|
|
try {
|
|
const data = JSON.parse(event.data);
|
|
|
|
// Batterie-Status Handling für einzelne Geräte
|
|
if (data.button && data.mac && data.batteryLevel !== undefined) {
|
|
handleSingleBatteryStatus(data);
|
|
}
|
|
|
|
// Heartbeat-Handling
|
|
if (data.button && data.mac && data.timestamp) {
|
|
let indicatorId = null;
|
|
if (data.button === "start1") indicatorId = "heartbeat1";
|
|
else if (data.button === "stop1") indicatorId = "heartbeat2";
|
|
else if (data.button === "start2") indicatorId = "heartbeat3";
|
|
else if (data.button === "stop2") indicatorId = "heartbeat4";
|
|
|
|
if (indicatorId) {
|
|
heartbeatTimeouts[data.button] = Date.now();
|
|
document.getElementById(indicatorId).classList.add("active");
|
|
}
|
|
}
|
|
|
|
// Namen-Handling
|
|
if ((data.name == "" || !data.name) && data.lane == "start1") {
|
|
name1 = "";
|
|
}
|
|
if ((data.name == "" || !data.name) && data.lane == "start2") {
|
|
name2 = "";
|
|
}
|
|
|
|
if (data.name && data.lane) {
|
|
if (data.lane === "start1") {
|
|
name1 = data.name;
|
|
} else if (data.lane === "start2") {
|
|
name2 = data.name;
|
|
}
|
|
updateDisplay();
|
|
}
|
|
} catch (error) {
|
|
console.error("Error processing WebSocket message:", error);
|
|
}
|
|
};
|
|
|
|
// Batterie-Status Handler für einzelne Geräte
|
|
function handleSingleBatteryStatus(data) {
|
|
// Format: {button: "start2", mac: "98:3D:AE:AA:CF:94", batteryLevel: 0}
|
|
|
|
const deviceKey = `${data.button}-${data.mac}`;
|
|
const batteryLevel = data.batteryLevel || 0;
|
|
|
|
// Batterie als niedrig betrachten wenn <= 15%
|
|
if (batteryLevel <= 15) {
|
|
// Gerät zu niedrige Batterie Liste hinzufügen
|
|
let found = false;
|
|
for (let device of lowBatteryDevices) {
|
|
if (device.button === data.button && device.mac === data.mac) {
|
|
device.battery = batteryLevel;
|
|
found = true;
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (!found) {
|
|
lowBatteryDevices.add({
|
|
button: data.button,
|
|
mac: data.mac,
|
|
battery: batteryLevel,
|
|
});
|
|
}
|
|
|
|
if (!batteryBannerDismissed) {
|
|
showBatteryBanner();
|
|
}
|
|
} else {
|
|
// Gerät aus niedrige Batterie Liste entfernen
|
|
lowBatteryDevices.forEach((device) => {
|
|
if (device.button === data.button && device.mac === data.mac) {
|
|
lowBatteryDevices.delete(device);
|
|
}
|
|
});
|
|
|
|
// Banner verstecken wenn keine Geräte mehr niedrige Batterie haben
|
|
if (lowBatteryDevices.size === 0) {
|
|
hideBatteryBanner();
|
|
} else {
|
|
// Banner aktualisieren
|
|
showBatteryBanner();
|
|
}
|
|
}
|
|
}
|
|
|
|
// Alte Batterie-Status Handler (als Fallback)
|
|
function handleBatteryStatus(data) {
|
|
// data.devices ist ein Array mit Geräten die niedrige Batterie haben
|
|
// Format: [{button: "start1", mac: "XX:XX:XX", battery: 15}, ...]
|
|
|
|
lowBatteryDevices.clear();
|
|
|
|
if (data.devices && data.devices.length > 0) {
|
|
data.devices.forEach((device) => {
|
|
lowBatteryDevices.add({
|
|
button: device.button,
|
|
mac: device.mac,
|
|
battery: device.battery || 0,
|
|
});
|
|
});
|
|
|
|
if (!batteryBannerDismissed) {
|
|
showBatteryBanner();
|
|
}
|
|
} else {
|
|
hideBatteryBanner();
|
|
}
|
|
}
|
|
|
|
// Batterie-Banner anzeigen
|
|
function showBatteryBanner() {
|
|
const banner = document.getElementById("battery-banner");
|
|
const deviceList = document.getElementById("low-battery-list");
|
|
|
|
// Geräteliste erstellen
|
|
const deviceNames = Array.from(lowBatteryDevices)
|
|
.map((device) => {
|
|
const buttonName = getButtonDisplayName(device.button);
|
|
return `${buttonName} (${device.battery}%)`;
|
|
})
|
|
.join(", ");
|
|
|
|
deviceList.textContent = deviceNames;
|
|
|
|
// Banner anzeigen
|
|
banner.classList.add("show");
|
|
document.body.classList.add("content-shifted");
|
|
}
|
|
|
|
// Batterie-Banner verstecken
|
|
function hideBatteryBanner() {
|
|
const banner = document.getElementById("battery-banner");
|
|
banner.classList.remove("show");
|
|
document.body.classList.remove("content-shifted");
|
|
batteryBannerDismissed = false;
|
|
}
|
|
|
|
// Banner manuell schließen
|
|
function closeBatteryBanner() {
|
|
batteryBannerDismissed = true;
|
|
hideBatteryBanner();
|
|
}
|
|
|
|
// Button-Namen für Anzeige
|
|
function getButtonDisplayName(button) {
|
|
switch (button) {
|
|
case "start1":
|
|
return "Start Button Bahn 1";
|
|
case "stop1":
|
|
return "Stop Button Bahn 1";
|
|
case "start2":
|
|
return "Start Button Bahn 2";
|
|
case "stop2":
|
|
return "Stop Button Bahn 2";
|
|
default:
|
|
return button;
|
|
}
|
|
}
|
|
|
|
function formatTime(seconds) {
|
|
if (seconds === 0) return "00.00";
|
|
|
|
const totalSeconds = Math.floor(seconds);
|
|
const minutes = Math.floor(totalSeconds / 60);
|
|
const remainingSeconds = totalSeconds % 60;
|
|
const milliseconds = Math.floor((seconds - totalSeconds) * 100);
|
|
|
|
// Zeige Minuten nur wenn über 60 Sekunden
|
|
if (totalSeconds >= 60) {
|
|
return `${minutes.toString().padStart(2, "0")}:${remainingSeconds
|
|
.toString()
|
|
.padStart(2, "0")}.${milliseconds.toString().padStart(2, "0")}`;
|
|
} else {
|
|
return `${remainingSeconds.toString().padStart(2, "0")}.${milliseconds
|
|
.toString()
|
|
.padStart(2, "0")}`;
|
|
}
|
|
}
|
|
|
|
// Leaderboard Funktionen
|
|
async function loadLeaderboard() {
|
|
try {
|
|
const response = await fetch("/api/leaderboard");
|
|
const data = await response.json();
|
|
leaderboardData = data.leaderboard || [];
|
|
updateLeaderboardDisplay();
|
|
} catch (error) {
|
|
console.error("Fehler beim Laden des Leaderboards:", error);
|
|
}
|
|
}
|
|
|
|
function updateLeaderboardDisplay() {
|
|
const container = document.getElementById("leaderboard-container");
|
|
container.innerHTML = "";
|
|
|
|
if (leaderboardData.length === 0) {
|
|
container.innerHTML =
|
|
'<div class="no-times">Noch keine Zeiten erfasst</div>';
|
|
return;
|
|
}
|
|
|
|
// Erstelle zwei Reihen für 2x3 Layout
|
|
const row1 = document.createElement("div");
|
|
row1.className = "leaderboard-row";
|
|
const row2 = document.createElement("div");
|
|
row2.className = "leaderboard-row";
|
|
|
|
leaderboardData.forEach((entry, index) => {
|
|
const entryDiv = document.createElement("div");
|
|
entryDiv.className = "leaderboard-entry";
|
|
|
|
// Podium-Plätze hervorheben
|
|
if (index === 0) {
|
|
entryDiv.classList.add("gold");
|
|
} else if (index === 1) {
|
|
entryDiv.classList.add("silver");
|
|
} else if (index === 2) {
|
|
entryDiv.classList.add("bronze");
|
|
}
|
|
|
|
const rankSpan = document.createElement("span");
|
|
rankSpan.className = "rank";
|
|
rankSpan.textContent = entry.rank + ".";
|
|
|
|
const nameSpan = document.createElement("span");
|
|
nameSpan.className = "name";
|
|
nameSpan.textContent = entry.name;
|
|
|
|
const timeSpan = document.createElement("span");
|
|
timeSpan.className = "time";
|
|
timeSpan.textContent = entry.timeFormatted;
|
|
|
|
entryDiv.appendChild(rankSpan);
|
|
entryDiv.appendChild(nameSpan);
|
|
entryDiv.appendChild(timeSpan);
|
|
|
|
// Erste 3 Einträge in die erste Reihe, nächste 3 in die zweite Reihe
|
|
if (index < 3) {
|
|
row1.appendChild(entryDiv);
|
|
} else if (index < 6) {
|
|
row2.appendChild(entryDiv);
|
|
}
|
|
});
|
|
|
|
container.appendChild(row1);
|
|
if (leaderboardData.length > 3) {
|
|
container.appendChild(row2);
|
|
}
|
|
}
|
|
|
|
function updateDisplay() {
|
|
// Calculate elapsed time since last sync
|
|
const now = Date.now();
|
|
let display1 = timer1;
|
|
let display2 = timer2;
|
|
|
|
// Status für Bahn 1
|
|
const s1 = document.getElementById("status1");
|
|
const lane1Connected = areBothButtonsConnected(1);
|
|
// Status für Bahn 2
|
|
const s2 = document.getElementById("status2");
|
|
const lane2Connected = areBothButtonsConnected(2);
|
|
|
|
if (status1 === "running" && lane1Connected) {
|
|
display1 += (now - lastSync) / 1000;
|
|
}
|
|
if (status2 === "running" && lane2Connected) {
|
|
display2 += (now - lastSync) / 1000;
|
|
}
|
|
|
|
document.getElementById("time1").textContent = formatTime(display1);
|
|
|
|
const time1Element = document.getElementById("time1");
|
|
const lane1Element = time1Element.closest(".lane");
|
|
const h2_1 = lane1Element.querySelector("h2");
|
|
|
|
if (!lane1Connected) {
|
|
s1.className = "status standby large-status";
|
|
s1.textContent = "Standby: Drücke beide Buttons einmal";
|
|
time1Element.style.display = "none";
|
|
// Position über time-display, aber innerhalb des Containers
|
|
if (s1.classList.contains("large-status")) {
|
|
const lane1Rect = lane1Element.getBoundingClientRect();
|
|
const h2Rect = h2_1.getBoundingClientRect();
|
|
const h2Bottom = h2Rect.bottom - lane1Rect.top;
|
|
const startTop = h2Bottom + 10;
|
|
s1.style.top = startTop + "px";
|
|
s1.style.left = "50%";
|
|
s1.style.transform = "translateX(-50%)";
|
|
s1.style.bottom = "20px";
|
|
s1.style.width = "calc(100% - 40px)";
|
|
s1.style.display = "flex";
|
|
s1.style.alignItems = "center";
|
|
s1.style.justifyContent = "center";
|
|
}
|
|
} else {
|
|
s1.className = `status ${status1}`;
|
|
|
|
// Wenn status "ready" ist, verstecke Zeit und mache Status groß
|
|
if (status1 === "ready") {
|
|
s1.classList.add("large-status");
|
|
time1Element.style.display = "none";
|
|
const lane1Rect = lane1Element.getBoundingClientRect();
|
|
const h2Rect = h2_1.getBoundingClientRect();
|
|
const h2Bottom = h2Rect.bottom - lane1Rect.top;
|
|
const startTop = h2Bottom + 10;
|
|
s1.style.top = startTop + "px";
|
|
s1.style.left = "50%";
|
|
s1.style.transform = "translateX(-50%)";
|
|
s1.style.bottom = "20px";
|
|
s1.style.width = "calc(100% - 40px)";
|
|
s1.style.display = "flex";
|
|
s1.style.alignItems = "center";
|
|
s1.style.justifyContent = "center";
|
|
s1.style.fontSize = "clamp(2rem, 8vw, 8rem)";
|
|
} else {
|
|
// Bei anderen Status (running, finished, etc.) zeige Zeit wieder an
|
|
time1Element.style.display = "";
|
|
if (status1 !== "running" && status1 !== "finished") {
|
|
s1.classList.add("large-status");
|
|
const time1Rect = time1Element.getBoundingClientRect();
|
|
const lane1Rect = lane1Element.getBoundingClientRect();
|
|
const h2Rect = h2_1.getBoundingClientRect();
|
|
const time1Center = time1Rect.top - lane1Rect.top + time1Rect.height / 2;
|
|
const h2Bottom = h2Rect.bottom - lane1Rect.top;
|
|
const startTop = h2Bottom + 10;
|
|
const statusHeight = s1.offsetHeight || 200;
|
|
const targetTop = Math.max(startTop, time1Center - statusHeight / 2);
|
|
s1.style.top = targetTop + "px";
|
|
s1.style.transform = "translateX(-50%)";
|
|
s1.style.height = "";
|
|
s1.style.width = "";
|
|
s1.style.display = "";
|
|
s1.style.alignItems = "";
|
|
s1.style.justifyContent = "";
|
|
s1.style.fontSize = "";
|
|
const maxHeight = lane1Rect.height - targetTop - 30;
|
|
s1.style.maxHeight = maxHeight + "px";
|
|
s1.style.overflow = "auto";
|
|
} else {
|
|
s1.classList.remove("large-status");
|
|
s1.style.top = "";
|
|
s1.style.transform = "";
|
|
s1.style.maxHeight = "";
|
|
s1.style.height = "";
|
|
s1.style.width = "";
|
|
s1.style.display = "";
|
|
s1.style.alignItems = "";
|
|
s1.style.justifyContent = "";
|
|
s1.style.fontSize = "";
|
|
s1.style.left = "";
|
|
s1.style.bottom = "";
|
|
}
|
|
}
|
|
|
|
switch (status1) {
|
|
case "ready":
|
|
s1.textContent = "Bereit für den Start!";
|
|
break;
|
|
case "running":
|
|
s1.textContent = "Läuft - Gib alles!";
|
|
break;
|
|
case "finished":
|
|
s1.textContent = "Geschafft!";
|
|
break;
|
|
case "armed":
|
|
s1.textContent = "Bereit zum Start!";
|
|
break;
|
|
default:
|
|
s1.textContent = "Status unbekannt";
|
|
}
|
|
}
|
|
|
|
document.getElementById("time2").textContent = formatTime(display2);
|
|
|
|
const time2Element = document.getElementById("time2");
|
|
const lane2Element = time2Element.closest(".lane");
|
|
const h2_2 = lane2Element.querySelector("h2");
|
|
|
|
if (!lane2Connected) {
|
|
s2.className = "status standby large-status";
|
|
s2.textContent = "Standby: Drücke beide Buttons einmal";
|
|
time2Element.style.display = "none";
|
|
// Position über time-display, aber innerhalb des Containers
|
|
if (s2.classList.contains("large-status")) {
|
|
const lane2Rect = lane2Element.getBoundingClientRect();
|
|
const h2Rect = h2_2.getBoundingClientRect();
|
|
const h2Bottom = h2Rect.bottom - lane2Rect.top;
|
|
const startTop = h2Bottom + 10;
|
|
s2.style.top = startTop + "px";
|
|
s2.style.left = "50%";
|
|
s2.style.transform = "translateX(-50%)";
|
|
s2.style.bottom = "20px";
|
|
s2.style.width = "calc(100% - 40px)";
|
|
s2.style.display = "flex";
|
|
s2.style.alignItems = "center";
|
|
s2.style.justifyContent = "center";
|
|
}
|
|
} else {
|
|
s2.className = `status ${status2}`;
|
|
|
|
// Wenn status "ready" ist, verstecke Zeit und mache Status groß
|
|
if (status2 === "ready") {
|
|
s2.classList.add("large-status");
|
|
time2Element.style.display = "none";
|
|
const lane2Rect = lane2Element.getBoundingClientRect();
|
|
const h2Rect = h2_2.getBoundingClientRect();
|
|
const h2Bottom = h2Rect.bottom - lane2Rect.top;
|
|
const startTop = h2Bottom + 10;
|
|
s2.style.top = startTop + "px";
|
|
s2.style.left = "50%";
|
|
s2.style.transform = "translateX(-50%)";
|
|
s2.style.bottom = "20px";
|
|
s2.style.width = "calc(100% - 40px)";
|
|
s2.style.display = "flex";
|
|
s2.style.alignItems = "center";
|
|
s2.style.justifyContent = "center";
|
|
s2.style.fontSize = "clamp(2rem, 8vw, 8rem)";
|
|
} else {
|
|
// Bei anderen Status (running, finished, etc.) zeige Zeit wieder an
|
|
time2Element.style.display = "";
|
|
if (status2 !== "running" && status2 !== "finished") {
|
|
s2.classList.add("large-status");
|
|
const time2Rect = time2Element.getBoundingClientRect();
|
|
const lane2Rect = lane2Element.getBoundingClientRect();
|
|
const h2Rect = h2_2.getBoundingClientRect();
|
|
const time2Center = time2Rect.top - lane2Rect.top + time2Rect.height / 2;
|
|
const h2Bottom = h2Rect.bottom - lane2Rect.top;
|
|
const startTop = h2Bottom + 10;
|
|
const statusHeight = s2.offsetHeight || 200;
|
|
const targetTop = Math.max(startTop, time2Center - statusHeight / 2);
|
|
s2.style.top = targetTop + "px";
|
|
s2.style.transform = "translateX(-50%)";
|
|
s2.style.height = "";
|
|
s2.style.width = "";
|
|
s2.style.display = "";
|
|
s2.style.alignItems = "";
|
|
s2.style.justifyContent = "";
|
|
s2.style.fontSize = "";
|
|
const maxHeight = lane2Rect.height - targetTop - 30;
|
|
s2.style.maxHeight = maxHeight + "px";
|
|
s2.style.overflow = "auto";
|
|
} else {
|
|
s2.classList.remove("large-status");
|
|
s2.style.top = "";
|
|
s2.style.transform = "";
|
|
s2.style.maxHeight = "";
|
|
s2.style.height = "";
|
|
s2.style.width = "";
|
|
s2.style.display = "";
|
|
s2.style.alignItems = "";
|
|
s2.style.justifyContent = "";
|
|
s2.style.fontSize = "";
|
|
s2.style.left = "";
|
|
s2.style.bottom = "";
|
|
}
|
|
}
|
|
|
|
switch (status2) {
|
|
case "ready":
|
|
s2.textContent = "Bereit für den Start!";
|
|
break;
|
|
case "running":
|
|
s2.textContent = "Läuft - Gib alles!";
|
|
break;
|
|
case "finished":
|
|
s2.textContent = "Geschafft!";
|
|
break;
|
|
case "armed":
|
|
s2.textContent = "Bereit zum Start!";
|
|
break;
|
|
default:
|
|
s2.textContent = "Status unbekannt";
|
|
}
|
|
}
|
|
|
|
// Leaderboard wird separat geladen
|
|
|
|
// Namen anzeigen/verstecken
|
|
const name1Element = document.getElementById("name1");
|
|
const name2Element = document.getElementById("name2");
|
|
|
|
if (name1 && name1.trim() !== "") {
|
|
name1Element.textContent = name1;
|
|
name1Element.style.display = "block";
|
|
} else {
|
|
name1Element.style.display = "none";
|
|
}
|
|
|
|
if (name2 && name2.trim() !== "") {
|
|
name2Element.textContent = name2;
|
|
name2Element.style.display = "block";
|
|
} else {
|
|
name2Element.style.display = "none";
|
|
}
|
|
|
|
// Lernmodus
|
|
const learningDisplay = document.getElementById("learning-display");
|
|
if (learningMode) {
|
|
document.getElementById("learning-button").textContent =
|
|
learningButton;
|
|
learningDisplay.style.display = "block";
|
|
} else {
|
|
learningDisplay.style.display = "none";
|
|
}
|
|
}
|
|
|
|
function syncFromBackend() {
|
|
fetch("/api/data")
|
|
.then((response) => response.json())
|
|
.then((data) => {
|
|
timer1 = data.time1;
|
|
timer2 = data.time2;
|
|
status1 = data.status1;
|
|
status2 = data.status2;
|
|
best1 = data.best1;
|
|
best2 = data.best2;
|
|
learningMode = data.learningMode;
|
|
learningButton = data.learningButton || "";
|
|
lastSync = Date.now();
|
|
updateDisplay();
|
|
})
|
|
.catch((error) =>
|
|
console.error("Fehler beim Laden deiner Daten:", error)
|
|
);
|
|
}
|
|
|
|
function loadLaneConfig() {
|
|
fetch("/api/get-lane-config")
|
|
.then((response) => response.json())
|
|
.then((data) => {
|
|
laneConfigType = data.type === "different" ? 1 : 0;
|
|
lane1DifficultyType = data.lane1Difficulty === "heavy" ? 1 : 0;
|
|
lane2DifficultyType = data.lane2Difficulty === "heavy" ? 1 : 0;
|
|
updateLaneDisplay();
|
|
})
|
|
.catch((error) =>
|
|
console.error(
|
|
"Fehler beim Laden der Lane-Schwierigkeits-Konfiguration:",
|
|
error
|
|
)
|
|
);
|
|
}
|
|
|
|
function updateLaneDisplay() {
|
|
const lane1Title = document.querySelector(".lane h2");
|
|
const lane2Title = document.querySelectorAll(".lane h2")[1];
|
|
|
|
if (laneConfigType === 0) {
|
|
// Identische Lanes
|
|
lane1Title.textContent = "🏊♀️ Bahn 1";
|
|
lane2Title.textContent = "🏊♂️ Bahn 2";
|
|
} else {
|
|
// Unterschiedliche Lanes
|
|
const lane1Icon = lane1DifficultyType === 0 ? "🟢" : "🔴";
|
|
const lane2Icon = lane2DifficultyType === 0 ? "🟢" : "🔴";
|
|
const lane1Difficulty =
|
|
lane1DifficultyType === 0 ? "Leicht" : "Schwer";
|
|
const lane2Difficulty =
|
|
lane2DifficultyType === 0 ? "Leicht" : "Schwer";
|
|
|
|
lane1Title.textContent = `${lane1Icon} Bahn 1 (${lane1Difficulty})`;
|
|
lane2Title.textContent = `${lane2Icon} Bahn 2 (${lane2Difficulty})`;
|
|
}
|
|
}
|
|
|
|
// Sync with backend every 1 second
|
|
setInterval(syncFromBackend, 1000);
|
|
|
|
// Smooth update every 50ms
|
|
setInterval(updateDisplay, 50);
|
|
|
|
// Heartbeat timeout check (every second)
|
|
setInterval(() => {
|
|
const now = Date.now();
|
|
[
|
|
{ button: "start1", id: "heartbeat1" },
|
|
{ button: "stop1", id: "heartbeat2" },
|
|
{ button: "start2", id: "heartbeat3" },
|
|
{ button: "stop2", id: "heartbeat4" },
|
|
].forEach(({ button, id }) => {
|
|
if (now - heartbeatTimeouts[button] > 10000) {
|
|
document.getElementById(id).classList.remove("active");
|
|
}
|
|
});
|
|
}, 1000);
|
|
|
|
// Initial load
|
|
syncFromBackend();
|
|
loadLaneConfig();
|
|
loadLeaderboard();
|
|
|
|
// Leaderboard alle 5 Sekunden aktualisieren
|
|
setInterval(loadLeaderboard, 5000);
|
|
</script>
|
|
</body>
|
|
</html>
|