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

schlangen_und_leitern/HTML.html

@@ -27,12 +27,16 @@
 
 
     <div calss = container id="playArea" >   
-        <canvas id= "canvas"></canvas>
+        <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";
@@ -35,6 +36,7 @@ function init(playerCount){
 
 
 
+
 }
 
 function gameloop (boardArr, playerArray, playerCount){
@@ -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
+
   
     
 
@@ -167,3 +167,45 @@ function movePlayer(player, roll){
             }
         }
 
+
+
+
+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){        
+    } 
+}
+
+
+
+
+