imported play files from nevsky

1 files changed, 1943 insertions, 0 deletions

diff --git a/play.js b/play.js
new file mode 100644
index 0000000..b3e2f56
--- /dev/null
+++ b/play.js
@@ -0,0 +1,1943 @@
+"use strict"
+
+// TODO: show strikers and targets highlighting on battle mat?
+
+function toggle_pieces() {
+	document.getElementById("pieces").classList.toggle("hide")
+}
+
+// === COMMON LIBRARY ===
+
+function map_has(map, key) {
+	let a = 0
+	let b = (map.length >> 1) - 1
+	while (a <= b) {
+		let m = (a + b) >> 1
+		let x = map[m<<1]
+		if (key < x)
+			b = m - 1
+		else if (key > x)
+			a = m + 1
+		else
+			return true
+	}
+	return false
+}
+
+function map_get(map, key, missing) {
+	let a = 0
+	let b = (map.length >> 1) - 1
+	while (a <= b) {
+		let m = (a + b) >> 1
+		let x = map[m<<1]
+		if (key < x)
+			b = m - 1
+		else if (key > x)
+			a = m + 1
+		else
+			return map[(m<<1)+1]
+	}
+	return missing
+}
+
+function set_has(set, item) {
+	let a = 0
+	let b = set.length - 1
+	while (a <= b) {
+		let m = (a + b) >> 1
+		let x = set[m]
+		if (item < x)
+			b = m - 1
+		else if (item > x)
+			a = m + 1
+		else
+			return true
+	}
+	return false
+}
+
+// === CONSTANTS (matching those in rules.js) ===
+
+function find_lord(name) { return data.lords.findIndex((x) => x.name === name) }
+function find_card(name) { return data.cards.findIndex((x) => x.name === name) }
+
+const LORD_ANDREAS = find_lord("Andreas")
+const LORD_HERMANN = find_lord("Hermann")
+const LORD_ALEKSANDR = find_lord("Aleksandr")
+const LORD_ANDREY = find_lord("Andrey")
+const LORD_KNUD_ABEL = find_lord("Knud & Abel")
+const LORD_RUDOLF = find_lord("Rudolf")
+
+const first_p1_lord = 0
+const last_p1_lord = 5
+const first_p2_lord = 6
+const last_p2_lord = 11
+
+const first_p1_card = 0
+const last_p1_card = 20
+const first_p2_card = 21
+const last_p2_card = 41
+
+const first_p1_locale = 0
+const last_p1_locale = 23
+const first_p2_locale = 24
+const last_p2_locale = 52
+
+const R1 = find_card("R1")
+const R11 = find_card("R11")
+const R17 = find_card("R17")
+const T4 = find_card("T4")
+const T10 = find_card("T10")
+const T14 = find_card("T14")
+const EVENT_RUSSIAN_BRIDGE = R1
+const EVENT_TEUTONIC_BRIDGE = T4
+const EVENT_TEUTONIC_FIELD_ORGAN = T10
+const AOW_TEUTONIC_TREBUCHETS = T14
+const EVENT_RUSSIAN_VALDEMAR = R11
+const EVENT_RUSSIAN_DIETRICH_VON_GRUNINGEN = R17
+
+const A1 = 0, A2 = 1, A3 = 2, D1 = 3, D2 = 4, D3 = 5, SA1 = 6, SA2 = 7, SA3 = 8, RG1 = 9, RG2 = 10, RG3 = 11
+
+const KNIGHTS = 0, SERGEANTS = 1, LIGHT_HORSE = 2, ASIATIC_HORSE = 3, MEN_AT_ARMS = 4, MILITIA = 5, SERFS = 6
+const force_type_count = 7
+const force_action_name = [ "knights", "sergeants", "light_horse", "asiatic_horse", "men_at_arms", "militia", "serfs" ]
+const routed_force_action_name = [ "routed_knights", "routed_sergeants", "routed_light_horse", "routed_asiatic_horse", "routed_men_at_arms", "routed_militia", "routed_serfs" ]
+
+const COIN = 1
+const asset_type_count = 7
+const asset_action_name = [ "prov", "coin", "loot", "cart", "sled", "boat", "ship" ]
+const asset_type_x3 = [ 1, 1, 1, 0, 0, 0, 0 ]
+
+const VECHE = 100
+const SUMMER = 0, EARLY_WINTER = 1, LATE_WINTER = 2, RASPUTITSA = 3
+const SEASONS = [ null,
+	SUMMER, SUMMER, EARLY_WINTER, EARLY_WINTER, LATE_WINTER, LATE_WINTER, RASPUTITSA, RASPUTITSA,
+	SUMMER, SUMMER, EARLY_WINTER, EARLY_WINTER, LATE_WINTER, LATE_WINTER, RASPUTITSA, RASPUTITSA,
+	null ]
+
+const VASSAL_READY = 1
+const VASSAL_MUSTERED = 2
+const NOWHERE = -1
+const CALENDAR = 100
+const LEGATE_INDISPOSED = -2
+const LEGATE_ARRIVED = -1
+const GARRISON = 100
+
+// === ACTIONS ===
+
+function is_action(action, arg) {
+	if (arg === undefined)
+		return !!(view.actions && view.actions[action] === 1)
+	return !!(view.actions && view.actions[action] && set_has(view.actions[action], arg))
+}
+
+function on_action(evt) {
+	if (evt.button === 0) {
+		if (evt.target.my_id === undefined) {
+			send_action(evt.target.my_action)
+			if (evt.target.my_action_2)
+				send_action(evt.target.my_action_2)
+		} else {
+			send_action(evt.target.my_action, evt.target.my_id)
+			if (evt.target.my_action_2)
+				send_action(evt.target.my_action_2, evt.target.my_id)
+		}
+	}
+}
+
+function register_action(elt, action, id, action_2) {
+	elt.my_id = id
+	elt.my_action = action
+	elt.my_action_2 = action_2
+	elt.onmousedown = on_action
+}
+
+// === TOOLTIPS ===
+
+function register_tooltip(elt, focus, blur) {
+	if (typeof focus === "function")
+		elt.onmouseenter = focus
+	else
+		elt.onmouseenter = () => on_focus(focus)
+	if (blur)
+		elt.onmouseleave = blur
+	else
+		elt.onmouseleave = on_blur
+}
+
+function on_focus(text) {
+	document.getElementById("status").textContent = text
+}
+
+function on_blur() {
+	document.getElementById("status").textContent = ""
+}
+
+function get_locale_tip(id) {
+	let loc = data.locales[id]
+	let tip = loc.name
+	if (loc.name !== "Novgorod") {
+		if (loc.type === "traderoute")
+			tip += " - Trade Route"
+		else
+			tip += " - " + loc.type[0].toUpperCase() + loc.type.substring(1)
+	}
+	if (data.seaports.includes(id))
+		tip += " - Seaport"
+	let list = []
+	if (loc.name === "Adsel" || loc.name === "Fellin" || loc.name === "Leal" || loc.name === "Wenden")
+		list.push("Commandery")
+	if (loc.name === "Novgorod")
+		list.push("Archbishopric")
+	for (let lord = 0; lord < data.lords.length; ++lord) {
+		if (data.lords[lord].seats.includes(id))
+			list.push(data.lords[lord].name)
+	}
+	if (loc.name === "Pskov")
+		list.push("Yaroslav")
+	if (list.length > 0)
+		tip += " - " + list.join(", ")
+	return tip
+}
+
+function is_event_in_play(c) {
+	return set_has(view.events, c)
+}
+
+function on_focus_cylinder(evt) {
+	let lord = evt.target.my_id
+	let info = data.lords[lord]
+	let loc = view.pieces.locale[lord]
+	let tip = info.name
+
+	if (loc >= CALENDAR) {
+		if (lord !== LORD_ALEKSANDR)
+			tip += ` - ${info.fealty} Fealty`
+		tip += ` - ${info.service} Service`
+	}
+
+	if (lord === LORD_KNUD_ABEL)
+		if (is_event_in_play(EVENT_RUSSIAN_VALDEMAR))
+			tip += ` - No Muster because of Valdemar!`
+	if (lord === LORD_ANDREAS || lord === LORD_RUDOLF)
+		if (is_event_in_play(EVENT_RUSSIAN_DIETRICH_VON_GRUNINGEN))
+			tip += ` - No Muster because of Dietrich von Grüningen!`
+
+	on_focus(tip)
+}
+
+function on_focus_lord_service_marker(evt) {
+	let lord = evt.target.my_id
+	let info = data.lords[lord]
+	on_focus(`${info.full_name} - ${info.title}`)
+	if (expand_calendar !== view.pieces.service[lord]) {
+		expand_calendar = view.pieces.service[lord]
+		layout_calendar()
+	}
+}
+
+function on_blur_lord_service_marker(evt) {
+	let id = evt.target.my_id
+	on_blur(evt)
+	if (expand_calendar === view.pieces.service[id]) {
+		expand_calendar = -1
+		layout_calendar()
+	}
+}
+
+// === GAME STATE ===
+
+function current_season() {
+	return SEASONS[view.turn >> 1]
+}
+
+function max_plan_length() {
+	switch (current_season()) {
+	case SUMMER: return 6
+	case EARLY_WINTER: return 4
+	case LATE_WINTER: return 4
+	case RASPUTITSA: return 5
+	}
+}
+
+function is_p1_lord(lord) {
+	return lord >= first_p1_lord && lord <= last_p1_lord
+}
+
+function is_p2_lord(lord) {
+	return lord >= first_p2_lord && lord <= last_p2_lord
+}
+
+function is_lord_besieged(lord) {
+	let besieged = pack1_get(view.pieces.besieged, lord)
+	// show sallying lords as not besieged
+	if (view.battle && view.battle.array && view.battle.reserves.includes(lord))
+		return false
+	return besieged
+}
+
+function is_lord_on_left_or_right(lord) {
+	if (view.battle.array[A1] === lord) return true
+	if (view.battle.array[A3] === lord) return true
+	if (view.battle.array[D1] === lord) return true
+	if (view.battle.array[D3] === lord) return true
+	if (view.battle.array[SA1] === lord) return true
+	if (view.battle.array[SA3] === lord) return true
+	if (view.battle.array[RG1] === lord) return true
+	if (view.battle.array[RG3] === lord) return true
+	return false
+}
+
+function is_lord_ambushed(lord) {
+	if (view.battle) {
+		// ambush & 2 = attacker played ambush
+		// ambush & 1 = defender played ambush
+		if (view.battle.attacker === "Teutons") {
+			if ((view.battle.ambush & 1) && is_p1_lord(lord))
+				return is_lord_on_left_or_right(lord)
+			if ((view.battle.ambush & 2) && is_p2_lord(lord))
+				return is_lord_on_left_or_right(lord)
+		} else {
+			if ((view.battle.ambush & 1) && is_p2_lord(lord))
+				return is_lord_on_left_or_right(lord)
+			if ((view.battle.ambush & 2) && is_p1_lord(lord))
+				return is_lord_on_left_or_right(lord)
+		}
+	}
+	return false
+}
+
+function get_lord_moved(lord) {
+	return pack2_get(view.pieces.moved, lord)
+}
+
+function get_lord_forces(lord, n) {
+	return pack4_get(view.pieces.forces[lord], n)
+}
+
+function count_lord_all_forces(lord) {
+	return (
+		get_lord_forces(lord, KNIGHTS) +
+		get_lord_forces(lord, SERGEANTS) +
+		get_lord_forces(lord, LIGHT_HORSE) +
+		get_lord_forces(lord, ASIATIC_HORSE) +
+		get_lord_forces(lord, MEN_AT_ARMS) +
+		get_lord_forces(lord, MILITIA) +
+		get_lord_forces(lord, SERFS)
+	)
+}
+
+function is_p1_locale(loc) {
+	return loc >= first_p1_locale && loc <= last_p1_locale
+}
+
+function is_p2_locale(loc) {
+	return loc >= first_p2_locale && loc <= last_p2_locale
+}
+
+function count_vp1() {
+	let vp = view.pieces.elr1 << 1
+	vp += view.pieces.castles1.length << 1
+	for (let loc of view.pieces.conquered)
+		if (is_p2_locale(loc))
+			vp += data.locales[loc].vp << 1
+	for (let loc of view.pieces.ravaged)
+		if (is_p2_locale(loc))
+			vp += 1
+	return vp
+}
+
+function count_vp2() {
+	let vp = view.pieces.elr2 << 1
+	vp += view.pieces.veche_vp << 1
+	vp += view.pieces.castles2.length << 1
+	for (let loc of view.pieces.conquered)
+		if (is_p1_locale(loc))
+			vp += data.locales[loc].vp << 1
+	for (let loc of view.pieces.ravaged)
+		if (is_p1_locale(loc))
+			vp += 1
+	return vp
+}
+
+function get_lord_locale(lord) {
+	return view.pieces.locale[lord]
+}
+
+function is_lord_on_map(lord) {
+	let loc = get_lord_locale(lord)
+	return loc !== NOWHERE && loc < CALENDAR
+}
+
+function is_vassal_ready(vassal) {
+	return view.pieces.vassals[vassal] === VASSAL_READY
+}
+
+function is_vassal_mustered(vassal) {
+	return view.pieces.vassals[vassal] === VASSAL_MUSTERED
+}
+
+function is_legate_selected() {
+	return player === "Teutons" && !!view.pieces.legate_selected
+}
+
+function is_levy_phase() {
+	return (view.turn & 1) === 0
+}
+
+function is_upper_lord(lord) {
+	return map_has(view.pieces.lieutenants, lord)
+}
+
+function is_lower_lord(lord) {
+	for (let i = 1; i < view.pieces.lieutenants.length; i += 2)
+		if (view.pieces.lieutenants[i] === lord)
+			return true
+	return false
+}
+
+function get_lower_lord(upper) {
+	return map_get(view.pieces.lieutenants, upper, -1)
+}
+
+function is_lord_in_battle(lord) {
+	if (view.battle && view.battle.array) {
+		for (let i = 0; i < 12; ++i)
+			if (view.battle.array[i] === lord)
+				return true
+		if (view.battle.reserves.includes(lord))
+			return true
+	}
+	return false
+}
+
+function is_lord_command(ix) {
+	return view.command === ix
+}
+
+function is_lord_selected(ix) {
+	if (view.who >= 0)
+		return ix === view.who
+	if (view.group)
+		return view.group.includes(ix)
+	return false
+}
+
+function is_town_locale(loc) {
+	return data.locales[loc].type === "town"
+}
+
+function has_castle_marker(loc) {
+	return (
+		set_has(view.pieces.castles1, loc) ||
+		set_has(view.pieces.castles2, loc)
+	)
+}
+
+function is_castle(loc) {
+	return data.locales[loc].type === "castle" || has_castle_marker(loc)
+}
+
+function is_bishopric(loc) {
+	return data.locales[loc].type === "bishopric"
+}
+
+function has_walls(loc) {
+	return set_has(view.pieces.walls, loc)
+}
+
+function lord_has_unrouted_units(lord) {
+	return view.pieces.forces[lord] !== 0
+}
+
+function get_lord_capability(lord, n) {
+	return view.pieces.capabilities[(lord << 1) + n]
+}
+
+function lord_has_capability_card(lord, c) {
+	let name = data.cards[c].capability
+	let c1 = get_lord_capability(lord, 0)
+	if (c1 >= 0 && data.cards[c1].capability === name)
+		return true
+	let c2 = get_lord_capability(lord, 1)
+	if (c2 >= 0 && data.cards[c2].capability === name)
+		return true
+	return false
+}
+
+function lord_has_capability(lord, card_or_list) {
+	if (Array.isArray(card_or_list)) {
+		for (let card of card_or_list)
+			if (lord_has_capability_card(lord, card))
+				return true
+		return false
+	}
+	return lord_has_capability_card(lord, card_or_list)
+}
+
+function attacker_has_trebuchets() {
+	if (view.battle.attacker === "Teutons") {
+		for (let lord = first_p1_lord; lord <= last_p1_lord; ++lord) {
+			if (get_lord_locale(lord) === view.battle.where && lord_has_unrouted_units(lord)) {
+				if (lord_has_capability(lord, AOW_TEUTONIC_TREBUCHETS))
+					return true
+			}
+		}
+	}
+	return false
+}
+
+function count_siege_markers(loc) {
+	return map_get(view.pieces.sieges, loc, 0)
+}
+
+// === BUILD UI ===
+
+const original_boxes = {
+	"way crossroads": [ 375, 1179, 116, 37 ],
+	"way wirz": [ 324, 1132, 44, 88 ],
+	"way peipus-east": [ 558, 1049, 55, 120 ],
+	"way peipus-north": [ 513, 958, 90, 57 ],
+	"calendar summer box1": [ 10, 42, 150, 231 ],
+	"calendar summer box2": [ 163, 42, 150, 231 ],
+	"calendar winter box3": [ 328, 42, 150, 231 ],
+	"calendar winter box4": [ 481, 42, 150, 231 ],
+	"calendar winter box5": [ 647, 42, 150, 231 ],
+	"calendar winter box6": [ 799, 42, 150, 231 ],
+	"calendar rasputitsa box7": [ 965, 42, 150, 231 ],
+	"calendar rasputitsa box8": [ 1118, 42, 150, 231 ],
+	"calendar summer box9": [ 10, 280, 150, 231 ],
+	"calendar summer box10": [ 163, 280, 150, 231 ],
+	"calendar winter box11": [ 328, 280, 150, 231 ],
+	"calendar winter box12": [ 481, 280, 150, 231 ],
+	"calendar winter box13": [ 647, 280, 150, 231 ],
+	"calendar winter box14": [ 799, 280, 150, 231 ],
+	"calendar rasputitsa box15": [ 965, 280, 150, 231 ],
+	"calendar rasputitsa box16": [ 1118, 280, 150, 231 ],
+	"calendar box0": [ 2, 16, 316, 22 ],
+	"calendar box17": [ 957, 514, 316, 22 ],
+}
+
+const calendar_xy = [
+	[ 10, 2 ],
+	[ 10, 42 ],
+	[ 162, 42 ],
+	[ 328, 42 ],
+	[ 480, 42 ],
+	[ 646, 42 ],
+	[ 799, 42 ],
+	[ 965, 42 ],
+	[ 1117, 42 ],
+	[ 10, 280 ],
+	[ 162, 280 ],
+	[ 328, 280 ],
+	[ 480, 280 ],
+	[ 646, 280 ],
+	[ 799, 280 ],
+	[ 965, 280 ],
+	[ 1117, 280 ],
+	[ 1115, 517 ],
+]
+
+const locale_xy = []
+
+let expand_calendar = -1
+
+const ui = {
+	locale: [],
+	locale_name: [],
+	locale_markers: [],
+	lord_cylinder: [],
+	lord_service: [],
+	lord_mat: [],
+	lord_buttons: [],
+	vassal_service: [],
+	forces: [],
+	routed: [],
+	assets: [],
+	ready_vassals: [],
+	mustered_vassals: [],
+	lord_capabilities: [],
+	lord_events: [],
+	lord_moved1: [],
+	lord_moved2: [],
+	lord_feed_x2: [],
+	cards: [],
+	boxes: {},
+	ways: [],
+	smerdi: document.getElementById("smerdi"),
+	legate: document.getElementById("legate"),
+	veche: document.getElementById("veche"),
+
+	plan_panel: document.getElementById("plan_panel"),
+	plan: document.getElementById("plan"),
+	plan_actions: document.getElementById("plan_actions"),
+	plan_cards: [],
+	plan_action_cards: [],
+
+	arts_of_war_panel: document.getElementById("arts_of_war_panel"),
+	arts_of_war: document.getElementById("arts_of_war"),
+
+	reserves_panel: document.getElementById("reserves_panel"),
+	reserves: document.getElementById("reserves"),
+
+	events_panel: document.getElementById("events_panel"),
+	events: document.getElementById("events"),
+
+	hand_panel: document.getElementById("hand_panel"),
+	hand: document.getElementById("hand"),
+
+	held1: document.querySelector("#role_Teutons .role_held"),
+	held2: document.querySelector("#role_Russians .role_held"),
+
+	capabilities1: document.getElementById("capabilities1"),
+	capabilities2: document.getElementById("capabilities2"),
+	command: document.getElementById("command"),
+	turn: document.getElementById("turn"),
+	elr1: document.getElementById("elr1"),
+	elr2: document.getElementById("elr2"),
+	vp1: document.getElementById("vp1"),
+	vp2: document.getElementById("vp2"),
+	court1_header: document.getElementById("court1_header"),
+	court2_header: document.getElementById("court2_header"),
+	court1: document.getElementById("court1"),
+	court2: document.getElementById("court2"),
+	garrison: document.getElementById("garrison"),
+	battle_walls: [
+		document.getElementById("battle_walls1"),
+		document.getElementById("battle_walls2"),
+		document.getElementById("battle_walls3"),
+		document.getElementById("battle_walls4"),
+	],
+	battle_siegeworks: document.getElementById("grid_sw"),
+	battle_panel: document.getElementById("battle_panel"),
+	battle_header: document.getElementById("battle_header"),
+	pursuit: document.getElementById("pursuit"),
+	battle_grid: document.getElementById("battle_grid"),
+	battle_grid_array: [
+		document.getElementById("grid_a1"),
+		document.getElementById("grid_a2"),
+		document.getElementById("grid_a3"),
+		document.getElementById("grid_d1"),
+		document.getElementById("grid_d2"),
+		document.getElementById("grid_d3"),
+		document.getElementById("grid_sa1"),
+		document.getElementById("grid_sa2"),
+		document.getElementById("grid_sa3"),
+		document.getElementById("grid_rg1"),
+		document.getElementById("grid_rg2"),
+		document.getElementById("grid_rg3"),
+	],
+	castles: [
+		document.getElementById("castle11"),
+		document.getElementById("castle12"),
+		document.getElementById("castle21"),
+		document.getElementById("castle22"),
+	],
+}
+
+let locale_layout = []
+let calendar_layout_service = []
+let calendar_layout_cylinder = []
+
+function clean_name(name) {
+	return name.toLowerCase().replaceAll("&", "and").replaceAll(" ", "_")
+}
+
+function build_div(parent, className) {
+	let e = document.createElement("div")
+	e.className = className
+	if (parent)
+		parent.appendChild(e)
+	return e
+}
+
+function build_lord_mat(lord, ix, side, name) {
+	let mat = build_div(null, `mat ${side} ${name}`)
+	let bg = build_div(mat, "background")
+	ui.forces[ix] = build_div(bg, "forces")
+	ui.routed[ix] = build_div(bg, "routed")
+	ui.assets[ix] = build_div(bg, "assets")
+	ui.ready_vassals[ix] = build_div(bg, "ready_vassals")
+	ui.mustered_vassals[ix] = build_div(bg, "mustered_vassals")
+	ui.lord_buttons[ix] = build_div(bg, "shield")
+	ui.lord_capabilities[ix] = build_div(mat, "capabilities")
+	ui.lord_events[ix] = build_div(mat, "events")
+	ui.lord_moved1[ix] = build_div(mat, "marker square moved_fought one hide")
+	ui.lord_moved2[ix] = build_div(mat, "marker square moved_fought two hide")
+	ui.lord_feed_x2[ix] = build_div(mat, "marker small feed_x2")
+	ui.lord_mat[ix] = mat
+	register_action(ui.lord_buttons[ix], "lord", ix)
+}
+
+function build_card(side, c) {
+	let card = ui.cards[c] = document.createElement("div")
+	card.className = `card ${side} aow_${c}`
+	register_action(card, "card", c)
+}
+
+function build_plan() {
+	let elt
+	for (let i = 0; i < 6; ++i) {
+		elt = document.createElement("div")
+		elt.className = "hide"
+		ui.plan_cards.push(elt)
+		ui.plan.appendChild(elt)
+	}
+	for (let lord = 0; lord < 12; ++lord) {
+		let side = lord < 6 ? "teutonic" : "russian"
+		elt = document.createElement("div")
+		elt.className = `card ${side} cc_lord_${lord}`
+		register_action(elt, "plan", lord)
+		ui.plan_action_cards.push(elt)
+		ui.plan_actions.appendChild(elt)
+	}
+
+	ui.plan_action_pass_p1 = elt = document.createElement("div")
+	elt.className = `card teutonic cc_pass`
+	register_action(elt, "plan", -1)
+	ui.plan_actions.appendChild(elt)
+
+	ui.plan_action_pass_p2 = elt = document.createElement("div")
+	elt.className = `card russian cc_pass`
+	register_action(elt, "plan", -1)
+	ui.plan_actions.appendChild(elt)
+}
+
+function build_way(name, sel) {
+	let way = data.ways.findIndex(w => w.name === name)
+	ui.ways[way] = document.querySelector(sel)
+	register_action(ui.ways[way], "way", way)
+}
+
+const locale_size = {
+	region: [ 88, 56 ],
+	town: [ 80, 72 ],
+	traderoute: [ 90, 54 ],
+	fort: [ 96, 54 ],
+	castle: [ 96, 56 ],
+	city: [ 126, 80 ],
+	bishopric: [ 106, 72 ],
+	novgorod: [ 144, 86 ],
+}
+
+function build_map() {
+	for (let i = 0; i < data.locales.length; ++i)
+		locale_layout[i] = []
+
+	data.locales.forEach((locale, ix) => {
+		let region = clean_name(locale.region)
+		let { x, y, w, h } = locale.box
+		let xc = Math.round(x + w / 2)
+		let yc = Math.round(y + h / 2)
+		let e
+
+		switch (locale.type) {
+		case "town":
+			locale_xy[ix] = [ xc, y - 24 ]
+			w = locale_size.town[0]
+			h = locale_size.town[1]
+			x = xc - w/2
+			y = y - h + 16
+			break
+		case "region":
+			xc += 2
+			yc -= 3
+			locale_xy[ix] = [ xc, yc - 24 ]
+			w = locale_size.region[0]
+			h = locale_size.region[1]
+			x = xc - w/2
+			y = yc - h/2
+			break
+		default:
+			locale_xy[ix] = [ xc, y - 36 ]
+			break
+		}
+
+		// Main Area
+		e = ui.locale[ix] = document.createElement("div")
+		e.className = "locale " + locale.type + " " + region
+		if (locale.type !== "region" && locale.type !== "town") {
+			let ew = locale_size[locale.type][0]
+			let eh = locale_size[locale.type][1]
+			e.style.top = (y - eh) + "px"
+			e.style.left = (xc - ew/2) + "px"
+			e.style.width = (ew) + "px"
+			e.style.height = (eh) + "px"
+		} else {
+			e.style.left = x + "px"
+			e.style.top = y + "px"
+			e.style.width = w + "px"
+			e.style.height = h + "px"
+		}
+		register_action(e, "locale", ix, "laden_march")
+		register_tooltip(e, get_locale_tip(ix))
+		document.getElementById("locales").appendChild(e)
+
+		// Name Plate
+		if (locale.type !== 'region' && locale.type !== 'town') {
+			e = ui.locale_name[ix] = document.createElement("div")
+			e.className = "locale_name " + locale.type + " " + region
+			e.style.left = x + "px"
+			e.style.top = y + "px"
+			e.style.width = w + "px"
+			e.style.height = h + "px"
+			register_action(e, "locale", ix, "laden_march")
+			register_tooltip(e, get_locale_tip(ix))
+			document.getElementById("locales").appendChild(e)
+		}
+
+		// Locale Markers
+		e = ui.locale_markers[ix] = document.createElement("div")
+		e.className = "locale_markers " + locale.type + " " + region
+		x = locale_xy[ix][0] - 196/2
+		y = locale_xy[ix][1] + 36
+		e.style.top = y + "px"
+		e.style.left = x + "px"
+		e.style.width = 196 + "px"
+		document.getElementById("pieces").appendChild(e)
+	})
+
+	data.lords.forEach((lord, ix) => {
+		let e = ui.lord_cylinder[ix] = document.createElement("div")
+		e.className = "cylinder lord " + clean_name(lord.side) + " " + clean_name(lord.name) + " hide"
+		register_action(e, "lord", ix)
+		register_tooltip(e, on_focus_cylinder)
+		document.getElementById("pieces").appendChild(e)
+
+		e = ui.lord_service[ix] = document.createElement("div")
+		e.className = "service_marker lord image" + lord.image + " " + clean_name(lord.side) + " " + clean_name(lord.name) + " hide"
+		register_action(e, "service", ix, "service_bad")
+		register_tooltip(e, on_focus_lord_service_marker, on_blur_lord_service_marker)
+		document.getElementById("pieces").appendChild(e)
+
+		build_lord_mat(lord, ix, clean_name(lord.side), clean_name(lord.name))
+	})
+
+	data.vassals.forEach((vassal, ix) => {
+		let lord = data.lords[vassal.lord]
+		let e = ui.vassal_service[ix] = document.createElement("div")
+		e.className = "service_marker vassal image" + vassal.image + " " + clean_name(lord.side) + " " + clean_name(vassal.name) + " hide"
+		register_action(e, "vassal", ix)
+		register_tooltip(e, data.vassals[ix].name)
+		document.getElementById("pieces").appendChild(e)
+	})
+
+	register_action(ui.legate, "legate")
+	register_tooltip(ui.legate, "William of Modena")
+
+	register_action(ui.veche, "veche")
+
+	for (let name in original_boxes) {
+		let x = original_boxes[name][0]
+		let y = original_boxes[name][1]
+		let w = original_boxes[name][2] - 8
+		let h = original_boxes[name][3] - 8
+		let e = ui.boxes[name] = document.createElement("div")
+		e.className = "box " + name
+		e.style.left = x + "px"
+		e.style.top = y + "px"
+		e.style.width = w + "px"
+		e.style.height = h + "px"
+		document.getElementById("boxes").appendChild(e)
+	}
+
+	ui.calendar = [
+		document.querySelector(".calendar.box0"),
+		document.querySelector(".calendar.box1"),
+		document.querySelector(".calendar.box2"),
+		document.querySelector(".calendar.box3"),
+		document.querySelector(".calendar.box4"),
+		document.querySelector(".calendar.box5"),
+		document.querySelector(".calendar.box6"),
+		document.querySelector(".calendar.box7"),
+		document.querySelector(".calendar.box8"),
+		document.querySelector(".calendar.box9"),
+		document.querySelector(".calendar.box10"),
+		document.querySelector(".calendar.box11"),
+		document.querySelector(".calendar.box12"),
+		document.querySelector(".calendar.box13"),
+		document.querySelector(".calendar.box14"),
+		document.querySelector(".calendar.box15"),
+		document.querySelector(".calendar.box16"),
+		document.querySelector(".calendar.box17")
+	]
+
+	for (let i = 0; i <= 17; ++i)
+		register_action(ui.calendar[i], "calendar", i)
+
+	build_way("Crossroads", ".way.crossroads")
+	build_way("Peipus E", ".way.peipus-east")
+	build_way("Peipus W", ".way.peipus-north")
+	build_way("Wirz", ".way.wirz")
+
+	build_plan()
+
+	register_action(ui.garrison, "garrison")
+	for (let i = 0; i < 12; ++i)
+		register_action(ui.battle_grid_array[i], "array", i)
+
+	for (let c = first_p1_card; c <= last_p1_card; ++c)
+		build_card("teutonic", c)
+	for (let c = first_p2_card; c <= last_p2_card; ++c)
+		build_card("russian", c)
+}
+
+// === UPDATE UI ===
+
+let used_cache = {}
+let unused_cache = {}
+
+function get_cached_element(className, action, id) {
+	let key = className
+	if (action !== undefined)
+		key += "/" + action + "/" + id
+	if (!(key in unused_cache)) {
+		unused_cache[key] = []
+		used_cache[key] = []
+	}
+	if (unused_cache[key].length > 0) {
+		let elt = unused_cache[key].pop()
+		used_cache[key].push(elt)
+		return elt
+	}
+	let elt = document.createElement("div")
+	elt.className = className
+	used_cache[key].push(elt)
+	if (action !== undefined)
+		register_action(elt, action, id)
+	return elt
+}
+
+function restart_cache() {
+	for (let k in used_cache) {
+		let u = used_cache[k]
+		let uu = unused_cache[k]
+		while (u.length > 0)
+			uu.push(u.pop())
+	}
+}
+
+function update_current_card_display() {
+	if (typeof view.what === "number" && view.what >= 0) {
+		if (view.what <= first_p1_card)
+			ui.command.className = `card teutonic aow_${view.what}`
+		else
+			ui.command.className = `card russian aow_${view.what}`
+	} else if ((view.turn & 1) === 0) {
+		if (player === "Russians")
+			ui.command.className = `card russian aow_back`
+		else
+			ui.command.className = `card teutonic aow_back`
+	} else if (view.command < 0) {
+		if (player === "Russians")
+			ui.command.className = `card russian cc_back`
+		else
+			ui.command.className = `card teutonic cc_back`
+	} else {
+		if (view.command < 6)
+			ui.command.className = `card russian cc_lord_${view.command}`
+		else
+			ui.command.className = `card teutonic cc_lord_${view.command}`
+	}
+}
+
+function layout_locale_item(loc, e, is_upper) {
+	locale_layout[loc].push([e, is_upper])
+	e.classList.toggle("lieutenant", is_upper)
+}
+
+function layout_locale_cylinders(loc) {
+	let [xc, yc] = locale_xy[loc]
+
+	let n = 0
+	for (let [e,is_upper] of locale_layout[loc])
+		if (!is_upper)
+			++n
+
+	let wrap = 3
+	switch (data.locales[loc].type) {
+	case "region": wrap = 2; break
+	case "town": wrap = 2; break
+	case "novgorod": wrap = 4; break
+	}
+
+	let m = Math.floor((n-1) / wrap)
+	let i = 0
+	let k = 0
+	for (let [e,is_upper] of locale_layout[loc]) {
+		let nn = n
+		if (nn > wrap)
+			nn = wrap
+		let x = xc + (i - (nn-1)/2) * 44 + k * 22
+		let y = yc + (k * 32) - m * 32
+		let z = 1
+		if (is_upper) {
+			y -= 18
+			z = 2
+		}
+		if (e === ui.legate) {
+			y -= 16
+			z = 3
+		}
+		e.style.top = (y - 23) + "px"
+		e.style.left = (x - 23) + "px"
+		e.style.zIndex = z
+		if (!is_upper)
+			++i
+		if (i >= wrap) {
+			i = 0
+			++k
+		}
+	}
+}
+
+function layout_calendar() {
+	for (let loc = 0; loc < 18; ++loc) {
+		let [cx, cy] = calendar_xy[loc]
+		let list = calendar_layout_service[loc]
+		for (let i = 0; i < list.length; ++i) {
+			let e = list[i]
+			let x = cx, y = cy, z = 60 - i
+			let d = 46 - 24
+			if (loc === expand_calendar) {
+				d = 46
+				z += 100
+			}
+			if (loc === 0) {
+				x += -6 + 46 * i
+				z = 1
+			} else if (loc === 17) {
+				x += 60 - 46 * i
+				z = 60 - i
+			} else {
+				x += (146 - 94 - 2)
+				y += (227 - 46 - 2) - i * d
+			}
+			e.style.top = y + "px"
+			e.style.left = x + "px"
+			e.style.zIndex = z
+		}
+
+		list = calendar_layout_cylinder[loc]
+		for (let i = 0; i < list.length; ++i) {
+			let e = list[i]
+			let x = cx, y = cy, z = 61
+			if (loc === 0) {
+				let k = calendar_layout_service[0].length
+				if (k > 0)
+					x += k * 46 + 46 + i * 46
+				else
+					x += 0 + i * 46
+			} else if (loc === 17) {
+				let k = calendar_layout_service[17].length
+				if (k > 0)
+					x += 60 - k * 46 - i * 46
+				else
+					x += 60 + i * 46
+			} else if (loc === 1) {
+				x += 46 + (i%2) * 46 + (i/2|0) * 12
+				y += 66 + (i/2|0) * 36
+			} else {
+				x += 6 + (i%3) * 46 + (i/3|0) * 24
+				y += 66 + (i/3|0) * 36
+			}
+			e.style.top = y + "px"
+			e.style.left = x + "px"
+			e.style.zIndex = z
+		}
+	}
+}
+
+function add_force(parent, type, lord, routed) {
+	let elt
+	if (routed) {
+		if (is_action(routed_force_action_name[type], lord))
+			elt = get_cached_element("action unit " + force_action_name[type], routed_force_action_name[type], lord)
+		else
+			elt = get_cached_element("unit " + force_action_name[type], routed_force_action_name[type], lord)
+	} else {
+		if (is_action(force_action_name[type], lord))
+			elt = get_cached_element("action unit " + force_action_name[type], force_action_name[type], lord)
+		else
+			elt = get_cached_element("unit " + force_action_name[type], force_action_name[type], lord)
+	}
+	parent.appendChild(elt)
+}
+
+function add_asset(parent, type, n, lord) {
+	let elt
+	if (lord === VECHE) {
+		if (is_action("veche_coin"))
+			elt = get_cached_element("action asset " + asset_action_name[type] + " x"+n, "veche_coin", undefined)
+		else
+			elt = get_cached_element("asset " + asset_action_name[type] + " x"+n)
+	} else {
+		if (is_action(asset_action_name[type], lord))
+			elt = get_cached_element("action asset " + asset_action_name[type] + " x"+n, asset_action_name[type], lord)
+		else
+			elt = get_cached_element("asset " + asset_action_name[type] + " x"+n)
+	}
+	parent.appendChild(elt)
+}
+
+function add_veche_vp(parent) {
+	parent.appendChild(get_cached_element("marker square conquered russian"))
+}
+
+function update_forces(parent, forces, lord_ix, routed) {
+	parent.replaceChildren()
+	for (let i = 0; i < force_type_count; ++i) {
+		let n = pack4_get(forces, i)
+		for (let k = 0; k < n; ++k) {
+			add_force(parent, i, lord_ix, routed)
+		}
+	}
+}
+
+function update_assets(id, parent, assets) {
+	parent.replaceChildren()
+	for (let i = 0; i < asset_type_count; ++i) {
+		let n = pack4_get(assets, i)
+		while (n >= 4) {
+			add_asset(parent, i, 4, id)
+			n -= 4
+		}
+		if (asset_type_x3[i]) {
+			while (n >= 3) {
+				add_asset(parent, i, 3, id)
+				n -= 3
+			}
+		}
+		while (n >= 2) {
+			add_asset(parent, i, 2, id)
+			n -= 2
+		}
+		while (n >= 1) {
+			add_asset(parent, i, 1, id)
+			n -= 1
+		}
+	}
+}
+
+function update_vassals(ready_parent, mustered_parent, lord_ix) {
+	for (let v of data.lords[lord_ix].vassals) {
+		let e = ui.vassal_service[v]
+		if (is_vassal_ready(v)) {
+			e.classList.remove("hide")
+			ready_parent.appendChild(e)
+		}
+		else if (is_vassal_mustered(v)) {
+			e.classList.remove("hide")
+			mustered_parent.appendChild(e)
+		}
+		else {
+			e.classList.add("hide")
+		}
+		e.classList.toggle("action", is_action("vassal", v))
+	}
+}
+
+function update_lord_mat(ix) {
+	if (view.reveal & (1 << ix)) {
+		ui.lord_mat[ix].classList.remove("hidden")
+		update_assets(ix, ui.assets[ix], view.pieces.assets[ix])
+		update_vassals(ui.ready_vassals[ix], ui.mustered_vassals[ix], ix)
+		update_forces(ui.forces[ix], view.pieces.forces[ix], ix, false)
+		update_forces(ui.routed[ix], view.pieces.routed[ix], ix, true)
+		ui.lord_feed_x2[ix].classList.toggle("hide", count_lord_all_forces(ix) <= 6)
+	} else {
+		ui.lord_mat[ix].classList.add("hidden")
+		ui.assets[ix].replaceChildren()
+		ui.ready_vassals[ix].replaceChildren()
+		ui.mustered_vassals[ix].replaceChildren()
+		ui.forces[ix].replaceChildren()
+		ui.routed[ix].replaceChildren()
+		ui.lord_moved1[ix].classList.add("hide")
+		ui.lord_moved2[ix].classList.add("hide")
+		ui.lord_feed_x2[ix].classList.add("hide")
+	}
+	let m = get_lord_moved(ix)
+	ui.lord_moved1[ix].classList.toggle("hide", is_levy_phase() || (m !== 1 && m !== 2))
+	ui.lord_moved2[ix].classList.toggle("hide", is_levy_phase() || (m !== 2))
+}
+
+function update_lord(ix) {
+	let locale = view.pieces.locale[ix]
+	let service = view.pieces.service[ix]
+	if (locale < 0) {
+		ui.lord_cylinder[ix].classList.add("hide")
+		ui.lord_service[ix].classList.add("hide")
+		ui.lord_mat[ix].classList.remove("action")
+		return
+	}
+	if (locale < 100) {
+		calendar_layout_service[service].push(ui.lord_service[ix])
+
+		if (!is_lower_lord(ix)) {
+			if (is_upper_lord(ix)) {
+				let lo = get_lower_lord(ix)
+				if (view.pieces.locale[lo] === locale) {
+					layout_locale_item(locale, ui.lord_cylinder[ix], 1)
+					layout_locale_item(locale, ui.lord_cylinder[lo], 0)
+				} else {
+					layout_locale_item(locale, ui.lord_cylinder[ix], 0)
+				}
+			} else {
+				layout_locale_item(locale, ui.lord_cylinder[ix], 0)
+			}
+		}
+
+		ui.lord_cylinder[ix].classList.remove("hide")
+		ui.lord_service[ix].classList.remove("hide")
+		update_lord_mat(ix)
+	} else {
+		let t = locale - 100
+		if (t > 17) t = 17
+		calendar_layout_cylinder[t].push(ui.lord_cylinder[ix])
+		ui.lord_cylinder[ix].classList.remove("hide")
+		ui.lord_service[ix].classList.add("hide")
+	}
+	ui.lord_cylinder[ix].classList.toggle("besieged", is_lord_besieged(ix))
+	ui.lord_buttons[ix].classList.toggle("action", is_action("lord", ix))
+	ui.lord_cylinder[ix].classList.toggle("action", is_action("lord", ix))
+	ui.lord_service[ix].classList.toggle("action", is_action("service", ix) || is_action("service_bad", ix))
+	ui.lord_service[ix].classList.toggle("bad", is_action("service_bad", ix))
+
+	if (ix === LORD_HERMANN)
+		ui.lord_cylinder[ix].classList.toggle("marshal", !is_lord_on_map(LORD_ANDREAS))
+	if (ix === LORD_ANDREY)
+		ui.lord_cylinder[ix].classList.toggle("marshal", !is_lord_on_map(LORD_ALEKSANDR))
+
+	ui.lord_cylinder[ix].classList.toggle("selected", is_lord_selected(ix))
+	ui.lord_service[ix].classList.toggle("selected", is_lord_selected(ix))
+	ui.lord_mat[ix].classList.toggle("selected", is_lord_selected(ix))
+
+	ui.lord_cylinder[ix].classList.toggle("command", is_lord_command(ix))
+	ui.lord_mat[ix].classList.toggle("command", is_lord_command(ix))
+
+	ui.lord_mat[ix].classList.toggle("besieged", is_lord_besieged(ix))
+	ui.lord_mat[ix].classList.toggle("ambushed", is_lord_ambushed(ix))
+}
+
+function update_legate() {
+	if (view.pieces.legate === LEGATE_INDISPOSED) {
+		ui.legate.classList.add("hide")
+	} else {
+		ui.legate.classList.remove("hide")
+		ui.legate.classList.toggle("action", is_action("legate"))
+		ui.legate.classList.toggle("selected", is_legate_selected())
+		if (view.pieces.legate === LEGATE_ARRIVED) {
+			ui.legate.style.top = "1356px"
+			ui.legate.style.left = "24px"
+		} else {
+			layout_locale_item(view.pieces.legate, ui.legate, 0)
+		}
+	}
+}
+
+function update_smerdi() {
+	ui.smerdi.replaceChildren()
+	for (let i = 0; i < view.pieces.smerdi; ++i)
+		ui.smerdi.appendChild(get_cached_element("unit serfs"))
+}
+
+function update_veche() {
+	ui.veche.replaceChildren()
+
+	let n = view.pieces.veche_coin
+	while (n >= 4) {
+		add_asset(ui.veche, COIN, 4, VECHE)
+		n -= 4
+	}
+	while (n >= 3) {
+		add_asset(ui.veche, COIN, 3, VECHE)
+		n -= 3
+	}
+	while (n >= 2) {
+		add_asset(ui.veche, COIN, 2, VECHE)
+		n -= 2
+	}
+	while (n >= 1) {
+		add_asset(ui.veche, COIN, 1, VECHE)
+		n -= 1
+	}
+
+	for (let i = 0; i < view.pieces.veche_vp; ++i)
+		add_veche_vp(ui.veche)
+}
+
+function update_castle(elt, loc) {
+	if (loc === undefined) {
+		elt.classList.toggle("hide", true)
+	} else {
+		elt.classList.toggle("hide", false)
+		let [xc, yc] = locale_xy[loc]
+		if (is_town_locale(loc)) {
+			elt.style.top = (yc - 26) + "px"
+			elt.style.left = (xc - 49) + "px"
+		} else {
+			elt.style.top = (yc - 15) + "px"
+			elt.style.left = (xc - 49) + "px"
+		}
+		elt.style.zIndex = 0
+	}
+}
+
+function is_teutonic_siege_marker(loc) {
+	if (set_has(view.pieces.castles2, loc))
+		return true
+	if (set_has(view.pieces.castles1, loc))
+		return false
+	if (is_p1_locale(loc))
+		return set_has(view.pieces.conquered, loc)
+	else
+		return !set_has(view.pieces.conquered, loc)
+}
+
+function update_locale(loc) {
+	layout_locale_cylinders(loc)
+
+	ui.locale[loc].classList.toggle("action", is_action("locale", loc) || is_action("laden_march", loc))
+	ui.locale[loc].classList.toggle("laden", is_action("laden_march", loc))
+	ui.locale[loc].classList.toggle("supply_path", !!(view.supply && view.supply[0] === loc))
+	ui.locale[loc].classList.toggle("supply_source", !!(view.supply && view.supply[1] === loc))
+	if (ui.locale_name[loc]) {
+		ui.locale_name[loc].classList.toggle("action", is_action("locale", loc) || is_action("laden_march", loc))
+	}
+
+	ui.locale_markers[loc].replaceChildren()
+
+	if (view.battle && view.battle.where === loc)
+		if (view.battle.storm)
+			ui.locale_markers[loc].appendChild(get_cached_element("marker circle storm"))
+		else
+			ui.locale_markers[loc].appendChild(get_cached_element("marker circle battle"))
+
+	if (set_has(view.pieces.ravaged, loc)) {
+		let cn
+		if (is_p1_locale(loc))
+			cn = "marker small ravaged russian"
+		else
+			cn = "marker small ravaged teutonic"
+		ui.locale_markers[loc].appendChild(get_cached_element(cn))
+	}
+
+	if (set_has(view.pieces.conquered, loc)) {
+		let cn
+		if (is_p1_locale(loc))
+			cn = "marker square conquered russian"
+		else
+			cn = "marker square conquered teutonic"
+		for (let i = 0; i < data.locales[loc].vp; ++i)
+			ui.locale_markers[loc].appendChild(get_cached_element(cn))
+	}
+
+	if (set_has(view.pieces.walls, loc))
+		ui.locale_markers[loc].appendChild(get_cached_element("marker square walls"))
+
+	let sieges = map_get(view.pieces.sieges, loc)
+	if (sieges > 0) {
+		let cn
+		if (is_teutonic_siege_marker(loc))
+			cn = "marker square siege teutonic"
+		else
+			cn = "marker square siege russian"
+		for (let i = 0; i < sieges; ++i)
+			ui.locale_markers[loc].appendChild(get_cached_element(cn))
+	}
+}
+
+function update_plan() {
+	if (view.plan) {
+		let is_planning = view.actions && view.actions.plan
+
+		ui.plan_panel.classList.remove("hide")
+		for (let i = 0; i < 6; ++i) {
+			if (i < view.plan.length) {
+				let lord = view.plan[i]
+				if (lord < 0) {
+					if (player === "Teutons")
+						ui.plan_cards[i].className = "card teutonic cc_pass"
+					else
+						ui.plan_cards[i].className = "card russian cc_pass"
+				} else {
+					if (lord < 6)
+						ui.plan_cards[i].className = "card teutonic cc_lord_" + lord
+					else
+						ui.plan_cards[i].className = "card russian cc_lord_" + lord
+				}
+			} else if (is_planning && i < max_plan_length()) {
+				if (player === "Teutons")
+					ui.plan_cards[i].className = "card teutonic cc_back"
+				else
+					ui.plan_cards[i].className = "card russian cc_back"
+			} else {
+				ui.plan_cards[i].className = "hide"
+			}
+		}
+
+		if (is_planning) {
+			ui.plan_actions.classList.remove("hide")
+			for (let lord = 0; lord < 12; ++lord) {
+				if (is_action("plan", lord)) {
+					ui.plan_action_cards[lord].classList.add("action")
+					ui.plan_action_cards[lord].classList.remove("disabled")
+				} else {
+					ui.plan_action_cards[lord].classList.remove("action")
+					ui.plan_action_cards[lord].classList.add("disabled")
+				}
+			}
+			if (is_action("plan", -1)) {
+				ui.plan_action_pass_p1.classList.add("action")
+				ui.plan_action_pass_p1.classList.remove("disabled")
+				ui.plan_action_pass_p2.classList.add("action")
+				ui.plan_action_pass_p2.classList.remove("disabled")
+			} else {
+				ui.plan_action_pass_p1.classList.remove("action")
+				ui.plan_action_pass_p1.classList.add("disabled")
+				ui.plan_action_pass_p2.classList.remove("action")
+				ui.plan_action_pass_p2.classList.add("disabled")
+			}
+		} else {
+			ui.plan_actions.classList.add("hide")
+		}
+	} else {
+		ui.plan_panel.classList.add("hide")
+	}
+}
+
+function update_cards() {
+	for (let c = 0; c < 42; ++c) {
+		let elt = ui.cards[c]
+		elt.classList.toggle("selected", c === view.what)
+		elt.classList.toggle("action", is_action("card", c))
+	}
+
+	if (view.arts_of_war) {
+		ui.arts_of_war_panel.classList.remove("hide")
+		ui.arts_of_war.replaceChildren()
+		for (let c of view.arts_of_war)
+			ui.arts_of_war.appendChild(ui.cards[c])
+	} else {
+		ui.arts_of_war_panel.classList.add("hide")
+	}
+
+	if (view.events.length > 0) {
+		ui.events_panel.classList.remove("hide")
+		ui.events.replaceChildren()
+		for (let c of view.events)
+			ui.events.appendChild(ui.cards[c])
+	} else {
+		ui.events_panel.classList.add("hide")
+	}
+
+	if (view.hand && view.hand.length > 0) {
+		ui.hand_panel.classList.remove("hide")
+		ui.hand.replaceChildren()
+		if (view.hand) {
+			for (let c of view.hand)
+				ui.hand.appendChild(ui.cards[c])
+		}
+	} else {
+		ui.hand_panel.classList.add("hide")
+	}
+
+	ui.capabilities1.replaceChildren()
+	for (let i = first_p1_card; i <= last_p1_card; ++i)
+		if (view.capabilities.includes(i))
+			ui.capabilities1.appendChild(ui.cards[i])
+
+	ui.capabilities2.replaceChildren()
+	for (let i = first_p2_card; i <= last_p2_card; ++i)
+		if (view.capabilities.includes(i))
+			ui.capabilities2.appendChild(ui.cards[i])
+
+	for (let ix = 0; ix < data.lords.length; ++ix) {
+		ui.lord_capabilities[ix].replaceChildren()
+		ui.lord_events[ix].replaceChildren()
+		if (view.reveal & (1 << ix)) {
+			let c = view.pieces.capabilities[(ix << 1) + 0]
+			if (c >= 0)
+				ui.lord_capabilities[ix].appendChild(ui.cards[c])
+			c = view.pieces.capabilities[(ix << 1) + 1]
+			if (c >= 0)
+				ui.lord_capabilities[ix].appendChild(ui.cards[c])
+			if (view.battle && view.battle.field_organ === ix)
+				ui.lord_events[ix].appendChild(ui.cards[EVENT_TEUTONIC_FIELD_ORGAN])
+			if (view.battle && view.battle.bridge && view.battle.bridge.lord1 === ix)
+				ui.lord_events[ix].appendChild(ui.cards[EVENT_RUSSIAN_BRIDGE])
+			if (view.battle && view.battle.bridge && view.battle.bridge.lord2 === ix)
+				ui.lord_events[ix].appendChild(ui.cards[EVENT_TEUTONIC_BRIDGE])
+		}
+	}
+}
+
+function update_battle() {
+	let array = view.battle.array
+
+	// Pursuit marker points "up" towards the conceding side
+	if (view.battle.conceded === "Russians") {
+		if (view.battle.attacker === "Russians")
+			ui.pursuit.className = "marker rectangle pursuit teutonic"
+		else
+			ui.pursuit.className = "marker rectangle pursuit teutonic rotate"
+	} else if (view.battle.conceded === "Teutons") {
+		if (view.battle.attacker === "Teutons")
+			ui.pursuit.className = "marker rectangle pursuit russian"
+		else
+			ui.pursuit.className = "marker rectangle pursuit russian rotate"
+	} else {
+		ui.pursuit.className = "hide"
+	}
+
+	for (let i = 0; i < array.length; ++i) {
+		let lord = array[i]
+		ui.battle_grid_array[i].replaceChildren()
+		if (lord >= 0)
+			ui.battle_grid_array[i].appendChild(ui.lord_mat[lord])
+		ui.battle_grid_array[i].classList.toggle("action", is_action("array", i))
+	}
+
+	ui.reserves.replaceChildren()
+	for (let lord of view.battle.reserves)
+		ui.reserves.appendChild(ui.lord_mat[lord])
+
+	ui.garrison.classList.toggle("hide", !view.battle.storm)
+	ui.garrison.classList.toggle("action", is_action("garrison"))
+
+	ui.garrison.replaceChildren()
+	if (view.battle.garrison) {
+		for (let i = 0; i < view.battle.garrison.knights; ++i)
+			add_force(ui.garrison, KNIGHTS, GARRISON, 0)
+		for (let i = 0; i < view.battle.garrison.men_at_arms; ++i)
+			add_force(ui.garrison, MEN_AT_ARMS, GARRISON, 0)
+	}
+
+	let here = view.battle.where
+
+	let def_prot = 0
+	let def_walls = 0
+	let att_prot = 0
+	let sally_prot = 0
+
+	if (view.battle.storm) {
+		if (is_bishopric(here) || is_castle(here))
+			def_prot = 4
+		else
+			def_prot = 3
+		if (attacker_has_trebuchets())
+			def_prot--
+		if (has_walls(here))
+			def_walls++
+		att_prot = count_siege_markers(view.battle.where)
+	}
+
+	if (view.battle.sally)
+		def_prot = count_siege_markers(view.battle.where)
+	else if (view.battle.array[SA2] >= 0)
+		sally_prot = count_siege_markers(view.battle.where)
+
+	let att_ui, def_ui
+	if (player === view.battle.attacker) {
+		att_ui = ui.battle_walls[3]
+		def_ui = ui.battle_walls[2]
+	} else {
+		att_ui = ui.battle_walls[0]
+		def_ui = ui.battle_walls[1]
+	}
+
+	for (let i = 0; i < 4; ++i)
+		ui.battle_walls[i].replaceChildren()
+
+	for (let i = 0; i < def_prot; ++i)
+		if (view.battle.attacker === "Teutons")
+			def_ui.appendChild(get_cached_element("marker square russian siege"))
+		else
+			def_ui.appendChild(get_cached_element("marker square teutonic siege"))
+	for (let i = 0; i < def_walls; ++i)
+		def_ui.appendChild(get_cached_element("marker square walls"))
+
+	ui.battle_siegeworks.replaceChildren()
+	for (let i = 0; i < sally_prot; ++i)
+		if (view.battle.attacker === "Teutons")
+			ui.battle_siegeworks.appendChild(get_cached_element("marker square russian siege"))
+		else
+			ui.battle_siegeworks.appendChild(get_cached_element("marker square teutonic siege"))
+
+	for (let i = 0; i < att_prot; ++i)
+		if (view.battle.attacker === "Teutons")
+			att_ui.appendChild(get_cached_element("marker square teutonic siege"))
+		else
+			att_ui.appendChild(get_cached_element("marker square russian siege"))
+}
+
+function update_court() {
+	let tcourt_hdr = (player === "Russians") ? ui.court2_header : ui.court1_header
+	let rcourt_hdr = (player === "Russians") ? ui.court1_header : ui.court2_header
+	tcourt_hdr.textContent = "Teutonic Lords"
+	rcourt_hdr.textContent = "Russian Lords"
+	let tcourt = (player === "Russians") ? ui.court2 : ui.court1
+	let rcourt = (player === "Russians") ? ui.court1 : ui.court2
+	tcourt.replaceChildren()
+	rcourt.replaceChildren()
+	for (let lord = 0; lord < 6; ++lord)
+		if (!is_lord_in_battle(lord) && is_lord_on_map(lord))
+			tcourt.appendChild(ui.lord_mat[lord])
+	for (let lord = 6; lord < 12; ++lord)
+		if (!is_lord_in_battle(lord) && is_lord_on_map(lord))
+			rcourt.appendChild(ui.lord_mat[lord])
+}
+
+function on_update() {
+	restart_cache()
+
+	for (let i = 0; i < 18; ++i) {
+		calendar_layout_cylinder[i] = []
+		calendar_layout_service[i] = []
+	}
+
+	for (let i = 0; i < data.locales.length; ++i)
+		locale_layout[i].length = 0
+
+	for (let ix = 0; ix < data.lords.length; ++ix) {
+		if (view.pieces.locale[ix] < 0) {
+			ui.lord_cylinder[ix].classList.add("hide")
+			ui.lord_service[ix].classList.add("hide")
+		} else {
+			ui.lord_cylinder[ix].classList.remove("hide")
+			update_lord(ix)
+		}
+	}
+
+	for (let way = 0; way < ui.ways.length; ++way) {
+		if (is_action("way", way))
+			ui.ways[way].classList.add("action")
+		else
+			ui.ways[way].classList.remove("action")
+	}
+
+	layout_calendar()
+
+	update_legate()
+	update_smerdi()
+	update_veche()
+
+	for (let loc = 0; loc < data.locales.length; ++loc)
+		update_locale(loc)
+
+	update_castle(ui.castles[0], view.pieces.castles1[0])
+	update_castle(ui.castles[1], view.pieces.castles1[1])
+	update_castle(ui.castles[2], view.pieces.castles2[0])
+	update_castle(ui.castles[3], view.pieces.castles2[1])
+
+	update_current_card_display()
+
+	if (view.turn & 1)
+		ui.turn.className = `marker circle turn campaign t${view.turn>>1}`
+	else
+		ui.turn.className = `marker circle turn levy t${view.turn>>1}`
+
+	let vp1 = count_vp1()
+	let vp2 = count_vp2()
+	if ((vp1 >> 1) === (vp2 >> 1)) {
+		if (vp1 & 1)
+			ui.vp1.className = `marker circle victory teutonic stack v${vp1>>1} half`
+		else
+			ui.vp1.className = `marker circle victory teutonic stack v${vp1>>1}`
+		if (vp2 & 1)
+			ui.vp2.className = `marker circle victory russian stack v${vp2>>1} half`
+		else
+			ui.vp2.className = `marker circle victory russian stack v${vp2>>1}`
+	} else {
+		if (vp1 & 1)
+			ui.vp1.className = `marker circle victory teutonic v${vp1>>1} half`
+		else
+			ui.vp1.className = `marker circle victory teutonic v${vp1>>1}`
+		if (vp2 & 1)
+			ui.vp2.className = `marker circle victory russian v${vp2>>1} half`
+		else
+			ui.vp2.className = `marker circle victory russian v${vp2>>1}`
+	}
+
+	if (view.pieces.elr1)
+		ui.elr1.classList = `marker circle enemy_lords_removed teutonic v${view.pieces.elr1}`
+	else
+		ui.elr1.classList = `marker circle enemy_lords_removed teutonic hide`
+	if (view.pieces.elr2)
+		ui.elr2.classList = `marker circle enemy_lords_removed russian v${view.pieces.elr2}`
+	else
+		ui.elr2.classList = `marker circle enemy_lords_removed russian hide`
+
+	ui.held1.textContent = `${view.held1} Held`
+	ui.held2.textContent = `${view.held2} Held`
+
+	update_plan()
+	update_cards()
+
+	ui.veche.classList.toggle("action", is_action("veche"))
+
+	if (view.battle && view.battle.array) {
+		ui.reserves_panel.classList.remove("hide")
+		ui.battle_panel.classList.remove("hide")
+		if (view.battle.storm)
+			ui.battle_header.textContent = "Storm at " + data.locales[view.battle.where].name
+		else if (view.battle.sally)
+			ui.battle_header.textContent = "Sally at " + data.locales[view.battle.where].name
+		else
+			ui.battle_header.textContent = "Battle at " + data.locales[view.battle.where].name
+		if (view.battle.attacker === player) {
+			ui.battle_grid.className = "attacker"
+		} else {
+			ui.battle_grid.className = "defender"
+		}
+		update_battle()
+	} else {
+		ui.battle_panel.classList.add("hide")
+	}
+
+	if (view.battle && view.battle.array && view.battle.reserves.length > 0)
+		ui.reserves_panel.classList.remove("hide")
+	else
+		ui.reserves_panel.classList.add("hide")
+
+	update_court()
+
+	let first_turn = view.scenario >> 5
+	let last_turn = view.scenario & 31
+	for (let i = 0; i <= 17; ++i) {
+		ui.calendar[i].classList.toggle("action", is_action("calendar", i))
+		if (i >= 1 && i <= 16)
+			ui.calendar[i].classList.toggle("end", i < first_turn || i > last_turn)
+	}
+
+	// Misc
+	action_button("lordship", "Lordship")
+	action_button("march", "March")
+	action_button("avoid", "Avoid Battle")
+	action_button("withdraw", "Withdraw")
+	action_button("retreat", "Retreat")
+	action_button("remove", "Remove")
+	action_button("surrender", "Surrender")
+	action_button("siegeworks", "Siegeworks")
+	action_button("boats_x2", "Boats x2")
+
+	// Use all commands
+	action_button("use_legate", "Legate")
+	action_button("stonemasons", "Stonemasons")
+	action_button("stone_kremlin", "Stone Kremlin")
+	action_button("tax", "Tax")
+	action_button("siege", "Siege")
+
+	// Use one command
+	action_button("smerdi", "Smerdi")
+	action_button("storm", "Storm")
+	action_button("sally", "Sally")
+	action_button("sail", "Sail")
+	action_button("ravage", "Ravage")
+	action_button("forage", "Forage")
+	action_button("supply", "Supply")
+
+	// Muster & Spoils
+	action_button("take_prov", "Provender")
+	action_button("take_loot", "Loot")
+	action_button("take_coin", "Coin")
+	action_button("take_ship", "Ship")
+	action_button("take_boat", "Boat")
+	action_button("take_cart", "Cart")
+	action_button("take_sled", "Sled")
+	action_button("capability", "Capability")
+
+	// Events
+	action_button("decline", "Decline")
+	action_button("deploy", "Deploy")
+	action_button("discard", "Discard")
+	action_button("hold", "Hold")
+	action_button("play", "Play")
+
+	action_button("approach", "Approach")
+	action_button("concede", "Concede")
+	action_button("battle", "Battle")
+
+	action_button("end_array", "End Array")
+	action_button("end_avoid_battle", "End Avoid Battle")
+	action_button("end_call_to_arms", "End Call to Arms")
+	action_button("end_command", "End Command")
+	action_button("end_disband", "End Disband")
+	action_button("end_discard", "End Discard")
+	action_button("end_feed", "End Feed")
+	action_button("end_growth", "End Growth")
+	action_button("end_levy", "End Levy")
+	action_button("end_muster", "End Muster")
+	action_button("end_pay", "End Pay")
+	action_button("end_plan", "End Plan")
+	action_button("end_plow_and_reap", "End Plow and Reap")
+	action_button("end_ransom", "End Ransom")
+	action_button("end_remove", "End Remove")
+	action_button("end_reposition", "End Reposition")
+	action_button("end_sack", "End Sack")
+	action_button("end_sally", "End Sally")
+	action_button("end_setup", "End Setup")
+	action_button("end_spoils", "End Spoils")
+	action_button("end_supply", "End Supply")
+	action_button("end_wastage", "End Wastage")
+	action_button("end_withdraw", "End Withdraw")
+
+	action_button("pass", "Pass")
+	action_button("done", "Done")
+	action_button("undo", "Undo")
+}
+
+// === LOG ===
+
+function on_focus_card_tip(c) {
+	if (c <= first_p1_card)
+		ui.command.className = `card teutonic aow_${c}`
+	else
+		ui.command.className = `card russian aow_${c}`
+}
+
+function on_blur_card_tip() {
+	update_current_card_display()
+}
+
+function sub_card_capability(match, p1) {
+	let x = p1 | 0
+	return `<span class="card_tip" onmouseenter="on_focus_card_tip(${x})" onmouseleave="on_blur_card_tip(${x})">${data.cards[x].capability}</span>`
+}
+
+function sub_card_event(match, p1) {
+	let x = p1 | 0
+	return `<span class="card_tip" onmouseenter="on_focus_card_tip(${x})" onmouseleave="on_blur_card_tip(${x})">${data.cards[x].event}</span>`
+}
+
+function on_focus_locale_tip(loc) {
+	ui.locale[loc].classList.add("tip")
+	if (ui.locale_name[loc])
+		ui.locale_name[loc].classList.add("tip")
+}
+
+function on_blur_locale_tip(loc) {
+	ui.locale[loc].classList.remove("tip")
+	if (ui.locale_name[loc])
+		ui.locale_name[loc].classList.remove("tip")
+}
+
+function on_click_locale_tip(loc) {
+	ui.locale[loc].scrollIntoView({ block:"center", inline:"center", behavior:"smooth" })
+}
+
+function on_focus_way_tip(way) {
+	ui.ways[way].classList.add("tip")
+}
+
+function on_blur_way_tip(way) {
+	ui.ways[way].classList.remove("tip")
+}
+
+function on_click_way_tip(way) {
+	ui.ways[way].scrollIntoView({ block:"center", inline:"center", behavior:"smooth" })
+}
+
+function on_click_lord_tip(lord) {
+	ui.lord_mat[lord].scrollIntoView({ block:"center", inline:"center", behavior:"smooth" })
+}
+
+function sub_locale_name(match, p1) {
+	let x = p1 | 0
+	let n = data.locales[x].name
+	return `<span class="locale_tip" onmouseenter="on_focus_locale_tip(${x})" onmouseleave="on_blur_locale_tip(${x})" onclick="on_click_locale_tip(${x})">${n}</span>`
+}
+
+function sub_lord_name(match, p1) {
+	let x = p1 | 0
+	let n = data.lords[x].name
+	return `<span class="lord_tip" onclick="on_click_lord_tip(${x})">${n}</span>`
+}
+
+function sub_way_name(match, p1) {
+	let x = p1 | 0
+	let n = data.ways[x].name
+	return `<span class="way_tip" onmouseenter="on_focus_way_tip(${x})" onmouseleave="on_blur_way_tip(${x})" onclick="on_click_way_tip(${x})">${n}</span>`
+}
+
+function on_log(text) {
+	let p = document.createElement("div")
+
+	if (text.match(/^>>/)) {
+                text = text.substring(2)
+                p.className = "ii"
+        }
+
+	if (text.match(/^>/)) {
+                text = text.substring(1)
+                p.className = "i"
+        }
+
+	text = text.replace(/&/g, "&amp;")
+	text = text.replace(/</g, "&lt;")
+	text = text.replace(/>/g, "&gt;")
+
+	text = text.replace(/C(\d+)/g, sub_card_capability)
+	text = text.replace(/E(\d+)/g, sub_card_event)
+	text = text.replace(/L(\d+)/g, sub_lord_name)
+	text = text.replace(/%(\d+)/g, sub_locale_name)
+	text = text.replace(/W(\d+)/g, sub_way_name)
+
+	if (text.match(/^\.h1/)) {
+		text = text.substring(4)
+		p.className = "h1"
+	}
+	else if (text.match(/^\.h2t/)) {
+		text = text.substring(5)
+		p.className = "h2 teutonic"
+	}
+	else if (text.match(/^\.h2r/)) {
+		text = text.substring(5)
+		p.className = "h2 russian"
+	}
+	else if (text.match(/^\.h2/)) {
+		text = text.substring(4)
+		p.className = "h2"
+	}
+	else if (text.match(/^\.h3t/)) {
+		text = text.substring(5)
+		p.className = "h3 teutonic"
+	}
+	else if (text.match(/^\.h3r/)) {
+		text = text.substring(5)
+		p.className = "h3 russian"
+	}
+	else if (text.match(/^\.h3/)) {
+		text = text.substring(4)
+		p.className = "h3"
+	}
+	else if (text.match(/^\.h4/)) {
+		text = text.substring(4)
+		p.className = "h4"
+	}
+	else if (text.match(/^\.h5/)) {
+		text = text.substring(4)
+		p.className = "h5"
+	}
+
+	p.innerHTML = text
+	return p
+}
+
+function pack1_get(word, n) {
+	return (word >>> n) & 1
+}
+
+function pack2_get(word, n) {
+	n = n << 1
+	return (word >>> n) & 3
+}
+
+function pack4_get(word, n) {
+	n = n << 2
+	return (word >>> n) & 15
+}
+
+build_map()
+scroll_with_middle_mouse("main")