diff --git a/Spieleverwaltung/css/styles.css b/Spieleverwaltung/css/styles.css new file mode 100644 index 0000000..e69de29 diff --git a/Spieleverwaltung/spieleverwaltung.html b/Spieleverwaltung/spieleverwaltung.html new file mode 100644 index 0000000..ca3e845 --- /dev/null +++ b/Spieleverwaltung/spieleverwaltung.html @@ -0,0 +1,23 @@ + + + + + Spieleverwalltung + + +

Spielesammlung

+

Spiele:

+ Kniffel
+ UNO
+
+ Vier Gewinnt
+ + + + \ No newline at end of file diff --git a/Spieleverwaltung/spieleverwaltung.js b/Spieleverwaltung/spieleverwaltung.js new file mode 100644 index 0000000..e69de29 diff --git a/Team.md b/Team.md index 8c78bba..1309ae0 100644 --- a/Team.md +++ b/Team.md @@ -1,2 +1,3 @@ - Nicolas Fritz, fdai7359 -- Lucas Thenert, fdai7346 \ No newline at end of file +- Lucas Thenert, fdai7346 +- Raphael Elström, fdai7458 \ No newline at end of file diff --git a/kniffel/css/styles.css b/kniffel/css/styles.css index 60f7304..8bb31a9 100644 --- a/kniffel/css/styles.css +++ b/kniffel/css/styles.css @@ -41,4 +41,15 @@ display: inline-flex; padding: 3%; } + + .icon{ + display: flex; + width: 33px; + height: 33px; + } + + .center { + margin: auto; + width: 50%; + } \ No newline at end of file diff --git a/kniffel/img/SymbolAnleitung.jpeg b/kniffel/img/SymbolAnleitung.jpeg new file mode 100644 index 0000000..d9e2ef9 Binary files /dev/null and b/kniffel/img/SymbolAnleitung.jpeg differ diff --git a/kniffel/inc/dreierPasch.js b/kniffel/inc/dreierPasch.js new file mode 100644 index 0000000..a355adf --- /dev/null +++ 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; \ No newline at end of file diff --git a/kniffel/inc/errechneEndergebnisse.js b/kniffel/inc/errechneEndergebnisse.js new file mode 100644 index 0000000..9d52722 --- /dev/null +++ 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 ; + } +} \ No newline at end of file diff --git a/kniffel/inc/fullHouse.js b/kniffel/inc/fullHouse.js new file mode 100644 index 0000000..20bc6a7 --- /dev/null +++ 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; \ No newline at end of file diff --git a/kniffel/inc/großeStraße.js b/kniffel/inc/großeStraße.js new file mode 100644 index 0000000..ccdfa60 --- /dev/null +++ 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(); +} \ No newline at end of file diff --git a/kniffel/inc/helper.js b/kniffel/inc/helper.js index 5c2d58c..fef0798 100644 --- 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(); + } \ No newline at end of file diff --git a/kniffel/inc/kleineStraße.js b/kniffel/inc/kleineStraße.js new file mode 100644 index 0000000..5de7fbc --- /dev/null +++ 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(); +} \ No newline at end of file diff --git a/kniffel/inc/kniffel.js b/kniffel/inc/kniffel.js new file mode 100644 index 0000000..ba85aeb --- /dev/null +++ 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; diff --git a/kniffel/inc/sammleGleicheZahlen.js b/kniffel/inc/sammleGleicheZahlen.js index 153103e..73e8536 100644 --- 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(); } \ No newline at end of file diff --git a/kniffel/inc/viererPasch.js b/kniffel/inc/viererPasch.js new file mode 100644 index 0000000..7af18f7 --- /dev/null +++ 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(); + +} \ No newline at end of file diff --git a/kniffel/inc/wuerfel.js b/kniffel/inc/wuerfel.js index 3351664..eca3d9b 100644 --- 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]; - } - 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]; - } + for(let i = 1; i <= 5; i++){ + + 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'){ diff --git a/kniffel/index.html b/kniffel/index.html index 2a2328f..6f29d9e 100644 --- a/kniffel/index.html +++ b/kniffel/index.html @@ -7,14 +7,23 @@ + + + + + Kniffel
+ + +

Kniffel

Spieler 1 ist an der Reihe

+
@@ -87,100 +96,103 @@ Bonus bei 65 oder mehr plus 35 - - - - + + + + gesamt oberer Teil --> - - - - + + + + Dreierpasch alle Augen Zählen - - - - + + + + Viererpasch alle Augen zählen - - - - + + + + Full House 25 Punkte - - - - + + + + Kleine Straße 30 Punkte - - - - + + + + Große Straße 40 Punkte - - - - + + + + Kniffel 50 Punkte - - - - + + + + Chance alle Augen zählen - - - - + + + + gesamt unterer Teil --> - - - - + + + + gesamt oberer Teil --> - - - - + + + + Endsumme --> - - - - + + + + +
+ +
@@ -219,11 +231,11 @@

erlaubte Würfelversuche:

3

-
0
-
0
-
0
-
0
-
0
+
0
+
0
+
0
+
0
+
0
diff --git a/kniffel/src/Anleitung.pdf b/kniffel/src/Anleitung.pdf new file mode 100644 index 0000000..1bc2b6e Binary files /dev/null and b/kniffel/src/Anleitung.pdf differ diff --git a/kniffel/src/anleitung.html b/kniffel/src/anleitung.html new file mode 100644 index 0000000..939d146 --- /dev/null +++ b/kniffel/src/anleitung.html @@ -0,0 +1,23 @@ + + + + + + + Anleitung + + +
+ +

Kniffel - Anleitung

+
+
+

Quelle: + schmidtspiele.de +

+ +
+ + \ No newline at end of file diff --git a/kniffel/test/test_dreierPasch.test.js b/kniffel/test/test_dreierPasch.test.js new file mode 100644 index 0000000..930c8b5 --- /dev/null +++ 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); + + }); + + +}) diff --git a/kniffel/test/test_fullHouse.test.js b/kniffel/test/test_fullHouse.test.js new file mode 100644 index 0000000..aecaa55 --- /dev/null +++ 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); + + }); + + +}) diff --git a/kniffel/test/test_kniffel.test.js b/kniffel/test/test_kniffel.test.js new file mode 100644 index 0000000..18f527e --- /dev/null +++ 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); + + }); + +}) diff --git a/uno/css/uno.css b/uno/css/uno.css index 75c132b..0d5eb9e 100644 --- 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; } @@ -41,4 +45,96 @@ body #first-put { opacity: 0; -} \ No newline at end of file +} + +.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); +} diff --git a/uno/img/Bg.png b/uno/img/Bg.png new file mode 100644 index 0000000..de39f09 Binary files /dev/null and b/uno/img/Bg.png differ diff --git a/uno/img/cards/BLUE/A.png b/uno/img/cards/BLUE/S.png similarity index 100% rename from uno/img/cards/BLUE/A.png rename to uno/img/cards/BLUE/S.png diff --git a/uno/img/cards/GREEN/A.png b/uno/img/cards/GREEN/S.png similarity index 100% rename from uno/img/cards/GREEN/A.png rename to uno/img/cards/GREEN/S.png diff --git a/uno/img/cards/RED/A.png b/uno/img/cards/RED/S.png similarity index 100% rename from uno/img/cards/RED/A.png rename to uno/img/cards/RED/S.png diff --git a/uno/img/cards/YELLOW/A.png b/uno/img/cards/YELLOW/S.png similarity index 100% rename from uno/img/cards/YELLOW/A.png rename to uno/img/cards/YELLOW/S.png diff --git a/uno/img/sayUno.png b/uno/img/sayUno.png new file mode 100644 index 0000000..1bb1686 Binary files /dev/null and b/uno/img/sayUno.png differ diff --git a/uno/img/sayUnoGlow.png b/uno/img/sayUnoGlow.png new file mode 100644 index 0000000..3abb68d Binary files /dev/null and b/uno/img/sayUnoGlow.png differ diff --git a/uno/img/selectColor/BLUE.png b/uno/img/selectColor/BLUE.png new file mode 100644 index 0000000..b90d741 Binary files /dev/null and b/uno/img/selectColor/BLUE.png differ diff --git a/uno/img/selectColor/GREEN.png b/uno/img/selectColor/GREEN.png new file mode 100644 index 0000000..a2239e1 Binary files /dev/null and b/uno/img/selectColor/GREEN.png differ diff --git a/uno/img/selectColor/RED.png b/uno/img/selectColor/RED.png new file mode 100644 index 0000000..1129e3e Binary files /dev/null and b/uno/img/selectColor/RED.png differ diff --git a/uno/img/selectColor/YELLOW.png b/uno/img/selectColor/YELLOW.png new file mode 100644 index 0000000..fccc81c Binary files /dev/null and b/uno/img/selectColor/YELLOW.png differ diff --git a/uno/index.html b/uno/index.html index b6cf432..13a756a 100644 --- a/uno/index.html +++ b/uno/index.html @@ -11,12 +11,20 @@ +
+ + + + + + +
+

