Combat overlay to show battle lines expanded.

1 files changed, 115 insertions, 21 deletions

diff --git a/play.js b/play.js
index 1b72d44..cf7d345 100644
--- a/play.js
+++ b/play.js
@@ -300,6 +300,11 @@ const BOXES = {
 	"Goths Dice": [1730,195,100,50],
 	"Sassanids Dice": [2380,895,100,50],
 	"Nomads Dice": [570,1520,100,50],
+	"Franks Battle": [750,210,430,180],
+	"Alamanni Battle": [1240,210,430,180],
+	"Goths Battle": [1670,245,430,180],
+	"Sassanids Battle": [2070,980,430,180],
+	"Nomads Battle": [670,1400,430,180],
 }
 
 const LAYOUT_XY = [
@@ -326,6 +331,26 @@ const LAYOUT_XY = [
 	BOXES["Pontus Euxinus XY"],
 ]
 
+const LAYOUT_BATTLE = [
+	BOXES["Italia Capital"],
+	BOXES["Asia Capital"],
+	BOXES["Gallia Capital"],
+	BOXES["Macedonia Capital"],
+	BOXES["Pannonia Capital"],
+	BOXES["Thracia Capital"],
+	BOXES["Britannia Capital"],
+	BOXES["Galatia Capital"],
+	BOXES["Syria Capital"],
+	BOXES["Aegyptus Capital"],
+	BOXES["Africa Capital"],
+	BOXES["Hispania Capital"],
+	BOXES["Alamanni Battle"],
+	BOXES["Franks Battle"],
+	BOXES["Goths Battle"],
+	BOXES["Sassanids Battle"],
+	BOXES["Nomads Battle"],
+]
+
 const LAYOUT_SUPPORT = [
 	BOXES["Italia Support 1"],
 	BOXES["Asia Support"],
@@ -611,6 +636,7 @@ let ui = {
 	hand: document.getElementById("hand"),
 	draw: document.getElementById("draw"),
 	active_event: document.getElementById("active_event"),
+	combat_mask: document.getElementById("combat_mask"),
 	discard: document.getElementById("discard"),
 	played: document.getElementById("played"),
 	market: document.getElementById("market"),
@@ -856,9 +882,39 @@ function on_init() {
 
 let stack_count = new Array(21).fill(0)
 
-function layout_stack(id, list, region, in_capital, dx, dy) {
+let battle_width = 0
+const BATTLE_MIN = 3
+const BATTLE_H_MARGIN = 12
+const BATTLE_V_MARGIN = 12
+const BATTLE_H_GAP = 8
+const BATTLE_V_GAP = 16
+
+function layout_battle_stack(is_att, list, region) {
+	let [ x, y, w, h ] = LAYOUT_BATTLE[region]
+	x += w >> 1
+	if (region < 12)
+		y -= 7
+
+	if (list.length > battle_width)
+		battle_width = list.length
+
+	w = list.length * 60 + (list.length - 1) * BATTLE_H_GAP
+	x -= w / 2
+
+	y += BATTLE_V_MARGIN
+	if (is_att)
+		y += 60 + BATTLE_V_GAP
+
+	for (let item of list) {
+		item.style.left = x + "px"
+		item.style.top = y + "px"
+		item.style.zIndex = 101
+		x += 60 + BATTLE_H_GAP
+	}
+}
+
+function layout_stack(id, list, region, in_capital, dx, dy, z = 1) {
 	let [ x, y, w, h ] = LAYOUT_XY[region]
-	let z = 1
 
 	x += w >> 1
 	y += h >> 1
@@ -885,7 +941,6 @@ function layout_stack(id, list, region, in_capital, dx, dy) {
 		item.style.left = x + "px"
 		item.style.top = y + "px"
 		item.style.zIndex = z
-		item.my_stack = id
 		x -= dx
 		y -= dy
 		z += 1
@@ -900,7 +955,6 @@ function layout_available(list, dx, x0, y0) {
 		item.style.left = x + "px"
 		item.style.top = y + "px"
 		item.style.zIndex = z
-		item.my_stack = 0
 		x += dx
 		z -= 1
 	}
@@ -946,6 +1000,18 @@ function layout_barbarian_dice(black, white, tribe) {
 	}
 }
 
+function is_battle_stack(region, type, id) {
+	if (view.battle_region !== region)
+		return false
+	if (type === "general" && view.battle.attacker === id)
+		return true
+	if (type === "militia" && view.battle.attacker < 0)
+		return true
+	if (type === "militia" && view.battle.type === "militia")
+		return true
+	return view.battle.type === type && view.battle.target === id
+}
+
 function on_update() {
 	let player_count = view.legacy.length
 
@@ -975,6 +1041,8 @@ function on_update() {
 	ui.discard.replaceChildren()
 	ui.market.replaceChildren()
 
+	battle_width = BATTLE_MIN
+
 	for (let pi = 0; pi < player_count; ++pi) {
 		let legacy = view.legacy[pi]
 		let turns = view.emperor_turns[pi]
@@ -1109,15 +1177,16 @@ function on_update() {
 
 	for (let region = 0; region < 12 + 5; ++region) {
 		for (let tribe = 0; tribe < 5; ++tribe) {
+			let battle = []
 			let active_barbarians = []
 			let inactive_barbarians = []
 			for (let id = first_barbarian[tribe]; id <= last_barbarian[tribe]; ++id) {
-				if (id === CNIVA || id === ARDASHIR || id === SHAPUR)
-					continue
 				let loc = get_barbarian_location(id)
 				let inactive = is_barbarian_inactive(id)
 				if (loc === region) {
-					if (inactive)
+					if (is_battle_stack(region, "barbarians", tribe) && (region < 12 || !inactive))
+						battle.push(ui.barbarians[id])
+					else if (inactive)
 						inactive_barbarians.push(ui.barbarians[id])
 					else
 						active_barbarians.push(ui.barbarians[id])
@@ -1130,22 +1199,21 @@ function on_update() {
 					layout_stack(-1, inactive_barbarians, region, false, 8, 8)
 			if (active_barbarians.length > 0)
 				layout_stack(-1, active_barbarians, region, false, 8, 8)
+			if (battle.length > 0)
+				layout_battle_stack(0, battle, region)
 		}
 	}
 
-	for (let id of [ CNIVA, ARDASHIR, SHAPUR ]) {
-		let loc = get_barbarian_location(id)
-		if (loc !== AVAILABLE)
-			layout_stack(-1, [ ui.barbarians[id] ], loc, false, 8, 8)
-	}
-
 	for (let id = 0; id < 3; ++id) {
 		let loc = get_rival_emperor_location(id)
 		if (loc === AVAILABLE)
 			hide(ui.rival_emperors[id])
 		else {
 			show(ui.rival_emperors[id])
-			layout_stack(-1, [ ui.rival_emperors[id] ], loc, false, 8, 8)
+			if (is_battle_stack(loc, "rival_emperor", id))
+				layout_battle_stack(0, [ ui.rival_emperors[id] ], loc)
+			else
+				layout_stack(-1, [ ui.rival_emperors[id] ], loc, false, 8, 8)
 		}
 	}
 
@@ -1170,10 +1238,17 @@ function on_update() {
 				}
 			}
 			if (lone_militia) {
-				if (has_militia_castra(region))
-					layout_stack(-1, [ ui.mcastra[region], ui.militia[region] ], region, true, 16, 16)
-				else
-					layout_stack(-1, [ ui.militia[region] ], region, true, 16, 16)
+				if (is_battle_stack(region, "militia", region)) {
+					if (has_militia_castra(region))
+						layout_battle_stack(view.battle.attacker < 0, [ ui.mcastra[region], ui.militia[region] ], region)
+					else
+						layout_battle_stack(view.battle.attacker < 0, [ ui.militia[region] ], region, true)
+				} else {
+					if (has_militia_castra(region))
+						layout_stack(-1, [ ui.mcastra[region], ui.militia[region] ], region, true, 16, 16)
+					else
+						layout_stack(-1, [ ui.militia[region] ], region, true, 16, 16)
+				}
 			}
 		}
 
@@ -1235,10 +1310,10 @@ function on_update() {
 				if (has_militia(region) && inside)
 					stack.push(ui.militia[region])
 
-				if (inside)
-					layout_stack(pi * 6 + ai, stack, region, true, 16, 16)
+				if (is_battle_stack(region, "general", pi * 6 + ai))
+					layout_battle_stack(pi * 6 + ai === view.battle.attacker, stack, region)
 				else
-					layout_stack(pi * 6 + ai, stack, region, false, 16, 16)
+					layout_stack(pi * 6 + ai, stack, region, inside, 16, 16)
 			} else {
 				avail_stack.push(e)
 			}
@@ -1278,6 +1353,25 @@ function on_update() {
 			layout_available(avail_stack, 64, pi * 625 + 325, 27)
 	}
 
+	if (view.battle) {
+		let [ x, y, w, h ] = LAYOUT_BATTLE[view.battle_region]
+		if (view.battle_region < 12)
+			y -= 7
+		x += w >> 1
+
+		w = battle_width * 60 + (battle_width - 1) * BATTLE_H_GAP + BATTLE_H_MARGIN * 2
+		x -= w / 2
+		h = 120 + BATTLE_V_GAP + BATTLE_V_MARGIN * 2
+
+		show(ui.combat_mask)
+		ui.combat_mask.style.left = x + "px"
+		ui.combat_mask.style.top = y + "px"
+		ui.combat_mask.style.width = w + "px"
+		ui.combat_mask.style.height = h + "px"
+	} else {
+		hide(ui.combat_mask)
+	}
+
 	ui.body.classList.toggle("military", view.color === 0)
 	ui.body.classList.toggle("senate", view.color === 1)
 	ui.body.classList.toggle("populace", view.color === 2)