Refactor for desktop specific

gamalielhere · Dec 25, 2018 · f3a1f04 · f3a1f04
1 parent 043b2a4
commit f3a1f04
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 91 deletions.
diff --git a/css/style.css b/css/style.css
@@ -1,5 +1,6 @@
 /*BODY STUFFS*/
 body {
+  background-color: #0e0e0e;
   font-family: "Press Start 2P", Arial, Serif;
   height: 100%;
   margin: 0 !important;
@@ -91,88 +92,27 @@ body {
   color: #f94343;
 }
 
-/* body > h1 {
-  margin-top: -5px;
-  margin-bottom: -3px;
-} */
-
-/*BOARD*/
-.game {
-  background-color: #0e0e0e;
-  display: inline-block;
-  margin: 0 auto;
-}
-
-#canvas {
-  visibility: hidden;
-}
-
-.notification {
-  display: none;
-  background-color: #0e0e0e;
-  color: red;
-}
-
-/*BUTTONS*/
-/* button {
-  background-color: grey;
-  border: 1px solid #0e0e0e;
-  font-family: "Press Start 2P", Arial, Serif;
-  margin: 5px;
-  height: 45px;
-  width: 300px;
-}
-
-.content {
-  margin-top: 64px;
-} */
-
-.resume {
-  display: none;
-}
-
-.reset {
-  display: none;
-}
-
-.playAgain {
-  display: none;
-}
-
-.settings {
-  display: inline-block;
-}
-
-.home {
-  display: none;
-}
-
-.pause {
-  display: none;
-}
-
-.mobileButton {
-  display: none;
-}
-
-.mobileButtonCenter {
-  text-align: center;
-}
+@media screen and (max-width: 600px) {
+  .initial-text {
+    left: 15%;
+    right: 15%;
+  }
 
-.mobileButtonCenter button {
-  width: 80px;
-}
+  .mobile {
+    display: block;
+  }
 
-.left--right button {
-  margin: 0 40px;
+  .desktop {
+    display: none;
+  }
 }
 
-@media screen and (max-width: 960px) {
-  .mobileButton {
-    display: block;
+@media screen and (min-width: 601px) {
+  .mobile {
+    display: none;
   }
 
-  .content {
-    margin-top: 25px;
+  .desktop {
+    display: block;
   }
-}
+}
diff --git a/index.html b/index.html
@@ -30,11 +30,19 @@ <h1>SNAKE</h1>
       <button class="back" id="back"> BACK </button>
     </div>
     <div id="controlsInfo" class="controls-info">
-      <div>W = Up</div>
-      <div>S = Down</div>
-      <div>A = Left</div>
-      <div>D = Right</div>
-      <div>SPACEBAR = Start/Pause</div>
+      <div class="desktop">
+        <div>W = Up</div>
+        <div>S = Down</div>
+        <div>A = Left</div>
+        <div>D = Right</div>
+        <div>SPACEBAR = Start/Pause</div>
+      </div>
+      <div class="mobile">
+        <div>Swipe up = Up</div>
+        <div>Swipe down = Down</div>
+        <div>Swipe left = Left</div>
+        <div>Swipe right = Right</div>
+      </div>
     </div>
     <div id="scoresInfo" class="controls-info">
 

diff --git a/js/controls.js b/js/controls.js
diff --git a/js/main.js b/js/main.js
@@ -1,4 +1,4 @@
-(function() {
+(function () {
   // Create canvas
   const canvas = document.getElementById("canvas");
   canvas.width = Math.round(window.innerWidth);
@@ -26,6 +26,7 @@
     headerContainer = document.getElementById("header"),
     controlsInfo = document.getElementById("controlsInfo"),
     currentScore = document.getElementById("currentScore"),
+    scoresInfo = document.getElementById("scoresInfo"),
     infoContainer = document.getElementById("infoContainer");
   const cWsW = Math.ceil(canvasWidth / snakeWidth),
     cHsW = Math.ceil(canvasHeight / snakeWidth);
@@ -55,7 +56,7 @@
       (Math.random() * (canvasHeight - snakeWidth)) / snakeWidth
     );
     snake = [];
-    for (var i = 6 - 1; i >= 0; i--) {
+    for (const i = 6 - 1; i >= 0; i--) {
       snake.push({
         x: randomStartPoint - 1,
         y: randomStartPoint
@@ -298,6 +299,7 @@
 
   function startGameOnEvent() {
     gameStarted = "playing";
+    resetButton.innerHTML = "RESET";
     headerContainer.style.display = "flex";
     infoContainer.style.display = "none";
     startTheGame();
@@ -318,23 +320,23 @@
 
   function displayDeathScreen() {
     const temp = `
-      <div>Food Ate: ${stats["foodAte"]}</div>
-      <div>Bonus Food Ate: ${stats["bonusFood"]}</div>
-      <div>Total Score: ${stats["totalScore"]}</div>
+      <div style="margin-top: 20px;">Food Ate: ${stats["foodAte"] ? stats["foodAte"] : 0}</div>
+      <div>Bonus Food Ate: ${stats["bonusFood"] ? stats["bonusFood"] : 0}</div>
+      <div>Total Score: ${stats["totalScore"] ? stats["totalScore"] : 0}</div>
     `;
     gameStarted = "no";
     resetButton.innerHTML = "PLAY AGAIN";
     headerContainer.style.display = "none";
-    resetButton.style.display = "none";
+    resetButton.style.display = "block";
     continueButton.style.display = "none";
     headerContainer.style.display = "none";
     startButton.style.display = "none";
     controlsButton.style.display = "none";
     infoContainer.style.display = "block";
+    scoresInfo.style.display = "block";
+    scoresInfo.innerHTML = temp;
   }
 
-  // Public functions
-
   function resumeGame() {
     gameStarted = "playing";
     loopGame = setInterval(render, speed);