diff options
| -rw-r--r-- | play.js | 60 |
1 files changed, 58 insertions, 2 deletions
@@ -105,6 +105,40 @@ function count_french_cu(s) { return (view.cupc[s] & CU_FRENCH_MASK) >>> CU_FRENCH_SHIFT } +/* ANIMATION */ + +function remember_position(e) { + if (e.parentElement) { + let rect = e.getBoundingClientRect() + e.my_parent = e.parentElement + e.my_x = rect.x + e.my_y = rect.y + } else { + e.my_parent = null + e.my_x = 0 + e.my_y = 0 + } +} + +function animate_position(e) { + if (e.parentElement) { + if (e.my_parent) { + let rect = e.getBoundingClientRect() + let dx = e.my_x - rect.x + let dy = e.my_y - rect.y + if (dx !== 0 || dy !== 0) { + e.animate( + [ + { transform: `translate(${dx}px, ${dy}px)`, }, + { transform: "translate(0, 0)", }, + ], + { duration: 333, easing: "ease" } + ) + } + } + } +} + /* BUILD UI */ let ui = { @@ -340,6 +374,12 @@ function general_total(g) { function on_update() { let e + remember_position(ui.b_mcu) + remember_position(ui.a_mcu) + remember_position(ui.f_mcu) + for (let g = 0; g < general_count; ++g) + remember_position(ui.generals[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) @@ -402,8 +442,17 @@ function on_update() { x += offset * (45 + 9) y += 15 } else { - let offset = -(general_total(g) - 1) / 2 + general_offset(g) - x += offset * (45 + 9) + let total = general_total(g) + let offset = general_offset(g) + let off_x = offset % 3 + let off_y = offset / 3 | 0 + let ctr_x = total > 3 ? 3 : total + + off_x -= (ctr_x - 1) / 2 + // off_y -= (total / 3 | 0) / 2 + + x += off_x * (45 + 9) + y += off_y * (45 + 9) y -= 15 } } @@ -475,6 +524,13 @@ function on_update() { action_button("done", "Done") action_button("pass", "Pass") action_button("undo", "Undo") + + animate_position(ui.b_mcu) + animate_position(ui.a_mcu) + animate_position(ui.f_mcu) + for (let g = 0; g < general_count; ++g) + animate_position(ui.generals[g]) + } /* POPUP MENU */ |