jhim/DoubleSnake
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bestenliste hinzugefügt

Browse Source
This commit is contained in:
Jonas Himmelberg
2025-04-29 12:55:54 +02:00
parent 08a8f567c4
commit dad3d8826d
7 changed files with 176 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
frontend/highscores/index.html Normal file
View File

@@ -0,0 +1,60 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bestenliste</title>
<link rel="stylesheet" href="../../style/generalStyle.css">
<link rel="stylesheet" href="./style.css">
<link rel="icon" type="image/png" href="../../assets/Logo.png">
</head>
<body>
<div class="container menu">
<img class="logo" src="../assets/Labels/Bestenliste.png" alt="Lobby Logo">
<main class="container buttonMenu">
<div class="container navButtons" id="mainDiv">
<div id="tableWrapper">
<table id="highscoreTable">
<thead>
<th>
<h2>Platz</h2>
</th>
<th>
<h2>Spieler 1</h2>
</th>
<th>
<h2>Spieler 2</h2>
</th>
<th>
<h2>Score</h2>
</th>
</thead>
</table>
</div>
</div>
<div class="container">
<button id="homeBtn">
<div class="buttonIcon">
<svg xmlns="http://www.w3.org/2000/svg" height="35px" viewBox="0 -960 960 960" width="35px"
fill="#FFFFFF">
<path
d="M200-120q-33 0-56.5-23.5T120-200v-160h80v160h560v-560H200v160h-80v-160q0-33 23.5-56.5T200-840h560q33 0
56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm220-160-56-58 102-102H120v-80h346L364-622l56-58 200 200-200
200Z" />
</svg>
</div>
<div class="buttonText">
Verlassen
</div>
</button>
</div>
</main>
</div>
</body>
<script src="../scripts/ButtonManager.js"></script>
<script src="./index.js"></script>
</html>

27
frontend/highscores/index.js Normal file
View File

@@ -0,0 +1,27 @@
class HighScoreLoader{
constructor(){
this.table = document.getElementById("highscoreTable");
this.data = undefined;
this.setup();
}
async setup(){
const response = await fetch("/api/highscore");
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>
`
}
}
}
new HighScoreLoader();

68
frontend/highscores/style.css Normal file
View File

@@ -0,0 +1,68 @@
.buttonMenu{
height: 65vh;
}
#tableWrapper{
border: 3px solid rgba(255, 255, 255, 0.6);
border-radius: 15px;
max-height: 50vh;
overflow: auto;
}
table{
border-collapse: collapse;
border-radius: 15px;
overflow: hidden;
text-align: center;
}
tr, thead, th, td{
border: none;
}
th, td{
padding-left: 40px;
padding-right: 40px;
height: 50px;
}
thead{
background-color: rgb(63, 63, 63);
}
tr{
background-color: rgb(63, 63, 63, 0.5);
}
tr td:first-child {
color: rgb(255, 223, 0);
font-size: 20px;
}
thead th:first-child {
border-right: 3px solid rgba(255, 255, 255, 0.6);
}
thead th:nth-child(2),
thead th:nth-child(3) {
border-left: 3px solid rgba(255, 255, 255, 0.6);
border-right: 3px solid rgba(255, 255, 255, 0.6);
}
thead th:last-child {
border-left: 3px solid rgba(255, 255, 255, 0.6);
}
tr td:first-child {
border-right: 3px solid rgba(255, 255, 255, 0.6);
}
tr td:nth-child(2),
tr td:nth-child(3) {
border-left: 3px solid rgba(255, 255, 255, 0.6);
border-right: 3px solid rgba(255, 255, 255, 0.6);
}
tr td:last-child {
border-left: 3px solid rgba(255, 255, 255, 0.6);
}