Debug Modus fixed

uno/index.html

@@ -11,6 +11,8 @@
         <p id="playerInGame"></p>
         <p id="player"></p>
         <p id="cardOnDeck"></p>
+        <div id="playerCards"></div>
+        <button id="drawCard">Karte Ziehen</button>
     </div>
 </body>
 </html>

uno/web/Game.js

@@ -5,7 +5,7 @@ import Skip from "./cards/special/Skip.js";
 import PlusAmount from "./cards/special/PlusAmount.js";
 import Reverse from "./cards/special/Reverse.js";
 import Player from "./Player.js";
-import {CARD_COLORS} from "./uno.js";
+import {CARD_COLORS, style} from "./uno.js";
 
 //Um generatePool zu exportieren, muss es in eine Klasse konvertiert werden
 export default class Game {
@@ -154,12 +154,15 @@ export default class Game {
 
         //Aktuellen Spieler kann, darf nicht mehr Spielen
         this.players[this.currentPlayer].canPlay = false;
+        this.players[this.currentPlayer].turn = false;
 
         }
 
         //nächster Spieler wird gesetzt
         this.currentPlayer = this.nextPlayer();
 
+        this.players[this.currentPlayer].turn = true;
+
         //Aktualisiere das Deck des aktuellen Spielers, welche Karten er legen kann
         this.refreshCanPutCard();
 
@@ -168,14 +171,14 @@ export default class Game {
     //Testet alle Karten des aktuellen Spielers in seiner Hand, ob er sie legen kann
     refreshCanPutCard(){
         //Deck des aktuellen Spielers
-        let currentPlayerCards = this.players[this.currentPlayer].hand;
+        let currentPlayerCards = this.currentPlayerInstanz.hand;
 
         //Gehe alle Karten vom Deck durch
         for(let i = 0; i < currentPlayerCards.length; i++){
 
             //Wenn Farbe oder Zahl gleich oder eine Karte, die keine Farbe hat
             if(this._cardOnDeck.name.toString() === currentPlayerCards[i].name.toString() ||
-                this._cardPool._color === currentPlayerCards[i].color ||
+                this.cardOnDeck.color === currentPlayerCards[i].color ||
                 currentPlayerCards[i].color === CARD_COLORS[0] ||
                 this.cardOnDeck.color === CARD_COLORS[0]) {
 

uno/web/Player.js

@@ -36,9 +36,11 @@ export default class Player {
     //Parameter: Index vom Deck des Spielers, wo die Karte liegt
     putCard(index){
         //Karte muss hinterlegt haben, dass sie gelegt werden kann
+        if(!this.turn) return;
         if(!this._hand[index].canPut) return;
         if(this._turn === false) return;
 
+
         //Wenn eine Karte auf dem Tisch liegt
         if(this._game.cardOnDeck != null){
 
@@ -58,6 +60,7 @@ export default class Player {
 
         //führe Funktion der Karte aus
         this._game.cardOnDeck.putSelf();
+
     }
 
     selectColor(){

uno/web/Style.js

@@ -1,22 +1,42 @@
-
 export default class Style{
 
     constructor(gameInstanz) {
         this._game = gameInstanz;
+
+        $('#drawCard').on('click', ()=>{
+            this.game.currentPlayerInstanz.drawCard(1);
+            this.refreshDebug();
+        });
     }
 
     refreshDebug(){
+        $('#drawCard').css('background-color', 'white');
+
         $("#player").html("Spieler: " + this.game.currentPlayerInstanz.name);
-        //$("#playerCards").html("Spieler: " + this.game.currentPlayerInstanz.name);
+        $("#playerCards").html("Karten: ");
+        for (let i = 0; i < this.game.currentPlayerInstanz.hand.length; i++){
+            $('#playerCards').append(this.game.currentPlayerInstanz.hand[i].name + " - " + this.game.currentPlayerInstanz.hand[i].color);
+            $('#playerCards').append('<button id="button' + i + '">+</button>  | ');
+            $('#button' + i).on('click', () =>{
+               this.game.currentPlayerInstanz.putCard(i);
+               this.refreshDebug();
+            });
+            if (this.game.currentPlayerInstanz.hand[i].canPut)
+                $('#button' + i).css('background-color', 'green');
+        }
+        $('#playerCards').append("" + this.game.currentPlayerInstanz.hand.length)
         $("#cardOnDeck").html("Karte auf dem Tisch: " + this.game.cardOnDeck.name + " - " + this.game.cardOnDeck.color);
         $("#playerInGame").html("Spieler im Spiel: " + this.game.players.length);
+
+        if(!this.game.currentPlayerInstanz.canPlay)
+            $('#drawCard').css('background-color', 'red');
     }
 
-    showDebug(){
+    static showDebug(){
         $('#debug').show();
     }
 
-    hideDebug(){
+    static hideDebug(){
         $('#debug').hide();
     }
 

uno/web/uno.js

@@ -4,18 +4,23 @@ import Style from "./Style.js";
 
 export const CARD_COLORS = ["NONE", "BLUE", "GREEN", "RED", "YELLOW"];
 
-console.log("ewew")
+export let style;
 
 let rules = {
     startCards: 5,
     firstPlaySpecial: true,
 }
+$(()=>{
+
+    let game = new Game(2, rules);
+    style = new Style(game);
+    game.start();
+
+    Style.showDebug();
+    style.refreshDebug();
+
+});
 
-let game = new Game(2, rules);
-let style = new Style(game);
-game.start();
 
-style.showDebug();
-style.refreshDebug();