add coloring to output text depending on outcome

oddtO · Feb 3, 2023 · 151981e · 151981e
1 parent 41689b3
commit 151981e
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 9 deletions.
diff --git a/game.js b/game.js
@@ -82,7 +82,7 @@
         let playerScore = 0;
         let computerScore = 0;
 
-        let lastOutcome = '';
+        let lastOutcome = {resultString: '', hasWon: null};
 
         let playerScoreElement = document.querySelector('#playerScore');
         let computerScoreElement = document.querySelector('#computerScore');
@@ -100,7 +100,24 @@
             playerScoreElement.textContent = playerScore;
             computerScoreElement.textContent = computerScore;
 
-            choiceOutcomeElement.textContent = lastOutcome;
+            choiceOutcomeElement.textContent = lastOutcome.resultString;
+
+            switch(lastOutcome.hasWon)
+            {
+
+                case null:
+                    choiceOutcomeElement.className = 'draw';
+                    break;
+                case true:
+                    choiceOutcomeElement.className = 'won';
+                    break;
+                case false:
+                    choiceOutcomeElement.className = 'lost';
+                    break;
+
+            }
+
+
 
         }
 
@@ -109,10 +126,7 @@
         {
             let computerChoice = getComputerChoice();
 
-            let outcome = playRound(playerChoice, computerChoice);
-
-            lastOutcome = outcome.resultString;
-            return outcome.hasWon;
+            lastOutcome = playRound(playerChoice, computerChoice);
 
         }
 
@@ -127,7 +141,8 @@
             {
                 playerScore = computerScore = 0;
             }
-            switch(startRound(event.target.dataset.choice))
+            startRound(event.target.dataset.choice);
+            switch(lastOutcome.hasWon)
             {
 
                 case null:
@@ -143,7 +158,7 @@
 
             if(isScoreBreached())
             {
-                lastOutcome = (playerScore > computerScore ? "Player" : "Computer") + " wins!";
+                lastOutcome.resultString = (playerScore > computerScore ? "Player" : "Computer") + " wins!";
             }
 
             render();

diff --git a/index.html b/index.html
@@ -15,7 +15,7 @@ <h1>Rock Paper Scissors</h1>
     <div id="scores">Score: <div><span id="playerScore">0</span> : <span id="computerScore">0</span></div></div>
 
     <output id="choiceOutcome" for="playerChoiceButtons">
-        Sample output!
+        Pick something
     </output>
 
 

diff --git a/styles.css b/styles.css
@@ -34,6 +34,26 @@ body h1
     font-size: 30px;
 }
 
+#choiceOutcome[class]
+{
+    font-weight: 900;
+}
+
+.lost#choiceOutcome
+{
+    color: red;
+}
+
+.won#choiceOutcome
+{
+    color: green;
+}
+
+.draw#choiceOutcome
+{
+    color: orange;
+}
+
 
 #playerChoiceButtons button
 {