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

@@ -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

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