added modals

aresnik11 · Oct 2, 2019 · 79678ec · 79678ec
1 parent fa8cd6e
commit 79678ec
Show file tree

Hide file tree

Showing 3 changed files with 129 additions and 20 deletions.
diff --git a/index.css b/index.css
@@ -1,4 +1,42 @@
-#board {
+.container {
+    margin-left: 2%;
+    margin-right: 2%;
+    margin-top: 75px;
+    margin-bottom: 75px;
+}
+
+/* modal tutorial from https://www.w3schools.com/howto/howto_css_modals.asp */
+.my-modal {
+    display: none; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 102; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgb(0,0,0); /* Fallback color */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+    /* visibility: visible;
+    opacity: 1;
+    transition: visibility 0s 0.8s, opacity 0.8s linear; */
+  }
+
+  /* .transition {
+    visibility: visible;
+    opacity: 1;
+    transition: opacity 2s linear;
+  } */
+
+  .modal-content {
+    background-color: #fefefe;
+    margin: 15% auto; /* 15% from the top and centered */
+    padding: 20px;
+    border: 1px solid #888;
+    width: 80%; /* Could be more or less, depending on screen size */
+  }
+
+.board {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   /* grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); */

diff --git a/index.html b/index.html
@@ -8,15 +8,53 @@
   <script defer type="text/javascript" src="index.js"></script>
 </head>
 <body>
-  <div id="container">
-      <h2>Welcome to the best Set Game ever!</h2>
-      <button data-action="create" class="ui button">New Game</button>
+  <div class="ui black three item inverted menu massive fixed sticky">
+    <a class="item" data-action="create">
+      New Game
+    </a>
+    <a class="item" data-action="rules">
+      Rules
+    </a>
+    <a class="item" data-action="scores">
+      High Scores
+    </a>
   </div>
-  <br><br>
-  <div id="board">
+  <div class="my-modal rules">
+      <div class="modal-content">
+        <h2>Rules</h2>
+        <p>These are the rules</p>
+      </div>
   </div>
-  <br><br>
-  <div id="options">
+  <div class="my-modal scores">
+      <div class="modal-content">
+        <h2>High Scores</h2>
+        <ol>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+        </ol>
+      </div>
+  </div>
+  <div class="my-modal game-over">
+      <div class="modal-content">
+      <h2>Game Over</h2>
+      <p></p>
+      <button data-action="create">Start New Game</button>
+      </div>
+  </div>
+  <div class="container">
+    <div class="title">
+        <h2>Welcome to the best Set Game ever!</h2>
+    </div>
+    <br><br>
+    <div class="options">
+        <!-- <button data-action="create" class="ui button">New Game</button> -->
+    </div>
+    <br><br>
+    <div class="board">
+    </div>
   </div>
 </body>
 </html>
diff --git a/index.js b/index.js
@@ -1,12 +1,29 @@
-const container = document.querySelector('#container')
-const board = document.querySelector('#board')
-const options = document.querySelector('#options')
+const body = document.querySelector('body')
+const container = document.querySelector('.container')
+const menu = document.querySelector('.menu')
+const options = document.querySelector('.options')
+const board = document.querySelector('.board')
+const rulesModal = document.querySelector('.my-modal.rules')
+const scoresModal = document.querySelector('.my-modal.scores')
+const gameOverModal = document.querySelector('.my-modal.game-over')
 let shuffledCards = []
 let selectedCounter = 0
 
+rulesModal.addEventListener('click', function(e) {
+    rulesModal.style.display = "none"
+})
+
+scoresModal.addEventListener('click', function(e) {
+    scoresModal.style.display = "none"
+})
+
+gameOverModal.addEventListener('click', function(e) {
+    gameOverModal.style.display = "none"
+})
+
 //create new game on click of the new game button
-container.addEventListener('click', function(e) {
-    if (e.target.dataset.action == "create") {
+document.addEventListener('click', function(e) {
+    if (e.target.dataset.action === "create") {
         fetch("http://localhost:3000/api/v1/games", {
             method: "POST",
             headers: {
@@ -30,6 +47,12 @@ container.addEventListener('click', function(e) {
             initializeGame(game)
         })
     }
+    else if (e.target.dataset.action === "rules") {
+        rulesModal.style.display = "block"
+    }
+    else if (e.target.dataset.action === "scores") {
+        scoresModal.style.display = "block"
+    }
 })
 
 //sets up initial board and game, fetches cards from DB
@@ -39,9 +62,12 @@ function initializeGame(game) {
         return response.json()
     })
     .then(function(cards) {
-        shuffleCards(cards)
+        for (let i=0; i<12; i++) {
+            shuffledCards.push(cards[i])
+        }
+        // shuffleCards(cards)
+        renderOptions()
         renderInitialCards(shuffledCards)
-        renderNoSetButton()
         removeCards(12)
     })
 }
@@ -93,8 +119,8 @@ function renderSingleCard(card) {
 }
 
 //adds no set button and card count after board has been created
-function renderNoSetButton() {
-    options.insertAdjacentHTML("beforeend", `<button data-action="noset">No Set</button>`)
+function renderOptions() {
+    options.insertAdjacentHTML("beforeend", `<button data-action="noset" class="ui secondary button">No Set</button>`)
     options.insertAdjacentHTML("beforeend", `<div id="cardnum">Cards Left: ${shuffledCards.length}</div>`)
 }
 
@@ -163,7 +189,14 @@ function swapCards(selectedCards) {
         }
         else {
             card.remove()
-            console.log("no cards left")
+            const boardCards = board.querySelectorAll('.card')
+            setTimeout(function() {
+                if (!boardCards.length) {
+                    gameOverModal.querySelector('p').innerText = "No cards left!"
+                    gameOverModal.style.display = "block"
+                }
+            }, 500)
+
         }
     })
 }
@@ -269,8 +302,6 @@ function allTheDifferent(array) {
     return false
 }
 
-
-
 //listens for clicks on everything in the options div
 options.addEventListener("click", function(e) {
     //if no set button was clicked, check if there is a set on the board
@@ -288,6 +319,8 @@ options.addEventListener("click", function(e) {
             }
             else {
                 console.log("no cards left, GAME OVER")
+                gameOverModal.querySelector('p').innerText = "There are no more sets and no more cards in the deck"
+                gameOverModal.style.display = "block"
             }
         }
     }