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

2 years ago · 9405ee3bfa
52 changed files with 1330 additions and 270 deletions
--- a/Spieleverwaltung/css/styles.css
+++ b/Spieleverwaltung/css/styles.css
--- a/Spieleverwaltung/spieleverwaltung.html
+++ b/Spieleverwaltung/spieleverwaltung.html
@ -0,0 +1,23 @@
+<html lang="de">
+    <meta charset="UTF-8">
+    <link rel="stylesheet" href="./css/styles.css">
+    <script src="spieleverwaltung.js"></script>
+    <title>Spieleverwalltung</title>
+    
+    <body>
+        <h1>Spielesammlung</h1>
+        <h2>Spiele:</h2>
+        <a href="../kniffel/index.html">Kniffel</a><hr>
+        <a href="../uno/index.html">UNO</a><hr>
+        <a href=""></a><hr>
+        <a href="">Vier Gewinnt</a><hr>
+    </body>
+
+    <footer>
+        Gruppenprojekt Programmiermethoden und Werkzeuge
+        <p>Lucas Thenert <a href="../kniffel/index.html">Kniffel</a></p>
+        <p>Richard Halsall<a href=""></a></p>
+        <p>Nicolas Fritz<a href="../uno/uno.html"></a></p>
+        <p>Raphael Elström <a href=""></a></p>
+    </footer>
+</html>
--- a/Spieleverwaltung/spieleverwaltung.js
+++ b/Spieleverwaltung/spieleverwaltung.js
--- a/Team.md
+++ b/Team.md
@ -1,2 +1,3 @@
 - Nicolas Fritz, fdai7359
 - Lucas Thenert, fdai7346
+- Raphael Elström, fdai7458
--- a/kniffel/css/styles.css
+++ b/kniffel/css/styles.css
@ -42,3 +42,14 @@
    padding: 3%;
  }

+  .icon{
+    display: flex;
+    width: 33px;
+    height: 33px;
+  }
+
+  .center {
+    margin: auto;
+    width: 50%;
+  }
+  
--- a/kniffel/img/SymbolAnleitung.jpeg
+++ b/kniffel/img/SymbolAnleitung.jpeg
--- a/kniffel/inc/dreierPasch.js
+++ b/kniffel/inc/dreierPasch.js
@ -0,0 +1,16 @@
+function dreierPasch(wuerfelArr){
+    let output = 0;
+    let countObj = {}
+    for(let x of wuerfelArr){
+    countObj[x] = (countObj[x] || 0) + 1;
+    }
+    let vals = Object.values(countObj);
+    if(( vals[1] === 3) || (vals[0] === 3)|| (vals[2] === 3)){
+        wuerfelArr.forEach(element => {
+            output += element;
+        });
+    }
+    return output;
+            
+}
+module.exports = dreierPasch;
--- a/kniffel/inc/errechneEndergebnisse.js
+++ b/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  ;
+    }
+}
--- a/kniffel/inc/fullHouse.js
+++ b/kniffel/inc/fullHouse.js
@ -0,0 +1,14 @@
+function fullHouse(wuerfelArr){
+    
+    let countObj = {}
+    for(let x of wuerfelArr){
+    countObj[x] = (countObj[x] || 0) + 1;
+    }
+    let vals = Object.values(countObj);
+    if((vals[0] === 2 && vals[1] === 3) || (vals[1] === 2 && vals[0] === 3)){
+    return 25;
+    }
+    return 0;
+            
+}
+module.exports = fullHouse;
--- a/kniffel/inc/großeStraße.js
+++ b/kniffel/inc/großeStraße.js
@ -0,0 +1,40 @@
+function großeStraße(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 output = 0;
+    wuerfelArr.sort();
+    wuerfelArr.toString();
+
+    if(wuerfelArr == "1,2,3,4,5" || wuerfelArr == "2,3,4,5,6" ){
+        output = 40;
+    }
+
+    
+
+
+    switch (spieler){
+        case 1:
+            document.getElementById('großeStraße_Spieler1').innerHTML = output;
+            document.getElementById('aktuellerSpieler').innerHTML = "Spieler 2 ist an der Reihe";
+            break;
+        case 2:
+            document.getElementById('großeStraße_Spieler2').innerHTML = output;
+            document.getElementById('aktuellerSpieler').innerHTML = "Spieler 3 ist an der Reihe";
+            break;
+        case 3:
+            document.getElementById('großeStraße_Spieler3').innerHTML = output;
+            document.getElementById('aktuellerSpieler').innerHTML = "Spieler 4 ist an der Reihe";
+            break;
+        case 4:
+            document.getElementById('großeStraße_Spieler4').innerHTML = output;
+            document.getElementById('aktuellerSpieler').innerHTML = "Spieler 1 ist an der Reihe";
+            break;    
+        
+    }
+    moeglicheWuerfeZuruecksetzen();
+}
--- a/kniffel/inc/helper.js
+++ b/kniffel/inc/helper.js
@ -1,8 +1,175 @@
 function moeglicheWuerfeZuruecksetzen(){
    document.getElementById('erlaubteVersuche').innerHTML = '3';
-    document.getElementById('CheckBoxWuerfel1').checked = false;
-    document.getElementById('CheckBoxWuerfel2').checked = false;
-    document.getElementById('CheckBoxWuerfel3').checked = false;
-    document.getElementById('CheckBoxWuerfel4').checked = false;
-    document.getElementById('CheckBoxWuerfel5').checked = false;
+    for(let i = 1; i <= 5; i++){
+        document.getElementById('CheckBoxWuerfel' + i).checked = false;
+    }
+    
+    alert('Der nächste Spieler ist an der Reihe!');
+}
+
+function getWuerfelarr(){
+    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)];
+    return wuerfelArr;
+}
+
+function dreierPasch(spieler){
+
+    wuerfelArr = getWuerfelarr();
+
+
+    let output = 0;
+    let countObj = {}
+    for(let x of wuerfelArr){
+    countObj[x] = (countObj[x] || 0) + 1;
+    }
+    let vals = Object.values(countObj);
+    if(( vals[1] === 3) || (vals[0] === 3)|| (vals[2] === 3)){
+        wuerfelArr.forEach(element => {
+            output += element;
+        });
+    }
+
+
+    switch (spieler){
+        case 1:
+            document.getElementById('DreierPasch_Spieler1').innerHTML = output;
+            document.getElementById('aktuellerSpieler').innerHTML = "Spieler 2 ist an der Reihe";
+            break;
+        case 2:
+            document.getElementById('DreierPasch_Spieler2').innerHTML = output;
+            document.getElementById('aktuellerSpieler').innerHTML = "Spieler 3 ist an der Reihe";
+            break;
+        case 3:
+            document.getElementById('DreierPasch_Spieler3').innerHTML = output;
+            document.getElementById('aktuellerSpieler').innerHTML = "Spieler 4 ist an der Reihe";
+            break;
+        case 4:
+            document.getElementById('DreierPasch_Spieler4').innerHTML = output;
+            document.getElementById('aktuellerSpieler').innerHTML = "Spieler 1 ist an der Reihe";
+            break;    
+        
+    }
+    moeglicheWuerfeZuruecksetzen();
+            
+}
+
+function kniffel(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;
+    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){
+
+    wuerfelArr = getWuerfelarr();
+    let output = 0;
+
+    let countObj = {}
+    for(let x of wuerfelArr){
+    countObj[x] = (countObj[x] || 0) + 1;
+    }
+    let vals = Object.values(countObj);
+    if((vals[0] === 2 && vals[1] === 3) || (vals[1] === 2 && vals[0] === 3)){
+    output = 25;
+    }
+
+
+    switch (spieler){
+        case 1:
+            document.getElementById('fullHouse_Spieler1').innerHTML = output;
+            document.getElementById('aktuellerSpieler').innerHTML = "Spieler 2 ist an der Reihe";
+            break;
+        case 2:
+            document.getElementById('fullHouse_Spieler2').innerHTML = output;
+            document.getElementById('aktuellerSpieler').innerHTML = "Spieler 3 ist an der Reihe";
+            break;
+        case 3:
+            document.getElementById('fullHouse_Spieler3').innerHTML = output;
+            document.getElementById('aktuellerSpieler').innerHTML = "Spieler 4 ist an der Reihe";
+            break;
+        case 4:
+            document.getElementById('fullHouse_Spieler4').innerHTML = output;
+            document.getElementById('aktuellerSpieler').innerHTML = "Spieler 1 ist an der Reihe";
+            break;    
+        
+    }
+    moeglicheWuerfeZuruecksetzen();
+            
 }
