Funktion hinzugefügt, die anzeigt, welcher Spieler aktiv ist, und HTML-Layout angepasst

schlangen_und_leitern/HTML.html

@@ -26,13 +26,17 @@
     </div>
 
 
-    <div calss = container id="playArea" >    
-        <canvas id= "canvas"></canvas>
+    <div calss = container id="playArea" >   
+        <div id="leftSide"> 
+            <canvas id= "canvas"></canvas>
             <table id = "board"></table>
-        <div class = container id="würfelBereich" style="display: none;" >
-            <img src="/img/wurfle/f(1).png" id="face">
-            <input type = "button" id="rollButton"  value = "Würfeln">  
-        
+        </div>
+        <div id = "rightSide">
+            <p id ="isUp">Spieler 1 ist dran</p>
+            <div class = container id="würfelBereich" style="display: none;" >
+                <img src="/img/wurfle/f(1).png" id="face">
+                <input type = "button" id="rollButton"  value = "Würfeln">  
+            </div>
         </div>
     </div>
 

schlangen_und_leitern/css/style.css

@@ -51,7 +51,7 @@ width: auto;
 .th, td{
     width: 50px;
     height: 50px;
-    outline: 2px dashed black;
+    outline: 2px solid black;
 }
 
 
@@ -85,6 +85,25 @@ width: auto;
 #canvas{
 z-index: 2;
 position: fixed;
+}
+
+#leftSide{
+
+    width: 557px; 
+    height: 537px;
+    float: left; 
+}
+#rightSide{
+
+    margin-left: 537px; 
+    height: 537px;
+}
+
+#isUp{
+
+    text-align: center;
+    font-size: 60px;
+    display: none;
 
 
 

schlangen_und_leitern/js/Bridge.js

@@ -6,6 +6,7 @@ function init(playerCount){
     document.getElementById("2Player").style.display = "none";
     document.getElementById("3Player").style.display = "none";
     document.getElementById("4Player").style.display = "none";
+    document.getElementById("isUp").style.display = "block";
         
     // Wufelbereich zeigen.
     document.getElementById("würfelBereich").style.display = "grid";
@@ -31,6 +32,7 @@ function init(playerCount){
     drawCanavas();
     canvasPointGen(canvasPointArr);
     createBoardObjects(canvasPointArr, objectArr)
+    
 
 
 
@@ -39,7 +41,7 @@ function init(playerCount){
 
 function gameloop (boardArr, playerArray, playerCount){
     console.log("player " + turnCount + " ist dran");
-
+    
     //würfle function aufrufen
     let roll = rollDice();
 
@@ -76,5 +78,7 @@ function gameloop (boardArr, playerArray, playerCount){
     else {
         turnCount ++ 
     }
+    //show who is up 
+    turnIndicater(turnCount);
 
 }

schlangen_und_leitern/js/playerHandling.js

@@ -72,10 +72,10 @@ function movePlayer(player, roll){
 
         }
         
-    }
+}
 
 
-     //Stele Zeichnen
+//Stele Zeichnen
      function drawNew(playerArray, turnCount){
         // wo muss es hin 
         var player = playerArray[turnCount-1];
@@ -131,7 +131,7 @@ function movePlayer(player, roll){
         }
         
     }
-    //TODO zeichen für jede Spieler
+
   
     
 
@@ -166,4 +166,46 @@ function movePlayer(player, roll){
                 console.log("Error: Zellenummer " + tableId + " nicht gefunden"); //Druckt Errror auf dem console wenn unerfolgereich
             }
         }
-        
+
+
+
+
+function turnIndicater(turnCount){
+    
+    let isUp =document.getElementById("isUp")
+
+    switch (turnCount) {
+        case 1:
+            isUp.innerHTML = "Spieler 1 ist dran"
+            break;
+    
+        case 2:
+            isUp.innerHTML = "Spieler 2 ist dran"
+            break;
+        case 3:
+            isUp.innerHTML = "Spieler 3 ist dran"
+            break;
+    
+        case 4:
+            isUp.innerHTML = "Spieler 4 ist dran"
+            break;
+    
+        default:
+            break;
+    }
+
+
+
+}
+
+
+function checkWin(player){
+
+    if(player.position == 100){        
+    } 
+}
+
+
+
+
+