Use svg lines to show supply lines.

1 files changed, 59 insertions, 22 deletions

diff --git a/play.js b/play.js
index 9ab21b3..a200363 100644
--- a/play.js
+++ b/play.js
@@ -69,6 +69,7 @@ function set_has(set, item) {
 let ui = {
 	hexes: [],
 	sides: [],
+	lines: [],
 	hex_x: [],
 	hex_y: [],
 	units: [],
@@ -251,7 +252,7 @@ function focus_stack(stack, hex) {
 		console.log("FOCUS STACK", stack, hex)
 		ui.focus = stack
 		update_map()
-		return stack.length <= 1 || hex === hexdeploy + view.month
+		return stack.length <= 1 || is_setup_hex(hex)
 	}
 	return true
 }
@@ -309,6 +310,11 @@ document.getElementById("map").addEventListener("mousedown", function (evt) {
 	}
 })
 
+function for_each_side_in_path(path, fn) {
+	for (let i = 1; i < path.length; ++i)
+		fn(to_side_id(path[i-1], path[i]))
+}
+
 function on_focus_hex(evt) {
 	let h = evt.target.hex
 	let text = "(" + h + ") " + hex_name[h]
@@ -401,11 +407,13 @@ function show_supply(reply) {
 	view.allied_supply_line = reply.allied_supply_line
 	for (let x of all_hexes) {
 		ui.hexes[x].classList.toggle("axis_supply", is_hex_axis_supply(x))
-		for (let s = 0; s < 3; ++s)
-			ui.sides[x*3+s].classList.toggle("axis_supply", is_side_axis_supply_line(x*3+s))
 		ui.hexes[x].classList.toggle("allied_supply", is_hex_allied_supply(x))
-		for (let s = 0; s < 3; ++s)
-			ui.sides[x*3+s].classList.toggle("allied_supply", is_side_allied_supply_line(x*3+s))
+		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))
+			}
+		}
 	}
 }
 
@@ -416,8 +424,10 @@ function hide_supply() {
 			ui.hexes[x].classList.toggle("axis_supply", false)
 			ui.hexes[x].classList.toggle("allied_supply", false)
 			for (let s = 0; s < 3; ++s) {
-				ui.sides[x*3+s].classList.toggle("axis_supply", false)
-				ui.sides[x*3+s].classList.toggle("allied_supply", false)
+				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)
+				}
 			}
 		}
 	}
@@ -440,6 +450,21 @@ const hexdeploy = map_w * map_h
 
 let hexnext = [ 1, map_w, map_w-1, -1, -map_w, -(map_w-1) ]
 
+function to_side_id(a, b) {
+	if (a > b) {
+		let c = b
+		b = a
+		a = c
+	}
+	if (a + hexnext[0] === b)
+		return a * 3 + 0
+	else if (a + hexnext[1] === b)
+		return a * 3 + 1
+	else if (a + hexnext[2] === b)
+		return a * 3 + 2
+	throw new Error("not a hexside " + a + " to " + b)
+}
+
 function build_hexes() {
 	let yoff = 4
 	let xoff = 62
@@ -482,6 +507,16 @@ function build_hexes() {
 		side.side = side_id
 	}
 
+	function add_path(x1, y1, x2, y2, side_id) {
+		let line = ui.lines[side_id] = document.createElementNS(svgNS, "line")
+		line.setAttribute("class", "path")
+		line.setAttribute("x1", x1)
+		line.setAttribute("y1", y1)
+		line.setAttribute("x2", x2)
+		line.setAttribute("y2", y2)
+		document.getElementById("mapsvg").getElementById("lines").appendChild(line)
+	}
+
 	function add_hex(x, y) {
 		let sm_hex_w = hex_w - 8
 		let sm_hex_h = sm_hex_w / sqrt(3) * 2
@@ -525,18 +560,18 @@ function build_hexes() {
 					hex.classList.add("refit")
 				document.getElementById("mapsvg").getElementById("hexes").appendChild(hex)
 			}
+		}
+	}
 
-			// Add hex sides
-			// if (hex_exists[hex_id])
-			{
-				for (let s = 0; s < 3; ++s) {
-					let next_id = hex_id + hexnext[s]
-					// if (hex_exists[next_id])
-					{
-						let side_id = hex_id * 3 + s
-						add_line(hex_x, hex_y, s, side_id)
-					}
-				}
+	for (let hex_id = 0; hex_id < map_w * map_h; ++hex_id) {
+		// Add hex sides
+		{
+			for (let s = 0; s < 3; ++s) {
+				let next_id = hex_id + hexnext[s]
+				let side_id = hex_id * 3 + s
+				add_line(ui.hex_x[hex_id], ui.hex_y[hex_id], s, side_id)
+				if (hex_exists[hex_id] && hex_exists[next_id])
+					add_path(ui.hex_x[hex_id], ui.hex_y[hex_id], ui.hex_x[next_id], ui.hex_y[next_id], side_id)
 			}
 		}
 	}
@@ -621,11 +656,13 @@ function update_map() {
 		let hex = unit_hex(u)
 		if (hex >= hexdeploy + view.month + 10)
 			hex = 0
-		if (hex === hexdeploy + view.month) {
+		if (is_setup_hex(hex)) {
 			if (player === "Axis" && !is_axis_unit(u))
 				hex = 0
 			if (player === "Allied" && !is_allied_unit(u))
 				hex = 0
+			if (player !== "Axis" && player !== "Allied")
+				hex = 0
 		}
 		if (view.month <= 10 && hex === MALTA)
 			hex = 0
@@ -671,7 +708,7 @@ function update_map() {
 		let start_y = ui.hex_y[hex]
 		let wrap = 6
 
-		if (hex === hexdeploy + view.month) {
+		if (is_setup_hex(hex)) {
 			start_x = 1095
 			start_y = 25 + 8
 		}
@@ -687,7 +724,7 @@ function update_map() {
 			let e = ui.units[u]
 			let x, y, z
 
-			if (hex === hexdeploy + view.month) {
+			if (is_setup_hex(hex)) {
 				if (view.month == 8)
 					wrap = 14
 				else
@@ -761,7 +798,7 @@ function update_cards() {
 			ui.cards[i+28].classList.toggle("hide", i >= view.cards[1])
 	} else {
 		for (let i = 0; i < 42; ++i)
-			ui.cards[i+28].classList.add("hide")
+			ui.cards[i].classList.add("hide")
 	}
 }