ironhack-labs · pedrocuzzolin · Jul 28, 2024
diff --git a/Captura de pantalla 2024-04-18 190034.png b/Captura de pantalla 2024-04-18 190034.png
diff --git a/Captura de pantalla 2024-04-18 190947.png b/Captura de pantalla 2024-04-18 190947.png
diff --git a/Captura de pantalla 2024-04-18 191205.png b/Captura de pantalla 2024-04-18 191205.png
diff --git a/Captura de pantalla 2024-04-18 192019.png b/Captura de pantalla 2024-04-18 192019.png
diff --git a/index.html b/index.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>Superhero Memory Game</title>
-    <!-- LINK THE STYLES HERE -->
+    <link rel="stylesheet" href=".\styles\style.css">         
   </head>
   <body>
     <div>
@@ -17,7 +17,8 @@ <h2>Score</h2>
       <p>Pairs guessed: <span id="pairs-guessed">0</span></p>
     </div>
     <div id="memory-board"></div>
-
-    <!-- LINK THE JAVASCRIPT FILES HERE (keep in mind that the order in which you link them MATTERS) -->
+    <script src="src\index.js"></script>
+    <script src="src\memory.js"></script>
+
   </body>
 </html>
diff --git a/src/index.js b/src/index.js
@@ -25,27 +25,67 @@ const cards = [
   { name: 'thor', img: 'thor.jpg' }
 ];
 
-const memoryGame = new MemoryGame(cards);
+
 
 window.addEventListener('load', (event) => {
+  // Inicializa o jogo de memória
+  const memoryGame = new MemoryGame(cards);
+  memoryGame.shuffleCards();  // Embaralha as cartas
   let html = '';
+
+  // Gera o HTML para as cartas
   memoryGame.cards.forEach((pic) => {
-    html += `
+    html += ` 
       <div class="card" data-card-name="${pic.name}">
-        <div class="back" name="${pic.img}"></div>
+        <div class="back"></div>
         <div class="front" style="background: url(img/${pic.img}) no-repeat"></div>
       </div>
     `;
   });
 
-  // Add all the divs to the HTML
+  // Adiciona todas as cartas ao HTML
   document.querySelector('#memory-board').innerHTML = html;
 
-  // Bind the click event of each element to a function
+  let firstCard = null;
+  let secondCard = null;
+
+  // Manipulador de eventos para clique em cartas
   document.querySelectorAll('.card').forEach((card) => {
     card.addEventListener('click', () => {
-      // TODO: write some code here
-      console.log(`Card clicked: ${card}`);
+      if (card.classList.contains('turned') || (firstCard && secondCard)) {
+        return;
+      }
+
+      card.classList.add('turned');
+
+      if (!firstCard) {
+        firstCard = card;
+      } else {
+        secondCard = card;
+        // Cria objetos para verificar o par
+        const card1Name = firstCard.getAttribute('data-card-name');
+        const card2Name = secondCard.getAttribute('data-card-name');
+
+        const isPair = memoryGame.checkIfPair(card1Name, card2Name);
+
+        setTimeout(() => {
+          if (isPair) {
+            firstCard.classList.add('blocked');
+            secondCard.classList.add('blocked');
+          } else {
+            firstCard.classList.remove('turned');
+            secondCard.classList.remove('turned');
+          }
+
+          firstCard = null;
+          secondCard = null;
+
+          // Verifica se o jogo terminou
+          if (memoryGame.checkIfFinished()) {
+            alert('You won!!!');
+          }
+        }, 1000);
+      }
     });
   });
-});
+});
diff --git a/src/memory.js b/src/memory.js
@@ -1,18 +1,43 @@
 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
+    if(this.cards === undefined)return undefined
+    const mixedCards = [];
+    this.cards.forEach(card => {
+      mixedCards.splice(Math.floor(Math.random() * mixedCards.length), 0, card)
+    });
+    this.cards = mixedCards
+    return this.cards;
+
+
   }
 
   checkIfPair(card1, card2) {
-    // ... write your code here
+    this.pairsClicked++;
+    if (card1 === card2) {
+      this.pairsGuessed++;
+      return true;
+    } else {
+      return false;
+    }
+
+
   }
 
   checkIfFinished() {
-    // ... write your code here
+    if(this.pairsGuessed === this.cards.length / 2) {
+      return true;
+    } else {
+      return false;
+    }
+
   }
 }