2 files changed, 29 insertions, 0 deletions

diff --git a/play.css b/play.css
index b633b72..b69659f 100644
--- a/play.css
+++ b/play.css
@@ -41,6 +41,12 @@
 	--color-role-russia: hsl(120, 50%, 70%);
 	--color-role-austria: hsl(0, 0%, 98%);
 	--color-role-france: hsl(0, 70%, 80%);
+
+	--color-spades: #004b70;
+	--color-clubs: #037a37;
+	--color-hearts: #ed1c23;
+	--color-diamonds: #c2253e;
+	--color-reserve: #0094c9;
 }
 
 #role_Frederick { background-color: var(--color-role-prussia) }
@@ -76,6 +82,11 @@ header.your_turn.austria { background-color: var(--color-light-austria); }
 header.your_turn.imperial { background-color: var(--color-light-imperial); }
 header.your_turn.france { background-color: var(--color-light-france); }
 
+span.suit.spades { color: var(--color-spades) }
+span.suit.clubs { color: var(--color-clubs) }
+span.suit.hearts { color: var(--color-hearts) }
+span.suit.diamonds { color: var(--color-diamonds) }
+span.suit.reserve { color: var(--color-reserve); font-weight: bold; }
 
 #mapwrap {
 	width: 2485px;
diff --git a/play.js b/play.js
index 561fb0f..46e0083 100644
--- a/play.js
+++ b/play.js
@@ -265,6 +265,7 @@ function sort_power_panel() {
 /* BUILD UI */
 
 const ui = {
+	prompt: document.getElementById("prompt"),
 	header: document.querySelector("header"),
 	roads_element: document.getElementById("roads"),
 	spaces_element: document.getElementById("spaces"),
@@ -835,7 +836,24 @@ function cmp_tc(a, b) {
 	return ax - bx
 }
 
+const colorize_S = '<span class="spades">$&</span>'
+const colorize_C = '<span class="clubs">$&</span>'
+const colorize_H = '<span class="hearts">$&</span>'
+const colorize_D = '<span class="diamonds">$&</span>'
+const colorize_R = '<span class="reserve">$&</span>'
+
+function colorize(text) {
+	text = text.replace(/\d+\u2660/g, colorize_S)
+	text = text.replace(/\d+\u2663/g, colorize_C)
+	text = text.replace(/\d+\u2665/g, colorize_H)
+	text = text.replace(/\d+\u2666/g, colorize_D)
+	text = text.replace(/\d+R/g, colorize_R)
+	return text
+}
+
 function on_update() {
+	ui.prompt.innerHTML = colorize(view.prompt)
+
 	ui.header.classList.toggle("prussia", view.power === P_PRUSSIA)
 	ui.header.classList.toggle("hanover", view.power === P_HANOVER)
 	ui.header.classList.toggle("russia", view.power === P_RUSSIA)