summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--play.html37
-rw-r--r--play.js7
-rw-r--r--rules.js22
3 files changed, 40 insertions, 26 deletions
diff --git a/play.html b/play.html
index 2311ab0..92da5ea 100644
--- a/play.html
+++ b/play.html
@@ -28,15 +28,26 @@ body.Observer #hand {
display: none;
}
-.court, #hand {
+.role_hand_size { float: right }
+
+.court, #hand, #darkness {
font-family: "Albert Text";
padding: 6px 10px;
text-align: right;
font-size: 20px;
+ //text-shadow: 0 0 2px #fff8;
color: #0004;
}
-#log { background-color: oldlace; }
+#darkness {
+ position: absolute;
+ right: -2px;
+ bottom: -2px;
+ color: #444;
+ text-shadow: 0 0 4px white;
+}
+
+#log { background-color: whitesmoke; }
#log .h1 {
margin: 6px 0;
padding: 2px 8px;
@@ -71,7 +82,7 @@ body.Observer #hand {
position: absolute;
width: 825px;
border: 2px solid #0004;
- border-color: #fff4 #0004 #0004 #fff4;
+ border-color: #fff3 #0004 #0004 #fff3;
box-shadow: 0 0 0 1px #222, 1px 1px 8px -2px #000;
}
@@ -97,9 +108,9 @@ body.Observer #hand {
#hand { top: calc(12px + 80px + 12px + 638px + 12px + 80px + 12px) }
#mapwrap { height: calc(12px + 80px + 12px + 638px + 12px + 80px + 12px + 80px) }
+#hand, .court { background-color: #666 }
.red.court { background-color: hsl(359,35%,45%) }
.blue.court { background-color: hsl(220,35%,45%) }
-#hand { background-color: #666 }
#map div {
position: absolute;
@@ -209,14 +220,16 @@ body.Observer #hand {
<div id="roles">
<div class="role" id="role_Red">
<div class="role_name">
- Red &#x2013;
- <span class="role_user"></span>
+ Red
+ <div class="role_hand_size" id="red_hand_size"></div>
+ <div class="role_user"></div>
</div>
</div>
<div class="role" id="role_Blue">
<div class="role_name">
- Blue &#x2013;
- <span class="role_user"></span>
+ Blue
+ <div class="role_hand_size" id="blue_hand_size"></div>
+ <div class="role_user"></div>
</div>
</div>
</div>
@@ -227,10 +240,10 @@ body.Observer #hand {
<div id="mapwrap" class="fit">
<div id="map">
-<div id="court1" class="red court">Rival Court</div>
-<div id="board"></div>
-<div id="court2" class="blue court">Court</div>
-<div id="hand" class="blue hand">Hand</div>
+<div id="court1" class="court">Rival Court</div>
+<div id="board"><div id="darkness"></div></div>
+<div id="court2" class="court">Court</div>
+<div id="hand">Hand</div>
</div>
</div>
diff --git a/play.js b/play.js
index c4eae91..34a0b6e 100644
--- a/play.js
+++ b/play.js
@@ -72,6 +72,9 @@ let ui = {
board: document.getElementById("map"),
court1: document.getElementById("court1"),
court2: document.getElementById("court2"),
+ darkness: document.getElementById("darkness"),
+ red_hand_size: document.getElementById("red_hand_size"),
+ blue_hand_size: document.getElementById("blue_hand_size"),
red_score: null,
blue_score: null,
oval_spaces: [],
@@ -180,6 +183,10 @@ function hide(elt) {
function on_update() {
on_init()
+ ui.red_hand_size.textContent = view.red_hand + " in Hand"
+ ui.blue_hand_size.textContent = view.blue_hand + " in Hand"
+ ui.darkness.textContent = view.darkness + " in Darkness"
+
for (let i = 1; i <= 54; ++i) {
if ((view.hand && view.hand.includes(i)) || view.red_court.includes(i) || view.blue_court.includes(i) || view.squares.includes(i))
show(ui.tiles[i])
diff --git a/rules.js b/rules.js
index 8659e2d..c8f9668 100644
--- a/rules.js
+++ b/rules.js
@@ -82,20 +82,11 @@ function space_name(s) {
}
function tile_name(tile) {
- if (tile >= TILE_BLUE && tile < TILE_BLUE + 12) return "Blue"
- if (tile >= TILE_RED && tile < TILE_RED + 12) return "Red"
- if (tile >= TILE_GOLD && tile < TILE_GOLD + 12) return "Gold"
- if (tile >= TILE_WHITE && tile < TILE_WHITE + 12) return "White"
- if (tile >= TILE_GREEN && tile < TILE_GREEN + 12) return "Green"
- return "None"
-}
-
-function tile_type_name(tile) {
- if (tile >= TILE_BLUE && tile < TILE_BLUE + 12) return "Beasts"
- if (tile >= TILE_RED && tile < TILE_RED + 12) return "Tournaments"
- if (tile >= TILE_GOLD && tile < TILE_GOLD + 12) return "Cloth of Gold"
- if (tile >= TILE_WHITE && tile < TILE_WHITE + 12) return "Piety"
- if (tile >= TILE_GREEN && tile < TILE_GREEN + 12) return "Jewels"
+ if (tile >= TILE_BLUE && tile < TILE_BLUE + 12) return "blue"
+ if (tile >= TILE_RED && tile < TILE_RED + 12) return "red"
+ if (tile >= TILE_GOLD && tile < TILE_GOLD + 12) return "gold"
+ if (tile >= TILE_WHITE && tile < TILE_WHITE + 12) return "white"
+ if (tile >= TILE_GREEN && tile < TILE_GREEN + 12) return "green"
return "None"
}
@@ -164,6 +155,9 @@ exports.view = function(state, player) {
prompt: null,
tokens: game.tokens,
squares: game.squares,
+ darkness: game.darkness.length,
+ red_hand: game.red_hand.length,
+ blue_hand: game.blue_hand.length,
red_score: game.red_score,
blue_score: game.blue_score,
red_court: game.red_court,