Added a scoreboard

decyjphr · Nov 1, 2019 · 886ae4f · 886ae4f
1 parent 31d9f85
commit 886ae4f
Show file tree

Hide file tree

Showing 3 changed files with 115 additions and 45 deletions.
diff --git a/index.html b/index.html
@@ -13,24 +13,47 @@
     <div id="app">
       <div>
         <h2 id="turn">It's <span id="player"></span>'s turn!</h2>
+        <h2 id="win">
+          <span id="winner"></span> wins!
+          <button id="newGame">Play again?</button>
+        </h2>
+      </div>
+      <div id="game">
+        <table id="tictactoe">
+          <tr"0">
+            <td class="0 0"></td>
+            <td class="0 1"></td>
+            <td class="0 2"></td>
+          </tr>
+          <tr>
+            <td class="1 0"></td>
+            <td class="1 1"></td>
+            <td class="1 2"></td>
+          </tr>
+          <tr>
+            <td class="2 0"></td>
+            <td class="2 1"></td>
+            <td class="2 2"></td>
+          </tr>
+        </table>
+        <div id="score">
+          <h2>Score</h2>
+          <table>
+            <thead>
+              <tr>
+                <th id="p1Name"></th>
+                <th id="p2Name"></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td id="p1Score">0</td>
+                <td id="p2Score">0</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
       </div>
-      <table>
-        <tr"0">
-          <td class="0 0"></td>
-          <td class="0 1"></td>
-          <td class="0 2"></td>
-        </tr>
-        <tr>
-          <td class="1 0"></td>
-          <td class="1 1"></td>
-          <td class="1 2"></td>
-        </tr>
-        <tr>
-          <td class="2 0"></td>
-          <td class="2 1"></td>
-          <td class="2 2"></td>
-        </tr>
-      </table>
     </div>
   </body>
 </html>
diff --git a/public/index.css b/public/index.css
@@ -1,8 +1,10 @@
-table {
+#game { display: flex; }
+
+#tictactoe {
   border-collapse: collapse;
 }
 
-table td {
+#tictactoe td {
   min-height: 100px;
   min-width: 100px;
   height: 100px;
@@ -13,15 +15,35 @@ table td {
   border: thin solid black;
 }
 
-table td:hover {
+#tictactoe td:hover {
   background: #CCCCCC;
 }
 
-table tr {
+#tictactoe tr {
   width: 300px;
   height: 100px;
 }
 
+#score {
+  margin-left: 5%;
+}
+
+#score table {
+  border-collapse: collapse;
+}
+
+#score tr > * {
+  padding: 5px;
+  text-align: center;
+}
+
+#score th {
+  border-bottom: thin solid black;
+}
+
+#score h2 { margin-top: 0; }
+
+
 #app {
   margin: auto;
   width: 60%;

diff --git a/src/index.js b/src/index.js
@@ -12,29 +12,54 @@ while (!p2 && p1 !== p2) {
 }
 
 window.onload = () => {
-  const game = new Game(p1, p2)
-  const turn = document.getElementById('turn')
-  const player = document.getElementById('player')
-  player.innerText = game.player
-
-  document.querySelectorAll('td').forEach((el) => {
-    el.onclick = (evt) => {
-      el.onclick = undefined
-      evt.target.innerText = game.sym
-      evt.target.onclick = undefined
-
-      const [row, col] = evt.target.classList
-      game.turn(row, col)
-
-      if (game.hasWinner()) {
-        turn.innerText = `${game.player} wins!`
-        document.querySelectorAll('td').forEach(el => {
-          el.onclick = undefined
-        })
-      } else {
-        game.nextPlayer()
-        player.innerText = game.player
+  document.getElementById("p1Name").innerText = p1
+  document.getElementById("p2Name").innerText = p2
+  let score1 = 0
+  let score2 = 0;
+
+  (function playGame(p1, p2) {
+    document.getElementById("win").style.display = "none"
+    document.getElementById("turn").style.display = "inline"
+    document.getElementById("p1Score").innerText = score1
+    document.getElementById("p2Score").innerText = score2
+
+    const game = new Game(p1, p2)
+    const turn = document.getElementById('turn')
+    const player = document.getElementById('player')
+    player.innerText = game.player
+
+    document.querySelectorAll('#tictactoe td').forEach((el) => {
+      el.innerText = ""
+      el.onclick = (evt) => {
+        el.onclick = undefined
+        evt.target.innerText = game.sym
+        evt.target.onclick = undefined
+
+        const [row, col] = evt.target.classList
+        game.turn(row, col)
+
+        if (game.hasWinner()) {
+          document.getElementById("winner").innerText = game.player
+          document.getElementById("win").style.display = "inline"
+          document.getElementById("turn").style.display = "none"
+
+          if (game.player === p1)
+            document.getElementById("p1Score").innerText = ++score1
+          else
+            document.getElementById("p2Score").innerText = ++score2
+
+          document.getElementById("newGame").style.display = "inline"
+          document.getElementById("newGame").onclick = () => playGame(p1, p2)
+
+          document.querySelectorAll('td').forEach(el => {
+            el.onclick = undefined
+          });
+        }
+        else {
+          game.nextPlayer()
+          player.innerText = game.player
+        }
       }
-    }
-  })
+    })
+  })(p1, p2);
 }