From 113c33f7539f1545e0d0cc8c5b87ba8cd91ee0ff Mon Sep 17 00:00:00 2001 From: Tor Andersson Date: Fri, 5 Jul 2024 13:03:18 +0200 Subject: robust layout --- play.css | 2 + play.js | 163 +++++++++++++++++++++++++++++++++++++-------------------------- 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) -- cgit v1.2.3