improve animations by having one CU stack per general

instead of a single "moving" and a single "reacting" stack

1 files changed, 82 insertions, 48 deletions

diff --git a/play.js b/play.js
index 3312a87..530b40f 100644
--- a/play.js
+++ b/play.js
@@ -159,6 +159,10 @@ let ui = {
 	b_cu: [],
 	f_cu: [],
 
+	a_mcu: [],
+	b_mcu: [],
+	f_mcu: [],
+
 	layout_static: [],
 	layout_move: null,
 	layout_react: null,
@@ -249,13 +253,11 @@ function on_init() {
 		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)
-	ui.a_mcu = build_piece("marker cu american", 60+2, 60+2)
-	ui.f_mcu = build_piece("marker cu french", 60+2, 60+2)
-
-	ui.b_rcu = build_piece("marker cu british", 60+2, 60+2)
-	ui.a_rcu = build_piece("marker cu american", 60+2, 60+2)
-	ui.f_rcu = build_piece("marker cu french", 60+2, 60+2)
+	for (let g = 0; g < general_count; ++g) {
+		ui.b_mcu[g] = build_piece("marker cu british", 60+2, 60+2)
+		ui.a_mcu[g] = build_piece("marker cu american", 60+2, 60+2)
+		ui.f_mcu[g] = build_piece("marker cu french", 60+2, 60+2)
+	}
 
 	for (let s = 0; s < 7; ++s) {
 		let e = ui.seas[s] = document.createElement("div")
@@ -288,18 +290,18 @@ function on_init() {
 	ui.french_alliance = build_piece("marker large french_alliance", 55+2, 55+2)
 
 	ui.combat = document.createElement("div")
-	ui.combat.id = "combat" // "combat"
+	ui.combat.id = "combat"
 }
 
 on_init()
 
 /* UPDATE UI */
 
-function show_combat_marker() {
-	let x1 = data.spaces[view.move.from].x
-	let y1 = data.spaces[view.move.from].y
-	let x2 = data.spaces[view.move.to].x
-	let y2 = data.spaces[view.move.to].y
+function show_move_marker(marker, s1, s2) {
+	let x1 = data.spaces[s1].x
+	let y1 = data.spaces[s1].y
+	let x2 = data.spaces[s2].x
+	let y2 = data.spaces[s2].y
 	let dx = x2 - x1
 	let dy = y2 - y1
 	let n = Math.hypot(dx, dy)
@@ -314,10 +316,10 @@ function show_combat_marker() {
 		y = lerp(y1, y2, 3/4)
 	}
 
-	ui.combat.style.left = (x|0) - 24 + "px"
-	ui.combat.style.top = (y|0) - 24 + "px"
-	ui.combat.style.transform = "rotate(" + (a + Math.PI/2) + "rad)"
-	ui.pieces_element.appendChild(ui.combat)
+	marker.style.left = (x|0) - 24 + "px"
+	marker.style.top = (y|0) - 24 + "px"
+	marker.style.transform = "rotate(" + (a + Math.PI/2) + "rad)"
+	ui.pieces_element.appendChild(marker)
 }
 
 function show_marker(e) {
@@ -495,14 +497,13 @@ function on_update() {
 	remember_position(ui.french_alliance)
 	remember_position(ui.french_navy)
 	remember_position(ui.congress)
-	remember_position(ui.b_mcu)
-	remember_position(ui.a_mcu)
-	remember_position(ui.f_mcu)
-	remember_position(ui.b_rcu)
-	remember_position(ui.a_rcu)
-	remember_position(ui.f_rcu)
-	for (let g = 0; g  < general_count; ++g)
+
+	for (let g = 0; g  < general_count; ++g) {
 		remember_position(ui.generals[g])
+		remember_position(ui.b_mcu[g])
+		remember_position(ui.a_mcu[g])
+		remember_position(ui.f_mcu[g])
+	}
 
 	roles.America.stat.textContent = player_info(P_AMERICA, view.a_cards, view.a_queue)
 	roles.Britain.stat.textContent = player_info(P_BRITAIN, view.b_cards, view.b_queue)
@@ -529,18 +530,41 @@ 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)
 
 	if (view.move && view.move.from !== view.move.to)
-		show_combat_marker()
+		show_move_marker(ui.combat, view.move.from, view.move.to)
 
 	for (let s = 0; s < data.spaces.length; ++s) {
-		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)
-		)
+		let found = -1
+		for (let g = 0; g < general_count; ++g) {
+			if (view.move && view.move.who === g)
+				continue
+			if (view.react && view.react.who === g)
+				continue
+			if (view.loca[g] === s) {
+				found = g
+				break
+			}
+		}
+		if (found >= 0) {
+			ui.layout_static[s] = layout_all_cu(
+				get_static_acu(s),
+				get_static_fcu(s),
+				get_static_bcu(s),
+				ui.a_mcu[found],
+				ui.f_mcu[found],
+				ui.b_mcu[found],
+				get_static_xy(s)
+			)
+		} else {
+			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) {
@@ -553,17 +577,27 @@ function on_update() {
 			xy = get_static_xy(view.move.to)
 		else
 			xy = get_army_xy_lerp(view.move.from, view.move.to)
-
-		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,
-			xy
-		)
-
+		if (view.move.who >= 0) {
+			ui.layout_move = layout_all_cu(
+				view.move.carry_american | 0,
+				view.move.carry_french | 0,
+				view.move.carry_british | 0,
+				ui.a_mcu[view.move.who],
+				ui.f_mcu[view.move.who],
+				ui.b_mcu[view.move.who],
+				xy
+			)
+		} else {
+			ui.layout_move = layout_all_cu(
+				view.move.carry_american | 0,
+				view.move.carry_french | 0,
+				view.move.carry_british | 0,
+				ui.a_cu[view.move.to],
+				ui.f_cu[view.move.to],
+				ui.b_cu[view.move.to],
+				xy
+			)
+		}
 	}
 
 	if (view.react) {
@@ -571,9 +605,9 @@ function on_update() {
 			view.react.carry_american | 0,
 			view.react.carry_french | 0,
 			view.react.carry_british | 0,
-			ui.a_rcu,
-			ui.f_rcu,
-			ui.b_rcu,
+			ui.a_mcu[view.react.who],
+			ui.f_mcu[view.react.who],
+			ui.b_mcu[view.react.who],
 			get_army_xy_lerp(view.react.from, view.react.to)
 		)
 	}