Merge branch 'main' of https://gitlab2.informatik.hs-fulda.de/fdai7359/gesellschaftsspiele-sammlung

kniffel/inc/errechneEndergebnisse.js

@@ -0,0 +1,31 @@
+function errechneEndergebnisse(){
+    //errechne Ergebnisse fuer alle vier Spieler
+    for (let i = 1; i <= 4; i++) {
+        //fuehre Funktion mit Zaehlvariable aus
+        summeObererTeil(i)
+        //addiere Bonus wenn 65 erreicht
+        if(Number(document.getElementById('oben_Spieler'+  i).innerHTML) >= 65){
+            document.getElementById('bonus_Spieler'+  i).innerHTML = 65;
+        } else {
+            document.getElementById('bonus_Spieler'+  i).innerHTML = 0;
+        }
+        //errechne Summe oberer Teil
+        let sum = Number(document.getElementById('bonus_Spieler'+  i).innerHTML);
+        sum += Number(document.getElementById('oben_Spieler'+  i).innerHTML);
+        
+        document.getElementById('obenMitBonus_Spieler'+  i).innerHTML = sum;
+        document.getElementById('zwischenergebnisObenMitBonus_Spieler'+  i).innerHTML = sum;
+        
+        //errechne Summe unterer Teil
+        let sum2 = 0;
+        sum2 += Number(document.getElementById('DreierPasch_Spieler'+  i).innerHTML);
+        sum2 += Number(document.getElementById('ViererPasch_Spieler'+  i).innerHTML);
+        sum2 += Number(document.getElementById('fullHouse_Spieler'+  i).innerHTML);
+        sum2 += Number(document.getElementById('kleineStraße_Spieler'+  i).innerHTML);
+        sum2 += Number(document.getElementById('großeStraße_Spieler'+  i).innerHTML);
+        sum2 += Number(document.getElementById('kniffel_Spieler'+  i).innerHTML);
+        sum2 += Number(document.getElementById('chance_Spieler'+  i).innerHTML);
+        document.getElementById('unten_Spieler'+  i).innerHTML = sum2;
+        document.getElementById('endsumme_Spieler'+  i).innerHTML = sum + sum2  ;
+    }
+}

kniffel/inc/helper.js

@@ -53,7 +53,7 @@ function dreierPasch(spieler){
             
 }
 
