Animate cards.

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))