Make minor changes following mentor feedback, including extra html co…

…mments, formatting and readme comments. Removed 'e' from a js function.
Robrowno · Apr 19, 2022 · d921e01 · d921e01
1 parent b7022cf
commit d921e01
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 60 deletions.
diff --git a/404.html b/404.html
@@ -7,30 +7,28 @@
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="A simple game of Rock, Paper, Scissors!">
  <meta name="keywords" content="rockpaperscissors, game, javascriptgame">
-
+ <!-- CSS Stylesheet link -->
  <link rel="stylesheet" href="./assets/css/style.css">
  <title>Rock-Paper-Scissors</title>
+ <!-- Favicon icons -->
  <link rel="apple-touch-icon" sizes="180x180" href="assets/images/favicon_io/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicon_io/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicon_io/favicon-16x16.png">
  <link rel="manifest" href="assets/images/favicon_io/site.webmanifest">
 </head>
+<!-- Start of Error 404 page-->
 
 <body>
  <h1> Rock Paper Scissors!</h1>
- <h2 id="error-title">Error 404</h2>
+ <h2 id="error-title">Error 404:</h2>
  <div id="error">
  <p> An error has occured, please click on the button below to go back to the start page:</p>
  </div>
+ <!-- Go Back button -->
  <div id="reset">
  <a id="return" href="index.html">Go Back</a>
-
  </div>
-
-
-
 </body>
 
-
-
-</html>
+</html>
+<!-- End of Error 404 page -->
diff --git a/README.md b/README.md
@@ -45,11 +45,14 @@ I first went about creating a wireframe for how I wanted my starting page to loo
 
 ![Game page wireframe](assets/images/readme-images/game-wireframe.png)
 
+There is a key difference from the wireframe to the final product: I moved the scoring layout around from the original. 
+I solely made this decision for an aesthetic reason. I felt it looked more pleasing to the eye. 
+
 ---
 ## UX Description
 
 For this game, bright and bold colours were a must. However, I wanted to make sure that they kept the player's focus and didn't distract from the objective of the game!
-I featured the follwing:
+I featured the following:
 
 Colours:
 
@@ -114,13 +117,14 @@ This is the full page on mobile:
 ### Choices Bar
 
 The game features a choices bar with 3 options to select. Rock (Fist emoji 🤜), Paper (Open hand emoji ✋) and Scissors (Peace sign emoji ✌️). There is an event listener on each choice that will listen for a click and replicate in the arena section. 
+I designed this to be as simple and intuitive as possible, so that the player can clearly see where each choice is in seperate boxes and has a clear view of where each option is. 
 Above the choices bar is the title, which when clicked on, takes the user back to the start page. There is a reminder of this on the start page as well. 
 
 ![Choices](/assets/images/readme-images/choices-ss.png)
 
 ### Game Arena
 
-The arena is where the users choice and the random computer generated response will show. The user choice will show on the left and the computer choice on the right.
+The arena is where the users choice and the random computer generated response will show. The user choice will show on the left and the computer choice on the right. Hence, the player name always shows on the left. The layout is designed so that it's clear to the use that the left side is for them, and the right side is for the computer. 
 
 ### Before choice:
 ![Before-Choice](/assets/images/readme-images/game-arena-ss.png)
@@ -142,11 +146,13 @@ This section displays the user and computer in a bar with the match score in bet
 
 At the very bottom of the page is a green reset div/button, that has an event listener that when clicked on, will reset all the scores (match and round) to 0 to start the game over again from thew beginning. 
 
+For aesthetic and focal reasons, I put the match score between the player and user names ands the round score below. It takes inspiration from live tennis matches, by keeping the current score constantly at the 'front' or top and the rounds below. It assists in better keeping track of the score.
+
 ![Score Section](/assets/images/readme-images/scores-reset-ss.png)
 
 
 ### Round-Over Modal:
-This is the modal that displays when a round is won by either the player or the computer. Depending on which player wins the round, a different message will display. 
+This is the modal that displays when a round is won by either the player or the computer. Depending on which player wins the round, a different message will display. I've kept this message as simple as possible, so the player can quickly make a decision on whether they want to play another round or not. A hidden div makes it so the user cannot click on any of the game choices whilst the modal is up, to encourage a decision. 
 
 ### Round-Win modal:
 ![Round-Win Modal](/assets/images/readme-images/win-modal.png)
@@ -182,7 +188,7 @@ Given more time to invest in the project, I would likely aim to implement the fo
 
 ### Responsiveness Testing (Multi-Platform)
 
-I began this project with a mobile first approach, with the goal of having a website that works fluently between a minimum width of 320px (such as a small mobile device) up to 1440px wide (such as a large laptop).
+I began this project with a mobile first approach, with the goal of having a website that works fluently between a minimum width of 320px (such as a small mobile device) up to 3200px wide (such as a large laptop).
 
 In order to do this, I tested my application on the following devices:
 - Iphone 6s
