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:

   1. get username from the text input to be used in the next step.
   2. 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.
   3. hide the welcomeScreen and display the gameScreen Instead.
      • 🦉tip: you'll be adding and removing the d-none class.
      • 🦉tip: You may need to do e.preventDefault() to prevent the form from submitting, and the page from reloading.

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

   1. Modify the #score paragraph. It should look something like this
      • <USERNAME>: <USER_SCORE> v CPU: <CPU_SCORE>
        • i.e. if username is Yahya and the userScore is 3 and the cpuScore is 5, it would change the scoreParagraph to Yahya: 3 v CPU: 5 you can get the username, and score object from the game object. game.username, game.score
   2. In the start-game-button event listener, invoke this function to update the #score paragraph so it displays the user's name instead of the GenericUser

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

Testing

• to test that you satisfied the controller requirements, run the tests with npm run test:controller. This will run the E2E tests for the controller component only of this assignment.
• You can also run the entire suite of E2E tests using npm run test:e2e. At this point all tests should pass