From 69edc2294b18c2c5b01c5a129fef21871a094590 Mon Sep 17 00:00:00 2001
From: angelaliu792 <angela.liu792@gmail.com>
Date: Wed, 24 Apr 2024 15:29:59 +1000
Subject: [PATCH] fix background and  player name

---
 README.md  |  3 +--
 app.js     | 29 ++++++++---------------------
 index.html |  4 ++--
 style.css  |  2 +-
 4 files changed, 12 insertions(+), 26 deletions(-)

diff --git a/README.md b/README.md
index 3bf973b..81d2f4f 100644
--- a/README.md
+++ b/README.md
@@ -29,8 +29,7 @@ $ node app.js
 ## :scream: Bugs to fix :poop:
 - Game continues to play after winner is determined
 - Align score for "tie" with the other players
-- Game unable to reset 
-- Background image tiles
+- If you play the game too many times the green background won't reset and the same character appears more than once
 
 
 ## :sob: Lessons learnt
diff --git a/app.js b/app.js
index 9aade1a..1961f5d 100644
--- a/app.js
+++ b/app.js
@@ -15,8 +15,6 @@ tttBoxElems.forEach(box => {
     box.addEventListener('click', handleClick)
 })
 
-
-
 playAgainBtn.addEventListener('click', resetGame)
 
 // add player function
@@ -44,8 +42,7 @@ function handleClick(event) {
             } else {
                 xPlayerScoreElem.textContent = Number(xPlayerScoreElem.textContent) + 1;
             }
-            // turn winning row green
-            
+
         } else if (isTie()){
             // show play again button
             playAgainBtn.classList.remove('hidden')
@@ -77,10 +74,14 @@ function checkWins() {
         const boxA = tttBoxElems[a];
         const boxB = tttBoxElems[b];
         const boxC = tttBoxElems[c];
-
+        
         if (boxA.classList.contains(currentPlayer === 'X' ? 'wolverine' : 'deadpool') &&
-            boxB.classList.contains(currentPlayer === 'X' ? 'wolverine' : 'deadpool') &&
-            boxC.classList.contains(currentPlayer === 'X' ? 'wolverine' : 'deadpool')) {
+        boxB.classList.contains(currentPlayer === 'X' ? 'wolverine' : 'deadpool') &&
+        boxC.classList.contains(currentPlayer === 'X' ? 'wolverine' : 'deadpool')) {
+            // turn winning row green. needs fixing
+            // boxA.style.backgroundColor = 'green'
+            // boxB.style.backgroundColor = 'green'
+            // boxC.style.backgroundColor = 'green'
             return true; 
         }
     }
@@ -103,21 +104,7 @@ function switchPlayer() {
 function resetGame() {
     // clear the board
     tttBoxElems.forEach(box => {
-        box.textContent = ''
         box.classList.remove('wolverine', 'deadpool');
-
-        const wolverineImage = document.createElement('img');
-        wolverineImage.src = 'images/wolverine-removebg-preview.png';
-        wolverineImage.alt = 'wolverine';
-        wolverineImage.classList.add('hidden');
-        box.appendChild(wolverineImage);
-
-        const deadpoolImage = document.createElement('img');
-        deadpoolImage.src = 'images/deadpool-removebg-preview.png';
-        deadpoolImage.alt = 'deadpool';
-        deadpoolImage.classList.add('hidden');
-        box.appendChild(deadpoolImage);
-        
         const images = box.querySelectorAll('img');
         images.forEach(image => {
             image.classList.add('hidden');
diff --git a/index.html b/index.html
index 34fa531..06e80a3 100644
--- a/index.html
+++ b/index.html
@@ -15,8 +15,8 @@ <h1>TIC TAC TOE</h1>
         <aside>
             <div class="score">
                 <h2>Score</h2>
-                <p><span class="player-o">O </span>Player: <span class="o-score-value">0</span></p>
-                <p><span class="player-x">X </span>Player: <span class="x-score-value">0</span></p>
+                <p>Deadpool: <span class="o-score-value">0</span></p>
+                <p>Wolverine: <span class="x-score-value">0</span></p>
                 <p class="tie">Tie: <span class="tie-score-value">0</span></p>
             </div>
             <div class="result">
diff --git a/style.css b/style.css
index c161615..bdb15d9 100644
--- a/style.css
+++ b/style.css
@@ -1,7 +1,7 @@
 body {
     font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
     background-image: url(images/doctor-van-nostrand-deadpool-wolverine.jpg);
-    background-size: cover;
+    background-size: 100vmax;
     color: white;
 }