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

2
frontend/dashboard/lobby/style.css
View File

@@ -26,7 +26,7 @@ button {
align-items: center; align-items: center;
height: 20%; height: 20%;
background-color: rgb(124, 124, 124); background-color: rgb(63, 63, 63);
border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0;
} }

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);
}

14
frontend/index.html
View File

@@ -26,6 +26,20 @@
Anleitung Anleitung
</div> </div>
</button> </button>
<button id="highScoreBtn">
<div class="buttonIcon">
<svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#FFFFFF"><path
d="M292-120v-66.67h154.67v-140q-52.34-11-93.17-44.83T296-456q-74.33-8.33-125.17-61.83Q120-571.33 120-645.33V
-688q0-27.67 19.5-47.17t47.17-19.5h96V-840h394.66v85.33h96q27.67 0 47.17 19.5T840-688v42.67q0 74-50.83 127.5
Q738.33-464.33 664-456q-16.67 50.67-57.5 84.5t-93.17 44.83v140H668V-120H292Zm-9.33-406.67V-688h-96v42.67q0
42.66 27 75.16t69 43.5ZM480-390q54.67 0 92.67-38.33 38-38.34 38-93v-252H349.33v252q0
54.66 38 93Q425.33-390 480-390Zm197.33-136.67q42-11 69-43.5t27-75.16V-688h-96v161.33ZM480-582Z"/>
</svg>
</div>
<div class="buttonText">
Bestenliste
</div>
</button>
<button id="loginBtn"> <button id="loginBtn">
<div class="buttonIcon"> <div class="buttonIcon">
<svg xmlns="http://www.w3.org/2000/svg" height="35px" viewBox="0 -960 960 960" width="35px" <svg xmlns="http://www.w3.org/2000/svg" height="35px" viewBox="0 -960 960 960" width="35px"

3
frontend/scripts/ButtonManager.js
View File

@@ -8,7 +8,8 @@ class ButtonManager {
{ id: "lobbyBtn", route: "/dashboard/lobby" }, { id: "lobbyBtn", route: "/dashboard/lobby" },
{ id: "accountBtn", route: "/dashboard/account" }, { id: "accountBtn", route: "/dashboard/account" },
{ id: "logoutBtn", route: "/api/account/logout" }, { id: "logoutBtn", route: "/api/account/logout" },
{ id: "tutorialBtn", route: "https://www.youtube.com/watch?v=1fkV5rB13jQ" } { id: "tutorialBtn", route: "https://www.youtube.com/watch?v=1fkV5rB13jQ" },
{ id: "highScoreBtn", route: "/highscores"}
]; ];
this.addEventListener(); this.addEventListener();

4
frontend/style.css
View File

@@ -7,5 +7,9 @@
} }
#dashboardBtn{ #dashboardBtn{
background-color: rgb(103, 11, 156);
}
#highScoreBtn{
background-color: orange; background-color: orange;
} }