diff --git a/SpecRunner.html b/SpecRunner.html index a6b4937e7..d21ab3652 100644 --- a/SpecRunner.html +++ b/SpecRunner.html @@ -6,7 +6,7 @@ - + diff --git a/index.html b/index.html index 9386faaf4..85f9edbe0 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,7 @@ Superhero Memory Game +
@@ -19,5 +20,7 @@

Score

+ + diff --git a/src/index.js b/src/index.js index 37f3a672d..1325fdeb5 100644 --- a/src/index.js +++ b/src/index.js @@ -26,10 +26,11 @@ const cards = [ ]; const memoryGame = new MemoryGame(cards); +const cardsShusffle = memoryGame.shuffleCards(cards); window.addEventListener('load', (event) => { let html = ''; - memoryGame.cards.forEach((pic) => { + cardsShusffle.forEach((pic) => { html += `
@@ -38,14 +39,43 @@ window.addEventListener('load', (event) => { `; }); + function hiddenCards() { + document.querySelectorAll('.card').forEach((card) => { + card.classList.remove('turned'); + }); + } + + function scoreTotal() { + document.getElementById('pairs-clicked').innerText = memoryGame.pairsClicked; + document.getElementById('pairs-guessed').innerText = memoryGame.pairsGuessed; + + if (memoryGame.checkIfFinished()) { + document.getElementById('memory-board').innerHTML = "

YOU WON!!!

"; + } + } + // Add all the divs to the HTML document.querySelector('#memory-board').innerHTML = html; + scoreTotal(); + // Bind the click event of each element to a function document.querySelectorAll('.card').forEach((card) => { - card.addEventListener('click', () => { - // TODO: write some code here - console.log(`Card clicked: ${card}`); + card.addEventListener('click', (e) => { + + card.classList.add('turned'); + memoryGame.pickedCards.push(card.dataset.cardName); + + if (memoryGame.pickedCards.length === 2) { + if (!memoryGame.checkIfPair(memoryGame.pickedCards[0], memoryGame.pickedCards[1])) { + setTimeout(hiddenCards, 1000); + memoryGame.pairsGuessed = 0; + } + + memoryGame.pickedCards = []; + } + + scoreTotal(); }); }); }); diff --git a/src/memory.js b/src/memory.js index f6644827e..782b4289c 100644 --- a/src/memory.js +++ b/src/memory.js @@ -1,18 +1,40 @@ class MemoryGame { constructor(cards) { this.cards = cards; - // add the rest of the class properties here + this.pickedCards = []; + this.pairsClicked = 0; + this.pairsGuessed = 0; } - shuffleCards() { - // ... write your code here + shuffleCards(cards) { + if(!cards) { + return undefined; + } + + for (let i = cards.length - 1; i > 0; i--) { + const randomIndex = Math.floor(Math.random() * (i + 1)); + [cards[i], cards[randomIndex]] = [cards[randomIndex], cards[i]]; + } + + return cards; } checkIfPair(card1, card2) { - // ... write your code here + this.pairsClicked++; + + if (card1 === card2) { + this.pairsGuessed++; + return true; + } + + return false; } checkIfFinished() { - // ... write your code here + if (this.pairsGuessed >= 8) { + return true; + } + + return false; } -} +} \ No newline at end of file diff --git a/styles/style.css b/styles/style.css index e56ddfe18..6bb186d18 100644 --- a/styles/style.css +++ b/styles/style.css @@ -88,3 +88,15 @@ p { font-size: 20px; text-align: center; } + +.win { + display: flex; + justify-content: center; + align-items: center; + height: 100%; +} + +.win p { + font-size: 3rem; + font-weight: bold; +} \ No newline at end of file