tripoli: Add visual gold coin display.

3 files changed, 41 insertions, 1 deletions

diff --git a/icons/gold.png b/icons/gold.png
new file mode 100644
index 0000000..7b6e1b6
--- /dev/null
+++ b/icons/gold.png
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 {
 <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>
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');