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(
- `
-
+ `
+
`,
- 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}
-
-
-
-
-
+
{OVERALL_GAME_FOOTER}