diff options
| -rw-r--r-- | play.css | 2 | ||||
| -rw-r--r-- | play.js | 52 |
2 files changed, 47 insertions, 7 deletions
@@ -190,7 +190,7 @@ body svg .sea.action { #pieces div { position: absolute; transition-property: top, left, transform; - transition-duration: 200ms; + transition-duration: 250ms; transition-timing-function: ease; } @@ -6,6 +6,47 @@ function check_menu(id, x) { document.getElementById(id).className = x ? "menu_item checked" : "menu_item unchecked" } +function remember_position(e) { + if (e.parentElement) { + console.log("REMEMBER", e.my_id) + 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: 500, easing: "ease" } + ) + } + } else { + e.animate( + [ + { opacity: 0 }, + { opacity: 1 } + ], + { duration: 500, easing: "ease" } + ) + } + } +} + const ICONS = { B0: '<span class="black d0"></span>', B1: '<span class="black d1"></span>', @@ -1072,6 +1113,8 @@ function is_battle_stack(region, type, id) { function on_update() { let player_count = view.legacy.length + ui.cards.forEach(remember_position) + for (let p = 0; p < player_count; ++p) { let t = view.legacy[p] + " (" + view.emperor_turns[p] + ")" if (p === view.first) @@ -1093,11 +1136,6 @@ function on_update() { else show(document.getElementById("role_Yellow")) - ui.hand.replaceChildren() - ui.draw.replaceChildren() - ui.discard.replaceChildren() - ui.market.replaceChildren() - combat_width = BATTLE_MIN for (let pi = 0; pi < player_count; ++pi) { @@ -1468,7 +1506,7 @@ function on_update() { } ui.active_event.replaceChildren() - ui.active_event.appendChild(ui.event_cards[view.event]) + ui.active_event.appendChild(ui.event_cards[view.event]) ui.played_panel.className = "panel p_" + PLAYER_CLASS[view.current] ui.played_header.textContent = PLAYER_NAME[view.current] + " Played" @@ -1513,6 +1551,8 @@ function on_update() { } } + ui.cards.forEach(animate_position) + for (let e of action_register) e.classList.toggle("action", is_action(e.my_action, e.my_id)) |