robust layout

2 files changed, 97 insertions, 68 deletions

diff --git a/play.css b/play.css
index d39543a..1aa535f 100644
--- a/play.css
+++ b/play.css
@@ -171,10 +171,12 @@ body.America header.your_turn { background-color: hsl(211, 50%, 75%) }
 
 .general.action {
 	box-shadow: 0 0 0 3px yellow, 0 0 2px 4px black;
+	z-index: 2;
 }
 
 .general.selected {
 	box-shadow: 0 0 0 3px aqua, 0 0 2px 4px black;
+	z-index: 1;
 }
 
 /* CARDS */
diff --git a/play.js b/play.js
index bf99bee..a386b5a 100644
--- a/play.js
+++ b/play.js
@@ -184,6 +184,10 @@ let ui = {
 	b_cu: [],
 	f_cu: [],
 
+	layout_static: [],
+	layout_move: null,
+	layout_react: null,
+
 	generals: [],
 }
 
@@ -271,17 +275,9 @@ function on_init() {
 		ui.b_pc[s] = build_marker("marker pc british", x, y, 58, 66)
 		ui.a_pc[s] = build_marker("marker pc american", x, y, 58, 66)
 
-		if (info.type === "box") {
-			x += w/2
-			y += h - 50
-			ui.b_cu[s] = build_marker("marker cu british", x, y, 60+2, 60+2)
-			ui.a_cu[s] = build_marker("marker cu american", x, y, 60+2, 60+2)
-			ui.f_cu[s] = build_marker("marker cu french", x, y, 60+2, 60+2)
-		} else {
-			ui.b_cu[s] = build_marker("marker cu british", x-20, y+15, 60+2, 60+2)
-			ui.a_cu[s] = build_marker("marker cu american", x-20, y+15, 60+2, 60+2)
-			ui.f_cu[s] = build_marker("marker cu french", x+10, y+15, 60+2, 60+2)
-		}
+		ui.b_cu[s] = build_piece("marker cu british", 60+2, 60+2)
+		ui.a_cu[s] = build_piece("marker cu american", 60+2, 60+2)
+		ui.f_cu[s] = build_piece("marker cu french", 60+2, 60+2)
 	}
 
 	ui.b_mcu = build_piece("marker cu british", 60+2, 60+2)
@@ -419,9 +415,9 @@ function get_army_xy_lerp(s1, s2) {
 	}
 
 	if (Math.abs(dx) < 180 && Math.abs(dy) < 60)
-		y -= 20
+		y -= 40
 
