summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--play.html47
-rw-r--r--play.js19
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
}