https://it3049c.github.io/assets/js/8b03ac96.c35e78e5.js

1"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[6704],{2086:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>o,contentTitle:()=>l,default:()=>h,frontMatter:()=>i,metadata:()=>c,toc:()=>d});var t=s(5893),r=s(1151);const i={sidebar_position:5,title:"Part 4: Game Controller",sidebar_label:"Game Controller",draft:!1},l=void 0,c={id:"rock-paper-scissors/controller",title:"Part 4: Game Controller",description:"Putting it all together",source:"@site/content/assignments/5.rock-paper-scissors/4.controller.md",sourceDirName:"5.rock-paper-scissors",slug:"/rock-paper-scissors/controller",permalink:"/assignments/rock-paper-scissors/controller",draft:!1,unlisted:!1,editUrl:"https://github.com/IT3049C/IT3049C.github.io/tree/main/content/assignments/5.rock-paper-scissors/4.controller.md",tags:[],version:"current",lastUpdatedBy:"Yahya Gilany",lastUpdatedAt:1706240578,formattedLastUpdatedAt:"Jan 26, 2024",sidebarPosition:5,frontMatter:{sidebar_position:5,title:"Part 4: Game Controller",sidebar_label:"Game Controller",draft:!1},sidebar:"assignments",previous:{title:"Game Logic",permalink:"/assignments/rock-paper-scissors/logic"},next:{title:"Extra Credit",permalink:"/assignments/rock-paper-scissors/extra-credit"}},o={},d=[{value:"Putting it all together",id:"putting-it-all-together",level:2},{value:"Testing",id:"testing",level:2}];function a(e){const n={code:"code",em:"em",h2:"h2",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h2,{id:"putting-it-all-together",children:"Putting it all together"}),"\n",(0,t.jsx)(n.p,{children:"The Resources folder structure should look something like this:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-diff",children:"  resources\n  \u251c\u2500\u2500 images\n  \u2502   \u2514\u2500\u2500 .gitkeep\n  \u251c\u2500\u2500 scripts\n  \u2502   \u251c\u2500\u2500 rock_paper_scissors.js\n++\u2502   \u2514\u2500\u2500 index.js\n  \u2514\u2500\u2500 styles\n      \u2514\u2500\u2500 styles.css\n"})}),"\n",(0,t.jsx)(n.p,{children:"The marked file is the file you'll be using in the part of the assignment."}),"\n",(0,t.jsx)(n.p,{children:"In this final piece of the assignment, we will need to:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"get a handle of all elements of interest."}),"\n",(0,t.jsx)(n.li,{children:"then We will add event listeners to the buttons"}),"\n",(0,t.jsx)(n.li,{children:"We will call on our RockPaperScissors class methods as needed."}),"\n"]}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["create constants ",(0,t.jsx)(n.code,{children:"const"})," of element handlers to the following elements"]}),"\n"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["welcomeScreen for ",(0,t.jsx)(n.code,{children:"#welcome-screen"})]}),"\n",(0,t.jsxs)(n.li,{children:["gameScreen for ",(0,t.jsx)(n.code,{children:"#game-screen"})]}),"\n",(0,t.jsxs)(n.li,{children:["startGameButton for ",(0,t.jsx)(n.code,{children:"#start-game-button"})]}),"\n",(0,t.jsxs)(n.li,{children:["userName for ",(0,t.jsx)(n.code,{children:"#username"})]}),"\n",(0,t.jsxs)(n.li,{children:["userSelection for ",(0,t.jsx)(n.code,{children:"#user-selection"})]}),"\n",(0,t.jsxs)(n.li,{children:["goButton for ",(0,t.jsx)(n.code,{children:"#go-button"})]}),"\n",(0,t.jsxs)(n.li,{children:["scoreParagraph for ",(0,t.jsx)(n.code,{children:"#score"})]}),"\n",(0,t.jsxs)(n.li,{children:["gameHistoryParagraph for ",(0,t.jsx)(n.code,{children:"#game-history"})]}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.strong,{children:"Example"})}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"const welcomeScreen = document.getElementById(`welcome-screen`);\n"})}),"\n",(0,t.jsxs)(n.p,{children:["OR, using the ",(0,t.jsx)(n.code,{children:"querySelector"})]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"const gameScreen = document.querySelector(`#game-screen`);\n"})}),"\n",(0,t.jsxs)(n.ol,{start:"2",children:["\n",(0,t.jsxs)(n.li,{children:["programmatically, hide the ",(0,t.jsx)(n.code,{children:"gameScreen"})," using Bootstrap's class ",(0,t.jsx)(n.code,{children:"d-none"})]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:'gameScreen.classList.add("d-none")\n'})}),"\n",(0,t.jsxs)(n.ol,{start:"3",children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:["add an Event Listener to the ",(0,t.jsx)(n.code,{children:"start-game-button"})," on the click event. The event handler should:"]}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsx)(n.li,{children:"get username from the text input to be used in the next step."}),"\n",(0,t.jsxs)(n.li,{children:["instantiate the game object from the ",(0,t.jsx)(n.code,{children:"RockPaperScissors"})," class.","\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"game = new RockPaperScissors(username);\n"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:"Note"}),": The top of the file already has a declared(but not initialized) variable ",(0,t.jsx)(n.code,{children:"game"}),". I'm assigning the value of the new class object to this variable, instead of declaring it in the eventHandler. ",(0,t.jsx)(n.em,{children:"Remember"})," variables are scoped in JS, if the variable is declared inside the event handler scope, it will only be accessible from there."]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["hide the welcomeScreen and display the gameScreen Instead.","\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:"\ud83e\udd89tip"}),": you'll be adding and removing the ",(0,t.jsx)(n.code,{children:"d-none"})," class."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:"\ud83e\udd89tip"}),": You may need to do ",(0,t.jsx)(n.code,{children:"e.preventDefault()"})," to prevent the form from submitting, and the page from reloading."]}),"\n"]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:["Create a function named ",(0,t.jsx)(n.code,{children:"function updateScoreTallyUI(){...}"})]}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["Modify the ",(0,t.jsx)(n.code,{children:"#score"})," paragraph. It should look something like this","\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"<USERNAME>: <USER_SCORE>  v  CPU: <CPU_SCORE>"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["i.e. if ",(0,t.jsx)(n.code,{children:"username"})," is ",(0,t.jsx)(n.em,{children:"Yahya"})," and the ",(0,t.jsx)(n.code,{children:"userScore"})," is 3 and the ",(0,t.jsx)(n.code,{children:"cpuScore"})," is 5, it would change the scoreParagraph to ",(0,t.jsx)(n.code,{children:"Yahya: 3  v  CPU: 5"}),"\nyou can get the ",(0,t.jsx)(n.code,{children:"username"}),", and ",(0,t.jsx)(n.code,{children:"score"})," object from the game object. ",(0,t.jsx)(n.code,{children:"game.username"}),", ",(0,t.jsx)(n.code,{children:"game.score"})]}),"\n"]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["In the ",(0,t.jsx)(n.code,{children:"start-game-button"})," event listener, invoke this function to update the ",(0,t.jsx)(n.code,{children:"#score"})," paragraph so it displays the user's name instead of the Generic",(0,t.jsx)(n.code,{children:"User"})]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:["Create a function named ",(0,t.jsx)(n.code,{children:"function updateGameHistoryUI(){...}"})]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["it makes use of the class property ",(0,t.jsx)(n.code,{children:"gameHistoryLog"}),"."]}),"\n",(0,t.jsx)(n.li,{children:"it clears the current game history paragraph"}),"\n",(0,t.jsx)(n.li,{children:"and replaces it with the content of the array."}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:["add an Event Listener to the ",(0,t.jsx)(n.code,{children:"go-button"})," on the click event."]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"get the userSelection from the select"}),"\n",(0,t.jsxs)(n.li,{children:["call the ",(0,t.jsx)(n.code,{children:"play(userSelection)"})," of the ",(0,t.jsx)(n.code,{children:"game"})," object."]}),"\n",(0,t.jsxs)(n.li,{children:["update the text of ",(0,t.jsx)(n.code,{children:"scoreParagraph"})," using the ",(0,t.jsx)(n.code,{children:"updateScoreTallyUI()"})," function"]}),"\n",(0,t.jsxs)(n.li,{children:["update the ",(0,t.jsx)(n.code,{children:"gameHistoryParagraph"})," using the ",(0,t.jsx)(n.code,{children:"updateGameHistoryUI()"})," function"]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"testing",children:"Testing"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["to test that you satisfied the controller requirements, run the tests with ",(0,t.jsx)(n.code,{children:"npm run test:controller"}),". This will run the E2E tests for the controller component only of this assignment."]}),"\n",(0,t.jsxs)(n.li,{children:["You can also run the entire suite of E2E tests using ",(0,t.jsx)(n.code,{children:"npm run test:e2e"}),". At this point all tests should pass"]}),"\n"]})]})}function h(e={}){const{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(a,{...e})}):a(e)}},1151:(e,n,s)=>{s.d(n,{Z:()=>c,a:()=>l});var t=s(7294);const r={},i=t.createContext(r);function l(e){const n=t.useContext(i);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:l(e.components),t.createElement(i.Provider,{value:n},e.children)}}}]);