- cardOnDeck PNG aktualisiert

- onClick Event auf drawCard() um Karte zu ziehen

uno/css/uno.css

@@ -30,4 +30,9 @@ body
     top: 47vh;
     left: min(90%, (53% + 10vh));
     transform: translate(-50%, -50%);
+}
+
+#first-draw
+{
+    transition: min-width 0.3s, top 0.5s;
 }

uno/index.html

@@ -23,10 +23,11 @@
 
         <!-- "Karte legen" Stapel -->
         <img class="stack-put" src="./img/stackCards/StackPutCards.png">
+        <img class="stack-put" id="first-put" src="#">
 
         <!-- "Karte ziehen" Stapel -->
         <img class="stack-draw" src="./img/stackCards/StackDrawCards.png">
-        <img class="stack-draw" alt="" id="first-draw" src="./img/stackCards/FirstDrawCard.png">
+        <img class="stack-draw" id="first-draw" src="./img/stackCards/FirstDrawCard.png">
 
     </div>
 

uno/web/Style.js

@@ -7,6 +7,33 @@ export default class Style{
             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.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');
+        });
+    }
+
+    refreshHtml(){
+        $('#first-put').attr('src', './img/stackCards/' + this.game.cardOnDeck.color + '/' + this.game.cardOnDeck.name + '.png');
     }
 
     refreshDebug(){
@@ -20,6 +47,7 @@ export default class Style{
             $('#button' + i).on('click', () =>{
                this.game.currentPlayerInstanz.putCard(i);
                this.refreshDebug();
+               this.refreshHtml();
             });
             if (this.game.currentPlayerInstanz.hand[i].canPut)
                 $('#button' + i).css('background-color', 'green');

uno/web/uno.js

@@ -16,6 +16,7 @@ $(()=>{
     game.start();
 
     style.showDebug();
+    style.refreshHtml();
 
 });