Better layout.

1 files changed, 369 insertions, 85 deletions

diff --git a/play.js b/play.js
index 4ec31fe..c075d4d 100644
--- a/play.js
+++ b/play.js
@@ -68,26 +68,66 @@ const REGION_NAME = [
 	"Unavailable",
 ]
 
-function is_no_place_governor(province) { return province >= view.support.length }
-function get_support(province) { return view.support[province] }
-function get_barbarian_location(id) { return view.barbarians[id] & 63 }
-function is_barbarian_inactive(id) { return view.barbarians[id] & 64 }
-function get_legion_location(ix) { return view.legions[ix] & 63 }
-function is_legion_reduced(ix) { return view.legions[ix] & 64 }
-function is_legion_unused(ix) { return view.legions[ix] === AVAILABLE }
-function get_governor_location(id, loc) { return view.governors[id] & 63 }
-function get_general_location(id) { return view.generals[id] & 63 }
-function is_general_inside_capital(id) { return view.generals[id] & 64 }
-function has_general_castra(id) { return view.castra & (1 << id) }
-function has_militia_castra(province) { return view.mcastra & (1 << province) }
-function has_quaestor(province) { return view.quaestor & (1 << province) }
-function has_militia(province) { return view.militia & (1 << province) }
-function get_mobs(province) { return view.mobs[province] }
-function has_amphitheater(province) { return view.amphitheater & (1 << province) }
-function has_basilica(province) { return view.basilica & (1 << province) }
-function has_limes(province) { return view.limes & (1 << province) }
-function is_breakaway(province) { return view.breakaway & (1 << province) }
-function is_seat_of_power(province) { return view.seat_of_power & (1 << province) }
+function is_no_place_governor(province) {
+	return province >= view.support.length
+}
+function get_support(province) {
+	return view.support[province]
+}
+function get_barbarian_location(id) {
+	return view.barbarians[id] & 63
+}
+function is_barbarian_inactive(id) {
+	return view.barbarians[id] & 64
+}
+function get_legion_location(ix) {
+	return view.legions[ix] & 63
+}
+function is_legion_reduced(ix) {
+	return view.legions[ix] & 64
+}
+function is_legion_unused(ix) {
+	return view.legions[ix] === AVAILABLE
+}
+function get_governor_location(id, loc) {
+	return view.governors[id] & 63
+}
+function get_general_location(id) {
+	return view.generals[id] & 63
+}
+function is_general_inside_capital(id) {
+	return view.generals[id] & 64
+}
+function has_general_castra(id) {
+	return view.castra & (1 << id)
+}
+function has_militia_castra(province) {
+	return view.mcastra & (1 << province)
+}
+function has_quaestor(province) {
+	return view.quaestor & (1 << province)
+}
+function has_militia(province) {
+	return view.militia & (1 << province)
+}
+function get_mobs(province) {
+	return view.mobs[province]
+}
+function has_amphitheater(province) {
+	return view.amphitheater & (1 << province)
+}
+function has_basilica(province) {
+	return view.basilica & (1 << province)
+}
+function has_limes(province) {
+	return view.limes & (1 << province)
+}
+function is_breakaway(province) {
+	return view.breakaway & (1 << province)
+}
+function is_seat_of_power(province) {
+	return view.seat_of_power & (1 << province)
+}
 
 // === END SYNC ===
 
