feat: logic complete

added styling

memory-game/mg-frontend/src/App.jsx

@@ -38,6 +38,8 @@ function App() {
         setMessage={setMessage}
         setButtonText={setButtonText}
       />
+      <audio src="public/collect-5930.mp3" className="audio-right"></audio>
+      <audio src="public/incorrect.mp3" className="audio-wrong"></audio>
     </>
   );
 }

memory-game/mg-frontend/src/components/card.jsx

@@ -9,7 +9,6 @@ export default function Card(props) {
         </div>
         <h2 className="card-title">{props.title}</h2>
       </div>
-      <div className="card-back"></div>
     </div>
   );
 }

memory-game/mg-frontend/src/gameLogic.js

@@ -24,9 +24,6 @@ class GameLogic {
   handleClick(key) {
     this.checkClickResult(key);
 
-    const cards = document.querySelectorAll(".card");
-    cards.forEach((card) => card.classList.add("flip", "card-back", "hidden"));
-
     const tempCards = this.cards.map((card) => {
       if (card.key === key) {
         card.clicked = true;
@@ -35,10 +32,10 @@ class GameLogic {
     });
     this.setCards(tempCards);
     this.randomArrayOrder();
+    const cards = document.querySelectorAll(".card");
+    cards.forEach((card) => card.classList.add("flip", "hidden"));
     setTimeout(() => {
-      cards.forEach((card) =>
+      cards.forEach((card) => card.classList.remove("flip", "hidden"));
-        card.classList.remove("flip", "card-back", "hidden"),
-      );
     }, 1000);
   }
 
@@ -67,17 +64,19 @@ class GameLogic {
   }
 
   checkClickResult(key) {
-    if (this.score + 1 === this.cards.length) {
-      this.setMessage("You won!\n12/12 right");
-      this.setButtonText("Play again?");
-      this.resetGame();
-      return;
-    }
-
-    // go through game
     if (!this.checkClick(key)) {
+      // Check if this move wins
+      if (this.score + 1 === this.cards.length) {
+        this.setMessage("You won!\n12/12 right");
+        this.setButtonText("Play again?");
+        this.resetGame();
+        return;
+      }
+      // Play a Sound for the right Answer
+      document.querySelector(".audio-right").play();
       this.setScore(this.score + 1);
     } else {
+      document.querySelector(".audio-wrong").play();
       this.handleLoss();
     }
   }

memory-game/mg-frontend/src/styles/card.css

@@ -13,26 +13,30 @@
 }
 
 .flip {
-  animation: flipCard 1s;
+  animation: flipCard 2.4s;
 }
 
 @keyframes flipCard {
+  from {
+    color: gray;
+  }
+  20% {
+    color: gray;
+    transform: rotateY(180deg);
+    background-color: black;
+  }
   to {
-    rotatey: 180deg;
+    transform: rotateY(-180deg);
+    visibility: visible;
   }
 }
 
 .card-front .card-back {
-  -webkit-backface-visibility: hidden; /* Safari */
+  -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
 }
 
-.card-back {
+.hidden img,
-  background: gray;
+.hidden .card-title {
-  color: gray;
-  transform: rotateY(180deg);
-}
-
-.hidden img {
   visibility: hidden;
 }