added game over overlay

FairlyTales · Sep 2, 2021 · 6ad01c6 · 6ad01c6
1 parent c3ac992
commit 6ad01c6
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 42 deletions.
diff --git a/index.html b/index.html
@@ -1,26 +1,32 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="stylesheet" href="style.css">
-  <script src="./js/main.js" type="module"></script>
-  <title>Snake OOP</title>
-</head>
-<body>
-  <div class="wrapper">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css" />
+    <script src="./js/main.js" type="module"></script>
+    <title>Snake OOP</title>
+  </head>
+  <body>
     <div class="wrapper">
-    <div class="fields"></div>
-    <div class="score-container">Score: <span id="score">0</span></div>
-
-      <div class="game-over-container hidden">
-        <span>Game Over</span> 
-        <div class="btn-container">
-          <button id="restart">Restart</button>
+      <div class="wrapper">
+        <div class="fields"></div>
+        <div class="game-over-container hidden-container lol">
+          <div class="game-over-content hidden-content">
+            <span>Game Over</span>
+            <div class="score-container">
+              Score: <span class="score">0</span>
+            </div>
+            <div class="btn-container">
+              <button id="restart">
+                <span>Restart</span>
+              </button>
+            </div>
+          </div>
+          <div class="overlay"></div>
         </div>
       </div>
-
-  </div>
-</body>
-</html>
+    </div>
+  </body>
+</html>
diff --git a/js/main.js b/js/main.js
@@ -5,9 +5,10 @@ import Utility from './random.js';
 
 window.onload = function (e) {
   const field = document.querySelector('.fields');
-  const scoreField = document.getElementById('score');
+  const scoreField = document.querySelector('.score');
   const restartBtn = document.getElementById('restart');
   const gameOver = document.querySelector('.game-over-container');
+  const gameOverContent = document.querySelector('.game-over-content')
 
   // set board dimensions and cell size
   const boardDimensions = {
@@ -51,9 +52,10 @@ window.onload = function (e) {
       snake.move();
     } else {
       clearInterval(gameLoop);
-      gameOver.classList.remove('hidden');
+      gameOver.classList.remove('hidden-container');
+      gameOverContent.classList.remove('hidden-content');
     }
-  }, 500);
+  }, 400);
 
   restartBtn.addEventListener('click', e => {
     location.reload();

diff --git a/style.css b/style.css
@@ -4,12 +4,16 @@ html {
 }
 
 body {
-  background-color: seagreen;
+  margin: 0;
+  padding: 0;
+  background-color: #267f4d;
+  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 
 .wrapper {
   position: relative;
-  height: 95vh;
+  height: 100vh;
+  width: 100vw;
 
   display: flex;
   flex-direction: column;
@@ -35,50 +39,76 @@ body {
   box-sizing: border-box;
 }
 
-.score-container,
 .game-over-container {
-  margin-top: 5px;
+  width: 100vw;
+  height: 100vh;
+  position: absolute;
+  transition: opacity 0.5s;
+}
+
+.overlay {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: #09450b;
+  opacity: 0.85;
+}
+
+.score-container {
+  margin-top: 10px;
   color: white;
   font-size: 40px;
 }
 
-.game-over-container {
+.game-over-content {
   position: absolute;
-  top: 1110px;
+  left: 42%;
+  top: 42%;
+  z-index: 1;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.game-over-content span {
+  color: white;
+  font-size: 40px;
+  line-height: 40px;
 }
 
 .btn-container {
   display: flex;
   justify-content: center;
-  margin-top: 10px;
+  margin-top: 13px;
 }
 
 .btn-container > button {
   padding: 10px;
   font-size: 30px;
-  background-color: darkgreen;
+  background-color: rgba(13, 145, 19, 1);
   color: white;
   border-radius: 10px;
   border-style: none;
   cursor: pointer;
+  font-family: inherit;
 }
 
 .btn-container > button:hover {
-  opacity: 0.7;
+  background-color: rgba(13, 145, 19, 0.6);
 }
 
 .btn-container > button:active {
-  opacity: 0.4;
+  background-color: rgba(13, 145, 19, 0.4);
 }
 
-.hidden {
-  clip: rect(0 0 0 0);
-  clip-path: inset(50%);
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
+.hidden-container {
+  opacity: 0;
+}
+
+.hidden-content {
+  display: none;
 }
 
 [data-game='fruit'] {