From cbfa4660edf6494eff0c07742b68ab5e62ad6b8d Mon Sep 17 00:00:00 2001 From: Nicolas Fritz Date: Fri, 27 Jan 2023 17:57:12 +0100 Subject: [PATCH] UnoButton hover + click animation --- uno/node/js/Game.js | 5 --- uno/web/Game.js | 5 ++- uno/web/Player.js | 30 ++++++--------- uno/web/Style.js | 90 ++++++++++++++++++++++++++++++++++++--------- 4 files changed, 88 insertions(+), 42 deletions(-) diff --git a/uno/node/js/Game.js b/uno/node/js/Game.js index 45136fa..e48dd0f 100644 --- a/uno/node/js/Game.js +++ b/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(){ diff --git a/uno/web/Game.js b/uno/web/Game.js index 3a0bc02..23f57b0 100644 --- a/uno/web/Game.js +++ b/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; diff --git a/uno/web/Player.js b/uno/web/Player.js index fbf402f..17bf30e 100644 --- a/uno/web/Player.js +++ b/uno/web/Player.js @@ -17,15 +17,12 @@ export default class Player { //Lässt den Spieler eine Anzahl "amount" an Karten ziehen drawCard(amount, nextTurn, anim) { - if(this.game.stack !== 0){ - 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); - return; + if (this.game.stack !== 0) { + 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); + return; } } @@ -54,16 +51,13 @@ export default class Player { } - - setTimeout(() => { - this.game.refreshCanPutCard(); - this.game.style.showPlayerDeck(this.game.currentPlayerInstanz, true, false, false); - if (nextTurn) { + setTimeout(() => { + this.game.refreshCanPutCard(); + this.game.style.showPlayerDeck(this.game.currentPlayerInstanz, true, false, false); + if (nextTurn) { this.game.nextTurn(); - } - }, 300 + 500 * amount); - - + } + }, 300 + 500 * amount); } diff --git a/uno/web/Style.js b/uno/web/Style.js index 1dfd3a3..5dd8301 100644 --- a/uno/web/Style.js +++ b/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(); @@ -46,7 +74,7 @@ export default class Style { this.refreshDebug(); } - refreshCardOnDeck(){ + refreshCardOnDeck() { if (this._cardOnDeck !== this.game.cardOnDeck) { console.log(" ewfw") this.putCardAnim(); @@ -80,19 +108,37 @@ export default class Style { if (!this.game.currentPlayerInstanz.canPlay) $('#drawCard').css('background-color', 'red'); } - startUnoLoop(){ - setTimeout(()=>{ + showUnoButton(){ + $('#uno').css('opacity', 1); + this.unoHover = false; + this._unoClicked = false; + this.startUnoLoop(); + } + + hideUnoButton(){ + $('#uno').css('opacity', 0); + + } + + startUnoLoop() { + if (!this.unoHover && !this._unoClicked) setTimeout(() => { $('.uno').css('width', '28vw'); $('#sayUno-glow').css('opacity', 0.8); - setTimeout(()=>{ - console.log("bibi") - $('.uno').css('width', '25vw'); - $('#sayUno-glow').css('opacity', 0.3); - this.startUnoLoop(); + 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'); @@ -162,31 +208,31 @@ export default class Style { }) } - if(anim){ + if (anim) { card.css('top', height); - setTimeout(()=>{ + setTimeout(() => { card.css('top', top + 'px') card.css('left', (width * 45 / 100)); - setTimeout(()=>{ + setTimeout(() => { card.css('left', currentPlayerHand[i].xPos + 'px'); card.css('top', top + 'px') anim = false; }, 250); - },100); + }, 100); } else { card.css('left', currentPlayerHand[i].xPos + 'px'); card.css('top', top + 'px') } - if(lastDraw && i === cardAmount - 1){ + 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); + setTimeout(() => { + card.css('left', currentPlayerHand[i].xPos + 'px'); + card.css('top', top + 'px') + card.css('opacity', 1); + }, 50); } @@ -262,4 +308,12 @@ export default class Style { this._drawCardRunnig = bool; } + get unoHover() { + return this._unohover; + } + + set unoHover(bool) { + this._unohover = bool; + } + } \ No newline at end of file