Browse Source

KartenDeck anzeigen

main
Nicolas Fritz 2 years ago
parent
commit
c590a07b66
  1. 24
      uno/css/uno.css
  2. 0
      uno/img/cards/BLUE/S.png
  3. 0
      uno/img/cards/GREEN/S.png
  4. 0
      uno/img/cards/RED/S.png
  5. 0
      uno/img/cards/YELLOW/S.png
  6. 2
      uno/index.html
  7. 82
      uno/web/Style.js
  8. 21
      uno/web/cards/Card.js
  9. 2
      uno/web/uno.js

24
uno/css/uno.css

@ -42,3 +42,27 @@ body
{
opacity: 0;
}
.playerDeck{
display: flex;
justify-content: center;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 30%;
}
.pictureCard
{
position: absolute;
width: 8vw;
box-shadow: 3px 3px rgba(0, 0, 0, 0.2);
background-color: rgb(0, 0, 0);
border: 0.2vw solid black;
border-radius: 1.5vw;
transition: top 0.5s, width 0.5s, transform 0.5s, left 0.5s, opacity 0.5s;
}
.pictureCard img{
width: 100%;
}

0
uno/img/cards/BLUE/A.png → uno/img/cards/BLUE/S.png

Before

Width: 240  |  Height: 360  |  Size: 15 KiB

After

Width: 240  |  Height: 360  |  Size: 15 KiB

0
uno/img/cards/GREEN/A.png → uno/img/cards/GREEN/S.png

Before

Width: 240  |  Height: 360  |  Size: 17 KiB

After

Width: 240  |  Height: 360  |  Size: 17 KiB

0
uno/img/cards/RED/A.png → uno/img/cards/RED/S.png

Before

Width: 240  |  Height: 360  |  Size: 14 KiB

After

Width: 240  |  Height: 360  |  Size: 14 KiB

0
uno/img/cards/YELLOW/A.png → uno/img/cards/YELLOW/S.png

Before

Width: 240  |  Height: 360  |  Size: 14 KiB

After

Width: 240  |  Height: 360  |  Size: 14 KiB

2
uno/index.html

@ -34,7 +34,7 @@
</div>
<div>
<div id="playerDeck">

82
uno/web/Style.js

@ -27,10 +27,11 @@ export default class Style {
this.firstDraw.on('click', () => {
this.game.currentPlayerInstanz.drawCard(1);
this.refreshHtml();
this.drawCardAnim(false, true);
this.refreshHtml();
});
}
@ -44,6 +45,7 @@ export default class Style {
this.firstPutAnim.attr('src', './img/stackCards/' + this.game.cardOnDeck.color + '/' + this.game.cardOnDeck.name + '.png');
}
this.showPlayerDeck(this.game.currentPlayerInstanz, true);
this.refreshDebug();
}
@ -58,17 +60,17 @@ export default class Style {
$('#playerCards').append('<button id="button' + i + '">+</button> | ');
$('#button' + i).on('click', () => {
this.game.currentPlayerInstanz.putCard(i);
this.refreshHtml();
setTimeout(() => {
this.refreshHtml();
}, 100);
});
if (this.game.currentPlayerInstanz.hand[i].canPut)
$('#button' + i).css('background-color', 'green');
if (this.game.currentPlayerInstanz.hand[i].canPut) $('#button' + i).css('background-color', 'green');
}
$('#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');
if (!this.game.currentPlayerInstanz.canPlay) $('#drawCard').css('background-color', 'red');
}
putCardAnim() {
@ -89,8 +91,68 @@ export default class Style {
}
showPlayerDeck(player, click) {
console.log("anzeigen")
$('#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++) {
console.log(this.game.currentPlayer);
currentPlayerHand.xPos = 0;
currentPlayerHand.yPos = 0;
$('#playerDeck').append('<div id="card' + i + '" class="pictureCard">' + '<img src="./img/cards/' + currentPlayerHand[i].color + '/' + currentPlayerHand[i].name + '.png' + '"></div>');
currentPlayerHand[i].xPos = (width * (((43 + cardAmount / 2 * 5) - percent)) / 100);
currentPlayerHand[i].yPos = top;
console.log(i + ' ' + currentPlayerHand[i].yPos);
let card = $('#card' + i);
let put = false;
if (click) {
let yPos = currentPlayerHand[i].yPos;
card.on('mouseenter', () => {
if (!put) card.css('top', yPos - 60);
})
card.on('mouseleave', () => {
if (!put) card.css('top', yPos);
})
card.on('click', () => {
if (!this.game.players[this.game.currentPlayer].hand[i].canPut) return;
put = true
let lastPlayer = player;
player.putCard(i);
card.css('top', yPos - height * 0.2);
card.css('opacity', 0);
setTimeout(() => {
this.refreshHtml();
}, 400);
})
}
card.css('left', currentPlayerHand[i].xPos + 'px');
card.css('top', top + 'px')
$('.pictureCard')
percent += 5;
}
}
drawCardAnim(enable, playerDraw) {
if(this.drawCardRunning) return;
if (this.drawCardRunning) return;
this.drawCardRunning = true;
if (playerDraw) {
@ -100,7 +162,7 @@ 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');
@ -148,11 +210,11 @@ export default class Style {
return this._firstPutAnim;
}
get drawCardRunning(){
get drawCardRunning() {
return this._drawCardRunnig;
}
set drawCardRunning(bool){
set drawCardRunning(bool) {
this._drawCardRunnig = bool;
}

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

2
uno/web/uno.js

@ -11,7 +11,7 @@ let rules = {
$(()=>{
let game = new Game(2, rules);
let game = new Game(4, rules);
let style = new Style(game);
game.start();

Loading…
Cancel
Save