stack influence markers to go above 8

2 files changed, 37 insertions, 14 deletions

diff --git a/play.css b/play.css
index 8b8d19f..f2113ed 100644
--- a/play.css
+++ b/play.css
@@ -266,6 +266,7 @@ body.Communist header.your_turn { background-color: hsl(355, 70%, 75%); }
 }
 
 .power_card {
+	background-color: #093a5b;
 	width: 188px;
 	height: 263px;
 	border-radius: 12px;
diff --git a/play.js b/play.js
index 73357fe..aa7a8b6 100644
--- a/play.js
+++ b/play.js
@@ -395,11 +395,16 @@ function create_country(id, name) {
 	document.getElementById("markers").appendChild(e)
 }
 
+const INF_DX = 35
+const INF_DY = 10
+
 function create_ui() {
 	ui.layout_xy = []
 	ui.spaces = []
 	ui.dem_inf = []
 	ui.com_inf = []
+	ui.dem_inf2 = []
+	ui.com_inf2 = []
 
 	for (let s = 0; s <= last_space; ++s) {
 		let info = spaces[s]
@@ -428,15 +433,29 @@ function create_ui() {
 		com_e.style.top = yc + 12 - 25 + "px"
 		ui.com_inf[s] = com_e
 
+		let com_e2 = document.createElement("div")
+		com_e2.className = "marker comInfl hide"
+		com_e2.style.left = xc + 32 - 25 + INF_DX + "px"
+		com_e2.style.top = yc + 12 - 25 + INF_DY + "px"
+		ui.com_inf2[s] = com_e2
+
 		let dem_e = document.createElement("div")
 		dem_e.className = "marker demInfl hide"
 		dem_e.style.left = xc - 32 - 25 + "px"
 		dem_e.style.top = yc + 12 - 25 + "px"
 		ui.dem_inf[s] = dem_e
 
+		let dem_e2 = document.createElement("div")
+		dem_e2.className = "marker demInfl hide"
+		dem_e2.style.left = xc - 32 - 25 - INF_DX + "px"
+		dem_e2.style.top = yc + 12 - 25 + INF_DY + "px"
+		ui.dem_inf2[s] = dem_e2
+
 		document.getElementById("spaces").append(space_e)
 		document.getElementById("markers").appendChild(com_e)
+		document.getElementById("markers").appendChild(com_e2)
 		document.getElementById("markers").appendChild(dem_e)
+		document.getElementById("markers").appendChild(dem_e2)
 	}
 
 	ui.cards = []
@@ -550,6 +569,21 @@ function layout_country(id) {
 	}
 }
 
+function layout_inf_markers(cn, one, two, v, ctl) {
+	if (ctl)
+		cn += " ctl"
+	if (v > 8) {
+		one.className = cn + " v" + 8
+		two.className = cn + " v" + (v - 8)
+	} else if (v > 0) {
+		one.className = cn + " v" + v
+		two.className = "hide"
+	} else {
+		one.className = "hide"
+		two.className = "hide"
+	}
+}
+
 function on_update() {
 	if (!ui.spaces)
 		create_ui()
@@ -615,20 +649,8 @@ function on_update() {
 	for (let s = 0; s <= last_space; ++s) {
 		const demInfl = view.demInfl[s]
 		const comInfl = view.comInfl[s]
-
-		if (demInfl - comInfl >= spaces[s].stability)
-			ui.dem_inf[s].className = "marker demInfl ctl v" + demInfl
-		else if (demInfl > 0)
-			ui.dem_inf[s].className = "marker demInfl v" + demInfl
-		else
-			ui.dem_inf[s].className = "marker demInfl hide"
-
-		if (comInfl - demInfl >= spaces[s].stability)
-			ui.com_inf[s].className = "marker comInfl ctl v" + comInfl
-		else if (comInfl > 0)
-			ui.com_inf[s].className = "marker comInfl v" + comInfl
-		else
-			ui.com_inf[s].className = "marker comInfl hide"
+		layout_inf_markers("marker demInfl", ui.dem_inf[s], ui.dem_inf2[s], demInfl, demInfl - comInfl >= spaces[s].stability)
+		layout_inf_markers("marker comInfl", ui.com_inf[s], ui.com_inf2[s], comInfl, comInfl - demInfl >= spaces[s].stability)
 	}
 
 	// UPDATE COUNTRY MARKERS