feat: front end styling

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

@@ -2,20 +2,26 @@ import { useState } from "react";
 import "./App.css";
 import Button from "./components/button";
 import GameBoard from "./components/gameboard";
+import GameMessages from "./components/gameMessages";
 import Scoreboard from "./components/scoreboard";
 
 function App() {
   const [gameStarted, setGameStarted] = useState(false);
+  const [buttonText, setButtonText] = useState("Start Game!");
   const [score, setScore] = useState(0);
   const [highScore, setHighScore] = useState(0);
+  const [message, setMessage] = useState("Remember the important things!");
 
   return (
     <>
       {!gameStarted ? (
-        <Button
-          onClick={() => setGameStarted(!gameStarted)}
-          text="Start Game"
-        />
+        <>
+          <GameMessages title={message} />
+          <Button
+            onClick={() => setGameStarted(!gameStarted)}
+            text={buttonText}
+          />
+        </>
       ) : null}
       <Scoreboard
         score={score}
@@ -29,6 +35,8 @@ function App() {
         setScore={setScore}
         highScore={highScore}
         setHighScore={setHighScore}
+        setMessage={setMessage}
+        setButtonText={setButtonText}
       />
     </>
   );

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

@@ -3,10 +3,13 @@ import "../styles/card.css";
 export default function Card(props) {
   return (
     <div className="card" onClick={props.onClick} data-cardname={props.title}>
-      <div className="card-img">
-        <Image src={props.imgSrc} alt={props.imgAlt} />
+      <div className="card-front">
+        <div className="card-img">
+          <Image src={props.imgSrc} alt={props.imgAlt} />
+        </div>
+        <h2 className="card-title">{props.title}</h2>
       </div>
-      <h2 className="card-title">{props.title}</h2>
+      <div className="card-back"></div>
     </div>
   );
 }

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

@@ -0,0 +1,9 @@
+export default function GameMessages({ title }) {
+  return (
+    <>
+      <div className="game-message">
+        <h1 className="msg-title">{title}</h1>
+      </div>
+    </>
+  );
+}

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

@@ -14,6 +14,8 @@ export default function GameBoard(props) {
     props.highScore,
     props.setHighScore,
     props.setGameStarted,
+    props.setMessage,
+    props.setButtonText,
   );
 
   useEffect(() => {

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

@@ -7,6 +7,8 @@ class GameLogic {
     highScore,
     setHighScore,
     setGameStarted,
+    setMessage,
+    setButtonText,
   ) {
     this.cards = cards;
     this.setCards = setCards;
@@ -15,10 +17,16 @@ class GameLogic {
     this.highScore = highScore;
     this.setHighScore = setHighScore;
     this.setGameStarted = setGameStarted;
+    this.setMessage = setMessage;
+    this.setButtonText = setButtonText;
   }
 
   handleClick(key) {
-    this.updateScore(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;
@@ -27,6 +35,11 @@ class GameLogic {
     });
     this.setCards(tempCards);
     this.randomArrayOrder();
+    setTimeout(() => {
+      cards.forEach((card) =>
+        card.classList.remove("flip", "card-back", "hidden"),
+      );
+    }, 1000);
   }
 
   randomArrayOrder() {
@@ -53,9 +66,10 @@ class GameLogic {
     return cardClicked.length > 0;
   }
 
-  updateScore(key) {
+  checkClickResult(key) {
     if (this.score + 1 === this.cards.length) {
-      alert("You won! 12/12 right");
+      this.setMessage("You won!\n12/12 right");
+      this.setButtonText("Play again?");
       this.resetGame();
       return;
     }
@@ -68,10 +82,11 @@ class GameLogic {
     }
   }
   handleLoss() {
-    alert(
-      `Game Over! ${this.score + 1}/${this.cards.length} answers correcet!`,
+    this.setMessage(
+      `Game Over!\n${this.score}/${this.cards.length} answers correct!`,
     );
-    if (this.score + 1 > this.highScore) {
+    this.setButtonText("Play again?");
+    if (this.score > this.highScore) {
       this.setHighScore(this.score);
     }
     this.resetGame();

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

@@ -3,9 +3,36 @@
   flex-direction: column;
   background: gray;
   padding: 1em;
+  cursor: pointer;
+  perspective: 1000px;
 }
 
 .card-img img {
   width: 250px;
   height: 250px;
 }
+
+.flip {
+  animation: flipCard 1s;
+}
+
+@keyframes flipCard {
+  to {
+    rotatey: 180deg;
+  }
+}
+
+.card-front .card-back {
+  -webkit-backface-visibility: hidden; /* Safari */
+  backface-visibility: hidden;
+}
+
+.card-back {
+  background: gray;
+  color: gray;
+  transform: rotateY(180deg);
+}
+
+.hidden img {
+  visibility: hidden;
+}