Animation Karte legen/ziehen hinzugefügt

uno/css/uno.css

@@ -32,7 +32,13 @@ body
     transform: translate(-50%, -50%);
 }
 
-#first-put
+#first-put-anim
 {
+    top: 30vh;
+    opacity: 0;
+}
 
+#first-put
+{
+    opacity: 0;
 }

uno/index.html

@@ -24,9 +24,12 @@
         <!-- "Karte legen" Stapel -->
         <img class="stack-put" src="./img/stackCards/StackPutCards.png">
         <img class="stack-put" id="first-put" src="#">
+        <img class="stack-put" id="first-put-anim" src="#">
+
 
         <!-- "Karte ziehen" Stapel -->
         <img class="stack-draw" src="./img/stackCards/StackDrawCards.png">
+        <img class="stack-draw" src="./img/stackCards/FirstDrawCard.png">
         <img class="stack-draw" id="first-draw" src="./img/stackCards/FirstDrawCard.png">
 
     </div>

uno/web/Style.js

@@ -5,30 +5,43 @@ export default class Style{
 
         this._cardOnDeck = null;
 
-        this._firstdraw = $('#first-draw');
+        this._firstDraw = $('#first-draw');
+
+        this._firstPut = $('#first-put');
+
+        this._firstPutAnim = $('#first-put-anim');
 
         $('#drawCard').on('click', () => {
             this.game.currentPlayerInstanz.drawCard(1);
             this.refreshDebug();
         });
 
-        this.firstDraw.on('mouseenter', ()=>{this.drawCardAnim(true);});
-        this.firstDraw.on('mouseleave', ()=>{this.drawCardAnim(false);});
+        this.firstDraw.on('mouseenter', () => {
+            this.drawCardAnim(true, false);
+        });
+        this.firstDraw.on('mouseleave', () => {
+            this.drawCardAnim(false, false);
+        });
         this.firstDraw.on('click', () => {
 
             this.game.currentPlayerInstanz.drawCard(1);
             this.refreshHtml();
 
-            this.drawCardAnim(false);
+            this.drawCardAnim(false, true);
 
         });
     }
 
     refreshHtml() {
         if (this._cardOnDeck !== this.game.cardOnDeck) {
-
+            console.log(" ewfw")
+            this.putCardAnim();
+            this._cardOnDeck = this.game.cardOnDeck;
+        } else {
+            this.firstPut.attr('src', './img/stackCards/' + this.game.cardOnDeck.color + '/' + this.game.cardOnDeck.name + '.png');
+            this.firstPutAnim.attr('src', './img/stackCards/' + this.game.cardOnDeck.color + '/' + this.game.cardOnDeck.name + '.png');
         }
-        $('#first-put').attr('src', './img/stackCards/' + this.game.cardOnDeck.color + '/' + this.game.cardOnDeck.name + '.png');
+
 
         this.refreshDebug();
     }
@@ -56,16 +69,58 @@ export default class Style{
             $('#drawCard').css('background-color', 'red');
     }
 
-    drawCardAnim(enable){
+    putCardAnim() {
+        this.firstPutAnim.attr('src', './img/stackCards/' + this.game.cardOnDeck.color + '/' + this.game.cardOnDeck.name + '.png');
+
+        this.firstPutAnim.css('transition', 'top 0.5s, opacity 0.3s');
+        this.firstPutAnim.css('top', '47vh');
+        this.firstPutAnim.css('opacity', '1');
+
+        setTimeout(() => {
+            this.firstPutAnim.css('transition', '');
+            this.firstPutAnim.css('top', '30vh');
+            this.firstPutAnim.css('opacity', '0');
+            this.firstPut.attr('src', './img/stackCards/' + this.game.cardOnDeck.color + '/' + this.game.cardOnDeck.name + '.png');
+            this.firstPut.css('opacity', '1');
+        }, 500);
+
+
+    }
+
+    drawCardAnim(enable, playerDraw) {
 
+        if (playerDraw) {
+
+            this.firstDraw.css('transition', 'min-width 0.5s, top 0.5s, opacity 0.5s');
+            this.firstDraw.css('min-width', '35vh');
+            this.firstDraw.css('top', '60vh');
+            this.firstDraw.css('opacity', 0);
+
+            setTimeout(()=>{
+                this.firstDraw.css('transition', '');
+                this.firstDraw.css('top', '47vh');
+                this.firstDraw.css('min-width', '20vh');
+                this.firstDraw.css('opacity', '1');
+            }, 500);
+
+        } else {
             if (enable) {
-            this.firstDraw.css('transition', 'min-width 0.3s, top 0.5s');
+                this.firstDraw.css('transition', 'min-width 0.35s, top 0.5s');
                 this.firstDraw.css('min-width', '27vh');
                 this.firstDraw.css('top', '50vh');
+
+                setTimeout(() => {
+                    this.firstDraw.css('transition', '')
+                }, 500);
             } else {
                 this.firstDraw.css('transition', 'min-width 1s, top 0.5s');
                 this.firstDraw.css('top', '47vh');
                 this.firstDraw.css('min-width', '20vh');
+
+                setTimeout(() => {
+                    this.firstDraw.css('transition', '')
+                }, 1000);
+            }
         }
 
     }
@@ -84,7 +139,15 @@ export default class Style{
     }
 
     get firstDraw() {
-        return this._firstdraw;
+        return this._firstDraw;
+    }
+
+    get firstPut() {
+        return this._firstPut;
+    }
+
+    get firstPutAnim() {
+        return this._firstPutAnim;
     }
 
 }