+
+
\ 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.