tHave card number stand out when food level is too low - hadarawgs - Hadara adaptation for boardgamearena.com
(HTM) git clone git://git.z3bra.org/hadarawgs.git
(DIR) Log
(DIR) Files
(DIR) Refs
(DIR) LICENSE
---
(DIR) commit ebb011f0c05086c53a322f74cbb6b69572b652dc
(DIR) parent 6259a4c650eefebacf719df4de65d6ce61eb2c03
(HTM) Author: Willy Goiffon <dev@z3bra.org>
Date: Wed, 4 Mar 2020 23:04:40 +0100
Have card number stand out when food level is too low
Diffstat:
M hadarawgs.css | 7 ++++++-
M hadarawgs.js | 12 +++++++-----
M hadarawgs_hadarawgs.tpl | 20 ++++++--------------
3 files changed, 19 insertions(+), 20 deletions(-)
---
(DIR) diff --git a/hadarawgs.css b/hadarawgs.css
t@@ -17,6 +17,11 @@
/********* You can start writing your CSS below this line: **********/
+.standout {
+ color: red;
+ font-weight: bold;
+}
+
.player_dragon::after { content: " - dragon"; }
.player_lion::after { content: " - lion"; }
.player_monkey::after { content: " - monkey"; }
t@@ -38,7 +43,7 @@
* Player panel (top-right score, ELO, resources, ...)
*
*/
-.pp_value { margin-right: 8px; }
+.pp_value { margin-right: 2px; }
.icon {
width: 16px;
height: 16px;
(DIR) diff --git a/hadarawgs.js b/hadarawgs.js
t@@ -53,23 +53,25 @@ function (dojo, declare) {
for (var player_id in gamedatas.players) {
var player = gamedatas.players[player_id];
var board = gamedatas.boards[player_id];
+ board['ncard'] = 0;
// Setup player panel values
- board['ncard'] = 0;
var panel = $('player_board_' + player_id);
dojo.place(this.format_block('jstpl_player_board', board), panel);
+ // Make card numbers stand out if food level is too low
+ if (board['ncard'] > board['food'])
+ document.getElementById('pp_ncard_p'+ player_id).classList.add('standout');
+
// Set token values on each player board
- var tokens = ["coins", "ncard", "income", "military", "culture", "food"];
+ var tokens = ["income", "military", "culture", "food"];
tokens.forEach(function (token) {
var cur = $(token +'_p' + player_id);
cur.innerHTML = board[token];
});
-
}
-
- // Setup game notifications to handle (see "setupNotifications" method below)
+ // Setup game notifications to handle (see "setupNotifications" method below)
this.setupNotifications();
console.log( "Ending game setup" );
(DIR) diff --git a/hadarawgs_hadarawgs.tpl b/hadarawgs_hadarawgs.tpl
t@@ -5,18 +5,10 @@
<div id="board_p{PLAYER_ID}" class="playerboard whiteblock">
<h3 style="color:#{PLAYER_COLOR}" class="player_{PLAYER_ANIMAL}">{PLAYER_NAME}</h3>
<div class="playerboard_resources">
- <div class="playerboard_income">
- <span id="coins_p{PLAYER_ID}">-</span><span class="smalltext">/<span id="income_p{PLAYER_ID}">-</span></span>
- </div>
- <div class="playerboard_food">
- <span id="ncard_p{PLAYER_ID}">-</span><span class="smalltext">/<span id="food_p{PLAYER_ID}">-</span></span>
- </div>
- <div class="playerboard_military">
- <span id="military_p{PLAYER_ID}">-</span>
- </div>
- <div class="playerboard_culture">
- <span id="culture_p{PLAYER_ID}">-</span>
- </div>
+ <div class="playerboard_income"><span id="income_p{PLAYER_ID}">-</span></div>
+ <div class="playerboard_food"><span id="food_p{PLAYER_ID}">-</span></div>
+ <div class="playerboard_military"><span id="military_p{PLAYER_ID}">-</span></div>
+ <div class="playerboard_culture"><span id="culture_p{PLAYER_ID}">-</span></div>
</div>
</div>
<!-- END player -->
t@@ -33,8 +25,8 @@
<script type="text/javascript">
var jstpl_player_board = '<div class="pp_board">\
- <div class="icon icon_coins"></div><span class="pp_value pp_coins">${coins}<span class="smalltext">/${income}</span></span>\
- <div class="icon icon_food "></div><span class="pp_value pp_food ">${ncard}<span class="smalltext">/${food}</span></span>\
+ <div class="icon icon_coins"></div><span id="pp_coins_p${id}" class="pp_value pp_coins">${coins}</span>\
+ <div class="icon icon_food "></div><span id="pp_ncard_p${id}" class="pp_value pp_food ">${ncard}<span id="pp_food_p${id}" class="smalltext">/${food}</span></span>\
</div>';
</script>