# Memorize it! :brain: <style> .reveal { font-size: 24px; } </style> --- ## Website intro Memorize it! is an interactive game of Memory Cards built using React.js :heart_decoration: --- #### User Stories: - [x] As a player, I want to be able to start a new game. - [x] As a player, I want to be able to flip cards and see the numbers/pictures on them. - [x] As a player, I want to be able to pair cards with the same number/picture on them. - [x] As a player, I want to see a timer indicating the remaining time to complete the game. - [x] As a player, I want to see a message indicating whether I won or lost the game. - [x] Styled for a professional user-experience. --- ### Teamwork --- ### Structure  --- ### Routing Home leads to / Game leads to /game --- ##### Home ```jsx function Home({ setName }) { function getName(e) { setName(e.target.value); } return ( {...} <input onChange={getName} type="text" name="username" placeholder="psydwinder" /> <Link to="/game">PLAY</Link> ); } ``` --- ##### Game ```jsx import Route from "../components/Route"; import Board from "../components/Board"; import Timer from "../components/Timer"; import Button from "../components/Button"; OR import { Route, Board, Timer, Button} from "../components"; ``` --- ```jsx {...} useEffect(() => { const userHasChosen = firstChoice && secondChoice const isMatched = firstChoice.src === secondChoice.src if (!userHasChosen) return; if (!isMatched) return setTimeout(resetChoice, 1000); firstChoice.matched = true; secondChoice.matched = true; resetChoice(); }, [firstChoice, secondChoice]); ``` --- ```jsx {...} {gameStarted && ( <> <Timer /> <Board cards={cards} cover={coverImage} handleChoice={handleChoice} firstChoice={firstChoice} secondChoice={secondChoice} /> </> )} {...} ``` --- ##### Challenges ##### Timer ```jsx useEffect(() => { if (timeRemaining === 0) return; const interval = setInterval(() => { setTimeRemaining(timeRemaining - 1); }, 1000); return () => clearInterval(interval); }, [timeRemaining]); return ( {timeRemaining === 0 ? ( <> <h1>You win!!</h1> <h2>Congratulations!</h2> </> ) : ( <h1>{timeRemaining} seconds remaining!</h1> )} ); } ``` --- ## KSBs --- ## Karol K7: Software design approaches and patterns, to identify reusable solutions to commonly occurring problems. S11: Apply an appropriate software development approach according to the relevant paradigm (for example object oriented, event driven or procedural) B6: Shows initiative and takes responsibility for solving problems within their own remit, being resourceful when faced with a problem to solve. --- ## Konstantina *D16* Deploy your code Deliver a suitably documented deployable solution to the customer for their use (Software Development Lifecycle -Deploy phase). *S1* Create logical and maintainable code🏗 *S2* Develop effective user interfaces --- ## Questions?