summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorTor Andersson <tor@ccxvii.net>2024-07-05 13:03:18 +0200
committerTor Andersson <tor@ccxvii.net>2024-08-21 00:28:20 +0200
commit113c33f7539f1545e0d0cc8c5b87ba8cd91ee0ff (patch)
treef09e4502fdafacfbcfe56d971851f4f8eec4ae6a
parent9b946d07851f337176ca62a634108c64a95b3ae0 (diff)
downloadwashingtons-war-113c33f7539f1545e0d0cc8c5b87ba8cd91ee0ff.tar.gz
robust layout
-rw-r--r--play.css2
-rw-r--r--play.js163
2 files changed, 97 insertions, 68 deletions
diff --git a/play.css b/play.css
index d39543a..1aa535f 100644
--- a/play.css
+++ b/play.css
@@ -171,10 +171,12 @@ body.America header.your_turn { background-color: hsl(211, 50%, 75%) }
.general.action {
box-shadow: 0 0 0 3px yellow, 0 0 2px 4px black;
+ z-index: 2;
}
.general.selected {
box-shadow: 0 0 0 3px aqua, 0 0 2px 4px black;
+ z-index: 1;
}
/* CARDS */
diff --git a/play.js b/play.js
index bf99bee..a386b5a 100644
--- a/play.js
+++ b/play.js
@@ -184,6 +184,10 @@ let ui = {
b_cu: [],
f_cu: [],
+ layout_static: [],
+ layout_move: null,
+ layout_react: null,
+
generals: [],
}
@@ -271,17 +275,9 @@ function on_init() {
ui.b_pc[s] = build_marker("marker pc british", x, y, 58, 66)
ui.a_pc[s] = build_marker("marker pc american", x, y, 58, 66)
- if (info.type === "box") {
- x += w/2
- y += h - 50
- ui.b_cu[s] = build_marker("marker cu british", x, y, 60+2, 60+2)
- ui.a_cu[s] = build_marker("marker cu american", x, y, 60+2, 60+2)
- ui.f_cu[s] = build_marker("marker cu french", x, y, 60+2, 60+2)
- } else {
- ui.b_cu[s] = build_marker("marker cu british", x-20, y+15, 60+2, 60+2)
- ui.a_cu[s] = build_marker("marker cu american", x-20, y+15, 60+2, 60+2)
- ui.f_cu[s] = build_marker("marker cu french", x+10, y+15, 60+2, 60+2)
- }
+ ui.b_cu[s] = build_piece("marker cu british", 60+2, 60+2)
+ ui.a_cu[s] = build_piece("marker cu american", 60+2, 60+2)
+ ui.f_cu[s] = build_piece("marker cu french", 60+2, 60+2)
}
ui.b_mcu = build_piece("marker cu british", 60+2, 60+2)
@@ -419,9 +415,9 @@ function get_army_xy_lerp(s1, s2) {
}
if (Math.abs(dx) < 180 && Math.abs(dy) < 60)
- y -= 20
+ y -= 40
- return [ x, y ]
+ return [ x - 15 , y ]
}
function get_army_xy(s) {
@@ -436,6 +432,60 @@ function get_army_xy(s) {
return [ x, y ]
}
+function get_static_xy(s) {
+ let x, y
+ if (s >= 66) {
+ x = data.spaces[s].x
+ y = data.spaces[s].y
+ } else {
+ x = data.spaces[s].x - 20
+ y = data.spaces[s].y + 15
+ }
+ return [ x, y ]
+}
+
+function get_static_acu(s) {
+ let cu = count_american_cu(s)
+ if (view.move && view.move.to === s)
+ cu -= view.move.carry_american
+ if (view.react && view.react.from === s)
+ cu -= view.react.carry_american
+ return cu
+}
+
+function get_static_fcu(s) {
+ let cu = count_french_cu(s)
+ if (view.move && view.move.to === s)
+ cu -= view.move.carry_french
+ if (view.react && view.react.from === s)
+ cu -= view.react.carry_french
+ return cu
+}
+
+function get_static_bcu(s) {
+ let cu = count_british_cu(s)
+ if (view.move && view.move.to === s)
+ cu -= view.move.carry_british
+ if (view.react && view.react.from === s)
+ cu -= view.react.carry_british
+ return cu
+}
+
+function layout_all_cu(an, fn, bn, ae, fe, be, pos) {
+ let [ x, y ] = pos
+ toggle_marker_with_number_at(ae, an, x, y)
+ if (an > 0)
+ x += 30
+ toggle_marker_with_number_at(fe, fn, x, y)
+ if (fn > 0)
+ x += 30
+ toggle_marker_with_number_at(be, bn, x, y)
+ if (bn > 0)
+ x += 30
+ // if (an > 0 || fn > 0 || bn > 0) x -= 10
+ return [ x, y ]
+}
+
function on_update() {
let e
@@ -477,49 +527,39 @@ function on_update() {
show_marker_at(ui.french_navy, data.layout.sea[view.french_navy][0]-15, data.layout.sea[view.french_navy][1]+42)
for (let s = 0; s < data.spaces.length; ++s) {
- let acu = count_american_cu(s)
- let fcu = count_french_cu(s)
- let bcu = count_british_cu(s)
-
- if (view.move && view.move.to === s) {
- acu -= view.move.carry_american
- fcu -= view.move.carry_french
- bcu -= view.move.carry_british
- }
- if (view.react && view.react.from === s) {
- acu -= view.react.carry_american
- fcu -= view.react.carry_french
- bcu -= view.react.carry_british
- }
-
- toggle_marker_with_number(ui.a_cu[s], acu)
- toggle_marker_with_number(ui.f_cu[s], fcu)
- toggle_marker_with_number(ui.b_cu[s], bcu)
+ ui.layout_static[s] = layout_all_cu(
+ get_static_acu(s),
+ get_static_fcu(s),
+ get_static_bcu(s),
+ ui.a_cu[s],
+ ui.f_cu[s],
+ ui.b_cu[s],
+ get_static_xy(s)
+ )
}
if (view.move) {
- let [ x, y ] = get_army_xy_lerp(view.move.from, view.move.to)
- if (view.move.carry_american > 0 && view.move.carry_french > 0) {
- toggle_marker_with_number_at(ui.a_mcu, view.move.carry_american, x-15, y)
- toggle_marker_with_number_at(ui.f_mcu, view.move.carry_french, x+15, y)
- } else {
- toggle_marker_with_number_at(ui.a_mcu, view.move.carry_american, x, y)
- toggle_marker_with_number_at(ui.f_mcu, view.move.carry_french, x, y)
- }
- toggle_marker_with_number_at(ui.b_mcu, view.move.carry_british, x, y)
+ ui.layout_move = layout_all_cu(
+ view.move.carry_american | 0,
+ view.move.carry_french | 0,
+ view.move.carry_british | 0,
+ ui.a_mcu,
+ ui.f_mcu,
+ ui.b_mcu,
+ get_army_xy_lerp(view.move.from, view.move.to)
+ )
}
if (view.react) {
- let [ x, y ] = get_army_xy_lerp(view.react.from, view.react.to)
-
- if (view.react.carry_american > 0 && view.react.carry_french > 0) {
- toggle_marker_with_number_at(ui.a_rcu, view.react.carry_american, x-15, y)
- toggle_marker_with_number_at(ui.f_rcu, view.react.carry_french, x+15, y)
- } else {
- toggle_marker_with_number_at(ui.a_rcu, view.react.carry_american, x, y)
- toggle_marker_with_number_at(ui.f_rcu, view.react.carry_french, x, y)
- }
- toggle_marker_with_number_at(ui.b_rcu, view.react.carry_british, x, y)
+ ui.layout_react = layout_all_cu(
+ view.react.carry_american | 0,
+ view.react.carry_french | 0,
+ view.react.carry_british | 0,
+ ui.a_rcu,
+ ui.f_rcu,
+ ui.b_rcu,
+ get_army_xy_lerp(view.react.from, view.react.to)
+ )
}
for (let g = 0; g < general_count; ++g) {
@@ -527,37 +567,24 @@ function on_update() {
if (s === NOWHERE)
continue
- let { x, y } = data.spaces[s]
+ let pos = ui.layout_static[s]
if (view.move && view.move.who === g)
- [ x, y ] = get_army_xy_lerp(view.move.from, view.move.to)
+ pos = ui.layout_move
if (view.react && view.react.who === g)
- [ x, y ] = get_army_xy_lerp(view.react.from, view.react.to)
+ pos = ui.layout_react
+
+ let [ x, y ] = pos
if (view.move && view.move.who === g) {
ui.generals[g].classList.add("selected")
- if (view.move.carry_french > 0 && view.move.carry_american > 0)
- x += 15
- x += 20
} else if (view.react && view.react.who === g) {
ui.generals[g].classList.add("selected")
- if (view.react.carry_french > 0 && view.react.carry_american > 0)
- x += 15
- x += 20
} else {
ui.generals[g].classList.remove("selected")
- let fcu = count_french_cu(s)
- if (view.move && view.move.to === s)
- fcu -= view.move.carry_french
- if (view.react && view.react.from === s)
- fcu -= view.react.carry_french
- if (fcu > 0)
- x += 15
-
if (s < 66) {
let offset = general_offset(g)
x += offset * (45 + 9)
- y += 15
} else {
let total = general_total(g)
let offset = general_offset(g)