From efe36a7189462da4eeed0fbb35107035e0860239 Mon Sep 17 00:00:00 2001
From: flifloo <flifloo@gmail.com>
Date: Thu, 25 Mar 2021 09:26:04 +0100
Subject: [PATCH] Game Over modal

---
 index.html          |  3 ++-
 sources/js/index.js | 10 ++++++++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index efd6427..bf4f847 100644
--- a/index.html
+++ b/index.html
@@ -18,7 +18,7 @@
 				</div>
 			</div>
 		</div>
-		<div id="game" style="display:none;">
+		<div id="game">
 			<canvas id="canvas" class="invisible"></canvas>
 		</div>
 		<p id="score"></p>
@@ -29,6 +29,7 @@
 				<h1 class="linear-wipe">GAME OVER</h1>
 				<p>Your score : <span id="gameoverscore">4</span></p>
 			</div>
+		</div>
 		<script type="module"  src="sources/js/index.js"></script>
 	</body>
 </html>
\ No newline at end of file
diff --git a/sources/js/index.js b/sources/js/index.js
index a5760e2..d0fb3e5 100644
--- a/sources/js/index.js
+++ b/sources/js/index.js
@@ -6,6 +6,7 @@ const menuLevel = document.querySelector(".menu-level");
 const gameZone = document.getElementById("game");
 const score = document.getElementById("score");
 const lives = document.getElementById("lives");
+const gameOver = document.getElementById("gameovermodal");
 const audio = new Audio("sources/sound/main.mp3");
 const startSound = new Audio("sources/sound/onStart.mp3");
 const eatSound = new Audio("sources/sound/onEat.mp3");
@@ -13,7 +14,10 @@ const dieSound = new Audio("sources/sound/onDie.mp3");
 const gameOverSound = new Audio("sources/sound/onGameOver.mp3");
 const game = new Game(canvas);
 
+let gameOverModal;
 
+
+audio.loop = true;
 startSound.volume = "0.2";
 
 req.open("GET", "sources/levels.json");
@@ -54,7 +58,8 @@ game.onDie = lives => {
 
 game.onGameOver = (score) => {
     gameOverSound.play();
-    alert(`Game over !\nYour score is: ${score}`);
+    gameOver.querySelector("span").innerText = score;
+    gameOverModal.open();
 };
 
 function loadLevels(levels) {
@@ -76,7 +81,7 @@ function loadGame(data) {
     game.load(data);
     game.start();
     startSound.play();
-};
+}
 
 function updateScore(s) {
     score.innerText = s;
@@ -89,6 +94,7 @@ function updateLives(l) {
 
 document.addEventListener('DOMContentLoaded', function() {
     M.AutoInit();
+    gameOverModal = M.Modal.getInstance(gameOver);
     canvas.width  = gameZone.clientWidth;
     canvas.height = gameZone.clientHeight;
 });