From 4e96f91953740d3fa51df54dc4599b5daf5a30e0 Mon Sep 17 00:00:00 2001
From: yehudz95 <205nabil@gmail.com>
Date: Sun, 4 Feb 2024 15:43:12 +0800
Subject: [PATCH 1/4] Modified HTML page with colors and title change

---
 index.html | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)
diff --git a/index.html b/index.html
index 74f9da2a..39ab0386 100644
--- a/index.html
+++ b/index.html
@@ -1,13 +1,14 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>Coding Basics</title>
+    <title>Nabil's Beat That Project</title>
     <style>
       * {
         box-sizing: border-box;
       }
 
       body {
+        background-color: bisque;
         font-family: sans-serif;
         margin-left: 30px;
         margin-right: 30px;
@@ -18,7 +19,7 @@
       }
 
       #container {
-        background-color: pink;
+        background-color: lightsalmon;
         margin: 40px auto;
         max-width: 800px;
         padding: 38px 31px;
@@ -49,7 +50,7 @@
   </head>
 
   <body>
-    <h1 id="header">Basics: Beat That! 🚀</h1>
+    <h1 id="header">🎲Nabil's: Beat That!🎲</h1>
     <div id="container">
       <p>Input:</p>
       <input id="input-field" />

From fb817652dc5c6ce06b5fad471ef99aac11fa16eb Mon Sep 17 00:00:00 2001
From: yehudz95 <205nabil@gmail.com>
Date: Sun, 4 Feb 2024 18:02:12 +0800
Subject: [PATCH 2/4] Done up code to run without scoring.

---
 index.html |   4 +-
 script.js  | 115 +++++++++++++++++++++++++++++++++++++++++++++++++++--
 2 files changed, 113 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index 39ab0386..185ab1a6 100644
--- a/index.html
+++ b/index.html
@@ -55,9 +55,9 @@ <h1 id="header">🎲Nabil's: Beat That!🎲</h1>
       <p>Input:</p>
       <input id="input-field" />
       <br />
-      <button id="submit-button">Submit</button>
+      <button id="submit-button">Play</button>
       <p>Output:</p>
-      <div id="output-div"></div>
+      <div id="output-div">Press Play to begin.</div>
     </div>
     <!-- Import program logic -->
     <script src="script.js"></script>