--- a/kniffel/inc/kleineStraße.js
+++ b/kniffel/inc/kleineStraße.js
@ -0,0 +1,41 @@
+function kleineStraße(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 output = 0;
+   
+
+    if(wuerfelArr.includes(1) && wuerfelArr.includes(2) && wuerfelArr.includes(3) && wuerfelArr.includes(4) ||
+    wuerfelArr.includes(2) && wuerfelArr.includes(3)&& wuerfelArr.includes(4) && wuerfelArr.includes(5) ||
+    wuerfelArr.includes(3) && wuerfelArr.includes(4)&& wuerfelArr.includes(5) && wuerfelArr.includes(6)){
+        output = 30;
+    }
+
+    
+
+
+    switch (spieler){
+        case 1:
+            document.getElementById('kleineStraße_Spieler1').innerHTML = output;
+            document.getElementById('aktuellerSpieler').innerHTML = "Spieler 2 ist an der Reihe";
+            break;
+        case 2:
+            document.getElementById('kleineStraße_Spieler2').innerHTML = output;
+            document.getElementById('aktuellerSpieler').innerHTML = "Spieler 3 ist an der Reihe";
+            break;
+        case 3:
+            document.getElementById('kleineStraße_Spieler3').innerHTML = output;
+            document.getElementById('aktuellerSpieler').innerHTML = "Spieler 4 ist an der Reihe";
+            break;
+        case 4:
+            document.getElementById('kleineStraße_Spieler4').innerHTML = output;
+            document.getElementById('aktuellerSpieler').innerHTML = "Spieler 1 ist an der Reihe";
+            break;    
+        
+    }
+    moeglicheWuerfeZuruecksetzen();
+}
--- a/kniffel/inc/kniffel.js
+++ b/kniffel/inc/kniffel.js
@ -0,0 +1,9 @@
+function kniffel(w1, w2, w3, w4, w5){
+    if(w1 == w2 && w1 == w3 && w1 == w4 && w1 == w5){
+        return 50;
+    } else {
+        return 0;
+    }
+    
+}
+module.exports = kniffel;
--- a/kniffel/inc/sammleGleicheZahlen.js
+++ b/kniffel/inc/sammleGleicheZahlen.js
@ -1,4 +1,6 @@
 function sammleGleicheZahlen(spieler, Augenzahl){
+
+
    var w1 = document.getElementById('AusgabeWuerfel1').innerHTML;
    var w2 = document.getElementById('AusgabeWuerfel2').innerHTML;
    var w3 = document.getElementById('AusgabeWuerfel3').innerHTML;
@ -27,25 +29,15 @@ function sammleGleicheZahlen(spieler, Augenzahl){
    }


-    switch (spieler){
-        case 1:
-            document.getElementById(Augenzahl + '_Spieler1').innerHTML = sum;
-            document.getElementById('aktuellerSpieler').innerHTML = "Spieler 2 ist an der Reihe";
-            break;
-        case 2:
-            document.getElementById(Augenzahl + '_Spieler2').innerHTML = sum;
-            document.getElementById('aktuellerSpieler').innerHTML = "Spieler 3 ist an der Reihe";
-            break;
-        case 3:
-            document.getElementById(Augenzahl + '_Spieler3').innerHTML = sum;
-            document.getElementById('aktuellerSpieler').innerHTML = "Spieler 4 ist an der Reihe";
-            break;
-        case 4:
-            document.getElementById(Augenzahl + '_Spieler4').innerHTML = sum;
-            document.getElementById('aktuellerSpieler').innerHTML = "Spieler 1 ist an der Reihe";
-            break;    

+    document.getElementById(Augenzahl + '_Spieler' + spieler).innerHTML = sum;
+    if(spieler < 4){
+        let neuerSpieler = spieler + 1;
+        document.getElementById('aktuellerSpieler').innerHTML = "Spieler " + neuerSpieler + " ist an der Reihe"; 
+    } else {
+        document.getElementById('aktuellerSpieler').innerHTML = "Spieler 1 ist an der Reihe";
    }
+
    moeglicheWuerfeZuruecksetzen();

 }
--- a/kniffel/inc/viererPasch.js
+++ b/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();
+            
+}
--- a/kniffel/inc/wuerfel.js
+++ b/kniffel/inc/wuerfel.js
@ -1,59 +1,20 @@
 function Wuerfel(){
-    if (document.getElementById('CheckBoxWuerfel1').checked == 0){
-        var Zufallszahl;
-        var Ausgabe=document.getElementById('AusgabeWuerfel1');
-        var Ausgabebild=document.getElementById('Bildwuerfel1');
-        Zufallszahl=Math.random();
-        Zufallszahl=Math.ceil(Zufallszahl*6);
-        Ausgabe.innerHTML = Zufallszahl;
-        var Bild=["","img/1.png","img/2.png","img/3.png","img/4.png","img/5.png","img/6.png"];
-        Ausgabebild.src=Bild[Zufallszahl];
-    }
-

-    if (document.getElementById('CheckBoxWuerfel2').checked == 0){
-        var Zufallszahl;
-        var Ausgabe=document.getElementById('AusgabeWuerfel2');
-        var Ausgabebild=document.getElementById('Bildwuerfel2');
-        Zufallszahl=Math.random();
-        Zufallszahl=Math.ceil(Zufallszahl*6);
-        Ausgabe.innerHTML = Zufallszahl;
-        var Bild=["","img/1.png","img/2.png","img/3.png","img/4.png","img/5.png","img/6.png"];
-        Ausgabebild.src=Bild[Zufallszahl];
-    }
+    for(let i = 1; i <= 5; i++){
   
-    if (document.getElementById('CheckBoxWuerfel3').checked == 0){
-        var Zufallszahl;
-        var Ausgabe=document.getElementById('AusgabeWuerfel3');
-        var Ausgabebild=document.getElementById('Bildwuerfel3');
-        Zufallszahl=Math.random();
-        Zufallszahl=Math.ceil(Zufallszahl*6);
-        Ausgabe.innerHTML = Zufallszahl;
-        var Bild=["","img/1.png","img/2.png","img/3.png","img/4.png","img/5.png","img/6.png"];
-        Ausgabebild.src=Bild[Zufallszahl];
-    }
+        if (document.getElementById('CheckBoxWuerfel' + i).checked == 0){
+            var Zufallszahl;
+            var Ausgabe=document.getElementById('AusgabeWuerfel' + i);
+            var Ausgabebild=document.getElementById('Bildwuerfel' + i);
+            Zufallszahl=Math.random();
+            Zufallszahl=Math.ceil(Zufallszahl*6);
+            Ausgabe.innerHTML = Zufallszahl;
+            var Bild=["","img/1.png","img/2.png","img/3.png","img/4.png","img/5.png","img/6.png"];
+            Ausgabebild.src=Bild[Zufallszahl];
+        }

-    if (document.getElementById('CheckBoxWuerfel4').checked == 0){
-        var Zufallszahl;
-        var Ausgabe=document.getElementById('AusgabeWuerfel4');
-        var Ausgabebild=document.getElementById('Bildwuerfel4');
-        Zufallszahl=Math.random();
-        Zufallszahl=Math.ceil(Zufallszahl*6);
-        Ausgabe.innerHTML = Zufallszahl;
-        var Bild=["","img/1.png","img/2.png","img/3.png","img/4.png","img/5.png","img/6.png"];
-        Ausgabebild.src=Bild[Zufallszahl];
    }

-    if (document.getElementById('CheckBoxWuerfel5').checked == 0){
-        var Zufallszahl;
-        var Ausgabe=document.getElementById('AusgabeWuerfel5');
-        var Ausgabebild=document.getElementById('Bildwuerfel5');
-        Zufallszahl=Math.random();
-        Zufallszahl=Math.ceil(Zufallszahl*6);
-        Ausgabe.innerHTML = Zufallszahl;
-        var Bild=["","img/1.png","img/2.png","img/3.png","img/4.png","img/5.png","img/6.png"];
-        Ausgabebild.src=Bild[Zufallszahl];
-        }

    var erlaubteVersuche = document.getElementById('erlaubteVersuche').innerHTML;
    if(erlaubteVersuche == '1'){
--- a/kniffel/index.html
+++ b/kniffel/index.html
@ -7,14 +7,23 @@
        <script type="text/javascript" src="inc/sammleGleicheZahlen.js"></script>
        <script type="text/javascript" src="inc/helper.js"></script>
        <script type="text/javascript" src="inc/summeObererTeil.js"></script>
+        <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>
 <body>

    <div class="header">
+      <a href="src/anleitung.html">
+      <img class="icon" src="img/SymbolAnleitung.jpeg" onclick="">
+      </a>
      <h1>Kniffel</h1>
      <h2 id="aktuellerSpieler">Spieler 1 ist an der Reihe</h2>
    </div>
+
    <hr class="line">
    <div class="row">
      <div class="column">
@ -87,100 +96,103 @@
            <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>
              <td>alle Augen Zählen</td>
-              <td></td>
-              <td></td>
-              <td></td>
-              <td></td>
+              <td id="DreierPasch_Spieler1" onclick="dreierPasch(1)"></td>
+              <td id="DreierPasch_Spieler2" onclick="dreierPasch(2)"></td>
+              <td id="DreierPasch_Spieler3" onclick="dreierPasch(3)"></td>
+              <td id="DreierPasch_Spieler4" onclick="dreierPasch(4)"></td>
            </tr>
            <tr>
              <td>Viererpasch</td>
              <td>alle Augen zählen</td>
-              <td></td>
-              <td></td>
-              <td></td>
-              <td></td>
+              <td id="ViererPasch_Spieler1" onclick="viererPasch(1)"></td>
+              <td id="ViererPasch_Spieler2" onclick="viererPasch(2)"></td>
+              <td id="ViererPasch_Spieler3" onclick="viererPasch(3)"></td>
+              <td id="ViererPasch_Spieler4" onclick="viererPasch(4)"></td>
            </tr>
            <tr>
              <td>Full House</td>
              <td>25 Punkte</td>
-              <td></td>
-              <td></td>
-              <td></td>
-              <td></td>
+              <td id="fullHouse_Spieler1" onclick="fullHouse(1)"></td>
+              <td id="fullHouse_Spieler2" onclick="fullHouse(2)"></td>
+              <td id="fullHouse_Spieler3" onclick="fullHouse(3)"></td>
+              <td id="fullHouse_Spieler4" onclick="fullHouse(4)"></td>
            </tr>
            <tr>
              <td>Kleine Straße</td>
              <td>30 Punkte</td>
-              <td></td>
-              <td></td>
-              <td></td>
-              <td></td>
+              <td id="kleineStraße_Spieler1" onclick="kleineStraße(1)"></td>
+              <td id="kleineStraße_Spieler2" onclick="kleineStraße(2)"></td>
+              <td id="kleineStraße_Spieler3" onclick="kleineStraße(3)"></td>
+              <td id="kleineStraße_Spieler4" onclick="kleineStraße(4)"></td>
            </tr>
            <tr>
              <td>Große Straße</td>
              <td>40 Punkte</td>
-              <td></td>
-              <td></td>
-              <td></td>
-              <td></td>
+              <td id="großeStraße_Spieler1" onclick="großeStraße(1)"></td>
+              <td id="großeStraße_Spieler2" onclick="großeStraße(2)"></td>
+              <td id="großeStraße_Spieler3" onclick="großeStraße(3)"></td>
+              <td id="großeStraße_Spieler4" onclick="großeStraße(4)"></td>
            </tr>
            <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>
    

@ -219,11 +231,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>

--- a/kniffel/src/Anleitung.pdf
+++ b/kniffel/src/Anleitung.pdf
--- a/kniffel/src/anleitung.html
+++ b/kniffel/src/anleitung.html
@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="de">
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" type="text/css" href="../css/styles.css" /> 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Anleitung</title>
+  </head>
+  <body>
+    <div class="header">
+        <button onclick="window.location.href='../index.html';">
+            zurück
+          </button>
+        <h1>Kniffel - Anleitung</h1>
+      </div>
+      <div class="center">
+        <p>Quelle: 
+            <a href="https://www.schmidtspiele.de/files/Produkte/4/49030%20-%20Kniffel/49203_49030_Kniffel_DE.pdf">schmidtspiele.de</a>
+            </p>
+        <iframe src="Anleitung.pdf" width="600" height="800"></iframe>
+    </div>
+  </body>
+</html>
--- a/kniffel/test/test_dreierPasch.test.js
+++ b/kniffel/test/test_dreierPasch.test.js
@ -0,0 +1,29 @@
+const dreierPasch = require('../inc/dreierPasch');
+
+
+//Eine Test Gruppe, mit mehreren Tests
+describe('tests kniffel', () => {
+
+    it('teste ob drei gleiche Augenzahlen existieren (Dreier Pasch)', ()=>{
+
+        //Vergleiche Ist- und Sollergebnis
+        expect(dreierPasch([2, 1, 5, 5, 5])).toBe(18);
+
+    });
+
+    it('teste ob drei gleiche Augenzahlen existieren (Dreier Pasch)', ()=>{
+
+        //Vergleiche Ist- und Sollergebnis
+        expect(dreierPasch([5, 5, 5, 6, 2])).toBe(23);
+
+    });
+
+    it('teste wenn drei gleiche Augenzahlen nicht existieren --> keine Punkte vergeben', ()=>{
+
+        //Vergleiche Ist- und Sollergebnis
+        expect(dreierPasch([2, 5, 6, 4, 1])).toBe(0);
+
+    });
+
+
+})
--- a/kniffel/test/test_fullHouse.test.js
+++ b/kniffel/test/test_fullHouse.test.js
@ -0,0 +1,22 @@
+const fullHouse = require('../inc/fullHouse');
+
+
+//Eine Test Gruppe, mit mehreren Tests
+describe('tests kniffel', () => {
+
+    it('teste ob zwei und drei gleiche Augenzahlen existieren (Full House)', ()=>{
+
+        //Vergleiche Ist- und Sollergebnis
+        expect(fullHouse([2, 2, 3, 2, 3])).toBe(25);
+
+    });
+
+    it('teste wenn Full House nicht erzielt wird, dass dann keine Punkte vergeben werden', ()=>{
+
+        //Vergleiche Ist- und Sollergebnis
+        expect(fullHouse([5, 2, 1, 6, 3])).toBe(0);
+
+    });
+
+
+})
--- a/kniffel/test/test_kniffel.test.js
+++ b/kniffel/test/test_kniffel.test.js
@ -0,0 +1,20 @@
+const kniffel = require('../inc/kniffel');
+
+
+//Eine Test Gruppe, mit mehreren Tests
+describe('tests kniffel', () => {
+
+    it('teste ob alle Wuerfel die selbe Augenzahl haben', ()=>{
+
+        //Vergleiche Ist- und Sollergebnis
+        expect(kniffel(5, 5, 5, 5, 5)).toBe(50);
+
+    });
+    it('teste ob alle Wuerfel nicht die selbe Augenzahl haben', ()=>{
+
+        //Vergleiche Ist- und Sollergebnis
+        expect(kniffel(3, 4, 6, 1, 2)).toBe(0);
+
+    });
+
+})
--- a/uno/css/uno.css
+++ b/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;
 }


@ -42,3 +46,95 @@ body
 {
    opacity: 0;
 }
+
+.playerDeck{
+    display: flex;
+    justify-content: center;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 30%;
+}
+.pictureCard
+{
+    position: absolute;
+    width: 8vw;
+    box-shadow: 3px 3px rgba(0, 0, 0, 0.2);
+    background-color: rgb(0, 0, 0);
+    border: 0.2vw solid black;
+    border-radius: 1.5vw;
+    transition: top 0.5s, width 0.5s, transform 0.5s, left 0.5s, opacity 0.5s;
+}
+
+.pictureCard img{
+    width: 100%;
+}
+
+#sayUno{
+    position: absolute;
+    bottom: 0vh;
+    left: 3vh;
+    width: 100%;
+    opacity: 0;
+}
+.uno{
+    position: absolute;
+    bottom: 10.5vw;
+    left: 11vw;
+    width: 25vw;
+    transition: width ease-in-out 0.5s;
+    transform: translate(-50%, 50%);
+}
+#sayUno-glow{
+    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);
+}
--- a/uno/img/Bg.png
+++ b/uno/img/Bg.png
--- a/uno/img/cards/BLUE/S.png
+++ b/uno/img/cards/BLUE/S.png
--- a/uno/img/cards/GREEN/S.png
+++ b/uno/img/cards/GREEN/S.png
--- a/uno/img/cards/RED/S.png
+++ b/uno/img/cards/RED/S.png
--- a/uno/img/cards/YELLOW/S.png
+++ b/uno/img/cards/YELLOW/S.png
--- a/uno/img/sayUno.png
+++ b/uno/img/sayUno.png
--- a/uno/img/sayUnoGlow.png
+++ b/uno/img/sayUnoGlow.png
--- a/uno/img/selectColor/BLUE.png
+++ b/uno/img/selectColor/BLUE.png
--- a/uno/img/selectColor/GREEN.png
+++ b/uno/img/selectColor/GREEN.png
--- a/uno/img/selectColor/RED.png
+++ b/uno/img/selectColor/RED.png
--- a/uno/img/selectColor/YELLOW.png
+++ b/uno/img/selectColor/YELLOW.png
--- a/uno/index.html
+++ b/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>
@ -34,10 +42,15 @@

    </div>

