From d91729e13fd3081907bf38b5a6823aab161c6509 Mon Sep 17 00:00:00 2001 From: Tor Andersson Date: Sun, 25 Jun 2023 11:40:54 +0200 Subject: Combat overlay to show battle lines expanded. --- play.js | 136 ++++++++++++++++++++++++++++++++++++++++++++++++++++++---------- 1 file changed, 115 insertions(+), 21 deletions(-) (limited to 'play.js') diff --git a/play.js b/play.js index 1b72d44..cf7d345 100644 --- a/play.js +++ b/play.js @@ -300,6 +300,11 @@ const BOXES = { "Goths Dice": [1730,195,100,50], "Sassanids Dice": [2380,895,100,50], "Nomads Dice": [570,1520,100,50], + "Franks Battle": [750,210,430,180], + "Alamanni Battle": [1240,210,430,180], + "Goths Battle": [1670,245,430,180], + "Sassanids Battle": [2070,980,430,180], + "Nomads Battle": [670,1400,430,180], } const LAYOUT_XY = [ @@ -326,6 +331,26 @@ const LAYOUT_XY = [ BOXES["Pontus Euxinus XY"], ] +const LAYOUT_BATTLE = [ + BOXES["Italia Capital"], + BOXES["Asia Capital"], + BOXES["Gallia Capital"], + BOXES["Macedonia Capital"], + BOXES["Pannonia Capital"], + BOXES["Thracia Capital"], + BOXES["Britannia Capital"], + BOXES["Galatia Capital"], + BOXES["Syria Capital"], + BOXES["Aegyptus Capital"], + BOXES["Africa Capital"], + BOXES["Hispania Capital"], + BOXES["Alamanni Battle"], + BOXES["Franks Battle"], + BOXES["Goths Battle"], + BOXES["Sassanids Battle"], + BOXES["Nomads Battle"], +] + const LAYOUT_SUPPORT = [ BOXES["Italia Support 1"], BOXES["Asia Support"], @@ -611,6 +636,7 @@ let ui = { hand: document.getElementById("hand"), draw: document.getElementById("draw"), active_event: document.getElementById("active_event"), + combat_mask: document.getElementById("combat_mask"), discard: document.getElementById("discard"), played: document.getElementById("played"), market: document.getElementById("market"), @@ -856,9 +882,39 @@ function on_init() { let stack_count = new Array(21).fill(0) -function layout_stack(id, list, region, in_capital, dx, dy) { +let battle_width = 0 +const BATTLE_MIN = 3 +const BATTLE_H_MARGIN = 12 +const BATTLE_V_MARGIN = 12 +const BATTLE_H_GAP = 8 +const BATTLE_V_GAP = 16 + +function layout_battle_stack(is_att, list, region) { + let [ x, y, w, h ] = LAYOUT_BATTLE[region] + x += w >> 1 + if (region < 12) + y -= 7 + + if (list.length > battle_width) + battle_width = list.length + + w = list.length * 60 + (list.length - 1) * BATTLE_H_GAP + x -= w / 2 + + y += BATTLE_V_MARGIN + if (is_att) + y += 60 + BATTLE_V_GAP + + for (let item of list) { + item.style.left = x + "px" + item.style.top = y + "px" + item.style.zIndex = 101 + x += 60 + BATTLE_H_GAP + } +} + +function layout_stack(id, list, region, in_capital, dx, dy, z = 1) { let [ x, y, w, h ] = LAYOUT_XY[region] - let z = 1 x += w >> 1 y += h >> 1 @@ -885,7 +941,6 @@ function layout_stack(id, list, region, in_capital, dx, dy) { item.style.left = x + "px" item.style.top = y + "px" item.style.zIndex = z - item.my_stack = id x -= dx y -= dy z += 1 @@ -900,7 +955,6 @@ function layout_available(list, dx, x0, y0) { item.style.left = x + "px" item.style.top = y + "px" item.style.zIndex = z - item.my_stack = 0 x += dx z -= 1 } @@ -946,6 +1000,18 @@ function layout_barbarian_dice(black, white, tribe) { } } +function is_battle_stack(region, type, id) { + if (view.battle_region !== region) + return false + if (type === "general" && view.battle.attacker === id) + return true + if (type === "militia" && view.battle.attacker < 0) + return true + if (type === "militia" && view.battle.type === "militia") + return true + return view.battle.type === type && view.battle.target === id +} + function on_update() { let player_count = view.legacy.length @@ -975,6 +1041,8 @@ function on_update() { ui.discard.replaceChildren() ui.market.replaceChildren() + battle_width = BATTLE_MIN + for (let pi = 0; pi < player_count; ++pi) { let legacy = view.legacy[pi] let turns = view.emperor_turns[pi] @@ -1109,15 +1177,16 @@ function on_update() { for (let region = 0; region < 12 + 5; ++region) { for (let tribe = 0; tribe < 5; ++tribe) { + let battle = [] let active_barbarians = [] let inactive_barbarians = [] for (let id = first_barbarian[tribe]; id <= last_barbarian[tribe]; ++id) { - if (id === CNIVA || id === ARDASHIR || id === SHAPUR) - continue let loc = get_barbarian_location(id) let inactive = is_barbarian_inactive(id) if (loc === region) { - if (inactive) + if (is_battle_stack(region, "barbarians", tribe) && (region < 12 || !inactive)) + battle.push(ui.barbarians[id]) + else if (inactive) inactive_barbarians.push(ui.barbarians[id]) else active_barbarians.push(ui.barbarians[id]) @@ -1130,22 +1199,21 @@ function on_update() { layout_stack(-1, inactive_barbarians, region, false, 8, 8) if (active_barbarians.length > 0) layout_stack(-1, active_barbarians, region, false, 8, 8) + if (battle.length > 0) + layout_battle_stack(0, battle, region) } } - for (let id of [ CNIVA, ARDASHIR, SHAPUR ]) { - let loc = get_barbarian_location(id) - if (loc !== AVAILABLE) - layout_stack(-1, [ ui.barbarians[id] ], loc, false, 8, 8) - } - for (let id = 0; id < 3; ++id) { let loc = get_rival_emperor_location(id) if (loc === AVAILABLE) hide(ui.rival_emperors[id]) else { show(ui.rival_emperors[id]) - layout_stack(-1, [ ui.rival_emperors[id] ], loc, false, 8, 8) + if (is_battle_stack(loc, "rival_emperor", id)) + layout_battle_stack(0, [ ui.rival_emperors[id] ], loc) + else + layout_stack(-1, [ ui.rival_emperors[id] ], loc, false, 8, 8) } } @@ -1170,10 +1238,17 @@ function on_update() { } } if (lone_militia) { - if (has_militia_castra(region)) - layout_stack(-1, [ ui.mcastra[region], ui.militia[region] ], region, true, 16, 16) - else - layout_stack(-1, [ ui.militia[region] ], region, true, 16, 16) + if (is_battle_stack(region, "militia", region)) { + if (has_militia_castra(region)) + layout_battle_stack(view.battle.attacker < 0, [ ui.mcastra[region], ui.militia[region] ], region) + else + layout_battle_stack(view.battle.attacker < 0, [ ui.militia[region] ], region, true) + } else { + if (has_militia_castra(region)) + layout_stack(-1, [ ui.mcastra[region], ui.militia[region] ], region, true, 16, 16) + else + layout_stack(-1, [ ui.militia[region] ], region, true, 16, 16) + } } } @@ -1235,10 +1310,10 @@ function on_update() { if (has_militia(region) && inside) stack.push(ui.militia[region]) - if (inside) - layout_stack(pi * 6 + ai, stack, region, true, 16, 16) + if (is_battle_stack(region, "general", pi * 6 + ai)) + layout_battle_stack(pi * 6 + ai === view.battle.attacker, stack, region) else - layout_stack(pi * 6 + ai, stack, region, false, 16, 16) + layout_stack(pi * 6 + ai, stack, region, inside, 16, 16) } else { avail_stack.push(e) } @@ -1278,6 +1353,25 @@ function on_update() { layout_available(avail_stack, 64, pi * 625 + 325, 27) } + if (view.battle) { + let [ x, y, w, h ] = LAYOUT_BATTLE[view.battle_region] + if (view.battle_region < 12) + y -= 7 + x += w >> 1 + + w = battle_width * 60 + (battle_width - 1) * BATTLE_H_GAP + BATTLE_H_MARGIN * 2 + x -= w / 2 + h = 120 + BATTLE_V_GAP + BATTLE_V_MARGIN * 2 + + show(ui.combat_mask) + ui.combat_mask.style.left = x + "px" + ui.combat_mask.style.top = y + "px" + ui.combat_mask.style.width = w + "px" + ui.combat_mask.style.height = h + "px" + } else { + hide(ui.combat_mask) + } + ui.body.classList.toggle("military", view.color === 0) ui.body.classList.toggle("senate", view.color === 1) ui.body.classList.toggle("populace", view.color === 2) -- cgit v1.2.3