From 4902ed48f9ab4f102a04ed9f2cf5f554998061bf Mon Sep 17 00:00:00 2001 From: Mike Smith <89040888+smiggiddy@users.noreply.github.com> Date: Sun, 21 Jul 2024 22:22:21 -0400 Subject: [PATCH] feat: added more stuff --- memory-game/mg-backend/main.py | 8 +- memory-game/mg-backend/memory_game.db | Bin 0 -> 12288 bytes memory-game/mg-frontend/src/App.jsx | 3 +- .../mg-frontend/src/components/card.jsx | 15 +--- .../mg-frontend/src/components/gameboard.jsx | 26 +++--- memory-game/mg-frontend/src/gameLogic.js | 82 ++++++++++++++++++ 6 files changed, 103 insertions(+), 31 deletions(-) create mode 100644 memory-game/mg-backend/memory_game.db create mode 100644 memory-game/mg-frontend/src/gameLogic.js diff --git a/memory-game/mg-backend/main.py b/memory-game/mg-backend/main.py index 17f8abb..8e8a4f5 100644 --- a/memory-game/mg-backend/main.py +++ b/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) diff --git a/memory-game/mg-backend/memory_game.db b/memory-game/mg-backend/memory_game.db new file mode 100644 index 0000000000000000000000000000000000000000..df67817774411fce8d877af8c6959ecbfb4bff5d GIT binary patch literal 12288 zcmeHMO>7%Q6!yk#vbK{fQe;J;sx*~QX+NeEEb!GI}UerO+n#Y^Z?(=bLE#6=VQyC+H>HY zn*TGVt-*)9qyka_sen{KDj*e*3P=T{0#X5~fK)&#@LwyiH8s8XdRk#-zir$#?;h&R zX&-vrHgzn;tIb+@zecX_Y}Vcv4-}2`!sO6)#zUg_M z?Y_CPVji=u;V#?8UBhyhb$+}O>@@C5F_SChOKU5_Ljx-fjmsa|M)z$t@c0JQupPs7 zFYE4xXZA;~(`{YuZR87?sE6Tj_(Jod6UsZZYdWmcF{s(6F6%JIjQUs!J-fK^5#AwN z0!hq1*$a^OmQpF8bkjdrO89fiKl4$KFXfcYX9~sDlaz#Qaz?HJJG*CoV$crP2d)sT z>oB`FLY}tSKccMPro$ebpi|d#*pRlF>5gc};zPrs;o!v6Uep??V{0T(L9~Wi>_Te< zS|bP88rj3v$R@T%>OpJ%2T2j`rL@|pZ#)<)&FWevpDPwlY7-hK7pG&oy?{NVI(L{w z9mD9*0lZi_L*@bbsCxv~;SR_#QbjOn0+`%>3MT%wL;~mXaaz5!^uy{{ZrQaG%*WD6 zZlQ51K2JO!gF8VLL0bIv*lGSU;{yJEmd5GBmwjxbj>YjsReSW|a?-*%snS9r5G< z@Zs8W{hetMP;Ei2zWT=J;~5sSh0J>H)C3g9$vNs4cMUqQ!yFCCre#4isLni^4SR-i zHGti=MJ^$Y4yhoFRGH^j&Wn)6(}{KU$&X_R6-v2GF>{iSuuV<}ej~L;!Qdfe+&22O z#rY8pyTtN7B5>Roqy`{J1+2bxPLQB!Rad^=9ZMpcDU@Ew3W05M5-n?BP)J_=t`X$D zE+jl4VmfV{h$F*-Ed4a`i*cZ{0@X+(s1{_vEv!Z=;6bW)f@)EQ|1d5l;RVR>PV>=N zy2aJ?TyFhTh7XNrK^UhTZg3(WwhZQkYi>jx4!)>=^oW^<8<<#d6|jXXZbX`Z_HRsy zV5Sz;vhwipSa#V=E}J=>L;~C7+#E=e$SjJdZCkL*I|CEem*|$EsR=m|DTVPXqm9%N z=GT>QeO*-7=lK_7*{s8USj?VWU&1yy8}TNGuU-xtQD!=}#rg&fyNsTny>d!+rM{iJ=beXD&54tYrhqyka_sen{KDj*e*3P=T{0#X5~ zfK)&#aK;Lx;un21g9EPsrbc2bSm&K(JT=J literal 0 HcmV?d00001 diff --git a/memory-game/mg-frontend/src/App.jsx b/memory-game/mg-frontend/src/App.jsx index fc29d8d..ee88b9a 100644 --- a/memory-game/mg-frontend/src/App.jsx +++ b/memory-game/mg-frontend/src/App.jsx @@ -23,9 +23,10 @@ function App() { gameStarted={gameStarted} /> diff --git a/memory-game/mg-frontend/src/components/card.jsx b/memory-game/mg-frontend/src/components/card.jsx index bff538b..62d1e2f 100644 --- a/memory-game/mg-frontend/src/components/card.jsx +++ b/memory-game/mg-frontend/src/components/card.jsx @@ -2,13 +2,7 @@ import "../styles/card.css"; export default function Card(props) { return ( -
- onClick(event, props.clicked, props.setScore, props.score) - } - data-cardname={props.title} - > +
{props.imgAlt}
@@ -20,10 +14,3 @@ export default function Card(props) { function Image(props) { return {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); -} diff --git a/memory-game/mg-frontend/src/components/gameboard.jsx b/memory-game/mg-frontend/src/components/gameboard.jsx index 03f1b2d..24c7b38 100644 --- a/memory-game/mg-frontend/src/components/gameboard.jsx +++ b/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 ? (
{cards.map((item) => { - console.log(item.topic, item.clicked); return ( gl.handleClick(item.key)} /> ); })} @@ -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; - } -} diff --git a/memory-game/mg-frontend/src/gameLogic.js b/memory-game/mg-frontend/src/gameLogic.js new file mode 100644 index 0000000..72ce56a --- /dev/null +++ b/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 };