Part 4: Game Controller

Putting it all together

The Resources folder structure should look something like this:

  resources
  ├── images
  │   └── .gitkeep
  ├── scripts
  │   ├── rock_paper_scissors.js
++│   └── index.js
  └── styles
      └── styles.css

The marked file is the file you'll be using in the part of the assignment.

In this final piece of the assignment, we will need to:

• get a handle of all elements of interest.
• then We will add event listeners to the buttons
• We will call on our RockPaperScissors class methods as needed.

1. create constants const of element handlers to the following elements

• welcomeScreen for #welcome-screen

• gameScreen for #game-screen

• startGameButton for #start-game-button

• userName for #username

• userSelection for #user-selection

• goButton for #go-button

• scoreParagraph for #score

• gameHistoryParagraph for #game-history

  Example

  const welcomeScreen = document.getElementById(`welcome-screen`);

  OR, using the querySelector

  const gameScreen = document.querySelector(`#game-screen`);

2. programmatically, hide the gameScreen using Bootstrap's class d-none

   gameScreen.classList.add("d-none")

3. add an Event Listener to the start-game-button on the click event. The event handler should: a. get username from the text input and store it a variable to be used in the next step. b. instantiate the game object from the RockPaperScissors class.

   game = new RockPaperScissors(username);

   * **Note**: The top of the file already has a declared(but not initialized) variable `game`. I'm assigning the value of the new class object to this variable, instead of declaring it in the eventHandler. *Remember* variables are scoped in JS, if the variable is declared inside the event handler scope, it will only be accessible from there.

   c. hide the welcomeScreen and display the gameScreen Instead.

   * tip: you'll be adding and removing the `d-none` class.

4. Create a function named function updateScoreTallyUI(){...}

   • Modify the #score paragraph. It should look something like this
     • <USERNAME>: <USER_SCORE> v CPU: <CPU_SCORE>

       * i.e. if `username` is *Wes* and the `userScore` is 3 and the `cpuScore` is 5, it would change the scoreParagraph to `Wes: 3  v  CPU: 5`
       you can get the username, and score object from the game object. game.username, game.score

5. Create a function named function updateGameHistoryUI(){...}

   • it makes use of the class property gameHistoryLog.
   • it clears the current game history paragraph
   • and replaces it with the content of the array.

6. add an Event Listener to the go-button on the click event.

   • get the userSelection from the select
   • call the play(userSelection) of the game object.
   • update the text of scoreParagraph using the updateScoreTallyUI() function
   • update the gameHistoryParagraph using the updateGameHistoryUI() function