From 20df81c8202dbd7ae36142d8477baa16e069d214 Mon Sep 17 00:00:00 2001
From: Nicolas Fritz <nicolas-noah.fritz@informatik.hs-fulda.de>
Date: Thu, 26 Jan 2023 15:35:54 +0100
Subject: [PATCH] refactoring: Karten ziehen Anim zusammengefasst

---
 uno/css/uno.css  |  4 ++--
 uno/web/Style.js | 50 +++++++++++++++++++++++++++++++-----------------
 2 files changed, 34 insertions(+), 20 deletions(-)

diff --git a/uno/css/uno.css b/uno/css/uno.css
index 7494c2a..30d75bf 100644
--- a/uno/css/uno.css
+++ b/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;
+
 }
\ No newline at end of file
diff --git a/uno/web/Style.js b/uno/web/Style.js
index 145c5a7..c39ded2 100644
--- a/uno/web/Style.js
+++ b/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;
+    }
+
 }
\ No newline at end of file