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.
 
 
 

253 lines
8.0 KiB

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, true, true);
this.refreshDebug();
});
this.firstDraw.on('mouseenter', () => {
this.drawCardAnim(true, false);
});
this.firstDraw.on('mouseleave', () => {
this.drawCardAnim(false, false);
});
this.firstDraw.on('click', () => {
let playerInstanz = this.game.currentPlayerInstanz;
this.drawCardAnim(false, false);
playerInstanz.drawCard(1, true, true);
});
}
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');
}
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, 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;
}
}
animDrawCard(){
}
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;
}
}