Add high score

index.html

@@ -39,20 +39,23 @@
             <h2 class="game-overlay-title">Pausing</h2>
 
             <div class="game-overlay-btns">
-
+                <button class="btn primary" id="resumeBtn">Resume</button>
-                <button class="btn primary">Resume</button>
+                <button class="btn danger" id="mainMenuBtn">Main Menu</button>
-                <button class="btn danger">Main Menu</button>
-
             </div>
         </div>
 
         <div class="game-overlay" id="game-over-menu">
+            <h2 class="game-overlay-title">Game Over</h2>
 
+            <div class="game-overlay-btns">
+                <button class="btn primary" id="restartBtn">Restart</button>
+            </div>
         </div>
     </div>
 </div>
 
 <script src="helper-functions.js"></script>
+<script src="sound-manager.js"></script>
 <script src="rect.js"></script>
 <script src="powerup-ball.js"></script>
 <script src="powerup-coin.js"></script>

main.js

@@ -6,12 +6,84 @@ const sounds = {
     gameOver: new SoundManager('assets/game_over.wav'),
 };
 
-let coinCount = 0;
+const containerEl = document.getElementsByClassName('container')[0];
+const highscoreEl = document.getElementById('highscore');
+const coinCountEl = document.getElementById('coin-count');
 
-const container = document.getElementsByClassName('container')[0];
+const resumeBtn = document.getElementById('resumeBtn');
-const game = new Game(container);
+const mainMenuBtn = document.getElementById('mainMenuBtn');
-game.start();
+const restartBtn = document.getElementById('restartBtn');
+
+let game;
+
+let coinCount = 0;
+let highscore = 0;
+
+const unlockedSkins = [];
+let selectedSkin = 0;
+
+function loadFromLocalstorage() {
+    const data = localStorage.getItem('data');
+
+    if (!!data) {
+        const items = data.split(';');
+        setHighScore(parseInt(items[0]));
+        setCoinCount(parseInt(items[1]));
+        selectedSkin = parseInt(items[2]);
+        unlockedSkins.push(...JSON.parse(items[3]));
+    }
+}
+
+function saveToLocalstorage() {
+    let data = highscore + ';' + coinCount + ';' + selectedSkin + ';';
+    data += JSON.stringify(unlockedSkins);
+
+    localStorage.setItem('data', data);
+}
+
+function setHighScore(newHighScore) {
+    highscore = newHighScore;
+
+    highscoreEl.innerText = highscore;
+}
+
+function setCoinCount(newCoinCount) {
+    coinCount = newCoinCount;
+
+    coinCountEl.innerText = coinCount;
+}
+
+loadFromLocalstorage();
 
 function onGameOver() {
+    if (game.roundNumber > highscore) {
+        setHighScore(game.roundNumber);
+    }
 
+    saveToLocalstorage();
+
+    containerEl.classList.add('game-over');
 }
+
+function startGame() {
+    game = new Game(containerEl);
+    game.start();
+}
+
+function stopGame() {
+    game.destroy();
+    game = undefined;
+}
+
+startGame();
+
+restartBtn.addEventListener('click', () => {
+    stopGame();
+    startGame();
+
+    containerEl.classList.remove('game-over');
+});
+
+window.addEventListener('beforeunload', () => {
+    saveToLocalstorage();
+});

style.css

@@ -3,6 +3,7 @@ body {
     height: 100%;
     margin: 0;
     background: #333;
+    overflow: hidden;
 }
 
 * {
@@ -39,7 +40,7 @@ body {
 
 .details {
     display: grid;
-    grid-template-columns: 1fr 2fr 2fr 1fr 1fr;
+    grid-template-columns: 1fr 2fr 2fr 2fr 1fr;
 }
 
 .details h1, .details h3, .details .details-title {
@@ -169,3 +170,24 @@ body {
     width: 100%;
     margin: 16px 0 0;
 }
+
+#score {
+    z-index: 4;
+    transition: .3s;
+}
+
+.game-over #score {
+    font-weight: bold;
+    -webkit-transform: scale(3) translateY(65px);
+    -moz-transform: scale(3) translateY(65px);
+    -ms-transform: scale(3) translateY(65px);
+    -o-transform: scale(3) translateY(65px);
+    transform: scale(3) translateY(65px);
+    text-shadow: 2px 2px rgba(255,255,255,.2), 0 0 20px rgba(245, 155, 0, 0.4);
+    transition: transform .3s, font-weight .3s, text-shadow .3s .3s;
+    color: #f59b00
+}
+
+.game-over .play-btn {
+    display: none;
+}