diff --git a/script.js b/script.js
index bbe8a293..6086c11d 100644
--- a/script.js
+++ b/script.js
@@ -1,4 +1,111 @@
-var main = function (input) {
-  var myOutputValue = 'hello world';
-  return myOutputValue;
-};
+var gameMode = "gameStart";
+var roundNumber = 1;
+var button = document.getElementById("submit-button");
+var d1Roll;
+var d2Roll;
+var chosenNumber1;
+var chosenNumber2;
+var outputMsg = ``;
+var p1Score = 0;
+var p2Score = 0;
+
+function getDiceRoll() {
+  var rolledDice = Math.floor(Math.random() * 6 + 1);
+  return rolledDice;
+}
+
+function main(input) {
+  //start game
+  if (gameMode == "gameStart") {
+    button.innerText = "Roll";
+    outputMsg = `Round ${roundNumber} is starting. Player 1 press roll to begin.`;
+    gameMode = "p1Roll";
+    button.innerText = "Roll";
+  }
+
+  //Player1 rolls dice
+  else if (gameMode == "p1Roll") {
+    d1Roll = getDiceRoll().toString();
+    d2Roll = getDiceRoll().toString();
+
+    if (d1Roll == d2Roll) {
+      chosenNumber1 = Number(d1Roll + d2Roll);
+      outputMsg = `You rolled ${d1Roll} for both dices. Your number is: ${chosenNumber1}`;
+      button.innerText = "Roll";
+      gameMode = "p2Roll";
+    } else {
+      gameMode = "p1Choose";
+      outputMsg = `You rolled:<br> Dice One: ${d1Roll}<br> Dice Two: ${d2Roll}<br>Choose which dice goes first:<br>Enter 1 for Dice One, Enter 2 for Dice Two.`;
+      button.innerText = "Choose";
+    }
+  }
+
+  //Player 1 decides which dice to use first
+  else if (gameMode == "p1Choose") {
+    if (input != 1 && input != 2) {
+      outputMsg = "Invalid input. Enter 1 for Dice One, Enter 2 for Dice Two.";
+    } else {
+      if (input == 1) {
+        chosenNumber1 = Number(d1Roll + d2Roll);
+        button.innerText = "Roll";
+        outputMsg = `Player 1. Your number is ${chosenNumber1}.<br>Player 2. Press Roll to roll your dice.`;
+      } else if (input == 2) {
+        chosenNumber1 = Number(d2Roll + d1Roll);
+        button.innerText = "Roll";
+        outputMsg = `Player 1. Your number is ${chosenNumber1}.<br>Player 2. Press Roll to roll your dice.`;
+      }
+      gameMode = "p2Roll";
+    }
+  }
+  //   //Player 2 rolls dice
+  else if (gameMode == "p2Roll") {
+    d1Roll = getDiceRoll().toString();
+    d2Roll = getDiceRoll().toString();
+
+    if (d1Roll == d2Roll) {
+      chosenNumber2 = Number(d1Roll + d2Roll);
+      outputMsg = `You rolled ${d1Roll} for both dices. Your number is: ${chosenNumber2}`;
+      button.innerText = "Roll";
+      gameMode = "results";
+    } else {
+      gameMode = "p2Choose";
+      outputMsg = `You rolled:<br> Dice One: ${d1Roll}<br> Dice Two: ${d2Roll}<br>Choose which dice goes first:<br>Enter 1 for Dice One, Enter 2 for Dice Two.`;
+      button.innerText = "Choose";
+    }
+  }
+
+  //   //Player 2 decides which dice to use first
+  else if (gameMode == "p2Choose") {
+    if (input != 1 && input != 2) {
+      outputMsg = "Invalid input. Enter 1 for Dice One, Enter 2 for Dice Two.";
+    } else {
+      if (input == 1) {
+        chosenNumber2 = Number(d1Roll + d2Roll);
+        button.innerText = "Results";
+        outputMsg = `Player 2. Your number is ${chosenNumber2}.<br> Press Results to continue.`;
+      } else if (input == 2) {
+        chosenNumber2 = Number(d2Roll + d1Roll);
+        button.innerText = "Results";
+        outputMsg = `Player 2. Your number is ${chosenNumber2}.<br> Press Results to continue.`;
+      }
+      gameMode = "results";
+    }
+  }
+  //   //Winner
+  else if (gameMode == "results") {
+    if (chosenNumber1 > chosenNumber2) {
+      outputMsg = `Player 1 played ${chosenNumber1}, Player 2 played ${chosenNumber2}.<br>
+  Player 1 wins.`;
+    } else {
+      outputMsg = `Player 1 played ${chosenNumber1}, Player 2 played ${chosenNumber2}.<br>
+  Player 2 wins.`;
+    }
+  }
+  //   //Score
+  else if (gameMode == "score") {
+  }
+  //   //Restart
+  else if (gameMode == "restart") {
+  }
+  return outputMsg;
+}

From bab67ef9f7c46aa812a379ae764068557c6e3715 Mon Sep 17 00:00:00 2001
From: yehudz95 <205nabil@gmail.com>
Date: Sun, 4 Feb 2024 18:38:46 +0800
Subject: [PATCH 3/4] finished code with adding scores

---
 script.js | 40 +++++++++++++++++++++++++++++-----------
 1 file changed, 29 insertions(+), 11 deletions(-)

diff --git a/script.js b/script.js
index 6086c11d..222cd960 100644
--- a/script.js
+++ b/script.js
@@ -20,7 +20,6 @@ function main(input) {
     button.innerText = "Roll";
     outputMsg = `Round ${roundNumber} is starting. Player 1 press roll to begin.`;
     gameMode = "p1Roll";
-    button.innerText = "Roll";
   }
 
   //Player1 rolls dice
