changed code -> added scoring

changed index -> added scoring boxes
changed style -> minor tweaks

code.js

@@ -19,10 +19,17 @@ let turnTotal = 0;
 let turnPlayer;
 let piecesX;
 let piecesO;
+let scoreX = 0;
+let scoreCounterX = 100;
+let scoreO = 0;
+let scoreCounterO = 100;
 let gameOver = false;
 let winner;
 let somethingIsSelected = false;
 
+document.getElementById("scoreCounter").innerText = "Score counter: 100";
+document.getElementById("scoreX").innerText = "Score X: 0";
+document.getElementById("scoreO").innerText = "Score O: 0";
 for(let i = 0; i < 64; i++){
     fieldId = i.toString();
     document.getElementById("field"+fieldId).selected = 0;                                                              //Sorgt dafür dass alle Felder die selected variable haben und diese 0 ist
@@ -82,6 +89,7 @@ function selectField(field){
         somethingIsSelected = false;
         resetValidMoves();
     } else if (field.validMove !== 0){
+        score(field);
         field.piece = movePiece(field, selectedPiece);
         selectedPiece.piece = 0;
         drawPieces();
@@ -422,4 +430,30 @@ function checkWinCondition(){
             }
         }
     }
+}
+function score (field){
+    if(field.piece === 0 && turnPlayer === "Player-Turn: X" && scoreCounterX > 10){
+        scoreCounterX -= 10;
+    } else if(field.piece === 0 && turnPlayer === "Player-Turn: O" && scoreCounterO > 10){
+        scoreCounterO -= 10;
+    } else if (field.piece === 1){
+        scoreO += scoreCounterO;
+        scoreCounterO = 100;
+    } else if (field.piece === 11){
+        scoreO += ((scoreCounterO + 50) * 2)
+        scoreCounterO = 100;
+    } else if (field.piece === 2){
+        scoreX += scoreCounterX;
+        scoreCounterX = 100;
+    } else if (field.piece === 2){
+        scoreX += ((scoreCounterX + 50) * 2)
+        scoreCounterX = 100;
+    }
+    if(turnPlayer === "Player-Turn: X"){
+        document.getElementById("scoreCounter").innerText = "Score counter: " + scoreCounterO;
+    } else if (turnPlayer === "Player-Turn: O"){
+        document.getElementById("scoreCounter").innerText = "Score counter: " + scoreCounterX;
+    }
+    document.getElementById("scoreO").innerText = "Score O: " + scoreO;
+    document.getElementById("scoreX").innerText = "Score X: " + scoreX;
 }

index.html

@@ -11,6 +11,9 @@
     <li><a href="#HighScore">HighScore</a></li>
     <li id="turnTotal">yeet</li>
     <li id="turnPlayer">yeet</li>
+    <li id="scoreCounter">yeet</li>
+    <li id="scoreX">yeet</li>
+    <li id="scoreO">yeet</li>
     <li><a href="index.html">Reset</a></li>
     <li style="float:right"><a href="#Nickname">Nickname</a></li>
 </ul>

style.css

@@ -5,7 +5,7 @@ ul {
     overflow: hidden;
     background-color: #333;
     height: auto;
-    width: 800px;
+    width: 1000px;
     position: absolute;
     top: 5%;
 }
@@ -19,11 +19,11 @@ li:last-child {
     border-right: none;
 }
 
-li a, #turnTotal, #turnPlayer {
+li a, #turnTotal, #turnPlayer, #scoreCounter, #scoreO, #scoreX {
     display: block;
     color: white;
     text-align: center;
-    padding: 14px 16px;
+    padding: 12px 14px;
     text-decoration: none;
 }