feat: backend database added

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

@@ -1,16 +1,34 @@
 import { useState } from "react";
 import "./App.css";
+import Button from "./components/button";
 import GameBoard from "./components/gameboard";
 import Scoreboard from "./components/scoreboard";
 
 function App() {
+  const [gameStarted, setGameStarted] = useState(false);
   const [score, setScore] = useState(0);
   const [highScore, setHighScore] = useState(0);
 
   return (
     <>
-      <Scoreboard score={score} highscore={highScore} />
-      <GameBoard score={score} setScore={setScore} />
+      {!gameStarted ? (
+        <Button
+          onClick={() => setGameStarted(!gameStarted)}
+          text="Start Game"
+        />
+      ) : null}
+      <Scoreboard
+        score={score}
+        highscore={highScore}
+        gameStarted={gameStarted}
+      />
+      <GameBoard
+        score={score}
+        setScore={setScore}
+        gameStarted={gameStarted}
+        highScore={highScore}
+        setHighScore={setHighScore}
+      />
     </>
   );
 }

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

@@ -0,0 +1,9 @@
+import "../styles/button.css";
+
+export default function Button(props) {
+  return (
+    <button className={`${props.className} + btn`} onClick={props.onClick}>
+      {props.text}
+    </button>
+  );
+}

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

@@ -4,7 +4,9 @@ export default function Card(props) {
   return (
     <div
       className="card"
-      onClick={(event) => onClick(event, props.setScore, props.score)}
+      onClick={(event) =>
+        onClick(event, props.clicked, props.setScore, props.score)
+      }
       data-cardname={props.title}
     >
       <div className="card-img">
@@ -19,8 +21,9 @@ function Image(props) {
   return <img src={props.src} alt={props.alt} />;
 }
 
-function onClick(event, setScore, score) {
+function onClick(event, clicked, setScore, score) {
   // implement something to handle the things ID
   setScore(score + 1);
+  clicked = true;
   console.log(event.currentTarget.dataset.cardname);
 }

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

@@ -0,0 +1,7 @@
+export default function Footer() {
+  return (
+    <footer>
+      <a href="https://www.pexels.com">Photos provided by Pexels</a>
+    </footer>
+  );
+}

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

@@ -4,29 +4,50 @@ import "../styles/gameboard.css";
 
 export default function GameBoard(props) {
   const [cards, setCards] = useState([]);
+
   useEffect(() => {
     fetchCards({ setCards });
   }, []);
 
   return (
-    <div className="gameboard">
-      {cards.map((item) => {
-        return (
-          <Card
-            title={item.topic}
-            imgSrc={item.medium_url}
-            imgAl="Placeholder"
-            key={item.topic}
-            setScore={props.setScore}
-            score={props.score}
-          />
-        );
-      })}
-    </div>
+    <>
+      {props.gameStarted ? (
+        <div className="gameboard">
+          {cards.map((item) => {
+            console.log(item.topic, item.clicked);
+            return (
+              <Card
+                title={item.topic}
+                imgSrc={item.medium_url}
+                imgAl="Placeholder"
+                key={item.key}
+                setScore={props.setScore}
+                score={props.score}
+                clicked={item.clicked}
+              />
+            );
+          })}
+        </div>
+      ) : null}
+    </>
   );
 }
 
 async function fetchCards({ setCards }) {
-  const cards = await fetch("http://localhost:8000/");
-  setCards(await cards.json());
+  const cards = await fetch("http://localhost:8000/cards");
+  const jsonCards = await cards.json();
+
+  let gameCards = await jsonCards.map((c) => {
+    return { ...c, clicked: false, key: crypto.randomUUID() };
+  });
+
+  setCards(gameCards);
+}
+
+function shuffleCards(arr) {
+  for (let i = arr.length - 1; i > 0; i--) {
+    let j = Math.floor(Math.random() * (i + 1));
+    [arr[i], arr[j]] = [arr[j], arr[i]];
+    return arr;
+  }
 }

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

@@ -2,9 +2,13 @@ import "../styles/scoreboard.css";
 
 export default function Scoreboard(props) {
   return (
-    <div className="scoreboard">
-      <p>SCORE: {props.score}</p>
-      <p>HIGH SCORE: {props.highscore}</p>
-    </div>
+    <>
+      {props.gameStarted ? (
+        <div className="scoreboard">
+          <p>SCORE: {props.score}</p>
+          <p>HIGH SCORE: {props.highscore}</p>
+        </div>
+      ) : null}
+    </>
   );
 }

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

@@ -0,0 +1,59 @@
+:root {
+  /* Grays */
+  --lightest-gray: 208, 21%, 93%;
+  --lighter-gray: 210, 16%, 76%;
+  --light-gray: 208, 12%, 58%;
+  --dark-gray: 207, 12%, 43%;
+  --darker-gray: 209, 15%, 28%;
+
+  --dark-blue: 246, 87%, 30%;
+  --blue: 219, 100%, 57%;
+  --light-blue: 219, 100%, 69%;
+
+  --green: 158, 95%, 34%;
+  --green-hover: 158, 95%, 28%;
+}
+
+.btn {
+  border-radius: 0.4rem;
+  padding: 1rem;
+  cursor: pointer;
+  text-decoration: none;
+  display: inline-block;
+  border: none;
+  font-size: 1.2rem;
+  flex: 1;
+}
+
+.btn:hover {
+  /* background-color: hsl(var(--dark-gray)); */
+}
+
+.normal-btn {
+  background-color: hsl(var(--light-gray));
+  transition:
+    background-color 500ms ease-in-out,
+    color 500ms ease-in-out;
+}
+
+.normal-btn:hover {
+  background-color: hsl(var(--dark-gray));
+  color: hsl(var(--lighter-gray));
+}
+
+.submit-btn {
+  background-color: hsl(var(--green));
+  transition: background-color 600ms;
+}
+
+.submit-btn:hover {
+  background-color: hsl(var(--green-hover));
+}
+
+.clear-btn {
+  background-color: hsl(var(--lighter-gray));
+  transition: background-color 600ms;
+}
+.clear-btn:hover {
+  background-color: hsl(var(--light-gray));
+}