Links and rechts.

1 files changed, 69 insertions, 11 deletions

diff --git a/play.js b/play.js
index baa023a..9aa02db 100644
--- a/play.js
+++ b/play.js
@@ -5,7 +5,6 @@ const reactions = [ "Screen", "Counterattack", "Absorb" ]
 
 let ui = {
 	main: document.querySelector("main"),
-	role_row: [ document.getElementById("role_First"), document.getElementById("role_Second") ],
 	role_name: [ document.getElementById("role1"), document.getElementById("role2") ],
 	name: [ document.getElementById("name1"), document.getElementById("name2") ],
 	front: [ document.getElementById("front1"), document.getElementById("front2") ],
@@ -24,14 +23,53 @@ let ui = {
 	cubes: [],
 }
 
-let action_register = []
+let animation_registry = []
+
+function register_animation(e, duration) {
+	animation_registry.push(e)
+	e.my_duration = duration
+}
+
+function remember_position(e) {
+	if (e.parentElement) {
+		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: e.my_duration, easing: "ease" }
+				)
+			}
+		}
+	}
+}
+
+let action_registry = []
 
 function register_action(e, action, id, fizzle=null) {
 	e.my_id = id
 	e.my_action = action
 	e.my_fizzle = fizzle
 	e.onclick = on_click_action
-	action_register.push(e)
+	action_registry.push(e)
 	return e
 }
 
@@ -70,6 +108,8 @@ function create_formation_slot(id, top) {
 
 	let e = create_div("slot " + wing_name[card.wing])
 
+	register_animation(e, 250)
+
 	if (top) {
 		ui.slot_dice[id] = append_div(e, "slot_dice")
 		e.appendChild(ui.cards[id])
@@ -107,6 +147,13 @@ function create_formation_card(id) {
 	else
 		append_div(e, "strength", card.strength)
 
+	if (card.link) {
+		if (set_has(card.link, id - 1))
+			append_div(e, "link left")
+		if (set_has(card.link, id + 1))
+			append_div(e, "link right")
+	}
+
 	if (card.dice) {
 		if (card.star)
 			append_div(e, "dice_area", card.dice + '<div class="star">&#x2605;</div>')
@@ -171,6 +218,7 @@ function fill_card_row(top, parent, list) {
 		parent.append(ui.slots[id])
 
 		ui.cards[id].classList.toggle("selected", view.selected === id)
+		ui.cards[id].classList.toggle("target", view.target === id)
 
 		n = map_get(view.cubes, id, 0)
 		for (let i = 0; i < n; ++i)
@@ -214,22 +262,25 @@ function on_update() {
 	ui.role_name[p1].textContent = data.scenarios[view.scenario].players[0].name
 	ui.role_name[p2].textContent = data.scenarios[view.scenario].players[1].name
 
+	for (let e of animation_registry)
+		remember_position(e)
+
 	for (let e of ui.cubes)
 		e.remove()
 	for (let e of ui.sticks)
 		e.remove()
 
-	fill_card_row(p2, ui.reserve[p1], view.reserve[0])
-	fill_card_row(p2, ui.front[p1], view.front[0])
-	fill_card_row(p1, ui.reserve[p2], view.reserve[1])
-	fill_card_row(p1, ui.front[p2], view.front[1])
-
 	for (let i = 0; i < view.morale[0]; ++i)
 		add_cube(ui.morale[p1])
 
 	for (let i = 0; i < view.morale[1]; ++i)
 		add_cube(ui.morale[p2])
 
+	fill_card_row(p2, ui.reserve[p1], view.reserve[0])
+	fill_card_row(p2, ui.front[p1], view.front[0])
+	fill_card_row(p1, ui.reserve[p2], view.reserve[1])
+	fill_card_row(p1, ui.front[p2], view.front[1])
+
 	function update_die(d, p) {
 		let v = view.dice[d * 2 + 0]
 		let c = view.dice[d * 2 + 1]
@@ -245,7 +296,7 @@ function on_update() {
 		update_die(i+6, p2)
 	}
 
-	for (let e of action_register) {
+	for (let e of action_registry) {
 		if (e.my_fizzle) {
 			e.classList.toggle("action", is_action(e.my_action, e.my_id) || is_action(e.my_fizzle, e.my_id))
 			e.classList.toggle("fizzle", is_action(e.my_fizzle, e.my_id))
@@ -254,6 +305,9 @@ function on_update() {
 		}
 	}
 
+	for (let e of animation_registry)
+		animate_position(e)
+
 	action_button("bombard", "Bombard")
 	action_button("roll", "Roll")
 	action_button("pass", "Pass")
@@ -262,14 +316,18 @@ function on_update() {
 	action_button("undo", "Undo")
 }
 
-for (let i = 0; i < 10; ++i)
+for (let i = 0; i < 10; ++i) {
 	ui.cubes[i] = create_div("cube")
+	// register_animation(ui.cubes[i], 500)
+}
 
 for (let i = 0; i < 80; ++i)
 	ui.sticks[i] = create_div("stick")
 
-for (let i = 0; i < 12; ++i)
+for (let i = 0; i < 12; ++i) {
 	ui.dice[i] = register_action(create_div("die d0"), "die", i)
+	register_animation(ui.dice[i], 250)
+}
 
 function map_get(map, key, missing) {
 	let a = 0