Lord mat and units.

9 files changed, 57 insertions, 59 deletions

diff --git a/images/lord_mat_150.png b/images/lord_mat_150.png
new file mode 100644
index 0000000..5ad649e
--- /dev/null
+++ b/images/lord_mat_150.png
diff --git a/images/lord_mat_75.png b/images/lord_mat_75.png
new file mode 100644
index 0000000..1fb697f
--- /dev/null
+++ b/images/lord_mat_75.png
diff --git a/images/unit_handgunners.svg b/images/unit_handgunners.svg
new file mode 100644
index 0000000..0807f83
--- /dev/null
+++ b/images/unit_handgunners.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="34" height="28">
+<path stroke-width="0.8" stroke-linejoin="round" fill="hsl(357, 55%, 40%)" stroke="#222" d="M20.07 19.315 1.657 8.685l12.273-7.087 18.412 10.63z"/>
+<path stroke-width="0.8" stroke-linejoin="round" fill="hsl(357, 55%, 35%)" stroke="#222" d="M20.07 26.401 1.655 15.771V8.684L20.07 19.315z"/>
+<path stroke-width="0.8" stroke-linejoin="round" fill="hsl(357, 55%, 30%)" stroke="#222" d="M32.344 12.229v7.087L20.07 26.402v-7.086z"/>
+</svg>
diff --git a/images/unit_longbowmen.svg b/images/unit_longbowmen.svg
new file mode 100644
index 0000000..93bb1af
--- /dev/null
+++ b/images/unit_longbowmen.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="34" height="28">
+<path stroke-width="0.8" stroke-linejoin="round" fill="hsl(125, 33%, 35%)" stroke="#222" d="M20.07 19.315 1.657 8.685l12.273-7.087 18.412 10.63z"/>
+<path stroke-width="0.8" stroke-linejoin="round" fill="hsl(125, 33%, 30%)" stroke="#222" d="M20.07 26.401 1.655 15.771V8.684L20.07 19.315z"/>
+<path stroke-width="0.8" stroke-linejoin="round" fill="hsl(125, 33%, 25%)" stroke="#222" d="M32.344 12.229v7.087L20.07 26.402v-7.086z"/>
+</svg>
diff --git a/images/unit_men_at_arms.svg b/images/unit_men_at_arms.svg
new file mode 100644
index 0000000..8fa0c22
--- /dev/null
+++ b/images/unit_men_at_arms.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="34" height="28">
+<path stroke-width="0.8" stroke-linejoin="round" fill="hsl(0, 0%, 55%)" stroke="#222" d="M20.07 19.315 1.657 8.685l12.273-7.087 18.412 10.63z"/>
+<path stroke-width="0.8" stroke-linejoin="round" fill="hsl(0, 0%, 50%)" stroke="#222" d="M20.07 26.401 1.655 15.771V8.684L20.07 19.315z"/>
+<path stroke-width="0.8" stroke-linejoin="round" fill="hsl(0, 0%, 45%)" stroke="#222" d="M32.344 12.229v7.087L20.07 26.402v-7.086z"/>
+</svg>
diff --git a/images/unit_mercenaries.svg b/images/unit_mercenaries.svg
new file mode 100644
index 0000000..c8ab28a
--- /dev/null
+++ b/images/unit_mercenaries.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="34" height="28">
+<path stroke-width="0.8" stroke-linejoin="round" fill="hsl(0, 0%, 30%)" stroke="#222" d="M20.07 19.315 1.657 8.685l12.273-7.087 18.412 10.63z"/>
+<path stroke-width="0.8" stroke-linejoin="round" fill="hsl(0, 0%, 25%)" stroke="#222" d="M20.07 26.401 1.655 15.771V8.684L20.07 19.315z"/>
+<path stroke-width="0.8" stroke-linejoin="round" fill="hsl(0, 0%, 20%)" stroke="#222" d="M32.344 12.229v7.087L20.07 26.402v-7.086z"/>
+</svg>
diff --git a/images/unit_militia.svg b/images/unit_militia.svg
new file mode 100644
index 0000000..9959151
--- /dev/null
+++ b/images/unit_militia.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="34" height="28">
+<path stroke-width="0.8" stroke-linejoin="round" fill="hsl(29, 55%, 40%)" stroke="#222" d="M20.07 19.315 1.657 8.685l12.273-7.087 18.412 10.63z"/>
+<path stroke-width="0.8" stroke-linejoin="round" fill="hsl(29, 55%, 35%)" stroke="#222" d="M20.07 26.401 1.655 15.771V8.684L20.07 19.315z"/>
+<path stroke-width="0.8" stroke-linejoin="round" fill="hsl(29, 55%, 30%)" stroke="#222" d="M32.344 12.229v7.087L20.07 26.402v-7.086z"/>
+</svg>
diff --git a/play.css b/play.css
index e15244c..cd6184c 100644
--- a/play.css
+++ b/play.css
@@ -108,7 +108,7 @@ body.Lancaster #plan_actions .york { display: none }
 }
 
 #battle_grid .grid_array {
