|
|
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');
$('#drawCard').on('click', () => { this.game.currentPlayerInstanz.drawCard(1); this.refreshDebug(); });
this.firstDraw.on('mouseenter', () => { this.drawCardAnim(true, false); }); this.firstDraw.on('mouseleave', () => { this.drawCardAnim(false, false); }); this.firstDraw.on('click', () => {
this.game.currentPlayerInstanz.drawCard(1);
this.drawCardAnim(false, true);
this.refreshHtml();
}); }
refreshHtml() { this.refreshCardOnDeck();
this.showPlayerDeck(this.game.currentPlayerInstanz, 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.refreshHtml(); }, 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'); }
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);
}
showPlayerDeck(player, click) { console.log("anzeigen") $('#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++) { console.log(this.game.currentPlayer); 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) card.css('top', yPos - 60); }) card.on('mouseleave', () => { if (!put) card.css('top', yPos); }) card.on('click', () => { if (!this.game.players[this.game.currentPlayer].hand[i].canPut) return; put = true let lastPlayer = player; player.putCard(i); card.css('top', yPos - height * 0.2); card.css('opacity', 0); this.refreshCardOnDeck(); setTimeout(() => { this.refreshHtml();
}, 400); }) }
card.css('left', currentPlayerHand[i].xPos + 'px'); card.css('top', top + 'px') $('.pictureCard') 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; }
}
|