-function fullHouse(spieler){
+function kniffel(spieler){
 
     var w1 = document.getElementById('AusgabeWuerfel1').innerHTML;
     var w2 = document.getElementById('AusgabeWuerfel2').innerHTML;
@@ -65,6 +65,83 @@ function fullHouse(spieler){
 
 
     let output = 0;
+    if (w1 == w2 && w1 == w3 && w1 == w4 && w1 == w5){
+        output = 50;
+    }
+    
+
+
+    switch (spieler){
+        case 1:
+            document.getElementById('kniffel_Spieler1').innerHTML = output;
+            document.getElementById('aktuellerSpieler').innerHTML = "Spieler 2 ist an der Reihe";
+            break;
+        case 2:
+            document.getElementById('kniffel_Spieler2').innerHTML = output;
+            document.getElementById('aktuellerSpieler').innerHTML = "Spieler 3 ist an der Reihe";
+            break;
+        case 3:
+            document.getElementById('kniffel_Spieler3').innerHTML = output;
+            document.getElementById('aktuellerSpieler').innerHTML = "Spieler 4 ist an der Reihe";
+            break;
+        case 4:
+            document.getElementById('kniffel_Spieler4').innerHTML = output;
+            document.getElementById('aktuellerSpieler').innerHTML = "Spieler 1 ist an der Reihe";
+            break;    
+        
+    }
+    moeglicheWuerfeZuruecksetzen();
+            
+}
+
+function chance(spieler){
+
+    var w1 = document.getElementById('AusgabeWuerfel1').innerHTML;
+    var w2 = document.getElementById('AusgabeWuerfel2').innerHTML;
+    var w3 = document.getElementById('AusgabeWuerfel3').innerHTML;
+    var w4 = document.getElementById('AusgabeWuerfel4').innerHTML;
+    var w5 = document.getElementById('AusgabeWuerfel5').innerHTML;
+
+
+
+    let output = 0;
+    
+    output = Number(w1) + Number(w2) + Number(w3) + Number(w4) + Number(w5);
+
+
+    switch (spieler){
+        case 1:
+            document.getElementById('chance_Spieler1').innerHTML = output;
+            document.getElementById('aktuellerSpieler').innerHTML = "Spieler 2 ist an der Reihe";
+            break;
+        case 2:
+            document.getElementById('chance_Spieler2').innerHTML = output;
+            document.getElementById('aktuellerSpieler').innerHTML = "Spieler 3 ist an der Reihe";
+            break;
+        case 3:
+            document.getElementById('chance_Spieler3').innerHTML = output;
+            document.getElementById('aktuellerSpieler').innerHTML = "Spieler 4 ist an der Reihe";
+            break;
+        case 4:
+            document.getElementById('chance_Spieler4').innerHTML = output;
+            document.getElementById('aktuellerSpieler').innerHTML = "Spieler 1 ist an der Reihe";
+            break;    
+        
+    }
+    moeglicheWuerfeZuruecksetzen();
+            
+}
+
+function fullHouse(spieler){
+
+    var w1 = document.getElementById('AusgabeWuerfel1').innerHTML;
+    var w2 = document.getElementById('AusgabeWuerfel2').innerHTML;
+    var w3 = document.getElementById('AusgabeWuerfel3').innerHTML;
+    var w4 = document.getElementById('AusgabeWuerfel4').innerHTML;
+    var w5 = document.getElementById('AusgabeWuerfel5').innerHTML;
+    let wuerfelArr = [Number(w1), Number(w2), Number(w3), Number(w4), Number(w5)];
+    let output = 0;
+
     let countObj = {}
     for(let x of wuerfelArr){
     countObj[x] = (countObj[x] || 0) + 1;
@@ -75,7 +152,6 @@ function fullHouse(spieler){
     }
 
 
-
     switch (spieler){
         case 1:
             document.getElementById('fullHouse_Spieler1').innerHTML = output;

kniffel/inc/viererPasch.js

@@ -0,0 +1,46 @@
+function viererPasch(spieler){
+
+    var w1 = document.getElementById('AusgabeWuerfel1').innerHTML;
+    var w2 = document.getElementById('AusgabeWuerfel2').innerHTML;
+    var w3 = document.getElementById('AusgabeWuerfel3').innerHTML;
+    var w4 = document.getElementById('AusgabeWuerfel4').innerHTML;
+    var w5 = document.getElementById('AusgabeWuerfel5').innerHTML;
+    let wuerfelArr = [Number(w1), Number(w2), Number(w3), Number(w4), Number(w5)];
+    var sum = 0;
+
+
+    let output = 0;
+    let countObj = {}
+    for(let x of wuerfelArr){
+    countObj[x] = (countObj[x] || 0) + 1;
+    }
+    let vals = Object.values(countObj);
+    if(( vals[1] === 4) || (vals[0] === 4)|| (vals[2] === 4)){
+        wuerfelArr.forEach(element => {
+            output += element;
+        });
+    }
+
+
+    switch (spieler){
+        case 1:
+            document.getElementById('ViererPasch_Spieler1').innerHTML = output;
+            document.getElementById('aktuellerSpieler').innerHTML = "Spieler 2 ist an der Reihe";
+            break;
+        case 2:
+            document.getElementById('ViererPasch_Spieler2').innerHTML = output;
+            document.getElementById('aktuellerSpieler').innerHTML = "Spieler 3 ist an der Reihe";
+            break;
+        case 3:
+            document.getElementById('ViererPasch_Spieler3').innerHTML = output;
+            document.getElementById('aktuellerSpieler').innerHTML = "Spieler 4 ist an der Reihe";
+            break;
+        case 4:
+            document.getElementById('ViererPasch_Spieler4').innerHTML = output;
+            document.getElementById('aktuellerSpieler').innerHTML = "Spieler 1 ist an der Reihe";
+            break;    
+        
+    }
+    moeglicheWuerfeZuruecksetzen();
+            
+}

kniffel/index.html

@@ -10,6 +10,7 @@
         <script type="text/javascript" src="inc/viererPasch.js"></script>
         <script type="text/javascript" src="inc/kleineStraße.js"></script>
         <script type="text/javascript" src="inc/großeStraße.js"></script>
+        <script type="text/javascript" src="inc/errechneEndergebnisse.js"></script>
 
         <title>Kniffel</title>
 </head>
@@ -91,18 +92,18 @@
             <tr>
               <td>Bonus bei 65 oder mehr</td>
               <td>plus 35</td>
-              <td></td>
-              <td></td>
-              <td></td>
-              <td></td>
+              <td id="bonus_Spieler1"></td>
+              <td id="bonus_Spieler2"></td>
+              <td id="bonus_Spieler3"></td>
+              <td id="bonus_Spieler4"></td>
             </tr>
             <tr>
               <td>gesamt oberer Teil</td>
               <td>--></td>
-              <td></td>
-              <td></td>
-              <td></td>
-              <td></td>
+              <td id="obenMitBonus_Spieler1"></td>
+              <td id="obenMitBonus_Spieler2"></td>
+              <td id="obenMitBonus_Spieler3"></td>
+              <td id="obenMitBonus_Spieler4"></td>
             </tr>
             <tr>
               <td>Dreierpasch</td>
@@ -147,44 +148,47 @@
             <tr>
               <td>Kniffel</td>
               <td>50 Punkte</td>
-              <td></td>
-              <td></td>
-              <td></td>
-              <td></td>
+              <td id="kniffel_Spieler1" onclick="kniffel(1)"></td>
+              <td id="kniffel_Spieler2" onclick="kniffel(2)"></td>
+              <td id="kniffel_Spieler3" onclick="kniffel(3)"></td>
+              <td id="kniffel_Spieler4" onclick="kniffel(4)"></td>
             </tr>
             <tr>
               <td>Chance</td>
               <td>alle Augen zählen</td>
-              <td></td>
-              <td></td>
-              <td></td>
-              <td></td>
+              <td id="chance_Spieler1" onclick="chance(1)"></td>
+              <td id="chance_Spieler2" onclick="chance(2)"></td>
+              <td id="chance_Spieler3" onclick="chance(3)"></td>
+              <td id="chance_Spieler4" onclick="chance(4)"></td>
             </tr>
             <tr>
               <td>gesamt unterer Teil</td>
               <td>--></td>
-              <td></td>
-              <td></td>
-              <td></td>
-              <td></td>
+              <td id="unten_Spieler1"></td>
+              <td id="unten_Spieler2"></td>
+              <td id="unten_Spieler3"></td>
+              <td id="unten_Spieler4"></td>
             </tr>
             <tr>
               <td>gesamt oberer Teil</td>
               <td>--></td>
-              <td></td>
-              <td></td>
-              <td></td>
-              <td></td>
+              <td id="zwischenergebnisObenMitBonus_Spieler1"></td>
+              <td id="zwischenergebnisObenMitBonus_Spieler2"></td>
+              <td id="zwischenergebnisObenMitBonus_Spieler3"></td>
+              <td id="zwischenergebnisObenMitBonus_Spieler4"></td>
             </tr>
             <tr>
               <td>Endsumme</td>
               <td>--></td>
-              <td></td>
-              <td></td>
-              <td></td>
-              <td></td>
+              <td id="endsumme_Spieler1"></td>
+              <td id="endsumme_Spieler2"></td>
+              <td id="endsumme_Spieler3"></td>
+              <td id="endsumme_Spieler4"></td>
             </tr>
           </table>
+          <br>
+        <input type="button" value="Spiel beenden" onclick="errechneEndergebnisse();">
+        <br>
       </div>
     
 
@@ -223,11 +227,11 @@
           <h3>erlaubte Würfelversuche: </h3>
           <h3 id="erlaubteVersuche">3</h3>
         </div>
-        <h6 id="AusgabeWuerfel1" >0</h6>
-        <h6 id="AusgabeWuerfel2" >0</h6>
-        <h6 id="AusgabeWuerfel3" >0</h6>
-        <h6 id="AusgabeWuerfel4" >0</h6>
-        <h6 id="AusgabeWuerfel5" >0</h6>
+        <h6 id="AusgabeWuerfel1" style="color: white;">0</h6>
+        <h6 id="AusgabeWuerfel2" style="color: white;">0</h6>
+        <h6 id="AusgabeWuerfel3" style="color: white;">0</h6>
+        <h6 id="AusgabeWuerfel4" style="color: white;">0</h6>
+        <h6 id="AusgabeWuerfel5" style="color: white;">0</h6>
         
       </div>
 

uno/css/uno.css

@@ -2,11 +2,15 @@
 
 *{
     font-family: 'Cabin', sans-serif;
+    font-size: large;
+    color: white;
 }
 
 body
 {
     overflow: hidden;
+    background-image: url('../img/Bg.png');
+    background-size: cover;
 }
 
 
@@ -72,6 +76,7 @@ body
     bottom: 0vh;
     left: 3vh;
     width: 100%;
+    opacity: 0;
 }
 .uno{
     position: absolute;
@@ -85,3 +90,51 @@ body
     opacity: 0.3;
     transition: width ease-in-out 0.5s, opacity 0.5s;
 }
+
+.selectColor {
+    display: flex;
+    align-items: center;
+    opacity: 0;
+}
+
+.cc{
+    position: absolute;
+    width: 10vw;
+    z-index: 1000;
+}
+#cc-blue{
+    top: 20vw;
+    left: 50vw;
+    transition: top 0.5s, left 0.5s;
+}
+#cc-green{
+    top: 20vw;
+    right: 50vw;
+    transition: top 0.5s, right 0.5s;
+}
+#cc-yellow{
+    top: 10vw;
+    right: 50vw;
+    transition: top 0.5s, right 0.5s;
+}
+#cc-red{
+    top: 10vw;
+    left: 50vw;
+    transition: top 0.5s, left 0.5s;
+}
+#cc-blue:hover{
+    top: calc(20vw + 15px);
+    left: calc(50vw + 15px);
+}
+#cc-red:hover{
+    top: calc(10vw - 15px);
+    left: calc(50vw + 15px);
+}
+#cc-yellow:hover{
+    top: calc(10vw - 15px);
+    right: calc(50vw + 15px);
+}
+#cc-green:hover{
+    top: calc(20vw + 15px);
+    right: calc(50vw + 15px);
+}

