rocketacademy · yiuhankit · Jun 6, 2022 · gcskhor · Jun 13, 2022 · gcskhor
diff --git a/index.html b/index.html
@@ -1,7 +1,15 @@
+<!--  All HTML files begin with the following line: -->
 <!DOCTYPE html>
+<!-- This indicates that the rest of the lines that follow are to be interpreted as HTML. It tells the browser about what document type to expect. -->
+
+<!-- All text enclosed in angled brackets are known as HTML element tags. There are usually, but not always, starting and closing element "tags", each representing a HTML element.
+The <html> element is known as the root element of a HTML page. All other elements are encased within it. -->
 <html>
+  <!-- The <head> element contains meta information about the HTML page, information that is not rendered or displayed by the browser -->
   <head>
-    <title>Coding Basics</title>
+    <!-- The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab) and is the default name given to a bookmark of a webpage. -->
+    <title>Basics - Scissors Paper Stone!</title>
+    <!-- The <style> element contains information relating to the layout and style of the webpage. The syntax within a <style> tag is referred to as CSS - Cascading Style Sheets. -->
     <style>
       * {
         box-sizing: border-box;
@@ -48,24 +56,37 @@
     </style>
   </head>
 
+  <!-- The <body> element defines the document's body, and is a container for all the visible contents that will be rendered by the browser.  -->
   <body>
-    <h1 id="header">Basics: Scissors Paper Stone 🚀</h1>
+    <!-- The <h1> element defines a large heading. There are 6 pre-set header elements, <h1> to <h6> -->
+    <h1 id="header">SCISSOR PAPER STONE!! ✌✋👊</h1>
+    <!-- The <div> tag defines a division or a section in an HTML document, and is commonly use as a "container" for nested HTML elements. -->
     <div id="container">
-      <p>Input:</p>
+      <!-- The <p> tag defines a paragraph element. -->
+      <p>Choose wisely! Scissors, paper, or stone?</p>
+      <!-- The self-closing <input /> tag represents a field for a user to enter input. -->
       <input id="input-field" />
+      <!-- The self-closing <br /> tag represents a line break - a line's worth of spacing before dispalying the next element. -->
       <br />
-      <button id="submit-button">Submit</button>
-      <p>Output:</p>
+      <!-- The <button> tag represents.. you guessed it! a button. -->
+      <button id="submit-button">Let's Play!</button>
+      <p>Results:</p>
       <div id="output-div"></div>
     </div>
-    <!-- Import program logic -->
+    <!-- Everything below this is incorporating JavaScript programming logic into the webpage. -->
+    <!-- The script tag encloses JavaScript syntax for the browser to interpret programtically -->
+    <!-- The following line imports all code written in the script.js file -->
     <script src="script.js"></script>
     <!-- Define button click functionality -->
     <script>
+      // Declare and define a variable that represents the Submit Button
       var button = document.querySelector("#submit-button");
+      // When the submit button is clicked, access the text entered by the user in the input field
+      // And pass it as an input parameter to the main function as defined in script.js
       button.addEventListener("click", function () {
         // Set result to input value
         var input = document.querySelector("#input-field");
+        // Store the output of main() in a new variable
         var result = main(input.value);
 
         // Display result in output element

diff --git a/script.js b/script.js
@@ -1,4 +1,135 @@
+var gameState = "Pre-username mode";
+var userName = "";
+var totalTries = 0;
+var totalWins = 0;
+var totalDraws = 0;
+var totalLosses = 0;
+
+// Computer choice random generator
+var numberGenerator = function () {
+  // produces a decimal between 0 and 3 not inclusive
+  var randomDecimal = Math.random() * 3;
+
+  // take off the decimal
+  var randomInteger = Math.floor(randomDecimal);
+
+  // it's a number from 0 - 2, add 1. can be 1,2,3
+  var choiceNumber = randomInteger + 1;
+
+  return choiceNumber;
+};
+
+// This takes computer choice random number and decodes it into scissors, paper, or stone
+var choiceDecoder = function (numberGenerator) {
+  if (numberGenerator == 3) {
+    return "scissors";
+  } else if (numberGenerator == 2) {
+    return "paper";
+  } else if (numberGenerator == 1) {
+    return "stone";
+  } else {
+    return "Invalid input";
+  }
+};
+
+// This takes user choice input and encodes it into 1, 2, or 3
+var choiceEncoder = function (input) {
+  if (input == "scissors" || input == "reversed scissors") {
+    return 3;
+  } else if (input == "paper" || input == "reversed paper") {
+    return 2;
+  } else if (input == "stone" || input == "reversed stone") {
+    return 1;
+  } else {
+    return "Invalid input";
+  }
+};
+
 var main = function (input) {
-  var myOutputValue = 'hello world';
-  return myOutputValue;
+  var myOutputValue = "";
+
+  // Waiting for username input
+  if (gameState == "Pre-username mode") {
+    userName = input;
+    if (userName == "") {
+      myOutputValue = "Hello! What is your name?";
+      return myOutputValue;
+    } else {
+      gameState = "Username mode";
+    }
+  }
+
+  // After username input, first prompt
+  if (gameState == "Username mode") {
+    userName = input;
+    gameState = "Game mode";
+    myOutputValue = `Hey welcome ${userName}! Make a choice! Scissors, paper, or stone?`;
+    return myOutputValue;
+  } else if (gameState == "Game mode") {
+    // Game mode
+    var userChoiceNumber = choiceEncoder(input);
+    var comChoiceNumber = numberGenerator();
+    var comChoice = choiceDecoder(comChoiceNumber);
+
+    var outcome = userChoiceNumber - comChoiceNumber;
+
+    myOutputValue = `You chose ${input}. <br> Computer chose ${comChoice}. <br>`;
+
+    if (isNaN(outcome)) {
+      // Check if input is valid
+      return `What was that?! <br><br> ${userName}, please input a valid choice: "scissors", "paper", or "stone"?`;
+    } else if (input == "scissors" || input == "paper" || input == "stone") {
+      totalTries += 1;
+      // Logic flow below - normal game
+
+      if (outcome == 0) {
+        totalDraws += 1;
+        myOutputValue += `It's a draw!`;
+      } else if (outcome == 1 || outcome == -2) {
+        totalWins += 1;
+        myOutputValue += `You won!`;
+      } else if (outcome == 2 || outcome == -1) {
+        totalLosses += 1;
+        myOutputValue += `You lost!`;
+      }
+    } else {
+      // Reversed game flow
+      totalTries += 1;
+      if (outcome == 0) {
+        totalDraws += 1;
+        myOutputValue += `It's a draw!`;
+      } else if (outcome == 1 || outcome == -2) {
+        totalLosses += 1;
+        myOutputValue += `You lost!`;
+      } else if (outcome == 2 || outcome == -1) {
+        totalWins += 1;
+        myOutputValue += `You won!`;
+      }
+    }
+    console.log("Com Choice:", comChoice);
+    console.log("User Input:", input);
+
+    return `Player name: ${userName} <br><br> ${myOutputValue} <br><br> You won ${totalWins} round(s) out of ${totalTries} tries!`;
+  }
 };
+// user : U, com : C
+// scissors = 3, paper = 2, stone = 1
+
+// NORMAL CASE 1-3
+// case 1: draw
+// case 1: U choose sci(3), C choose sci(3) or any other similar
+// therefore for case 1, U = C always => 0
+
+// case 2: U win
+// case 2: U choose sci (3), C choose paper (2) => 1
+// case 2: U choose paper (2), C choose stone (1) => 1
+// case 2: U choose stone (1), C choose sci (3) => -2
+// therefore for case 2, U-C = 1 OR -2
+
+// case 3: C win
+// case 3: U choose paper (2), C choose sci (3) => -1
+// case 3: U choose stone (1), C choose paper (2) => -1
+// case 3: U choose sci (3), C choose stone (1) => 2
+// therefore for case 2, U-C = -1 OR 2
+
+// REVERSED CASE just reverse case 2 and 3 output for reversed input