From c226f6393a3dc16b358ce58daf2dedb63d2a8da4 Mon Sep 17 00:00:00 2001
From: Tor Andersson <tor@ccxvii.net>
Date: Thu, 14 Jul 2022 15:53:20 +0200
Subject: artillery behind other units

---
 play.html | 12 +++++++-----
 play.js   | 25 +++++++++++++++++++++----
 2 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/play.html b/play.html
index 99b30da..dedbca5 100644
--- a/play.html
+++ b/play.html
@@ -33,9 +33,9 @@ header.your_turn { background-color: orange; }
 
 /* BATTLE DIALOG */
 
+#battle { background-color: #d6c4a9; background: url(texture_clear.png); }
 #battle_header { background-color: brown; color: gold }
 #battle_hits { background-color: #c4ab8b; }
-#battle_line_1, #battle_line_2 { background-color: #d6c4a9; background: url(texture_clear.png); }
 #battle_buttons { background-color: #c4ab8b; }
 #battle_message { background-color: #d6c4a9; }
 
@@ -86,8 +86,8 @@ header.your_turn { background-color: orange; }
 	vertical-align: middle
 }
 
-#battle_line_1, #battle_line_2 {
-	padding: 20px;
+.battle_line {
+	margin: 24px;
 	min-height: 60px;
 	display: flex;
 	flex-wrap: wrap;
@@ -447,8 +447,10 @@ svg .hex.allied_control {
 			<img class="hits_icon" src="icons/artillery.svg">
 			<div class="hits_text" id="hits_artillery">0</div>
 		</div>
-		<div id="battle_line_1"></div>
-		<div id="battle_line_2"></div>
+		<div class="battle_line" id="battle_line_1"></div>
+		<div class="battle_line" id="battle_line_2"></div>
+		<div class="battle_line" id="battle_line_3"></div>
+		<div class="battle_line" id="battle_line_4"></div>
 		<div id="battle_buttons">
 			<button id="target_armor_button" onclick="send_action('armor')">Armor</button>
 			<button id="target_infantry_button" onclick="send_action('infantry')">Infantry</button>
diff --git a/play.js b/play.js
index 6c4fe02..dd7874e 100644
--- a/play.js
+++ b/play.js
@@ -8,6 +8,13 @@ const svgNS = "http://www.w3.org/2000/svg"
 const round = Math.round
 const sqrt = Math.sqrt
 
+const class_name = [ "armor", "infantry", "anti-tank", "artillery" ]
+
+const ARMOR = 0
+const INFANTRY = 1
+const ANTITANK = 2
+const ARTILLERY = 3
+
 function set_has(set, item) {
 	let a = 0
 	let b = set.length - 1
@@ -48,6 +55,8 @@ let ui = {
 	battle_message: document.getElementById("battle_message"),
 	battle_line_1: document.getElementById("battle_line_1"),
 	battle_line_2: document.getElementById("battle_line_2"),
+	battle_line_3: document.getElementById("battle_line_3"),
+	battle_line_4: document.getElementById("battle_line_4"),
 	onmap: document.getElementById("units"),
 	focus: null,
 }
@@ -87,6 +96,10 @@ function is_unit_selected(unit) {
 	return !!(view.selected && view.selected.includes(unit))
 }
 
+function is_artillery_unit(u) {
+	return units[u].class === ARTILLERY
+}
+
 function is_allied_unit(u) {
 	return units[u].nationality === 'allied'
 }
@@ -462,11 +475,15 @@ function update_battle() {
 	ui.battle_header.textContent = hex_name[view.battle]
 	ui.battle_message.textContent = view.flash
 	if (player === ALLIED) {
-		update_battle_line(ui.battle_line_1, is_axis_unit)
-		update_battle_line(ui.battle_line_2, is_allied_unit)
+		update_battle_line(ui.battle_line_1, u => is_axis_unit(u) && is_artillery_unit(u))
+		update_battle_line(ui.battle_line_2, u => is_axis_unit(u) && !is_artillery_unit(u))
+		update_battle_line(ui.battle_line_3, u => is_allied_unit(u) && !is_artillery_unit(u))
+		update_battle_line(ui.battle_line_4, u => is_allied_unit(u) && is_artillery_unit(u))
 	} else {
-		update_battle_line(ui.battle_line_1, is_allied_unit)
-		update_battle_line(ui.battle_line_2, is_axis_unit)
+		update_battle_line(ui.battle_line_1, u => is_allied_unit(u) && is_artillery_unit(u))
+		update_battle_line(ui.battle_line_2, u => is_allied_unit(u) && !is_artillery_unit(u))
+		update_battle_line(ui.battle_line_3, u => is_axis_unit(u) && !is_artillery_unit(u))
+		update_battle_line(ui.battle_line_4, u => is_axis_unit(u) && is_artillery_unit(u))
 	}
 	target_button("armor")
 	target_button("infantry")
-- 
cgit v1.2.3