tLimit game view to player boards - 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 5feb208e686874be079ac046a125006468b86418
(DIR) parent fe137f6ba231999958f211c9ae3d00e13c415c4b
(HTM) Author: Willy Goiffon <dev@z3bra.org>
Date: Sat, 29 Feb 2020 11:56:47 +0100
Limit game view to player boards
Diffstat:
M hadarawgs.css | 39 ++++++++-----------------------
M hadarawgs.view.php | 5 ++---
M hadarawgs_hadarawgs.tpl | 65 +++++++++----------------------
3 files changed, 31 insertions(+), 78 deletions(-)
---
(DIR) diff --git a/hadarawgs.css b/hadarawgs.css
t@@ -13,39 +13,20 @@
*
*/
-/*
- This is the CSS stylesheet of your game User Interface.
-
- Styles defined on this file will be applied to the HTML elements you define in your
- HTML template (hadarawgs_hadarawgs.tpl), and to HTML elements you create dynamically
- (in hadarawgs.js).
-
- Usually, you are using CSS to:
-
- 1°) define the overall layout of your game
- (ex: place the board on the top left, place player's hand beside, place the deck on the right, ...).
-
- 2°) create your CSS-sprites:
- All images of your games should be gathered into a small number of image files. Then, using
- background-image and background-position CSS properties, you create HTML blocks that can
- display these images correctly (see example below).
-
- 3°) ... anything else:
- It is really easy to add and remove CSS classes dynamically from your Javascript with
- dojo.addClass and dojo.removeClass. It is also easy to check if an element has a class
- (dojo.hasClass) or to get all elements with a specific class (dojo.query). This is why,
- very often, using CSS classes for the logic of your user interface allow you to do complex
- thing easily.
-
-
- Note: on the production platform, this file will be compressed and comments will be removed.
- Consequently, don't hesitate to put as many comments as necessary.
-*/
-
@import url(../../../css/csslayer.css); /* Note: you must not use any @import directive other than this one */
/********* You can start writing your CSS below this line: **********/
+.resources-container {
+ text-align: center;
+ font-weight: bold;
+ display: inline-block;
+}
+
+.resource-income { padding: 2px; background-color: #ffff66; }
+.resource-military { padding: 2px; background-color: #ffaaaa; }
+.resource-culture { padding: 2px; background-color: #aaaaff; }
+.resource-food { padding: 2px; background-color: #aaffaa; }
/*
Example of CSS sprites (a black token and a white token, 20x20px each, embedded in the same "tokens.png" 40x20px image):
(DIR) diff --git a/hadarawgs.view.php b/hadarawgs.view.php
t@@ -53,13 +53,12 @@
*/
- $this->page->begin_block( "hadarawgs_hadarawgs", "myblock" );
+ $this->page->begin_block( "hadarawgs_hadarawgs", "player" );
foreach( $players as $player )
{
$this->page->insert_block( "player", array(
"PLAYER_NAME" => $player['player_name'],
- "PLAYER_ICON" => $player['player_icon']
- "PLAYER_COLOR" => $player['player_color']
+ "PLAYER_COLOR" => $player['player_color'],
) );
}
(DIR) diff --git a/hadarawgs_hadarawgs.tpl b/hadarawgs_hadarawgs.tpl
t@@ -2,57 +2,30 @@
<div id="playerboards">
<!-- BEGIN player -->
- <div id="playerboard_{DIR}" class="playerboard whiteblock">
- <div class="playername" style="color:#{PLAYER_COLOR}">{PLAYER_NAME}</div>
- <div class="playericon_{PLAYER_ICON}"></div>
- <ul class="medals-silver-container">
- <li>empty</li>
- <li>empty</li>
- </ul>
- <ul class="medals-gold-container">
- <li>empty</li>
- <li>empty</li>
- </ul>
- <ul class="resources-container">
- <li>income:</li>
- <li>miliraty:</li>
- <li>culture:</li>
- <li>food:</li>
- </ul>
- <ul class="colonies-container"></ul>
- <ol class="statues-container">
- <li>empty</li>
- <li>empty</li>
- <li>empty</li>
- <li>empty</li>
- </ol>
- <div class="cards-container">
- <div class="cards-income-container"></div>
- <div class="cards-military-container"></div>
- <div class="cards-culture-container"></div>
- <div class="cards-food-container"></div>
- <div class="cards-science-container"></div>
+ <div id="playerboard_{PLAYER_ICON}" class="playerboard whiteblock">
+ <h3 class="playername" style="color:#{PLAYER_COLOR}">{PLAYER_NAME}</h3>
+ <div class="resources-container">
+ <div class="resource-income">
+ <span class="resource-income-icon token token_income"></span>
+ <span class="resource-income-value">0/0</span>
+ </div>
+ <div class="resource-military">
+ <span class="resource-military-icon token"></span>
+ <span class="resource-military-value">0/0</span>
+ </div>
+ <div class="resource-culture">
+ <span class="resource-culture-icon token"></span>
+ <span class="resource-culture-value">0/0</span>
+ </div>
+ <div class="resource-food">
+ <span class="resource-food-icon token"></span>
+ <span class="resource-food-value">0/0</span>
+ </div>
</div>
</div>
<!-- END player -->
</div>
-<div id="mainboard">
- <div class="cards-pile-container">
- <div class="cards-pile-income"></div>
- <div class="cards-discard-pile-income"></div>
- <div class="cards-pile-military"></div>
- <div class="cards-discard-pile-military"></div>
- <div class="cards-pile-culture"></div>
- <div class="cards-discard-pile-culture"></div>
- <div class="cards-pile-food"></div>
- <div class="cards-discard-pile-food"></div>
- <div class="cards-pile-science"></div>
- <div class="cards-discard-pile-science"></div>
- </div>
- <div class="cards-pile-discard"></div>
-</div>
-
<script type="text/javascript">
</script>