Simplify styles and html for play.html

1 files changed, 0 insertions, 816 deletions

diff --git a/ui.js b/ui.js
deleted file mode 100644
index ea7b575..0000000
--- a/ui.js
+++ /dev/null
@@ -1,816 +0,0 @@
-"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 on_button_next(evt) { send_action('next'); }
-function on_button_pass(evt) { send_action('pass'); }
-function on_button_undo(evt) { send_action('undo'); }
-function on_button_winter_campaign(evt) { send_action('winter_campaign'); }
-function on_button_group_move(evt) { send_action('group_move'); }
-function on_button_end_group_move(evt) { send_action('end_group_move'); }
-function on_button_sea_move(evt) { send_action('sea_move'); }
-function on_button_end_sea_move(evt) { send_action('end_sea_move'); }
-function on_button_muster(evt) { send_action('muster'); }
-function on_button_end_muster(evt) { send_action('end_muster'); }
-function on_button_end_move_phase(evt) { send_action('end_move_phase'); }
-function on_button_end_regroup(evt) { send_action('end_regroup'); }
-function on_button_end_retreat(evt) { send_action('end_retreat'); }
-function on_button_eliminate(evt) { send_action('eliminate'); }
-
-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() {
-	show_action_button("#next_button", "next");
-	show_action_button("#pass_button", "pass");
-	show_action_button("#undo_button", "undo");
-	show_action_button("#winter_campaign_button", "winter_campaign");
-	show_action_button("#group_move_button", "group_move");
-	show_action_button("#end_group_move_button", "end_group_move");
-	show_action_button("#sea_move_button", "sea_move");
-	show_action_button("#end_sea_move_button", "end_sea_move");
-	show_action_button("#muster_button", "muster");
-	show_action_button("#end_muster_button", "end_muster");
-	show_action_button("#end_move_phase_button", "end_move_phase");
-	show_action_button("#end_regroup_button", "end_regroup");
-	show_action_button("#end_retreat_button", "end_retreat");
-	show_action_button("#eliminate_button", "eliminate");
-
-	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("#grid_center", 3);
-init_map_zoom();
-init_shift_zoom();
-init_client(["Franks", "Saracens"]);