tripoli: Add visual gold coin display.

1 files changed, 28 insertions, 1 deletions

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');