888 lines
31 KiB
HTML
888 lines
31 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>
|
|
</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="leaderboards-row">
|
|
<div class="best-times" id="best-times-1">
|
|
<h3 id="lb-title-1">🏊♀️ Bahn 1 — Letzte Zeiten</h3>
|
|
<div id="leaderboard-container-1" class="leaderboard-list"></div>
|
|
</div>
|
|
<div class="best-times" id="best-times-2">
|
|
<h3 id="lb-title-2">🏊♂️ Bahn 2 — Letzte Zeiten</h3>
|
|
<div id="leaderboard-container-2" class="leaderboard-list"></div>
|
|
</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 = null;
|
|
|
|
// 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;
|
|
}
|
|
}
|
|
|
|
// Passt "Bereit" so an, dass es die Status-Box maximal ausfüllt.
|
|
// Nutzt echte DOM-Messung via unsichtbarem Span → berechnet den
|
|
// Skalierungsfaktor und setzt font-size pixelgenau.
|
|
const fitReadyCache = { 1: { w: 0, h: 0, fs: 0 }, 2: { w: 0, h: 0, fs: 0 } };
|
|
function fitReadyText(statusEl, laneEl, laneNum) {
|
|
// Wir messen die Status-Box selbst — sie wurde vorher bereits
|
|
// positioniert (top/bottom/width gesetzt), hat also ihre finale Größe.
|
|
const sw = statusEl.clientWidth;
|
|
const sh = statusEl.clientHeight;
|
|
if (!sw || !sh) return;
|
|
|
|
const cache = fitReadyCache[laneNum];
|
|
if (cache.w === sw && cache.h === sh) {
|
|
statusEl.style.fontSize = cache.fs + "px";
|
|
return;
|
|
}
|
|
|
|
// Innenraum der Status-Box (nach Padding)
|
|
const cs = window.getComputedStyle(statusEl);
|
|
const pL = parseFloat(cs.paddingLeft) || 0;
|
|
const pR = parseFloat(cs.paddingRight) || 0;
|
|
const pT = parseFloat(cs.paddingTop) || 0;
|
|
const pB = parseFloat(cs.paddingBottom) || 0;
|
|
const availW = sw - pL - pR - 6;
|
|
const availH = sh - pT - pB - 6;
|
|
if (availW <= 0 || availH <= 0) return;
|
|
|
|
// Unsichtbarer Messspan im selben Font
|
|
let m = fitReadyText.m;
|
|
if (!m) {
|
|
m = document.createElement("span");
|
|
m.style.cssText =
|
|
"position:absolute;visibility:hidden;white-space:nowrap;" +
|
|
"left:-99999px;top:0;font-family:'Segoe UI',Arial,sans-serif;" +
|
|
"font-weight:600;line-height:1;padding:0;margin:0";
|
|
m.textContent = "Bereit";
|
|
document.body.appendChild(m);
|
|
fitReadyText.m = m;
|
|
}
|
|
const refSize = 200;
|
|
m.style.fontSize = refSize + "px";
|
|
const textW = m.offsetWidth || 1;
|
|
const textH = m.offsetHeight || 1;
|
|
|
|
// Skalierungsfaktor so wählen, dass Breite UND Höhe passen
|
|
const scale = Math.min(availW / textW, availH / textH);
|
|
const finalFs = Math.max(20, Math.floor(refSize * scale));
|
|
|
|
cache.w = sw;
|
|
cache.h = sh;
|
|
cache.fs = finalFs;
|
|
statusEl.style.fontSize = finalFs + "px";
|
|
}
|
|
|
|
// Passt die Timer-Zeit (Courier-Monospace) so an, dass sie den Platz
|
|
// zwischen h2 und Status maximal ausnutzt.
|
|
const fitTimeCache = {
|
|
1: { len: 0, lw: 0, lh: 0, fs: 0 },
|
|
2: { len: 0, lw: 0, lh: 0, fs: 0 },
|
|
};
|
|
function fitTimeText(timeEl, laneEl, laneNum) {
|
|
const text = timeEl.textContent;
|
|
const len = text.length;
|
|
const lw = laneEl.clientWidth;
|
|
const lh = laneEl.clientHeight;
|
|
if (!lw || !lh) return;
|
|
|
|
const cache = fitTimeCache[laneNum];
|
|
if (cache.len === len && cache.lw === lw && cache.lh === lh) {
|
|
timeEl.style.fontSize = cache.fs + "px";
|
|
return;
|
|
}
|
|
|
|
let m = fitTimeText.m;
|
|
if (!m) {
|
|
m = document.createElement("span");
|
|
m.style.cssText =
|
|
"position:absolute;visibility:hidden;white-space:nowrap;" +
|
|
"left:-99999px;top:0;font-family:'Courier New',monospace;" +
|
|
"font-weight:bold;line-height:1;padding:0;margin:0";
|
|
document.body.appendChild(m);
|
|
fitTimeText.m = m;
|
|
}
|
|
const refSize = 200;
|
|
m.style.fontSize = refSize + "px";
|
|
m.textContent = text;
|
|
const textW = m.offsetWidth || 1;
|
|
const textH = m.offsetHeight || 1;
|
|
|
|
// Aggressiv: 92% Breite, 62% Höhe (h2 oben + Status unten reserviert)
|
|
const availW = lw * 0.92;
|
|
const availH = lh * 0.62;
|
|
|
|
const scale = Math.min(availW / textW, availH / textH);
|
|
const fs = Math.max(30, Math.floor(refSize * scale));
|
|
|
|
cache.len = len;
|
|
cache.lw = lw;
|
|
cache.lh = lh;
|
|
cache.fs = fs;
|
|
timeEl.style.fontSize = fs + "px";
|
|
}
|
|
|
|
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");
|
|
leaderboardData = await response.json();
|
|
updateLeaderboardDisplay();
|
|
} catch (error) {
|
|
console.error("Fehler beim Laden des Leaderboards:", error);
|
|
}
|
|
}
|
|
|
|
function createEntryElement(entry) {
|
|
const div = document.createElement("div");
|
|
div.className = "leaderboard-entry";
|
|
|
|
const nameSpan = document.createElement("span");
|
|
nameSpan.className = "name";
|
|
nameSpan.textContent = entry.name || "Unbekannt";
|
|
|
|
const timeSpan = document.createElement("span");
|
|
timeSpan.className = "time";
|
|
timeSpan.textContent = entry.timeFormatted;
|
|
|
|
div.appendChild(nameSpan);
|
|
div.appendChild(timeSpan);
|
|
return div;
|
|
}
|
|
|
|
function fillLeaderboardContainer(container, entries) {
|
|
container.innerHTML = "";
|
|
if (!entries || entries.length === 0) {
|
|
const empty = document.createElement("div");
|
|
empty.className = "no-times";
|
|
empty.textContent = "Noch keine Zeiten";
|
|
container.appendChild(empty);
|
|
return;
|
|
}
|
|
entries.forEach((e) => container.appendChild(createEntryElement(e)));
|
|
}
|
|
|
|
function updateLeaderboardDisplay() {
|
|
const box1 = document.getElementById("best-times-1");
|
|
const box2 = document.getElementById("best-times-2");
|
|
const container1 = document.getElementById("leaderboard-container-1");
|
|
const container2 = document.getElementById("leaderboard-container-2");
|
|
const title1 = document.getElementById("lb-title-1");
|
|
const title2 = document.getElementById("lb-title-2");
|
|
|
|
if (!leaderboardData) {
|
|
return;
|
|
}
|
|
|
|
// Reset Layout-Klassen
|
|
box1.classList.remove("best-times--full");
|
|
box2.style.display = "";
|
|
|
|
if (leaderboardData.mode === "different") {
|
|
// Unterschiedliche Lanes: eigene History pro Bahn unter jeder Lane
|
|
title1.textContent = "🏊♀️ Bahn 1 — Letzte Zeiten";
|
|
title2.textContent = "🏊♂️ Bahn 2 — Letzte Zeiten";
|
|
fillLeaderboardContainer(container1, leaderboardData.lane1);
|
|
fillLeaderboardContainer(container2, leaderboardData.lane2);
|
|
} else {
|
|
// Identische Lanes: ein gemeinsames Leaderboard über beide Spalten
|
|
title1.textContent = "🏆 Letzte Zeiten";
|
|
box1.classList.add("best-times--full");
|
|
box2.style.display = "none";
|
|
fillLeaderboardContainer(container1, leaderboardData.entries);
|
|
}
|
|
}
|
|
|
|
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";
|
|
fitReadyText(s1, lane1Element, 1);
|
|
} 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 = "";
|
|
fitTimeText(time1Element, lane1Element, 1);
|
|
}
|
|
}
|
|
|
|
switch (status1) {
|
|
case "ready":
|
|
s1.textContent = "Bereit";
|
|
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";
|
|
fitReadyText(s2, lane2Element, 2);
|
|
} 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 = "";
|
|
fitTimeText(time2Element, lane2Element, 2);
|
|
}
|
|
}
|
|
|
|
switch (status2) {
|
|
case "ready":
|
|
s2.textContent = "Bereit";
|
|
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);
|
|
|
|
window.addEventListener("resize", () => {
|
|
fitReadyCache[1].w = 0;
|
|
fitReadyCache[2].w = 0;
|
|
fitTimeCache[1].lw = 0;
|
|
fitTimeCache[2].lw = 0;
|
|
updateDisplay();
|
|
});
|
|
|
|
// Initial load
|
|
syncFromBackend();
|
|
loadLaneConfig();
|
|
loadLeaderboard();
|
|
|
|
// Leaderboard alle 5 Sekunden aktualisieren
|
|
setInterval(loadLeaderboard, 5000);
|
|
</script>
|
|
</body>
|
|
</html>
|