Add start menu with animation

game.js

@@ -1,23 +1,26 @@
 class Game {
     constructor() {
-        const elements = `<div id="game-stats">
+        const elements = `
-            <div class="stat-container">
+        <div class="main-container">
-                <span id="bombs">
+             <div id="game-stats" class="game-stats">
-                    000
+                <div class="stat-container">
-                </span>
+                    <span id="bombs">
+                        000
+                    </span>
+                </div>
+
+                <div class="stat-container right">
+                    <span id="time">
+                        00:00
+                    </span>
+                </div>
             </div>
 
-            <div class="stat-container right">
+            <div class="game-container">
-                <span id="time">
+                <canvas id="minesweeper-game" width="100" height="100"></canvas>
-                    00:00
+                <canvas class="overlay" id="minesweeper-overlay" width="100" height="100"></canvas>
-                </span>
+                <canvas class="overlay" id="minesweeper-overlay2" width="100" height="100"></canvas>
             </div>
-        </div>
-
-        <div id="game-container">
-            <canvas id="minesweeper-game" width="100" height="100"></canvas>
-            <canvas id="minesweeper-overlay" width="100" height="100"></canvas>
-            <canvas id="minesweeper-overlay2" width="100" height="100"></canvas>
         </div>`.toDOM();
         document.body.appendChild(elements);
 

index.html

@@ -10,20 +10,94 @@
             overflow: hidden;
         }
 
-        #minesweeper-overlay, #minesweeper-overlay2 {
+        body {
+            font-family: Roboto, Helvetica, Arial, sans-serif;
+            font-size: 1.4em;
+        }
+
+        .start-background {
+            width: 100vw;
+            height: 100vh;
+            background-color: #333;
+            -webkit-transition: background-color .5s;
+            -moz-transition: background-color .5s;
+            -o-transition: background-color .5s;
+            transition: background-color .5s;
+        }
+        
+        .start-background.transparent {
+            background-color: transparent;
+        }
+
+        .start-container {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            -webkit-transform: translate(-50%, -50%);
+            -moz-transform: translate(-50%, -50%);
+            -ms-transform: translate(-50%, -50%);
+            -o-transform: translate(-50%, -50%);
+            transform: translate(-50%, -50%);
+            color: #fff;
+            text-align: center;
+        }
+
+        .start-container.slideDown {
+            animation: slideDown .5s ease-in-out forwards;
+        }
+
+        @keyframes slideDown {
+            0% {
+                top: 50%;
+            }
+
+            100% {
+                top: 150%;
+            }
+        }
+
+        .start-container h3 {
+            font-weight: lighter;
+        }
+
+        .start-container button {
+            border: none;
+            border-radius: 10px;
+            box-shadow: none;
+            background-color: #2272ff;
+            color: #fff;
+            padding: 20px 40px;
+            font-size: 28px;
+            -webkit-transition: all .2s;
+            -moz-transition: all .2s;
+            -o-transition: all .2s;
+            transition: all .2s;
+            cursor: pointer;
+        }
+
+        .start-container button:hover {
+            box-shadow: 0 10px 20px rgba(0,0,0,.18);
+            transform: translateY(-5px);
+        }
+
+        .start-container button:active {
+            background-color: #1e64cd;
+        }
+
+        .overlay {
             position: absolute;
             top: 0;
             left: 0;
         }
 
-        #game-container {
+        .game-container {
             position: absolute;
             bottom: 2.5%;
             left: 50%;
             transform: translateX(-50%);
         }
 
-        #game-stats {
+        .game-stats {
             position: absolute;
             top: calc(2.5vh / 2);
             left: 50%;
@@ -49,10 +123,36 @@
         #time, #bombs {
             margin: 0 15px;
         }
+
+        .main-container {
+            position: absolute;
+            top: -100%;
+            width: 100%;
+            height: 100%;
+            animation: slideIn .5s ease-in-out forwards;
+        }
+
+        @keyframes slideIn {
+            from {
+                top: -100%;
+            }
+
+            to {
+                top: 0;
+            }
+        }
     </style>
 </head>
 <body style="margin: 0">
 
+<div class="start-background">
+    <div class="start-container">
+        <h1>Minesweeper.js</h1>
+        <h3>A sweet, tasty, little Minesweeper game written in JavaScript with HTML5 &lt;canvas&gt; Element</h3>
+        <button id="startgame">Play!</button>
+    </div>
+</div>
+
 <script type="text/javascript" src="animations/click.js"></script>
 <script type="text/javascript" src="animations/victory.js"></script>
 <script type="text/javascript" src="game.js"></script>

minesweeper.js

@@ -151,6 +151,17 @@ String.prototype.toDOM=function(){
     return b;
 };
 
+let game;
 
-const game = new Game();
+const startContainer = document.getElementsByClassName('start-container')[0];
-game.initGame();
+const startBackground = document.getElementsByClassName('start-background')[0];
+const startButton = document.getElementById('startgame');
+startButton.addEventListener('click', () => {
+    startContainer.classList.add('slideDown');
+    startBackground.classList.add('transparent');
+    game = new Game();
+    game.initGame();
+});
+
+// const game = new Game();
+// game.initGame();