refactoring: Karten ziehen Anim zusammengefasst

uno/css/uno.css

@@ -32,7 +32,7 @@ body
     transform: translate(-50%, -50%);
 }
 
-#first-draw
+#first-put
 {
-    transition: min-width 0.3s, top 0.5s;
+
 }

uno/web/Style.js

@@ -3,37 +3,34 @@ export default class Style{
     constructor(gameInstanz) {
         this._game = gameInstanz;
 
+        this._cardOnDeck = null;
+
+        this._firstdraw = $('#first-draw');
+
         $('#drawCard').on('click', ()=>{
             this.game.currentPlayerInstanz.drawCard(1);
             this.refreshDebug();
         });
 
-        let firstDraw = $('#first-draw');
-
-        firstDraw.on('mouseenter', ()=>{
-            firstDraw.css('transition', 'min-width 0.3s, top 0.5s');
-            firstDraw.css('min-width', '27vh');
-            firstDraw.css('top', '50vh');
-        });
-        firstDraw.on('mouseleave', ()=>{
-            firstDraw.css('transition', 'min-width 1s, top 0.5s');
-            firstDraw.css('top', '47vh');
-            firstDraw.css('min-width', '20vh');
-        });
-        firstDraw.on('click', ()=>{
+        this.firstDraw.on('mouseenter', ()=>{this.drawCardAnim(true);});
+        this.firstDraw.on('mouseleave', ()=>{this.drawCardAnim(false);});
+        this.firstDraw.on('click', ()=>{
 
             this.game.currentPlayerInstanz.drawCard(1);
-            this.refreshDebug();
             this.refreshHtml();
 
-            firstDraw.css('transition', 'min-width 1s, top 0.5s');
-            firstDraw.css('top', '47vh');
-            firstDraw.css('min-width', '20vh');
+            this.drawCardAnim(false);
+
         });
     }
 
     refreshHtml(){
+        if(this._cardOnDeck !== this.game.cardOnDeck){
+
+        }
         $('#first-put').attr('src', './img/stackCards/' + this.game.cardOnDeck.color + '/' + this.game.cardOnDeck.name + '.png');
+
+        this.refreshDebug();
     }
 
     refreshDebug(){
@@ -46,7 +43,6 @@ export default class Style{
             $('#playerCards').append('<button id="button' + i + '">+</button>  | ');
             $('#button' + i).on('click', () =>{
                this.game.currentPlayerInstanz.putCard(i);
-               this.refreshDebug();
                this.refreshHtml();
             });
             if (this.game.currentPlayerInstanz.hand[i].canPut)
@@ -60,6 +56,20 @@ export default class Style{
             $('#drawCard').css('background-color', 'red');
     }
 
+    drawCardAnim(enable){
+
+        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');
+        }
+
+    }
+
     showDebug(){
         $('#debug').show();
         this.refreshDebug();
@@ -73,4 +83,8 @@ export default class Style{
         return this._game;
     }
 
+    get firstDraw(){
+        return this._firstdraw;
+    }
+
 }