Show mustered vassals.

2 files changed, 48 insertions, 18 deletions

diff --git a/play.html b/play.html
index 06f9e36..2ab1736 100644
--- a/play.html
+++ b/play.html
@@ -142,8 +142,8 @@ body.Teutons #plan_actions .russian { display: none }
 	flex-wrap: wrap;
 	justify-content: center;
 	margin: 36px auto;
-	padding: 18px 12px;
-	gap: 18px;
+	padding: 18px 0;
+	gap: 12px;
 }
 
 .mat {
@@ -172,6 +172,7 @@ body.Teutons #plan_actions .russian { display: none }
 }
 
 .mat .capabilities {
+	pointer-events: none;
 	position: absolute;
 	width: 372px;
 	height: 260px;
@@ -188,7 +189,7 @@ body.shift .capabilities {
 	z-index: 200;
 }
 
-.mat .forces, .mat .routed, .mat .assets, .mat .vassals, #veche {
+.mat .forces, .mat .routed, .mat .assets, #veche {
 	position: absolute;
 	display: flex;
 	flex-wrap: wrap;
@@ -201,17 +202,42 @@ body.shift .capabilities {
 	//background-color: #f004;
 }
 
+.mat > .background > div {
+	//outline: 1px solid red;
+}
+
 .mat .forces, #veche {
 	justify-content: center;
 }
 
-.mat .forces {
+.mat .forces, .mat .routed {
 	gap: 2px;
 }
 
+.mat .ready_vassals {
+	position: absolute;
+	z-index: 6;
+}
+
+.mat .mustered_vassals {
+	position: absolute;
+	z-index: 5;
+}
+
+.mat .ready_vassals .service_marker {
+	margin-top: -8px;
+}
+
+.mat .mustered_vassals .service_marker {
+	margin-top: -38px;
+}
+
 .mat .forces { top: 96px; left: 66px; width: 240px; height: 96px; }
-.mat .routed { top: 200px; left: 18px; width: 336px; height: 48px; }
-.mat .assets { top: 255px; left: 24px; width: 324px; height: 96px; }
+.mat .routed { top: 200px; left: 18px; width: 236px; height: 48px; }
+.mat .assets { top: 255px; left: 24px; width: 230px; height: 96px; }
+.mat .ready_vassals { bottom: 22px; right: 22px; width: 94px; }
+.mat .mustered_vassals { bottom: 138px; right: 8px; width: 94px; }
+X.mat .mustered_vassals { top: 228px; right: 6px; width: 94px; }
 
 .mat.teutonic.andreas .background { background-image:url(images/mat_teutonic_andreas.png) }
 .mat.teutonic.heinrich .background { background-image:url(images/mat_teutonic_heinrich.png) }
@@ -741,7 +767,7 @@ body.shift .capabilities {
 
 .service_marker.russian.lord.action,
 .service_marker.russian.vassal.action {
-	box-shadow: 0 0 0 3px pink;
+	box-shadow: 0 0 0 3px white;
 }
 
 .service_marker.teutonic.lord.selected,
@@ -774,6 +800,8 @@ body.shift .capabilities {
 .service_marker.image12{background-position:0 -504px}
 .service_marker.image13{background-position:0 -546px}
 .service_marker.image14{background-position:0 -588px}
+
+/*
 .service_marker.image0:hover{background-position:100% -0px}
 .service_marker.image1:hover{background-position:100% -42px}
 .service_marker.image2:hover{background-position:100% -84px}
@@ -789,10 +817,7 @@ body.shift .capabilities {
 .service_marker.image12:hover{background-position:100% -504px}
 .service_marker.image13:hover{background-position:100% -546px}
 .service_marker.image14:hover{background-position:100% -588px}
-
-body.shift .service_marker:hover { transform: scale(2); z-index: 200; }
-body.shift .cylinder:hover { transform: scale(2); z-index: 200; }
-body.shift .marker:hover { transform: scale(2); z-index: 200; }
+*/
 
 /* BACKGROUND COLORS AND BORDERS */
 /* :r !node tools/colors.mjs */
diff --git a/play.js b/play.js
index 1b94404..0493bb2 100644
--- a/play.js
+++ b/play.js
@@ -274,6 +274,8 @@ const ui = {
 	forces: [],
 	routed: [],
 	assets: [],
+	ready_vassals: [],
+	mustered_vassals: [],
 	lord_capabilities: [],
 	arts_of_war: [],
 	boxes: {},
@@ -538,14 +540,15 @@ function update_assets(parent, assets) {
 	}
 }
 
-function update_vassals(parent, lord_ix) {
+function update_vassals(ready_parent, mustered_parent, lord_ix) {
 	for (let v of data.lords[lord_ix].vassals) {
 		let e = ui.vassal_service[v]
 		if (view.vassals[v] === 0) {
 			e.classList.remove("hide")
-			parent.appendChild(e)
+			ready_parent.appendChild(e)
 		} else {
-			e.classList.add("hide")
+			e.classList.remove("hide")
+			mustered_parent.appendChild(e)
 		}
 		e.classList.toggle("action", is_vassal_action(v))
 	}
@@ -553,7 +556,7 @@ function update_vassals(parent, lord_ix) {
 
 function update_lord_mat(ix) {
 	update_assets(ui.assets[ix], view.lords.assets[ix])
-	update_vassals(ui.assets[ix], ix)
+	update_vassals(ui.ready_vassals[ix], ui.mustered_vassals[ix], ix)
 	update_forces(ui.forces[ix], view.lords.forces[ix])
 	update_forces(ui.routed[ix], view.lords.routed_forces[ix])
 }
@@ -861,9 +864,11 @@ function build_lord_mat(lord, ix, side, name) {
 	let parent = document.getElementById(side === 'teutonic' ? "p1_court" : "p2_court")
 	let mat = build_div(parent, `mat ${side} ${name} hide`)
 	let bg = build_div(mat, "background")
-	ui.forces[ix] = build_div(bg, "forces", ix)
-	ui.routed[ix] = build_div(bg, "routed", ix)
-	ui.assets[ix] = build_div(bg, "assets", ix)
+	ui.forces[ix] = build_div(bg, "forces")
+	ui.routed[ix] = build_div(bg, "routed")
+	ui.assets[ix] = build_div(bg, "assets")
+	ui.ready_vassals[ix] = build_div(bg, "ready_vassals")
+	ui.mustered_vassals[ix] = build_div(bg, "mustered_vassals")
 	ui.lord_capabilities[ix] = build_div(mat, "capabilities")
 	ui.lord_mat[ix] = mat
 }