1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
|
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()
|
