From c590a07b664469c5fcdcd478a98070c59ed6a2d6 Mon Sep 17 00:00:00 2001 From: Nicolas Fritz Date: Thu, 26 Jan 2023 20:56:35 +0100 Subject: [PATCH] KartenDeck anzeigen --- uno/css/uno.css | 24 ++++++++ uno/img/cards/BLUE/{A.png => S.png} | Bin uno/img/cards/GREEN/{A.png => S.png} | Bin uno/img/cards/RED/{A.png => S.png} | Bin uno/img/cards/YELLOW/{A.png => S.png} | Bin uno/index.html | 2 +- uno/web/Style.js | 82 ++++++++++++++++++++++---- uno/web/cards/Card.js | 21 ++++++- uno/web/uno.js | 2 +- 9 files changed, 118 insertions(+), 13 deletions(-) rename uno/img/cards/BLUE/{A.png => S.png} (100%) rename uno/img/cards/GREEN/{A.png => S.png} (100%) rename uno/img/cards/RED/{A.png => S.png} (100%) rename uno/img/cards/YELLOW/{A.png => S.png} (100%) diff --git a/uno/css/uno.css b/uno/css/uno.css index 75c132b..d6e1c33 100644 --- a/uno/css/uno.css +++ b/uno/css/uno.css @@ -41,4 +41,28 @@ body #first-put { 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%; } \ No newline at end of file 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/index.html b/uno/index.html index b6cf432..3ebeb05 100644 --- a/uno/index.html +++ b/uno/index.html @@ -34,7 +34,7 @@ -
+
diff --git a/uno/web/Style.js b/uno/web/Style.js index 7dfc181..8dff528 100644 --- a/uno/web/Style.js +++ b/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' + 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('
' + '
'); + + 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; } 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/uno.js b/uno/web/uno.js index 7062b78..88e1c59 100644 --- a/uno/web/uno.js +++ b/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();