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; }