203 lines
5.5 KiB
HTML
203 lines
5.5 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>
|
|
<a href="/about" class="logo" title="Über NinjaCross Timer">
|
|
<img src="/pictures/logo.png" alt="NinjaCross Logo" />
|
|
</a>
|
|
|
|
<a href="/settings" class="settings-btn">⚙️</a>
|
|
|
|
<div class="header">
|
|
<h1>🏊♀️ NinjaCross Timer</h1>
|
|
<p>Professioneller Zeitmesser für Ninjacross Wettkämpfe</p>
|
|
</div>
|
|
|
|
<div id="learning-display" class="learning-mode" style="display: none">
|
|
<h3>📚 Lernmodus aktiv</h3>
|
|
<p>
|
|
Bitte drücken Sie 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="time1" class="time-display">00.00</div>
|
|
<div id="status1" class="status ready">Bereit</div>
|
|
</div>
|
|
|
|
<div class="lane">
|
|
<div id="name2" class="swimmer-name" style="display: none;"></div>
|
|
<h2>🏊♂️ Bahn 2</h2>
|
|
<div id="time2" class="time-display">00.00</div>
|
|
<div id="status2" class="status ready">Bereit</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="best-times">
|
|
<h3>🏆 Beste Zeiten des Tages</h3>
|
|
<div class="best-time-row">
|
|
<span>Bahn 1:</span>
|
|
<span id="best1">--.-</span>
|
|
</div>
|
|
<div class="best-time-row">
|
|
<span>Bahn 2:</span>
|
|
<span id="best2">--.-</span>
|
|
</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 = "";
|
|
const ws = new WebSocket(`ws://${window.location.host}/ws`);
|
|
|
|
// Handle WebSocket events
|
|
ws.onopen = () => {
|
|
console.log("WebSocket connected");
|
|
};
|
|
ws.onclose = () => {
|
|
console.log("WebSocket disconnected");
|
|
};
|
|
|
|
ws.onmessage = (event) => {
|
|
console.log("WebSocket message received:", event.data);
|
|
|
|
try {
|
|
const data = JSON.parse(event.data);
|
|
|
|
if (data.firstname && data.lastname && data.lane) {
|
|
if (data.lane === "start1") {
|
|
name1 = `${data.firstname} ${data.lastname}`;
|
|
} else if (data.lane === "start2") {
|
|
name2 = `${data.firstname} ${data.lastname}`;
|
|
}
|
|
|
|
updateDisplay();
|
|
}
|
|
} catch (error) {
|
|
console.error("Error processing WebSocket message:", error);
|
|
}
|
|
};
|
|
|
|
function formatTime(seconds) {
|
|
if (seconds === 0) return "00.00";
|
|
return seconds.toFixed(2);
|
|
}
|
|
|
|
function updateDisplay() {
|
|
// Calculate elapsed time since last sync
|
|
const now = Date.now();
|
|
let display1 = timer1;
|
|
let display2 = timer2;
|
|
|
|
if (status1 === "running") {
|
|
display1 += (now - lastSync) / 1000;
|
|
}
|
|
if (status2 === "running") {
|
|
display2 += (now - lastSync) / 1000;
|
|
}
|
|
|
|
document.getElementById("time1").textContent = formatTime(display1);
|
|
const s1 = document.getElementById("status1");
|
|
s1.className = `status ${status1}`;
|
|
s1.textContent =
|
|
status1 === "ready"
|
|
? "Bereit"
|
|
: status1 === "running"
|
|
? "Läuft..."
|
|
: "Beendet";
|
|
|
|
document.getElementById("time2").textContent = formatTime(display2);
|
|
const s2 = document.getElementById("status2");
|
|
s2.className = `status ${status2}`;
|
|
s2.textContent =
|
|
status2 === "ready"
|
|
? "Bereit"
|
|
: status2 === "running"
|
|
? "Läuft..."
|
|
: "Beendet";
|
|
|
|
document.getElementById("best1").textContent =
|
|
best1 > 0 ? formatTime(best1) + "s" : "--.-";
|
|
document.getElementById("best2").textContent =
|
|
best2 > 0 ? formatTime(best2) + "s" : "--.-";
|
|
|
|
// Namen anzeigen/verstecken - verbesserte Logik
|
|
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 der Daten:", error)
|
|
);
|
|
}
|
|
|
|
// Sync with backend every 1 second
|
|
setInterval(syncFromBackend, 1000);
|
|
|
|
// Smooth update every 50ms
|
|
setInterval(updateDisplay, 50);
|
|
|
|
// Initial load
|
|
syncFromBackend();
|
|
</script>
|
|
</body>
|
|
</html> |