Rewrite "rock paper scissors" project

foundations/javascript_basics/project_rock_paper_scissors.md

@@ -1,44 +1,78 @@
 ### Introduction
 
-We're going to make an implementation of grade-school classic "rock paper scissors". If you don't know what that is check the [Wikipedia article](https://en.wikipedia.org/wiki/Rock%E2%80%93paper%E2%80%93scissors) or [this](https://www.wikihow.com/Play-Rock,-Paper,-Scissors) detailed step-by-step. For the moment we're just going to play the game from the browser console, but **we will revisit this project in a later lesson and add a Graphical User Interface with buttons and text,** so don't forget to keep the code on GitHub! You might notice some 'Live Preview' links in the student solutions that have a GUI - this is coming in a later lesson. When you get there don't forget to come back and add your link!
+For this project, you will create the game [Rock Paper Scissors](https://www.wikihow.com/Play-Rock,-Paper,-Scissors). This game will be played entirely in the console.
 
-### Quick exercises before starting
+<div class="lesson-note">
+Some of the student solutions below contain buttons, text, and other elements. These elements are part of what is called a graphical user interface (GUI). You'll create the GUI in a later lesson. In the meantime, remember to commit your code to GitHub.
+</div>
+
+### Problem solving approach
 
-1. Identify three ways to include JavaScript in a page.
-1. Test it out! Write `console.log("Hello World");` in JavaScript and check to see if it displays in the browser's console.
+Since this is the first JavaScript project being built from scratch, it's important to remember the wise words from the [Problem Solving lesson](https://www.theodinproject.com/lessons/foundations-problem-solving). For each step in this project, be sure to do the following
 
-Finally, this is your first JavaScript program built from scratch, so don't forget the previous lesson on problem solving. Plan your solution out before writing any code, and test each piece as you build to ensure it is working before moving on to the next!
+1. Plan or pseudocode your solution.
+1. Write the code.
+1. Test your code to make sure it works.
 
 ### Assignment
 
 <div class="lesson-content__panel" markdown="1">
-Don't forget to commit early & often! You can [reference the Commit Message lesson here](https://www.theodinproject.com/paths/foundations/courses/foundations/lessons/commit-messages)!
+Remember to commit early and often! To refresh your memory, check out the [commit messages lesson](https://www.theodinproject.com/paths/foundations/courses/foundations/lessons/commit-messages).
+
+#### Step 1: Initiate the project structure
+
+1. Create a new Git repository for your project.
+1. Create a blank HTML document with a script tag.
+1. Check if the webpage includes JavaScript:
+   - Write `console.log("Hello World")` in JavaScript.
+   - Check if "Hello World" is logged in the browser console once you open your webpage.
+
+It's best practice to link to an external JavaScript file inside this script tag. Using an external JavaScript file keeps your HTML file clean and organized.
+
+You don't have to write additional code in the HTML file. This game is played entirely via the console.
+
+#### Step 2: Write the logic to get the computer choice
+
+Your game will be played against the computer. You will write a function that randomly returns "Rock", "Paper" or "Scissors".
+
+1. Create a new function named `getComputerChoice`.
+1. Write the code so that `getComputerChoice` will randomly `return` one of the following string values: "Rock", "Paper" or "Scissors".
+   - **Hint**: The [Math.random](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random) method returns a random number that's greater than or equal to 0 and less than 1. Think about how you can use this to conditionally return one of the multiple choices.
+1. Test that your function returns what you expect using `console.log` or [the browser developer tools](https://www.theodinproject.com/lessons/foundations-javascript-developer-tools) before advancing to the next step.
+
+#### Step 3: Write the logic to play a single round
+
+Your game will be played round by round. You will write a function that takes the human and computer player choices as arguments, plays a single round and returns a winner announcement.
+
+1. Create a new function named `playRound`.
+1. Define two parameters for `playRound`: `playerChoice` and `computerChoice`. Use these two parameters to take the human and computer choices as arguments.
+1. Make your function's `playerSelection` parameter case-insensitive so that players can input "rock", "ROCK", "RocK", or other variations.
+1. Write the code for your `playRound` function to `return` a string value representing the round winner, such as: "You lose! Paper beats Rock".
+
+Example code:
 
-1. Start a new Git repo for your project.
-1. Create a blank HTML document with a script tag (Hint: it is best practice to link an external .js file). This game is going to be played completely from the console, so don't worry about putting anything else in there.
-1. Your game is going to play against the computer, so begin with a function called `getComputerChoice` that will randomly return either 'Rock', 'Paper' or 'Scissors'. We'll use this function in the game to make the computer's play. *Tip: use the console to make sure this is returning the expected output before moving to the next step!*
-1. Write a function that plays a single round of Rock Paper Scissors. The function should take two parameters - the `playerSelection` and `computerSelection` - and then return a string that declares the winner or tie of the round like so: `"You Lose! Paper beats Rock"`
+```javascript
+function playRound(playerChoice, computerChoice) {
+  // your code here!
+}
 
-   - Make your function's playerSelection parameter case-insensitive (so users can input `rock`, `ROCK`, `RocK` or any other variation).
+const playerSelection = "rock";
+const computerSelection = getComputerChoice();
 
-1. **Important note:** you want to `return` the results of this function call, *not* `console.log()` them. You're going to use what you `return` later on, so let's test this function by using console.log to see the results:
+console.log(playRound(playerSelection, computerSelection));
+```
 
-   ```javascript
-   function playRound(playerSelection, computerSelection) {
-     // your code here!
-   }
+#### Step 4: Write the logic to entire the play the game
 
-   const playerSelection = "rock";
-   const computerSelection = getComputerChoice();
-   console.log(playRound(playerSelection, computerSelection));
-   ```
+Your game will play 5 rounds. You will write a function named `playGame` that calls `playRound` to play 5 rounds, keeps score, and declares a winner at the end.
 
-1. Write a NEW function called `playGame()`. Use the previous function *inside* of this one to play a five round game that keeps score and reports a winner or loser at the end.
-   - You have not officially learned how to "loop" over code to repeat function calls... if you already know about loops from somewhere else (or if you feel like doing some more learning) feel free to use them. If not, don't worry! Just call your `playRound` function 5 times in a row. Loops are covered in the next lesson.
-   - At this point you should be using `console.log()` to display the results of each round and the winner at the end.
-   - Use `prompt()` to get input from the user. [Read the docs here if you need to.](https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt)
-   - Feel free to re-work your previous functions if you need to. Specifically, you might want to change the return value to something more useful.
-   - Feel free to create more "helper" functions if you think it would be useful.
+1. Create a new function named `playGame`.
+1. Get the human player choice using the `prompt` method. Read this [MDN article about the prompt method](https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt) learn more about it.
+1. Put the previous `playRound` function inside `playGame`.
+1. Play 5 rounds by calling `playRound` 5 times.
+   - **Hint**: When you assign a function call to a variable, the return value of that function is assigned to the variable. Accessing the variable afterward will only provide the assigned value; it doesn't recall the function. You need to recall the choice functions to get new choices for each round.
+   - Re-work your previous functions or create more helper functions if necessary. Specifically, you may want to change the return values to something more useful.
+   - If you already know about loops, you can use them. If not, don't worry! Loops will be covered in the next lesson.
 
 </div>
 <div class="lesson-note" markdown="1">