@@ -111,42 +151,40 @@ const PLAYER_CLASS = [ "red", "blue", "yellow", "green" ]
 const BARBARIAN_CLASS = [ "alamanni", "franks", "goths", "nomads", "sassanids" ]
 
 const BOXES = {
-	"Thracia Support": [1502,720,258,52],
-	"Syria Support": [2034,1280,258,52],
-	"Pannonia Support": [1154,626,258,53],
-	"Macedonia Support": [1384,936,258,53],
-	"Hispania Support": [154,980,258,53],
-	"Gallia Support": [460,507,258,53],
-	"Galatia Support": [1954,931,258,53],
-	"Britannia Support": [231,260,258,52],
-	"Asia Support": [1679,1000,258,52],
-	"Africa Support": [647,1290,258,53],
-	"Aegyptus Support": [1700,1468,258,53],
-	"Italia Support 2": [1054,887,258,52],
-	"Italia Support 1": [1028,835,258,52],
-	"Thracia Capital": [1594,631,70,70],
-	"Syria Capital": [2174,1193,70,70],
-	"Pannonia Capital": [1214,536,70,70],
-	"Macedonia Capital": [1477,850,70,70],
-	"Italia Capital": [1038,743,70,70],
-	"Hispania Capital": [249,892,70,70],
-	"Gallia Capital": [554,418,70,70],
-	"Galatia Capital": [2048,842,70,70],
-	"Britannia Capital": [325,177,70,70],
-	"Asia Capital": [1790,908,70,70],
-	"Africa Capital": [741,1204,70,70],
-	"Aegyptus Capital": [1793,1380,70,70],
-	"Pontus Euxinus XY": [1970,620,130,60],
-	"Mare Orientale XY": [1770,1170,100,60],
-	"Mare Occidentale XY": [720,890,90,60],
-	"Oceanus Atlanticus XY": [130,495,80,50],
-	"Nomads XY": [705,1495,165,25],
-	"Sassanids XY": [2295,980,190,25],
-	"Goths XY": [1840,235,130,15],
-	"Alamanni XY": [1370,200,195,15],
-	"Franks XY": [900,200,135,15],
-	"SCORE TRACK": [40,40,2469,80],
-	"CRISIS TABLE": [2195,189,262,326],
+	"Thracia Support": [ 1502, 720, 258, 52 ],
+	"Syria Support": [ 2034, 1280, 258, 52 ],
+	"Pannonia Support": [ 1154, 626, 258, 53 ],
+	"Macedonia Support": [ 1384, 936, 258, 53 ],
+	"Hispania Support": [ 154, 980, 258, 53 ],
+	"Gallia Support": [ 460, 507, 258, 53 ],
+	"Galatia Support": [ 1954, 931, 258, 53 ],
+	"Britannia Support": [ 231, 260, 258, 52 ],
+	"Asia Support": [ 1679, 1000, 258, 52 ],
+	"Africa Support": [ 647, 1290, 258, 53 ],
+	"Aegyptus Support": [ 1700, 1468, 258, 53 ],
+	"Italia Support 2": [ 1054, 887, 258, 52 ],
+	"Italia Support 1": [ 1028, 835, 258, 52 ],
+	"Thracia Capital": [ 1594, 631, 70, 70 ],
+	"Syria Capital": [ 2174, 1193, 70, 70 ],
+	"Pannonia Capital": [ 1214, 536, 70, 70 ],
+	"Macedonia Capital": [ 1477, 850, 70, 70 ],
+	"Italia Capital": [ 1038, 743, 70, 70 ],
+	"Hispania Capital": [ 249, 892, 70, 70 ],
+	"Gallia Capital": [ 554, 418, 70, 70 ],
+	"Galatia Capital": [ 2048, 842, 70, 70 ],
+	"Britannia Capital": [ 325, 177, 70, 70 ],
+	"Asia Capital": [ 1790, 908, 70, 70 ],
+	"Africa Capital": [ 741, 1204, 70, 70 ],
+	"Aegyptus Capital": [ 1793, 1380, 70, 70 ],
+	"Pontus Euxinus XY": [ 1880, 580, 60, 60 ],
+	"Mare Orientale XY": [ 1480, 1160, 60, 60 ],
+	"Mare Occidentale XY": [ 720, 900, 60, 60 ],
+	"Oceanus Atlanticus XY": [ 180, 500, 60, 60 ],
+	"Nomads XY": [ 520, 1480, 60, 60 ],
+	"Sassanids XY": [ 2440, 820, 60, 60 ],
+	"Goths XY": [ 2020, 360, 60, 60 ],
+	"Alamanni XY": [ 1540, 280, 60, 60 ],
+	"Franks XY": [ 1160, 300, 60, 60 ],
 }
 
 const LAYOUT_XY = [
@@ -188,6 +226,238 @@ const LAYOUT_SUPPORT = [
 	BOXES["Syria Support"],
 ]
 
+const LAYOUT_SEA = [ [ 0, 0 ] ]
+
+const LAYOUT_HOMELAND = [
+	[ 0, 0 ],
+	[ -1, 0 ],
+	[ -2, 0 ],
+	[ -3, 0 ],
+	[ -3, -1 ],
+	[ -2, -1 ],
+	[ -1, -1 ],
+	[ 0, -1 ],
+]
+
+const LAYOUT_SASSANIDS = [
+	[ 0, 0 ],
+	[ -1, 0 ],
+	[ -2, 0 ],
+	[ 0, -1 ],
+	[ -1, -1 ],
+	[ -2, -1 ],
+	[ -2, 1 ],
+	[ -1, 1 ],
+	[ 0, 1 ],
+	[ -2, 2 ],
+	[ -1, 2 ],
+	[ 0, 2 ],
+]
+
+const LAYOUT_NOMADS = [
+	[ 0, 0 ],
+	[ 1, 0 ],
+	[ 2, 0 ],
+	[ 3, 0 ],
+	[ 4, 0 ],
+	[ 5, 0 ],
+	[ 0, 1 ],
+]
+
+const LAYOUT_ITALIA = [
+	[ -3, -2 ],
+	[ -2, -2 ],
+	[ -1, -2 ],
+	[ 0, -2 ],
+	[ -2, -1 ],
+	[ -1, -1 ],
+	[ 0, -1 ],
+	[ -1, 0 ],
+	[ 1, 0 ],
+	[ 2, 0 ],
+	[ 0, 3 ],
+]
+
+const LAYOUT_ASIA = [
+	[ -1, 0 ],
+	[ 1, 0 ],
+	[ 0, -1 ],
+	[ -1, -1 ],
+	[ 1, -1 ],
+	[ 1, -2 ],
+	[ 0, -2 ],
+	[ 1, -3 ],
+	[ -1, 3 ],
+]
+
+const LAYOUT_GALLIA = [
+	[ -1, 0 ],
+	[ 1, 0 ],
+	[ 0, -1 ],
+	[ -1, -1 ],
+	[ 1, -1 ],
+	[ -2, 0 ],
+	[ 2, 0 ],
+	[ 2, -1 ],
+	[ 0, -2 ],
+	[ 1, -2 ],
+	[ -1, 3 ],
+]
+
+const LAYOUT_MACEDONIA = [
+	[ -1, 0 ],
+	[ -2, 0 ],
+	[ 1, 0 ],
+	[ 0, -1 ],
+	[ -1, -1 ],
+	[ -2, -1 ],
+	[ -1, 3 ],
+]
+
+const LAYOUT_PANNONIA = [
+	[ 0, -1 ],
+	[ -1, -1 ],
+	[ -2, -1 ],
+	[ -3, -1 ],
+	[ -4, -1 ],
+	[ 1, -1 ],
+	[ -1, -2 ],
+	[ -2, -2 ],
+	[ -3, -2 ],
+	[ -4, -2 ],
+	[ -5, -2 ],
+	[ -1, 0 ],
+	[ 1, 0 ],
+]
+
+const LAYOUT_THRACIA = [
+	[ -1, 0 ],
+	[ 1, 0 ],
+	[ 0, -1 ],
+	[ -1, -1 ],
+	[ 1, -1 ],
+	[ -2, -1 ],
+	[ -2, -2 ],
+	[ -3, -2 ],
+	[ -2, -3 ],
+	[ -1, -2 ],
+]
+
+const LAYOUT_AEGYPTUS = [
+	[ -1, 0 ],
+	[ -2, 0 ],
+	[ -3, 0 ],
+	[ -4, 0 ],
+	[ 1, 0 ],
+	[ -4, -1 ],
+	[ -4, 1 ],
+	[ -3, 1 ],
+	[ -4, 2 ],
+	[ -3, 2 ],
+	[ 3, 2 ],
+]
+
+const LAYOUT_AFRICA = [
+	[ -1, 0 ],
+	[ -2, 0 ],
+	[ -3, 0 ],
+	[ -4, 0 ],
+	[ 1, 0 ],
+	[ 2, 0 ],
+	[ 2, -1 ],
+	[ 1, -1 ],
+	[ -4, 1 ],
+	[ -3, 1 ],
+	[ 3, 2 ],
+	[ 4, 2 ],
+	[ 5, 2 ],
+	[ 6, 2 ],
+	[ 5, 3 ],
+]
+
+const LAYOUT_HISPANIA = [
+	[ -1, 0 ],
+	[ 1, 0 ],
+	[ 0, -1 ],
+	[ -1, -1 ],
+	[ 1, -1 ],
+	[ -2, 0 ],
+	[ 2, 0 ],
+	[ -2, -1 ],
+	[ 2, -1 ],
+	[ 0, -2 ],
+	[ -1, -2 ],
+	[ 1, -2 ],
+]
+
+const LAYOUT_BRITANNIA = [
+	[ -1, 0 ],
+	[ 1, 0 ],
+	[ 2, 0 ],
+	[ -2, 0 ],
+	[ -3, 0 ],
+	[ -3, 1 ],
+	[ -3, 2 ],
+	[ -2, 1 ],
+	[ -2, 2 ],
+	[ -3, 3 ],
+]
+
+const LAYOUT_GALATIA = [
+	[ -1, 0 ],
+	[ 1, 0 ],
+	[ 0, -1 ],
+	[ -1, -1 ],
+	[ 1, -1 ],
+	[ 1, -2 ],
+	[ 0, -2 ],
+	[ -1, -2 ],
+	[ -1, -3 ],
+]
+
+const LAYOUT_SYRIA = [
+	[ -1, 0 ],
+	[ 1, 0 ],
+	[ 0, -1 ],
+	[ -1, -1 ],
+	[ 1, -1 ],
+	[ -2, 0 ],
+	[ 2, 0 ],
+	[ -2, -1 ],
+	[ 2, -1 ],
+	[ 0, -2 ],
+	[ -1, -2 ],
+	[ 1, -2 ],
+]
+
+const LAYOUT_PATTERN = [
+	LAYOUT_ITALIA,
+	LAYOUT_ASIA,
+	LAYOUT_GALLIA,
+	LAYOUT_MACEDONIA,
+	LAYOUT_PANNONIA,
+	LAYOUT_THRACIA,
+
+	LAYOUT_AEGYPTUS,
+	LAYOUT_AFRICA,
+	LAYOUT_HISPANIA,
+
+	LAYOUT_BRITANNIA,
+	LAYOUT_GALATIA,
+	LAYOUT_SYRIA,
+
+	LAYOUT_HOMELAND,
+	LAYOUT_HOMELAND,
+	LAYOUT_HOMELAND,
+	LAYOUT_NOMADS,
+	LAYOUT_SASSANIDS,
+
+	LAYOUT_SEA,
+	LAYOUT_SEA,
+	LAYOUT_SEA,
+	LAYOUT_SEA,
+]
+
 let ui = {
 	cards: [],
 	militia: [],
@@ -319,15 +589,17 @@ function register_action(target, action, id) {
 
 function on_click_action(evt, target) {
 	if (evt.button === 0) {
-		if (typeof target.my_stack === "number") {
+		/*
+		   if (typeof target.my_stack === "number") {
+		   evt.stopPropagation()
+		   if (focus_stack(target.my_stack))
+		   if (!send_action(target.my_action, target.my_id))
+		   blur_stack()
+		   } else {
+		 */
+		if (send_action(target.my_action, target.my_id))
 			evt.stopPropagation()
-			if (focus_stack(target.my_stack))
-				if (!send_action(target.my_action, target.my_id))
-					blur_stack()
-		} else {
-			if (send_action(target.my_action, target.my_id))
-				evt.stopPropagation()
-		}
+		//}
 	}
 }
 
@@ -339,7 +611,7 @@ document.getElementById("map").addEventListener("mousedown", function (evt) {
 function create_building(region, className, xoff, yoff) {
 	let [ x, y, w, h ] = LAYOUT_SUPPORT[region]
 	let e = create_thing({ className })
-	e.style.left = x + (w>>1) + xoff - 46 + "px"
+	e.style.left = x + (w >> 1) + xoff - 46 + "px"
 	e.style.top = y + h + yoff + "px"
 	return e
 }
@@ -403,7 +675,7 @@ function on_init() {
 		if (true) {
 			ui.amphitheater[region] = create_building(region, "amphitheater hide", -48 - 3, 6)
 			ui.basilica[region] = create_building(region, "basilica hide", 48 + 3, 6)
-			ui.limes[region] = create_building(region, "limes hide", 0, 6+25)
+			ui.limes[region] = create_building(region, "limes hide", 0, 6 + 25)
 		} else {
 			ui.amphitheater[region] = create_building(region, "amphitheater hide", -96 - 5, 6)
 			ui.basilica[region] = create_building(region, "basilica hide", 0, 6)
@@ -412,7 +684,7 @@ function on_init() {
 
 		register_action(ui.capital[region], "capital", region)
 		register_action(ui.regions[region], "region", region)
-	
+
 		ui.neutral_governors[region] = create_thing({ className: "neutral governor hide" })
 	}
 	for (let region = 12; region < 21; ++region) {
@@ -420,12 +692,13 @@ function on_init() {
 	}
 }
 
-let stack_count = new Array(12 + 5).fill(0)
+let stack_count = new Array(21).fill(0)
 let stack_focus = -1
 let stack_cache = []
 
 function focus_stack(id) {
 	if (stack_focus !== id) {
+		// if (view.selected_general === undefined) send_action("general", id)
 		stack_focus = id
 		on_update()
 		let stack = stack_cache[id]
@@ -443,28 +716,39 @@ function blur_stack() {
 
 function layout_stack(id, list, region, in_capital) {
 	let [ x, y, w, h ] = LAYOUT_XY[region]
-	let dx = 8
-	let dy = 8
+	let dx = 6
+	let dy = 6
 	let z = 1
 
 	if (id >= 0)
 		stack_cache[id] = list
 
-	if (in_capital) {
-		x += 5
-		y += 5
-	} else {
-		x += stack_count[region] * 80
+	x += w >> 1
+	y += h >> 1
+
+	x -= 30
+	y -= 30
+
+	if (!in_capital) {
+		let sc = stack_count[region]
+		if (sc >= LAYOUT_PATTERN[region].length)
+			sc = LAYOUT_PATTERN[region].length - 1
+		let xo = LAYOUT_PATTERN[region][sc][0] * 80
+		let yo = LAYOUT_PATTERN[region][sc][1] * 80
+		if (stack_count[region] > sc)
+			xo += (stack_count[region] - sc) * 80
+		x += xo
+		y += yo
 		stack_count[region] += 1
 	}
 
-	if (list.length > 5) {
-		dx = 5
-		dy = 5
+	if (list.length > 6) {
+		dx = 4
+		dy = 4
 	}
 
-	if (id >= 0 && stack_focus === id) {
-		dx = 24
+	if (id >= 0) {
+		dx = 16
 		dy = 16
 	}
 
@@ -493,8 +777,8 @@ function layout_available(list, dx, x0, y0) {
 
 function layout_governor(e, color, region) {
 	e.className = color + " governor s" + get_support(region)
-	e.style.left = (LAYOUT_SUPPORT[region][0] - 1) + "px"
-	e.style.top = (LAYOUT_SUPPORT[region][1] - 1) + "px"
+	e.style.left = LAYOUT_SUPPORT[region][0] - 1 + "px"
+	e.style.top = LAYOUT_SUPPORT[region][1] - 1 + "px"
 }
 
 function layout_governor_available(e, color) {
@@ -557,7 +841,7 @@ function on_update() {
 
 		show(ui.legacy[pi])
 		ui.legacy[pi].style.left = Math.round(43 + legacy * 60.2) + "px"
-		ui.legacy[pi].style.top = (2 + y) + "px"
+		ui.legacy[pi].style.top = 2 + y + "px"
 
 		y = 30
 		for (let k = 0; k < pi; ++k) {
@@ -568,7 +852,7 @@ function on_update() {
 
 		show(ui.emperor_turns[pi])
 		ui.emperor_turns[pi].style.left = Math.round(41 + turns * 60.2) + "px"
-		ui.emperor_turns[pi].style.top = (0 + y) + "px"
+		ui.emperor_turns[pi].style.top = 0 + y + "px"
 	}
 
 	for (let pi = player_count; pi < 4; ++pi) {
@@ -628,7 +912,7 @@ function on_update() {
 	for (let id = BARBARIAN_COUNT[player_count]; id < ui.barbarians.length; ++id)
 		hide(ui.barbarians[id])
 
-	stack_count.fill(1)
+	stack_count.fill(0)
 
 	for (let region = 0; region < 12 + 5; ++region) {
 		for (let tribe = 0; tribe < TRIBE_COUNT[player_count]; ++tribe) {