diff options
| -rw-r--r-- | icons/gold.png | bin | 0 -> 7673 bytes | |||
| -rw-r--r-- | play.html | 13 | ||||
| -rw-r--r-- | ui.js | 29 |
3 files changed, 41 insertions, 1 deletions
diff --git a/icons/gold.png b/icons/gold.png Binary files differnew file mode 100644 index 0000000..7b6e1b6 --- /dev/null +++ b/icons/gold.png @@ -127,6 +127,7 @@ svg circle, .piece { .piece.us_marine { width: 21px; height: 21px; background-image: url("icons/us_marine.svg"); } .piece.ar_infantry { width: 21px; height: 21px; background-image: url("icons/ar_infantry.svg"); } .piece.tr_infantry { width: 21px; height: 21px; background-image: url("icons/tr_infantry.svg"); } +.piece.gold { width: 40px; height: 40px; background-image: url("icons/gold.png"); } .harbor { fill-opacity: 0; @@ -404,6 +405,18 @@ svg circle, .piece { <div id="tr_infantry_18" class="piece tr_infantry"></div> <div id="tr_infantry_19" class="piece tr_infantry"></div> <div id="tr_infantry_20" class="piece tr_infantry"></div> +<div id="gold_1" class="piece gold"></div> +<div id="gold_2" class="piece gold"></div> +<div id="gold_3" class="piece gold"></div> +<div id="gold_4" class="piece gold"></div> +<div id="gold_5" class="piece gold"></div> +<div id="gold_6" class="piece gold"></div> +<div id="gold_7" class="piece gold"></div> +<div id="gold_8" class="piece gold"></div> +<div id="gold_9" class="piece gold"></div> +<div id="gold_10" class="piece gold"></div> +<div id="gold_11" class="piece gold"></div> +<div id="gold_12" class="piece gold"></div> </div> </div> </div> @@ -60,6 +60,7 @@ let map = document.getElementById("svgmap"); let ui = { spaces: {}, pieces: {}, + gold: [], cards: {}, } @@ -108,6 +109,9 @@ function build_map() { ui.pieces[i] = e; } } + for (let i = 1; i <= 12; ++i) { + ui.gold.push(document.getElementById("gold_" + i)); + } for (let i = 1; i <= 27; ++i) { let e = ui.cards[i] = document.getElementById("us_card_"+i); e.addEventListener("click", on_click_card); @@ -167,7 +171,6 @@ function tr_info() { text += "Hand: " + game.tr.hand + "\n"; text += "Draw: " + game.tr.draw + "\n"; text += "Discard: " + game.tr.discard + "\n"; - text += "Gold: " + game.tr.gold + "\n"; return text; } @@ -202,6 +205,7 @@ function on_update() { update_year_marker(game.year); update_season_marker(game.season); + update_gold(); update_pieces(); update_cards(); update_spaces(); @@ -225,6 +229,12 @@ function set_piece_xy(p, x, y) { e.style.top = Math.round(y - e.offsetHeight/2) + "px"; } +function set_gold_xy(i, x, y) { + let e = ui.gold[i]; + e.style.left = Math.round(x - e.offsetWidth/2) + "px"; + e.style.top = Math.round(y - e.offsetHeight/2) + "px"; +} + function layout_space(location, s, x0, y0, size) { const LOUT_W = { se_f:46, us_f:46, tr_f:46, us_g:36, tr_c:36, al_c:36, us_m:28, ar_i:28, tr_i:28 }; const LOUT_H = { se_f:32, us_f:32, tr_f:32, us_g:28, tr_c:28, al_c:28, us_m:28, ar_i:28, tr_i:28 }; @@ -318,6 +328,23 @@ function update_pieces() { } } +function update_gold() { + let split = 12 - game.tr.gold; + let x, y; + x = 690; + y = 50; + for (let i = 0; i < split; ++i) { + set_gold_xy(i, x, y); + x += 50; + } + x = 2250; + y = 750; + for (let i = 11; i >= split; --i) { + set_gold_xy(i, x, y); + x -= 50; + } +} + function update_spaces() { for (let space in ui.spaces) { ui.spaces[space].classList.remove('highlight'); |
