adjusted 'game over' sign and button positions

index.html

@@ -13,8 +13,14 @@
     <div class="wrapper">
     <div class="fields"></div>
     <div class="score-container">Score: <span id="score">0</span></div>
-    <div class="game-over-container hidden">Game Over</div>
-    <div class="btn-container hidden"><button id="restart">Restart</button></div>
+
+      <div class="game-over-container hidden">
+        <span>Game Over</span> 
+        <div class="btn-container">
+          <button id="restart">Restart</button>
+        </div>
+      </div>
+
   </div>
 </body>
 </html>

js/main.js

@@ -1,26 +1,26 @@
 import Fruit from './fruit.js';
 import Matrix from './matrix.js';
 import Snake from './snake.js';
-import Utility from './random.js'
+import Utility from './random.js';
 
 window.onload = function (e) {
   const field = document.querySelector('.fields');
   const scoreField = document.getElementById('score');
   const restartBtn = document.getElementById('restart');
   const gameOver = document.querySelector('.game-over-container');
-  const btnContainer = document.querySelector('.btn-container');
-
-
 
   // set board dimensions and cell size
   const boardDimensions = {
     x: 17,
     y: 17,
-    cellSize: 40
-  }
+    cellSize: 40,
+  };
 
   // snake starting position
-  const snakeStartPosition = [[8, 9], [7, 9]];
+  const snakeStartPosition = [
+    [8, 9],
+    [7, 9],
+  ];
 
   // create gameboard(matrix) and snake objects
   const matrix = new Matrix(field, boardDimensions);
@@ -32,31 +32,30 @@ window.onload = function (e) {
   snake.initInputListener();
 
   // create first fruit
-  (new Fruit(matrix, Utility.generateFruit(matrix, snake))).show();
+  new Fruit(matrix, Utility.generateFruit(matrix, snake)).show();
 
   // game score
   let score = 0;
 
   // game loop
   const gameLoop = setInterval(() => {
-    if(!snake.snekDead) {
-      if(snake.ateFruit) {
+    if (!snake.snekDead) {
+      if (snake.ateFruit) {
         score++;
         snake.ateFruit = false;
 
-        (new Fruit(matrix, Utility.generateFruit(matrix, snake))).show();
+        new Fruit(matrix, Utility.generateFruit(matrix, snake)).show();
       }
 
       scoreField.textContent = score;
       snake.move();
     } else {
       clearInterval(gameLoop);
       gameOver.classList.remove('hidden');
-      btnContainer.classList.remove('hidden');
     }
   }, 500);
 
-  restartBtn.addEventListener('click', (e) => {
+  restartBtn.addEventListener('click', e => {
     location.reload();
-  })
-}
+  });
+};

style.css

@@ -8,6 +8,7 @@ body {
 }
 
 .wrapper {
+  position: relative;
   height: 95vh;
 
   display: flex;
@@ -41,11 +42,14 @@ body {
   font-size: 40px;
 }
 
-.game-over {
-  margin-top: 10px;
+.game-over-container {
+  position: absolute;
+  top: 1110px;
 }
 
 .btn-container {
+  display: flex;
+  justify-content: center;
   margin-top: 10px;
 }