-	width: 376px;
+	width: 375px;
 	height: 506px;
 	padding: 36px 12px 12px 12px;
 }
@@ -165,21 +165,21 @@ body.Lancaster #plan_actions .york { display: none }
 
 .mat {
 	position: relative;
-	width: 376px;
+	width: 379px;
 	height: 506px;
 	z-index: 1;
 }
 
 .mat .background {
 	position: absolute;
-	width: 372px;
-	height: 372px;
+	width: 375px;
+	height: 375px;
 	border-radius: 12px;
 	border-width: 2px;
 	border-style: solid;
+	background-image: url(images/lord_mat_75.png);
 	background-color: #d1c07e;
-	background-position: center;
-	background-size: 360px 360px;
+	background-size: 375px 375px;
 	background-repeat: no-repeat;
 	z-index: 4;
 }
@@ -252,11 +252,11 @@ body.shift #capabilities2 {
 	z-index: 200;
 }
 
-.mat .forces, .mat .routed, .mat .assets {
+.mat .forces, .mat .routed, .mat .assets, .mat .card {
 	position: absolute;
 	display: flex;
 	flex-wrap: wrap;
-	justify-content: start;
+	justify-content: center;
 	justify-items: center;
 	align-content: center;
 	align-items: center;
@@ -265,10 +265,6 @@ body.shift #capabilities2 {
 	//background-color: #f004;
 }
 
-.mat > .background > div {
-	//outline: 1px solid red;
-}
-
 .mat .forces {
 	justify-content: center;
 }
@@ -295,27 +291,10 @@ body.shift #capabilities2 {
 	margin-top: -38px;
 }
 
-.mat .shield {
-	position: absolute;
-	background-repeat: no-repeat;
-}
-
-.mat .shield {
-	top: 10px; left: 6px;
-	width: 75px; height: 85px;
-	border-radius: 0 0 50% 50%;
-	filter: drop-shadow(0 0 4px white);
-}
-
-.mat .shield.action {
-	background-image: url(images/shield.svg);
-	filter: drop-shadow(0 0 3px white);
-}
-
-.mat .forces { top: 96px; left: 66px; width: 240px; height: 96px; }
-.mat .routed { top: 200px; left: 18px; width: 236px; height: 48px; }
-.mat .assets { top: 255px; left: 24px; width: 230px; height: 96px; }
-.mat .mustered_vassals { bottom: 134px; right: 6px; width: 94px; }
+.mat .card { top: 96px; left: 16px; }
+.mat .forces { top: 5px; left: 5px; width: 365px; height: 100px; }
+.mat .routed { top: 110px; right: 5px; width: 160px; height: 120px; }
+.mat .assets { top: 235px; right: 15px; width: 140px; height: 125px; }
 
 /* ASSETS */
 
@@ -404,19 +383,30 @@ body.shift #capabilities2 {
 .marker.depleted { background-image: url(images/depleted.png) }
 .marker.victory_check { background-image: url(images/victory_check.png) }
 .marker.valour { background-image: url(images/valour.png) }
-.marker.retinue { background-image: url(images/retinue.png) }
 .marker.rose.york { background-image: url(images/rose_york.png) }
 .marker.rose.lancaster { background-image: url(images/rose_lancaster.png) }
 .marker.source { background-image: url(images/source.png) }
 
