Add badges for disrupted/unsupplied enemy units.

5 files changed, 83 insertions, 66 deletions

diff --git a/disrupted.svg b/disrupted.svg
new file mode 100644
index 0000000..d8d5e01
--- /dev/null
+++ b/disrupted.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M326.594 14.97l-39.78 45.468L285.717 170l52.56-95.78-11.686-59.25zM204.438 27.78l-8.25 72.095 53.03 95.063-1.562-108.875-43.22-58.282zM69.75 61.157l35.438 74.28 105.187 77.75-37.72-78.874L69.75 61.156zm365.72 20.25l-66.564 28.875-55.812 93.5 93.5-55.81 28.875-66.564zm.28 91.094l-75 53.063L449.53 223 495 180l-59.25-7.5zm-159.063 21.375l-11.968 38.28-35.908-29.905 13.157 50.875-51.47 18.53 50.28 7.783-11.968 58.062 29.844-36.063 15.97 20.375-.345-46.562 35.94 7.78-11.97-26.905 43.063-41.313-46.063 11.97-18.563-32.907zm-259.218 5.28l91.75 50.94 94.843-.94-81.657-48.218-104.937-1.78zm376.592 47.782l-58.656 20.782 94.094 15.874 62.313-22-97.75-14.656zM81.156 279.063l-45.47 39.75 59.252 11.72 75-47.688-88.782-3.78zm244.22 16.188l78.093 75.875 71.78 10.656-45.125-56.81-104.75-29.72zm-107.22 3.906l-88.97 50.188-58.155 96.906 96.907-58.156 50.22-88.938zm75.47 2.625l15.812 104.158 73.375 76-24.97-108.657-64.218-71.5zm-31.907 40.814l-22 62.344 15.905 94.093 20.78-58.655-14.686-97.78zm-44.19 24.937l-54.374 75.033 6.438 59.25 43.812-45.47 4.125-88.812z" fill="#000" fill-opacity="0.5"></path></svg>
diff --git a/play.html b/play.html
index f92658d..c35e8e7 100644
--- a/play.html
+++ b/play.html
@@ -317,22 +317,9 @@ svg .hex.action.forced_march {
 	stroke: crimson;
 }
 
-svg .hex.from {
-	stroke: yellow;
-	stroke-dasharray: none;
-}
-
-svg .hex.to {
-	stroke: yellow;
-	stroke-dasharray: 4 4;
-}
-
-svg .hex.to.from {
-	stroke-dasharray: 8 4;
-}
-
 svg .hex.selected {
 	stroke: yellow;
+	stroke-dasharray: none;
 }
 
 svg .hex.tip {
@@ -432,6 +419,7 @@ svg #lines line.axis_supply.allied_supply {
 
 .unit {
 	background-size: 1000%;
+	background-repeat: no-repeat;
 	border-style: solid;
 	transition: top 200ms, left 200ms, transform 200ms;
 }
@@ -455,8 +443,6 @@ svg #lines line.axis_supply.allied_supply {
 	border-color: #b7a889;
 	box-shadow: 0 0 2px 1px #5c3a1e80;
 }