-	return [ x, y ]
+	return [ x - 15 , y ]
 }
 
 function get_army_xy(s) {
@@ -436,6 +432,60 @@ function get_army_xy(s) {
 	return [ x, y ]
 }
 
+function get_static_xy(s) {
+	let x, y
+	if (s >= 66) {
+		x = data.spaces[s].x
+		y = data.spaces[s].y
+	} else {
+		x = data.spaces[s].x - 20
+		y = data.spaces[s].y + 15
+	}
+	return [ x, y ]
+}
+
+function get_static_acu(s) {
+	let cu = count_american_cu(s)
+	if (view.move && view.move.to === s)
+		cu -= view.move.carry_american
+	if (view.react && view.react.from === s)
+		cu -= view.react.carry_american
+	return cu
+}
+
+function get_static_fcu(s) {
+	let cu = count_french_cu(s)
+	if (view.move && view.move.to === s)
+		cu -= view.move.carry_french
+	if (view.react && view.react.from === s)
+		cu -= view.react.carry_french
+	return cu
+}
+
+function get_static_bcu(s) {
+	let cu = count_british_cu(s)
+	if (view.move && view.move.to === s)
+		cu -= view.move.carry_british
+	if (view.react && view.react.from === s)
+		cu -= view.react.carry_british
+	return cu
+}
+
+function layout_all_cu(an, fn, bn, ae, fe, be, pos) {
+	let [ x, y ] = pos
+	toggle_marker_with_number_at(ae, an, x, y)
+	if (an > 0)
+		x += 30
+	toggle_marker_with_number_at(fe, fn, x, y)
+	if (fn > 0)
+		x += 30
+	toggle_marker_with_number_at(be, bn, x, y)
+	if (bn > 0)
+		x += 30
+	// if (an > 0 || fn > 0 || bn > 0) x -= 10
+	return [ x, y ]
+}
+
 function on_update() {
 	let e
 
@@ -477,49 +527,39 @@ function on_update() {
 		show_marker_at(ui.french_navy, data.layout.sea[view.french_navy][0]-15, data.layout.sea[view.french_navy][1]+42)
 
 	for (let s = 0; s < data.spaces.length; ++s) {
-		let acu = count_american_cu(s)
-		let fcu = count_french_cu(s)
-		let bcu = count_british_cu(s)
-
-		if (view.move && view.move.to === s) {
-			acu -= view.move.carry_american
-			fcu -= view.move.carry_french
-			bcu -= view.move.carry_british
-		}
-		if (view.react && view.react.from === s) {
-			acu -= view.react.carry_american
-			fcu -= view.react.carry_french
-			bcu -= view.react.carry_british
-		}
-
-		toggle_marker_with_number(ui.a_cu[s], acu)
-		toggle_marker_with_number(ui.f_cu[s], fcu)
-		toggle_marker_with_number(ui.b_cu[s], bcu)
+		ui.layout_static[s] = layout_all_cu(
+			get_static_acu(s),
+			get_static_fcu(s),
+			get_static_bcu(s),
+			ui.a_cu[s],
+			ui.f_cu[s],
+			ui.b_cu[s],
+			get_static_xy(s)
+		)
 	}
 
 	if (view.move) {
-		let [ x, y ] = get_army_xy_lerp(view.move.from, view.move.to)
-		if (view.move.carry_american > 0 && view.move.carry_french > 0) {
-			toggle_marker_with_number_at(ui.a_mcu, view.move.carry_american, x-15, y)
-			toggle_marker_with_number_at(ui.f_mcu, view.move.carry_french, x+15, y)
-		} else {
-			toggle_marker_with_number_at(ui.a_mcu, view.move.carry_american, x, y)
-			toggle_marker_with_number_at(ui.f_mcu, view.move.carry_french, x, y)
-		}
-		toggle_marker_with_number_at(ui.b_mcu, view.move.carry_british, x, y)
+		ui.layout_move = layout_all_cu(
+			view.move.carry_american | 0,
+			view.move.carry_french | 0,
+			view.move.carry_british | 0,
+			ui.a_mcu,
+			ui.f_mcu,
+			ui.b_mcu,
+			get_army_xy_lerp(view.move.from, view.move.to)
+		)
 	}
 
 	if (view.react) {
-		let [ x, y ] = get_army_xy_lerp(view.react.from, view.react.to)
-
-		if (view.react.carry_american > 0 && view.react.carry_french > 0) {
-			toggle_marker_with_number_at(ui.a_rcu, view.react.carry_american, x-15, y)
-			toggle_marker_with_number_at(ui.f_rcu, view.react.carry_french, x+15, y)
-		} else {
-			toggle_marker_with_number_at(ui.a_rcu, view.react.carry_american, x, y)
-			toggle_marker_with_number_at(ui.f_rcu, view.react.carry_french, x, y)
-		}
-		toggle_marker_with_number_at(ui.b_rcu, view.react.carry_british, x, y)
+		ui.layout_react = layout_all_cu(
+			view.react.carry_american | 0,
+			view.react.carry_french | 0,
+			view.react.carry_british | 0,
+			ui.a_rcu,
+			ui.f_rcu,
+			ui.b_rcu,
+			get_army_xy_lerp(view.react.from, view.react.to)
+		)
 	}
 
 	for (let g = 0; g < general_count; ++g) {
@@ -527,37 +567,24 @@ function on_update() {
 		if (s === NOWHERE)
 			continue
 
-		let { x, y } = data.spaces[s]
+		let pos = ui.layout_static[s]
 		if (view.move && view.move.who === g)
-			[ x, y ] = get_army_xy_lerp(view.move.from, view.move.to)
+			pos = ui.layout_move
 		if (view.react && view.react.who === g)
-			[ x, y ] = get_army_xy_lerp(view.react.from, view.react.to)
+			pos = ui.layout_react
+
+		let [ x, y ] = pos
 
 		if (view.move && view.move.who === g) {
 			ui.generals[g].classList.add("selected")
-			if (view.move.carry_french > 0 && view.move.carry_american > 0)
-				x += 15
-			x += 20
 		} else if (view.react && view.react.who === g) {
 			ui.generals[g].classList.add("selected")
-			if (view.react.carry_french > 0 && view.react.carry_american > 0)
-				x += 15
-			x += 20
 		} else {
 			ui.generals[g].classList.remove("selected")
 
-			let fcu = count_french_cu(s)
-			if (view.move && view.move.to === s)
-				fcu -= view.move.carry_french
-			if (view.react && view.react.from === s)
-				fcu -= view.react.carry_french
-			if (fcu > 0)
-				x += 15
-
 			if (s < 66) {
 				let offset = general_offset(g)
 				x += offset * (45 + 9)
-				y += 15
 			} else {
 				let total = general_total(g)
 				let offset = general_offset(g)