Raphael Elström 2 years ago
parent
commit
629259d7e5
  1. 31
      kniffel/inc/errechneEndergebnisse.js
  2. 82
      kniffel/inc/helper.js
  3. 46
      kniffel/inc/viererPasch.js
  4. 70
      kniffel/index.html
  5. 55
      uno/css/uno.css
  6. BIN
      uno/img/Bg.png
  7. BIN
      uno/img/selectColor/BLUE.png
  8. BIN
      uno/img/selectColor/GREEN.png
  9. BIN
      uno/img/selectColor/RED.png
  10. BIN
      uno/img/selectColor/YELLOW.png
  11. 11
      uno/index.html
  12. 5
      uno/node/js/Game.js
  13. 14
      uno/web/Game.js
  14. 34
      uno/web/Player.js
  15. 158
      uno/web/Style.js
  16. 10
      uno/web/cards/special/ChooseColor.js
  17. 12
      uno/web/cards/special/PlusAmount.js

31
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 ;
}
}

82
kniffel/inc/helper.js

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

46
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();
}

70
kniffel/index.html

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

55
uno/css/uno.css

@ -2,11 +2,15 @@
*{ *{
font-family: 'Cabin', sans-serif; font-family: 'Cabin', sans-serif;
font-size: large;
color: white;
} }
body body
{ {
overflow: hidden; overflow: hidden;
background-image: url('../img/Bg.png');
background-size: cover;
} }
@ -72,6 +76,7 @@ body
bottom: 0vh; bottom: 0vh;
left: 3vh; left: 3vh;
width: 100%; width: 100%;
opacity: 0;
} }
.uno{ .uno{
position: absolute; position: absolute;
@ -84,4 +89,52 @@ body
#sayUno-glow{ #sayUno-glow{
opacity: 0.3; opacity: 0.3;
transition: width ease-in-out 0.5s, opacity 0.5s; 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);
}

BIN
uno/img/Bg.png

After

Width: 1920  |  Height: 1080  |  Size: 280 KiB

BIN
uno/img/selectColor/BLUE.png

After

Width: 318  |  Height: 319  |  Size: 16 KiB

BIN
uno/img/selectColor/GREEN.png

After

Width: 318  |  Height: 319  |  Size: 15 KiB

BIN
uno/img/selectColor/RED.png

After

Width: 318  |  Height: 319  |  Size: 16 KiB

BIN
uno/img/selectColor/YELLOW.png

After

Width: 318  |  Height: 319  |  Size: 13 KiB

11
uno/index.html

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

