Mobile layout.

1 files changed, 52 insertions, 1 deletions

diff --git a/play.js b/play.js
index a707225..f5422ed 100644
--- a/play.js
+++ b/play.js
@@ -111,6 +111,46 @@ let ui = {
 	present: new Set(),
 }
 
+function remember_position(e) {
+	if (e.classList.contains("show")) {
+		let rect = e.getBoundingClientRect()
+		e.my_parent = true
+		e.my_x = rect.x
+		e.my_y = rect.y
+	} else {
+		e.my_parent = false
+		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: 250, easing: "ease" }
+				)
+			}
+		} else {
+				e.animate(
+					[
+						{ opacity: 0 },
+						{ opacity: 1 }
+					],
+					{ duration: 250, easing: "ease" }
+				)
+		}
+	}
+}
+
 function on_focus_space_tip(x) {
 	ui.towns[x].classList.add("tip")
 }
@@ -869,6 +909,9 @@ function on_update() {
 	document.getElementById("frank_vp").textContent = view.f_vp
 	document.getElementById("saracen_vp").textContent = view.s_vp
 
+	for (let c = 1; c <= 27; ++c)
+		remember_position(ui.cards[c])
+
 	update_cards()
 	update_map()
 
@@ -877,11 +920,19 @@ function on_update() {
 		document.getElementById("battle_message").textContent = view.battle.flash
 		if (view.flash_next)
 			start_flash()
-		document.getElementById("battle").classList.add("show")
+		if (!document.getElementById("battle").classList.contains("show")) {
+			document.getElementById("battle").classList.add("show")
+			document.getElementById("battle").scrollIntoView({
+				block:"center", inline:"center", behavior:"smooth"
+			})
+		}
 		update_battle()
 	} else {
 		document.getElementById("battle").classList.remove("show")
 	}
+
+	for (let c = 1; c <= 27; ++c)
+		animate_position(ui.cards[c])
 }
 
 build_map()