diff --git a/css/style.css b/css/style.css
index 10acc9b..34c60aa 100644
--- a/css/style.css
+++ b/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);
+ }
}
\ No newline at end of file
diff --git a/game.js b/game.js
index 530726d..dcc76d3 100644
--- a/game.js
+++ b/game.js
@@ -8,6 +8,10 @@ class Game {
000
+
+
+
+
@@ -24,6 +28,8 @@ class Game {
`.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;
diff --git a/minesweeper.js b/minesweeper.js
index c514cc0..0baadd7 100644
--- a/minesweeper.js
+++ b/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();
\ No newline at end of file
+function restartGame() {
+ game.cancelGame();
+ setTimeout(() => {
+ startContainer.classList.remove('slideDown');
+ startContainer.classList.add('slideUp');
+ startBackground.classList.remove('transparent');
+ game.destroy();
+ game = null;
+ }, 500);
+}
\ No newline at end of file