-
@@ -34,10 +42,15 @@
-
+
+ +
+
+ +
diff --git a/uno/node/js/Game.js b/uno/node/js/Game.js index dfac109..e48dd0f 100644 --- 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(){ diff --git a/uno/node/js/cards/special/PlusAmount.js b/uno/node/js/cards/special/PlusAmount.js index c85cfcc..e13455e 100644 --- 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){ diff --git a/uno/web/Game.js b/uno/web/Game.js index ac30fc9..12d0958 100644 --- 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; + } + } \ No newline at end of file diff --git a/uno/web/Player.js b/uno/web/Player.js index 102e0e2..d05badd 100644 --- 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; + } } \ No newline at end of file diff --git a/uno/web/Style.js b/uno/web/Style.js index 868db49..c01cdaa 100644 --- 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' + 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:
"); + 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 + "
"); } - $('#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('
' + '
'); + + 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; + } + } \ No newline at end of file diff --git a/uno/web/cards/Card.js b/uno/web/cards/Card.js index 5a936c5..5cb7972 100644 --- 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; + } + } \ No newline at end of file diff --git a/uno/web/cards/special/ChooseColor.js b/uno/web/cards/special/ChooseColor.js index ce2711b..2db18fb 100644 --- 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(); } } \ No newline at end of file diff --git a/uno/web/cards/special/PlusAmount.js b/uno/web/cards/special/PlusAmount.js index b4d09c0..2b81b79 100644 --- 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 diff --git a/uno/web/cards/special/Skip.js b/uno/web/cards/special/Skip.js index baa1202..4ffa43b 100644 --- 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(); + } } \ No newline at end of file diff --git a/uno/web/uno.js b/uno/web/uno.js index 7062b78..cb627f5 100644 --- 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(); + }) + }); diff --git a/vier_gewinnt/CSS/style.css b/vier_gewinnt/CSS/style.css index e69de29..a9b743d 100644 --- 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); +} \ No newline at end of file diff --git a/vier_gewinnt/JS/spielerWechsel.js b/vier_gewinnt/JS/spielerWechsel.js new file mode 100644 index 0000000..6777d2b --- /dev/null +++ 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; + } + +} \ No newline at end of file diff --git a/vier_gewinnt/JS/steinSetzen.js b/vier_gewinnt/JS/steinSetzen.js new file mode 100644 index 0000000..1f7de7f --- /dev/null +++ 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(); +} \ No newline at end of file diff --git a/vier_gewinnt/JS/steineInSpalte.js b/vier_gewinnt/JS/steineInSpalte.js new file mode 100644 index 0000000..764ea8c --- /dev/null +++ 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); + } + } + + +} \ No newline at end of file diff --git a/vier_gewinnt/JS/vierGewint.js b/vier_gewinnt/JS/vierGewint.js index e69de29..0546c6f 100644 --- 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; \ No newline at end of file diff --git a/vier_gewinnt/tests/test_vierGewint.test.js b/vier_gewinnt/tests/test_vierGewint.test.js index cecd336..efc6144 100644 --- a/vier_gewinnt/tests/test_vierGewint.test.js +++ b/vier_gewinnt/tests/test_vierGewint.test.js @@ -1,2 +1,8 @@ -it('Test', function () { -}); \ No newline at end of file +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"); + }) +}) \ No newline at end of file diff --git a/vier_gewinnt/vierGewinnt.html b/vier_gewinnt/vierGewinnt.html index e69de29..b22e7d0 100644 --- a/vier_gewinnt/vierGewinnt.html +++ b/vier_gewinnt/vierGewinnt.html @@ -0,0 +1,77 @@ + + + + + + + + + + + Vier Gewinnt + + +

Vier Gewinnt

+

Vier Gewinnt ist ein Spiel, indem Spieler abwechseld Steine in Felder legen, wer als erstes vier Steine nebeneinader, übereinander oder diagonal hat, hat gewonnen.

+

Spieler an Zug:

1

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +