sayUno button hinzugefügt mit animation

uno/css/uno.css

@@ -66,3 +66,22 @@ body
 .pictureCard img{
     width: 100%;
 }
+
+#sayUno{
+    position: absolute;
+    bottom: 0vh;
+    left: 3vh;
+    width: 100%;
+}
+.uno{
+    position: absolute;
+    bottom: 10.5vw;
+    left: 11vw;
+    width: 25vw;
+    transition: width ease-in-out 0.5s;
+    transform: translate(-50%, 50%);
+}
+#sayUno-glow{
+    opacity: 0.3;
+    transition: width ease-in-out 0.5s, opacity 0.5s;
+}

uno/index.html

@@ -40,5 +40,11 @@
 
     </div>
 
+    <div id="sayUno">
+        <img class="uno" id="sayUno-glow" src="./img/sayUnoGlow.png">
+        <img class="uno" src="./img/sayUno.png">
+
+    </div>
+
 </body>
 </html>

uno/web/Style.js

@@ -33,6 +33,9 @@ export default class Style {
             playerInstanz.drawCard(1, true, true);
 
         });
+
+
+        this.startUnoLoop();
     }
 
     refreshHtml() {
@@ -77,6 +80,19 @@ export default class Style {
         if (!this.game.currentPlayerInstanz.canPlay) $('#drawCard').css('background-color', 'red');
     }
 
+    startUnoLoop(){
+        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();
+            }, 500);
+        }, 500);
+    }
+
     putCardAnim() {
         this.firstPutAnim.attr('src', './img/stackCards/' + this.game.cardOnDeck.color + '/' + this.game.cardOnDeck.name + '.png');
 
@@ -213,10 +229,6 @@ export default class Style {
 
     }
 
-    animDrawCard(){
-
-    }
-
     showDebug() {
         $('#debug').show();
         this.refreshDebug();