memory game

janicemv · Dec 16, 2024 · 0885bd7 · 0885bd7
1 parent 8de7d78
commit 0885bd7
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 19 deletions.
diff --git a/js/Board.js b/js/Board.js
@@ -5,7 +5,6 @@ export class Board {
         this.size = size;
         this.cards = [];
         this.imagePool = Array.from({ length: 32 }, (_, i) => `img/${i}-min.png`);
-
         this.generateBoard();
     }
 
@@ -26,16 +25,12 @@ export class Board {
         const gameBoard = document.querySelector('.memory-game');
         gameBoard.innerHTML = '';
 
-
-        gameBoard.style.gridTemplateColumns = `repeat(${this.size}, 1fr)`;
-        gameBoard.style.gridTemplateRows = `repeat(${this.size}, 1fr)`;
-
         const fragment = document.createDocumentFragment();
 
         shuffledImages.forEach((image) => {
             const card = document.createElement('div');
             card.classList.add('memory-card');
-            card.setAttribute('data-img', image); 
+            card.dataset.img = image;
 
             card.innerHTML = `
                 <img class="front-face" src="${image}" alt="Front face" />
@@ -46,6 +41,8 @@ export class Board {
 
         gameBoard.appendChild(fragment);
 
+        gameBoard.style.gridTemplateColumns = `repeat(${this.size}, 1fr)`;
+        gameBoard.style.gridTemplateRows = `repeat(${this.size}, 1fr)`;
 
         this.cards = document.querySelectorAll('.memory-card');
         return this.cards;

diff --git a/js/MemoryGame.js b/js/MemoryGame.js
@@ -13,14 +13,7 @@ export class MemoryGame {
     }
 
     initializeGame() {
-        const gameBoard = document.querySelector('.memory-game');
-        gameBoard.addEventListener('click', (event) => {
-            const clickedCard = event.target.closest('.memory-card');
-            if (!clickedCard || clickedCard.classList.contains('flip')) return;
-            this.flipCard({ currentTarget: clickedCard });
-        });
-        console.log(this.cards.length);
-
+        this.cards.forEach(card => card.addEventListener('click', this.flipCard.bind(this)));
     }
 
     flipCard(event) {
@@ -41,7 +34,7 @@ export class MemoryGame {
     }
 
     checkForMatch() {
-        const isMatch = this.firstCard.getAttribute('data-img') === this.secondCard.getAttribute('data-img');
+        const isMatch = this.firstCard.dataset.img === this.secondCard.dataset.img;
 
         isMatch ? this.disableCards() : this.unflipCards();
 
@@ -52,8 +45,6 @@ export class MemoryGame {
         this.firstCard.removeEventListener('click', this.flipCard.bind(this));
         this.secondCard.removeEventListener('click', this.flipCard.bind(this));
         this.foundCards = this.foundCards + 2;
-        console.log(this.foundCards);
-
         this.resetBoard();
     }
 
@@ -75,9 +66,8 @@ export class MemoryGame {
     }
 
     checkForCompletion() {
-        if (this.foundCards === this.cards.length) {
+        if (this.cards.length === this.foundCards) {
             this.showCompletionImage();
-            console.log("Done");
         }
     }