summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--play.css2
-rw-r--r--play.js52
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: '<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))