Simplify styles and html for play.html

1 files changed, 801 insertions, 0 deletions

diff --git a/play.js b/play.js
new file mode 100644
index 0000000..70a7f19
--- /dev/null
+++ b/play.js
@@ -0,0 +1,801 @@
+"use strict";
+
+const FRANKS = "Franks";
+const SARACENS = "Saracens";
+const ASSASSINS = "Assassins";
+const ENEMY = { Saracens: "Franks", Franks: "Saracens" }
+const DEAD = "Dead";
+const F_POOL = "FP";
+const S_POOL = "SP";
+const ENGLAND = "England";
+const FRANCE = "France";
+const GERMANIA = "Germania";
+
+const KINGDOM = {
+	"Syria": "Syria",
+	"Jerusalem": "Kingdom of Jerusalem",
+	"Antioch": "Principality of Antioch",
+	"Tripoli": "County of Tripoli",
+};
+
+const VICTORY_TOWNS = [
+	"Aleppo", "Damascus", "Egypt",
+	"Antioch", "Tripoli", "Acre", "Jerusalem"
+];
+
+let label_layout = window.localStorage['crusader-rex/label-layout'] || 'spread';
+
+function set_spread_layout() {
+	label_layout = 'spread';
+	window.localStorage['crusader-rex/label-layout'] = label_layout;
+	update_map();
+}
+
+function set_stack_layout() {
+	label_layout = 'stack';
+	window.localStorage['crusader-rex/label-layout'] = label_layout;
+	update_map();
+}
+
+function toggle_blocks() {
+	document.getElementById("map").classList.toggle("hide_blocks");
+}
+
+let ui = {
+	cards: {},
+	card_backs: {},
+	towns: {},
+	blocks: {},
+	battle_menu: {},
+	battle_block: {},
+	present: new Set(),
+}
+
+create_log_entry = function (text) {
+	let p = document.createElement("div");
+	text = text.replace(/&/g, "&");
+	text = text.replace(/</g, "&lt;");
+	text = text.replace(/>/g, "&gt;");
+
+	text = text.replace(/\u2192 /g, "\u2192\xa0");
+
+	text = text.replace(/^([A-Z]):/, '<span class="$1"> $1 </span>');
+
+	if (text.match(/^~ .* ~$/))
+		p.className = 'br', text = text.substring(2, text.length-2);
+	else if (text.match(/^Start Frank turn/))
+		p.className = 'F';
+	else if (text.match(/^Start Saracen turn/))
+		p.className = 'S';
+	else if (text.match(/^Start /))
+		p.className = 'st', text = text.replace(/\.$/, "");
+	else if (text.match(/^(Battle in)/))
+		p.className = 'bs';
+
+	if (text.match(/^Start /))
+		text = text.substring(6);
+
+	p.innerHTML = text;
+	return p;
+}
+
+function on_focus_town(evt) {
+	let where = evt.target.town;
+	let text = where;
+	if (where in SHIELDS)
+		text += " \u2014 " + SHIELDS[where].join(", ");
+	let kingdom = KINGDOM[TOWNS[where].region];
+	if (kingdom)
+		text += " \u2014 " + kingdom;
+	if (VICTORY_TOWNS.includes(where))
+		text += " \u2014 1 VP";
+	document.getElementById("status").textContent = text;
+}
+
+function on_blur_town(evt) {
+	document.getElementById("status").textContent = "";
+}
+
+function on_click_town(evt) {
+	let where = evt.target.town;
+	send_action('town', where);
+}
+
+const STEP_TEXT = [ 0, "I", "II", "III", "IIII" ];
+const HEIR_TEXT = [ 0, '\u00b9', '\u00b2', '\u00b3', '\u2074', '\u2075' ];
+
+function block_name(who) { return who; }
+function block_home(who) { return BLOCKS[who].home; }
+function block_owner(who) { return BLOCKS[who].owner; }
+
+function on_focus_map_block(evt) {
+	let info = BLOCKS[evt.target.block];
+	let where = game.location[evt.target.block];
+	if ((info.owner === player || info.owner === ASSASSINS) && where !== S_POOL && where !== F_POOL) {
+		let text = info.name + " ";
+		if (info.move)
+			text += info.move + "-";
+		text += STEP_TEXT[info.steps] + "-" + info.combat;
+		document.getElementById("status").textContent = text;
+	} else {
+		document.getElementById("status").textContent = info.owner;
+	}
+}
+
+function on_blur_map_block(evt) {
+	document.getElementById("status").textContent = "";
+}
+
+function on_click_map_block(evt) {
+	let b = evt.target.block;
+	if (!game.battle)
+		send_action('block', b);
+}
+
+function on_focus_battle_block(evt) {
+	let b = evt.target.block;
+	let msg;
+
+	if (!evt.target.classList.contains("known")) {
+		if (block_owner(b) === FRANKS)
+			msg = "Franks";
+		else if (block_owner(b) === SARACENS)
+			msg = "Saracens";
+	} else {
+		msg = block_name(b);
+	}
+
+	if (game.actions && game.actions.fire && game.actions.fire.includes(b))
+		msg = "Fire with " + msg;
+	else if (game.actions && game.actions.storm && game.actions.storm.includes(b))
+		msg = "Storm with " + msg;
+	else if (game.actions && game.actions.sally && game.actions.sally.includes(b))
+		msg = "Sally with " + msg;
+	else if (game.actions && game.actions.withdraw && game.actions.withdraw.includes(b))
+		msg = "Withdraw with " + msg;
+	else if (game.actions && game.actions.hit && game.actions.hit.includes(b))
+		msg = "Take hit on " + msg;
+
+	document.getElementById("status").textContent = msg;
+}
+
+function on_blur_battle_block(evt) {
+	document.getElementById("status").textContent = "";
+}
+
+function on_click_battle_block(evt) {
+	let b = evt.target.block;
+	send_action('block', b);
+}
+
+function on_focus_fire(evt) {
+	document.getElementById("status").textContent =
+		"Fire with " + block_name(evt.target.block);
+}
+
+function on_focus_retreat(evt) {
+	if (game.battle.storming.includes(evt.target.block))
+		document.getElementById("status").textContent =
+			"Withdraw with " + block_name(evt.target.block);
+	else
+		document.getElementById("status").textContent =
+			"Retreat with " + block_name(evt.target.block);
+}
+
+function on_focus_harry(evt) {
+	document.getElementById("status").textContent =
+		"Harry with " + block_name(evt.target.block);
+}
+
+function on_focus_charge(evt) {
+	document.getElementById("status").textContent =
+		"Charge with " + block_name(evt.target.block);
+}
+
+function on_focus_withdraw(evt) {
+	document.getElementById("status").textContent =
+		"Withdraw with " + block_name(evt.target.block);
+}
+
+function on_focus_storm(evt) {
+	document.getElementById("status").textContent =
+		"Storm with " + block_name(evt.target.block);
+}
+
+function on_focus_sally(evt) {
+	document.getElementById("status").textContent =
+		"Sally with " + block_name(evt.target.block);
+}
+
+function on_focus_hit(evt) {
+	document.getElementById("status").textContent =
+		"Take hit on " + block_name(evt.target.block);
+}
+
+function on_blur_battle_button(evt) {
+	document.getElementById("status").textContent = "";
+}
+
+function on_click_hit(evt) { send_action('hit', evt.target.block); }
+function on_click_fire(evt) { send_action('fire', evt.target.block); }
+function on_click_retreat(evt) { send_action('retreat', evt.target.block); }
+function on_click_charge(evt) { send_action('charge', evt.target.block); }
+function on_click_harry(evt) { send_action('harry', evt.target.block); }
+function on_click_withdraw(evt) { send_action('withdraw', evt.target.block); }
+function on_click_storm(evt) { send_action('storm', evt.target.block); }
+function on_click_sally(evt) { send_action('sally', evt.target.block); }
+
+function on_click_card(evt) {
+	let c = evt.target.id.split("+")[1] | 0;
+	send_action('play', c);
+}
+
+function build_battle_button(menu, b, c, click, enter, img_src) {
+	let img = new Image();
+	img.draggable = false;
+	img.classList.add("action");
+	img.classList.add(c);
+	img.setAttribute("src", img_src);
+	img.addEventListener("click", click);
+	img.addEventListener("mouseenter", enter);
+	img.addEventListener("mouseleave", on_blur_battle_button);
+	img.block = b;
+	menu.appendChild(img);
+}
+
+function battle_block_class_name(block) {
+	return `block block_${block.image} ${block.owner}`;
+}
+
+function build_battle_block(b, block) {
+	let element = document.createElement("div");
+	element.className = battle_block_class_name(block);
+	element.addEventListener("mouseenter", on_focus_battle_block);
+	element.addEventListener("mouseleave", on_blur_battle_block);
+	element.addEventListener("click", on_click_battle_block);
+	element.block = b;
+	ui.battle_block[b] = element;
+
+	let menu_list = document.createElement("div");
+	menu_list.className = "battle_menu_list";
+
+	build_battle_button(menu_list, b, "hit",
+		on_click_hit, on_focus_hit,
+		"/images/cross-mark.svg");
+	build_battle_button(menu_list, b, "charge",
+		on_click_charge, on_focus_charge,
+		"/images/mounted-knight.svg");
+	build_battle_button(menu_list, b, "fire",
+		on_click_fire, on_focus_fire,
+		"/images/pointy-sword.svg");
+	build_battle_button(menu_list, b, "harry",
+		on_click_harry, on_focus_harry,
+		"/images/arrow-flights.svg");
+	build_battle_button(menu_list, b, "retreat",
+		on_click_retreat, on_focus_retreat,
+		"/images/flying-flag.svg");
+	build_battle_button(menu_list, b, "withdraw",
+		on_click_withdraw, on_focus_withdraw,
+		"/images/stone-tower.svg");
+	build_battle_button(menu_list, b, "storm",
+		on_click_storm, on_focus_storm,
+		"/images/siege-tower.svg");
+	build_battle_button(menu_list, b, "sally",
+		on_click_sally, on_focus_sally,
+		"/images/doorway.svg");
+
+	let menu = document.createElement("div");
+	menu.className = "battle_menu";
+	menu.appendChild(element);
+	menu.appendChild(menu_list);
+	menu.block = b;
+	ui.battle_menu[b] = menu;
+}
+
+function build_map_block(b, block) {
+	let element = document.createElement("div");
+	element.classList.add("block");
+	element.classList.add("known");
+	element.classList.add(BLOCKS[b].owner);
+	element.classList.add("block_" + block.image);
+	element.addEventListener("mouseenter", on_focus_map_block);
+	element.addEventListener("mouseleave", on_blur_map_block);
+	element.addEventListener("click", on_click_map_block);
+	element.block = b;
+	return element;
+}
+
+function build_town(t, town) {
+	let element = document.createElement("div");
+	element.town = t;
+	element.classList.add("town");
+	element.addEventListener("mouseenter", on_focus_town);
+	element.addEventListener("mouseleave", on_blur_town);
+	element.addEventListener("click", on_click_town);
+	ui.towns_element.appendChild(element);
+	return element;
+}
+
+function build_map() {
+	let element;
+
+	ui.blocks_element = document.getElementById("blocks");
+	ui.offmap_element = document.getElementById("offmap");
+	ui.towns_element = document.getElementById("towns");
+
+	for (let c = 1; c <= 27; ++c) {
+		ui.cards[c] = document.getElementById("card+"+c);
+		ui.cards[c].addEventListener("click", on_click_card);
+	}
+
+	for (let c = 1; c <= 6; ++c)
+		ui.card_backs[c] = document.getElementById("back+"+c);
+
+	for (let name in TOWNS) {
+		let town = TOWNS[name];
+		if (name === F_POOL || name === S_POOL || name === DEAD)
+			continue;
+		if (name === "Sea") {
+			element = document.getElementById("svgmap").getElementById("sea");
+			element.town = "Sea";
+			element.addEventListener("mouseenter", on_focus_town);
+			element.addEventListener("mouseleave", on_blur_town);
+			element.addEventListener("click", on_click_town);
+			ui.towns[name] = element;
+		} else {
+			element = ui.towns[name] = build_town(name, town);
+			let xo = Math.round(element.offsetWidth/2);
+			let yo = Math.round(element.offsetHeight/2);
+			element.style.left = (town.x - xo) + "px";
+			element.style.top = (town.y - yo) + "px";
+		}
+	}
+
+	for (let b in BLOCKS) {
+		let block = BLOCKS[b];
+		ui.blocks[b] = build_map_block(b, block);
+		build_battle_block(b, block);
+	}
+}
+
+function update_steps(b, steps, element) {
+	element.classList.remove("r0");
+	element.classList.remove("r1");
+	element.classList.remove("r2");
+	element.classList.remove("r3");
+	element.classList.add("r"+(BLOCKS[b].steps - steps));
+}
+
+function layout_blocks(location, secret, known) {
+	if (label_layout === 'stack')
+		document.getElementById("map").classList.add("stack_layout");
+	else
+		document.getElementById("map").classList.remove("stack_layout");
+	if (label_layout === 'spread' ||
+		(location === S_POOL || location === F_POOL || location === DEAD ||
+			location === ENGLAND || location === FRANCE || location === GERMANIA))
+		layout_blocks_spread(location, secret, known);
+	else
+		layout_blocks_stacked(location, secret, known);
+}
+
+function layout_blocks_spread(town, north, south) {
+	let wrap = TOWNS[town].wrap;
+	let rows = [];
+
+	if ((north.length > wrap || south.length > wrap) || (north.length + south.length <= 3)) {
+		north = north.concat(south);
+		south = [];
+	}
+
+	function wrap_row(input) {
+		while (input.length > wrap) {
+			rows.push(input.slice(0, wrap));
+			input = input.slice(wrap);
+		}
+		if (input.length > 0)
+			rows.push(input);
+	}
+
+	wrap_row(north);
+	wrap_row(south);
+
+	if (TOWNS[town].layout_minor > 0.5)
+		rows.reverse();
+
+	for (let r = 0; r < rows.length; ++r) {
+		let cols = rows[r];
+		for (let c = 0; c < cols.length; ++c)
+			position_block(town, r, rows.length, c, cols.length, cols[c]);
+	}
+}
+
+function position_block(town, row, n_rows, col, n_cols, element) {
+	let space = TOWNS[town];
+	let block_size = 60+6;
+	let padding = 4;
+	if (town === ENGLAND || town === FRANCE || town === GERMANIA)
+		padding = 21;
+	let offset = block_size + padding;
+	let row_size = (n_rows-1) * offset;
+	let col_size = (n_cols-1) * offset;
+	let x = space.x;
+	let y = space.y;
+
+	if (space.layout_axis === 'X') {
+		x -= col_size * space.layout_major;
+		y -= row_size * space.layout_minor;
+		x += col * offset;
+		y += row * offset;
+	} else {
+		y -= col_size * space.layout_major;
+		x -= row_size * space.layout_minor;
+		y += col * offset;
+		x += row * offset;
+	}
+
+	element.style.left = ((x - block_size/2)|0)+"px";
+	element.style.top = ((y - block_size/2)|0)+"px";
+}
+
+function layout_blocks_stacked(location, secret, known) {
+	let s = secret.length;
+	let k = known.length;
+	let both = secret.length > 0 && known.length > 0;
+	let i = 0;
+	while (secret.length > 0)
+		position_block_stacked(location, i++, (s-1)/2, both ? 1 : 0, secret.shift());
+	i = 0;
+	while (known.length > 0)
+		position_block_stacked(location, i++, (k-1)/2, 0, known.shift());
+}
+
+function position_block_stacked(location, i, c, k, element) {
+	let space = TOWNS[location];
+	let block_size = 60+6;
+	let x = space.x + (i - c) * 16 + k * 12;
+	let y = space.y + (i - c) * 16 - k * 12;
+	element.style.left = ((x - block_size/2)|0)+"px";
+	element.style.top = ((y - block_size/2)|0)+"px";
+}
+
+function show_block(element) {
+	if (element.parentElement !== ui.blocks_element)
+		ui.blocks_element.appendChild(element);
+}
+
+function hide_block(element) {
+	if (element.parentElement !== ui.offmap_element)
+		ui.offmap_element.appendChild(element);
+}
+
+function show_block(element) {
+	if (element.parentElement !== ui.blocks_element)
+		ui.blocks_element.appendChild(element);
+}
+
+function hide_block(element) {
+	if (element.parentElement !== ui.offmap_element)
+		ui.offmap_element.appendChild(element);
+}
+
+function is_known_block(info, who) {
+	if (game_over)
+		return true;
+	if (info.owner === player || info.owner === ASSASSINS || who === game.assassinate)
+		return true;
+	let town = game.location[who];
+	if (town === DEAD)
+		return true;
+	return false;
+}
+
+function update_map() {
+	let layout = {};
+
+	document.getElementById("frank_vp").textContent = game.f_vp + " VP";
+	document.getElementById("saracen_vp").textContent = game.s_vp + " VP";
+	document.getElementById("timeline").className = "year_" + game.year;
+	if (game.turn < 1)
+		document.getElementById("turn_info").textContent =
+			"Year " + game.year;
+	else if (game.turn < 6)
+		document.getElementById("turn_info").textContent =
+			"Turn " + game.turn + " of Year " + game.year;
+	else
+		document.getElementById("turn_info").textContent =
+			"Winter Turn of Year " + game.year;
+
+	for (let town in TOWNS)
+		layout[town] = { north: [], south: [] };
+
+	for (let b in game.location) {
+		let info = BLOCKS[b];
+		let element = ui.blocks[b];
+		let town = game.location[b];
+		if (town in TOWNS) {
+			let moved = game.moved[b] ? " moved" : "";
+			if (town === DEAD)
+				moved = " moved";
+			if (is_known_block(info, b)) {
+				let image = " block_" + info.image;
+				let steps = " r" + (info.steps - game.steps[b]);
+				let known = " known";
+				if ((town === S_POOL || town === F_POOL) && b !== game.who && !game_over)
+					known = "";
+				element.classList = info.owner + known + " block" + image + steps + moved;
+			} else {
+				let besieging = "";
+				if (game.sieges[town] === info.owner) {
+					if (game.winter_campaign === town)
+						besieging = " winter_campaign";
+					else
+						besieging = " besieging";
+				}
+				let jihad = "";
+				if (game.jihad === town && info.owner === game.p1)
+					jihad = " jihad";
+				element.classList = info.owner + " block" + moved + besieging + jihad;
+			}
+			if (town !== DEAD) {
+				if (info.owner === FRANKS)
+					layout[town].north.push(element);
+				else
+					layout[town].south.push(element);
+			}
+			show_block(element);
+		} else {
+			hide_block(element);
+		}
+	}
+
+	for (let b in game.location) {
+		let info = BLOCKS[b];
+		let element = ui.blocks[b];
+		let town = game.location[b];
+		if (town === DEAD) {
+			if (info.owner === FRANKS)
+				layout[F_POOL].north.unshift(element);
+			else
+				layout[S_POOL].south.unshift(element);
+		}
+	}
+
+	for (let town in TOWNS)
+		layout_blocks(town, layout[town].north, layout[town].south);
+
+	for (let where in TOWNS) {
+		if (ui.towns[where]) {
+			ui.towns[where].classList.remove('highlight');
+			ui.towns[where].classList.remove('muster');
+		}
+	}
+	if (game.actions && game.actions.town)
+		for (let where of game.actions.town)
+			ui.towns[where].classList.add('highlight');
+	if (game.muster)
+		ui.towns[game.muster].classList.add('muster');
+
+	if (!game.battle) {
+		if (game.actions && game.actions.block)
+			for (let b of game.actions.block)
+				ui.blocks[b].classList.add('highlight');
+	}
+	if (game.who && !game.battle)
+		ui.blocks[game.who].classList.add('selected');
+	for (let b of game.castle)
+		ui.blocks[b].classList.add('castle');
+}
+
+function update_card_display(element, card, prior_card) {
+	if (!card && !prior_card) {
+		element.className = "small_card card_back";
+	} else if (prior_card) {
+		element.className = "small_card prior " + CARDS[prior_card].image;
+	} else {
+		element.className = "small_card " + CARDS[card].image;
+	}
+}
+
+function update_cards() {
+	update_card_display(document.getElementById("frank_card"), game.f_card, game.prior_f_card);
+	update_card_display(document.getElementById("saracen_card"), game.s_card, game.prior_s_card);
+
+	for (let c = 1; c <= 27; ++c) {
+		let element = ui.cards[c];
+		if (game.hand.includes(c)) {
+			element.classList.add("show");
+			if (game.actions && game.actions.play) {
+				if (game.actions.play.includes(c)) {
+					element.classList.add("enabled");
+					element.classList.remove("disabled");
+				} else {
+					element.classList.remove("enabled");
+					element.classList.add("disabled");
+				}
+			} else {
+				element.classList.remove("enabled");
+				element.classList.remove("disabled");
+			}
+		} else {
+			element.classList.remove("show");
+		}
+	}
+
+	if (player === 'Observer') {
+		let n = game.hand.length;
+		for (let c = 1; c <= 6; ++c)
+			if (c <= n)
+				ui.card_backs[c].classList.add("show");
+			else
+				ui.card_backs[c].classList.remove("show");
+	}
+}
+
+function compare_blocks(a, b) {
+	let aa = BLOCKS[a].combat;
+	let bb = BLOCKS[b].combat;
+	if (aa === bb)
+		return (a < b) ? -1 : (a > b) ? 1 : 0;
+	return (aa < bb) ? -1 : (aa > bb) ? 1 : 0;
+}
+
+function insert_battle_block(root, node, block) {
+	for (let i = 0; i < root.children.length; ++i) {
+		let prev = root.children[i];
+		if (compare_blocks(prev.block, block) > 0) {
+			root.insertBefore(node, prev);
+			return;
+		}
+	}
+	root.appendChild(node);
+}
+
+function update_battle() {
+	function fill_cell(name, list, show) {
+		let cell = document.getElementById(name);
+
+		ui.present.clear();
+
+		for (let block of list) {
+			ui.present.add(block);
+
+			if (!cell.contains(ui.battle_menu[block]))
+				insert_battle_block(cell, ui.battle_menu[block], block);
+
+			ui.battle_menu[block].className = "battle_menu";
+			if (game.actions && game.actions.fire && game.actions.fire.includes(block))
+				ui.battle_menu[block].classList.add('fire');
+			if (game.actions && game.actions.retreat && game.actions.retreat.includes(block))
+				ui.battle_menu[block].classList.add('retreat');
+			if (game.actions && game.actions.harry && game.actions.harry.includes(block))
+				ui.battle_menu[block].classList.add('harry');
+			if (game.actions && game.actions.charge && game.actions.charge.includes(block))
+				ui.battle_menu[block].classList.add('charge');
+			if (game.actions && game.actions.withdraw && game.actions.withdraw.includes(block))
+				ui.battle_menu[block].classList.add('withdraw');
+			if (game.actions && game.actions.storm && game.actions.storm.includes(block))
+				ui.battle_menu[block].classList.add('storm');
+			if (game.actions && game.actions.sally && game.actions.sally.includes(block))
+				ui.battle_menu[block].classList.add('sally');
+			if (game.actions && game.actions.charge && game.actions.charge.includes(block))
+				ui.battle_menu[block].classList.add('charge');
+			if (game.actions && game.actions.treachery && game.actions.treachery.includes(block))
+				ui.battle_menu[block].classList.add('treachery');
+			if (game.actions && game.actions.hit && game.actions.hit.includes(block))
+				ui.battle_menu[block].classList.add('hit');
+
+			let class_name = battle_block_class_name(BLOCKS[block]);
+			if (game.actions && game.actions.block && game.actions.block.includes(block))
+				class_name += " highlight";
+			if (game.moved[block])
+				class_name += " moved";
+			if (block === game.who)
+				class_name += " selected";
+			if (block === game.battle.halfhit)
+				class_name += " halfhit";
+			if (game.jihad === game.battle.town && block_owner(block) === game.p1)
+				class_name += " jihad";
+
+			if (game.battle.sallying.includes(block))
+				show = true;
+			if (game.battle.storming.includes(block))
+				show = true;
+			if (show || block_owner(block) === player) {
+				class_name += " known";
+				ui.battle_block[block].className = class_name;
+				update_steps(block, game.steps[block], ui.battle_block[block], false);
+			} else {
+				ui.battle_block[block].className = class_name;
+			}
+
+		}
+
+		for (let b in BLOCKS) {
+			if (!ui.present.has(b)) {
+				if (cell.contains(ui.battle_menu[b]))
+					cell.removeChild(ui.battle_menu[b]);
+			}
+		}
+	}
+
+	if (player === FRANKS) {
+		fill_cell("ER", game.battle.SR, false);
+		fill_cell("EC", game.battle.SC, game.battle.show_castle);
+		fill_cell("EF", game.battle.SF, game.battle.show_field);
+		fill_cell("FF", game.battle.FF, game.battle.show_field);
+		fill_cell("FC", game.battle.FC, game.battle.show_castle);
+		fill_cell("FR", game.battle.FR, false);
+		document.getElementById("FC").className = "c" + game.battle.FCS;
+		document.getElementById("EC").className = "c" + game.battle.SCS;
+	} else {
+		fill_cell("ER", game.battle.FR, false);
+		fill_cell("EC", game.battle.FC, game.battle.show_castle);
+		fill_cell("EF", game.battle.FF, game.battle.show_field);
+		fill_cell("FF", game.battle.SF, game.battle.show_field);
+		fill_cell("FC", game.battle.SC, game.battle.show_castle);
+		fill_cell("FR", game.battle.SR, false);
+		document.getElementById("EC").className = "c" + game.battle.FCS;
+		document.getElementById("FC").className = "c" + game.battle.SCS;
+	}
+}
+
+let flash_timer = 0;
+function start_flash() {
+	let element = document.getElementById("battle_message");
+	let tick = true;
+	if (flash_timer)
+		return;
+	flash_timer = setInterval(function () {
+		if (!game.flash_next) {
+			element.textContent = game.battle ? game.battle.flash : "";
+			clearInterval(flash_timer);
+			flash_timer = 0;
+		} else {
+			element.textContent = tick ? game.battle.flash : game.flash_next;
+			tick = !tick;
+		}
+	}, 1000);
+}
+
+function on_update() {
+	action_button("eliminate_button", "Eliminate");
+	action_button("winter_campaign_button", "Winter campaign");
+	action_button("sea_move_button", "Sea move");
+	action_button("end_sea_move_button", "End sea move");
+	action_button("group_move_button", "Group move");
+	action_button("end_group_move_button", "End group move");
+	action_button("muster_button", "Muster");
+	action_button("end_muster_button", "End muster");
+	action_button("end_retreat_button", "End retreat");
+	action_button("end_regroup_button", "End regroup");
+	action_button("end_move_phase_button", "End move phase");
+	action_button("pass", "Pass");
+	action_button("next", "Next");
+	action_button("undo", "Undo");
+
+	document.getElementById("frank_vp").textContent = game.f_vp;
+	document.getElementById("saracen_vp").textContent = game.s_vp;
+
+	update_cards();
+	update_map();
+
+	if (game.battle) {
+		document.getElementById("battle_header").textContent = game.battle.title;
+		document.getElementById("battle_message").textContent = game.battle.flash;
+		if (game.flash_next)
+			start_flash();
+		document.getElementById("battle").classList.add("show");
+		update_battle();
+	} else {
+		document.getElementById("battle").classList.remove("show");
+	}
+}
+
+build_map();
+
+drag_element_with_mouse("#battle", "#battle_header");
+scroll_with_middle_mouse("main", 3);
+init_map_zoom();
+init_shift_zoom();
+init_client(["Franks", "Saracens"]);