diff --git a/index.css b/index.css index 7158e41..a54f1b7 100644 --- 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 index ff1fd32..5ce8912 100644 --- a/index.html +++ b/index.html @@ -8,15 +8,53 @@ -
-

Welcome to the best Set Game ever!

- +
+ + New Game + + + Rules + + + High Scores +
-

-
+
+
+

Rules

+

These are the rules

+
-

-
+
+
+

High Scores

+
    +
  1. +
  2. +
  3. +
  4. +
  5. +
+
+
+
+
+

Game Over

+

+ +
+
+
+
+

Welcome to the best Set Game ever!

+
+

+
+ +
+

+
+
\ No newline at end of file diff --git a/index.js b/index.js index c0779af..12312b5 100644 --- 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", ``) +function renderOptions() { + options.insertAdjacentHTML("beforeend", ``) options.insertAdjacentHTML("beforeend", `
Cards Left: ${shuffledCards.length}
`) } @@ -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" } } }