feat: basic api complete

basic grid layout

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

@@ -1,11 +1,16 @@
 import { useState } from "react";
 import "./App.css";
 import GameBoard from "./components/gameboard";
+import Scoreboard from "./components/scoreboard";
 
 function App() {
+  const [score, setScore] = useState(0);
+  const [highScore, setHighScore] = useState(0);
+
   return (
     <>
-      <GameBoard />
+      <Scoreboard score={score} highscore={highScore} />
+      <GameBoard score={score} setScore={setScore} />
     </>
   );
 }

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

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

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

@@ -4,7 +4,6 @@ import "../styles/gameboard.css";
 
 export default function GameBoard(props) {
   const [cards, setCards] = useState([]);
-
   useEffect(() => {
     fetchCards({ setCards });
   }, []);
@@ -14,10 +13,12 @@ export default function GameBoard(props) {
       {cards.map((item) => {
         return (
           <Card
-            title={item}
-            imgSrc="placeholder"
+            title={item.topic}
+            imgSrc={item.medium_url}
             imgAl="Placeholder"
-            key={item}
+            key={item.topic}
+            setScore={props.setScore}
+            score={props.score}
           />
         );
       })}
@@ -26,6 +27,6 @@ export default function GameBoard(props) {
 }
 
 async function fetchCards({ setCards }) {
-  // some async thing that loads the cards
-  setTimeout(() => setCards([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]), 2000);
+  const cards = await fetch("http://localhost:8000/");
+  setCards(await cards.json());
 }

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

@@ -0,0 +1,10 @@
+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>
+  );
+}

memory-game/mg-frontend/src/index.css

@@ -23,6 +23,7 @@ a:hover {
 }
 
 body {
+  padding: 0;
   margin: 0;
   display: flex;
   place-items: center;

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

@@ -1,9 +1,8 @@
 .card {
   display: flex;
   flex-direction: column;
-  min-width: 300px;
-  min-height: 300px;
   background: gray;
+  padding: 1em;
 }
 
 .card-img img {

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

@@ -1,5 +1,7 @@
 .gameboard {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  gap: 25px;
+  display: inline-grid;
+  /* grid-template-columns: 1fr 1fr 1fr; */
+  grid-template-columns: repeat(auto-fit, minmax(min(270px, 90%), 1fr));
+  gap: 1rem;
+  width: 75vw;
 }

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

@@ -0,0 +1,3 @@
+.scoreboard {
+  text-align: right;
+}