summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorTor Andersson <tor@ccxvii.net>2024-08-06 18:03:21 +0200
committerTor Andersson <tor@ccxvii.net>2024-08-21 00:28:20 +0200
commit5e2cda7c0800370e357d474c2d8d67552d78b0dd (patch)
tree73ab672a2690e6eb41fe2b97b312a8685d51e35d
parent088861114cf3620507c8de8b6c0a7e5d26644b46 (diff)
downloadwashingtons-war-5e2cda7c0800370e357d474c2d8d67552d78b0dd.tar.gz
better bang position
-rw-r--r--images/bang.svg1
-rw-r--r--play.css5
-rw-r--r--play.js84
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) {