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

@@ -1,49 +1,62 @@
-export default class Style{
+export default class Style {
 
     constructor(gameInstanz) {
         this._game = gameInstanz;
 
         this._cardOnDeck = null;
 
-        this._firstdraw = $('#first-draw');
+        this._firstDraw = $('#first-draw');
 
-        $('#drawCard').on('click', ()=>{
+        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('click', ()=>{
+        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){
-
+    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();
     }
 
-    refreshDebug(){
+    refreshDebug() {
         $('#drawCard').css('background-color', 'white');
 
         $("#player").html("Spieler: " + this.game.currentPlayerInstanz.name);
         $("#playerCards").html("Karten: ");
-        for (let i = 0; i < this.game.currentPlayerInstanz.hand.length; i++){
+        for (let i = 0; i < this.game.currentPlayerInstanz.hand.length; i++) {
             $('#playerCards').append(this.game.currentPlayerInstanz.hand[i].name + " - " + this.game.currentPlayerInstanz.hand[i].color);
             $('#playerCards').append('<button id="button' + i + '">+</button>  | ');
-            $('#button' + i).on('click', () =>{
-               this.game.currentPlayerInstanz.putCard(i);
-               this.refreshHtml();
+            $('#button' + i).on('click', () => {
+                this.game.currentPlayerInstanz.putCard(i);
+                this.refreshHtml();
             });
             if (this.game.currentPlayerInstanz.hand[i].canPut)
                 $('#button' + i).css('background-color', 'green');
@@ -52,39 +65,89 @@ export default class Style{
         $("#cardOnDeck").html("Karte auf dem Tisch: " + this.game.cardOnDeck.name + " - " + this.game.cardOnDeck.color);
         $("#playerInGame").html("Spieler im Spiel: " + this.game.players.length);
 
-        if(!this.game.currentPlayerInstanz.canPlay)
+        if (!this.game.currentPlayerInstanz.canPlay)
             $('#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);
 
-        if(enable){
-            this.firstDraw.css('transition', 'min-width 0.3s, top 0.5s');
-            this.firstDraw.css('min-width', '27vh');
-            this.firstDraw.css('top', '50vh');
-        }else{
-            this.firstDraw.css('transition', 'min-width 1s, top 0.5s');
-            this.firstDraw.css('top', '47vh');
-            this.firstDraw.css('min-width', '20vh');
+
+    }
+
+    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.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);
+            }
         }
 
     }
 
-    showDebug(){
+    showDebug() {
         $('#debug').show();
         this.refreshDebug();
     }
 
-    hideDebug(){
+    hideDebug() {
         $('#debug').hide();
     }
 
-    get game(){
+    get game() {
         return this._game;
     }
 
-    get firstDraw(){
-        return this._firstdraw;
+    get firstDraw() {
+        return this._firstDraw;
+    }
+
+    get firstPut() {
+        return this._firstPut;
+    }
+
+    get firstPutAnim() {
+        return this._firstPutAnim;
     }
 
 }