Colour pallete:

I saved this pallete while exploring the colour pallete generating site, "Coolers", and decided to see how to apply it to this project. In terms of the significance of the colours, the darker navy is used to signify defeat, and the lighter cream and orange, for victory. This is implemented in the gradient background colour, 'good bearing down on the dark'. The theme reoccurs on win and lose conditions. On a loss the steep gradient flashes unpleasantly and the orange and navy are juxtaposed for their high contrast. On a win, the background is smooth, light and bright, with an even gradient. -

Layout:

I opted to have the game at the top of the page and instructions at the bottom, and it is an unpleasant user experience to have to scroll past the instructions for every play through, and because the instructions are only necessary at most once, the game being largly intuitive and widely understood. On larger screens, the game log of past moves is pushed up to the right of screen so that the use needn't scroll to scan the cpu's previous moves.

Typography:

The font chosen is a retro pixelated style, which I believe gives the game something closer to an arcade game feel.

Stylesheet having no effect on server output Recreated stylesheet, rewrote link, rewrote ids in css. Resolved finally by add/push/commit/sync

JS not updating changes in browser add/push/commit/sync and restarting python3 -m http.server command not resolving exiting git pod and reloading resolved

Console log shows that click event not tying into global choice vars Resolution: in event, calling on function 'makeChoice' should have been reapplied to the new const of 'choice' which pulls the data from old const of 'choiceName'

Console log shows that the cpuChoice is not being acknowledged in click event Added return of choices Resolved. console log shows random choice for each click of 'rock'

Chart with record of past moves not working Saving and restarting Solution found: needed square brackets over html identifier in js script

Record of choices issues

Rock can't win against second opponent, 'Lizard'. Tried making 2 beats in list. Tried making second rock global element that only beats lizard Going to make beats 2 and treat as beats Resolved, not by treating exactly the same but by use of an 'or' statement, ||, at same place.

Second charts issue: computers winning choices aren't showing as having beaten player No idea how this was resolved other than through workshopping the next issue, and it seems to inadvertently fixed the issue.

Third issue: record flowing out to right of page endlessly. Changed back to divs and content is going down the page, but need to limit times Also need both choices to appear along side, not one after the other as is happening Now appearing alongside- moved js keyword 'record-choices-chart' into last child span of its original div, allowing the div styling to target it as its child. Continued to not work. Long Fix! JS code replacing innerHTML would replace the inner with new followed by old as one single innerHTML into one singular replaced div. Instead I made 5 divs, stacked from 5 -> 1 with the function imgToLog replacing innerHTML for each based on the numberClicks counter. And then used styling on the same divs the function targets to successfully center content with justify.

Game ends and restarts on 5th go Shouldn't restart but instead create a restart button, which itself sets counters to 0 Made the restart button replace the selection moves buttons, and on click, reappear them.

Button clicks caused cpuChoice to select random no 5 times, instead of just random of. thus 5 x 5 tidied code within button event

Changing Player 1 to a form on click is only allowed input into form with permanent click. Perhaps clicking into form to use it is creating a new form each time. This was part of the issue and to circumvent it, one div has a click event which changes a different div below that has no event listener. gave up on making the input field its own submit button

Trying to create a form that saves its input to a var. After countless attempts I've found the correct method. Documented below.

"form id="player-name-form"> input type="text" name="nickname" placeholder="Your name, mortal!" id="player-name"> input type="button" name="submit" onclick="onSubmit()" value="submit">*"

Best of five paragraph not returning on reset Issue with the innerHTML text not replacing "best of five" Fixed now.

Safari

Firefox

Chrome Website was tested from beinning to end using chrome