@@ -43,7 +51,6 @@
-
diff --git a/uno/node/js/Game.js b/uno/node/js/Game.js
index 45136fa..e48dd0f 100644
--- a/uno/node/js/Game.js
+++ b/uno/node/js/Game.js
@@ -81,11 +81,6 @@ class Game {
}
- //
- gameLoop(){
-
- }
-
//Gibt ein Array zurück mit allen Karten, die in einem Uno Spiel sind
generatePool(){
diff --git a/uno/web/Game.js b/uno/web/Game.js
index 3a0bc02..12d0958 100644
--- a/uno/web/Game.js
+++ b/uno/web/Game.js
@@ -136,6 +136,7 @@ export default class Game {
//Beendet den Zug des aktuellen Spielers und beginnt den Zug des nächsten Spielers
nextTurn() {
+
let delay = 0;
//Testet, ob Spiel Gewonnen
@@ -162,6 +163,9 @@ export default class Game {
this.players[this.currentPlayer].turn = false;
}
+
+ this.style.hideUnoButton();
+
setTimeout(() => {
@@ -222,7 +226,10 @@ export default class Game {
}
//Wenn Farbe oder Zahl gleich oder eine Karte, die keine Farbe hat
- if (this.cardOnDeck.name.toString() === currentPlayerCards[i].name.toString() || this.cardOnDeck.color === currentPlayerCards[i].color || currentPlayerCards[i].color === CARD_COLORS[0] || this.cardOnDeck.color === CARD_COLORS[0]) {
+ if (this.cardOnDeck.name.toString() === currentPlayerCards[i].name.toString()
+ || this.cardOnDeck.color === currentPlayerCards[i].color
+ || currentPlayerCards[i].color === CARD_COLORS[0]
+ || this.cardOnDeck.color === CARD_COLORS[0]) {
//Aktualisiere den Wert der Karte, sodass sie gelegt werden kann
this.players[this.currentPlayer].hand[i].canPut = true;
@@ -241,7 +248,10 @@ export default class Game {
//Uno sagen testen
- if (this.currentPlayerInstanz.hand.length <= 2 && this.currentPlayerInstanz.canPlay) this.currentPlayerInstanz.mustSayUno = true;
+ if (this.currentPlayerInstanz.hand.length === 2 && this.currentPlayerInstanz.canPlay){
+ this.currentPlayerInstanz.mustSayUno = true;
+ this.style.showUnoButton();
+ }
}
diff --git a/uno/web/Player.js b/uno/web/Player.js
index fbf402f..d05badd 100644
--- a/uno/web/Player.js
+++ b/uno/web/Player.js
@@ -17,15 +17,12 @@ export default class Player {
//Lässt den Spieler eine Anzahl "amount" an Karten ziehen
drawCard(amount, nextTurn, anim) {
- if(this.game.stack !== 0){
- if (!this.game.currentPlayerInstanz.mustSayUno){
- 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;
+ 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;
}
}
@@ -54,16 +51,13 @@ export default class Player {
}
-
- setTimeout(() => {
- this.game.refreshCanPutCard();
- this.game.style.showPlayerDeck(this.game.currentPlayerInstanz, true, false, false);
- if (nextTurn) {
+ setTimeout(() => {
+ this.game.refreshCanPutCard();
+ this.game.style.showPlayerDeck(this.game.currentPlayerInstanz, true, false, false);
+ if (nextTurn) {
this.game.nextTurn();
- }
- }, 300 + 500 * amount);
-
-
+ }
+ }, 300 + 500 * amount);
}
@@ -102,10 +96,10 @@ export default class Player {
this._mustSayUno = false;
}
- selectColor() {
+ selectColor(CARD_COLOR) {
//Todo: Spieler Möglichkeit geben Farbe zu wählen, nicht random
- return CARD_COLORS[Math.floor(Math.random() * 4) + 1];
+ return CARD_COLOR;
}
//Gibt den Namen eines Spielers zurück
diff --git a/uno/web/Style.js b/uno/web/Style.js
index 1dfd3a3..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) {
@@ -13,7 +15,39 @@ export default class Style {
this._firstPutAnim = $('#first-put-anim');
+ this._unohover = false;
+ this._unoClicked = false;
+
+ $('#sayUno').on('mouseenter', () => {
+ if (this._unoClicked) return;
+ this.unoHover = true;
+ $('.uno').css('width', '28vw');
+ $('#sayUno-glow').css('opacity', 1);
+ })
+
+ $('#sayUno').on('mouseleave', () => {
+ if (this._unoClicked) return;
+ this.unoHover = false;
+ $('.uno').css('width', '25vw');
+ $('#sayUno-glow').css('opacity', 0.3);
+ this.startUnoLoop();
+ })
+
+ $('#sayUno').on('click', () => {
+ this.unoHover = true;
+ this._unoClicked = true;
+ $('.uno').css('transition', 'width ease-out 0.2s, filter 0.1s');
+ $('.uno').css('width', '22vw');
+ $('.uno').css('filter', 'grayscale(80%)');
+ $('#sayUno-glow').css('opacity', 1);
+ this.game.currentPlayerInstanz.sayUno();
+ this.game.currentPlayerInstanz.mustSayUno = false;
+ })
+
$('#drawCard').on('click', () => {
+ if(this.game.currentPlayerInstanz.mustSayUno){
+ this.game.currentPlayerInstanz.mustSayUno = false;
+ }
this.game.currentPlayerInstanz.drawCard(1, true, true);
this.refreshDebug();
});
@@ -25,6 +59,10 @@ export default class Style {
this.drawCardAnim(false, false);
});
this.firstDraw.on('click', () => {
+ if(this.game.currentPlayerInstanz.mustSayUno){
+ this.game.currentPlayerInstanz.mustSayUno = false;
+ this.game.style.hideUnoButton();
+ }
let playerInstanz = this.game.currentPlayerInstanz;
@@ -34,8 +72,6 @@ export default class Style {
});
-
- this.startUnoLoop();
}
refreshHtml() {
@@ -46,9 +82,8 @@ export default class Style {
this.refreshDebug();
}
- refreshCardOnDeck(){
+ refreshCardOnDeck() {
if (this._cardOnDeck !== this.game.cardOnDeck) {
- console.log(" ewfw")
this.putCardAnim();
this._cardOnDeck = this.game.cardOnDeck;
} else {
@@ -60,39 +95,49 @@ export default class Style {
refreshDebug() {
$('#drawCard').css('background-color', 'white');
- $("#player").html("Spieler: " + this.game.currentPlayerInstanz.name);
- $("#playerCards").html("Karten: ");
- for (let i = 0; i < this.game.currentPlayerInstanz.hand.length; i++) {
- $('#playerCards').append(this.game.currentPlayerInstanz.hand[i].name + " - " + this.game.currentPlayerInstanz.hand[i].color);
- $('#playerCards').append('
| ');
- $('#button' + i).on('click', () => {
- this.game.currentPlayerInstanz.putCard(i);
- setTimeout(() => {
- this.showPlayerDeck(this.game.currentPlayerInstanz, false, true, false);
- }, 100);
- });
- if (this.game.currentPlayerInstanz.hand[i].canPut) $('#button' + i).css('background-color', 'green');
+ $("#player").html("Aktueller Spieler: " + this.game.currentPlayerInstanz.name + " | " + this.game.currentPlayerInstanz.hand.length);
+ $("#playerCards").html("Weitere Spieler:
");
+ 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');
}
- startUnoLoop(){
- setTimeout(()=>{
+ showUnoButton(){
+ $('.uno').css('transition', 'width ease-in-out 0.5s');
+ $('#sayUno-glow').css('transition', 'width ease-in-out 0.5s, opacity 0.5s');
+ $('.uno').css('filter', 'grayscale(0%)');
+ $('#sayUno').css('opacity', 1);
+ this.unoHover = false;
+ this._unoClicked = false;
+ this.startUnoLoop();
+ }
+
+ hideUnoButton(){
+ $('#sayUno').css('opacity', 0);
+ }
+
+ startUnoLoop() {
+ if (!this.unoHover && !this._unoClicked) setTimeout(() => {
$('.uno').css('width', '28vw');
$('#sayUno-glow').css('opacity', 0.8);
- setTimeout(()=>{
- console.log("bibi")
- $('.uno').css('width', '25vw');
- $('#sayUno-glow').css('opacity', 0.3);
- this.startUnoLoop();
+ setTimeout(() => {
+ if (!this.unoHover && !this._unoClicked) {
+ $('.uno').css('width', '25vw');
+ $('#sayUno-glow').css('opacity', 0.3);
+ this.startUnoLoop();
+ }
}, 500);
}, 500);
}
+ stopUnoLoop(){
+ this._unoClicked = true;
+ this.unoHover = true;
+ }
+
putCardAnim() {
this.firstPutAnim.attr('src', './img/stackCards/' + this.game.cardOnDeck.color + '/' + this.game.cardOnDeck.name + '.png');
@@ -111,6 +156,37 @@ export default class Style {
}
+ showSelectColor(card){
+
+ $('.selectColor').css('opacity', 1);
+
+ $('#cc-green').on('click', ()=>{
+ card.color = CARD_COLORS[2];
+ card.putSelf();
+ this.hideSelectColor();
+ })
+ $('#cc-blue').on('click', ()=>{
+ card.color = CARD_COLORS[1];
+ card.putSelf();
+ this.hideSelectColor();
+ })
+ $('#cc-red').on('click', ()=>{
+ card.color = CARD_COLORS[3];
+ card.putSelf();
+ this.hideSelectColor();
+ })
+ $('#cc-yellow').on('click', ()=>{
+ card.color = CARD_COLORS[4];
+ card.putSelf();
+ this.hideSelectColor();
+ })
+
+ }
+
+ hideSelectColor(){
+ $('.selectColor').css('opacity', 0);
+ }
+
showPlayerDeck(player, click, lastDraw, anim) {
$('#playerDeck').html("");
@@ -134,8 +210,6 @@ export default class Style {
currentPlayerHand[i].xPos = (width * (((43 + cardAmount / 2 * 5) - percent)) / 100);
currentPlayerHand[i].yPos = top;
- console.log(i + ' ' + currentPlayerHand[i].yPos);
-
let card = $('#card' + i);
let put = false;
@@ -162,31 +236,31 @@ export default class Style {
})
}
- if(anim){
+ if (anim) {
card.css('top', height);
- setTimeout(()=>{
+ setTimeout(() => {
card.css('top', top + 'px')
card.css('left', (width * 45 / 100));
- setTimeout(()=>{
+ setTimeout(() => {
card.css('left', currentPlayerHand[i].xPos + 'px');
card.css('top', top + 'px')
anim = false;
}, 250);
- },100);
+ }, 100);
} else {
card.css('left', currentPlayerHand[i].xPos + 'px');
card.css('top', top + 'px')
}
- if(lastDraw && i === cardAmount - 1){
+ if (lastDraw && i === cardAmount - 1) {
card.css('opacity', 0);
card.css('top', currentPlayerHand[i].yPos - 100);
- setTimeout(()=>{
- card.css('left', currentPlayerHand[i].xPos + 'px');
- card.css('top', top + 'px')
- card.css('opacity', 1);
- },50);
+ setTimeout(() => {
+ card.css('left', currentPlayerHand[i].xPos + 'px');
+ card.css('top', top + 'px')
+ card.css('opacity', 1);
+ }, 50);
}
@@ -262,4 +336,12 @@ export default class Style {
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/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 d432dea..2b81b79 100644
--- a/uno/web/cards/special/PlusAmount.js
+++ b/uno/web/cards/special/PlusAmount.js
@@ -18,8 +18,11 @@ export default class PlusAmount extends Card {
//Führt eigene Logik aus (+Amount Karten für den nächsten Spieler)
putSelf() {
+ if (this.color !== CARD_COLORS[0] && this.plus === 4){
+ super.putSelf();
+ return;
+ }
- //Todo: Karten Stapeln Regel
//lässt den nächsten Spieler den PlusAmount der Karte ziehen
if (this.rules !== null) {
@@ -39,11 +42,12 @@ export default class PlusAmount extends Card {
if(this.game.currentPlayer === -1)
this.color = CARD_COLORS[Math.floor(Math.random() * 4) + 1];
else
- this.color = this.game.players[this.game.currentPlayer].selectColor();
+ this.game.style.showSelectColor(this);
}
- //Logik von Card.js ausführen
- super.putSelf();
+ if(this.plus === 2)
+ super.putSelf();
+
}
//Gibt den PlusWert der Karte zurück
+ 
+ 
+ 
+
+