tRearrange player area automatically - 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 a390ae22816bc00cc580aa1c8b86ff8fecee71a8
(DIR) parent 437ef6e1f7c1b7ebdfcc6a527c315542678a8ad3
(HTM) Author: Willy Goiffon <dev@z3bra.org>
Date: Wed, 6 May 2020 17:32:21 +0200
Rearrange player area automatically
Diffstat:
M hadarawgs.css | 63 ++++++++++++++++++++-----------
M hadarawgs.js | 2 +-
M hadarawgs_hadarawgs.tpl | 20 ++++++++++----------
3 files changed, 51 insertions(+), 34 deletions(-)
---
(DIR) diff --git a/hadarawgs.css b/hadarawgs.css
t@@ -22,22 +22,51 @@
font-weight: bold;
}
+.playerboards {
+ display: flex;
+ flex-flow: row wrap;
+ justify-content: center;
+}
+
+/* container for each player */
+.playerboard {
+ min-width: 480px;
+ box-sizing: border-box;
+ margin: 10px;
+ padding-top: 5px;
+ box-shadow: 0px 0px 2px 0px #736767;
+ transition: 2s all linear; -webkit-transition: 2s all linear;
+}
+
+.icon_animal {
+ width: 32px;
+ height: 37px;
+ background-size: 300%;
+ background-image: url('img/animals.png');
+}
+
/* animals match player colors */
-.player_d80000::after { fond-size: 70%; content: " - dragon"; }
-.player_ffb000::after { fond-size: 70%; content: " - lion"; }
+.icon_804000 { background-position: 0px 0px; }
+.icon_408000 { background-position: -32px 0px; }
+.icon_d80000 { background-position: -64px 0px; }
+.icon_ffffff { background-position: 0px -38px; }
+.icon_ffb000 { background-position: -32px -38px; }
+
.player_804000::after { fond-size: 70%; content: " - monkey"; }
-.player_ffffff::after { fond-size: 70%; content: " - pegasus"; }
.player_408000::after { fond-size: 70%; content: " - scarab"; }
+.player_d80000::after { fond-size: 70%; content: " - dragon"; }
+.player_ffffff::after { fond-size: 70%; content: " - pegasus"; }
+.player_ffb000::after { fond-size: 70%; content: " - lion"; }
-.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;
+resource_income { color: orange; }
+resource_military { color: red; }
+resource_culture { color: blue; }
+resource_food { color: green; }
- /* used to keep board aspect ratio */
- padding-top: 42.8%;
+.colony {
+ width: 20px;
+ height: 20px;
+ background-color: red;
}
/*
t@@ -55,15 +84,3 @@
/* 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.js b/hadarawgs.js
t@@ -80,7 +80,7 @@ function (dojo, declare) {
for (cardtype = 0; cardtype < 5; cardtype++) {
for (var cardid = 0; cardid < 10; cardid++) {
var cardref = cardtype * 10 + epoch * 50 + cardid;
- this.deck.addItemType(cardref, cardtype, g_gamethemeurl + 'img/cards_small.png', cardref);
+ this.deck.addItemType(cardref, cardtype, g_gamethemeurl + 'img/cards.png', cardref);
this.deck.addToStock(cardref, 'deck');
}
}
(DIR) diff --git a/hadarawgs_hadarawgs.tpl b/hadarawgs_hadarawgs.tpl
t@@ -2,8 +2,15 @@
<div class="playerboards">
<!-- BEGIN player -->
- <h3 style="color:#{PLAYER_COLOR}" class="player_{PLAYER_COLOR}">{PLAYER_NAME}</h3>
- <div id="board_p{PLAYER_ID}" class="playerboard">
+ <div id="board_p{PLAYER_ID}" class="playerboard whiteblock">
+ <h3 style="color:#{PLAYER_COLOR}" class="player_{PLAYER_COLOR}">{PLAYER_NAME}</h3>
+ <div class="animal_p{PLAYER_ID} icon_animal icon_{PLAYER_COLOR}"></div>
+ <div class="playerboard_resources">
+ <span class="resource resource_income"><span id="income_p{PLAYER_ID}">-</span></span>
+ <span class="resource resource_military"><span id="military_p{PLAYER_ID}">-</span></span>
+ <span class="resource resource_culture"><span id="culture_p{PLAYER_ID}">-</span></span>
+ <span class="resource resource_food"><span id="food_p{PLAYER_ID}">-</span></span>
+ </div>
<div class="colony_area">
<div id="colony3_p{PLAYER_ID}" class="colony"></div>
<div id="colony9_p{PLAYER_ID}" class="colony"></div>
t@@ -17,21 +24,14 @@
<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 id="deck_p{PLAYER_ID}"class="card_area">card zone</div>
</div>
- <div id="deck_p{PLAYER_ID}"class="whiteblock card_area"></div>
<!-- END player -->
</div>