diff --git a/client/public/css/style.css b/client/public/css/style.css index ad7f04a95019ae05f6e04f85344d5c4140a67af0..7ce59c9bad984651696295b834f8e35d866bd11d 100644 --- a/client/public/css/style.css +++ b/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; diff --git a/client/public/images/broly.jpg b/client/public/images/broly.jpg new file mode 100644 index 0000000000000000000000000000000000000000..816855868a08b4fe3640fbdd96cefa3b17f5140c Binary files /dev/null and b/client/public/images/broly.jpg differ diff --git a/client/public/index.html b/client/public/index.html index ad1fc5f224e8e8def63d8fe4e698bad4962d5885..347c056c7c5ffef0d5c3828513c1c3ded40f3747 100644 --- a/client/public/index.html +++ b/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 diff --git a/common/index.ts b/common/index.ts index c1fdb271c6b94134382e3372d23c5e31c68fb947..9ccddedf1f91f8b8193fb745b622ef913a561c24 100644 --- a/common/index.ts +++ b/common/index.ts @@ -1,3 +1,4 @@ +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"); diff --git a/common/main.ts b/common/main.ts index 403fcd69c550736f41ce857ed25fbb9c54e4d0af..02da622eaf3ba864b9398d80b0aa483a37cf2b4a 100644 --- a/common/main.ts +++ b/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;