Merge pull request #9 from KingOfDog/refactoring

Add restart button

css/style.css

@@ -49,11 +49,25 @@ body {
     }
 }
 
+.start-container.slideUp {
+    animation: slideUp .5s ease-in-out forwards;
+}
+
+@keyframes slideUp {
+    0% {
+        top: 100%
+    }
+
+    100% {
+        top: 50%;
+    }
+}
+
 .start-container h3 {
     font-weight: lighter;
 }
 
-.start-container button {
+button {
     border: none;
     border-radius: 10px;
     box-shadow: none;
@@ -66,14 +80,26 @@ body {
     -o-transition: all .2s;
     transition: all .2s;
     cursor: pointer;
+    transform: translateY(0);
 }
 
-.start-container button:hover {
-    box-shadow: 0 10px 20px rgba(0,0,0,.18);
+.game-stats button {
+    font-size: 2vh;
+    padding: 1.25vh 2vw;
+}
+
+.game-stats .restart {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+button:hover {
+    box-shadow: 0 5px 0 #3562c1, 0 10px 20px rgba(0, 0, 0, .18);
     transform: translateY(-5px);
 }
 
-.start-container button:active {
+button:active {
     background-color: #1e64cd;
 }
 
@@ -133,4 +159,28 @@ body {
     to {
         top: 0;
     }
+}
+
+.popAway {
+    animation: popAway .5s forwards;
+    -webkit-transform-origin: 50%;
+    -moz-transform-origin: 50%;
+    -ms-transform-origin: 50%;
+    -o-transform-origin: 50%;
+    transform-origin: 50%;
+    top: 0;
+}
+
+@keyframes popAway {
+    0% {
+        transform: scale(1);
+    }
+
+    50% {
+        transform: scale(1.1);
+    }
+
+    100% {
+        transform: scale(0);
+    }
 }

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;
 

minesweeper.js

@@ -157,11 +157,24 @@ const startContainer = document.getElementsByClassName('start-container')[0];
 const startBackground = document.getElementsByClassName('start-background')[0];
 const startButton = document.getElementById('startgame');
 startButton.addEventListener('click', () => {
+    startGame();
+});
+
+function startGame() {
+    startContainer.classList.remove('slideUp');
     startContainer.classList.add('slideDown');
     startBackground.classList.add('transparent');
     game = new Game();
     game.initGame();
-});
+}
 
-// const game = new Game();
-// game.initGame();
+function restartGame() {
+    game.cancelGame();
+    setTimeout(() => {
+        startContainer.classList.remove('slideDown');
+        startContainer.classList.add('slideUp');
+        startBackground.classList.remove('transparent');
+        game.destroy();
+        game = null;
+    }, 500);
+}