show how many markers are missing (with text label)

3 files changed, 28 insertions, 0 deletions

diff --git a/play.css b/play.css
index 5efd202..3685954 100644
--- a/play.css
+++ b/play.css
@@ -434,6 +434,19 @@ span.suit.hearts { color: var(--color-hearts) }
 span.suit.diamonds { color: var(--color-diamonds) }
 span.suit.reserve { color: var(--color-reserve); font-weight: bold; font-family: "Source Serif SmText"; }
 
+/* MISSING MARKER COUNT IN POOL */
+
+.missing {
+	position: absolute;
+	font-size: 18px;
+	line-height: 18px;
+}
+
+#missing_pragmatic { top: 105px; left: 860px; }
+#missing_prussia { top: 76px; left: 1990px; }
+#missing_austria { top: 1562px; left: 2395px; }
+#missing_france { top: 1568px; left: 145px; }
+
 /* SPACES */
 
 .space {
diff --git a/play.html b/play.html
index 8aceacc..d078606 100644
--- a/play.html
+++ b/play.html
@@ -62,6 +62,10 @@
 		<div id="spaces"></div>
 		<div id="markers"></div>
 		<div id="pieces"></div>
+		<div id="missing_france" class="missing"></div>
+		<div id="missing_prussia" class="missing"></div>
+		<div id="missing_pragmatic" class="missing"></div>
+		<div id="missing_austria" class="missing"></div>
 	</div>
 </div>
 
diff --git a/play.js b/play.js
index f8dc393..7824ce3 100644
--- a/play.js
+++ b/play.js
@@ -583,6 +583,12 @@ const ui = {
 		document.getElementById("hand_bavaria"),
 		document.getElementById("hand_saxony"),
 	],
+	missing: [
+		document.getElementById("missing_france"),
+		document.getElementById("missing_prussia"),
+		document.getElementById("missing_pragmatic"),
+		document.getElementById("missing_austria"),
+	],
 	cities: [],
 	roads: [],
 	action_register: [],
@@ -1241,6 +1247,11 @@ function layout_victory_pool(pow, max, x, y) {
 		e.style.top = (y - 16 + (i/5|0) * 20) + "px"
 		ui.markers_element.appendChild(e)
 	}
+	if (n > max) {
+		ui.missing[pow].textContent = "+" + (n-max)
+	} else {
+		ui.missing[pow].textContent = ""
+	}
 	for (let i = 0; i < m; ++i) {
 		let e = ui.victory[pow][used_victory[pow]++]
 		if (pow === P_FRANCE) {