Fix animation of nested components.

1 files changed, 22 insertions, 15 deletions

diff --git a/play.js b/play.js
index cdebef5..6d8eca6 100644
--- a/play.js
+++ b/play.js
@@ -36,9 +36,12 @@ function register_animation(e, duration) {
 function remember_position(e) {
 	if (e.parentElement) {
 		let rect = e.getBoundingClientRect()
+		let prect = e.parentElement.getBoundingClientRect()
 		e.my_parent = e.parentElement
 		e.my_x = rect.x
 		e.my_y = rect.y
+		e.my_p_x = prect.x
+		e.my_p_y = prect.y
 	} else {
 		e.my_parent = null
 		e.my_x = 0
@@ -47,21 +50,25 @@ function remember_position(e) {
 }
 
 function animate_position(e) {
-	// TODO: fix double-animated dice when cards are removed
-	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: e.my_duration, easing: "ease" }
-				)
-			}
+	if (e.parentElement && e.my_parent) {
+		let dx = 0, dy = 0
+		let rect = e.getBoundingClientRect()
+		if (e.parentElement === e.my_parent) {
+			let prect = e.parentElement.getBoundingClientRect()
+			dx = (e.my_x - e.my_p_x) - (rect.x - prect.x)
+			dy = (e.my_y - e.my_p_y) - (rect.y - prect.y)
+		} else {
+			dx = e.my_x - rect.x
+			dy = e.my_y - rect.y
+		}
+		if (dx !== 0 || dy !== 0) {
+			e.animate(
+				[
+					{ transform: `translate(${dx}px, ${dy}px)`, },
+					{ transform: "translate(0, 0)", },
+				],
+				{ duration: e.my_duration, easing: "ease" }
+			)
 		}
 	}
 }