diff options
-rw-r--r-- | play.html | 37 | ||||
-rw-r--r-- | play.js | 7 | ||||
-rw-r--r-- | rules.js | 22 |
3 files changed, 40 insertions, 26 deletions
@@ -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 – - <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 – - <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> @@ -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]) @@ -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, |