@@ -344,7 +350,7 @@ For peer review, I firstly submitted my project to the peer-code-review channel
 
 I also sent a live link to a few good friends on Slack who kindly took the time to check out the game and give feedback. Same as above, everything worked great with them but they recommended some style changes. 
 
-Finally, I submitted my project to a London-based code institute community whatsapp group for review and advice from them. 
+Finally, I submitted my project to a London-based code institute community whatsapp group for review and advice from them. They were impressed with the functionality of my website, and made suggestions on design and potential further implementations. 
 
 ---
 ## Deployment

diff --git a/assets/css/style.css b/assets/css/style.css
@@ -10,13 +10,14 @@
 }
 
 body {
- background-image: radial-gradient(circle, #fdbb2d 0%, orange 5%, aquamarine 80%); 
+ background-image: radial-gradient(circle, #fdbb2d 0%, orange 5%, aquamarine 80%);
 }
 
 /*-- Home Page Styling Section --*/
 #home-h {
  padding-bottom: 40px;
 }
+
 .home-p {
  text-align: center;
  margin: 0 auto;
@@ -58,10 +59,12 @@ input {
  margin: auto;
  cursor: pointer;
 }
+
 /*-- This hides the page --*/
 #start-page {
  display: none;
 }
+
 /*-- End of Home Page section styling--*/
 
 /*-- Main Game Section Styling --*/
@@ -91,7 +94,7 @@ h1 {
  display: flex;
 }
 
-.block > * {
+.block>* {
  flex-basis: 100%;
 }
 
@@ -110,6 +113,7 @@ h1 {
  text-align: center;
  font-size: 1.8rem;
 }
+
 .vs {
  background: lightgreen;
  border: 3px solid black;
@@ -163,6 +167,7 @@ h1 {
  cursor: pointer;
  text-decoration: none;
 }
+
 /*-- End of Modal styling --*/
 
 /*-- 'Arena styling --*/
@@ -194,7 +199,8 @@ h1 {
 }
 
 /*-- Score Board --*/
-#user-score, #comp-score {
+#user-score,
+#comp-score {
  flex-basis: 80%;
  justify-content: center;
  text-align: center;
@@ -287,13 +293,12 @@ h1 {
  align-items: center;
  padding-top: 100px;
  padding-bottom: 30px
-
 }
 
 #return {
-text-align: center;
-text-decoration: none;
-color: black;
+ text-align: center;
+ text-decoration: none;
+ color: black;
 }
 
 /*-- End of Error 404 styling section --*/
@@ -311,18 +316,19 @@ color: black;
  #wl {
  padding-top: 1.5%;
  }
- 
+
 }
 
 @media screen and (min-width: 1440px) {
  .vs {
  padding-top: 0.5%;
  }
-} 
+}
 
 @media screen and (min-height: 900px) {
  .arena-block {
  height: 35vh;
  }
 }
+
 /* End of Media Query Section */
diff --git a/assets/javascript/style.js b/assets/javascript/style.js
@@ -1,7 +1,7 @@
 // Global Variables
-let playerChoiceIDs = ['rock','paper','scissors'];
+let playerChoiceIDs = ['rock', 'paper', 'scissors'];
 let playerChoice = [];
