menu added

ManqobaSibeko · Jul 17, 2019 · 6282a9c · 6282a9c
1 parent 063c90a
commit 6282a9c
Show file tree

Hide file tree

Showing 4 changed files with 183 additions and 13 deletions.
diff --git a/css/style.css b/css/style.css
@@ -8,18 +8,17 @@ margin-top: 30px;
 }
 
 body {
+  margin: auto;
   max-width: 600px;
-  display: inline-block;
   background: radial-gradient(circle, rgba(175,196,174,1) 0%, rgba(104,204,191,1) 89%, rgba(94,191,178,1) 100%);
-  margin-left: 100px;
-
 }
 
 main {
-  margin: 0;
+  margin: auto;
   display: flex;
   justify-content: center;
-  margin: 30px;
+  margin-left: 60px;
+  margin-top: 0px;
 }
 
 div {
@@ -62,6 +61,7 @@ h2 {
   display: flex;
   justify-content: center;
   display: inline;
+  margin-left: 60px;
 }
 
 
@@ -241,3 +241,153 @@ box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF;
   font-size: 12px;
   color: #85796b;
 }
+
+/*menu*/
+
+:root {
+  --primary-color: rgba(13, 110, 139, 0.75);
+  --secondary-color: rgba(229, 148, 0, 0.9);
+  --overlay-color: rgba(24, 39, 51, 0.85);
+  --menu-speed: 0.75s;
+}
+
+
+.container {
+  max-width: 600px;
+  padding: 0 3rem;
+  margin: auto;
+  overflow: hidden;
+}
+
+.btn:hover { opacity: 0.7; }
+
+
+/* START of MENU STYLING */
+.menu-wrap {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+.menu-wrap .toggler {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 2;
+  width: 50px;
+  height: 50px;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.menu-wrap .hamburger {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  display: flex;
+  width: 40px;
+  height:40px;
+  padding: 1rem;
+  background: var(--primary-color);
+  align-items: center;
+  justify-content: center;
+}
+
+/* Hamburger Line */
+.menu-wrap .hamburger > div {
+  position: relative;
+  display: flex;
+  width: 150%;
+  height: 2px;
+  background: #fff;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.4s ease;
+}
+
+/* Hamburger Lines - Top & Bottom */
+.menu-wrap .hamburger > div:before,
+.menu-wrap .hamburger > div:after {
+  position: absolute;
+  top: -7px;
+  z-index: 1;
+  width: 100%;
+  height: 2px;
+  background: inherit;
+  content: '';
+}
+
+/* Moves Line Down */
+.menu-wrap .hamburger > div:after { top: 7px; }
+
+/* Toggler Animation */
+.menu-wrap .toggler:checked + .hamburger > div { transform: rotate(135deg); }
+
+
+/* Turns Lines Into X */
+.menu-wrap .toggler:checked + .hamburger > div:before,
+.menu-wrap .toggler:checked + .hamburger > div:after {
+  top: 0;
+  transform: rotate(90deg);
+}
+
+/* Rotate On Hover When Checked */
+.menu-wrap .toggler:checked:hover + .hamburger > div { transform: rotate(225deg); }
+
+/* Show Menu */
+.menu-wrap .toggler:checked ~ .menu {
+  visibility: visible;
+}
+
+.menu-wrap .toggler:checked ~ .menu > div {
+  transform: scale(1);
+  transition-duration: var(--menu-speed);
+}
+
+.menu-wrap .toggler:checked ~ .menu > div > div {
+  opacity: 1;
+  transition: ease 0.4s;
+}
+
+.menu-wrap .menu {
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  visibility: hidden;
+  overflow: hidden;
+  align-items: center;
+  justify-content: center;
+}
+
+p {
+  font-family: 'Montserrat', sans-serif;
+  font-size: 12px;
+  font-weight: 300;
+  color: #d8edea;
+  transition: color 0.4s ease;
+
+}
+
+.bold {
+  color:	#f8de7e;
+}
+
+.menu-wrap .menu > div {
+  display: flex;
+  flex-direction: column;
+  width: 200vw;
+  height: 200vh;
+  background: var(--overlay-color);
+  border-radius: 50%;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  transform: scale(0);
+  transition: all 0.4s ease;
+}
diff --git a/index.html b/index.html
@@ -8,6 +8,16 @@
     <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400&display=swap" rel="stylesheet">
   </head>
   <body>
+    <div class="menu-wrap">
+  <input type="checkbox" class="toggler">
+  <div class="hamburger"><div></div></div>
+  <div class="menu">
+      <div>
+        <h2>rules</h2>
+        <p>Please use the <b class="bold">UP</b> key to rotate your tetromino, and <b class="bold">LEFT</b> and <b class="bold">RIGHT</b> to move across the board. Pressing <b class="bold">DOWN</b> will speed up the tetromino.</p>
+      </div>
+  </div>
+</div>
 <header>
     <h2>Welcome</h2>
     <h1>to tetris</h1>

diff --git a/js/app.js b/js/app.js
@@ -7,7 +7,6 @@ document.addEventListener('DOMContentLoaded', () => {
 
   //Make the The Tetrominoes move left, right and down on the board
   function moveSquare(e) {
-
     squares[currentIndex].classList.remove('block')
 
     switch(e.keyCode) {

diff --git a/js/app2.js b/js/app2.js
@@ -6,7 +6,6 @@ document.addEventListener('DOMContentLoaded', () => {
   let currentIndex = 0
   let currentRotation = 0
   const width = 10
-  // const height = 20
   let score = 0
 
   //assign functions to keycodes
@@ -90,7 +89,6 @@ document.addEventListener('DOMContentLoaded', () => {
 
   //move down on loop
   function moveDown() {
-
     draw()
     undraw()
     currentPosition = currentPosition += width
@@ -157,10 +155,23 @@ document.addEventListener('DOMContentLoaded', () => {
   }
 
   //Game Over
-  // function gameOver() {
-  //   if
-  // }
-  // gameOver()
+  function gameOver() {
+    if(squares[10].classList.contains('block2')) {
+      scoreDisplay.innerHTML = 'end'
+    }else if(squares[11].classList.contains('block2')) {
+      scoreDisplay.innerHTML = 'end'
+    }else if(squares[12].classList.contains('block2')) {
+      scoreDisplay.innerHTML = 'end'
+    }else if(squares[13].classList.contains('block2')) {
+      scoreDisplay.innerHTML = 'end'
+    }else if (squares[14].classList.contains('block2')) {
+      scoreDisplay.innerHTML = 'end'
+    }
+
+  }
+
+
+  gameOver()
 
   //show previous tetromino in scoreDisplay
   theTetrominoes[random][currentRotation]
@@ -197,12 +208,12 @@ document.addEventListener('DOMContentLoaded', () => {
         score += 10
         scoreDisplay.innerHTML = score
         row.forEach(index => squares[index].classList.remove('block2') || squares[index].classList.remove('block'))
+        //splice array
         const squaresRemoved = squares.splice(currentIndex,width)
         console.log(currentIndex, squaresRemoved)
         squares = squaresRemoved.concat(squares)
         console.log(squares)
         squares.forEach(cell => grid.appendChild(cell))
-        // removeLine()
       }
     }
   }