diff --git a/memory-game/mg-frontend/public/collect-5930.mp3 b/memory-game/mg-frontend/public/collect-5930.mp3
new file mode 100644
index 0000000..1592320
Binary files /dev/null and b/memory-game/mg-frontend/public/collect-5930.mp3 differ
diff --git a/memory-game/mg-frontend/public/incorrect.mp3 b/memory-game/mg-frontend/public/incorrect.mp3
new file mode 100644
index 0000000..69a998c
Binary files /dev/null and b/memory-game/mg-frontend/public/incorrect.mp3 differ
diff --git a/memory-game/mg-frontend/src/App.jsx b/memory-game/mg-frontend/src/App.jsx
index 54ab779..f966e3e 100644
--- a/memory-game/mg-frontend/src/App.jsx
+++ b/memory-game/mg-frontend/src/App.jsx
@@ -38,6 +38,8 @@ function App() {
setMessage={setMessage}
setButtonText={setButtonText}
/>
+
+
>
);
}
diff --git a/memory-game/mg-frontend/src/components/card.jsx b/memory-game/mg-frontend/src/components/card.jsx
index 7dea710..343575b 100644
--- a/memory-game/mg-frontend/src/components/card.jsx
+++ b/memory-game/mg-frontend/src/components/card.jsx
@@ -9,7 +9,6 @@ export default function Card(props) {
{props.title}
-
);
}
diff --git a/memory-game/mg-frontend/src/gameLogic.js b/memory-game/mg-frontend/src/gameLogic.js
index d70154e..a3bda62 100644
--- a/memory-game/mg-frontend/src/gameLogic.js
+++ b/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) =>
- card.classList.remove("flip", "card-back", "hidden"),
- );
+ cards.forEach((card) => card.classList.remove("flip", "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();
}
}
diff --git a/memory-game/mg-frontend/src/styles/card.css b/memory-game/mg-frontend/src/styles/card.css
index 601ee57..8e1719a 100644
--- a/memory-game/mg-frontend/src/styles/card.css
+++ b/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 {
- background: gray;
- color: gray;
- transform: rotateY(180deg);
-}
-
-.hidden img {
+.hidden img,
+.hidden .card-title {
visibility: hidden;
}