-    <div>
+    <div id="playerDeck">
+


+    </div>

+    <div id="sayUno">
+        <img class="uno" id="sayUno-glow" src="./img/sayUnoGlow.png">
+        <img class="uno" src="./img/sayUno.png">
    </div>

 </body>
--- a/uno/node/js/Game.js
+++ b/uno/node/js/Game.js
@ -51,7 +51,7 @@ class Game {
        if (this._rules !== null){
            if('startCards' in this.rules)
                for (let i = 0; i < this.players.length; i++)
-                    this.players[i].drawCard(this.rules.startCards);
+                    this.players[i].drawCard(this.rules.startCards, false, false);

            if('firstPlaySpecial' in this.rules)
                    boolFirstSpecial = this.rules.firstPlaySpecial;
@ -81,11 +81,6 @@ class Game {

    }

-    //
-    gameLoop(){
-
-    }
-
    //Gibt ein Array zurück mit allen Karten, die in einem Uno Spiel sind
    generatePool(){

--- a/uno/node/js/cards/special/PlusAmount.js
+++ b/uno/node/js/cards/special/PlusAmount.js
@ -22,7 +22,7 @@ class PlusAmount extends Card {

        //Todo: Karten Stapeln Regel
        //lässt den nächsten Spieler den PlusAmount der Karte ziehen
-        this.game.players[this.game.nextPlayer()].drawCard(this._plus);
+        this.game.players[this.game.nextPlayer()].drawCard(this._plus, false, false);

        if(this._plus === 4){

--- a/uno/web/Game.js
+++ b/uno/web/Game.js
@ -6,6 +6,7 @@ import PlusAmount from "./cards/special/PlusAmount.js";
 import Reverse from "./cards/special/Reverse.js";
 import Player from "./Player.js";
 import {CARD_COLORS} from "./uno.js";
+import Style from "./Style.js";

 //Um generatePool zu exportieren, muss es in eine Klasse konvertiert werden
 export default class Game {
@ -22,10 +23,15 @@ export default class Game {
        this._playerAmount = playerAmount; //Anzahl der Spieler
        this._rules = rules; //Array mit Regeln für das Spiel

+        this._stack = 0; //Für PlusAmountKarten
+
+        //Für HTML
+        this._style = new Style(this);
+
    }

    //Richtet das Spiel ein
-    initGame(){
+    initGame() {

        //CardPool wird generiert
        this.cardPool = this.generatePool();
@ -36,35 +42,27 @@ export default class Game {
    }

    //Startet das Spiel
-    start(){
-        if(this.currentPlayer !== -1) return;
+    start() {
+        if (this.currentPlayer !== -1) return;

        //Wenn das Spiel noch nicht initialisiert wurde, initialisiere es
-        if (this.cardPool.length === 0 || this.players.length === 0)
-            this.initGame();
+        if (this.cardPool.length === 0 || this.players.length === 0) this.initGame();


        let firstCardIndex = 0;
        let boolFirstSpecial = false;

-        if (this.rules !== null){
-            if('startCards' in this.rules)
-                for (let i = 0; i < this.players.length; i++)
-                    this.players[i].drawCard(this.rules.startCards);
-
-            if('firstPlaySpecial' in this.rules)
-                    boolFirstSpecial = this.rules.firstPlaySpecial;
-
+        if (this.rules !== null) {
+            if ('startCards' in this.rules) for (let i = 0; i < this.players.length; i++) this.players[i].drawCard(this.rules.startCards, false, false);

+            if ('firstPlaySpecial' in this.rules) boolFirstSpecial = this.rules.firstPlaySpecial;


        }

-        if (!boolFirstSpecial){
-            for (let i = 0; i < this.cardPool.length; i++){
-                if (!(this.cardPool[i].name === 'R' || this.cardPool[i].name === 'S'
-                    || this.cardPool[i].name === 'CC' || this.cardPool[i].name === '+2'
-                    || this.cardPool[i].name === '+4')){
+        if (!boolFirstSpecial) {
+            for (let i = 0; i < this.cardPool.length; i++) {
+                if (!(this.cardPool[i].name === 'R' || this.cardPool[i].name === 'S' || this.cardPool[i].name === 'CC' || this.cardPool[i].name === '+2' || this.cardPool[i].name === '+4')) {
                    firstCardIndex = i;
                    break;
                }
@ -73,15 +71,19 @@ export default class Game {

        //Die Erste Karte wird auf den Tisch gelegt
        this.cardOnDeck = this.cardPool[firstCardIndex];
-        this.cardPool.splice(firstCardIndex,1);
+        this.cardPool.splice(firstCardIndex, 1);

        //Karten Funktion der Karte auf dem Deck ausführen
        this.cardOnDeck.putSelf();

+
+        //HTML
+
+        this.style.refreshHtml();
    }

    //Gibt ein Array zurück mit allen Karten, die in einem Uno Spiel sind
-    generatePool(){
+    generatePool() {

        //Array wird erstellt, welches später zurückgegeben wird und alle Karten beinhaltet
        let pool = [];
@ -116,66 +118,118 @@ export default class Game {
        }

        //Mischt das Array
-        pool.sort(()=> Math.random() - 0.5);
+        pool.sort(() => Math.random() - 0.5);

        //Array mit Karten wird zurückgegeben
        return pool;
    }

    //Fügt die Spieler hinzu
-    createPlayers(playerAmount){
+    createPlayers(playerAmount) {

        //Erstelle so viele Spieler, wie bei Erstellung des Spiels übergeben wurden
-        for (let i = 0; i < playerAmount; i++){
+        for (let i = 0; i < playerAmount; i++) {
            this.players.push(new Player("Player" + (i + 1), this));
        }

    }

    //Beendet den Zug des aktuellen Spielers und beginnt den Zug des nächsten Spielers
-    nextTurn(){
+    nextTurn() {
+
+        let delay = 0;

        //Testet, ob Spiel Gewonnen
-        for (let i = 0; i < this.players.length; i++){
-            if(this.players[i].hand.length <= 0){
+        for (let i = 0; i < this.players.length; i++) {
+            if (this.players[i].hand.length <= 0) {

                //Breche den Loop ab
                return;
            }
        }

+
        //Wenn Zug nicht der Erste vom ganzen Spiel
-        if(this.currentPlayer !== -1){
+        if (this.currentPlayer !== -1) {
+
+            if (this.currentPlayerInstanz.mustSayUno === true) {
+                this.currentPlayerInstanz.drawCard(2, false, true);
+                delay += 1500;
+                this.currentPlayerInstanz.mustSayUno = false;
+            }

-        //Aktuellen Spieler kann, darf nicht mehr Spielen
-        this.players[this.currentPlayer].canPlay = false;
-        this.players[this.currentPlayer].turn = false;
+            //Aktuellen Spieler kann, darf nicht mehr Spielen
+            this.players[this.currentPlayer].canPlay = false;
+            this.players[this.currentPlayer].turn = false;

        }

-        //nächster Spieler wird gesetzt
-        this.currentPlayer = this.nextPlayer();
+        this.style.hideUnoButton();
+
+        setTimeout(() => {
+
+
+            //nächster Spieler wird gesetzt
+            this.currentPlayer = this.nextPlayer();
+
+            this.players[this.currentPlayer].turn = true;
+
+            //Aktualisiere das Deck des aktuellen Spielers, welche Karten er legen kann
+            this.refreshCanPutCard();
+
+            //HTML
+            this.style.refreshHtml();
+
+            //PlusAmount
+            let cardName = (this.cardOnDeck.name === "+4" || this.cardOnDeck.name === '+2') ? '+' : null;
+            if (cardName === '+') {
+                for (let i = 0; i < this.currentPlayerInstanz.hand.length; i++) {
+                    if (this.currentPlayerInstanz.hand[i].name === this.cardOnDeck.name) {
+                        return;
+                    }
+                }
+            }
+
+
+            if (this.stack !== 0) {
+                setTimeout(() => {

-        this.players[this.currentPlayer].turn = true;
+                    this.currentPlayerInstanz.drawCard(this.stack, false, true);
+                    this.stack = 0;

-        //Aktualisiere das Deck des aktuellen Spielers, welche Karten er legen kann
-        this.refreshCanPutCard();
+                }, 600);
+
+            }
+
+        }, delay)

    }

    //Testet alle Karten des aktuellen Spielers in seiner Hand, ob er sie legen kann
-    refreshCanPutCard(){
+    refreshCanPutCard() {
        //Deck des aktuellen Spielers
        let currentPlayerCards = this.currentPlayerInstanz.hand;

        //Gehe alle Karten vom Deck durch
-        for(let i = 0; i < currentPlayerCards.length; i++){
+        for (let i = 0; i < currentPlayerCards.length; i++) {
+            if (this.stack !== 0) {
+                if (this.cardOnDeck.name === '+4' || this.cardOnDeck.name === '+2') {
+
+                    for (let j = 0; j < currentPlayerCards.length; j++) {
+                        if (currentPlayerCards[j].name.toString() === this.cardOnDeck.name.toString()) {
+                            this.players[this.currentPlayer].hand[j].canPut = true;
+                            this.players[this.currentPlayer].canPlay = true;
+                        } else this.players[this.currentPlayer].hand[j].canPut = false;
+                    }
+                    break;
+                }
+            }

            //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;
@ -192,70 +246,86 @@ export default class Game {

        }

+        //Uno sagen testen
+
+        if (this.currentPlayerInstanz.hand.length === 2 && this.currentPlayerInstanz.canPlay){
+            this.currentPlayerInstanz.mustSayUno = true;
+            this.style.showUnoButton();
+        }
+
    }

    //Errechne, wer der nächste Spieler ist
-    nextPlayer(){
-        if(this.currentPlayer === -1)
-            return 0;
+    nextPlayer() {
+        if (this.currentPlayer === -1) return 0;

        //Anhand der Spielrichtung errechnen
-        if(this._direction === 1)
-            return (this._currentPlayer === this._players.length - 1) ? 0 : this._currentPlayer + 1; //bei normaler Richtung
-        else
-            return (this._currentPlayer === 0) ? this._players.length - 1 : this._currentPlayer - 1; //bei Invertierter Richtung
+        if (this._direction === 1) return (this._currentPlayer === this._players.length - 1) ? 0 : this._currentPlayer + 1; //bei normaler Richtung
+        else return (this._currentPlayer === 0) ? this._players.length - 1 : this._currentPlayer - 1; //bei Invertierter Richtung

    }

    //Gib den Pool mit allen UnoKarten zurück
-    get cardPool(){
+    get cardPool() {
        return this._cardPool;
    }

-    set cardPool(pool){
+    set cardPool(pool) {
        this._cardPool = pool;
    }

    //Gibt das Array mit allen Spielern des Spiels zurück
-    get players(){
+    get players() {
        return this._players;
    }

    //Gibt die aktuelle Karte auf dem Tisch zurück
-    get cardOnDeck(){
+    get cardOnDeck() {
        return this._cardOnDeck;
    }

    //Setzt die aktuelle Karte auf dem Tisch
-    set cardOnDeck(card){
+    set cardOnDeck(card) {
        this._cardOnDeck = card;
    }

    //Gibt den Index des aktuellen Spielers im players Array zurück
-    get currentPlayer(){
+    get currentPlayer() {
        return this._currentPlayer;
    }

    //Gibt das Objekt des aktuellen Spielers zurück
-    get currentPlayerInstanz(){
+    get currentPlayerInstanz() {
        return this._players[this.currentPlayer];
    }

-    set currentPlayer(player){
+    set currentPlayer(player) {
        this._currentPlayer = player
    }

    //Gibt die aktuelle Ricktung zurück 1 = normal 2 = Invertiert
-    get direction(){
+    get direction() {
        return this._direction;
    }

-    set direction(direction){
+    set direction(direction) {
        this._direction = direction;
    }

-    get rules(){
+    get rules() {
        return this._rules;
    }

+    get style() {
+        return this._style;
+    }
+
+    get stack() {
+        return this._stack;
+    }
+
+    set stack(stack) {
+        this._stack = stack;
+    }
+
 }
--- a/uno/web/Player.js
+++ b/uno/web/Player.js
@ -11,42 +11,71 @@ export default class Player {
        this._turn = false; //Ob Spieler gerade am Zug
        this._hand = []; //Deck des Spielers
        this._canPlay = false //Ob spieler gerade Karte legen kann
+        this._mustSayUno = false;

    }

    //Lässt den Spieler eine Anzahl "amount" an Karten ziehen
-    drawCard(amount){
+    drawCard(amount, nextTurn, anim) {
+        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);
+                return;
+            }
+        }

        //Ziehe so viele Karten, wie amount übergeben wurde
-        for (let i = 0; i < amount; i++){
+        for (let i = 0; i < amount; i++) {
+
+            if (anim) {
+
+                setTimeout(() => {
+                    //Füge die erste Karte aus cardPool der Hand des Spielers hinzu
+                    this.hand.push(this.game.cardPool[0]);
+                    //Lösche die erste Karte aus cardPool
+                    this.game.cardPool.splice(0, 1);
+
+
+                    this.game.style.showPlayerDeck(this, false, true, false);
+                }, 200 + 500 * (i));
+            } else {
+                //Füge die erste Karte aus cardPool der Hand des Spielers hinzu
+                this.hand.push(this.game.cardPool[0]);
+                //Lösche die erste Karte aus cardPool
+                this.game.cardPool.splice(0, 1);
+            }

-            //Füge die erste Karte aus cardPool der Hand des Spielers hinzu
-            this.hand.push(this.game.cardPool[0]);
-            //Lösche die erste Karte aus cardPool
-            this.game.cardPool.splice(0, 1);

        }

-        if(amount === 1)
-            this.game.nextTurn();
+
+        setTimeout(() => {
+            this.game.refreshCanPutCard();
+            this.game.style.showPlayerDeck(this.game.currentPlayerInstanz, true, false, false);
+            if (nextTurn) {
+                this.game.nextTurn();
+            }
+        }, 300 + 500 * amount);
+

    }

    //Lässt den Spieler eine Karte in seiner Hand legen
    //Parameter: Index vom Deck des Spielers, wo die Karte liegt
-    putCard(index){
+    putCard(index) {
        //Karte muss hinterlegt haben, dass sie gelegt werden kann
-        if(!this.turn) return;
-        if(!this.hand[index].canPut) return;
-        if(this.turn === false) return;
+        if (!this.turn) return;
+        if (!this.hand[index].canPut) return;
+        if (this.turn === false) return;


        //Wenn eine Karte auf dem Tisch liegt
-        if(this.game.cardOnDeck != null){
+        if (this.game.cardOnDeck != null) {

            //Wenn eine "NONE" Color Karte gelegt wurde, resette die Farbe auf "NONE"
-            if(this.game.cardOnDeck.name === "CC" || this._game.cardOnDeck.name === "+4")
-                this.game.cardOnDeck.color = CARD_COLORS[0];
+            if (this.game.cardOnDeck.name === "CC" || this._game.cardOnDeck.name === "+4") this.game.cardOnDeck.color = CARD_COLORS[0];

            //Füge die Karte dem Pool wieder hinzu
            this.game.cardPool.push(this._game.cardOnDeck);
@ -63,10 +92,14 @@ export default class Player {

    }

-    selectColor(){
+    sayUno() {
+        this._mustSayUno = false;
+    }
+
+    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
@ -75,31 +108,38 @@ export default class Player {
    }

    //Gibt zurück, ob der Spieler am Zug ist
-    get turn(){
+    get turn() {
        return this._turn;
    }

    //Setzt, dass der Spieler gerade am Zug ist oder nicht
-    set turn(bool){
+    set turn(bool) {
        this._turn = bool;
    }

    //Gibt zurück, ob der Spieler eine Karte legen kann
-    get canPlay(){
+    get canPlay() {
        return this._canPlay;
    }

-    set canPlay(bool){
+    set canPlay(bool) {
        this._canPlay = bool;
    }

    //Gibt das SpielerDeck zurück
-    get hand(){
+    get hand() {
        return this._hand;
    }

-    get game(){
+    get game() {
        return this._game;
    }

+    get mustSayUno() {
+        return this._mustSayUno;
+    }
+
+    set mustSayUno(bool) {
+        this._mustSayUno = bool;
+    }
 }
--- a/uno/web/Style.js
+++ b/uno/web/Style.js
@ -1,3 +1,5 @@
+import {CARD_COLORS} from "./uno.js";
+
 export default class Style {

    constructor(gameInstanz) {
@ -5,14 +7,48 @@ export default class Style {

        this._cardOnDeck = null;

+        this._drawCardRunnig = false;
+
        this._firstDraw = $('#first-draw');

        this._firstPut = $('#first-put');

        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', () => {
-            this.game.currentPlayerInstanz.drawCard(1);
+            if(this.game.currentPlayerInstanz.mustSayUno){
+                this.game.currentPlayerInstanz.mustSayUno = false;
+            }
+            this.game.currentPlayerInstanz.drawCard(1, true, true);
            this.refreshDebug();
        });

@ -23,50 +59,83 @@ 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();
+            }

-            this.game.currentPlayerInstanz.drawCard(1);
-            this.refreshHtml();
+            let playerInstanz = this.game.currentPlayerInstanz;

            this.drawCardAnim(false, true);

+            playerInstanz.drawCard(1, true, true);
+
        });
+
    }

    refreshHtml() {
+        this.refreshCardOnDeck();
+
+        this.showPlayerDeck(this.game.currentPlayerInstanz, true, false, true)
+
+        this.refreshDebug();
+    }
+
+    refreshCardOnDeck() {
        if (this._cardOnDeck !== this.game.cardOnDeck) {
-            console.log(" ewfw")
            this.putCardAnim();
            this._cardOnDeck = this.game.cardOnDeck;
        } else {
            this.firstPut.attr('src', './img/stackCards/' + this.game.cardOnDeck.color + '/' + this.game.cardOnDeck.name + '.png');
            this.firstPutAnim.attr('src', './img/stackCards/' + this.game.cardOnDeck.color + '/' + this.game.cardOnDeck.name + '.png');
        }
-
-
-        this.refreshDebug();
    }

    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);
-                this.refreshHtml();
-            });
-            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');
+    }
+
+    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(() => {
+                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() {
@ -87,7 +156,122 @@ 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("");
+
+        let currentPlayerHand = player.hand;
+
+        let width = window.innerWidth;
+        let height = window.innerHeight;
+
+        let percent = 0;
+        let top = window.innerHeight * 0.68;
+        let cardAmount = currentPlayerHand.length;
+
+        for (let i = 0; i < cardAmount; i++) {
+
+            currentPlayerHand.xPos = 0;
+            currentPlayerHand.yPos = 0;
+
+
+            $('#playerDeck').append('<div id="card' + i + '" class="pictureCard">' + '<img src="./img/cards/' + currentPlayerHand[i].color + '/' + currentPlayerHand[i].name + '.png' + '"></div>');
+
+            currentPlayerHand[i].xPos = (width * (((43 + cardAmount / 2 * 5) - percent)) / 100);
+            currentPlayerHand[i].yPos = top;
+
+            let card = $('#card' + i);
+
+            let put = false;
+
+            if (click) {
+                let yPos = currentPlayerHand[i].yPos;
+                card.on('mouseenter', () => {
+                    if (!put && !anim) card.css('top', yPos - 60 + 'px');
+                })
+                card.on('mouseleave', () => {
+                    if (!put && !anim) card.css('top', yPos);
+                })
+                card.on('click', () => {
+                    if (!this.game.players[this.game.currentPlayer].hand[i].canPut || anim) return;
+                    put = true
+                    let lastPlayer = player;
+                    player.putCard(i);
+                    card.css('top', yPos - height * 0.2);
+                    card.css('opacity', 0);
+
+                    setTimeout(() => {
+                        this.refreshCardOnDeck();
+                    }, 400);
+                })
+            }
+
+            if (anim) {
+                card.css('top', height);
+                setTimeout(() => {
+                    card.css('top', top + 'px')
+                    card.css('left', (width * 45 / 100));
+                    setTimeout(() => {
+                        card.css('left', currentPlayerHand[i].xPos + 'px');
+                        card.css('top', top + 'px')
+                        anim = false;
+                    }, 250);
+                }, 100);
+
+            } else {
+                card.css('left', currentPlayerHand[i].xPos + 'px');
+                card.css('top', top + 'px')
+            }
+
+            if (lastDraw && i === cardAmount - 1) {
+                card.css('opacity', 0);
+                card.css('top', currentPlayerHand[i].yPos - 100);
+                setTimeout(() => {
+                    card.css('left', currentPlayerHand[i].xPos + 'px');
+                    card.css('top', top + 'px')
+                    card.css('opacity', 1);
+                }, 50);
+
+            }
+
+            percent += 5;
+
+        }
+    }
+
    drawCardAnim(enable, playerDraw) {
+        if (this.drawCardRunning) return;
+        this.drawCardRunning = true;

        if (playerDraw) {

@ -96,11 +280,12 @@ export default class Style {
            this.firstDraw.css('top', '60vh');
            this.firstDraw.css('opacity', 0);

-            setTimeout(()=>{
+            setTimeout(() => {
                this.firstDraw.css('transition', '');
                this.firstDraw.css('top', '47vh');
                this.firstDraw.css('min-width', '20vh');
                this.firstDraw.css('opacity', '1');
+                this.drawCardRunning = false;
            }, 500);

        } else {
@ -108,19 +293,12 @@ export default class Style {
                this.firstDraw.css('transition', 'min-width 0.35s, top 0.5s');
                this.firstDraw.css('min-width', '27vh');
                this.firstDraw.css('top', '50vh');
-
-                setTimeout(() => {
-                    this.firstDraw.css('transition', '')
-                }, 500);
            } else {
                this.firstDraw.css('transition', 'min-width 1s, top 0.5s');
                this.firstDraw.css('top', '47vh');
                this.firstDraw.css('min-width', '20vh');
-
-                setTimeout(() => {
-                    this.firstDraw.css('transition', '')
-                }, 1000);
            }
+            this.drawCardRunning = false;
        }

    }
@ -150,4 +328,20 @@ export default class Style {
        return this._firstPutAnim;
    }

+    get drawCardRunning() {
+        return this._drawCardRunnig;
+    }
+
+    set drawCardRunning(bool) {
+        this._drawCardRunnig = bool;
+    }
+
+    get unoHover() {
+        return this._unohover;
+    }
+
+    set unoHover(bool) {
+        this._unohover = bool;
+    }
+
 }
--- a/uno/web/cards/Card.js
+++ b/uno/web/cards/Card.js
@ -3,7 +3,7 @@
 export default class Card {

    //Konstruktor für das Erstellen einer Karte
-    constructor(name, color, gameInstanz, ) {
+    constructor(name, color, gameInstanz) {

        this._game = gameInstanz;
        this._onScreen = false; //Die Karte wird bei Erstellung noch nicht auf dem Bildschirm angezeigt
@ -11,6 +11,9 @@ export default class Card {
        this._name = name; //Name der Karte (z.B. 0,1...,9,+2,+4,CC,R,S)
        this._color = color; //Farbe der Karte (CARD_COLORS)

+        this._xpos = 0;
+        this._ypos = 0;
+
    }

    //Logik beim Legen einer Karte (wird für alle Karten ausgeführt)
@ -56,4 +59,20 @@ export default class Card {
        this._canPut = bool;
    }

+    set xPos(pos){
+        this._xpos = pos;
+    }
+
+    set yPos(pos){
+        this._ypos = pos;
+    }
+
+    get xPos(){
+        return this._xpos;
+    }
+
+    get yPos(){
+        return this._ypos;
+    }
+
 }
--- a/uno/web/cards/special/ChooseColor.js
+++ b/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();
    }

 }
--- a/uno/web/cards/special/PlusAmount.js
+++ b/uno/web/cards/special/PlusAmount.js
@ -18,21 +18,36 @@ 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
-        this.game.players[this.game.nextPlayer()].drawCard(this.plus);
+
+        if (this.rules !== null) {
+            if ('stackCards' in this.game.rules) {
+                if (this.game.rules.stackCards === true) {
+                    this.game.stack = this.game.stack + this.plus;
+                } else
+                    this.game.stack = this.plus;
+            } else
+                this.game.stack = this.plus;
+        } else
+            this.game.stack = this.plus;
+

        if(this.plus === 4){

            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();
+        if(this.plus === 2)
+            super.putSelf();
+
    }

    //Gibt den PlusWert der Karte zurück
--- a/uno/web/cards/special/Skip.js
+++ b/uno/web/cards/special/Skip.js
@ -14,12 +14,13 @@ export default class Skip extends Card {

    //Führt Logik der Karte aus (den nächsten Spieler überspringen)
    putSelf() {
+        //Logik von Card.js ausführen
+        super.putSelf();

        //Der nächste Spieler wird auf currentPlayer gesetzt -> Überspringt diesen Spieler, weil beim nächsten Zug wieder nächster SPieler
        this.game.currentPlayer = this.game.nextPlayer();

-        //Logik von Card.js ausführen
-        super.putSelf();
+
    }

 }
--- a/uno/web/uno.js
+++ b/uno/web/uno.js
@ -1,22 +1,23 @@
 //Legt mögliche Farben fest, "NONE" sind Auswahlkarten
 import Game from "./Game.js";
-import Style from "./Style.js";

 export const CARD_COLORS = ["NONE", "BLUE", "GREEN", "RED", "YELLOW"];

 let rules = {
-    startCards: 5,
+    startCards: 3,
    firstPlaySpecial: true,
+    stackCards: true,
 }

 $(()=>{

-    let game = new Game(2, rules);
-    let style = new Style(game);
+    let game = new Game(4, rules);
    game.start();

-    style.showDebug();
-    style.refreshHtml();
+    $(window).on('resize', function () {
+        game.style.refreshHtml();
+    })
+

 });

--- a/vier_gewinnt/CSS/style.css
+++ b/vier_gewinnt/CSS/style.css
@ -0,0 +1,22 @@
+body{
+    background-color: antiquewhite;
+}
+
+table{
+    background-color: rgb(29, 6, 233);
+    border: 3px solid black;
+    border-radius: 20px;
+    padding: 5px;
+}
+
+td{
+    border: 1px solid black;
+    border-radius: 25px;
+    height: 50px;
+    width: 50px;
+    background-color: white;
+}
+
+td:hover{
+    background-color: rgb(80, 80, 80);
+}
--- a/vier_gewinnt/JS/spielerWechsel.js
+++ b/vier_gewinnt/JS/spielerWechsel.js
@ -0,0 +1,9 @@
+function spielerWechsel() {
+    var aktuellerSpieler = document.getElementById("aktuellerSpieler").innerHTML;
+    if (aktuellerSpieler == 1) {
+        document.getElementById("aktuellerSpieler").innerHTML = 2;
+    }else{
+        document.getElementById("aktuellerSpieler").innerHTML = 1;
+    }
+
+}
--- a/vier_gewinnt/JS/steinSetzen.js
+++ b/vier_gewinnt/JS/steinSetzen.js
@ -0,0 +1,12 @@
+function setzeStein(reihe, spalte) {
+    var aktuellerSpieler = document.getElementById("aktuellerSpieler").innerHTML;
+    var color;
+    if (aktuellerSpieler == 1) {
+        color = "red";
+        
+    } else {
+        color = "green";
+    }
+    document.getElementById(reihe + "/" + spalte).style.backgroundColor= color;
+    spielerWechsel();
+}
--- a/vier_gewinnt/JS/steineInSpalte.js
+++ b/vier_gewinnt/JS/steineInSpalte.js
@ -0,0 +1,20 @@
+function steinInSpalte(spalte) {
+    // Feld mit Steinen in Zeile
+    // O = kein Stein
+    // 1 = gruener Stein
+    // 2 = roter Stein
+    var zeile = [];
+    
+    for (let i = 1; i <= 6; i++) {
+        
+        if (document.getElementById( i +"/"+ spalte).style.backgroundColor == "red") {
+            zeile.push(2);
+        }if (document.getElementById(i + "/"+ spalte).style.backgroundColor == "green") {
+            zeile.push(1);
+        } else {
+            zeile.push(0);
+        }
+    }
+    
+    
+}
--- a/vier_gewinnt/JS/vierGewint.js
+++ b/vier_gewinnt/JS/vierGewint.js
@ -0,0 +1,8 @@
+function neuer_stein_in_spalte(steineInSpalte) {
+    if (steineInSpalte < 6) {
+        return steineInSpalte +1;
+    }else{
+        return "Spalte voll"
+    }
+}
+module.exports = neuer_stein_in_spalte;
--- a/vier_gewinnt/tests/test_vierGewint.test.js
+++ b/vier_gewinnt/tests/test_vierGewint.test.js
@ -1,2 +1,8 @@
-it('Test', function () {
-});
+const neuer_stein_in_spalte = require("../JS/vierGewint");
+
+describe("Test Vier Gewinnt", () => {
+    it("Test ob Stein in Spalte passt", () =>{
+        expect(neuer_stein_in_spalte(5)).toBe(6);
+        expect(neuer_stein_in_spalte(6)).toBe("Spalte voll");
+    })
+})
--- a/vier_gewinnt/vierGewinnt.html
+++ b/vier_gewinnt/vierGewinnt.html
@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./CSS/style.css">
+    <script src="./JS/steinSetzen.js"></script>
+    <script src="./JS/spielerWechsel.js"></script>
+    <script src="./JS/steineInSpalte.js"></script>
+    <title>Vier Gewinnt</title>
+</head>
+<body>
+    <h1>Vier Gewinnt</h1>
+    <p>Vier Gewinnt ist ein Spiel, indem Spieler abwechseld Steine in Felder legen, wer als erstes vier Steine nebeneinader, übereinander oder diagonal hat, hat gewonnen.</p>
+    <p>Spieler an Zug: <p id="aktuellerSpieler">1</p></p>
+
+    <table>
+        <tr>
+            <td id="6/1" onclick="setzeStein(1,6);"></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+        </tr>
+        <tr>
+            <td id="5/1" onclick="setzeStein(1,5);"></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+        </tr>
+        <tr>
+            <td id="4/1" onclick="setzeStein(1,4);"></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+        </tr>
+        <tr>
+            <td id="3/1" onclick="setzeStein(1,3);"></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+        </tr>
+        <tr>
+            <td id="2/1" onclick="setzeStein(1,2);"></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+        </tr>
+        <tr>
+            <td id="1/1" onclick="setzeStein(1,1);"></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            
+        </tr>
+        
+    </table>
+</body>
+</html>