Create page Ranks

client/public/css/style.css

@@ -236,6 +236,53 @@ li{
     cursor: pointer;
 }
 
+.saiyans{
+    display: none; /*DISPLAY*/
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    height: 100vh;
+    min-height: 600px;
+    background-image: url('../images/broly.jpg');
+    background-size: cover;
+    background-position: center;
+}
+
+.classement-container{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 80%;
+}
+
+.classement{
+    width: 40%;
+    height: 90%;
+    background-color: rgba(0, 0, 0, 0.644);
+    overflow-y: scroll;
+}
+@media screen and (max-width: 950px) {
+    .classement{
+        width: 60%;
+    }
+}
+@media screen and (max-width: 400px) {
+    .classement{
+        width: 80%;
+    }
+}
+.player-classement{
+    display: flex;
+    justify-content: space-between;
+    color: #fff;
+    font-size: 30px;
+    font-family: 'Karantina', cursive;
+    padding: 20px;
+    width: 100%;
+    border-bottom: 1px solid#fff;
+}
+
 .map{
     display: none;
     background-size: cover;

client/public/index.html

@@ -19,7 +19,7 @@
             <img class="goku" src="./images/goku.png" />
             <ul>
                 <li><a href="/play"><h1>PLAY</h1></a></li>
-                <li><a href="/settings"><h1>SETTINGS</h1></a></li>
+                <li><a href="/saiyans"><h1>SAIYANS</h1></a></li>
                 <li><a href="/credits"><h1>CREDITS</h1></a></li>
             </ul>
         </div>
@@ -53,6 +53,19 @@
             <button href="/map" class="start-button">START</button>
         </div>
     </section>
+    <section class="saiyans">
+        <div class="play-top">
+            <a href="/"><h1 class="exit">EXIT</h1></a>
+        </div>
+        <div class="classement-container">
+            <div class="classement">
+                <div class="player-classement">
+                    <h1>biceps</h1>
+                    <h1>score</h1>
+                </div>
+            </div>
+        </div>
+    </section>
     <canvas class="map"></canvas>
 </body>
 </html>
\ No newline at end of file

common/index.ts

+import { response } from "express";
 import Main from "./main";
 import Router from "./Router";
 
@@ -6,6 +7,7 @@ const routes = [
   { path: "/", page: "home" },
   { path: "/play", page: "play" },
   { path: "/map", page: "map" },
+  { path: "/saiyans", page: "saiyans" },
 ];
 let router = new Router(routes);
 
@@ -24,6 +26,33 @@ for (let i = 0; i < links.length; i++) {
   });
 }
 
+interface Classement {
+  id: number;
+  name: string;
+  score: number;
+}
+
+fetch("../classement.json")
+  .then((response) => response.json())
+  .then((responseData) => {
+    getClassement(responseData);
+  });
+
+const classement = document.querySelector(".classement");
+
+function getClassement(ranks: Classement[]) {
+  let html = "";
+  ranks.forEach((rank) => {
+    html += `<div class="player-classement">
+                <span>${rank.name}</span>
+                <span>score: ${rank.score}</span>
+            </div>`;
+  });
+  if (classement) {
+    classement.innerHTML = html;
+  }
+}
+
 const inputName = document.querySelector(".name");
 const slides = document.querySelectorAll(".slide");
 

common/main.ts

@@ -140,12 +140,6 @@ const Main = (playerName: string, playerCharacter: string) => {
     });
   }
 
-  interface Classement {
-    id: number;
-    name: string;
-    score: number;
-  }
-
   async function myFunction() {
     try {
       const userId = (await getUserId()) as number;