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("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(){
        $('#debug').show();
        this.refreshDebug();
    }

    hideDebug(){
        $('#debug').hide();
    }

    get game(){
        return this._game;
    }

}