better bang position

3 files changed, 61 insertions, 29 deletions

diff --git a/images/bang.svg b/images/bang.svg
new file mode 100644
index 0000000..36c50d6
--- /dev/null
+++ b/images/bang.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#BB1A34" d="M22 0l-4 8.028-5-5.018v7.024L3 8.028l8 8.028-11 6.02h12L6 34.118l12-8.028 11 10.035-3-14.049h10l-8-6.021 8-9.031-12 3.01L22 0z"/><path fill="#FCAB40" d="M22.914 12.924l1.86-.467L30 11.146l-3.381 3.816-1.319 1.49 1.59 1.195 2.925 2.202h-5.918l.473 2.218 1.551 7.26-5.845-5.332-1.056-.964-1.188.795-5.24 3.506 2.406-4.828 1.322-2.655H9.564l3.759-2.059 2.145-1.172-1.727-1.735-3.044-3.053 3.221.646 2.186.439V8.686l1.45 1.455 1.794 1.799 1.133-2.276 1.273-2.556"/><path fill="#F5F8FA" d="M21.512 14.301l.767-.193 2.158-.541-1.396 1.576-.545.615.656.493 1.208.909h-2.443l.195.916.641 2.997-2.413-2.201-.437-.398-.49.328-2.163 1.448.993-1.994.546-1.096H16l1.553-.85.885-.484-.713-.716-1.257-1.261 1.329.267.903.181v-1.745l.599.6.74.743.468-.939.525-1.056"/></svg>
\ No newline at end of file
diff --git a/play.css b/play.css
index c23d8fd..5671132 100644
--- a/play.css
+++ b/play.css
@@ -137,11 +137,10 @@ body.America header.your_turn { background-color: hsl(211, 50%, 75%) }
 	pointer-events: none;
 	width: 48px;
 	height: 48px;
-	background-image: url(bang.svg);
+	background-image: url(images/bang.svg);
 	background-size: contain;
 	background-repeat: no-repeat;
-	opacity: 75%;
-	z-index: 2000;
+	z-index: 0;
 }
 
 .marker {
diff --git a/play.js b/play.js
index 0d12cdd..3312a87 100644
--- a/play.js
+++ b/play.js
@@ -8,6 +8,10 @@
 
 /* COMMON */
 
+function lerp(a, b, t) {
+	return a + t * (b - a)
+}
+
 function set_has(set, item) {
 	let a = 0
 	let b = set.length - 1
@@ -284,22 +288,35 @@ function on_init() {
 	ui.french_alliance = build_piece("marker large french_alliance", 55+2, 55+2)
 
 	ui.combat = document.createElement("div")
-	ui.combat.id = "combat"
+	ui.combat.id = "combat" // "combat"
 }
 
 on_init()
 
 /* UPDATE UI */
 
-function lerp(a, b, t) {
-	return a + t * (b - a)
-}
-
 function show_combat_marker() {
-	let x = Math.round(lerp(data.spaces[view.move.from].x, data.spaces[view.move.to].x, 0.67))
-	let y = Math.round(lerp(data.spaces[view.move.from].y, data.spaces[view.move.to].y, 0.67))
-	ui.combat.style.left = x - 20 + "px"
-	ui.combat.style.top = y - 20 + "px"
+	let x1 = data.spaces[view.move.from].x
+	let y1 = data.spaces[view.move.from].y
+	let x2 = data.spaces[view.move.to].x
+	let y2 = data.spaces[view.move.to].y
+	let dx = x2 - x1
+	let dy = y2 - y1
+	let n = Math.hypot(dx, dy)
+	let a = Math.atan2(dy, dx)
+	let x, y
+
+	if (n < 150) {
+		x = x2 - (dx/n) * 36
+		y = y2 - (dy/n) * 36
+	} else {
+		x = lerp(x1, x2, 3/4)
+		y = lerp(y1, y2, 3/4)
+	}
+
+	ui.combat.style.left = (x|0) - 24 + "px"
+	ui.combat.style.top = (y|0) - 24 + "px"
+	ui.combat.style.transform = "rotate(" + (a + Math.PI/2) + "rad)"
 	ui.pieces_element.appendChild(ui.combat)
 }
 
@@ -346,7 +363,7 @@ function player_info(player, nc, nq) {
 function general_offset(g) {
 	let n = 0
 	for (let i = 0; i < g; ++i) {
-		if (view.move && view.move.who === i)
+		if (view.move && view.move.from !== view.move.to && view.move.who === i)
 			continue
 		if (view.react && view.react.who === i)
 			continue
@@ -372,23 +389,37 @@ function general_total(g) {
 function get_army_xy_lerp(s1, s2) {
 	if (s1 === s2)
 		return get_army_xy(s2)
-
-	let dx = data.spaces[s2].x - data.spaces[s1].x
-	let dy = data.spaces[s2].y - data.spaces[s1].y
+	//return get_army_xy(s2)
 
 	let x, y
 	if (s1 >= 66) {
-		x = data.spaces[s1].x
+		x = data.spaces[s1].x - 15
 		y = data.spaces[s1].y - 40
 	} else {
-		x = data.spaces[s1].x + (dx * 1/2) | 0
-		y = data.spaces[s1].y + (dy * 1/2) | 0
+		let x1 = data.spaces[s1].x
+		let y1 = data.spaces[s1].y
+		let x2 = data.spaces[s2].x
+		let y2 = data.spaces[s2].y
+		let dx = x2 - x1
+		let dy = y2 - y1
+		let n = Math.hypot(dx, dy)
+		let a = Math.atan2(dy, dx)
+
+		x = lerp(x1, x2, 1/2)
+		y = lerp(y1, y2, 1/2)
+
+		if (n < 150) {
+			if (Math.abs(dx) > Math.abs(dy)) {
+				if (dx > 0)
+					x -= 10
+				else
+					x += 10
+				y -= 35
+			}
+		}
 	}
 
-	if (Math.abs(dx) < 180 && Math.abs(dy) < 60) y -= 20
-	if (Math.abs(dx) < 180 && Math.abs(dy) < 40) y -= 20
-
-	return [ x - 15, y ]
+	return [ (x|0) , (y|0) ]
 }
 
 function get_army_xy(s) {
@@ -497,6 +528,9 @@ function on_update() {
 	else
 		show_marker_at(ui.french_navy, data.layout.sea[view.french_navy][0]-15, data.layout.sea[view.french_navy][1]+42)
 
+	if (view.move && view.move.from !== view.move.to)
+		show_combat_marker()
+
 	for (let s = 0; s < data.spaces.length; ++s) {
 		ui.layout_static[s] = layout_all_cu(
 			get_static_acu(s),
@@ -512,11 +546,11 @@ function on_update() {
 	if (view.move) {
 		let xy = null
 		if (view.move.from === view.move.to &&
-			view.move.carry_american === count_american_cu(view.move.from) &&
-			view.move.carry_french === count_french_cu(view.move.from) &&
-			view.move.carry_british === count_british_cu(view.move.from)
+			view.move.carry_american === count_american_cu(view.move.to) &&
+			view.move.carry_french === count_french_cu(view.move.to) &&
+			view.move.carry_british === count_british_cu(view.move.to)
 		)
-			xy = get_static_xy(view.move.from)
+			xy = get_static_xy(view.move.to)
 		else
 			xy = get_army_xy_lerp(view.move.from, view.move.to)
 
@@ -530,8 +564,6 @@ function on_update() {
 			xy
 		)
 
-		if (view.move.from !== view.move.to)
-			show_combat_marker()
 	}
 
 	if (view.react) {