reptil1990/AquaMasterMQTT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 22 Wiki Activity

Add Local leaderboard, CSS optimiztion

Browse Source
This commit is contained in:
Carsten Graf
2025-09-23 20:07:35 +02:00
parent 8fac847a75
commit 5ca67d8804
8 changed files with 849 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
data/index.html
View File

@@ -24,6 +24,7 @@
</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">
@@ -73,33 +74,7 @@
<div class="best-times">
<h3>🏆 Lokales Leaderboard</h3>
<div id="leaderboard-container">
<div class="leaderboard-entry">
<span class="rank">1.</span>
<span class="name">Max Mustermann</span>
<span class="time">23.45</span>
</div>
<div class="leaderboard-entry">
<span class="rank">2.</span>
<span class="name">Anna Schmidt</span>
<span class="time">24.67</span>
</div>
<div class="leaderboard-entry">
<span class="rank">3.</span>
<span class="name">Tom Weber</span>
<span class="time">25.89</span>
</div>
<div class="leaderboard-entry">
<span class="rank">4.</span>
<span class="name">Lisa Müller</span>
<span class="time">26.12</span>
</div>
<div class="leaderboard-entry">
<span class="rank">5.</span>
<span class="name">Paul Fischer</span>
<span class="time">27.34</span>
</div>
</div>
<div id="leaderboard-container"></div>
</div>
<script>
@@ -396,10 +371,25 @@
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 + ".";
@@ -415,8 +405,19 @@
entryDiv.appendChild(rankSpan);
entryDiv.appendChild(nameSpan);
entryDiv.appendChild(timeSpan);
container.appendChild(entryDiv);
// 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() {
@@ -452,7 +453,7 @@
s1.textContent = "Bereit für den Start!";
break;
case "running":
s1.textContent = "Läuft - Du schaffst das!";
s1.textContent = "Läuft - Gib alles!";
break;
case "finished":
s1.textContent = "Geschafft!";
@@ -478,7 +479,7 @@
s2.textContent = "Bereit für den Start!";
break;
case "running":
s2.textContent = "Läuft - Du schaffst das!";
s2.textContent = "Läuft - Gib alles!";
break;
case "finished":
s2.textContent = "Geschafft!";