From c1204aae32672b27251b3e6d88210f9b3bf2d5a0 Mon Sep 17 00:00:00 2001
From: flifloo <flifloo@gmail.com>
Date: Fri, 26 Mar 2021 22:49:00 +0100
Subject: [PATCH] Setup score & lives display

---
 index.html            | 18 +++++++++++++-----
 sources/css/style.css |  6 +++++-
 sources/js/index.js   | 26 ++++++++++++++------------
 3 files changed, 32 insertions(+), 18 deletions(-)
diff --git a/index.html b/index.html
index ec9cd45..54484c2 100644
--- a/index.html
+++ b/index.html
@@ -8,7 +8,17 @@
 		<link rel="stylesheet" type="text/css" href="sources/css/style.css">
 	</head>
 	<body>
-		<h1 class="linear-wipe">KyFlo Snake</h1>
+		<div class="row">
+			<div class="col s2">
+				<p class="stats" id="score">Score: </p>
+				<p class="stats" id="lives">Lives: </p>
+			</div>
+			<div class="col s8">
+				<h1 class="linear-wipe">KyFlo Snake</h1>
+			</div>
+			<div class="col s2">
+			</div>
+		</div>
 		<div class="row" id="menu">
 			<div class="col s6 offset-s3">
 				<div class="col s10 offset-s1" style="padding: 0">
@@ -18,11 +28,9 @@
 				</div>
 			</div>
 		</div>
-		<div id="game">
-			<canvas id="canvas" class="invisible"></canvas>
+		<div id="game" class="invisible">
+			<canvas id="canvas"></canvas>
 		</div>
-		<p id="score"></p>
-		<p id="lives"></p>
 
 		<div id="gameovermodal" class="modal">
 			<div class="modal-content">
diff --git a/sources/css/style.css b/sources/css/style.css
index 789e86c..caf35ec 100644
--- a/sources/css/style.css
+++ b/sources/css/style.css
@@ -21,7 +21,7 @@ body{
     backdrop-filter: blur(5px);
 }
 
-h1{
+h1, .stats {
     font-family: 'Press Start 2P', cursive;
     text-align: center;
     color: yellow;
@@ -29,6 +29,10 @@ h1{
     padding-top: 80px;
 }
 
+.stats {
+    padding-top: 2vh;
+}
+
 #menu{
     margin: 0;
     margin-top: 150px;
diff --git a/sources/js/index.js b/sources/js/index.js
index 556d520..c11478a 100644
--- a/sources/js/index.js
+++ b/sources/js/index.js
@@ -21,11 +21,11 @@ let gameOverModal;
 
 
 audio.loop = true;
-audio.volume = "1";
-startSound.volume = "0.2";
-eatSound.volume = "0.2";
-dieSound.volume = "0.2";
-gameOverSound.volume = "0.2";
+audio.volume = 0.1;
+startSound.volume = 0.2;
+eatSound.volume = 0.2;
+dieSound.volume = 0.2;
+gameOverSound.volume = 0.2;
 
 req.open("GET", "sources/levels.json");
 req.onerror = () => console.error("Fail to load XML request");
@@ -45,12 +45,14 @@ game.onStart = () => {
     updateLives(game.lives);
     updateScore(game.score);
     menu.classList.add("invisible");
-    canvas.classList.remove("invisible");
+    gameZone.classList.remove("invisible");
+    canvas.width  = gameZone.clientWidth;
+    canvas.height = gameZone.clientHeight;
 };
 
 game.onStop = () => {
     menu.classList.remove("invisible");
-    canvas.classList.add("invisible");
+    gameZone.classList.add("invisible");
 };
 
 game.onEat = (score) => {
@@ -59,14 +61,17 @@ game.onEat = (score) => {
 };
 
 game.onDie = lives => {
+    dieSound.currentTime = 0;
     dieSound.play();
     updateLives(lives);
 };
 
 game.onGameOver = (score) => {
+    dieSound.pause();
     gameOverSound.play();
     gameOver.querySelector("span").innerText = score;
     gameOverModal.open();
+    updateLives(0);
 
     if (score > 0) {
         scores.push({name: playerName.value, score: score});
@@ -96,11 +101,11 @@ function loadGame(data) {
 }
 
 function updateScore(s) {
-    score.innerText = s;
+    score.innerText = `Score: ${s}`;
 }
 
 function updateLives(l) {
-    lives.innerText = l;
+    lives.innerText = `Lives: ${l}`;
 }
 
 function reloadScoreBoard() {
@@ -124,12 +129,9 @@ function reloadScoreBoard() {
 document.addEventListener('DOMContentLoaded', function() {
     M.AutoInit();
     gameOverModal = M.Modal.getInstance(gameOver);
-    canvas.width  = gameZone.clientWidth;
-    canvas.height = gameZone.clientHeight;
 });
 
 audio.addEventListener("canplaythrough", () => {
-    audio.volume = 0.1;
     audio.play();
 });
 
