2022-2-WS_group_project_gesellschaftsspiele-sammlung/uno/web/Style.js

import {CARD_COLORS} from "./uno.js";

export default class Style {

    constructor(gameInstanz) {
        this._game = gameInstanz;

        this._cardOnDeck = null;

        this._drawCardRunnig = false;

        this._firstDraw = $('#first-draw');

        this._firstPut = $('#first-put');

        this._firstPutAnim = $('#first-put-anim');

        this._unohover = false;
        this._unoClicked = false;

        $('#sayUno').on('mouseenter', () => {
            if (this._unoClicked) return;
            this.unoHover = true;
            $('.uno').css('width', '28vw');
            $('#sayUno-glow').css('opacity', 1);
        })

        $('#sayUno').on('mouseleave', () => {
            if (this._unoClicked) return;
            this.unoHover = false;
            $('.uno').css('width', '25vw');
            $('#sayUno-glow').css('opacity', 0.3);
            this.startUnoLoop();
        })

        $('#sayUno').on('click', () => {
            this.unoHover = true;
            this._unoClicked = true;
            $('.uno').css('transition', 'width ease-out 0.2s, filter 0.1s');
            $('.uno').css('width', '22vw');
            $('.uno').css('filter', 'grayscale(80%)');
            $('#sayUno-glow').css('opacity', 1);
            this.game.currentPlayerInstanz.sayUno();
        })

        $('#drawCard').on('click', () => {
            if(this.game.currentPlayerInstanz.mustSayUno){
                this.game.currentPlayerInstanz.mustSayUno = false;
                console.log(this.game.currentPlayerInstanz.mustSayUno)
            }
            this.game.currentPlayerInstanz.drawCard(1, true, true);
            this.refreshDebug();
        });

        this.firstDraw.on('mouseenter', () => {
            this.drawCardAnim(true, false);
        });
        this.firstDraw.on('mouseleave', () => {
            this.drawCardAnim(false, false);
        });
        this.firstDraw.on('click', () => {
            if(this.game.currentPlayerInstanz.mustSayUno){
                this.game.currentPlayerInstanz.mustSayUno = false;
                this.game.style.hideUnoButton();
            }

            let playerInstanz = this.game.currentPlayerInstanz;

            this.drawCardAnim(false, true);

            playerInstanz.drawCard(1, true, true);

        });


        this.startUnoLoop();
    }

    refreshHtml() {
        this.refreshCardOnDeck();

        this.showPlayerDeck(this.game.currentPlayerInstanz, true, false, true)

        this.refreshDebug();
    }

