diff --git a/velonimo.css b/velonimo.css
index 1625b75..162f80f 100644
--- a/velonimo.css
+++ b/velonimo.css
@@ -229,11 +229,19 @@ Board cards
/* /!\ 2P mode only */
#cards-deck {
position: absolute;
- display: inline-block;
+ display: block;
top: 177px; /* (containerHeight / 2) - (selfHeight / 2) */
left: 10px; /* boardMargin */
width: 90px; /* cardWidth */
height: 126px; /* cardHeight */
+}
+/* /!\ 2P mode only */
+#cards-deck-cards .card-in-deck {
+ position: absolute;
+ display: block;
+ width: 90px; /* cardWidth */
+ height: 126px; /* cardHeight */
+ border-radius: 5px;
background-image: url('img/remaining_cards.png');
background-size: 90px 126px;
}
diff --git a/velonimo.game.php b/velonimo.game.php
index 4615cc6..6761ace 100644
--- a/velonimo.game.php
+++ b/velonimo.game.php
@@ -822,6 +822,7 @@ function stStartRound() {
self::notifyAllPlayers('roundStarted', 'Round #${currentRound} starts', [
'currentRound' => $newRound,
'players' => $this->formatPlayersForClient($players),
+ 'numberOfCardsInDeck' => $this->getNumberOfCardsInDeck(),
]);
if ($this->is2PlayersMode($players)) {
diff --git a/velonimo.js b/velonimo.js
index 152200f..6fed81e 100644
--- a/velonimo.js
+++ b/velonimo.js
@@ -66,6 +66,7 @@ const CARD_ID_JERSEY = 0;
const DOM_ID_APP = 'velonimo-game';
const DOM_ID_BOARD_CARPET = 'board-carpet';
const DOM_ID_CARDS_DECK = 'cards-deck';
+const DOM_ID_CARDS_DECK_CARDS = 'cards-deck-cards';
const DOM_ID_ATTACK_REWARD_CARD = 'attack-reward-card';
const DOM_ID_PLAYED_CARDS_WRAPPER = 'played-cards';
const DOM_ID_LAST_PLAYED_CARDS = 'last-played-cards';
@@ -183,11 +184,7 @@ const PLAYERS_PLACES_BY_NUMBER_OF_PLAYERS = {
},
};
-// @TODO: show cards in logs (especially the cards picked/gave for the impacted players)
-// @TODO: support 2 players game
// @TODO: support "spectators"
-// @TODO: ? be more explicit when the player cannot beat the last played value (idea: disable its cards?)
-// @TODO: ? game rounds topology instead of choosing number of rounds
define([
'dojo','dojo/_base/declare',
'ebg/core/gamegui',
@@ -206,6 +203,8 @@ function (dojo, declare) {
this.howManyCardsToGiveBack = 0;
this.players = [];
this.playerHand = null; // https://en.doc.boardgamearena.com/Stock
+ // /!\ 2P mode only
+ this.howManyCardsInDeck = 0;
},
setup: function (gamedatas) {
this.currentState = gamedatas.gamestate.name;
@@ -262,11 +261,13 @@ function (dojo, declare) {
// show 2P mode items
if (this.is2PlayersMode()) {
dojo.place(
- `
DE
CK
+ `
`,
DOM_ID_BOARD_CARPET
);
+ this.howManyCardsInDeck = gamedatas.numberOfCardsInDeck;
+ this.setupDeckOfCards();
this.setupAttackRewardCards(gamedatas.attackRewardCards);
}
@@ -1357,6 +1358,38 @@ function (dojo, declare) {
moveCardsFromDeckToAnotherPlayer: function (receiverId, numberOfCards) {
this.moveHiddenTemporaryCardsFromDomIdToDomId(DOM_ID_CARDS_DECK, `player-table-${receiverId}-hand`, numberOfCards);
},
+ /**
+ * /!\ 2P mode only
+ */
+ setupDeckOfCards: function () {
+ const numberOfCards = this.howManyCardsInDeck;
+ const maxStackHeightInPx = 10;
+
+ let stackShadow = `box-shadow: ${3}px ${3}px ${10}px ${0}px #222222;`;
+ if (numberOfCards === 1) {
+ stackShadow = '';
+ } else if (numberOfCards < 4) {
+ stackShadow = `box-shadow: ${1}px ${1}px ${10}px ${0}px #222222;`
+ } else if (numberOfCards < 6) {
+ stackShadow = `box-shadow: ${2}px ${2}px ${10}px ${0}px #222222;`
+ }
+
+ let cardsInDeckHtml = '';
+ for (let i = 0; i < numberOfCards; i++) {
+ cardsInDeckHtml += ``;
+ }
+
+ $(DOM_ID_CARDS_DECK_CARDS).innerHTML = cardsInDeckHtml;
+ },
+ /**
+ * /!\ 2P mode only
+ *
+ * @param {number} numberOfCards
+ */
+ decreaseNumberOfCardsInDeck: function (numberOfCards) {
+ this.howManyCardsInDeck = (this.howManyCardsInDeck || numberOfCards) - numberOfCards;
+ this.setupDeckOfCards();
+ },
/**
* /!\ 2P mode only
*
@@ -1568,7 +1601,6 @@ function (dojo, declare) {
},
discardPlayedCards: function () {
this.playedCardsValue = 0;
- // @TODO: move to discarded cards stack
dojo.query(`#${DOM_ID_PLAYED_CARDS_WRAPPER} .${DOM_CLASS_CARDS_STACK}`).forEach(dojo.destroy);
},
discardPlayerSpeechBubbles: function () {
@@ -1718,9 +1750,13 @@ function (dojo, declare) {
},
notif_roundStarted: function (data) {
this.currentRound = data.args.currentRound;
- this.players = data.args.players;
this.setupRoundsInfo();
+
+ this.players = data.args.players;
this.setupNumberOfCardsInPlayersHand();
+
+ this.howManyCardsInDeck = data.args.numberOfCardsInDeck;
+ this.setupDeckOfCards();
},
notif_cardsPlayed: function (data) {
this.discardPlayerSpeechBubbles();
@@ -1789,6 +1825,7 @@ function (dojo, declare) {
* /!\ 2P mode only
*/
notif_attackRewardCardsRevealed: function (data) {
+ this.decreaseNumberOfCardsInDeck(data.args.cards.length);
this.setupAttackRewardCards(data.args.cards);
},
/**
@@ -1797,6 +1834,7 @@ function (dojo, declare) {
notif_cardsReceivedFromDeck: function (data) {
this.moveCardsFromDeckToPlayerHand(data.args.cards);
+ this.decreaseNumberOfCardsInDeck(data.args.numberOfCards);
this.increaseNumberOfCardsOfPlayer(this.player_id, data.args.numberOfCards);
},
/**
@@ -1805,6 +1843,7 @@ function (dojo, declare) {
notif_cardsMovedFromDeckToAnotherPlayer: function (data) {
this.moveCardsFromDeckToAnotherPlayer(data.args.receiverPlayerId, data.args.numberOfCards);
+ this.decreaseNumberOfCardsInDeck(data.args.numberOfCards);
this.increaseNumberOfCardsOfPlayer(data.args.receiverPlayerId, data.args.numberOfCards);
},
});