+.unit.retinue { background-image: url(images/retinue.png) }
+
 /* UNITS */
 
 .unit {
 	background-size: contain;
 	background-repeat: no-repeat;
+	width: 43px;
+	height: 35px;
 	filter: drop-shadow(0px 2px 2px #0004);
 }
 
+.unit.retinue {
+	border: 2px solid gray;
+	width: 46px;
+	height: 46px;
+	border-radius: 8px;
+	margin: 0 2px;
+}
+
 .unit.action {
 	filter:
 		drop-shadow(2px 0px 0px white)
@@ -425,23 +415,11 @@ body.shift #capabilities2 {
 		drop-shadow(-2px 0px 0px white);
 }
 
-.unit.knights, .unit.sergeants, .unit.light_horse, .unit.asiatic_horse {
-	width: 30px;
-	height: 35px;
-}
-
-.unit.men_at_arms, .unit.militia, .unit.serfs {
-	width: 43px;
-	height: 35px;
-}
-
-.unit.knights { background-image: url(images/unit_knights.svg) }
-.unit.sergeants { background-image: url(images/unit_sergeants.svg) }
-.unit.light_horse { background-image: url(images/unit_light_horse.svg) }
-.unit.asiatic_horse { background-image: url(images/unit_asiatic_horse.svg) }
 .unit.men_at_arms { background-image: url(images/unit_men_at_arms.svg) }
+.unit.longbowmen { background-image: url(images/unit_longbowmen.svg) }
 .unit.militia { background-image: url(images/unit_militia.svg) }
-.unit.serfs { background-image: url(images/unit_serfs.svg) }
+.unit.mercenaries { background-image: url(images/unit_mercenaries.svg) }
+.unit.handgunners { background-image: url(images/unit_handgunners.svg) }
 
 /* CARDS */
 
@@ -460,8 +438,9 @@ body.shift #capabilities2 {
 	background-size: 186px 260px;
 	width: 186px;
 	height: 260px;
-	border-radius: 8px;
+	border-radius: 6px;
 	transition: 100ms;
+	box-shadow: 1px 1px 4px #0008;
 }
 
 .card_info {
diff --git a/play.js b/play.js
index 0e6e8d5..1e50ad1 100644
--- a/play.js
+++ b/play.js
@@ -195,7 +195,7 @@ const LONGBOWMEN = 6
 const force_type_count = 7
 
 
-const force_action_name = [ "Retinue", "Vassal", "Mercenary", "Burgundians", "Men-at-Arms", "Militia", "Longbowmen" ]
+const force_action_name = [ "retinue", "vassal", "mercenary", "burgundians", "men_at_arms", "militia", "longbowmen" ]
 const routed_force_action_name = [ "routed_retinue", "routed_vassal", "routed_mercenary", "routed_burgundians", "routed_men_at_arms", "routed_militia", "routed_longbowmen" ]
 
 const COIN = 1
@@ -531,8 +531,6 @@ const ui = {
 	forces: [],
 	routed: [],
 	assets: [],
-	ready_vassals: [],
-	mustered_vassals: [],
 	lord_capabilities: [],
 	lord_events: [],
 	lord_moved1: [],
@@ -604,9 +602,7 @@ function build_lord_mat(lord, ix, side, name) {
 	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_buttons[ix] = build_div(bg, "shield")
+	ui.lord_buttons[ix] = build_div(bg, "card lord " + side + " " + name)
 	ui.lord_capabilities[ix] = build_div(mat, "capabilities")
 	ui.lord_events[ix] = build_div(mat, "events")
 	ui.lord_moved1[ix] = build_div(mat, "marker square moved_fought one hide")
@@ -995,15 +991,13 @@ function update_lord_mat(ix) {
 	if (view.reveal & (1 << ix)) {
 		ui.lord_mat[ix].classList.remove("hidden")
 		update_assets(ix, ui.assets[ix], view.pieces.assets[ix])
-		update_vassals(ui.ready_vassals[ix], ui.mustered_vassals[ix], ix)
+		// update_vassals(ui.ready_vassals[ix], ui.mustered_vassals[ix], ix)
 		update_forces(ui.forces[ix], view.pieces.forces[ix], ix, false)
 		update_forces(ui.routed[ix], view.pieces.routed[ix], ix, true)
 		ui.lord_feed_x2[ix].classList.toggle("hide", count_lord_all_forces(ix) <= 6)
 	} else {
 		ui.lord_mat[ix].classList.add("hidden")
 		ui.assets[ix].replaceChildren()
-		ui.ready_vassals[ix].replaceChildren()
-		ui.mustered_vassals[ix].replaceChildren()
 		ui.forces[ix].replaceChildren()
 		ui.routed[ix].replaceChildren()
 		ui.lord_moved1[ix].classList.add("hide")