feat: backend database added

memory-game/mg-backend/ai.py

@@ -16,6 +16,7 @@ class Topics(BaseModel):
 
 class Results(BaseModel):
     topic: str
+    alt: str
     medium_url: str
     photo_id: int
     photo_url: str
@@ -35,7 +36,7 @@ class AI:
         )
 
         prompt = """
-          Return 12 items for a toddler aged 2 to 3 to choose from in a memory game. 
+          Return 12 items for a toddler aged 2 to 3 to choose from in a memory game. e.g. "ball", "car" . Don't use my examples words 
           """
         response = model.generate_content(prompt).text
 
@@ -43,9 +44,11 @@ class AI:
 
     def generate_card_json(self, photo_payload, topic):
         prompt = f"""
-        This JSON payload will need to be analayzed. Your job is to pick the alt field with the best match for the toddler matching game. return the properties of the object
+        This JSON payload will be analyzed for a toddler matching game. Your job is to identify which object within the payload that best matches the topic "{topic}".
+        Define a "best match" as containing the keywords from the topic within the "alt" field of the image object that would be appropriate for a toddler's matching game. a "best match" should also be the primary subject in the photo, if there are other items in the alt text then that's determined to be a bad match.  
+
+        if its determine the alt text is not a great match for the toddler game set the `bad_match` to True and for best matches set to False
         {photo_payload} 
-        and the original topic is {topic}. If the alt text and topic are a bad match set the bad_match bool.
         """
 
         model = genai.GenerativeModel(

memory-game/mg-backend/crud.py

@@ -0,0 +1,20 @@
+from sqlalchemy.orm import Session
+
+from . import models, schemas
+
+
+def get_card(db: Session, card_id: int):
+    return db.query(models.Card).filter(models.Card.id == card_id).first()
+
+
+def get_cards(db: Session, skip: int = 0, limit: int = 100):
+    return db.query(models.Card).offset(skip).limit(limit).all()
+
+
+def create_card(db: Session, card: schemas.CardCreate):
+    db_card = models.Card(**card.model_dump())
+    db.add(db_card)
+    db.commit()
+    db.refresh(db_card)
+
+    return db_card

memory-game/mg-backend/database.py

@@ -0,0 +1,13 @@
+from sqlalchemy import create_engine
+from sqlalchemy.ext.declarative import declarative_base
+from sqlalchemy.orm import sessionmaker
+
+SQLALCHEMY_DATABASE_URL = "sqlite:///./memory_game.db"
+
+engine = create_engine(
+    SQLALCHEMY_DATABASE_URL, connect_args={"check_same_thread": False}
+)
+
+SessionLocal = sessionmaker(autocommit=False, autoflush=False, bind=engine)
+
+Base = declarative_base()

memory-game/mg-backend/main.py

@@ -1,12 +1,18 @@
 from .ai import AI
 from .test_data import data
 from dotenv import load_dotenv
-from fastapi import FastAPI
+import json
+from fastapi import Depends, FastAPI
 from fastapi.middleware.cors import CORSMiddleware
 import logging
+import requests
 import os
 from .photos import Pictures
 
+from . import crud, models, schemas
+from .database import SessionLocal, engine
+from sqlalchemy.orm import Session
+
 logger = logging.getLogger("uvicorn.error")
 logger.setLevel(logging.DEBUG)
 load_dotenv()
@@ -24,6 +30,17 @@ app.add_middleware(
     allow_headers=["*"],
 )
 
+models.Base.metadata.create_all(bind=engine)
+
+
+## DB Deps
+def get_db():
+    db = SessionLocal()
+    try:
+        yield db
+    finally:
+        db.close()
+
 
 PEXELS_API_KEY = os.getenv("PEXELS_API_KEY")
 photos = Pictures(PEXELS_API_KEY)
@@ -51,3 +68,43 @@ async def read_main():
     # except Exception as e:
     #     logger.error(e)
     #     return {"error": "uname to handle request"}
+
+
+@app.post("/ai-cards", response_model=schemas.Card)
+def ai_cards(card: schemas.CardCreate, db: Session = Depends(get_db)):
+    return crud.create_card(db=db, card=card)
+
+
+@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 cards
+
+
+@app.get("/load-data")
+def load_data():
+    topics = ai.generate_topics()
+
+    try:
+        for item in topics:
+
+            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)
+
+            r = requests.post(
+                "http://127.0.0.1:8000/ai-cards",
+                json=card_json,
+                headers={"Content-Type": "application/json"},
+            )
+            logger.info(r.json())
+
+        return {"success": "entered into the db"}
+
+    except Exception as e:
+        logger.error(e)
+        return {"error": "uname to handle request"}

memory-game/mg-backend/models.py

@@ -0,0 +1,15 @@
+from sqlalchemy import Boolean, Column, Integer, String
+
+from .database import Base
+
+
+class Card(Base):
+    __tablename__ = "card"
+
+    id = Column(Integer, primary_key=True)
+    photo_id = Column(Integer)
+    medium_url = Column(String)
+    photo_url = Column(String)
+    topic = Column(String, index=True)
+    bad_match = Column(Boolean)
+    alt = Column(String)

memory-game/mg-backend/schemas.py

@@ -0,0 +1,21 @@
+from pydantic import BaseModel
+
+
+class CardBase(BaseModel):
+    photo_id: int
+    medium_url: str
+    photo_url: str
+    topic: str
+    alt: str
+    bad_match: bool
+
+
+class CardCreate(CardBase):
+    pass
+
+
+class Card(CardBase):
+    id: int
+
+    class Config:
+        orm_mode = True

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