From 6968299d698e90c5d0574d9867a70342651ea848 Mon Sep 17 00:00:00 2001 From: Tor Andersson Date: Wed, 18 Oct 2023 00:59:45 +0200 Subject: Animate cards. --- play.css | 2 +- play.js | 52 ++++++++++++++++++++++++++++++++++++++++++++++------ 2 files changed, 47 insertions(+), 7 deletions(-) diff --git a/play.css b/play.css index 22f2853..6053b21 100644 --- a/play.css +++ b/play.css @@ -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; } diff --git a/play.js b/play.js index c188a83..82b7422 100644 --- a/play.js +++ b/play.js @@ -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: '', B1: '', @@ -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)) -- cgit v1.2.3