Farbe der Karte wählen

uno/css/uno.css

@@ -92,6 +92,7 @@ body
 .selectColor {
     display: flex;
     align-items: center;
+    opacity: 0;
 }
 
 .cc{

uno/web/Player.js

@@ -96,10 +96,10 @@ export default class Player {
         this._mustSayUno = false;
     }
 
-    selectColor() {
+    selectColor(CARD_COLOR) {
 
         //Todo: Spieler Möglichkeit geben Farbe zu wählen, nicht random
-        return CARD_COLORS[Math.floor(Math.random() * 4) + 1];
+        return CARD_COLOR;
     }
 
     //Gibt den Namen eines Spielers zurück

uno/web/Style.js

@@ -1,3 +1,5 @@
+import {CARD_COLORS} from "./uno.js";
+
 export default class Style {
 
     constructor(gameInstanz) {
@@ -167,6 +169,37 @@ export default class Style {
 
     }
 
+    showSelectColor(card){
+
+        $('.selectColor').css('opacity', 1);
+
+        $('#cc-green').on('click', ()=>{
+            card.color = CARD_COLORS[2];
+            card.putSelf();
+            this.hideSelectColor();
+        })
+        $('#cc-blue').on('click', ()=>{
+            card.color = CARD_COLORS[1];
+            card.putSelf();
+            this.hideSelectColor();
+        })
+        $('#cc-red').on('click', ()=>{
+            card.color = CARD_COLORS[3];
+            card.putSelf();
+            this.hideSelectColor();
+        })
+        $('#cc-yellow').on('click', ()=>{
+            card.color = CARD_COLORS[4];
+            card.putSelf();
+            this.hideSelectColor();
+        })
+
+    }
+
+    hideSelectColor(){
+        $('.selectColor').css('opacity', 0);
+    }
+
     showPlayerDeck(player, click, lastDraw, anim) {
         $('#playerDeck').html("");
 

uno/web/cards/special/ChooseColor.js

@@ -15,17 +15,21 @@ export default class ChooseColor extends Card {
 
     //Führt eigene Logik aus (Wählt farbe aus)
     putSelf() {
+        if (this.color !== CARD_COLORS[0]){
+            super.putSelf();
+            return;
+        }
 
         if(this.game.currentPlayer === -1) {
             //Setzt die Farbe der Karte auf eine Random Farbe
             this.color = CARD_COLORS[Math.floor(Math.random() * 4) + 1];
+            this.putSelf();
         }
         else{
+
+            this.game.style.showSelectColor(this);
             //lässt den Spieler eine Farbe wählen
-            this._color = this.game.players[this.game.currentPlayer].selectColor();
         }
-        //Logik von Card.js ausführen
-        super.putSelf();
     }
 
 }

uno/web/cards/special/PlusAmount.js

@@ -18,8 +18,11 @@ export default class PlusAmount extends Card {
 
     //Führt eigene Logik aus (+Amount Karten für den nächsten Spieler)
     putSelf() {
+        if (this.color !== CARD_COLORS[0]){
+            super.putSelf();
+            return;
+        }
 
-        //Todo: Karten Stapeln Regel
         //lässt den nächsten Spieler den PlusAmount der Karte ziehen
 
         if (this.rules !== null) {
@@ -39,11 +42,9 @@ export default class PlusAmount extends Card {
             if(this.game.currentPlayer === -1)
                 this.color = CARD_COLORS[Math.floor(Math.random() * 4) + 1];
             else
-                this.color = this.game.players[this.game.currentPlayer].selectColor();
+                this.game.style.showSelectColor(this);
         }
 
-        //Logik von Card.js ausführen
-        super.putSelf();
     }
 
     //Gibt den PlusWert der Karte zurück