Add cities and roads to client.

1 files changed, 60 insertions, 5 deletions

diff --git a/play.js b/play.js
index 96a53b9..76c4c02 100644
--- a/play.js
+++ b/play.js
@@ -4,14 +4,69 @@ const last_city = cities.name.length - 1
 const ui = {
 	map_pieces: document.getElementById("pieces"),
 	cities: [],
+	roads: [],
+}
+
+function make_road(type, x, y, dx, dy) {
+	let e = document.createElement("div")
+	e.className = type
+	e.style.left = x + "px"
+	e.style.top = y + "px"
+	let a = Math.atan2(dy, dx)
+	let s = (Math.hypot(dx, dy) - 15) / 20
+	e.style.transform =
+		"rotate(" + a + "rad)" +
+		"scale(" + s + ", 1)"
+	// TODO: rotate to align
+	map_pieces.appendChild(e)
 }
 
 function on_init() {
-	for (let s = 0; s <= last_city; ++s) {
-		let e = ui.cities[s] = document.createElement("div")
-		e.className = "city"
-		e.style.left = (cities.x[s] - 9) + "px"
-		e.style.top = (cities.y[s] - 9) + "px"
+	for (let a = 0; a <= last_city; ++a) {
+		for (let b of cities.major_roads[a]) {
+			if (a < b) {
+				let dx = cities.x[a] - cities.x[b]
+				let dy = cities.y[a] - cities.y[b]
+				let x = (cities.x[a] + cities.x[b]) / 2
+				let y = (cities.y[a] + cities.y[b]) / 2
+				make_road("major_road", x - 10, y - 3, dx, dy)
+			}
+		}
+		for (let b of cities.roads[a]) {
+			if (a < b) {
+				let dx = cities.x[a] - cities.x[b]
+				let dy = cities.y[a] - cities.y[b]
+				let x = (cities.x[a] + cities.x[b]) / 2
+				let y = (cities.y[a] + cities.y[b]) / 2
+				make_road("road", x - 10, y - 1, dx, dy)
+			}
+		}
+	}
+
+	for (let a = 0; a <= last_city; ++a) {
+		let e = ui.cities[a] = document.createElement("div")
+		let x = cities.x[a]
+		let y = cities.y[a]
+
+		if (data.type.major_fortress.includes(a)) {
+			e.className = "major fortress " + cities.country[a]
+			x -= 20
+			y -= 20
+		}
+		else if (data.type.minor_fortress.includes(a)) {
+			e.className = "minor fortress " + cities.country[a]
+			x -= 14
+			y -= 14
+		}
+		else {
+			e.className = "city " + cities.country[a]
+			x -= 12
+			y -= 12
+		}
+
+		e.style.left = x + "px"
+		e.style.top = y + "px"
+		e.title = cities.name[a]
 		map_pieces.appendChild(e)
 	}
 }