Hatch pattern for showing battle control.

3 files changed, 43 insertions, 31 deletions

diff --git a/map.svg b/map.svg
index 30346a4..c9f3539 100644
--- a/map.svg
+++ b/map.svg
@@ -1,4 +1,8 @@
 <svg id="mapsvg" xmlns="http://www.w3.org/2000/svg" width="2672" height="984">
+<style>
+.hex.axis_control { fill: url(#axis_control) }
+.hex.allied_control { fill: url(#allied_control) }
+</style>
 <defs>
 
 <path id="land_path" d="M551 30c-4 1-10 0-12 5-5 0-9 3-13 6-4 5-9 9-15 11-5 3-10 7-16 7-8 1-13 6-20 9-5 2-11 2-17 3l-14 4-15 6c-4 1-8 4-11 7l-11 6c-5 2-8 5-11 9s-9 4-13 8-9 5-15 8c-5 3-12 3-16 8-5 4-12 6-17 9-7 3-10 10-17 12l-12 9c-5 4-10 9-16 12l-11 8c-12 6-20 17-29 25l-14 10c-2 4-7 4-10 7-4 2-8 3-11 8-2 4-8 6-10 11l-12 11c-2 4-7 6-10 10-6 4-7 12-11 17l-11 17-7 14c-4 5-1 11-5 16-6 10-16 18-17 30 0 8 4 14 7 20 3 10 0 21 0 32s0 25 8 34c4 5 10 9 9 16-2 6-1 13 1 18 5 11 13 20 17 32l14 33c2 8 4 16 4 25 1 6 3 13 7 17 5 8 1 17-1 25l-5 19c-2 7-7 14-11 20-4 4-10 5-13 10-4 6-8 12-14 16-7 7-13 14-21 20-6 4-13 8-18 13-10 8-23 10-34 17-7 3-13 7-18 13-8 7-21 6-30 11-5 3-10 7-16 7-6 2-11-1-16-2l-23-5v273h2728V212l-27 4c-1 8-10 4-15 7-10 2-19 0-29 1-4 0-10 1-13 5-4 7-9 16-19 16-5 1-8-2-9-6-5 1-5 8-10 8-4 1-10 0-11 3 3-1 4 3 1 3-3 1-11 6-8-1l-13 7c-4 3-9 4-13 6-3 5-9 4-14 7-5 4-11 7-18 9l-19 8c-6 2-13 6-18 10-9-2-17 4-26 5-18 0-35-6-51-14l-22-10c-5 0-10-3-16-2-5 1-9 1-13-1-5-3-11-4-16-2-6 2-11 1-16 0s-11 0-15-4c-5-4-13-4-18 1l-14 7c-5 3-11 6-17 3-5-5-12-3-18 0-6 2-12 4-19 4-4 3-9 6-15 6-5 1-11-1-13-7-4-3-6-8-9-11-5-3-10 0-14 2-5 2-11 0-14 5-3 4-9 4-14 5-5-1-10-2-14 1-5 2-11 5-16 2-4-3-7-6-12-5-6 1-11-2-14-7s-10-9-6-15c1-6-6-3-7 1-4 5-10 7-16 6-9 0-19 2-26-4-2-5-6-10-12-8l-22 3c0-5-5-8-10-7s-9 5-15 5c-5 1-11 3-17 2l-14 2c-5-2-11 0-15 3-6 4-12 3-18 4l-18 3c-11 1-22-1-33-2-8-1-16-4-24-1-10 1-19-4-29-4l-20-3-18-5c-8-3-17 0-25-1-8-2-15 3-22 2-11-1-20 7-30 9l-15 4c-4 4-10 5-16 6l-23 5c-4 2-9 3-13 6l-14 4c-7 2-15 4-22 4-6 0-12 2-17 3-9 2-18-1-27-1s-19 0-26-6c-3-2-2-6-6-6 7-2-2-9 2-13-2-3-2-7-3-11v-12c-3-2 2-5-1-8-1-7-9-9-15-11-4-1-9-5-9-10-3-5-2-10-2-16l-2-15c-3-3-5-8-9-10l-14-4c-5-3-10 1-15 0-6 2-10-3-15-4-7-1-14 1-19-3-4-3-7-6-12-6-6-1-5 10-12 7-3 1-4 8-6 3-3-2-6 1-8 1s-4 2-6 1c-4 2-9-5-11 1-1-4-4-6-8-4-3 2-7 0-10 0-4 5-7-1-11 2-9 2-17-2-25-1-6 2-10-2-14-5-5-3-11 4-14-3-4-1-9 0-13 3-4 0-5 6-10 7-3-1-4 1-4 4-4 0-8-5-11 0-3 1-6-3-6 1-3-2-10 1-15-2-5-1-11-2-17-1-4 2-9 1-14 2l-20-1-14-2c0-2-6 0-3-3h-2l-3-2c-4 3-12-6-4-6 3 2 5-3 1-4-3-2-6-2-9-2s-5 3-8 1c-4 2-7-2-11 0-2 2-3 1-4-1-3 0-3 4-6 1-2-3-3 2-6-1-1 3-3 1-5 2 0 1-3 2-3 0-1-3-6 4-4-1-1-3-2 0-3 0-4-4-8-2-12-3h-2c-2-4-7-3-11-4s-7-2-11-1-7-2-10 0l-12 2c-5 0-8 4-13 5-3 0-4 2-7 1h-1c-6 3-12 3-17 5-2 2-6 1-8 2-3 3-9-1-13 3-3 1-5-2-7 2-3 0-7 3-10 1-3 0-4-3-8-4-4-2-10-2-13-5l-11 1c-3 0-8-3-9 2l6 7c-3 4 9 11 1 12-6 0-8-7-9-11-1-7-8-4-11-3l-10-11-6-6c1-2-2-4-4-5-3 0-6-4-9-2-2 1-3 0-4-2 0-4-5 2-9 0-4-1-1 1-1 4-2 0-9-4-4-3 0-2-7-1-8-4-3-3-5-6-6-10s2-9-2-11c-1-3 6-3 4 1 0 1 3 4 5 3v-4c-4-3 4-1 2-4-3-2 1-7-2-9-2 0-4 0-2-2-4 1-4-5-7-6-3-3-1-8-4-13 2-2 5-3 3-7 2-2-1-6-3-6h-1c-1 2 0-2-3-1-4 1-8-4-11-2-3 0-3 3-6 0-3 1-7-1-10-1-5 0-9-2-13-3-4 0-7-2-11-3-3-3-7-5-11-2-4 0-7-3-11-4-3-1-8 1-7-4-3 2-4-3-6 0-6 2-10-2-14-5-5 2-12 1-15-4-6-1-11-5-18-6-4-1-7 2-11 0-6 2-11 3-17 2-3-1-9 0-10-5 2-6-5-8-9-6-4 4-9 7-15 8l-10 4-13 1c-4 0-10 0-13-3 0-5-5-7-9-6-5 2-9 1-12-3l-5-2zm330 118c-6 0 2 7 4 6-1-2 0-6-4-6z" />
@@ -48,6 +52,16 @@
 <image width="1024" height="1024" href="texture_clear.png"/>
 </pattern>
 
+<pattern id="axis_control" width="10" height="10" patternUnits="userSpaceOnUse">
+<g transform="scale(-1,1) translate(-10,0)">
+<path d='M-1,1 l2,-2 M0,10 l10,-10 M9,11 l2,-2' stroke="forestgreen" stroke-opacity="0.4" stroke-width="2"/>
+</g>
+</pattern>
+
+<pattern id="allied_control" width="10" height="10" patternUnits="userSpaceOnUse">
+<path d='M-1,1 l2,-2 M0,10 l10,-10 M9,11 l2,-2' stroke="firebrick" stroke-opacity="0.4" stroke-width="2"/>
+</pattern>
+
 </defs>
 
 <rect id="sea1" x="0" y="0" width="2672" height="988"
diff --git a/play.html b/play.html
index a7775e8..0cfbcae 100644
--- a/play.html
+++ b/play.html
@@ -301,12 +301,22 @@ svg .hex.refit.action {
 	stroke: lightskyblue;
 }
 
+svg .hex.to {
+	stroke: blue;
+	stroke-dasharray: 4 4;
+}
+
 svg .hex.action {
 	stroke: ivory;
 	stroke-dasharray: 2 2;
 	stroke-dashoffset: 1;
 }
 
+svg .hex.from {
+	stroke: yellow;
+	stroke-dasharray: 8 4;
+}
+
 svg .hex.action.forced_march {
 	stroke: crimson;
 }
@@ -315,17 +325,13 @@ svg .hex.selected {
 	stroke: yellow;
 }
 
-/* HEX CONTROL */
-
-svg .hex.axis_control {
-	fill: seagreen;
-	fill-opacity: 0.2;
+svg .hex.tip {
+	stroke: yellow;
+	stroke-width: 3;
+	stroke-dasharray: 4 4;
 }
 
-svg .hex.allied_control {
-	fill: firebrick;
-	fill-opacity: 0.2;
-}
+/* HEX CONTROL */
 
 svg .side.axis_control {
 	stroke: seagreen;
@@ -344,23 +350,6 @@ body.Allied svg .side.allied_control { stroke: none; }
 body.Axis svg .side.axis_control { stroke: none; }
 body.Axis svg .side.allied_control { stroke: black; }
 
-/* HEX HIGHLIGHT */
-
-svg .hex.from {
-	fill: gold;
-	fill-opacity: 0.2;
-}
-
-svg .hex.to {
-	fill: plum;
-	fill-opacity: 0.2;
-}
-
-svg .hex.tip {
-	stroke: yellow;
-	stroke-dasharray: 4 4;
-}
-
 /* SUPPLY LINES */
 
 svg .hex.axis_supply {
diff --git a/rules.js b/rules.js
index 19f9451..823562b 100644
--- a/rules.js
+++ b/rules.js
@@ -2957,9 +2957,17 @@ 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
+}
+
 states.select_moves = {
 	inactive: "move phase",
 	prompt() {
+		show_move_commands()
 		if (game.turn_option === 'offensive') {
 			if (game.from1)
 				view.prompt = `Designate second offensive move.`
@@ -3005,6 +3013,7 @@ function gen_rommel_move() {
 states.group_move_from = {
 	inactive: "move phase",
 	prompt() {
+		show_move_commands()
 		view.prompt = `Group Move: Select hex to move from.`
 		gen_rommel_move()
 		if (game.turn_option !== 'pass') {
@@ -3089,6 +3098,7 @@ states.group_move_from = {
 states.regroup_move_command_point = {
 	inactive: "move phase",
 	prompt() {
+		show_move_commands()
 		view.prompt = `Regroup Move: Designate the command point hex.`
 		gen_rommel_move()
 		if (game.turn_option !== 'pass') {
@@ -3126,6 +3136,7 @@ states.regroup_move_command_point = {
 states.regroup_move_destination = {
 	inactive: "move phase",
 	prompt() {
+		show_move_commands()
 		view.prompt = `Regroup Move: Select destination hex.`
 		gen_rommel_move()
 		let cp, rommel = false
@@ -3256,6 +3267,9 @@ states.move = {
 		let rommel1 = (game.rommel === 1) ? 1 : 0
 		let rommel2 = (game.rommel === 2) ? 1 : 0
 
+		if (game.to1) view.to1 = game.to1
+		if (game.to2) view.to2 = game.to2
+
 		if (game.selected < 0) {
 			view.prompt = `Move: Select unit to move.`
 
@@ -6857,11 +6871,6 @@ exports.view = function(state, current) {
 	if (current === game.active)
 		view.selected = game.selected
 
-	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.pursuit) view.pursuit = game.pursuit
 	if (game.battle) view.battle = game.battle
 	if (game.battle || game.pursuit) {