Update client.

Fixed some spelling errors in space data table.

Create tools directory and add Makefile.
Add layout.svg with boxes drawn on top of locations.
Add genlayout.js to create list of box locations.
Add gencolors.js to create beveled marker border colors.

Major rewrite of play.js and play.css with official assets.

1 files changed, 451 insertions, 629 deletions

diff --git a/play.js b/play.js
index 5ccf136..9ac9e60 100644
--- a/play.js
+++ b/play.js
@@ -1,677 +1,417 @@
+"use strict"
 
-const seed = 'none'
-const scenario = 'standard'
-const options = 'none'
-//const rules = require("./rules")
+let action_register = []
 
+function register_action(target, action, id) {
+	target.my_action = action
+	target.my_id = id
+	target.onmousedown = on_click_action
+	action_register.push(target)
+}
+
+function is_action(action, arg) {
+	return !!(view.actions && view.actions[action] && view.actions[action].includes(arg))
+}
+
+function on_click_action(evt) {
+	if (evt.button === 0)
+		send_action(evt.target.my_action, evt.target.my_id)
+}
+
+const last_space = 75
 const last_card = 110
 const last_power_card = 52
-let hover_timeout
-const height = 65
-const width  = 105
-const toolbar = document.getElementById('toolbar')
-const vpMarker = document.getElementById('vp')
-const counters = document.getElementById('counters')
-
-const countries= ['Poland', 'Hungary', 'East_Germany', 'Bulgaria', 'Czechoslovakia', 'Romania']
-
-/*const aside_events = [
-	"honecker",
-	"st_nicholas_church",
-	"helsinki_final_act",
-	"eco_glasnost",
-	"we_are_the_people",
-	"foreign_currency_debt_burden",
-	"li_peng",
-	"austria_hungary_border_reopened",
-	"grenztruppen",
-	"presidential_visit",
-	"securitate",
-	"laslzo_tokes",
-	"stand_fast",
-	"elena",
-	"new_years_eve_party"
-]*/
-const board_events = [2, 9, 69, 97]
+
+const countries = [ "Poland", "Hungary", "East_Germany", "Bulgaria", "Czechoslovakia", "Romania" ]
+const board_events = [ 2, 9, 69, 97 ]
 const box_events = [ 15, 24, 26, 39, 48, 49, 53, 58, 59, 65, 70, 73, 100, 101, 104 ]
