fix background and player name

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

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');

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">

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;
 }