# Project Week 8 ## "Interactive game-like thing" Jo and Mariya --- ## Concept --- <!-- This week, we discovered about VS Code's collaboration tool, *Live Share*. When sharing an editor in a collaboration session for the first time, I exclaimed "there's a ghost in my code!". And thus the project's idea was born! :baby_chick: --> "There's a ghost in my code!"  --- Inspired by that 1980 classic arcade game, Pac-Man, this is… --- ### :ghost: VS Code Live *Scare* !! :ghost: --- ## Initial Design - Figma  ---  --- ## Project Features - Query Github API - Animated Ghosts - Score - form of persistent state - Deployed to Netlify - Changed the Domain name - Favicon --- ## Project Board https://github.com/fac21/week8-MJ/projects/2 --- <div style="font-size: 2.5rem;"> | Story | Estimate | Actual | | --- | --- | --- | | Persistent state/interactivity | 2 | 2 | | CSS| 2 | 2 | | Static assets | 2 | 1 | | Design | 2 | 1 | | Server setup | 2 | 1 | | Code outline | 2 | 1 | | Deploy on Netlify | 2 | 2 | | Accept user input | 2 | 3 | | Use API data in UI | 2 | 3 | | Query API | 2 | 3 | | --- | --- | --- | | TOTAL | 20 | 18 | </div> --- ## Demo <!-- Pick a voluntare --> Our deployed site: [boo-lean-said-the-ghost.netlify.app](https://boo-lean-said-the-ghost.netlify.app) --- <div style="font-size: 3rem;"> ## What We Learned - **REACT!** - Game states - Passing props around - **FIGMA** - Thank you @Ephie!! :star: - Wire framing - Exporting SVGs - Iconify plug-in - Glow CSS - Thank you @Shaya!! :star: -  </div> --- ## Challenges --- - Knowing how to start...  --- - Internet issues :computer: :broken_heart: - Absences: - Mariya - 3.30-4pm - Jo - 3.00 - 3.30pm --- ## Deployment challenges - Nested folders were a problem! - We added: - `npm run build` to the build command field - `dist` to the publish directory field - `./mj-app` to the base directory field ---  --- ## Specific Code Challenges - Incrementing the score (we needed to pass a function to setScore)  **NOT**  --- ## Specific Code Challenges - Keeping track of score state during the game - This is needed, to move the game to end-game state. `console.log(gameState)` `console.log(props.currentScore, numberNeededToWin)` ---  ---  --- ## Stretch Goals - Glow for ghosts - Make end game screen work - Different levels for ghost difficulty - Refactor to make React-y ---  --- # THANKS!! <!-- - Our idea, and project features - Code - Problems/things we learned ## Ideas - Github Api - most wanted - Pokemon API, click on moving pokemon, Pokemon battle - Snake style game: https://github.com/fac19/snake - Quiz with login via Github - Ghosts in VSCode - eating code like a snake, or moving randomly ## How We Worked - Discussed ideas - Set up Vite together - Worked on Figma together (learned how to collaborate and export SVGs) - Worked in index.html first so we could convert to React components ## Important Links [Project brief](https://learn.foundersandcoders.com/course/syllabus/client-side-app/project/) ``` Co-authored-by: Mariya Peychinova <mariapeichinova@gmail.com> Co-authored-by: Jo Humphrey <31373245+jamdelion@users.noreply.github.com> ``` [Figma designs](https://www.figma.com/file/Gs6GmIPE8WnvyRsObB3Yc1/Untitled?node-id=2%3A3) ## Problems - knowing how to start - internet issues - Deploying to Netlify - the nested folders stopped us, but we added: - `npm run build` to the build command field - `dist` to the publish directory field - `./mj-app` to the base directory field  - Incrementing the score (we needed to pass a function to setScore) - Keeping track of score state in gameboard to move game to end-game-state ## Absences Mariya - 3.30-4pm Jo - 3.00 - 3.30pm ## Inspiration [GOT quiz](https://nostalgic-fermat-f796f0.netlify.app/) [GOT quiz code](https://github.com/fac19/week10-metalHeads/blob/master/src/App.js) [Guac-A-Mole](https://github.com/fac21/Guac-A-Mole/blob/main/script.js) [snake game](https://github.com/fac19/snake) [Pokemon chase game](https://github.com/fac19/week10-gv) VSCode Live Scare!! "BOO!lean ## Stretch Goals - Glow for ghosts - Make end game screen work - Change netlify name -->