changed code -> You can now only select a piece of the player, who's turn it is

changed index -> Added Game-Turn and Player-Turn to the nav-bar
changed style -> Added the ids for said items to the style block of the nav-bar

code.js

@@ -13,6 +13,8 @@ let bottomLeft;
 let rowMin;
 let rowMax;
 let selectedPiece;
+let turnTotal = 0;
+let turnPlayer;
 let somethingIsSelected = false;
 
 for(let i = 0; i < 64; i++){
@@ -32,6 +34,7 @@ for(let i = 0; i < 8; i++){
 
 drawPieces();
 resetValidMoves();
+advanceTurn();
 
 function drawPieces() {
     for (let i = 0; i < 64; i++) {
@@ -54,7 +57,7 @@ function selectField(field){
             somethingIsSelected = true;
         }
     }
-    if(!somethingIsSelected && field.piece !== 0) {
+    if(!somethingIsSelected && ((field.piece === 1 && turnTotal%2 === 1)||(field.piece === 2 && turnTotal%2 === 0))) {
         field.style.backgroundColor = "rgb(16,43,202, 0.3)";
         field.selected = 1;
         if(field.piece === 1){
@@ -78,6 +81,7 @@ function selectField(field){
             document.getElementById("field"+fieldId).selected = 0;
             somethingIsSelected = false;
         }
+        advanceTurn();
     }
 }
 function validMovesPlayer1(field){
@@ -249,3 +253,13 @@ function resetValidMoves(){
         document.getElementById("field" + fieldId).style.backgroundColor = "rgb(255,255,255, 1)";
     }
 }
+function advanceTurn(){
+    turnTotal++;
+    if(turnTotal%2 === 0){
+        turnPlayer = "Player-Turn: O";
+    } else {
+        turnPlayer = "Player-Turn: X";
+    }
+    document.getElementById("turnTotal").innerText = "Game-Turn: "+turnTotal;
+    document.getElementById("turnPlayer").innerText = turnPlayer;
+}

index.html

@@ -9,6 +9,8 @@
 <ul>
     <li><a class="active" href="#index">Play</a></li>
     <li><a href="#HighScore">HighScore</a></li>
+    <li id="turnTotal">yeet</li>
+    <li id="turnPlayer">yeet</li>
     <li style="float:right"><a href="#Nickname">Nickname</a></li>
 </ul>
     <table id="gameTable" class="game">

style.css

@@ -19,7 +19,7 @@ li:last-child {
     border-right: none;
 }
 
-li a {
+li a, #turnTotal, #turnPlayer {
     display: block;
     color: white;
     text-align: center;