Grace and Emma Final Checkpoint Plan

[gwang1224]

Main Focus 👁️

To finalize cyber game and connect them to the rest of the game. All games are functional but not fully connected to the rest of the map. We aim to improve user experience and overall playability of the games by fixing the styling and adding additional features that would allow the user to easily understand and learn computer science concepts.

Tasks !!!!

• [x] Gravity game: make text readable✅, adjust speed ✅, make terms not overlap✅, fix so terms don't get cut off on the right✅, when press close the game freezes and resumes once click on game again✅
• [x] Fix styling to make 3 games appear on computer screen
• [x] Password game: buttons not working when press✅, make buttons appear on screen no matter size of email text✅, fix why after reset the check button doesn't work anymore✅
• [x] Reset button for each game so user can play multiple times to get more points
• [x] Make play cyber games button available on bottom menu
• [x] Gravity game: Connect backend database to frontend gravity game so terms are randomized✅, changed terms to be categorized by csa, csp, and cyber✅
• [ ] Integrate new gravity game background into comp screen, reset button, close button, back buttons
• [ ] Fix positioning for elements so pop up fits and doesn't move on all screen sizes

The Plan 📜

Mon-Tue: Discussion & Design Plan

• [x] Talk with map people (Luna, Vivian, Aliya, etc) about connecting cyber house to main map
• [x] Fix CORS error for connecting backend and frontend in gravity game
• [x] Checkpoint: Present styling transformation plan to rest of P1 & P3 team for approval

Wed-Friday: Styling & User experience

• [x] Cyber house and main map connected
• [x] Fix styling of cyber games based on previous days plan
• [x] Create better terms in the terms database

Weekend: Finish & Collect Feedback

• [x] Finalize all tasks
• [x] Collect feedback on UI/UX and implement improvements
• [x] Checkpoint: everyone knowledgeable of each other's work and what need to do moving forward

Demo/Proof of completion 👍

• Github Commits
• Live Demo: character entering from main map to cyber house --> playing each of three games, tutorial for first time users
• Check Box Clicked

Styling before ⬅️

Gravity:

Ideal finish

Password:

Phishing:

Styling after

Gravity

[emmaxshen]

Logging of Progress

Tuesday

What we are starting off with: game buttons not in appropriate place

After: Aliya found trick to keep game icons in place by putting invisible buttons on top of them and having that have a fixed position. Looks MUCH better

Wednesday

• pop up window so that it looks like user is actually playing game on computer

• aligned pop up with computer screen
• making game more enjoyable: text more readable, adjust speed of terms falling, make it so that terms don't overlap one another (see isOverlapping function below)

Thursday

• corner cases: fix so terms don't get cut off on the right (control random x position), when press close the game freezes and resumes once click on game again (used flags to control game state, skip drawing and game loop if paused and toggle game pause state if canvas is clicked once again)

Friday

• make phishing attack game and password game appears on comp screen

Sunday

• fix phishing email attack game so that it actually works when user presses phishing or legitimate button
• DOMContentLoaded Event: ensures the script runs only after the DOM is fully loaded to prevent issues with elements not being found
• event Listeners: attached to buttons after the DOM is ready to ensure they exist when the script is executed

• added reset button to every game so that user can play multiple times to accumulate points

Monday

• enter cyber house button on menu (always accessible)

[gwang1224]

Tuesday

• Created pixel art for gravity backend
• Attempted to implement backend for the game

Thursday/Friday

Status of Gravity: Ugly and doesn't use backend

Commit

Status by end:

• Gravity is still ugly but has a nice background
• Backend is connected and function is created that calls backend everytime a new term pops up on screen
• Only applicable for CSP terms at the moment

• New start page
• initially was going to make 3 separate pages for csp, csa, and cyber, but then realized a button that allows the user to select and then use that input to call the backend would be a lot easier

• start button for each of the games (CSA, CSP, Cyber)
• modified function to include parameter for what game is played

Weekend

• final styling
• making everything work on deployed

realized that window size was not full screen because it did not take the entire window width

made canvas size a variable so that it would be applicable for all screen sizes

• attempted to put the gravity game on the computer screen but somehow changed the background for the password and phishing games as well
• ended up just linking game because the computer screen is too small for the game anyway and full screen seems better for use experience

updated backend with easier terms because people said it was too hard

End game