From e302433e029586ed584b1f4bca470ac80a052fc4 Mon Sep 17 00:00:00 2001 From: Tor Andersson Date: Wed, 7 Aug 2024 00:38:58 +0200 Subject: improve animations by having one CU stack per general instead of a single "moving" and a single "reacting" stack --- play.js | 130 ++++++++++++++++++++++++++++++++++++++++------------------------ 1 file 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) ) } -- cgit v1.2.3