add Meine Scores

index.html

@@ -135,6 +135,7 @@
     <script src="assets/src/service/challenge-service.js"></script>
     <script src="js/login.js"></script>
     <script src="js/leaderboard.js"></script>
+    <script src="js/scores.js"></script>
     <script src="js/messages.js?v=challenge-flow-20260525"></script>
     <!--Navigation Script -->
     <script src="js/play.js?v=challenge-flow-20260525"></script>

js/navigation.js

@@ -26,6 +26,9 @@ document.addEventListener("DOMContentLoaded", () => {
                 if (page === "leaderboard" && typeof window.initLeaderboardPage === "function") {
                     window.initLeaderboardPage();
                 }
+                if (page === "scores" && typeof window.initScoresPage === "function") {
+                    window.initScoresPage();
+                }
                 if (page === "play" && typeof window.initPlayPage === "function") {
                     window.initPlayPage();
                 }

js/scores.js

@@ -0,0 +1,151 @@
+(function () {
+  function formatTime(seconds) {
+    if (typeof seconds !== "number" || Number.isNaN(seconds)) {
+      return "-";
+    }
+
+    const minutes = Math.floor(seconds / 60);
+    const remainingSeconds = Math.floor(seconds % 60);
+    return `${minutes}:${String(remainingSeconds).padStart(2, "0")}`;
+  }
+
+  function normalizeUsername(username) {
+    return String(username ?? "").trim().toLowerCase();
+  }
+
+  function getLoggedInAuth() {
+    if (!window.AppAuth || typeof window.AppAuth.getAuth !== "function") {
+      return null;
+    }
+
+    const auth = window.AppAuth.getAuth();
+    if (!auth || !auth.username || !auth.password) {
+      return null;
+    }
+
+    return auth;
+  }
+
+  function getScoreService() {
+    if (!window.config || !window.ScoreService) {
+      return null;
+    }
+
+    return new window.ScoreService(window.config);
+  }
+
+  function getDisplayedRank(entry, index) {
+    const place = Number(entry?.place);
+    if (!Number.isNaN(place) && place > 0) {
+      return place;
+    }
+
+    return index + 1;
+  }
+
+  function setFeedback(message, type) {
+    const feedback = document.getElementById("scores-feedback");
+    if (!feedback) {
+      return;
+    }
+
+    feedback.className = "alert alert-" + type + " mb-4";
+    feedback.textContent = message;
+    feedback.classList.remove("d-none");
+  }
+
+  function renderScores(entries) {
+    const tableBody = document.getElementById("scores-body");
+    if (!tableBody) {
+      return;
+    }
+
+    tableBody.innerHTML = "";
+
+    if (!Array.isArray(entries) || entries.length === 0) {
+      tableBody.innerHTML = '<tr><td colspan="4" class="text-center text-muted py-4">Keine eigenen Scores gefunden.</td></tr>';
+      return;
+    }
+
+    const sortedEntries = entries.slice().sort((a, b) => {
+      const placeA = Number(a?.place);
+      const placeB = Number(b?.place);
+      if (!Number.isNaN(placeA) && !Number.isNaN(placeB) && placeA !== placeB) {
+        return placeA - placeB;
+      }
+
+      const scoreA = Number(a?.score ?? 0);
+      const scoreB = Number(b?.score ?? 0);
+      if (scoreB !== scoreA) {
+        return scoreB - scoreA;
+      }
+
+      const timeA = Number(a?.time ?? Number.MAX_SAFE_INTEGER);
+      const timeB = Number(b?.time ?? Number.MAX_SAFE_INTEGER);
+      return timeA - timeB;
+    });
+
+    sortedEntries.forEach((entry, index) => {
+      const row = document.createElement("tr");
+      row.innerHTML = `
+        <td>${getDisplayedRank(entry, index)}</td>
+        <td>${entry.username ?? "-"}</td>
+        <td>${formatTime(entry.time)} min</td>
+        <td>${entry.score ?? "-"}</td>
+      `;
+      tableBody.appendChild(row);
+    });
+  }
+
+  async function loadMyScores() {
+    const auth = getLoggedInAuth();
+    if (!auth || !auth.username) {
+      setFeedback("Bitte logge dich ein, um deine Scores zu sehen.", "warning");
+      renderScores([]);
+      return;
+    }
+
+    const scoreService = getScoreService();
+    if (!scoreService) {
+      setFeedback("Score-Service konnte nicht geladen werden.", "danger");
+      renderScores([]);
+      return;
+    }
+
+    try {
+      const result = await scoreService.getScoreByName(auth.username);
+
+      if (!result.ok || !Array.isArray(result.body)) {
+        setFeedback("Deine Scores konnten nicht geladen werden.", "danger");
+        renderScores([]);
+        return;
+      }
+
+      const ownScores = result.body.filter((entry) => {
+        if (!entry || !entry.username) {
+          return false;
+        }
+
+        return normalizeUsername(entry.username) === normalizeUsername(auth.username);
+      });
+
+      if (ownScores.length === 0) {
+        setFeedback("Für deinen Account wurden noch keine Scores gefunden.", "info");
+      }
+
+      renderScores(ownScores);
+    } catch (error) {
+      console.error("Fehler beim Laden der eigenen Scores:", error);
+      setFeedback("Deine Scores konnten nicht geladen werden.", "danger");
+      renderScores([]);
+    }
+  }
+
+  window.initScoresPage = function initScoresPage() {
+    loadMyScores().catch((error) => {
+      console.error("Fehler beim Initialisieren der Scores-Seite:", error);
+      setFeedback("Deine Scores konnten nicht geladen werden.", "danger");
+      renderScores([]);
+    });
+  };
+})();

pages/scores.html

@@ -1,6 +1,25 @@
 <div class="card">
     <h2 class="mb-3">Meine Scores</h2>
 
-    <p class="mt-2">Hier kannst du deine bisherigen Scores einsehen.</p>
+    <p class="mt-2 mb-4">Hier siehst du alle gespeicherten Scores deines Accounts.</p>
-    <!-- Hier könnte eine Score-Tabelle oder ähnliches eingebunden werden -->
+
+    <div id="scores-feedback" class="alert d-none mb-4" role="alert"></div>
+
+    <div class="table-responsive">
+        <table class="table leaderboard-table mb-0">
+            <thead>
+                <tr>
+                    <th scope="col">Rang</th>
+                    <th scope="col">User</th>
+                    <th scope="col">time</th>
+                    <th scope="col">Score</th>
+                </tr>
+            </thead>
+            <tbody id="scores-body">
+                <tr>
+                    <td colspan="4" class="text-center text-muted py-4">Lade Scores ...</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
 </div>