diff --git a/velonimo.css b/velonimo.css index a7699f3..333284e 100644 --- a/velonimo.css +++ b/velonimo.css @@ -84,11 +84,10 @@ Board box-shadow: 2px 2px 5px black; border: 1px solid #3b3119; } -/* +/* @TODO: remove if unused */ #board-carpet.yellow { background-color: #e9c646; } -*/ .player-table { position: absolute; /* position is dynamically computed */ diff --git a/velonimo.js b/velonimo.js index 41adea7..458fa78 100644 --- a/velonimo.js +++ b/velonimo.js @@ -61,6 +61,7 @@ const VALUE_50 = 50; const JERSEY_VALUE = 10; // DOM IDs +const DOM_ID_APP = 'velonimo-game'; const DOM_ID_BOARD = 'board'; const DOM_ID_BOARD_CARPET = 'board-carpet'; const DOM_ID_PLAYER_HAND = 'my-hand'; @@ -212,11 +213,20 @@ function (dojo, declare) { // Setup board dojo.place( - `
-
-
+ `
+
+
+
+
+
+
+
+

${_('My hand')}

+ +
+
`, - DOM_ID_BOARD + DOM_ID_APP ); // Setup players @@ -229,14 +239,14 @@ function (dojo, declare) { ).forEach((player, index) => { const playerPosition = playersPlace[index]; - dojo.place(this.format_block('jstpl_player_table', { - id: player.id, - color: player.color, - name: (player.name.length > 10 ? (player.name.substr(0,10) + '...') : player.name), - numberOfCardsInHand: player.howManyCards, - tableStyle: playerPosition.tableStyle, - cardsStyle: playerPosition.cardsStyle, - }), DOM_ID_BOARD_CARPET); + dojo.place( + `
+
${(player.name.length > 10 ? (player.name.substr(0,10) + '...') : player.name)}
+
${player.howManyCards}
+
+
+
`, + DOM_ID_BOARD_CARPET); }); this.setupNumberOfCardsInPlayersHand(); @@ -246,45 +256,10 @@ function (dojo, declare) { this.playerHand.create(this, $(DOM_ID_PLAYER_HAND), CARD_WIDTH, CARD_HEIGHT); this.playerHand.setSelectionAppearance('class'); this.playerHand.image_items_per_row = 7; + // create cards const cardsImageUrl = g_gamethemeurl+'img/cards.png'; - // colored cards - [ - COLOR_BLUE, - COLOR_BROWN, - COLOR_GRAY, - COLOR_GREEN, - COLOR_PINK, - COLOR_RED, - COLOR_YELLOW, - ].forEach((color) => { - [ - VALUE_1, - VALUE_2, - VALUE_3, - VALUE_4, - VALUE_5, - VALUE_6, - VALUE_7, - ].forEach((value) => { - const cardPositionInSprite = this.getCardPositionInSpriteByColorAndValue(color, value); - this.playerHand.addItemType( - cardPositionInSprite, // stock item ID - cardPositionInSprite, // card weight (used for sorting) - cardsImageUrl, // sprite URL - cardPositionInSprite // position in sprite - ); - }); - }); - // adventurer cards - [ - VALUE_25, - VALUE_30, - VALUE_35, - VALUE_40, - VALUE_45, - VALUE_50, - ].forEach((value) => { - const cardPositionInSprite = this.getCardPositionInSpriteByColorAndValue(COLOR_ADVENTURER, value); + this.execFnForEachCardsInGame((color, value) => { + const cardPositionInSprite = this.getCardPositionInSpriteByColorAndValue(color, value); this.playerHand.addItemType( cardPositionInSprite, // stock item ID cardPositionInSprite, // card weight (used for sorting) @@ -659,6 +634,41 @@ function (dojo, declare) { } dojo.toggleClass(DOM_ID_ACTION_BUTTON_GIVE_CARDS, DOM_CLASS_DISABLED_ACTION_BUTTON, selectedCards.length !== this.howManyCardsToGiveBack); }, + /** + * @param {function (number, number)} fn such as (color, value) => {...} + */ + execFnForEachCardsInGame: function (fn) { + // colored cards + [ + COLOR_BLUE, + COLOR_BROWN, + COLOR_GRAY, + COLOR_GREEN, + COLOR_PINK, + COLOR_RED, + COLOR_YELLOW, + ].forEach((color) => { + [ + VALUE_1, + VALUE_2, + VALUE_3, + VALUE_4, + VALUE_5, + VALUE_6, + VALUE_7, + ].forEach((value) => fn.bind(this)(color, value)); + }); + + // adventurer cards + [ + VALUE_25, + VALUE_30, + VALUE_35, + VALUE_40, + VALUE_45, + VALUE_50, + ].forEach((value) => fn.bind(this)(COLOR_ADVENTURER, value)); + }, /** * This function gives the position of the card in the sprite "cards.png", * it also gives weight to cards to sort them by color (blue-1, blue-2, ...) just like in the sprite, @@ -707,10 +717,9 @@ function (dojo, declare) { } }, sortPlayerCardsByColor: function () { - const cards = this.getAllPlayerCards(); const cardsWeightByPosition = {}; - cards.forEach((card) => { - const cardPositionAndWeight = this.getCardPositionInSpriteByColorAndValue(card.color, card.value); + this.execFnForEachCardsInGame((color, value) => { + const cardPositionAndWeight = this.getCardPositionInSpriteByColorAndValue(color, value); cardsWeightByPosition[cardPositionAndWeight] = cardPositionAndWeight; }); @@ -725,10 +734,9 @@ function (dojo, declare) { return (value * 100) + color; }, sortPlayerCardsByValue: function () { - const cards = this.getAllPlayerCards(); const cardsWeightByPosition = {}; - cards.forEach((card) => { - cardsWeightByPosition[this.getCardPositionInSpriteByColorAndValue(card.color, card.value)] = this.getCardWeightForColorAndValueToSortThemByValue(card.color, card.value); + this.execFnForEachCardsInGame((color, value) => { + cardsWeightByPosition[this.getCardPositionInSpriteByColorAndValue(color, value)] = this.getCardWeightForColorAndValueToSortThemByValue(color, value); }); this.playerHand.changeItemsWeight(cardsWeightByPosition); @@ -1245,21 +1253,17 @@ function (dojo, declare) { const topOfStackCardId = stackedCards[stackedCards.length - 1].id; // create played cards + const stackWith = ((stackedCards.length - 1) * (CARD_WIDTH / 3)) + CARD_WIDTH; dojo.place( - this.format_block('jstpl_cards_stack', { - id: topOfStackCardId, - width: ((stackedCards.length - 1) * (CARD_WIDTH / 3)) + CARD_WIDTH, - }), + `
`, `player-table-${playerId}-cards` ); stackedCards.forEach((card) => { const position = this.getCardPositionInSpriteByColorAndValue(card.color, card.value); + const x = this.getAbsoluteCardBackgroundPositionXFromCardPosition(position); + const y = this.getAbsoluteCardBackgroundPositionYFromCardPosition(position); dojo.place( - this.format_block('jstpl_card_in_stack', { - id: card.id, - x: this.getAbsoluteCardBackgroundPositionXFromCardPosition(position), - y: this.getAbsoluteCardBackgroundPositionYFromCardPosition(position), - }), + `
`, `cards-stack-${topOfStackCardId}` ); }); diff --git a/velonimo.view.php b/velonimo.view.php index 47b9efb..1bf3cfb 100644 --- a/velonimo.view.php +++ b/velonimo.view.php @@ -34,8 +34,6 @@ function getGameName() { function build_page( $viewArgs ) { - $this->tpl['MY_HAND'] = self::_("My hand"); - /* // Examples: set the value of some element defined in your tpl file like this: {MY_VARIABLE_ELEMENT} diff --git a/velonimo_velonimo.tpl b/velonimo_velonimo.tpl index 513d7f4..fb2c05e 100644 --- a/velonimo_velonimo.tpl +++ b/velonimo_velonimo.tpl @@ -1,25 +1,5 @@ {OVERALL_GAME_HEADER} -
- -
-
-

{MY_HAND}

- -
-
-
- - +
{OVERALL_GAME_FOOTER}