uno/index.html

@@ -11,12 +11,20 @@
 </head>
 <body>
 
+    <div class="selectColor">
+
+        <img class="cc" id="cc-blue" src="./img/selectColor/BLUE.png">
+        <img class="cc" id="cc-red" src="./img/selectColor/RED.png">
+        <img class="cc" id="cc-green" src="./img/selectColor/GREEN.png">
+        <img class="cc" id="cc-yellow" src="./img/selectColor/YELLOW.png">
+
+    </div>
+
     <div id="debug">
         <p id="playerInGame"></p>
         <p id="player"></p>
         <p id="cardOnDeck"></p>
         <div id="playerCards"></div>
-        <button id="drawCard">Karte Ziehen</button>
     </div>
 
     <div>
@@ -43,7 +51,6 @@
     <div id="sayUno">
         <img class="uno" id="sayUno-glow" src="./img/sayUnoGlow.png">
         <img class="uno" src="./img/sayUno.png">
-
     </div>
 
 </body>

uno/node/js/Game.js

@@ -81,11 +81,6 @@ class Game {
 
     }
 
-    //
-    gameLoop(){
-
-    }
-
     //Gibt ein Array zurück mit allen Karten, die in einem Uno Spiel sind
     generatePool(){
 

uno/web/Game.js

@@ -136,6 +136,7 @@ export default class Game {
 
     //Beendet den Zug des aktuellen Spielers und beginnt den Zug des nächsten Spielers
     nextTurn() {
+
         let delay = 0;
 
         //Testet, ob Spiel Gewonnen
@@ -162,6 +163,9 @@ export default class Game {
             this.players[this.currentPlayer].turn = false;
 
         }
+
+        this.style.hideUnoButton();
+
         setTimeout(() => {
 
 
@@ -222,7 +226,10 @@ export default class Game {
             }
 
             //Wenn Farbe oder Zahl gleich oder eine Karte, die keine Farbe hat
-            if (this.cardOnDeck.name.toString() === currentPlayerCards[i].name.toString() || this.cardOnDeck.color === currentPlayerCards[i].color || currentPlayerCards[i].color === CARD_COLORS[0] || this.cardOnDeck.color === CARD_COLORS[0]) {
+            if (this.cardOnDeck.name.toString() === currentPlayerCards[i].name.toString()
+                || this.cardOnDeck.color === currentPlayerCards[i].color
+                || currentPlayerCards[i].color === CARD_COLORS[0]
+                || this.cardOnDeck.color === CARD_COLORS[0]) {
 
                 //Aktualisiere den Wert der Karte, sodass sie gelegt werden kann
                 this.players[this.currentPlayer].hand[i].canPut = true;
@@ -241,7 +248,10 @@ export default class Game {
 
         //Uno sagen testen
 
-        if (this.currentPlayerInstanz.hand.length <= 2 && this.currentPlayerInstanz.canPlay) this.currentPlayerInstanz.mustSayUno = true;
+        if (this.currentPlayerInstanz.hand.length === 2 && this.currentPlayerInstanz.canPlay){
+            this.currentPlayerInstanz.mustSayUno = true;
+            this.style.showUnoButton();
+        }
 
     }
 

uno/web/Player.js

@@ -17,14 +17,11 @@ export default class Player {
 
     //Lässt den Spieler eine Anzahl "amount" an Karten ziehen
     drawCard(amount, nextTurn, anim) {
-        if(this.game.stack !== 0){
-            if (!this.game.currentPlayerInstanz.mustSayUno){
+        if (this.game.stack !== 0) {
+            if (!this.game.currentPlayerInstanz.mustSayUno) {
                 let cards = this.game.stack;
                 this.game.stack = 0;
-            if (this.game.cardOnDeck.name === '+4')
-                this.drawCard(cards, true, true);
-            else
-                this.drawCard(cards, false, true);
+                if (this.game.cardOnDeck.name === '+4') this.drawCard(cards, true, true); else this.drawCard(cards, false, true);
                 return;
             }
         }
@@ -54,7 +51,6 @@ export default class Player {
         }
 
 
-
         setTimeout(() => {
             this.game.refreshCanPutCard();
             this.game.style.showPlayerDeck(this.game.currentPlayerInstanz, true, false, false);
@@ -64,8 +60,6 @@ export default class Player {
         }, 300 + 500 * amount);
 
 
-
-
     }
 
     //Lässt den Spieler eine Karte in seiner Hand legen
@@ -102,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) {
@@ -13,7 +15,39 @@ export default class Style {
 
         this._firstPutAnim = $('#first-put-anim');
 
+        this._unohover = false;
+        this._unoClicked = false;
+
+        $('#sayUno').on('mouseenter', () => {
+            if (this._unoClicked) return;
+            this.unoHover = true;
+            $('.uno').css('width', '28vw');
+            $('#sayUno-glow').css('opacity', 1);
+        })
+
+        $('#sayUno').on('mouseleave', () => {
+            if (this._unoClicked) return;
+            this.unoHover = false;
+            $('.uno').css('width', '25vw');
+            $('#sayUno-glow').css('opacity', 0.3);
+            this.startUnoLoop();
+        })
+
+        $('#sayUno').on('click', () => {
+            this.unoHover = true;
+            this._unoClicked = true;
+            $('.uno').css('transition', 'width ease-out 0.2s, filter 0.1s');
+            $('.uno').css('width', '22vw');
+            $('.uno').css('filter', 'grayscale(80%)');
+            $('#sayUno-glow').css('opacity', 1);
+            this.game.currentPlayerInstanz.sayUno();
+            this.game.currentPlayerInstanz.mustSayUno = false;
+        })
+
         $('#drawCard').on('click', () => {
+            if(this.game.currentPlayerInstanz.mustSayUno){
+                this.game.currentPlayerInstanz.mustSayUno = false;
+            }
             this.game.currentPlayerInstanz.drawCard(1, true, true);
             this.refreshDebug();
         });
@@ -25,6 +59,10 @@ export default class Style {
             this.drawCardAnim(false, false);
         });
         this.firstDraw.on('click', () => {
+            if(this.game.currentPlayerInstanz.mustSayUno){
+                this.game.currentPlayerInstanz.mustSayUno = false;
+                this.game.style.hideUnoButton();
+            }
 
             let playerInstanz = this.game.currentPlayerInstanz;
 
@@ -34,8 +72,6 @@ export default class Style {
 
         });
 
-
-        this.startUnoLoop();
     }
 
     refreshHtml() {
@@ -46,9 +82,8 @@ export default class Style {
         this.refreshDebug();
     }
 
-    refreshCardOnDeck(){
+    refreshCardOnDeck() {
         if (this._cardOnDeck !== this.game.cardOnDeck) {
-            console.log(" ewfw")
             this.putCardAnim();
             this._cardOnDeck = this.game.cardOnDeck;
         } else {
@@ -60,39 +95,49 @@ export default class Style {
     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++) {
-            $('#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);
-                setTimeout(() => {
-                    this.showPlayerDeck(this.game.currentPlayerInstanz, false, true, false);
-                }, 100);
-            });
-            if (this.game.currentPlayerInstanz.hand[i].canPut) $('#button' + i).css('background-color', 'green');
+        $("#player").html("Aktueller Spieler: " + this.game.currentPlayerInstanz.name + " | " + this.game.currentPlayerInstanz.hand.length);
+        $("#playerCards").html("Weitere Spieler: <br>");
+        for (let i = 0; i < this.game.players.length; i++) {
+            if(this.game.players[i] === this.game.currentPlayerInstanz) continue;
+            $('#playerCards').append("" + this.game.players[i].name + " | " + this.game.players[i].hand.length + "<br>");
         }
-        $('#playerCards').append("" + this.game.currentPlayerInstanz.hand.length)
-        $("#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) $('#drawCard').css('background-color', 'red');
     }
 
-    startUnoLoop(){
-        setTimeout(()=>{
+    showUnoButton(){
+        $('.uno').css('transition', 'width ease-in-out 0.5s');
+        $('#sayUno-glow').css('transition', 'width ease-in-out 0.5s, opacity 0.5s');
+        $('.uno').css('filter', 'grayscale(0%)');
+        $('#sayUno').css('opacity', 1);
+        this.unoHover = false;
+        this._unoClicked = false;
+        this.startUnoLoop();
+    }
+
+    hideUnoButton(){
+        $('#sayUno').css('opacity', 0);
+    }
+
+    startUnoLoop() {
+        if (!this.unoHover && !this._unoClicked) setTimeout(() => {
             $('.uno').css('width', '28vw');
             $('#sayUno-glow').css('opacity', 0.8);
-            setTimeout(()=>{
-                console.log("bibi")
+            setTimeout(() => {
+                if (!this.unoHover && !this._unoClicked) {
                     $('.uno').css('width', '25vw');
                     $('#sayUno-glow').css('opacity', 0.3);
                     this.startUnoLoop();
+                }
             }, 500);
         }, 500);
     }
 
+    stopUnoLoop(){
+        this._unoClicked = true;
+        this.unoHover = true;
+    }
+
     putCardAnim() {
         this.firstPutAnim.attr('src', './img/stackCards/' + this.game.cardOnDeck.color + '/' + this.game.cardOnDeck.name + '.png');
 
@@ -111,6 +156,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("");
 
@@ -134,8 +210,6 @@ export default class Style {
             currentPlayerHand[i].xPos = (width * (((43 + cardAmount / 2 * 5) - percent)) / 100);
             currentPlayerHand[i].yPos = top;
 
-            console.log(i + ' ' + currentPlayerHand[i].yPos);
-
             let card = $('#card' + i);
 
             let put = false;
@@ -162,31 +236,31 @@ export default class Style {
                 })
             }
 
-            if(anim){
+            if (anim) {
                 card.css('top', height);
-                setTimeout(()=>{
+                setTimeout(() => {
                     card.css('top', top + 'px')
                     card.css('left', (width * 45 / 100));
-                    setTimeout(()=>{
+                    setTimeout(() => {
                         card.css('left', currentPlayerHand[i].xPos + 'px');
                         card.css('top', top + 'px')
                         anim = false;
                     }, 250);
-                },100);
+                }, 100);
 
             } else {
                 card.css('left', currentPlayerHand[i].xPos + 'px');
                 card.css('top', top + 'px')
             }
 
-            if(lastDraw && i === cardAmount - 1){
+            if (lastDraw && i === cardAmount - 1) {
                 card.css('opacity', 0);
                 card.css('top', currentPlayerHand[i].yPos - 100);
-                setTimeout(()=>{
+                setTimeout(() => {
                     card.css('left', currentPlayerHand[i].xPos + 'px');
                     card.css('top', top + 'px')
                     card.css('opacity', 1);
-                },50);
+                }, 50);
 
             }
 
@@ -262,4 +336,12 @@ export default class Style {
         this._drawCardRunnig = bool;
     }
 
+    get unoHover() {
+        return this._unohover;
+    }
+
+    set unoHover(bool) {
+        this._unohover = bool;
+    }
+
 }

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] && this.plus === 4){
+            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,12 @@ 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
+        if(this.plus === 2)
             super.putSelf();
+
     }
 
     //Gibt den PlusWert der Karte zurück