@@ -30,7 +29,7 @@ function main(input) {
 
     if (d1Roll == d2Roll) {
       chosenNumber1 = Number(d1Roll + d2Roll);
-      outputMsg = `You rolled ${d1Roll} for both dices. Your number is: ${chosenNumber1}`;
+      outputMsg = `PLayer 1. You rolled ${d1Roll} for both dices. Your number is: ${chosenNumber1}.<br>Player 2. Press Roll to roll your dice.`;
       button.innerText = "Roll";
       gameMode = "p2Roll";
     } else {
@@ -64,8 +63,8 @@ function main(input) {
 
     if (d1Roll == d2Roll) {
       chosenNumber2 = Number(d1Roll + d2Roll);
-      outputMsg = `You rolled ${d1Roll} for both dices. Your number is: ${chosenNumber2}`;
-      button.innerText = "Roll";
+      outputMsg = `Player 2. You rolled ${d1Roll} for both dices. Your number is: ${chosenNumber2}<br> Press Results to continue.`;
+      button.innerText = "Results";
       gameMode = "results";
     } else {
       gameMode = "p2Choose";
@@ -93,19 +92,38 @@ function main(input) {
   }
   //   //Winner
   else if (gameMode == "results") {
-    if (chosenNumber1 > chosenNumber2) {
+    p1Score = p1Score + chosenNumber1;
+    p2Score = p2Score + chosenNumber2;
+    if (chosenNumber1 == chosenNumber2) {
       outputMsg = `Player 1 played ${chosenNumber1}, Player 2 played ${chosenNumber2}.<br>
-  Player 1 wins.`;
+  Its a tie!`;
+    } else if (chosenNumber1 > chosenNumber2) {
+      outputMsg = `Player 1 played ${chosenNumber1}, Player 2 played ${chosenNumber2}.<br>
+  Player 1 wins this round.`;
     } else {
       outputMsg = `Player 1 played ${chosenNumber1}, Player 2 played ${chosenNumber2}.<br>
-  Player 2 wins.`;
+  Player 2 wins this round.`;
     }
+    button.innerText = "View Scores";
+    gameMode = "score";
   }
-  //   //Score
+  //Score
   else if (gameMode == "score") {
+    if (p1Score > p2Score) {
+      outputMsg = `Total Score as of Round ${roundNumber}!<br>
+    Player 1: ${p1Score}<br>Player 2: ${p2Score}<br>Player 1 is winning!`;
+      button.innerText = `Play Round ${roundNumber + 1}`;
+    } else if (p2Score > p1Score) {
+      outputMsg = `Total Score as of Round ${roundNumber}!<br>
+    Player 2: ${p2Score}<br>Player 1: ${p1Score}<br>Player 2 is winning!`;
+      button.innerText = `Play Round ${roundNumber + 1}`;
+    } else {
+      outputMsg = `Total Score as of Round ${roundNumber}!<br>
+    Player 1: ${p1Score}<br>Player 2: ${p2Score}<br>Its a tie!`;
+    }
+    gameMode = "gameStart";
+    roundNumber++;
   }
-  //   //Restart
-  else if (gameMode == "restart") {
-  }
+
   return outputMsg;
 }

From 2ba08760f1c1f3f399a3118260cd5a37dd36974a Mon Sep 17 00:00:00 2001
From: yehudz95 <205nabil@gmail.com>
Date: Sun, 4 Feb 2024 19:37:42 +0800
Subject: [PATCH 4/4] Added features for user to input number of rounds to be
 played and thereafter a restart feature to refresh page

---
 index.html |  4 ++--
 script.js  | 47 +++++++++++++++++++++++++++++++++++++----------
 2 files changed, 39 insertions(+), 12 deletions(-)

diff --git a/index.html b/index.html
index 185ab1a6..e77120a2 100644
--- a/index.html
+++ b/index.html
@@ -55,9 +55,9 @@ <h1 id="header">🎲Nabil's: Beat That!🎲</h1>
       <p>Input:</p>
       <input id="input-field" />
       <br />
-      <button id="submit-button">Play</button>
+      <button id="submit-button">Confirm Number of Rounds</button>
       <p>Output:</p>
-      <div id="output-div">Press Play to begin.</div>
+      <div id="output-div">How many rounds do you want to play?</div>
     </div>
     <!-- Import program logic -->
     <script src="script.js"></script>
diff --git a/script.js b/script.js
index 222cd960..e4eb4543 100644
--- a/script.js
+++ b/script.js
@@ -1,4 +1,4 @@
-var gameMode = "gameStart";
+var gameMode = "numberOfRounds";
 var roundNumber = 1;
 var button = document.getElementById("submit-button");
 var d1Roll;
@@ -8,6 +8,9 @@ var chosenNumber2;
 var outputMsg = ``;
 var p1Score = 0;
 var p2Score = 0;
+var totalRounds = 0;
+var scoreMsg;
+var winMsg;
 
 function getDiceRoll() {
   var rolledDice = Math.floor(Math.random() * 6 + 1);
@@ -15,8 +18,21 @@ function getDiceRoll() {
 }
 
 function main(input) {
+  //number of rounds
+
+  if (gameMode == "numberOfRounds") {
+    if (isNaN(input) || input == "") {
+      outputMsg = "Invalid input. Enter the number of rounds you wish to play.";
+    } else {
+      totalRounds = Number(input);
+      gameMode = "gameStart";
+      outputMsg = "Press Play to begin.";
+      button.innerText = "Play";
+    }
+  }
+
   //start game
-  if (gameMode == "gameStart") {
+  else if (gameMode == "gameStart") {
     button.innerText = "Roll";
     outputMsg = `Round ${roundNumber} is starting. Player 1 press roll to begin.`;
     gameMode = "p1Roll";
@@ -24,7 +40,7 @@ function main(input) {
 
   //Player1 rolls dice
   else if (gameMode == "p1Roll") {
-    d1Roll = getDiceRoll().toString();
+    d1Roll = getDiceRoll().toString(); //making rolls a string to allow concatenation of rolls to combine dice rolls into a number.
     d2Roll = getDiceRoll().toString();
 
     if (d1Roll == d2Roll) {
@@ -110,19 +126,30 @@ function main(input) {
   //Score
   else if (gameMode == "score") {
     if (p1Score > p2Score) {
-      outputMsg = `Total Score as of Round ${roundNumber}!<br>
-    Player 1: ${p1Score}<br>Player 2: ${p2Score}<br>Player 1 is winning!`;
+      winMsg = "Player 1 Wins!";
+      scoreMsg = `Total Score as of Round ${roundNumber}!<br>
+    Player 1: ${p1Score}<br>Player 2: ${p2Score}`;
       button.innerText = `Play Round ${roundNumber + 1}`;
     } else if (p2Score > p1Score) {
-      outputMsg = `Total Score as of Round ${roundNumber}!<br>
-    Player 2: ${p2Score}<br>Player 1: ${p1Score}<br>Player 2 is winning!`;
+      winMsg = "Player 2 Wins!";
+      scoreMsg = `Total Score as of Round ${roundNumber}!<br>
+    Player 2: ${p2Score}<br>Player 1: ${p1Score}`;
       button.innerText = `Play Round ${roundNumber + 1}`;
     } else {
-      outputMsg = `Total Score as of Round ${roundNumber}!<br>
+      scoreMsg = `Total Score as of Round ${roundNumber}!<br>
     Player 1: ${p1Score}<br>Player 2: ${p2Score}<br>Its a tie!`;
     }
-    gameMode = "gameStart";
-    roundNumber++;
+    if (roundNumber == totalRounds) {
+      outputMsg = `Game Over!<br>${scoreMsg}<br>${winMsg}`;
+      button.innerText = "Restart Game";
+      button.addEventListener("click", function () {
+        location.reload(); // function to refresh page and restart game.
+      });
+    } else {
+      gameMode = "gameStart";
+      roundNumber++;
+      outputMsg = scoreMsg;
+    }
   }
 
   return outputMsg;
