Cycle supply line overlay between axis/allied/both/none.

Also update colors.

3 files changed, 75 insertions, 58 deletions

diff --git a/play.css b/play.css
index b6b6c52..80bb750 100644
--- a/play.css
+++ b/play.css
@@ -360,32 +360,8 @@ svg #lines line {
 	stroke-linecap: round;
 }
 
-svg .hex.axis_supply {
-	fill: forestgreen;
-	fill-opacity: 0.4;
-}
-
-svg .hex.allied_supply {
-	fill: firebrick;
-	fill-opacity: 0.4;
-}
-
-svg .hex.axis_supply.allied_supply {
-	fill: blue;
-	fill-opacity: 0.4;
-}
-
-svg #lines line.axis_supply {
-	stroke: darkgreen;
-}
-
-svg #lines line.allied_supply {
-	stroke: darkred;
-}
-
-svg #lines line.axis_supply.allied_supply {
-	stroke: navy;
-}
+svg .hex.axis_supply { fill-opacity: 0.4; }
+svg .hex.allied_supply { fill-opacity: 0.4; }
 
 /* UNITS */
 
diff --git a/play.html b/play.html
index 1f0753f..20dfe9a 100644
--- a/play.html
+++ b/play.html
@@ -96,9 +96,30 @@
 <style>
 .hex.axis_control { fill: url(#axis_control_16) }
 .hex.allied_control { fill: url(#allied_control_16) }
+.hex.axis_supply { fill: seagreen }
+.hex.allied_supply { fill: sienna }
+.hex.axis_supply.allied_supply { fill: url(#both_hex); }
+#lines line.allied_supply { stroke: saddlebrown; }
+#lines line.axis_supply { stroke: #1b7d4a; }
+#lines line.allied_supply.axis_supply { stroke: url(#both_line); }
 </style>
+
 <defs>
 
+<linearGradient id="both_line" x1="0" x2="30" gradientUnits="userSpaceOnUse" spreadMethod="repeat" gradientTransform="rotate(60)">
+<stop offset="0%" stop-color="saddlebrown" />
+<stop offset="50%" stop-color="saddlebrown" />
+<stop offset="50%" stop-color="#1b7d4a" />
+<stop offset="100%" stop-color="#1b7d4a" />
+</linearGradient>
+
+<linearGradient id="both_hex" x1="0" x2="60.75" gradientUnits="userSpaceOnUse" spreadMethod="repeat" gradientTransform="rotate(0)">
+<stop offset="0%" stop-color="seagreen" />
+<stop offset="50%" stop-color="seagreen" />
+<stop offset="50%" stop-color="sienna" />
+<stop offset="100%" stop-color="sienna" />
+</linearGradient>
+
 <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" />
 
 <clipPath id="land_clip">
diff --git a/play.js b/play.js
index c7fefdd..daae5d4 100644
--- a/play.js
+++ b/play.js
@@ -226,10 +226,6 @@ function is_hex_forced_march_action(hex) {
 	return !!(view.actions && view.actions.forced_march && view.actions.forced_march.includes(hex))
 }
 
-function is_hex_axis_supply(hex) {
-	return view.axis_supply[hex] > 0
-}
-
 function is_hex_axis_controlled(hex) {
 	return set_has(view.axis_hexes, hex)
 }
@@ -246,16 +242,20 @@ function is_side_allied_controlled(side) {
 	return set_has(view.allied_sides, side)
 }
 
-function is_side_axis_supply_line(side) {
-	return view.axis_supply_line[side] > 0
+function is_hex_axis_supply(hex) {
+	return supply.axis_supply[hex] > 0
 }
 
 function is_hex_allied_supply(hex) {
-	return view.allied_supply[hex] > 0
+	return supply.allied_supply[hex] > 0
+}
+
+function is_side_axis_supply_line(side) {
+	return supply.axis_supply_line[side] > 0
 }
 
 function is_side_allied_supply_line(side) {
-	return view.allied_supply_line[side] > 0
+	return supply.allied_supply_line[side] > 0
 }
 
 function is_hex_selected(hex) {
@@ -423,43 +423,59 @@ function toggle_units() {
 	document.getElementById("units").classList.toggle("hide")
 }
 
-let showing_supply = false
+let supply_show = 0
+let supply = null
 
 function toggle_supply() {
-	if (!showing_supply)
+	if (supply_show === 0)
+		supply_show = (player === AXIS) ? 1 : 2
+	else if (supply_show === 1)
+		supply_show = (player === AXIS) ? 2 : 3
+	else if (supply_show === 2)
+		supply_show = (player === AXIS) ? 3 : 1
+	else if (supply_show === 3)
+		supply_show = 0
+	if (!supply)
 		send_query('supply')
 	else
-		hide_supply()
+		update_supply()
 }
 
-function show_supply(reply) {
-	showing_supply = true
-	view.axis_supply = reply.axis_supply
-	view.axis_supply_line = reply.axis_supply_line
-	view.allied_supply = reply.allied_supply
-	view.allied_supply_line = reply.allied_supply_line
+function hide_supply() {
+	supply_show = 0
+	update_supply()
+}
+
+function fetch_supply() {
+	if (supply) {
+		supply = null
+		send_query('supply')
+	}
+}
+
+function update_supply() {
 	for (let x of all_hexes) {
-		ui.hexes[x].classList.toggle("axis_supply", is_hex_axis_supply(x))
-		ui.hexes[x].classList.toggle("allied_supply", is_hex_allied_supply(x))
+		ui.hexes[x].classList.toggle("axis_supply", false)
+		ui.hexes[x].classList.toggle("allied_supply", false)
 		for (let s = 0; s < 3; ++s) {
 			if (ui.lines[x*3+s]) {
-				ui.lines[x*3+s].classList.toggle("axis_supply", is_side_axis_supply_line(x*3+s))
-				ui.lines[x*3+s].classList.toggle("allied_supply", is_side_allied_supply_line(x*3+s))
+				ui.lines[x*3+s].classList.toggle("axis_supply", false)
+				ui.lines[x*3+s].classList.toggle("allied_supply", false)
 			}
 		}
 	}
-}
-
-function hide_supply() {
-	if (showing_supply) {
-		showing_supply = false
+	if (supply) {
 		for (let x of all_hexes) {
-			ui.hexes[x].classList.toggle("axis_supply", false)
-			ui.hexes[x].classList.toggle("allied_supply", false)
+			if (supply_show & 1)
+				ui.hexes[x].classList.toggle("axis_supply", is_hex_axis_supply(x))
+			if (supply_show & 2)
+				ui.hexes[x].classList.toggle("allied_supply", is_hex_allied_supply(x))
 			for (let s = 0; s < 3; ++s) {
 				if (ui.lines[x*3+s]) {
-					ui.lines[x*3+s].classList.toggle("axis_supply", false)
-					ui.lines[x*3+s].classList.toggle("allied_supply", false)
+					if (supply_show & 1)
+						ui.lines[x*3+s].classList.toggle("axis_supply", is_side_axis_supply_line(x*3+s))
+					if (supply_show & 2)
+						ui.lines[x*3+s].classList.toggle("allied_supply", is_side_allied_supply_line(x*3+s))
 				}
 			}
 		}
@@ -1026,6 +1042,8 @@ function on_update() {
 		return setTimeout(on_update, 500)
 	}
 
+	fetch_supply()
+
 	update_map()
 	update_cards()
 
@@ -1102,8 +1120,10 @@ function on_update() {
 }
 
 function on_reply(q, params) {
-	if (q === 'supply')
-		show_supply(params)
+	if (q === 'supply') {
+		supply = params
+		update_supply()
+	}
 }
 
 function on_focus_hex_tip(x) {