tShow real playerboard as a background - 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 2f269edd45fa9bf46002e0740e92fdc59936764c
(DIR) parent 63d76016ebdff8d07bae289c6fe234ea29dd0279
(HTM) Author: Willy Goiffon <dev@z3bra.org>
Date: Wed, 18 Mar 2020 23:35:01 +0100
Show real playerboard as a background
Diffstat:
M hadarawgs.css | 20 ++++++++++----------
M hadarawgs_hadarawgs.tpl | 37 ++++++++++++++++++++++++-------
2 files changed, 39 insertions(+), 18 deletions(-)
---
(DIR) diff --git a/hadarawgs.css b/hadarawgs.css
t@@ -22,23 +22,23 @@
font-weight: bold;
}
-/* animals match player colors
+/* animals match player colors */
.player_d80000::after { fond-size: 70%; content: " - dragon"; }
.player_ffb000::after { fond-size: 70%; content: " - lion"; }
.player_804000::after { fond-size: 70%; content: " - monkey"; }
.player_ffffff::after { fond-size: 70%; content: " - pegasus"; }
.player_408000::after { fond-size: 70%; content: " - scarab"; }
-.playerboard_resources {
- text-align: center;
- font-weight: bold;
- display: inline-block;
-}
+.playerboard {
+ background-size: contain;
+ background-repeat: no-repeat;
+ background-image: url('img/playerboard.png');
+ color: white;
+ text-shadow: #000 0 0 1px, #000 0 0 1px, #000 0 0 1px, #000 0 0 1px, #000 0 0 1px, #000 0 0 1px;
-.playerboard_income { padding: 2px; background-color: #ffff66; }
-.playerboard_military { padding: 2px; background-color: #ffaaaa; }
-.playerboard_culture { padding: 2px; background-color: #aaaaff; }
-.playerboard_food { padding: 2px; background-color: #aaffaa; }
+ /* used to keep board aspect ratio */
+ padding-top: 42.8%;
+}
/*
* Player panel (top-right score, ELO, resources, ...)
(DIR) diff --git a/hadarawgs_hadarawgs.tpl b/hadarawgs_hadarawgs.tpl
t@@ -1,16 +1,37 @@
{OVERALL_GAME_HEADER}
-<div id="playerboards">
+<div class="playerboards">
<!-- BEGIN player -->
- <div id="board_p{PLAYER_ID}" class="playerboard whiteblock">
- <h3 style="color:#{PLAYER_COLOR}" class="player_{PLAYER_COLOR}">{PLAYER_NAME}</h3>
- <div class="playerboard_resources">
- <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>
+ <h3 style="color:#{PLAYER_COLOR}" class="player_{PLAYER_COLOR}">{PLAYER_NAME}</h3>
+ <div id="board_p{PLAYER_ID}" class="playerboard">
+ <div class="colony_area">
+ <div id="colony3_p{PLAYER_ID}" class="colony"></div>
+ <div id="colony9_p{PLAYER_ID}" class="colony"></div>
+ <div id="colony15_p{PLAYER_ID}" class="colony"></div>
+ <div id="colony21_p{PLAYER_ID}" class="colony"></div>
+ <div id="colony30_p{PLAYER_ID}" class="colony"></div>
+ </div>
+ <div class="medal_area">
+ <div id="silver1_p{PLAYER_ID}" class="medal_silver"></div>
+ <div id="silver2_p{PLAYER_ID}" class="medal_silver"></div>
+ <div id="gold1_p{PLAYER_ID}" class="medal_gold"></div>
+ <div id="gold2_p{PLAYER_ID}" class="medal_gold"></div>
+ </div>
+ <div class="animal_p{PLAYER_ID}"></div>
+ <div class="statue_area">
+ <div id="statue1_p{PLAYER_ID}" class="statue"></div>
+ <div id="statue2_p{PLAYER_ID}" class="statue"></div>
+ <div id="statue3_p{PLAYER_ID}" class="statue"></div>
+ <div id="statue4_p{PLAYER_ID}" class="statue"></div>
+ </div>
+ <div class="whiteblock playerboard_resources">
+ <div class="resource"><span id="income_p{PLAYER_ID}">-</span></div>
+ <div class="resource"><span id="military_p{PLAYER_ID}">-</span></div>
+ <div class="resource"><span id="culture_p{PLAYER_ID}">-</span></div>
+ <div class="resource"><span id="food_p{PLAYER_ID}">-</span></div>
</div>
</div>
+ <div class="whiteblock card_area"></div>
<!-- END player -->
</div>