Assignment 6: Pokemon

• 💯 Worth: 6%
• 📅 Due: See due date on Moodle.
• 🚫 Penalty: Late submissions lose 10% per day to a maximum of 3 days. Nothing is accepted after 3 days and a grade of 0% will be given.

🎯 Objectives

• Read and understand all of the Pokemon notes and source code.
• Implement a run feature that allows the player to exit a battle before their Pokemon faints.
• Implement a Menu that appears during the player Pokémon’s level up that shows how much each state went up by.
• Implement health and experience progress bars for a sleeker looking UI.

🔨 Setup

1. Fork (do not download as a zip) the starter repository from GitHub. Make sure you use the link from Moodle to fork the proper repository for this assignment.
2. Start Live Server in VSC by right-clicking on index.html and selecting Open with Live Server. This will open a new tab in your browser with the game running.
3. If you have an ad blocker, turn it off for localhost.

🔍 Context

To complete this assignment, you should read and understand all of the Pokemon notes and source code.

Caution

If you’re not comfortable with any of the above, please send me a message on Teams and I can help you! It is your responsibility to ensure you have learned all concepts we’ve seen so far so that you can do the assignment effectively.

Welcome to your seventh (and final) assignment! This week’s code is probably the most complicated we’ve looked at during the semester, but the assignment itself is fairly small in comparison. However, you will need to know how many of the pieces work and fit together in order to accomplish the task ahead.

🚦 Let’s Go

Note

Don’t just go off of the gifs below! Make sure you understand the feature and read the descriptions before implementing it. The gif is just there to give you a visual representation of what the feature should look like.

🏃🏾‍♀️ Run

The fade transition was making the GIF file size huge so I took it out temporarily while recording. The run functionality is the same regardless.

Implement a run feature that allows the player to exit a battle before their Pokemon faints.

Tip

BattleMenuState is probably a good place to start!

🧮 Stat Menu

Implement a dialogue that appears during the player Pokémon’s level up that shows, for each stat, X > Y, where X is the old stat and Y is the new stat. This dialogue should appear right after the “Level Up” dialogue that appears at the end of a victory where the player has indeed leveled up.

Tip

BattleTurnState::processLevelUp() is probably a good place to start!

🔄️ Progress Bars

Implement health and experience progress bars for a sleeker looking UI. See previous GIF for a visual. Your bars don’t have to look exactly like mine, they just need to clearly indicate that health/experience values are being affected accordingly.

The health bars should deplete when either Pokémon takes damage in a battle.

• When their health is <= 100%, the bar should be green.
• When their health is <= 50%, the bar should be yellow.
• When their health is <= 25%, the bar should be red.
• The player Pokémon’s health should still have the text indicator (ex. 4/12) as well as the bar, whereas the opponent Pokémon’s health should only have the bar.

When the player’s Pokémon wins a battle, their experience bar should fill up based on the amount of experience they gained. The opponent Pokémon does not have an experience bar.

Tip

Make a new UI element called ProgressBar where you can set a current value and maximum value. You can then render some rectangles using these initial values as the width of the rectangles. Instantiate ProgressBar objects inside PlayerPanel and OpponentPanel, render and update them as needed, and you should be good to go!

💡 Work Smarter

• You’re going to be starting the game over and over and over again, dozens of times. Instead of going through the title screen every time you refresh, make it so that you start in the play state from the outset.
• When testing a particular feature you’re implementing, hardcode the parameters to work to your advantage.
  • For example, when working on the progress bars, set up your environment so that you always start in a battle right away instead of having to walk through grass every time to encounter a Pokemon.

Taking the time at the beginning to set up your game in a state that is conducive to testing will save you tons of time down the road - trust me! And this isn’t just for game programming, this goes for any type of development you do. 😉

🌿 Git

We will be using GitHub and Gradescope to submit in this course. You can use either the Git CLI or you can also use VSC’s built-in Git GUI client.

🖱️ GUI

1. In VSC, click on the third icon down in the left navigation bar to see a list of files that have changed and are ready to be staged.
2. Hover over where it says Changes (right below the commit textbox) and click + to stage all the modified files to be committed. Alternatively, you can add specific files by clicking the + next to the individual file.
3. Type a commit message into the textbox and click the checkmark above it to commit all the files that were just staged.
4. Click ... and then push to push the commit(s) up to GitHub.

⌨️ CLI

1. Run git status to see a list of files that have changed and are ready to be staged.
2. Run git add . to stage all the modified files to be committed. Alternatively, you can add specific files like this: git add src/Pokemon.js.
3. Run git commit -m "A descriptive message here." (including the quotes) to commit all the files that were just staged.
4. Run git push to push the commit(s) up to GitHub.

Regardless of the method you choose, it is very important that you commit frequently because:

• If you end up breaking your code, it is easy to revert back to a previous commit and start over.
• It provides a useful log of your work so that you (and your teammates if/when you’re on a team) can keep track of the work that was done.

📥 Submission

Note

Note that the grading criteria can be found on Gradescope, but only after you’ve submitted. You’re able to submit infinitely, so it’s be a good idea to submit a blank repo first in order to reference the grading criteria while working on this assignment.

Once you’ve made your final git push to GitHub, here’s what you have to do to submit:

1. Go to Gradescope, click the link for this assignment, select the correct repository and branch from the dropdown menus, and click Upload.
2. Click the blue Add Submission button at the top of this page.
   1. Title: A6 Pokemon Submission. Don’t include your name if you want to remain anonymous during peer review.
   2. Submission content: Describe which features you implemented in the description of the workshop submission along with anything your reviewers should know about your game/code.
   3. Zip your assignment folder and attach it as a file. If you want to remain anonymous, ensure the zip file doesn’t contain your name, and also make sure to not include the .git folder before zipping.
3. Click the Save changes button at the bottom.
4. You’ll be able to start assessing your peers the day after the assignment’s late cutoff date.