Add restart button

game.js

@@ -8,6 +8,10 @@ class Game {
                         000
                     </span>
                 </div>
+                
+                <div class="restart">
+                    <button id="restart-btn">Restart</button>
+                </div>
 
                 <div class="stat-container right">
                     <span id="time">
@@ -24,6 +28,8 @@ class Game {
         </div>`.toDOM();
         document.body.appendChild(elements);
 
+        this.container = document.getElementsByClassName('main-container')[0];
+
         this.canvas = document.getElementById('minesweeper-game');
         this.ctx = this.canvas.getContext('2d');
 
@@ -36,6 +42,7 @@ class Game {
         this.statsContainer = document.getElementById('game-stats');
         this.timeEl = document.getElementById('time');
         this.bombsEl = document.getElementById('bombs');
+        this.restartButton = document.getElementById('restart-btn');
 
         this.fieldSize = {x: 16, y: 12};
         this.bombCount = 25;
@@ -67,6 +74,10 @@ class Game {
         this.drawGrid(false);
     }
 
+    cancelGame() {
+        this.container.classList.add('popAway');
+    }
+
     calcScaling() {
         const width = Math.ceil(this.fieldSize.x * this.zoomFactor) + 1;
         const height = Math.ceil(this.fieldSize.y * this.zoomFactor) + 1;
@@ -117,6 +128,10 @@ class Game {
         return count;
     }
 
+    destroy() {
+        this.container.remove();
+    }
+
     drawGrid(animations = true) {
         this.ctx.clearRect(0, 0, this.width, this.height);
 
@@ -383,6 +398,10 @@ class Game {
         window.addEventListener("resize", () => {
             this.scaleCanvas();
         });
+
+        this.restartButton.addEventListener('click', () => {
+            restartGame();
+        });
     }
 
     /**
@@ -414,10 +433,6 @@ class Game {
         }, 1000);
     }
 
-    restartGame() {
-
-    }
-
     scaleCanvas() {
         let size = window.innerWidth / this.fieldSize.x * .9;