const cities = data.cities
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 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)
	}
}

on_init()