finalproject_description.txt

Our final project is a game called Dinopower, built from the ground-up as a React App. As such, our file structure is 
based on the default file structure for a basic React App. We chiefly used React Hooks rather than Classes, as components 
with useStates and useEffects are more user-friendly than React's class imports structure.

In lieu of a main project .pde file, our main project file this time is called index.js. It is a Javascript file 
found in the /dinopower/src directory, and it creates a webpage for playing our game. The file App.js represents 
the app itself, which is rendered by index.js in a web browser to compose the actual game. The App.js file imports 
the gamebar and soundbar components; the source code of these files is located in the /dinopower/src/components directory. 
The names of every component .js file accurately describe the contents and purpose of each file. Images are stored in 
/dinopower/src/img, and audio files are stored in /dinopower/src/audio.

The main premise of our game is to rack up the highest score by surviving as long as possible. You play as a small 
junimo sprite stuck in an infinitely looping scene populated by fire-breathing dinosaurs. You are protected by a 
bubble-shield; however, if the fire touches your bubble, it will pop. Get hit by fire again, and you will die! 
To avoid the fire, maneouver your character around the scene with the left and right arrow keys, 
and jump over ground dinosaurs with the up-arrow. Enemies respawn endlessly in waves of three, and they get faster as time progresses. 
Once you do die, your first score will be saved in your browser's cache as the new high score. This value is calculated based on the time 
that you have survived: every second is worth 10 points. Your current score is displayed at the top of the screen, and the high score 
will be saved in the browser cache once the current score beates the previous high score. 
It will be read from the cache and displayed to the screen, and it stays until you surpass your high score again 
(or if you delete the variable from the browser cache).


There are two GUI systems in the game.
The game makes up the central GUI of the screen. Four buttons control the mechanics of the game: "Controls", "Start", 
"Pause/Resume", and "Restart". Buttons are grayed-out out if they are not currently clickable. The right GUI controls the 
music of the game. There are three audio tracks that can be overlaid ontop of each other. "Music" plays a music track, 
"Arcade Sounds" simulates the sounds of an arcade room, and "People Talking" serves to remind you of the good ol' days 
when you could be around other people. The "Play/Pause" buttons control the audio, and the volume slider determines the 
volume of the respective track in the mix. The sound can be muted with the pause button, or the volume slider can be 
set all the way to the left.


Work Breakdown:
Jake: I programmed the player's primary animation of keyboard-input motion with the arrow keys using a Set of integers, 
where each integer represents an arrow-key button press. A loop verified which directions were being used at a given time, 
and the appropriate actions were then executed as long as the button is held down. This allowed for smooth motion as well as diagonal motion.
I also designed the oscillating fire animations for the dinosaurs and the rotation animation for the main character's shield.
Finally, I devised the Scoring system: how it ticks up, updates the high score, and follows the mechanics of the state of the game.

Meg: I helped add the main character sprite to the game, as well as set up the primary animations for the main character. I also worked 
with Jake to program keyboard-input motion that scales with the size of a game user's speed.

Sierra: I set up the React app and programmed the GUIs of the system. This includes the game bar buttons to start, pause, resart, 
and view the controls of the game and also includes the sound bar which has controls for pausing and playing audio and has a slider 
to control the volume. I hosted the app and did some styling and helped others with writing their sections in React.

Zak: I worked on implementing a sliding background image for the game. To do so, I collected a free licensed background 
and assembled it on Gravit.  Afterward I implemented a CSS function that loop the background every minute. 
I also worked on increasing the enemy’s speed as the game progresses. The enemy’s speeds are then reset after each game 
iteration. Moreover, I fix bugs throughout the game and finalised the shield implementation.