You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
153 lines
4.8 KiB
153 lines
4.8 KiB
export default class Style {
|
|
|
|
constructor(gameInstanz) {
|
|
this._game = gameInstanz;
|
|
|
|
this._cardOnDeck = null;
|
|
|
|
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.refreshHtml();
|
|
|
|
this.drawCardAnim(false, true);
|
|
|
|
});
|
|
}
|
|
|
|
refreshHtml() {
|
|
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');
|
|
}
|
|
|
|
|
|
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.refreshHtml();
|
|
});
|
|
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);
|
|
|
|
|
|
}
|
|
|
|
drawCardAnim(enable, playerDraw) {
|
|
|
|
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');
|
|
}, 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');
|
|
|
|
setTimeout(() => {
|
|
this.firstDraw.css('transition', '')
|
|
}, 500);
|
|
} else {
|
|
this.firstDraw.css('transition', 'min-width 1s, top 0.5s');
|
|
this.firstDraw.css('top', '47vh');
|
|
this.firstDraw.css('min-width', '20vh');
|
|
|
|
setTimeout(() => {
|
|
this.firstDraw.css('transition', '')
|
|
}, 1000);
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
}
|