5
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 //Gibt ein Array zurück mit allen Karten, die in einem Uno Spiel sind
generatePool(){ generatePool(){

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

34
uno/web/Player.js

@ -17,15 +17,12 @@ export default class Player {
//Lässt den Spieler eine Anzahl "amount" an Karten ziehen //Lässt den Spieler eine Anzahl "amount" an Karten ziehen
drawCard(amount, nextTurn, anim) { 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(); this.game.nextTurn();
}
}, 300 + 500 * amount);
}
}, 300 + 500 * amount);
} }
@ -102,10 +96,10 @@ export default class Player {
this._mustSayUno = false; this._mustSayUno = false;
} }
selectColor() {
selectColor(CARD_COLOR) {
//Todo: Spieler Möglichkeit geben Farbe zu wählen, nicht random //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 //Gibt den Namen eines Spielers zurück

158
uno/web/Style.js

@ -1,3 +1,5 @@
import {CARD_COLORS} from "./uno.js";
export default class Style { export default class Style {
constructor(gameInstanz) { constructor(gameInstanz) {
@ -13,7 +15,39 @@ export default class Style {
this._firstPutAnim = $('#first-put-anim'); 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', () => { $('#drawCard').on('click', () => {
if(this.game.currentPlayerInstanz.mustSayUno){
this.game.currentPlayerInstanz.mustSayUno = false;
}
this.game.currentPlayerInstanz.drawCard(1, true, true); this.game.currentPlayerInstanz.drawCard(1, true, true);
this.refreshDebug(); this.refreshDebug();
}); });
@ -25,6 +59,10 @@ export default class Style {
this.drawCardAnim(false, false); this.drawCardAnim(false, false);
}); });
this.firstDraw.on('click', () => { this.firstDraw.on('click', () => {
if(this.game.currentPlayerInstanz.mustSayUno){
this.game.currentPlayerInstanz.mustSayUno = false;
this.game.style.hideUnoButton();
}
let playerInstanz = this.game.currentPlayerInstanz; let playerInstanz = this.game.currentPlayerInstanz;
@ -34,8 +72,6 @@ export default class Style {
}); });
this.startUnoLoop();
} }
refreshHtml() { refreshHtml() {
@ -46,9 +82,8 @@ export default class Style {
this.refreshDebug(); this.refreshDebug();
} }
refreshCardOnDeck(){
refreshCardOnDeck() {
if (this._cardOnDeck !== this.game.cardOnDeck) { if (this._cardOnDeck !== this.game.cardOnDeck) {
console.log(" ewfw")
this.putCardAnim(); this.putCardAnim();
this._cardOnDeck = this.game.cardOnDeck; this._cardOnDeck = this.game.cardOnDeck;
} else { } else {
@ -60,39 +95,49 @@ export default class Style {
refreshDebug() { refreshDebug() {
$('#drawCard').css('background-color', 'white'); $('#drawCard').css('background-color', 'white');
$("#player").html("Spieler: " + this.game.currentPlayerInstanz.name);
$("#playerCards").html("Karten: ");
for (let i = 0; i < this.game.currentPlayerInstanz.hand.length; i++) {
$('#playerCards').append(this.game.currentPlayerInstanz.hand[i].name + " - " + this.game.currentPlayerInstanz.hand[i].color);
$('#playerCards').append('<button id="button' + i + '">+</button> | ');
$('#button' + i).on('click', () => {
this.game.currentPlayerInstanz.putCard(i);
setTimeout(() => {
this.showPlayerDeck(this.game.currentPlayerInstanz, false, true, false);
}, 100);
});
if (this.game.currentPlayerInstanz.hand[i].canPut) $('#button' + i).css('background-color', 'green');
$("#player").html("Aktueller Spieler: " + this.game.currentPlayerInstanz.name + " | " + this.game.currentPlayerInstanz.hand.length);
$("#playerCards").html("Weitere Spieler: <br>");
for (let i = 0; i < this.game.players.length; i++) {
if(this.game.players[i] === this.game.currentPlayerInstanz) continue;
$('#playerCards').append("" + this.game.players[i].name + " | " + this.game.players[i].hand.length + "<br>");
} }
$('#playerCards').append("" + this.game.currentPlayerInstanz.hand.length)
$("#cardOnDeck").html("Karte auf dem Tisch: " + this.game.cardOnDeck.name + " - " + this.game.cardOnDeck.color);
$("#playerInGame").html("Spieler im Spiel: " + this.game.players.length); $("#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'); $('.uno').css('width', '28vw');
$('#sayUno-glow').css('opacity', 0.8); $('#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);
}, 500); }, 500);
} }
stopUnoLoop(){
this._unoClicked = true;
this.unoHover = true;
}
putCardAnim() { putCardAnim() {
this.firstPutAnim.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');
@ -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) { showPlayerDeck(player, click, lastDraw, anim) {
$('#playerDeck').html(""); $('#playerDeck').html("");
@ -134,8 +210,6 @@ export default class Style {
currentPlayerHand[i].xPos = (width * (((43 + cardAmount / 2 * 5) - percent)) / 100); currentPlayerHand[i].xPos = (width * (((43 + cardAmount / 2 * 5) - percent)) / 100);
currentPlayerHand[i].yPos = top; currentPlayerHand[i].yPos = top;
console.log(i + ' ' + currentPlayerHand[i].yPos);
let card = $('#card' + i); let card = $('#card' + i);
let put = false; let put = false;
@ -162,31 +236,31 @@ export default class Style {
}) })
} }
if(anim){
if (anim) {
card.css('top', height); card.css('top', height);
setTimeout(()=>{
setTimeout(() => {
card.css('top', top + 'px') card.css('top', top + 'px')
card.css('left', (width * 45 / 100)); card.css('left', (width * 45 / 100));
setTimeout(()=>{
setTimeout(() => {
card.css('left', currentPlayerHand[i].xPos + 'px'); card.css('left', currentPlayerHand[i].xPos + 'px');
card.css('top', top + 'px') card.css('top', top + 'px')
anim = false; anim = false;
}, 250); }, 250);
},100);
}, 100);
} else { } else {
card.css('left', currentPlayerHand[i].xPos + 'px'); card.css('left', currentPlayerHand[i].xPos + 'px');
card.css('top', top + 'px') card.css('top', top + 'px')
} }
if(lastDraw && i === cardAmount - 1){
if (lastDraw && i === cardAmount - 1) {
card.css('opacity', 0); card.css('opacity', 0);
card.css('top', currentPlayerHand[i].yPos - 100); 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; this._drawCardRunnig = bool;
} }
get unoHover() {
return this._unohover;
}
set unoHover(bool) {
this._unohover = bool;
}
} }

10
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) //Führt eigene Logik aus (Wählt farbe aus)
putSelf() { putSelf() {
if (this.color !== CARD_COLORS[0]){
super.putSelf();
return;
}
if(this.game.currentPlayer === -1) { if(this.game.currentPlayer === -1) {
//Setzt die Farbe der Karte auf eine Random Farbe //Setzt die Farbe der Karte auf eine Random Farbe
this.color = CARD_COLORS[Math.floor(Math.random() * 4) + 1]; this.color = CARD_COLORS[Math.floor(Math.random() * 4) + 1];
this.putSelf();
} }
else{ else{
this.game.style.showSelectColor(this);
//lässt den Spieler eine Farbe wählen //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();
} }
} }

12
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) //Führt eigene Logik aus (+Amount Karten für den nächsten Spieler)
putSelf() { 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 //lässt den nächsten Spieler den PlusAmount der Karte ziehen
if (this.rules !== null) { if (this.rules !== null) {
@ -39,11 +42,12 @@ export default class PlusAmount extends Card {
if(this.game.currentPlayer === -1) if(this.game.currentPlayer === -1)
this.color = CARD_COLORS[Math.floor(Math.random() * 4) + 1]; this.color = CARD_COLORS[Math.floor(Math.random() * 4) + 1];
else 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 //Gibt den PlusWert der Karte zurück

Loading…
Cancel
Save