tPut animal icons at the bottom for usage with JS - 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 6259a4c650eefebacf719df4de65d6ce61eb2c03
(DIR) parent 10807f509070b8a0d42a9f7c56c16622068c0111
(HTM) Author: Willy Goiffon <dev@z3bra.org>
Date: Wed, 4 Mar 2020 22:21:14 +0100
Put animal icons at the bottom for usage with JS
Diffstat:
M hadarawgs.css | 23 +++++++++++++++++------
M hadarawgs_hadarawgs.tpl | 11 ++++++++++-
2 files changed, 27 insertions(+), 7 deletions(-)
---
(DIR) diff --git a/hadarawgs.css b/hadarawgs.css
t@@ -17,11 +17,11 @@
/********* You can start writing your CSS below this line: **********/
-.icon_dragon::after { content: " - dragon"; }
-.icon_lion::after { content: " - lion"; }
-.icon_monkey::after { content: " - monkey"; }
-.icon_pegasus::after { content: " - pegasus"; }
-.icon_scarab::after { content: " - scarab"; }
+.player_dragon::after { content: " - dragon"; }
+.player_lion::after { content: " - lion"; }
+.player_monkey::after { content: " - monkey"; }
+.player_pegasus::after { content: " - pegasus"; }
+.player_scarab::after { content: " - scarab"; }
.playerboard_resources {
text-align: center;
t@@ -43,10 +43,21 @@
width: 16px;
height: 16px;
background-repeat: none;
- background-position: 0px 0px;
display: inline-block;
}
/* TODO: merge all icons into a single image (w/ transparency) */
.icon_coins { background-image: url('img/coins.png'); }
.icon_food { background-image: url('img/grape.png'); }
+
+.icon_animal {
+ width: 32px;
+ height: 37px;
+ background-size: 300%;
+ background-image: url('img/animals.png');
+}
+.icon_monkey { background-position: 0px 0px; }
+.icon_scarab { background-position: -32px 0px; }
+.icon_dragon { background-position: -64px 0px; }
+.icon_pegasus { background-position: 0px -38px; }
+.icon_lion { background-position: -32px -38px; }
(DIR) diff --git a/hadarawgs_hadarawgs.tpl b/hadarawgs_hadarawgs.tpl
t@@ -3,7 +3,7 @@
<div id="playerboards">
<!-- BEGIN player -->
<div id="board_p{PLAYER_ID}" class="playerboard whiteblock">
- <h3 style="color:#{PLAYER_COLOR}" class="icon_{PLAYER_ANIMAL}">{PLAYER_NAME}</h3>
+ <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>
t@@ -22,6 +22,15 @@
<!-- END player -->
</div>
+<div id="animals" class="debug">
+ <h3>Animals</h3>
+ <div class="icon icon_animal icon_monkey"></div>
+ <div class="icon icon_animal icon_scarab"></div>
+ <div class="icon icon_animal icon_dragon"></div>
+ <div class="icon icon_animal icon_pegasus"></div>
+ <div class="icon icon_animal icon_lion"></div>
+</div>
+
<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>\