Browse Source

UnoButton hover + click animation

main
Nicolas Fritz 2 years ago
parent
commit
cbfa4660ed
  1. 5
      uno/node/js/Game.js
  2. 5
      uno/web/Game.js
  3. 8
      uno/web/Player.js
  4. 58
      uno/web/Style.js

5
uno/node/js/Game.js

@ -81,11 +81,6 @@ class Game {
}
//
gameLoop(){
}
//Gibt ein Array zurück mit allen Karten, die in einem Uno Spiel sind
generatePool(){

5
uno/web/Game.js

@ -222,7 +222,10 @@ export default class Game {
}
//Wenn Farbe oder Zahl gleich oder eine Karte, die keine Farbe hat
if (this.cardOnDeck.name.toString() === currentPlayerCards[i].name.toString() || this.cardOnDeck.color === currentPlayerCards[i].color || currentPlayerCards[i].color === CARD_COLORS[0] || this.cardOnDeck.color === CARD_COLORS[0]) {
if (this.cardOnDeck.name.toString() === currentPlayerCards[i].name.toString()
|| this.cardOnDeck.color === currentPlayerCards[i].color
|| currentPlayerCards[i].color === CARD_COLORS[0]
|| this.cardOnDeck.color === CARD_COLORS[0]) {
//Aktualisiere den Wert der Karte, sodass sie gelegt werden kann
this.players[this.currentPlayer].hand[i].canPut = true;

8
uno/web/Player.js

@ -21,10 +21,7 @@ export default class Player {
if (!this.game.currentPlayerInstanz.mustSayUno) {
let cards = this.game.stack;
this.game.stack = 0;
if (this.game.cardOnDeck.name === '+4')
this.drawCard(cards, true, true);
else
this.drawCard(cards, false, true);
if (this.game.cardOnDeck.name === '+4') this.drawCard(cards, true, true); else this.drawCard(cards, false, true);
return;
}
}
@ -54,7 +51,6 @@ export default class Player {
}
setTimeout(() => {
this.game.refreshCanPutCard();
this.game.style.showPlayerDeck(this.game.currentPlayerInstanz, true, false, false);
@ -64,8 +60,6 @@ export default class Player {
}, 300 + 500 * amount);
}
//Lässt den Spieler eine Karte in seiner Hand legen

58
uno/web/Style.js

@ -13,6 +13,34 @@ export default class Style {
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', () => {
this.game.currentPlayerInstanz.drawCard(1, true, true);
this.refreshDebug();
@ -80,19 +108,37 @@ export default class Style {
if (!this.game.currentPlayerInstanz.canPlay) $('#drawCard').css('background-color', 'red');
}
showUnoButton(){
$('#uno').css('opacity', 1);
this.unoHover = false;
this._unoClicked = false;
this.startUnoLoop();
}
hideUnoButton(){
$('#uno').css('opacity', 0);
}
startUnoLoop() {
setTimeout(()=>{
if (!this.unoHover && !this._unoClicked) setTimeout(() => {
$('.uno').css('width', '28vw');
$('#sayUno-glow').css('opacity', 0.8);
setTimeout(() => {
console.log("bibi")
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');
@ -262,4 +308,12 @@ export default class Style {
this._drawCardRunnig = bool;
}
get unoHover() {
return this._unohover;
}
set unoHover(bool) {
this._unohover = bool;
}
}
Loading…
Cancel
Save