-for(let i=0;i<playerChoiceIDs.length;i++){
+for (let i = 0; i < playerChoiceIDs.length; i++) {
  playerChoice[i] = document.getElementById(playerChoiceIDs[i]);
 }
 let choices = ['🤜', '✋', '✌️'];
@@ -19,30 +19,30 @@ if (homePage) {
 }
 
 // Gamepage begins on start button and win/lose banner is hidden
-function beginGame(e) {
+function beginGame() {
  gamePage.style.display = 'initial';
  homePage.style.display = 'none';
- banner.style.display = 'none' ;
+ banner.style.display = 'none';
  let title = document.getElementById('link');
  title.style.cursor = 'pointer';
 
  // User can input their name (Optional for player)
  let username = document.getElementById("u-name").value;
  document.getElementById("username").innerHTML = username || 'User';
  document.getElementById("user-score").innerHTML = username || 'User';
- 
+
 }
 let startGame = document.getElementById('start-game');
 startGame.addEventListener('click', beginGame);
 
 // Function to send user back to start page on clicking title
 document.getElementById('link').addEventListener('click', goToStartPage);
+
 function goToStartPage() {
  homePage.style.display = 'initial';
  gamePage.style.display = 'none';
 }
 
-
 //Game begins when player selects either R, P or S
 //When player selects Rock
 playerChoice[0].addEventListener('click', selectRock);
@@ -52,7 +52,7 @@ function selectRock() {
  rock.innerHTML = choices[0];
  rock.classList.add('displayplayerchoice');
  generateCompChoice();
-} 
+}
 
 //When player selects Paper
 playerChoice[1].addEventListener('click', selectPaper);
@@ -72,7 +72,7 @@ function selectScissors() {
  scissors.innerHTML = choices[2];
  scissors.classList.add('displayplayerchoice');
  generateCompChoice();
-} 
+}
 
 // Computer choice generated randomly
 function generateCompChoice() {
@@ -90,25 +90,25 @@ function generateCompChoice() {
  computerFinalDisplay.innerHTML = computerChoice;
 
  let playerFinalDisplay = document.getElementById('user');
- revealResult(computerFinalDisplay.innerHTML,playerFinalDisplay.innerHTML);
-} 
+ revealResult(computerFinalDisplay.innerHTML, playerFinalDisplay.innerHTML);
+}
 
 //Sequence when player wins, loses or draws
 function revealResult(computerFinalDisplay, playerFinalDisplay) {
- if (computerFinalDisplay==playerFinalDisplay) {
+ if (computerFinalDisplay == playerFinalDisplay) {
  banner.style.display = 'block';
  banner.innerHTML = 'Draw';
  } else {
- if((playerFinalDisplay==choices[0] && computerFinalDisplay==choices[2]) || 
- (playerFinalDisplay==choices[1] && computerFinalDisplay==choices[0]) ||
- (playerFinalDisplay==choices[2] && computerFinalDisplay==choices[1])){
+ if ((playerFinalDisplay == choices[0] && computerFinalDisplay == choices[2]) ||
+  (playerFinalDisplay == choices[1] && computerFinalDisplay == choices[0]) ||
+  (playerFinalDisplay == choices[2] && computerFinalDisplay == choices[1])) {
  let playerScore = document.getElementById('u-score').innerHTML;
  playerScore++;
  document.getElementById('u-score').innerHTML = playerScore;
  banner.style.display = 'block';
  banner.innerHTML = 'You Win!';
  checkRound();
- }else{
+ } else {
  let computerScore = document.getElementById('c-score').innerHTML;
  computerScore++;
  document.getElementById('c-score').innerHTML = computerScore;
@@ -127,29 +127,31 @@ function checkRound() {
  if (userPoint >= 10) {
  let userRound;
  userRound = document.getElementById('u-rounds').innerHTML;
- document.getElementById('u-rounds').innerHTML = parseInt(userRound)+1;
+ document.getElementById('u-rounds').innerHTML = parseInt(userRound) + 1;
  document.getElementById('u-score').innerHTML = 0;
  document.getElementById('c-score').innerHTML = 0;
- let modal = document.getElementById('modal');
+  let modal = document.getElementById('modal');
  let modalPara = document.getElementById('modalpara');
  modal.style.display = 'inline';
  modalPara.innerText = 'You won the round! Keep playing to see if you can win another!';
-
- } if (compPoint >= 10) {
+
+ }
+ if (compPoint >= 10) {
  let compRound;
  compRound = document.getElementById('c-rounds').innerHTML;
- document.getElementById('c-rounds').innerHTML = parseInt(compRound)+1;
+ document.getElementById('c-rounds').innerHTML = parseInt(compRound) + 1;
  document.getElementById('u-score').innerHTML = 0;
  document.getElementById('c-score').innerHTML = 0;
- let modal = document.getElementById('modal');
+  let modal = document.getElementById('modal');
  let modalPara = document.getElementById('modalpara');
  modal.style.display = 'inline';
- modalPara.innerText = 'Hard luck! The computer won this time. Play another round to see if you can beat the computer next time!'; 
- 
- } 
-} 
+ modalPara.innerText = 'Hard luck! The computer won this time. Play another round to see if you can beat the computer next time!';
+
+ }
+}
 //Function to close modal by clicking on 'x'
 document.getElementById('close-modal').addEventListener('click', closeModal);
+
 function closeModal() {
  document.getElementById('modal').style.display = 'none';
 }
@@ -160,12 +162,13 @@ document.getElementById('u-score');
 document.getElementById('c-score');
 
 document.getElementById('reset').addEventListener('click', reset);
+
 function reset() {
- document.getElementById('c-score').innerHTML=0;
- document.getElementById('u-score').innerHTML=0;
+ document.getElementById('c-score').innerHTML = 0;
+ document.getElementById('u-score').innerHTML = 0;
  banner.style.display = 'none';
- document.getElementById('u-rounds').innerHTML=0;
- document.getElementById('c-rounds').innerHTML=0;
-} 
+ document.getElementById('u-rounds').innerHTML = 0;
+ document.getElementById('c-rounds').innerHTML = 0;
+}
 
-// End of JS file
+// End of JS file