-/*
-*/
 
 /*
 .unit.axis {
@@ -508,12 +494,34 @@ svg #lines line.axis_supply.allied_supply {
 	border-color: #222;
 }
 
+.unit.disrupted:not(.revealed) {
+	background-image: url(disrupted.svg);
+	background-size: 75%;
+	background-position: center;
+}
+
 .unit.unsupplied {
-	border-color: blue;
+	border-color: royalblue;
+}
+
+.unit.unsupplied:not(.revealed) {
+	background-image: url(unsupplied.svg);
+	background-size: 75%;
+	background-position: center;
 }
 
 .unit.disrupted.unsupplied {
-	border-color: #222 blue;
+	border-color: #222 royalblue;
+}
+
+.unit.disrupted.unsupplied.r1, .unit.disrupted.unsupplied.r3 {
+	border-color: royalblue #222;
+}
+
+.unit.disrupted.unsupplied:not(.revealed) {
+	background-image: url(unsupplied.svg), url(disrupted.svg);
+	background-size: 50%, 50%;
+	background-position: 0% 90%, 90% 10%;
 }
 
 .unit.r0 { transform: rotate(0deg); }
diff --git a/play.js b/play.js
index ddb552c..64cdc30 100644
--- a/play.js
+++ b/play.js
@@ -242,9 +242,11 @@ function is_side_allied_supply_line(side) {
 }
 
 function is_hex_selected(hex) {
-	if (hex === view.pursuit || hex === view.battle)
+	if (hex === view.pursuit || hex === view.battle || hex === view.selected_hexes)
 		return true
-	return hex === view.selected_hexes || set_has(view.selected_hexes, hex)
+	if (Array.isArray(view.selected_hexes) && view.selected_hexes.includes(hex))
+		return true
+	return false
 }
 
 function is_setup_hex(hex) {
@@ -645,6 +647,29 @@ function build_cards() {
 build_units()
 build_cards()
 
+function update_unit(e, u) {
+	if (is_unit_revealed(u)) {
+		let r = unit_lost_steps(u)
+		e.classList.toggle("r0", r === 0)
+		e.classList.toggle("r1", r === 1)
+		e.classList.toggle("r2", r === 2)
+		e.classList.toggle("r3", r === 3)
+		e.classList.toggle("revealed", true)
+		if (is_italian_unit(u))
+			e.classList.toggle("italian", true)
+	} else {
+		e.classList.toggle("r0", false)
+		e.classList.toggle("r1", false)
+		e.classList.toggle("r2", false)
+		e.classList.toggle("r3", false)
+		e.classList.toggle("revealed", false)
+		if (is_italian_unit(u))
+			e.classList.toggle("italian", false)
+	}
+	e.classList.toggle("disrupted", is_unit_disrupted(u))
+	e.classList.toggle("unsupplied", is_unit_unsupplied(u))
+}
+
 let stack_list = new Array(map_w * map_h + 21)
 for (let i = 0; i < stack_list.length; ++i)
 	stack_list[i] = [[],[]]
@@ -693,30 +718,11 @@ function layout_stack(stack, hex, start_x, start_y, wrap, xdir) {
 		e.style.left = x + "px"
 		e.style.zIndex = z
 
-		if (is_unit_revealed(u)) {
-			let r = unit_lost_steps(u)
-			e.classList.toggle("r0", r === 0)
-			e.classList.toggle("r1", r === 1)
-			e.classList.toggle("r2", r === 2)
-			e.classList.toggle("r3", r === 3)
-			e.classList.toggle("revealed", true)
-			if (is_italian_unit(u))
-				e.classList.toggle("italian", true)
-		} else {
-			e.classList.toggle("r0", false)
-			e.classList.toggle("r1", false)
-			e.classList.toggle("r2", false)
-			e.classList.toggle("r3", false)
-			e.classList.toggle("revealed", false)
-			if (is_italian_unit(u))
-				e.classList.toggle("italian", false)
-		}
+		update_unit(e, u)
 
 		e.classList.toggle("action", !view.battle && is_unit_action(u))
 		e.classList.toggle("selected", !view.battle && is_unit_selected(u))
-		e.classList.toggle("disrupted", is_unit_disrupted(u))
 		e.classList.toggle("moved", is_unit_moved(u))
-		e.classList.toggle("unsupplied", is_unit_unsupplied(u))
 	}
 
 }
@@ -838,8 +844,6 @@ function update_map() {
 		if (ui.hexes[hex]) {
 			ui.hexes[hex].classList.toggle("action", is_hex_action(hex) || is_hex_forced_march_action(hex))
 			ui.hexes[hex].classList.toggle("forced_march", is_hex_forced_march_action(hex))
-			ui.hexes[hex].classList.toggle("from", hex === view.from1 || hex === view.from2)
-			ui.hexes[hex].classList.toggle("to", hex === view.to1 || hex === view.to2)
 			ui.hexes[hex].classList.toggle("selected", is_hex_selected(hex))
 			ui.hexes[hex].classList.toggle("axis_control", is_hex_axis_controlled(hex))
 			ui.hexes[hex].classList.toggle("allied_control", is_hex_allied_controlled(hex))
@@ -881,18 +885,12 @@ function update_battle_line(hex, line, test) {
 			if (!line.contains(e))
 				insert_battle_block(line, e, u)
 
-			let r = unit_lost_steps(u)
-			e.classList.toggle("r0", r === 0)
-			e.classList.toggle("r1", r === 1)
-			e.classList.toggle("r2", r === 2)
-			e.classList.toggle("r3", r === 3)
+			update_unit(e, u)
 
+			e.classList.toggle("selected", is_unit_selected(u))
 			e.classList.toggle("action", is_unit_action(u) || is_unit_hit_action(u))
 			e.classList.toggle("hit", is_unit_hit_action(u))
-			e.classList.toggle("selected", is_unit_selected(u))
-			e.classList.toggle("disrupted", is_unit_disrupted(u))
-			e.classList.toggle("moved", is_unit_fired(u))
-			e.classList.toggle("revealed", is_unit_revealed(u))
+			e.classList.toggle("fired", is_unit_fired(u))
 		} else {
 			if (line.contains(e))
 				line.removeChild(e)
diff --git a/rules.js b/rules.js
index ead708f..2811b83 100644
--- a/rules.js
+++ b/rules.js
@@ -2965,10 +2965,10 @@ function goto_move_phase() {
 }
 
 function show_move_commands() {
-	if (game.from1) view.from1 = game.from1
-	if (game.from2) view.from2 = game.from2
-	if (game.to1) view.to1 = game.to1
-	if (game.to2) view.to2 = game.to2
+	if (game.from1 && game.from2)
+		view.selected_hexes = [ game.from1, game.from2 ]
+	else if (game.from1)
+		view.selected_hexes = game.from1
 }
 
 states.select_moves = {
@@ -3082,10 +3082,13 @@ states.group_move_from = {
 	},
 	hex(x) {
 		push_undo()
-		if (game.from1 === 0)
+		if (game.from1 === 0) {
 			game.from1 = x
-		else
+			print_move_1()
+		} else {
 			game.from2 = x
+			print_move_2()
+		}
 
 		if (x === friendly_queue()) {
 			for_each_friendly_unit_in_hex(friendly_queue(), u => {
@@ -3176,10 +3179,13 @@ states.regroup_move_destination = {
 	},
 	hex(x) {
 		push_undo()
-		if (game.from2 === 0)
+		if (game.from2 === 0) {
 			game.to1 = x
-		else
+			print_move_1()
+		} else {
 			game.to2 = x
+			print_move_2()
+		}
 		if (game.turn_option === 'offensive' && !game.from2)
 			game.state = 'select_moves'
 		else
@@ -3212,30 +3218,35 @@ function search_current_move(who, is_retreat) {
 	}
 }
 
-function goto_move() {
+function print_move_1() {
 	if (game.rommel === 1) {
 		if (game.from1 && game.to1)
-			log(`Rommel Regroup move\nfrom #${game.from1}\nto #${game.to1}.`)
+			log(`Regroup move with Rommel\nfrom #${game.from1}\nto #${game.to1}.`)
 		else if (game.from1)
-			log(`Rommel Group move\nfrom #${game.from1}.`)
+			log(`Group move with Rommel\nfrom #${game.from1}.`)
 	} else {
 		if (game.from1 && game.to1)
 			log(`Regroup move\nfrom #${game.from1}\nto #${game.to1}.`)
 		else if (game.from1)
 			log(`Group move\nfrom #${game.from1}.`)
 	}
+}
+
+function print_move_2() {
 	if (game.rommel === 2) {
 		if (game.from2 && game.to2)
-			log(`Rommel Regroup move\nfrom #${game.from2}\nto #${game.to2}.`)
+			log(`Regroup (R) move\nfrom #${game.from2}\nto #${game.to2}.`)
 		else if (game.from2)
-			log(`Rommel Group move\nfrom #${game.from2}.`)
+			log(`Group (R) move\nfrom #${game.from2}.`)
 	} else {
 		if (game.from2 && game.to2)
 			log(`Regroup move\nfrom #${game.from2}\nto #${game.to2}.`)
 		else if (game.from2)
 			log(`Group move\nfrom #${game.from2}.`)
 	}
+}
 
+function goto_move() {
 	log_br()
 	game.state = 'move'
 }
@@ -3280,8 +3291,6 @@ states.move = {
 		if (game.selected < 0) {
 			view.prompt = `Move: Select unit to move.`
 
-			show_move_commands()
-
 			// Select Group Move 1
 			if (!game.to1 && game.from1) {
 				if (!is_battle_hex(game.from1)) {
diff --git a/unsupplied.svg b/unsupplied.svg
new file mode 100644
index 0000000..af55bd0
--- /dev/null
+++ b/unsupplied.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M411 68.31v.7c0 25.9-53.6 46.99-155 46.99-106.5 0-155-21.09-155-46.99v-1.2c0-15 16.7-26.9 49.7-35.3 28.2-7.2 65.6-11.1 105.3-11.1 39.6 0 77 3.9 105.3 11.1 33 8.4 49.7 20.3 49.7 35.3zm-177-.5c0-4.2-13.2-7.5-29.4-7.5-16.3 0-29.5 3.3-29.5 7.5 0 4.1 13.2 7.5 29.5 7.5 16.2 0 29.4-3.4 29.4-7.5zm167.6 97.89v-60.2c-8.7 6.6-21.9 12.2-39.6 16.7-28.5 7.3-66.1 11.2-106 11.2-39.9 0-77.5-4-106-11.2-17.7-4.5-30.9-10-39.6-16.7v60.2c-6.3 5.3-9.4 11.2-9.4 17.7v1.1c0 25.9 48.5 46.9 155 46.9 101.4 0 155-21 155-46.9v-1.1c0-6.5-3.1-12.4-9.4-17.7zm0 128.9v-73.5c-8.7 6.6-21.9 12.2-39.6 16.7-28.5 7.2-66.1 11.2-106 11.2-39.9 0-77.5-4-106-11.2-17.7-4.5-30.9-10.1-39.6-16.7v73.5c-6.3 5.3-9.4 11.2-9.4 17.7v.9c0 25.9 48.5 46.9 155 46.9 101.4 0 155-21 155-46.9v-.9c0-6.6-3.1-12.5-9.4-17.7zm8.9 145.4c-1.1-4.9-4-9.4-8.9-13.5V350c-8.7 6.6-21.9 12.2-39.6 16.7-28.5 7.2-66.1 11.2-106 11.2-39.9 0-77.5-4-106-11.2-17.7-4.5-30.9-10.1-39.6-16.7v76.5c-4.9 4.1-7.8 8.6-8.9 13.5-.3 1.2-.5 2.5-.5 3.7v.5c0 5.7 2.3 10.9 7 15.6 17 18 64.8 30.8 148 30.8 60.2 0 103.6-7.4 128.9-18.9 17.3-7.5 26.1-16.6 26.1-27.5v-.5c0-1.2-.2-2.5-.5-3.7z" fill="#000" fill-opacity="0.5"></path></svg>