From c3ac992b8fbbb4d20b3f1b82ab8f7b37f6f47af8 Mon Sep 17 00:00:00 2001
From: kirill_khnychkin <khnychkin_kirill@tutanota.com>
Date: Thu, 2 Sep 2021 18:22:59 +0300
Subject: [PATCH] adjusted 'game over' sign and button positions

---
 index.html | 10 ++++++++--
 js/main.js | 29 ++++++++++++++---------------
 style.css  |  8 ++++++--
 3 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/index.html b/index.html
index 51285a5..2d091ef 100644
--- a/index.html
+++ b/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>
\ No newline at end of file
diff --git a/js/main.js b/js/main.js
index e615eb0..1ed9578 100644
--- a/js/main.js
+++ b/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,19 +32,19 @@ 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;
@@ -52,11 +52,10 @@ window.onload = function (e) {
     } else {
       clearInterval(gameLoop);
       gameOver.classList.remove('hidden');
-      btnContainer.classList.remove('hidden');
     }
   }, 500);
 
-  restartBtn.addEventListener('click', (e) => {
+  restartBtn.addEventListener('click', e => {
     location.reload();
-  })
-}
+  });
+};
diff --git a/style.css b/style.css
index 71671e1..b3d5e00 100644
--- a/style.css
+++ b/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;
 }