Version 1.0: Funktioniere Bestenliste und sonst auch alles Funktionell

frontend/highscores/index.html

@@ -32,13 +32,11 @@
                             </th>
                         </thead>
                     </table>
-                    <div id="siteSelector">
-                        <label for="site">Seite</label>
-                        <select id="site" name="site">
-                          <option>1</option>
-                          <option>2</option>
-                        </select>
-                    </div>
+                </div>
+                <div id="countSelector">
+                    <label for="count">Seite:</label>
+                    <select id="count" name="count">
+                    </select>
                 </div>
             </div>
             <div class="container">

frontend/highscores/index.js

@@ -1,26 +1,50 @@
 class HighScoreLoader{
     constructor(){
         this.table = document.getElementById("highscoreTable");
-
         this.data = undefined;
 
+        // Jetzigen Count finden
+        const urlParams = new URLSearchParams(window.location.search);
+        this.count = parseInt(urlParams.get("count")) || 1;
+
+        this.countSelector = document.getElementById("count");
+
         this.setup();
     }
 
     async setup(){
-        // const response = await fetch("/api/highscore");
-        // this.data = await response.json();
+        // Load all Data
+        const response = await fetch(`/api/highscore/split/${this.count}`);
+        this.data = await response.json();
 
-        // for(const score of this.data.scores){
-        //     this.table.innerHTML += `
-        //         <tr>
-        //            <td>${score.rang}</td>
-        //            <td>${score.user1.username}</td>
-        //            <td>${score.user2.username}</td>
-        //            <td>${score.score}</td>
-        //         </tr>
-        //     `;
-        // }
+        for(const score of this.data.scores){
+            this.table.innerHTML += `
+                <tr>
+                   <td>${score.rang}</td>
+                   <td>${score.user1.username}</td>
+                   <td>${score.user2.username}</td>
+                   <td>${score.score}</td>
+                </tr>
+            `;
+        }
+
+        // Lade alle options
+        const response2 = await fetch("/api/highscore/count");
+        const data2 = await response2.json();
+
+        for(let i = 1; i <= data2.count; i++){
+            this.countSelector.innerHTML += `
+                <option>${i}</option>
+            `
+        }
+
+        this.countSelector.addEventListener("change", (e) => {
+            const targetCount = e.target.value;
+
+            window.location.href = `/highscores/?count=${targetCount}`;
+        })
+
+        this.countSelector.value = this.count;
     }
 }
 

frontend/highscores/style.css

@@ -67,10 +67,16 @@ tr td:last-child {
     border-left: 3px solid rgba(255, 255, 255, 0.6);
 }
 
-#siteSelector{
+#countSelector{
     display: flex;
     align-items: center;
     justify-content: center;
 }
 
- 
+#countSelector > * {
+    margin: 10px;
+}
+
+.navButtons{
+    flex-direction: column;
+}