From 9604b98c79ad447e7d084bb0acb7795bb24f93ad Mon Sep 17 00:00:00 2001 From: Tor Andersson Date: Fri, 18 Jun 2021 12:25:26 +0200 Subject: tripoli: Add visual gold coin display. --- icons/gold.png | Bin 0 -> 7673 bytes play.html | 13 +++++++++++++ ui.js | 29 ++++++++++++++++++++++++++++- 3 files changed, 41 insertions(+), 1 deletion(-) create mode 100644 icons/gold.png diff --git a/icons/gold.png b/icons/gold.png new file mode 100644 index 0000000..7b6e1b6 Binary files /dev/null and b/icons/gold.png differ diff --git a/play.html b/play.html index 439d942..a1b8f98 100644 --- a/play.html +++ b/play.html @@ -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 {
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/ui.js b/ui.js index 77b4cfe..7687252 100644 --- a/ui.js +++ b/ui.js @@ -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'); -- cgit v1.2.3