Implement Score Board

index.html

@@ -27,20 +27,12 @@
 		<div id="gameovermodal" class="modal">
 			<div class="modal-content">
 				<h1 class="linear-wipe">GAME OVER</h1>
-				<p>Your score : <span id="gameoverscore">4</span></p>
+				<p>Your score : <span id="gameoverscore"></span></p>
 			</div>
 		</div>
 
 		<div id="scoreboard" class="close">
 			<h1>Scoreboard</h1>
-			<div class="row-score">
-				<p class="player-score">12</p> 
-				<p class="pseudo">Kybo_</p>
-			</div>
-			<div class="row-score">
-				<p class="player-score">12</p>
-				<p class="pseudo">Kybo_</p>
-			</div>
 		</div>
 
 		<script type="module"  src="sources/js/index.js"></script>

sources/js/Game.js

@@ -132,6 +132,7 @@ export class Game {
                     if (this.onGameOver && typeof this.onGameOver === "function")
                         this.onGameOver(this.score);
                     this.stop();
+                    this.score = 0;
                 } else {
                     if (this.onDie && typeof this.onDie === "function")
                         this.onDie(this.lives);

sources/js/index.js

@@ -7,12 +7,15 @@ const gameZone = document.getElementById("game");
 const score = document.getElementById("score");
 const lives = document.getElementById("lives");
 const gameOver = document.getElementById("gameovermodal");
+const scoreBoard = document.getElementById("scoreboard");
+const playerName = document.querySelector("input");
 const audio = new Audio("sources/sound/main.mp3");
 const startSound = new Audio("sources/sound/onStart.mp3");
 const eatSound = new Audio("sources/sound/onEat.mp3");
 const dieSound = new Audio("sources/sound/onDie.mp3");
 const gameOverSound = new Audio("sources/sound/onGameOver.mp3");
 const game = new Game(canvas);
+const scores = [];
 
 let gameOverModal;
 
@@ -60,6 +63,11 @@ game.onGameOver = (score) => {
     gameOverSound.play();
     gameOver.querySelector("span").innerText = score;
     gameOverModal.open();
+
+    if (score > 0) {
+        scores.push({name: playerName.value, score: score});
+        reloadScoreBoard();
+    }
 };
 
 function loadLevels(levels) {
@@ -91,6 +99,23 @@ function updateLives(l) {
     lives.innerText = l;
 }
 
+function reloadScoreBoard() {
+    scoreBoard.querySelectorAll("div").forEach(d => d.remove());
+    for (const s of scores.sort(s => s.score).reverse()) {
+        const e = document.createElement("div");
+        e.classList.add("row-score");
+        const p1 = document.createElement("p");
+        p1.classList.add("player-score");
+        p1.innerText = s.score;
+        e.insertAdjacentElement("beforeend", p1);
+        const p2 = document.createElement("p");
+        p2.classList.add("pseudo");
+        p2.innerText = s.name ? s.name : "Unknown";
+        e.insertAdjacentElement("beforeend", p2);
+        scoreBoard.insertAdjacentElement("beforeend", e);
+    }
+}
+
 
 document.addEventListener('DOMContentLoaded', function() {
     M.AutoInit();
@@ -103,3 +128,19 @@ audio.addEventListener("canplaythrough", () => {
     audio.volume = 0.1;
     audio.play();
 });
+
+scoreBoard.addEventListener("mousemove", () => {
+    scoreBoard.classList.remove("close");
+});
+
+scoreBoard.addEventListener("mouseout", () => {
+    scoreBoard.classList.add("close");
+});
+
+playerName.addEventListener("focusin", () => {
+    playerName.placeholder = "";
+});
+
+playerName.addEventListener("focusout", () => {
+    playerName.placeholder = "Choose a nickname :";
+});