# Midterm Project - Group 3

**Brief Summary:** We have created a fun game where the player has to pick trash in New York City to keep it clean. The player does that by hitting the 'Start' button to start playing. They pick trash (banana peels, soda cans, and poly bags) using the W/A/S/D keys on their keybaord. Clear instructions are provided on their computer screen. When they are playing a 15 second countdown timer starts that keeps a track of time they take. A progress bar also shows up, increasing ascendingly as more trash is picked up. Once all trash is picked up, the timer stops and the players gets notificed by "Wohoo! You are a winner!". A 'Replay' button also comes up giving the player another chance to play. By chance, if the player is unable to finish picking up all trash under 15 seconds so they get notified that they have lost ("You lost!") and the timer stops.

**Group members:**
> Jianan (jl6022): Focus on generating the map, player, and trashes; resolve the issue on how to call the trash component's "pickup()" method by using "watch".
>
> Namita Namita (nn2527): Created the scoreboard, countdown timer and Start+Replay buttons. Also, did the CSS.
>
> Yuting(yz4072): Focus on create the progress bar and update it via $emit with the team.
>
> Wen Xuan Siow (Caelen) wxs2103: Focus on winning condition, "You win" display, and the reset button with the team.

---

EXTRA INFORMATION:

**Overall design concept:**
1) First we generate a map with coordinates, and then we have 1 player and 10 trashes at random positions.
2) We allow user to move the player by typing "W/A/S/D". When the player is close to a trash, the trash will disappear and the score will increase by 1.
3) When all the trash is picked up, "Wohoo! You are a winner" will be dsiplayed. And the player can click the "Replay" button to replay.
4) There is a 15 second time limit after which the the user loses the game, "You lost!". But if they successfully pick up all the trash within 15 seconds then the timer stops.

**Struggles:**

* Struggle with WASD key with Vue where we tried native js code and onKeyStroke but both did not work. Therefore, we decided to use input box to solve the issue.
* Struggle with calling the trash component's `pickup()` method from the root. If we can achieve this, then we will have "smart" trashes detect whether the player is near, rather than store all the coordinates of trashes in the root and manually examine them. Our struggle was how the root can call `pickup()` (a checking+pickup function in the trash component) whenever the player moves (which is something that happens in the root). We tried to pass the change of "W/A/S/D" input into the component, which resulted in the regenertion of trash whenever the player moves. So we created a variable called `keycopy` which copies all the keyboard inputs. Whenever `keycopy` changes, the trash component will call the `pickup()` method to hide the trash if the player is close.
* Struggle with reseting the whole page by using Vue (reset the trashes and score both). We tried jquery and location.reload() but both did not work. Then, we came out with what we written in the codepen: ` replay() {
this.$parent.score = 0;
this.picked = false;
this.$parent.gamefinished = false;
this.$parent.replay = false;
}` More specifically, we display the hidden trashes by manipulating this data: `this.picked = false;`
* Struggle with applying the emit method to update score. First of all, define the function value of class, set the length of bar to the total number of full scores:width = score/number*100 + '%' Set up @updatep as variable in HTML, custom event:Progress bar is bound to score=(garbage amount) updatep( add )=this.score += add, and then when event capture the pick up, trigger the event handler.
* Struggle with scoreboard's alert. When added the code under `pickup()` the alert of "You Win!" will show up when the player touched the 10th trashes even before the scoreboard's score updated to 10. Therefore, we decided to put it under computed by using true and false ` gamefinished() {
if (this.score >= 10) {
return true;
}
return false;
} ` and it prevented that issue occurs because we added an intermediate state.
We also found it challenging to create the countdown timer. For that, we had to read up a lot on the internet after which we computed a method with two new functions, startGame and endGame where we set an interval of 15 seconds, if trash is not picked up then (score does not becomes 10) then playerStatus is affected:

if (this.score < 10) {
        this.playerStatus = "You lost!";

Also, once the score becomes 10 i.e. player wins the game, the timer stops because clearInterval()is called and then once a game is finished replay button shows up which calls the reset function.

resetInput() {
        this.replay = true;
    }