    refreshCardOnDeck() {
        if (this._cardOnDeck !== this.game.cardOnDeck) {
            console.log(" ewfw")
            this.putCardAnim();
            this._cardOnDeck = this.game.cardOnDeck;
        } else {
            this.firstPut.attr('src', './img/stackCards/' + this.game.cardOnDeck.color + '/' + this.game.cardOnDeck.name + '.png');
            this.firstPutAnim.attr('src', './img/stackCards/' + this.game.cardOnDeck.color + '/' + this.game.cardOnDeck.name + '.png');
        }
    }

    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);
                setTimeout(() => {
                    this.showPlayerDeck(this.game.currentPlayerInstanz, false, true, false);
                }, 100);
            });
            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');
    }

    showUnoButton(){
        $('.uno').css('transition', 'width ease-in-out 0.5s');
        $('#sayUno-glow').css('transition', 'width ease-in-out 0.5s, opacity 0.5s');
        $('.uno').css('filter', 'grayscale(0%)');
        $('#sayUno').css('opacity', 1);
        this.unoHover = false;
        this._unoClicked = false;
        this.startUnoLoop();
    }

    hideUnoButton(){
        $('#sayUno').css('opacity', 0);
    }

    startUnoLoop() {
        if (!this.unoHover && !this._unoClicked) setTimeout(() => {
            $('.uno').css('width', '28vw');
            $('#sayUno-glow').css('opacity', 0.8);
            setTimeout(() => {
                if (!this.unoHover && !this._unoClicked) {
                    $('.uno').css('width', '25vw');
                    $('#sayUno-glow').css('opacity', 0.3);
                    this.startUnoLoop();
                }
            }, 500);
        }, 500);
    }

    stopUnoLoop(){
        this._unoClicked = true;
        this.unoHover = true;
    }

    putCardAnim() {
        this.firstPutAnim.attr('src', './img/stackCards/' + this.game.cardOnDeck.color + '/' + this.game.cardOnDeck.name + '.png');

        this.firstPutAnim.css('transition', 'top 0.5s, opacity 0.3s');
        this.firstPutAnim.css('top', '47vh');
        this.firstPutAnim.css('opacity', '1');

        setTimeout(() => {
            this.firstPutAnim.css('transition', '');
            this.firstPutAnim.css('top', '30vh');
            this.firstPutAnim.css('opacity', '0');
            this.firstPut.attr('src', './img/stackCards/' + this.game.cardOnDeck.color + '/' + this.game.cardOnDeck.name + '.png');
            this.firstPut.css('opacity', '1');
        }, 500);


    }

    showSelectColor(card){

        $('.selectColor').css('opacity', 1);

        $('#cc-green').on('click', ()=>{
            card.color = CARD_COLORS[2];
            card.putSelf();
            this.hideSelectColor();
        })
        $('#cc-blue').on('click', ()=>{
            card.color = CARD_COLORS[1];
            card.putSelf();
            this.hideSelectColor();
        })
        $('#cc-red').on('click', ()=>{
            card.color = CARD_COLORS[3];
            card.putSelf();
            this.hideSelectColor();
        })
        $('#cc-yellow').on('click', ()=>{
            card.color = CARD_COLORS[4];
            card.putSelf();
            this.hideSelectColor();
        })

    }

    hideSelectColor(){
        $('.selectColor').css('opacity', 0);
    }

    showPlayerDeck(player, click, lastDraw, anim) {
        $('#playerDeck').html("");

        let currentPlayerHand = player.hand;

        let width = window.innerWidth;
        let height = window.innerHeight;

        let percent = 0;
        let top = window.innerHeight * 0.68;
        let cardAmount = currentPlayerHand.length;

        for (let i = 0; i < cardAmount; i++) {

            currentPlayerHand.xPos = 0;
            currentPlayerHand.yPos = 0;


            $('#playerDeck').append('<div id="card' + i + '" class="pictureCard">' + '<img src="./img/cards/' + currentPlayerHand[i].color + '/' + currentPlayerHand[i].name + '.png' + '"></div>');

            currentPlayerHand[i].xPos = (width * (((43 + cardAmount / 2 * 5) - percent)) / 100);
            currentPlayerHand[i].yPos = top;

            console.log(i + ' ' + currentPlayerHand[i].yPos);

            let card = $('#card' + i);

            let put = false;

            if (click) {
                let yPos = currentPlayerHand[i].yPos;
                card.on('mouseenter', () => {
                    if (!put && !anim) card.css('top', yPos - 60 + 'px');
                })
                card.on('mouseleave', () => {
                    if (!put && !anim) card.css('top', yPos);
                })
                card.on('click', () => {
                    if (!this.game.players[this.game.currentPlayer].hand[i].canPut || anim) return;
                    put = true
                    let lastPlayer = player;
                    player.putCard(i);
                    card.css('top', yPos - height * 0.2);
                    card.css('opacity', 0);

                    setTimeout(() => {
                        this.refreshCardOnDeck();
                    }, 400);
                })
            }

            if (anim) {
                card.css('top', height);
                setTimeout(() => {
                    card.css('top', top + 'px')
                    card.css('left', (width * 45 / 100));
                    setTimeout(() => {
                        card.css('left', currentPlayerHand[i].xPos + 'px');
                        card.css('top', top + 'px')
                        anim = false;
                    }, 250);
                }, 100);

            } else {
                card.css('left', currentPlayerHand[i].xPos + 'px');
                card.css('top', top + 'px')
            }

            if (lastDraw && i === cardAmount - 1) {
                card.css('opacity', 0);
                card.css('top', currentPlayerHand[i].yPos - 100);
                setTimeout(() => {
                    card.css('left', currentPlayerHand[i].xPos + 'px');
                    card.css('top', top + 'px')
                    card.css('opacity', 1);
                }, 50);

            }

            percent += 5;

        }
    }

    drawCardAnim(enable, playerDraw) {
        if (this.drawCardRunning) return;
        this.drawCardRunning = true;

        if (playerDraw) {

            this.firstDraw.css('transition', 'min-width 0.5s, top 0.5s, opacity 0.5s');
            this.firstDraw.css('min-width', '35vh');
            this.firstDraw.css('top', '60vh');
            this.firstDraw.css('opacity', 0);

            setTimeout(() => {
                this.firstDraw.css('transition', '');
                this.firstDraw.css('top', '47vh');
                this.firstDraw.css('min-width', '20vh');
                this.firstDraw.css('opacity', '1');
                this.drawCardRunning = false;
            }, 500);

        } else {
            if (enable) {
                this.firstDraw.css('transition', 'min-width 0.35s, top 0.5s');
                this.firstDraw.css('min-width', '27vh');
                this.firstDraw.css('top', '50vh');
            } else {
                this.firstDraw.css('transition', 'min-width 1s, top 0.5s');
                this.firstDraw.css('top', '47vh');
                this.firstDraw.css('min-width', '20vh');
            }
            this.drawCardRunning = false;
        }

    }

    showDebug() {
        $('#debug').show();
        this.refreshDebug();
    }

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

    get game() {
        return this._game;
    }

    get firstDraw() {
        return this._firstDraw;
    }

    get firstPut() {
        return this._firstPut;
    }

    get firstPutAnim() {
        return this._firstPutAnim;
    }

    get drawCardRunning() {
        return this._drawCardRunnig;
    }

    set drawCardRunning(bool) {
        this._drawCardRunnig = bool;
    }

    get unoHover() {
        return this._unohover;
    }

    set unoHover(bool) {
        this._unohover = bool;
    }

}