UnoButton hover + click animation

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(){
 

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;

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);
 
 
     }

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;
+    }
+
 }