feat: added more stuff

memory-game/mg-backend/main.py

@@ -6,6 +6,7 @@ from fastapi import Depends, FastAPI
 from fastapi.middleware.cors import CORSMiddleware
 import logging
 import requests
+from random import shuffle
 import os
 from .photos import Pictures
 
@@ -78,11 +79,14 @@ def ai_cards(card: schemas.CardCreate, db: Session = Depends(get_db)):
 @app.get("/cards")
 def read_cards(skip: int = 0, limit: int = 100, db: Session = Depends(get_db)):
     cards = crud.get_cards(db, skip=skip, limit=limit)
+
+    # return the items in a random order for the game
+    shuffle(cards)
     return cards
 
 
 @app.get("/load-data")
-def load_data():
+async def load_data():
     topics = ai.generate_topics()
 
     try:
@@ -90,8 +94,6 @@ def load_data():
 
             logger.info(item)
             picture_data = photos.search(item["topic"])
-            logger.info(picture_data)
-            break
 
             card_json = ai.generate_card_json(picture_data, item)
             logger.info(card_json)

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

@@ -23,9 +23,10 @@ function App() {
         gameStarted={gameStarted}
       />
       <GameBoard
+        gameStarted={gameStarted}
+        setGameStarted={setGameStarted}
         score={score}
         setScore={setScore}
-        gameStarted={gameStarted}
         highScore={highScore}
         setHighScore={setHighScore}
       />

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

@@ -2,13 +2,7 @@ import "../styles/card.css";
 
 export default function Card(props) {
   return (
-    <div
+    <div className="card" onClick={props.onClick} data-cardname={props.title}>
-      className="card"
-      onClick={(event) =>
-        onClick(event, props.clicked, props.setScore, props.score)
-      }
-      data-cardname={props.title}
-    >
       <div className="card-img">
         <Image src={props.imgSrc} alt={props.imgAlt} />
       </div>
@@ -20,10 +14,3 @@ export default function Card(props) {
 function Image(props) {
   return <img src={props.src} alt={props.alt} />;
 }
-
-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/gameboard.jsx

@@ -1,10 +1,21 @@
 import { useEffect, useState } from "react";
 import Card from "./card";
 import "../styles/gameboard.css";
+import { GameLogic } from "../gameLogic";
 
 export default function GameBoard(props) {
   const [cards, setCards] = useState([]);
 
+  const gl = new GameLogic(
+    cards,
+    setCards,
+    props.score,
+    props.setScore,
+    props.highScore,
+    props.setHighScore,
+    props.setGameStarted,
+  );
+
   useEffect(() => {
     fetchCards({ setCards });
   }, []);
@@ -14,16 +25,13 @@ export default function GameBoard(props) {
       {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"
+                imgAlt={item.alt}
                 key={item.key}
-                setScore={props.setScore}
+                onClick={() => gl.handleClick(item.key)}
-                score={props.score}
-                clicked={item.clicked}
               />
             );
           })}
@@ -43,11 +51,3 @@ async function fetchCards({ setCards }) {
 
   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/gameLogic.js

@@ -0,0 +1,82 @@
+class GameLogic {
+  constructor(
+    cards,
+    setCards,
+    score,
+    setScore,
+    highScore,
+    setHighScore,
+    setGameStarted,
+  ) {
+    this.cards = cards;
+    this.setCards = setCards;
+    this.score = score;
+    this.setScore = setScore;
+    this.highScore = highScore;
+    this.setHighScore = setHighScore;
+    this.setGameStarted = setGameStarted;
+  }
+
+  handleClick(key) {
+    this.updateScore(key);
+    const tempCards = this.cards.map((card) => {
+      if (card.key === key) {
+        card.clicked = true;
+      }
+      return card;
+    });
+    this.setCards(tempCards);
+    this.randomArrayOrder();
+  }
+
+  randomArrayOrder() {
+    const randomArr = [...this.cards];
+
+    let len = randomArr.length,
+      t,
+      i;
+
+    while (len) {
+      i = Math.floor(Math.random() * len--);
+      t = randomArr[len];
+      randomArr[len] = randomArr[i];
+      randomArr[i] = t;
+    }
+    this.setCards(randomArr);
+  }
+
+  checkClick(key) {
+    const cardClicked = this.cards.filter(
+      (item) => item.key === key && item.clicked === true,
+    );
+
+    return cardClicked.length > 0;
+  }
+
+  updateScore(key) {
+    if (!this.checkClick(key)) {
+      this.setScore(this.score + 1);
+    } else {
+      console.log("Game Over");
+      if (this.score + 1 > this.highScore) {
+        this.setHighScore(this.score);
+      }
+      // reset state
+      this.score = 0;
+      this.setScore(this.score);
+      this.setGameStarted(false);
+    }
+  }
+  async fetchCards() {
+    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() };
+    });
+
+    this.setCards(gameCards);
+  }
+}
+
+export { GameLogic };