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.
347 lines
10 KiB
347 lines
10 KiB
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();
|
|
this.game.currentPlayerInstanz.mustSayUno = false;
|
|
})
|
|
|
|
$('#drawCard').on('click', () => {
|
|
if(this.game.currentPlayerInstanz.mustSayUno){
|
|
this.game.currentPlayerInstanz.mustSayUno = false;
|
|
}
|
|
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);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
refreshHtml() {
|
|
this.refreshCardOnDeck();
|
|
|
|
this.showPlayerDeck(this.game.currentPlayerInstanz, true, false, true)
|
|
|
|
this.refreshDebug();
|
|
}
|
|
|
|
refreshCardOnDeck() {
|
|
if (this._cardOnDeck !== this.game.cardOnDeck) {
|
|
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("Aktueller Spieler: " + this.game.currentPlayerInstanz.name + " | " + this.game.currentPlayerInstanz.hand.length);
|
|
$("#playerCards").html("Weitere Spieler: <br>");
|
|
for (let i = 0; i < this.game.players.length; i++) {
|
|
if(this.game.players[i] === this.game.currentPlayerInstanz) continue;
|
|
$('#playerCards').append("" + this.game.players[i].name + " | " + this.game.players[i].hand.length + "<br>");
|
|
}
|
|
$("#playerInGame").html("Spieler im Spiel: " + this.game.players.length);
|
|
|
|
}
|
|
|
|
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;
|
|
|
|
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;
|
|
}
|
|
|
|
}
|