-let box_events_showing = false
-let show_discard = false
-
-const overlay = document.getElementById('overlay');
-const spaceNameElement = document.getElementById('space-name');
-const spaceCharacteristicsElement = document.getElementById('space-characteristics');
-
-
-// Event listener to track mouse movement over the map
-        document.querySelector('.map').addEventListener('mousemove', function(event) {
-            const x = event.offsetX; // X-coordinate of mouse relative to container
-            const y = event.offsetY; // Y-coordinate of mouse relative to container
-	spaceCharacteristicsElement.innerText = `X: ${x}, Y: ${y}`;
-	})
-
-
- // Create map areas dynamically based on coordinates
-
- function create_ui() {
-
-// CREATE MAP
-
-	spaces.forEach((space) => {
-
-
-		if (space && space.box) {
-
-		//CREATE SPACES
-                const { x, y} = space.box;
-                const spaceArea = document.createElement('div');
-                spaceArea.classList.add('space-area', space.country)
-				spaceArea.id=`space_${space.space_id}`;
-                spaceArea.style.left = x + 'px';
-                spaceArea.style.top = y + 'px';
-                spaceArea.style.width = width + 'px';
-                spaceArea.style.height = height + 'px';
-				spaceArea.style.zIndex = 2;
-				spaceArea.my_space = space.space_id;  
-        		spaceArea.addEventListener('mousedown', on_click_space);
-		
-		//CREATE DEMOCRATIC INFLUENCE MARKERS FOR EACH SPACE
-				const dem_img = document.createElement('div')
-				dem_img.classList.add('demInfl', space.country)
-				dem_img.style.display = 'none'
-				dem_img.id=`${space.name_unique}_demInfl`
-				dem_img.style.zIndex = 1
-				dem_img.my_space = space.space_id;  
-        		dem_img.addEventListener('mousedown', on_click_space);
-				spaceArea.appendChild(dem_img)
-
-			//CREATE DEMOCRATIC INFLUENCE VALUES 
-				const demInflValue = document.createElement('p')
-				demInflValue.className='demInflValue'
-				demInflValue.style.display = 'none'
-				demInflValue.id=`${space.name_unique}_demInflValue`
-				demInflValue.innerText=space.demInfl
-				demInflValue.style.zIndex = 1
-				demInflValue.my_space = space.space_id;  
-        		demInflValue.addEventListener('mousedown', on_click_space);
-				spaceArea.appendChild(demInflValue)
-
-		//CREATE COMMUNIST INFLUENCE MARKERS FOR EACH SPACE
-				const com_img = document.createElement('div')
-				com_img.className='comInfl'
-				com_img.style.display='none'
-				com_img.id=`${space.name_unique}_comInfl`
-				com_img.style.zIndex = 1
-				com_img.my_space = space.space_id;  
-        		com_img.addEventListener('mousedown', on_click_space);
-				spaceArea.appendChild(com_img)
-
-			//CREATE COMMUNIST INFLUENCE VALUES 
-				const comInflValue = document.createElement('p')
-				comInflValue.className='comInflValue'
-				comInflValue.style.display='none'
-				comInflValue.id=`${space.name_unique}_comInflValue`
-				comInflValue.innerText=space.comInfl
-				comInflValue.style.zIndex = 1
-				comInflValue.my_space = space.space_id;  
-        		comInflValue.addEventListener('mousedown', on_click_space);
-				spaceArea.appendChild(comInflValue)
-			//} 
-		
-		counters.appendChild(spaceArea);
-		}
-	});
 
-// CREATE CARDS
+const ui = {
+	favicon: document.getElementById("favicon"),
+	turn_info: document.getElementById("turn_info"),
+
+	turn: document.getElementById("marker_turn"),
+	round: document.getElementById("marker_action_round"),
+	stability: document.getElementById("marker_stability_track"),
+	dem_tst: document.getElementById("marker_dem_tst"),
+	com_tst: document.getElementById("marker_com_tst"),
+	vp: document.getElementById("marker_vp"),
+
+	event_reminder_list: document.getElementById("event_reminder_list"),
+
+	played_card: document.getElementById("played_card"),
+	hand: document.getElementById("hand"),
+	power_hand: document.getElementById("power_hand"),
+	opp_hand: document.getElementById("opp_hand"),
+	opp_power_hand: document.getElementById("opp_power_hand"),
+	discard: document.getElementById("discard"),
+	removed: document.getElementById("removed"),
+	table_cards: document.getElementById("table_cards"),
+
+	ceausescu_hand: document.getElementById("ceausescu_hand"),
+	samizdat_card: document.getElementById("samizdat_card"),
+}
+
+function create_country(id, name) {
+	let [ x, y, w, h ] = LAYOUT[name]
+	let xc = Math.round(x + w / 2)
+	let yc = Math.round(y + h / 2)
+
+	let e = document.createElement("div")
+	e.className = "marker demInfl"
+	e.style.left = xc - 25 + "px"
+	e.style.top = yc - 25 + "px"
+	ui.countries[id] = e
+	document.getElementById("markers").appendChild(e)
+}
+
+function create_ui() {
+	ui.layout_xy = []
+	ui.spaces = []
+	ui.dem_inf = []
+	ui.com_inf = []
+
+	for (let s = 1; s <= last_space; ++s) {
+		let info = spaces[s]
+		let [ x, y, w, h ] = LAYOUT[info.ascii_name]
+		let xc = Math.round( x + w / 2 )
+		let yc = Math.round( y + h / 2 )
+		x -= 6
+		y -= 6
+		w += 12
+		h += 12
+
+		ui.layout_xy[s] = [ xc, yc ]
+
+		let space_e = document.createElement("div")
+		register_action(space_e, "space", s)
+		space_e.className = "space " + info.country
+		space_e.style.left = x + "px"
+		space_e.style.top = y + "px"
+		space_e.style.width = w + "px"
+		space_e.style.height = h + "px"
+		ui.spaces[s] = space_e
+
+		let com_e = document.createElement("div")
+		com_e.className = "marker comInfl hide"
+		com_e.style.left = (xc + 32 - 25) + "px"
+		com_e.style.top = (yc + 12 - 25) + "px"
+		ui.com_inf[s] = com_e
+
+		let dem_e = document.createElement("div")
+		dem_e.className = "marker demInfl hide"
+		dem_e.style.left = (xc - 32 - 25) + "px"
+		dem_e.style.top = (yc + 12 - 25) + "px"
+		ui.dem_inf[s] = dem_e
+
+		document.getElementById("spaces").append(space_e)
+		document.getElementById("markers").appendChild(com_e)
+		document.getElementById("markers").appendChild(dem_e)
+	}
 
-	const is_mobile = window.matchMedia("(pointer: coarse)").matches
 
+	ui.cards = []
 	for (let c = 1; c <= last_card; ++c) {
+		const card_e = document.createElement("div")
+		register_action(card_e, "card", c)
+		card_e.className = "card event_" + c
+		ui.cards[c] = card_e
+	}
 
-		const hand_card = document.createElement('img');
-        hand_card.classList.add('hand_card')
-		hand_card.id=`card_${c}`;
-		hand_card.src = `cards/e${c}.gif`
-		hand_card.my_card = c;  
-        hand_card.addEventListener('click', on_click_card);
-
-		if(!is_mobile) {
-			hand_card.addEventListener('mouseenter', () => {
-				hover_timeout = setTimeout(() => {
-					hand_card.classList.add('zoom');
-				}, 500) })
-			hand_card.addEventListener('mouseleave', () => {
-				clearTimeout(hover_timeout);
-				hand_card.classList.remove('zoom');
-			});
-		}
+	ui.power_cards = []
+	for (let c = 1; c <= last_power_card; ++c) {
+		const power_card_e = document.createElement("div")
+		register_action(power_card_e, "power_card", c)
+		power_card_e.className = "card power_" + c
+		ui.power_cards[c] = power_card_e
+	}
 
-		ui.cards.push(hand_card);
+	ui.events = []
+	for (let id of box_events) {
+		ui.events[id] = document.createElement("div")
+		ui.events[id].id = "event_" + id
+		ui.events[id].className = "marker event aside"
 	}
-	
-
-
-	for (let card of power_cards) {
-		if (!card) continue;
-    	const power_card = document.createElement('img');
-    	power_card.classList.add('power_card');
-    	power_card.id = `power_card_${card.number}`;
-    	power_card.src = `cards_2/${card.url}.gif`;
-    	power_card.my_card = card.number;
-    	power_card.addEventListener('mousedown', on_click_card);
-    	ui.power_cards.push(power_card);
+	for (let id of board_events) {
+		ui.events[id] = document.createElement("div")
+		ui.events[id].id = "event_" + id
+		ui.events[id].className = "marker event"
+		document.getElementById("markers").appendChild(ui.events[id])
 	}
-}
-
-
 
-
-function is_card_enabled(card) {
-	if (view.actions) {
-		if (card_action_menu.some(a => view.actions[a] && view.actions[a].includes(card)))
-			return true
-		if (view.actions.card_select && view.actions.card_select.includes(card))
-			return true
-		if (view.actions.card && view.actions.card.includes(card))
-			return true
-	}
-	return false
+	ui.countries = []
+	create_country(0, "country_poland")
+	create_country(1, "country_hungary")
+	create_country(2, "country_east_germany")
+	create_country(3, "country_bulgaria")
+	create_country(4, "country_czechoslovakia")
+	create_country(5, "country_romania")
 }
 
 // SUPPORTING FUNCTIONS
 
 function on_click_space(evt) {
-    if (evt.button === 0) {
-        const space = evt.target.my_space;
-        //console.log('on_click_space_called with space:', space);
-        if (send_action('infl', space)) {
+	if (evt.button === 0) {
+		const space = evt.target.my_space
+		//console.log('on_click_space_called with space:', space);
+		if (send_action("infl", space)) {
 			//console.log('send_action with infl:', space);
-			evt.stopPropagation();
-        } else if (send_action('sc', space)) {
+			evt.stopPropagation()
+		} else if (send_action("sc", space)) {
 			//console.log('send_action with sc:', space);
-			evt.stopPropagation();
+			evt.stopPropagation()
 		} else {
-           // console.log('send_action failed for space:', space);
-        }
-    }
-    //hide_popup_menu();
-}
-
-function on_click_card(evt) {
-	if (evt.button === 0) {
-		const card = evt.target.my_card;
-		//console.log('on_click_card_called with card:', card);
-		if (is_action('card', card)) {
-			//console.log('in action card')
-			if (send_action('card', card)) {
-				evt.stopPropagation();
-			}
-		}
-		if (is_action('power_card', card)) {
-			if (send_action('power_card', card)) {
-				evt.stopPropagation();
-			}
+			// console.log('send_action failed for space:', space);
 		}
 	}
+	//hide_popup_menu();
 }
 
-function is_action(action) {
-	//console.log('is_action called with: ', action)
-	//console.log('view.actions', view.actions)
-	if (view.actions && view.actions[action])
-		return true
-	return false
-}
-
-function is_card_action(action, card) {
-	//console.log('is_card_action called with action', action, 'card', card)
-	//console.log('view.actions', view.actions, 'view.actions[action]', view.actions[action])
-	if (view.actions && view.actions[action] && view.actions[action].includes(card))
-		return true
-	return false
-}
-
-function on_log(text) { // eslint-disable-line no-unused-vars
+function on_log(text) {
+	// eslint-disable-line no-unused-vars
 
 	let p = document.createElement("div")
 
 	if (text.match(/^>/)) {
 		text = text.substring(1)
-		p.className = 'i'
+		p.className = "i"
 	}
 
-	text = text.replace(/_/g, ' ')
+	text = text.replace(/_/g, " ")
 	text = text.replace(/C(\d+)/g, sub_card_name)
 	text = text.replace(/P(\d+)/g, sub_power_card_name)
 	text = text.replace(/V(\d+)/g, sub_power_card_value)
 	text = text.replace(/%(\d+)/g, sub_space_name)
 	text = text.replace(/D[1-6]/g, sub_die)
-	
 
 	if (text.match(/^\.h1/)) {
 		text = text.substring(4)
-		p.className = 'h1'
-	}
-	else if (text.match(/^\.h2d/)) {
+		p.className = "h1"
+	} else if (text.match(/^\.h2d/)) {
 		text = text.substring(5)
-		p.className = 'h2 dem'
-	}
-	else if (text.match(/^\.h2c/)) {
+		p.className = "h2 dem"
+	} else if (text.match(/^\.h2c/)) {
 		text = text.substring(5)
-		p.className = 'h2 com'
-	}
-	else if (text.match(/^\.h2/)) {
+		p.className = "h2 com"
+	} else if (text.match(/^\.h2/)) {
 		text = text.substring(4)
-		p.className = 'h2'
-	}
-	else if (text.match(/^\.h3/)) {
+		p.className = "h2"
+	} else if (text.match(/^\.h3/)) {
 		text = text.substring(4)
-		p.className = 'h3'
+		p.className = "h3"
 	}
 
 	p.innerHTML = text
 	return p
 }
 
-let ui = {
-	favicon: document.getElementById('favicon'),
-	player: [
-		document.getElementById("role_Democrat"),
-		document.getElementById("role_Communist"),
-	],
-	cards: [ null ],
-	power_cards: [null],
-	dem_hand_count: document.getElementById("role_stat_dem"),
-	com_hand_count: document.getElementById("role_stat_com"),
-	deck_length: document.getElementById("deck_length"),
-	played_card: 0,
-	table_panel: document.getElementById("table_panel"),
-	hand_panel: document.getElementById("hand_panel"),
-	turn: document.getElementById("turn-tracker"),
-	round: document.getElementById("action-round-tracker"),
-	stability: document.getElementById("stability-track"),
-	dem_TST: document.getElementById("dem-TST"),
-	com_TST: document.getElementById("com-TST"),
-	vp: document.getElementById("vp"),
-	spaces: document.getElementsByClassName("space-area")
+function layout_turn_marker() {
+	let x = 654 + 24 + (view.turn - 1) * 53
+	let y = 80 + 24
+	ui.turn.style.left = (x - 25) + "px"
+	ui.turn.style.top = (y - 25) + "px"
+}
 
+function layout_round_marker() {
+	let x = 709 + 24 + (view.turn - 1) * 53
+	let y = 142 + 24
+	ui.round.style.left = (x - 25) + "px"
+	ui.round.style.top = (y - 25) + "px"
+	if (view.round_player === "Democrat") // TODO: bit flag?
+		ui.round.className = "marker dem"
+	else
+		ui.round.className = "marker com"
 }
 
+function layout_stability_marker() {
+	let x = 24 + 1381
+	let y = 24 + 1081 + view.stability * 54
+	ui.stability.style.left = (x - 25) + "px"
+	ui.stability.style.top = (y - 25) + "px"
+}
 
-function on_update() {
-	//console.log('on_update called')
-	//console.log('view.valid_spaces: ', view.valid_spaces)
-	//console.log('view.actions: ', view.actions)
-	//console.log('view.power_cards:', view.power_cards)
-	document.querySelectorAll('[id^="space_"].selected').forEach(spaceElement => {spaceElement.classList.remove('selected');});
-    document.getElementById("power_hand")?.querySelectorAll('.selected').forEach(cardElement => {cardElement.classList.remove('selected');});
-	view.valid_spaces.forEach(space_id => {
-    	const spaceElementId = `space_${space_id}`;
-    	const spaceElement = document.getElementById(spaceElementId);
-
-    	if (spaceElement) {
-        	spaceElement.classList.add('selected');
-    	}
-	});
-
-	//Check influence values
-
-	for (let i = 1; i < spaces.length; i ++) {
-		
-		const space = spaces[i]
-		const demInfl = view.demInfl[i]
-		const comInfl = view.comInfl[i]
-		//console.log('piece', piece)
-		//console.log('space', space)
-		const dem_marker = document.getElementById(`${space.name_unique}_demInfl`);
-		const dem_number = document.getElementById(`${space.name_unique}_demInflValue`);
-		const com_marker = document.getElementById(`${space.name_unique}_comInfl`);
-		const com_number = document.getElementById(`${space.name_unique}_comInflValue`);
-
-		dem_number.innerText=demInfl
-		if (demInfl > 0) {
-			dem_marker.style.display = 'block';
-			dem_number.style.display = 'block';
-			
-			if (demInfl > 9) {
-				dem_number.classList.remove('demInflValue')
-				dem_number.classList.add('demInflValue_10')
-			} else {
-				dem_number.classList.add('demInflValue')
-				dem_number.classList.remove('demInflValue_10')
-			}
-
-			if(check_dem_control(demInfl, comInfl, space)){
-				dem_marker.classList.add('controlled')
-				dem_number.classList.add('outlined_text')
-				dem_marker.classList.remove('uncontrolled')
-			} else {
-				dem_marker.classList.add('uncontrolled')
-				dem_marker.classList.remove('controlled')
-				dem_number.classList.remove('outlined_text')
-			}
-		} else {
-			dem_marker.style.display = 'none';
-			dem_number.style.display = 'none';
-		}
-		com_number.innerText=comInfl
-		if (comInfl > 0) {
-			com_marker.style.display = 'block';
-			com_number.style.display = 'block';
-
-			if (comInfl > 9) {
-				com_number.classList.remove('comInflValue')
-				com_number.classList.add('comInflValue_10')
-			} else {
-				com_number.classList.add('comInflValue')
-				com_number.classList.remove('comInflValue_10')
-			}
-
-			if(check_com_control(demInfl, comInfl, space)){
-				com_marker.classList.add('controlled')
-				com_number.classList.add('controlled')
-				com_marker.classList.remove('uncontrolled')
-				com_number.classList.remove('uncontrolled')
-			} else {
-				com_marker.classList.add('uncontrolled')
-				com_number.classList.add('uncontrolled')
-				com_marker.classList.remove('controlled')
-				com_number.classList.remove('controlled')
-			}
-		} else {
-			com_marker.style.display = 'none';
-			com_number.style.display = 'none';
-		}
-		
-	}
+let TST_X = [ 53, 53+69, 53+69*2, 53+69*3, 53+69*4, 53+69*5, 53+69*6, 556 ]
+let TST_Y = [ 2128, 2257 ]
 
-// UPDATE COUNTRY MARKERS
-	for (let i = 0; i < countries.length; i++) {
-		const country = countries[i];
-		const marker = document.getElementById(country)
-		const times_held = document.getElementById(`${country}_times_held`)
-		
-		if (view.revolutions[find_country_index(country)]) {
-			marker.classList.add('revolution')
-			marker.classList.remove('held')
-			marker.style.display = 'block'
-			times_held.classList.add('outlined_text')
-			times_held.classList.remove('hide')
-		} else if (view.times_held[find_country_index(country)] > 0 ) {
-			//console.log('setting ', country)
-			marker.classList.add('held')
-			marker.style.display = 'block'
-			times_held.classList.remove('hide')
-			times_held.innerHTML = view.times_held[find_country_index(country)]
-		}
-		else {marker.style.display = 'none'}
-	} 
+function layout_tst_marker(e, v, top) {
+	let x = TST_X[v] + 24
+	let y = TST_Y[top] + 24
+	e.style.left = (x - 25) + "px"
+	e.style.top = (y - 25) + "px"
+}
 
-// UPDATE ASIDE
-	if (view.is_pwr_struggle) {
-		ui.dem_hand_count.innerText = `${view.democrat_power_hand} Power cards`
-		ui.com_hand_count.innerText = `${view.communist_power_hand} Power cards`		
-	} else{
-		ui.dem_hand_count.innerText = `${view.democrat_hand} cards`
-		ui.com_hand_count.innerText = `${view.communist_hand} cards`
+function layout_vp_marker() {
+	let x, y
+	if (view.vp === 0) {
+		y = 2425 + 25
+		x = 843 + 28
 	}
-	ui.deck_length.innerText = `${view.strategy_deck} cards`
-
-// UPDATE HAND
-	document.getElementById("hand").replaceChildren()
-	document.getElementById("played_card").replaceChildren()
-		
-	if (view.hand.length && view.is_pwr_struggle === false) {
-		document.getElementById("hand_panel").classList.remove("hide")
-		//console.log('view.actions.card', view.actions.card)
-		for (let c of view.hand) {
-			let card = ui.cards[c]
-			document.getElementById("hand").appendChild(card);
-			if (view.actions && view.actions.card && view.actions.card.includes(c)) {
-				card.classList.add('action')
-			} else {
-				card.classList.remove('action')
-			}
-			if (view.valid_cards.includes(c)) {
-                card.classList.add('selected')
-            } else {
-				card.classList.remove('selected')
-			}
-			card.classList.remove('discard_card')
+	else if (view.vp < 0) {
+		if (view.vp & 1) {
+			y = 2456 + 25
+			x = 803 + 28 - (-view.vp - 1)/2 * 62
+		} else {
+			y = 2395 + 25
+			x = 772 + 28 - (-view.vp - 2)/2 * 62
 		}
-	} else {
-		document.getElementById("hand_panel").classList.add("hide")
-	}
-
-// UPDATE DISCARD
-document.getElementById("discard").replaceChildren()
-if (!view.is_pwr_struggle) {
-	for (let c of view.strategy_discard) {
-		let discard_card = ui.cards[c]
-		document.getElementById("discard").appendChild(discard_card)
-		discard_card.classList.add('discard_card')
-		discard_card.classList.remove('selected')
-	}
-} else if (view.is_pwr_struggle) {
-	for (let c of view.strategy_discard) {
-		let discard_card = ui.power_cards[c]
-		document.getElementById("discard").appendChild(discard_card)
-		discard_card.classList.add('discard_card')
-		discard_card.classList.remove('selected')
 	}
-}
-
-// DISCARD FOR EVENTS
-//console.log('view.discard',view.discard)
-if(view.discard) {
-	//document.getElementById("discard").replaceChildren()
-	document.getElementById("discard_panel").classList.remove("hide")
-	for (let c of view.strategy_discard) {
-		let discard_card = ui.cards[c]
-		document.getElementById("discard").appendChild(discard_card)
-		discard_card.classList.add('discard_card')
-		if (view.valid_cards.includes(c)) {
-			discard_card.classList.add('selected')
+	else if (view.vp > 0) {
+		if (view.vp & 1) {
+			y = 2396 + 25
+			x = 883 + 28  + (view.vp - 1)/2 * 62
 		} else {
-			discard_card.classList.remove('selected')
+			y = 2455 + 25
+			x = 913 + 28 + (view.vp - 2)/2 * 62
 		}
-	}	
-} else {
-	if (!show_discard) {
-		document.getElementById("discard_panel").classList.add("hide")
+	}
+	ui.vp.style.left = (x - 25) + "px"
+	ui.vp.style.top = (y - 25) + "px"
+}
+
+function layout_country(id) {
+	for (let i = 0; i < 6; i++) {
+		// TODO: what number to display?
+		if (view.revolutions[id])
+			ui.countries[id].className = "marker comInfl ctl v" + view.times_held[id]
+		else if (view.times_held[id] > 0)
+			ui.countries[id].className = "marker demInfl ctl v" + view.times_held[id]
+		else
+			ui.countries[id].className = "marker hide"
 	}
 }
 
-// UPDATE PERMANENTLY REMOVED CARDS
-document.getElementById("removed").replaceChildren()
-for (let c of view.strategy_removed) {
-	let discard_card = ui.cards[c]
-	document.getElementById("removed").appendChild(discard_card)
-	discard_card.classList.add('discard_card')
-	discard_card.classList.remove('selected')
-}
-
-
-// PLAYED CARD PANEL
-if (view.played_card > 0) {
-	document.getElementById("played_card_panel").classList.remove("hide")
-	document.getElementById("played_card").appendChild(ui.cards[view.played_card]);
-	document.getElementById("played_card").classList.remove("hand_card")
-} else {
-	document.getElementById("played_card_panel").classList.add("hide")
-}
-
-// TABLE CARDS PANEL
-document.getElementById("table_cards").replaceChildren()
-if (view.table_cards.length > 0) {
-	document.getElementById("table_panel").classList.remove("hide")
-	for (let c of view.table_cards) {
-		let card = ui.cards[c]
-		document.getElementById("table_cards").appendChild(card);
-		card.classList.remove("hand_card")
-		card.classList.add('event_card');
-		}	
-	} else {
-	document.getElementById("table_panel").classList.add("hide")
-}
+function on_update() {
+	if (!ui.spaces)
+		create_ui()
 
-// OPPONENT HAND
-document.getElementById("opp_hand").replaceChildren()
-if (!view.is_pwr_struggle) {
-	if (view.show_opp_hand && view.opp_hand.length >0) {
-		document.getElementById("opp_hand_panel").classList.remove("hide")
-		for (let c of view.opp_hand) {
-			let card = ui.cards[c]
-			document.getElementById("opp_hand").appendChild(card);	
-			card.classList.remove('discard_card')
-			if (!view.is_pwr_struggle) {
-				if (view.valid_cards.includes(c)) {
-					card.classList.add('selected')
-				} else {
-					card.classList.remove('selected')
-				}
-			}
-		}	
+	// UPDATE ASIDE
+	if (view.is_pwr_struggle) {
+		roles.Democrat.stat.textContent = `${view.democrat_power_hand} Power cards`
+		roles.Communist.stat.textContent = `${view.communist_power_hand} Power cards`
 	} else {
-		document.getElementById("opp_hand_panel").classList.add("hide")
+		roles.Democrat.stat.textContent = `${view.democrat_hand} cards`
+		roles.Communist.stat.innerText = `${view.communist_hand} cards`
 	}
-} else {
-	//console.log('power struggle, show opp hand', view.show_opp_hand, 'view opp hand', view.opp_hand )
-	if (view.show_opp_hand && view.opp_hand && view.opp_hand.length > 0) {
-		document.getElementById("opp_hand_panel").classList.remove("hide")
-		for (let c of view.opp_hand) {
-			let card = ui.power_cards[c]
-			//console.log('power_card:', power_card)
-			document.getElementById("opp_hand").appendChild(card);
-			card.classList.remove('discard_card')
-		}	
+	ui.turn_info.innerText = `Strategy deck: ${view.strategy_deck} cards`
+
+	// UPDATE TRACK MARKERS
+	layout_turn_marker()
+	layout_round_marker()
+	layout_stability_marker()
+	layout_vp_marker()
+	layout_tst_marker(ui.dem_tst, view.dem_tst, 0)
+	layout_tst_marker(ui.com_tst, view.com_tst, 1)
+
+	// UPDATE EVENT MARKERS ON THE BOARD
+
+	if (view.persistent_events.includes(2))
+		ui.events[2].style.display = "block"
+	else
+		ui.events[2].style.display = "none"
+
+	if (view.persistent_events.includes(9))
+		ui.events[9].style.display = "block"
+	else
+		ui.events[9].style.display = "none"
+
+	if (view.persistent_events.includes(69)) {
+		ui.events[69].style.display = "block"
+		ui.events[69].style.left = ui.layout_xy[view.systematization][0] - 25 + "px"
+		ui.events[69].style.top = ui.layout_xy[view.systematization][1] - 25 + "px"
 	} else {
-		document.getElementById("opp_hand_panel").classList.add("hide")
+		ui.events[69].style.display = "none"
 	}
-}
 
-// POWER STRUGGLE HAND
-	document.getElementById("power_hand").replaceChildren()
-
-	if (view.power_hand.length && view.is_pwr_struggle) {
-		document.getElementById("power_panel").classList.remove("hide")
-		for (let c of view.power_hand) {
-			let power_card = ui.power_cards[c]
-			document.getElementById("power_hand").appendChild(power_card);
-			power_card.classList.remove('discard_card')
-			if (view.valid_cards.includes(c)) {
-                power_card.classList.add('selected');
-            }	
-		}	
+	if (view.persistent_events.includes(97)) {
+		ui.events[97].style.display = "block"
+		ui.events[97].style.left = ui.layout_xy[view.the_tyrant_is_gone][0] - 25 + "px"
+		ui.events[97].style.top = ui.layout_xy[view.the_tyrant_is_gone][1] - 25 + "px"
 	} else {
-		document.getElementById("power_panel").classList.add("hide")
+		ui.events[97].style.display = "none"
 	}
 
-// CEAUSESCU
+	// EVENT REMINDER LIST
+
+	ui.event_reminder_list.replaceChildren()
+	for (let id of box_events)
+		if (view.persistent_events.includes(id))
+			ui.event_reminder_list.appendChild(ui.events[id])
+
+	// UPDATE INFLUENCE VALUES
+	for (let s = 1; s <= last_space; ++s) {
+		const demInfl = view.demInfl[s]
+		const comInfl = view.comInfl[s]
+
+		if (demInfl - comInfl >= spaces[s].stability)
+			ui.dem_inf[s].className = "marker demInfl ctl v" + demInfl
+		else if (demInfl > 0)
+			ui.dem_inf[s].className = "marker demInfl v" + demInfl
+		else
+			ui.dem_inf[s].className = "marker demInfl hide"
+
+		if (comInfl - demInfl >= spaces[s].stability)
+			ui.com_inf[s].className = "marker comInfl ctl v" + comInfl
+		else if (comInfl > 0)
+			ui.com_inf[s].className = "marker comInfl v" + comInfl
+		else
+			ui.com_inf[s].className = "marker comInfl hide"
+	}
 
-if (view.ceausescu_cards && view.ceausescu_cards.length > 0 && view.is_pwr_struggle === true) {
-	document.getElementById("ceausescu_panel").classList.remove("hide")
-	for (let c of view.ceausescu_cards) {
-		let power_card = ui.power_cards[c]
-		document.getElementById("ceausescu_hand").appendChild(power_card);
-		power_card.classList.remove('discard_card')
+	// UPDATE COUNTRY MARKERS
 
-	}	
-} else {
-	document.getElementById("ceausescu_panel").classList.add("hide")
-}
+	for (let i = 0; i < 6; ++i)
+		layout_country(i)
 
-// SAMIZDAT CARD
-if (view.samizdat > 0 ) {
-	let samizdat_card = ui.cards[view.samizdat]
-	document.getElementById("samizdat_panel").classList.remove("hide")
-	document.getElementById("samizdat_card").appendChild(samizdat_card)
-} else {
-	document.getElementById("samizdat_panel").classList.add("hide")
-}
+	// UPDATE CARD DISPLAYS
 
-// UPDATE BOARD MARKERS
-	ui.turn.className = `t${view.turn}`
-	if (view.round_player === 'Democrat') {
-		ui.round.className = `dem-action-round-tracker r${view.round}`
-	} else {
-		ui.round.className = `com-action-round-tracker r${view.round}`
-	}
-	ui.stability.className = `s${view.stability}`
-	ui.dem_TST.className = `tst${view.dem_tst}`
-	ui.com_TST.className = `tst${view.com_tst}`
-	if (view.vp >= -20 && view.vp <= 20) {
-		ui.vp.className = `vp${view.vp}`
-	} else if (view.vp > 20) {
-		ui.vp.className = `vp21`
-	} else if (view.vp < -20) {
-		ui.vp.className = `vp-21`
-	}
-
-//console.log('strategy discard: ', view.strategy_discard)
-//console.log('valid spaces: ', view.valid_spaces)
-
-//console.log('view.persistent_events', view.persistent_events)
+	ui.played_card.replaceChildren()
+	if (view.played_card > 0)
+		ui.played_card.appendChild(ui.cards[view.played_card])
 
-// UPDATE EVENT MARKERS ON THE BOARD
+	ui.samizdat_card.replaceChildren()
+	if (view.samizdat > 0)
+		ui.samizdat_card.appendChild(ui.cards[view.samizdat])
 
-for (let id of board_events) {
-	let marker = document.getElementById(`event_${id}`)
-	//console.log('event', id, marker)
-	if (view.persistent_events.includes(id)) {
-		marker.style.display = 'block'
-	} else {
-		marker.style.display = 'none'
-	}
-}
+	ui.hand.replaceChildren()
+	for (let c of view.hand)
+		ui.hand.appendChild(ui.cards[c])
 
+	ui.power_hand.replaceChildren()
+	if (view.power_hand)
+		for (let c of view.power_hand)
+			ui.hand.appendChild(ui.power_cards[c])
 
-// UPDATE EVENT MARKERS BELOW THE BOARD
+	ui.opp_hand.replaceChildren()
+	if (view.opp_hand)
+		for (let c of view.opp_hand)
+			ui.opp_hand.appendChild(ui.cards[c])
 
-for (let id of box_events) {
-	let marker = document.getElementById(`event_${id}`)
-	//console.log('event', id, marker)
-	if (view.persistent_events.includes(id)) {
-		marker.style.display = 'block'
-	} else {
-		marker.style.display = 'none'
-	}
-}
+	// TODO: fix rules to set view.opp_power_hand
+	ui.opp_power_hand.replaceChildren()
+	if (view.opp_power_hand)
+		for (let c of view.opp_power_hand)
+			ui.opp_hand.appendChild(ui.power_cards[c])
 
+	ui.ceausescu_hand.replaceChildren()
+	if (view.ceausescu_cards)
+		for (let c of view.ceausescu_cards)
+			ui.ceausescu_hand.appendChild(ui.power_cards[c])
 
-// CHECK WHETHER ANY EVENT MARKERS ARE SHOWING IN THE EVENTS BOX
-box_events_showing = false
-for (let id of box_events) {
-    if (view.persistent_events.includes(id)) {
-        box_events_showing = true; 
-    } 
-/*
-	//Special check for events which are not true/false
-	if (view.persistent_events['foreign_currency_debt_burden'] !== '') {
-		aside_events_showing = true
-	}
-	if (view.persistent_events['stand_fast'] !== '') {
-		aside_events_showing = true
-	}
-		*/
-}
+	ui.discard.replaceChildren()
+	for (let c of view.strategy_discard)
+		ui.discard.appendChild(ui.cards[c])
 
-if (box_events_showing) {
-	document.getElementById('events_panel').classList.remove("hide")
-} else {
-	document.getElementById('events_panel').classList.add("hide")
-}
+	ui.removed.replaceChildren()
+	for (let c of view.strategy_removed)
+		ui.discard.appendChild(ui.cards[c])
 
-let systematization = document.getElementById('event_69')
-if (view.persistent_events.includes(69)) {
-	systematization.style.left = (spaces[view.systematization].box.x +20) +  'px';
-	systematization.style.top = spaces[view.systematization].box.y + 'px';
-}
+	ui.table_cards.replaceChildren()
+	if (view.table_cards)
+		for (let c of view.table_cards)
+			ui.table_cards.appendChild(ui.cards[c])
 
-let tyrant = document.getElementById('event_97')
-if (view.persistent_events.includes(97)) {
-	tyrant.style.left = (spaces[view.the_tyrant_is_gone].box.x - 41) +  'px';
-	tyrant.style.top = (spaces[view.the_tyrant_is_gone].box.y + 23) + 'px';
-} else {tyrant.style.display = 'none'}
+	for (let e of action_register)
+		e.classList.toggle("action", is_action(e.my_action, e.my_id))
 
 	action_button("yes", "Yes")
 	action_button("no", "No")
@@ -696,7 +436,7 @@ if (view.persistent_events.includes(97)) {
 	action_button("strike", "Strike")
 	action_button("march", "March")
 	action_button("rally", "Rally in the Square")
-	action_button("petition", "Petition")	
+	action_button("petition", "Petition")
 	action_button("bonus", "Calculate VP bonus")
 	action_button("scoring", "Score country")
 	action_button("retain", "Retain Power")
@@ -704,9 +444,9 @@ if (view.persistent_events.includes(97)) {
 	action_button("take", "Take Power")
 	action_button("concede", "Concede")
 	action_button("struggle", "Begin power struggle")
-	action_button("raise", "Raise the stakes")	
-	action_button("draw", "Draw")	
-	action_button("scoring", "Scoring")	
+	action_button("raise", "Raise the stakes")
+	action_button("draw", "Draw")
+	action_button("scoring", "Scoring")
 	action_button("event", "Event")
 	action_button("opp_event", "Resolve opponent event")
 	action_button("influence", "Place SPs")
@@ -716,8 +456,6 @@ if (view.persistent_events.includes(97)) {
 	action_button("done", "Done")
 	action_button("end_round", "End Round")
 	action_button("undo", "Undo")
-
-console.log('view.actions', view.actions)
 }
 
 // =========================== LOG FUNCTIONS ==============================================
@@ -738,9 +476,8 @@ function sub_power_card_value(match, p1) {
 }
 
 function sub_space_name(match, p1) {
-	let x = p1 | 0
-	let id = spaces[x].space_id
-	let name = spaces[x].name_unique
+	let id = p1 | 0
+	let name = spaces[id].name_unique
 	return `<span class="space_tip" onmouseenter="on_focus_space_tip(${id})" onmouseleave="on_blur_space_tip(${id})" onclick="on_click_space_tip(${id})">${name}</span>`
 }
 
@@ -754,45 +491,32 @@ const die = {
 	D3: '<span class="die white d3"></span>',
 	D4: '<span class="die white d4"></span>',
 	D5: '<span class="die white d5"></span>',
-	D6: '<span class="die white d6"></span>'
+	D6: '<span class="die white d6"></span>',
 }
 
 // =========================== VISUAL FUNCTIONS ==========================================#
 
-function on_focus_card_tip(card_number) { 
-	document.getElementById("tooltip").className = "card card_" + card_number
+function on_focus_card_tip(card_number) {
+	document.getElementById("tooltip").className = "card event_" + card_number
 }
 
-function on_blur_card_tip() { 
+function on_blur_card_tip() {
 	document.getElementById("tooltip").classList = "card hide"
 }
 
 function on_focus_space_tip(id) {
-	space = document.getElementById(`space_${id}`)
-	space.classList.add("tip")
-}
-
-function on_click_space_tip(id) {
-	space = document.getElementById(`space_${id}`)
-	scroll_into_view(space)
+	ui.spaces[id].classList.add("tip")
 }
 
 function on_blur_space_tip(id) {
-	space = document.getElementById(`space_${id}`)
-	space.classList.remove("tip")
+	ui.spaces[id].classList.remove("tip")
 }
 
-function toggle_pieces() {
-	document.getElementById("pieces").classList.toggle("hide")
+function on_click_space_tip(id) {
+	scroll_into_view(ui.spaces[id])
 }
 
-
 function toggle_discard() {
-	if (show_discard) {
-		show_discard = false
-	} else {
-		show_discard = true
-	}
 	document.getElementById("discard_panel").classList.toggle("hide")
 }
 
@@ -800,20 +524,118 @@ function toggle_removed() {
 	document.getElementById("removed_panel").classList.toggle("hide")
 }
 
-function check_dem_control(demInfl, comInfl, space) {
-	if ((demInfl - comInfl) >= space.stability) {
-		return true
-	} else{ false}
-}
-
-function check_com_control(demInfl, comInfl, space) {
-	if ((comInfl - demInfl) >= space.stability) {
-		return true
-	} else{ false}
-}
-
 function find_country_index(country) {
 	return countries.indexOf(country)
 }
 
-create_ui()
+// #region GENERATED LAYOUT DATA
+
+var LAYOUT = {
+	"Babes-Bolyai University": [958,1529,127,75],
+	"Berlin": [329,148,127,75],
+	"Bialystok": [1202,436,127,76],
+	"Brasov": [1339,1556,127,75],
+	"Bratislava": [539,1013,127,76],
+	"Brno": [521,904,127,76],
+	"Bucuresti": [1186,1837,127,76],
+	"Budapest": [809,1249,127,76],
+	"Bulgarian Writers": [838,2192,127,76],
+	"Burgas": [1289,2152,127,76],
+	"Bydgoszcz": [872,388,127,76],
+	"Catholic Church, Czechoslovakia": [692,1010,127,75],
+	"Catholic Church, Hungary": [409,1126,127,76],
+	"Catholic Church, Poland": [802,558,127,75],
+	"Ceske Budejovice": [260,765,127,77],
+	"Charles University": [491,677,128,76],
+	"Cluj-Napoca": [970,1429,127,76],
+	"Constanta": [1443,1925,127,76],
+	"Craiova": [977,1793,127,76],
+	"Czech Writers": [573,773,127,76],
+	"Debrecen": [1000,1192,127,76],
+	"Dresden": [343,479,127,76],
+	"Eotvos Lorand University": [658,1314,127,76],
+	"Erfurt": [38,455,127,76],
+	"Galati": [1409,1778,127,76],
+	"Gdansk": [896,277,127,76],
+	"German Writers": [81,239,127,76],
+	"Gyor": [560,1129,127,76],
+	"Halle": [231,357,127,75],
+	"Harghita/Covasna": [1186,1560,127,75],
+	"Hungarian Writers": [452,1322,127,76],
+	"Iasi": [1369,1395,127,76],
+	"Jagiellonian University": [870,867,127,76],
+	"Karl-Marx-Stadt": [184,492,127,75],
+	"Katowice": [733,723,127,76],
+	"Kosice": [995,1037,127,76],
+	"Krakow": [911,761,127,76],
+	"Leipzig": [387,379,127,76],
+	"Lodz": [959,620,127,76],
+	"Lublin": [1124,754,127,76],
+	"Lutheran Church": [391,271,127,76],
+	"Magdeburg": [79,352,127,75],
+	"Miskolc": [851,1146,127,76],
+	"Orthodox Church, Bulgaria": [1130,1956,127,76],
+	"Orthodox Church, Romania": [1094,1700,127,76],
+	"Ostrava": [673,868,127,75],
+	"Pecs": [626,1406,127,75],
+	"Pleven": [979,1948,127,76],
+	"Ploiesti": [1356,1671,127,76],
+	"Plovdiv": [987,2209,127,75],
+	"Plzen": [211,615,127,76],
+	"Polish Writers": [1051,883,127,75],
+	"Poznan": [671,452,127,76],
+	"Praha": [412,782,127,75],
+	"Presov": [844,1010,127,75],
+	"Razgrad": [1219,2057,127,76],
+	"Romanian Writers": [947,1625,127,75],
+	"Rostock": [299,53,127,76],
+	"Ruse": [1277,1956,127,76],
+	"Schwerin": [148,86,127,76],
+	"Sliven": [1144,2251,127,75],
+	"Sofia": [983,2098,127,76],
+	"Sofia University": [828,2095,127,76],
+	"Stara Zagora": [1133,2153,127,75],
+	"Szczecin": [574,263,127,75],
+	"Szeged": [812,1364,127,76],
+	"Szekesfehervar": [571,1223,127,75],
+	"Szombathely": [410,1224,127,76],
+	"Targu Mures": [1169,1443,127,76],
+	"Tatabanya": [706,1126,127,75],
+	"Timisoara": [767,1531,127,76],
+	"Varna": [1387,2051,127,76],
+	"Walter Ulbricht Academy": [234,240,127,76],
+	"Warszawa": [1032,490,127,75],
+	"Wroclaw": [595,565,127,75],
+	"action_1": [708,143,48,44],
+	"action_8": [1080,143,47,43],
+	"country_bulgaria": [915,1999,46,41],
+	"country_czechoslovakia": [463,624,44,39],
+	"country_east_germany": [560,160,43,37],
+	"country_hungary": [1034,1319,44,39],
+	"country_poland": [1188,292,44,39],
+	"country_romania": [1287,1349,44,39],
+	"event_solidarity_legalized": [779,270,44,43],
+	"event_the_wall": [222,179,40,41],
+	"tst_com_1": [53,2257,47,47],
+	"tst_com_7": [469,2257,47,47],
+	"tst_com_8": [556,2257,47,47],
+	"tst_dem_1": [53,2128,47,47],
+	"tst_dem_7": [469,2128,47,47],
+	"tst_dem_8": [556,2128,47,47],
+	"turn_1": [655,81,47,48],
+	"turn_10": [1133,80,48,48],
+	"ussr_1": [1381,1080,48,48],
+	"ussr_2": [1381,1134,48,48],
+	"ussr_3": [1381,1188,48,48],
+	"ussr_4": [1381,1243,48,48],
+	"ussr_5": [1381,1297,48,48],
+	"vp_0": [843,2425,55,51],
+	"vp_1": [883,2395,55,50],
+	"vp_19": [1440,2395,55,50],
+	"vp_2": [913,2455,56,51],
+	"vp_20": [1471,2455,55,51],
+	"vp_neg_1": [803,2455,56,51],
+	"vp_neg_19": [246,2456,55,50],
+	"vp_neg_2": [772,2395,56,51],
+	"vp_neg_20": [215,2395,55,51],
+}