From c8cdd06f0205388fb2b41246e0e68a440bb8dd2a Mon Sep 17 00:00:00 2001
From: Richard Halsall <–richard-glyn.halsall@informatik.hs-fulda.e>
Date: Wed, 8 Feb 2023 12:50:45 +0100
Subject: [PATCH] =?UTF-8?q?Funktion=20hinzugef=C3=BCgt,=20die=20anzeigt,?=
 =?UTF-8?q?=20welcher=20Spieler=20aktiv=20ist,=20und=20HTML-Layout=20angep?=
 =?UTF-8?q?asst?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 schlangen_und_leitern/HTML.html            | 16 ++++---
 schlangen_und_leitern/css/style.css        | 21 ++++++++-
 schlangen_und_leitern/js/Bridge.js         |  6 ++-
 schlangen_und_leitern/js/playerHandling.js | 50 ++++++++++++++++++++--
 4 files changed, 81 insertions(+), 12 deletions(-)

diff --git a/schlangen_und_leitern/HTML.html b/schlangen_und_leitern/HTML.html
index b6f01fb..ee5dd4b 100644
--- a/schlangen_und_leitern/HTML.html
+++ b/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>
 
diff --git a/schlangen_und_leitern/css/style.css b/schlangen_und_leitern/css/style.css
index d62ab60..8592a3e 100644
--- a/schlangen_und_leitern/css/style.css
+++ b/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;
 
 
 
diff --git a/schlangen_und_leitern/js/Bridge.js b/schlangen_und_leitern/js/Bridge.js
index a83b074..9fc20b7 100644
--- a/schlangen_und_leitern/js/Bridge.js
+++ b/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);
 
 }
\ No newline at end of file
diff --git a/schlangen_und_leitern/js/playerHandling.js b/schlangen_und_leitern/js/playerHandling.js
index 947a317..efc3ec0 100644
--- a/schlangen_und_leitern/js/playerHandling.js
+++ b/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){        
+    } 
+}
+
+
+
+
+