From db5183be29b35d777fed31753c8a14bb3c29ba06 Mon Sep 17 00:00:00 2001 From: Tor Andersson Date: Tue, 20 Jun 2023 14:36:20 +0200 Subject: Better layout. --- play.js | 454 ++++++++++++++++++++++++++++++++++++++++++++---------- tools/boxes.svg | 108 ++++++------- tools/genboxes.py | 2 +- 3 files changed, 424 insertions(+), 140 deletions(-) diff --git a/play.js b/play.js index 4ec31fe..c075d4d 100644 --- a/play.js +++ b/play.js @@ -68,26 +68,66 @@ const REGION_NAME = [ "Unavailable", ] -function is_no_place_governor(province) { return province >= view.support.length } -function get_support(province) { return view.support[province] } -function get_barbarian_location(id) { return view.barbarians[id] & 63 } -function is_barbarian_inactive(id) { return view.barbarians[id] & 64 } -function get_legion_location(ix) { return view.legions[ix] & 63 } -function is_legion_reduced(ix) { return view.legions[ix] & 64 } -function is_legion_unused(ix) { return view.legions[ix] === AVAILABLE } -function get_governor_location(id, loc) { return view.governors[id] & 63 } -function get_general_location(id) { return view.generals[id] & 63 } -function is_general_inside_capital(id) { return view.generals[id] & 64 } -function has_general_castra(id) { return view.castra & (1 << id) } -function has_militia_castra(province) { return view.mcastra & (1 << province) } -function has_quaestor(province) { return view.quaestor & (1 << province) } -function has_militia(province) { return view.militia & (1 << province) } -function get_mobs(province) { return view.mobs[province] } -function has_amphitheater(province) { return view.amphitheater & (1 << province) } -function has_basilica(province) { return view.basilica & (1 << province) } -function has_limes(province) { return view.limes & (1 << province) } -function is_breakaway(province) { return view.breakaway & (1 << province) } -function is_seat_of_power(province) { return view.seat_of_power & (1 << province) } +function is_no_place_governor(province) { + return province >= view.support.length +} +function get_support(province) { + return view.support[province] +} +function get_barbarian_location(id) { + return view.barbarians[id] & 63 +} +function is_barbarian_inactive(id) { + return view.barbarians[id] & 64 +} +function get_legion_location(ix) { + return view.legions[ix] & 63 +} +function is_legion_reduced(ix) { + return view.legions[ix] & 64 +} +function is_legion_unused(ix) { + return view.legions[ix] === AVAILABLE +} +function get_governor_location(id, loc) { + return view.governors[id] & 63 +} +function get_general_location(id) { + return view.generals[id] & 63 +} +function is_general_inside_capital(id) { + return view.generals[id] & 64 +} +function has_general_castra(id) { + return view.castra & (1 << id) +} +function has_militia_castra(province) { + return view.mcastra & (1 << province) +} +function has_quaestor(province) { + return view.quaestor & (1 << province) +} +function has_militia(province) { + return view.militia & (1 << province) +} +function get_mobs(province) { + return view.mobs[province] +} +function has_amphitheater(province) { + return view.amphitheater & (1 << province) +} +function has_basilica(province) { + return view.basilica & (1 << province) +} +function has_limes(province) { + return view.limes & (1 << province) +} +function is_breakaway(province) { + return view.breakaway & (1 << province) +} +function is_seat_of_power(province) { + return view.seat_of_power & (1 << province) +} // === END SYNC === @@ -111,42 +151,40 @@ const PLAYER_CLASS = [ "red", "blue", "yellow", "green" ] const BARBARIAN_CLASS = [ "alamanni", "franks", "goths", "nomads", "sassanids" ] const BOXES = { - "Thracia Support": [1502,720,258,52], - "Syria Support": [2034,1280,258,52], - "Pannonia Support": [1154,626,258,53], - "Macedonia Support": [1384,936,258,53], - "Hispania Support": [154,980,258,53], - "Gallia Support": [460,507,258,53], - "Galatia Support": [1954,931,258,53], - "Britannia Support": [231,260,258,52], - "Asia Support": [1679,1000,258,52], - "Africa Support": [647,1290,258,53], - "Aegyptus Support": [1700,1468,258,53], - "Italia Support 2": [1054,887,258,52], - "Italia Support 1": [1028,835,258,52], - "Thracia Capital": [1594,631,70,70], - "Syria Capital": [2174,1193,70,70], - "Pannonia Capital": [1214,536,70,70], - "Macedonia Capital": [1477,850,70,70], - "Italia Capital": [1038,743,70,70], - "Hispania Capital": [249,892,70,70], - "Gallia Capital": [554,418,70,70], - "Galatia Capital": [2048,842,70,70], - "Britannia Capital": [325,177,70,70], - "Asia Capital": [1790,908,70,70], - "Africa Capital": [741,1204,70,70], - "Aegyptus Capital": [1793,1380,70,70], - "Pontus Euxinus XY": [1970,620,130,60], - "Mare Orientale XY": [1770,1170,100,60], - "Mare Occidentale XY": [720,890,90,60], - "Oceanus Atlanticus XY": [130,495,80,50], - "Nomads XY": [705,1495,165,25], - "Sassanids XY": [2295,980,190,25], - "Goths XY": [1840,235,130,15], - "Alamanni XY": [1370,200,195,15], - "Franks XY": [900,200,135,15], - "SCORE TRACK": [40,40,2469,80], - "CRISIS TABLE": [2195,189,262,326], + "Thracia Support": [ 1502, 720, 258, 52 ], + "Syria Support": [ 2034, 1280, 258, 52 ], + "Pannonia Support": [ 1154, 626, 258, 53 ], + "Macedonia Support": [ 1384, 936, 258, 53 ], + "Hispania Support": [ 154, 980, 258, 53 ], + "Gallia Support": [ 460, 507, 258, 53 ], + "Galatia Support": [ 1954, 931, 258, 53 ], + "Britannia Support": [ 231, 260, 258, 52 ], + "Asia Support": [ 1679, 1000, 258, 52 ], + "Africa Support": [ 647, 1290, 258, 53 ], + "Aegyptus Support": [ 1700, 1468, 258, 53 ], + "Italia Support 2": [ 1054, 887, 258, 52 ], + "Italia Support 1": [ 1028, 835, 258, 52 ], + "Thracia Capital": [ 1594, 631, 70, 70 ], + "Syria Capital": [ 2174, 1193, 70, 70 ], + "Pannonia Capital": [ 1214, 536, 70, 70 ], + "Macedonia Capital": [ 1477, 850, 70, 70 ], + "Italia Capital": [ 1038, 743, 70, 70 ], + "Hispania Capital": [ 249, 892, 70, 70 ], + "Gallia Capital": [ 554, 418, 70, 70 ], + "Galatia Capital": [ 2048, 842, 70, 70 ], + "Britannia Capital": [ 325, 177, 70, 70 ], + "Asia Capital": [ 1790, 908, 70, 70 ], + "Africa Capital": [ 741, 1204, 70, 70 ], + "Aegyptus Capital": [ 1793, 1380, 70, 70 ], + "Pontus Euxinus XY": [ 1880, 580, 60, 60 ], + "Mare Orientale XY": [ 1480, 1160, 60, 60 ], + "Mare Occidentale XY": [ 720, 900, 60, 60 ], + "Oceanus Atlanticus XY": [ 180, 500, 60, 60 ], + "Nomads XY": [ 520, 1480, 60, 60 ], + "Sassanids XY": [ 2440, 820, 60, 60 ], + "Goths XY": [ 2020, 360, 60, 60 ], + "Alamanni XY": [ 1540, 280, 60, 60 ], + "Franks XY": [ 1160, 300, 60, 60 ], } const LAYOUT_XY = [ @@ -188,6 +226,238 @@ const LAYOUT_SUPPORT = [ BOXES["Syria Support"], ] +const LAYOUT_SEA = [ [ 0, 0 ] ] + +const LAYOUT_HOMELAND = [ + [ 0, 0 ], + [ -1, 0 ], + [ -2, 0 ], + [ -3, 0 ], + [ -3, -1 ], + [ -2, -1 ], + [ -1, -1 ], + [ 0, -1 ], +] + +const LAYOUT_SASSANIDS = [ + [ 0, 0 ], + [ -1, 0 ], + [ -2, 0 ], + [ 0, -1 ], + [ -1, -1 ], + [ -2, -1 ], + [ -2, 1 ], + [ -1, 1 ], + [ 0, 1 ], + [ -2, 2 ], + [ -1, 2 ], + [ 0, 2 ], +] + +const LAYOUT_NOMADS = [ + [ 0, 0 ], + [ 1, 0 ], + [ 2, 0 ], + [ 3, 0 ], + [ 4, 0 ], + [ 5, 0 ], + [ 0, 1 ], +] + +const LAYOUT_ITALIA = [ + [ -3, -2 ], + [ -2, -2 ], + [ -1, -2 ], + [ 0, -2 ], + [ -2, -1 ], + [ -1, -1 ], + [ 0, -1 ], + [ -1, 0 ], + [ 1, 0 ], + [ 2, 0 ], + [ 0, 3 ], +] + +const LAYOUT_ASIA = [ + [ -1, 0 ], + [ 1, 0 ], + [ 0, -1 ], + [ -1, -1 ], + [ 1, -1 ], + [ 1, -2 ], + [ 0, -2 ], + [ 1, -3 ], + [ -1, 3 ], +] + +const LAYOUT_GALLIA = [ + [ -1, 0 ], + [ 1, 0 ], + [ 0, -1 ], + [ -1, -1 ], + [ 1, -1 ], + [ -2, 0 ], + [ 2, 0 ], + [ 2, -1 ], + [ 0, -2 ], + [ 1, -2 ], + [ -1, 3 ], +] + +const LAYOUT_MACEDONIA = [ + [ -1, 0 ], + [ -2, 0 ], + [ 1, 0 ], + [ 0, -1 ], + [ -1, -1 ], + [ -2, -1 ], + [ -1, 3 ], +] + +const LAYOUT_PANNONIA = [ + [ 0, -1 ], + [ -1, -1 ], + [ -2, -1 ], + [ -3, -1 ], + [ -4, -1 ], + [ 1, -1 ], + [ -1, -2 ], + [ -2, -2 ], + [ -3, -2 ], + [ -4, -2 ], + [ -5, -2 ], + [ -1, 0 ], + [ 1, 0 ], +] + +const LAYOUT_THRACIA = [ + [ -1, 0 ], + [ 1, 0 ], + [ 0, -1 ], + [ -1, -1 ], + [ 1, -1 ], + [ -2, -1 ], + [ -2, -2 ], + [ -3, -2 ], + [ -2, -3 ], + [ -1, -2 ], +] + +const LAYOUT_AEGYPTUS = [ + [ -1, 0 ], + [ -2, 0 ], + [ -3, 0 ], + [ -4, 0 ], + [ 1, 0 ], + [ -4, -1 ], + [ -4, 1 ], + [ -3, 1 ], + [ -4, 2 ], + [ -3, 2 ], + [ 3, 2 ], +] + +const LAYOUT_AFRICA = [ + [ -1, 0 ], + [ -2, 0 ], + [ -3, 0 ], + [ -4, 0 ], + [ 1, 0 ], + [ 2, 0 ], + [ 2, -1 ], + [ 1, -1 ], + [ -4, 1 ], + [ -3, 1 ], + [ 3, 2 ], + [ 4, 2 ], + [ 5, 2 ], + [ 6, 2 ], + [ 5, 3 ], +] + +const LAYOUT_HISPANIA = [ + [ -1, 0 ], + [ 1, 0 ], + [ 0, -1 ], + [ -1, -1 ], + [ 1, -1 ], + [ -2, 0 ], + [ 2, 0 ], + [ -2, -1 ], + [ 2, -1 ], + [ 0, -2 ], + [ -1, -2 ], + [ 1, -2 ], +] + +const LAYOUT_BRITANNIA = [ + [ -1, 0 ], + [ 1, 0 ], + [ 2, 0 ], + [ -2, 0 ], + [ -3, 0 ], + [ -3, 1 ], + [ -3, 2 ], + [ -2, 1 ], + [ -2, 2 ], + [ -3, 3 ], +] + +const LAYOUT_GALATIA = [ + [ -1, 0 ], + [ 1, 0 ], + [ 0, -1 ], + [ -1, -1 ], + [ 1, -1 ], + [ 1, -2 ], + [ 0, -2 ], + [ -1, -2 ], + [ -1, -3 ], +] + +const LAYOUT_SYRIA = [ + [ -1, 0 ], + [ 1, 0 ], + [ 0, -1 ], + [ -1, -1 ], + [ 1, -1 ], + [ -2, 0 ], + [ 2, 0 ], + [ -2, -1 ], + [ 2, -1 ], + [ 0, -2 ], + [ -1, -2 ], + [ 1, -2 ], +] + +const LAYOUT_PATTERN = [ + LAYOUT_ITALIA, + LAYOUT_ASIA, + LAYOUT_GALLIA, + LAYOUT_MACEDONIA, + LAYOUT_PANNONIA, + LAYOUT_THRACIA, + + LAYOUT_AEGYPTUS, + LAYOUT_AFRICA, + LAYOUT_HISPANIA, + + LAYOUT_BRITANNIA, + LAYOUT_GALATIA, + LAYOUT_SYRIA, + + LAYOUT_HOMELAND, + LAYOUT_HOMELAND, + LAYOUT_HOMELAND, + LAYOUT_NOMADS, + LAYOUT_SASSANIDS, + + LAYOUT_SEA, + LAYOUT_SEA, + LAYOUT_SEA, + LAYOUT_SEA, +] + let ui = { cards: [], militia: [], @@ -319,15 +589,17 @@ function register_action(target, action, id) { function on_click_action(evt, target) { if (evt.button === 0) { - if (typeof target.my_stack === "number") { + /* + if (typeof target.my_stack === "number") { + evt.stopPropagation() + if (focus_stack(target.my_stack)) + if (!send_action(target.my_action, target.my_id)) + blur_stack() + } else { + */ + if (send_action(target.my_action, target.my_id)) evt.stopPropagation() - if (focus_stack(target.my_stack)) - if (!send_action(target.my_action, target.my_id)) - blur_stack() - } else { - if (send_action(target.my_action, target.my_id)) - evt.stopPropagation() - } + //} } } @@ -339,7 +611,7 @@ document.getElementById("map").addEventListener("mousedown", function (evt) { function create_building(region, className, xoff, yoff) { let [ x, y, w, h ] = LAYOUT_SUPPORT[region] let e = create_thing({ className }) - e.style.left = x + (w>>1) + xoff - 46 + "px" + e.style.left = x + (w >> 1) + xoff - 46 + "px" e.style.top = y + h + yoff + "px" return e } @@ -403,7 +675,7 @@ function on_init() { if (true) { ui.amphitheater[region] = create_building(region, "amphitheater hide", -48 - 3, 6) ui.basilica[region] = create_building(region, "basilica hide", 48 + 3, 6) - ui.limes[region] = create_building(region, "limes hide", 0, 6+25) + ui.limes[region] = create_building(region, "limes hide", 0, 6 + 25) } else { ui.amphitheater[region] = create_building(region, "amphitheater hide", -96 - 5, 6) ui.basilica[region] = create_building(region, "basilica hide", 0, 6) @@ -412,7 +684,7 @@ function on_init() { register_action(ui.capital[region], "capital", region) register_action(ui.regions[region], "region", region) - + ui.neutral_governors[region] = create_thing({ className: "neutral governor hide" }) } for (let region = 12; region < 21; ++region) { @@ -420,12 +692,13 @@ function on_init() { } } -let stack_count = new Array(12 + 5).fill(0) +let stack_count = new Array(21).fill(0) let stack_focus = -1 let stack_cache = [] function focus_stack(id) { if (stack_focus !== id) { + // if (view.selected_general === undefined) send_action("general", id) stack_focus = id on_update() let stack = stack_cache[id] @@ -443,28 +716,39 @@ function blur_stack() { function layout_stack(id, list, region, in_capital) { let [ x, y, w, h ] = LAYOUT_XY[region] - let dx = 8 - let dy = 8 + let dx = 6 + let dy = 6 let z = 1 if (id >= 0) stack_cache[id] = list - if (in_capital) { - x += 5 - y += 5 - } else { - x += stack_count[region] * 80 + x += w >> 1 + y += h >> 1 + + x -= 30 + y -= 30 + + if (!in_capital) { + let sc = stack_count[region] + if (sc >= LAYOUT_PATTERN[region].length) + sc = LAYOUT_PATTERN[region].length - 1 + let xo = LAYOUT_PATTERN[region][sc][0] * 80 + let yo = LAYOUT_PATTERN[region][sc][1] * 80 + if (stack_count[region] > sc) + xo += (stack_count[region] - sc) * 80 + x += xo + y += yo stack_count[region] += 1 } - if (list.length > 5) { - dx = 5 - dy = 5 + if (list.length > 6) { + dx = 4 + dy = 4 } - if (id >= 0 && stack_focus === id) { - dx = 24 + if (id >= 0) { + dx = 16 dy = 16 } @@ -493,8 +777,8 @@ function layout_available(list, dx, x0, y0) { function layout_governor(e, color, region) { e.className = color + " governor s" + get_support(region) - e.style.left = (LAYOUT_SUPPORT[region][0] - 1) + "px" - e.style.top = (LAYOUT_SUPPORT[region][1] - 1) + "px" + e.style.left = LAYOUT_SUPPORT[region][0] - 1 + "px" + e.style.top = LAYOUT_SUPPORT[region][1] - 1 + "px" } function layout_governor_available(e, color) { @@ -557,7 +841,7 @@ function on_update() { show(ui.legacy[pi]) ui.legacy[pi].style.left = Math.round(43 + legacy * 60.2) + "px" - ui.legacy[pi].style.top = (2 + y) + "px" + ui.legacy[pi].style.top = 2 + y + "px" y = 30 for (let k = 0; k < pi; ++k) { @@ -568,7 +852,7 @@ function on_update() { show(ui.emperor_turns[pi]) ui.emperor_turns[pi].style.left = Math.round(41 + turns * 60.2) + "px" - ui.emperor_turns[pi].style.top = (0 + y) + "px" + ui.emperor_turns[pi].style.top = 0 + y + "px" } for (let pi = player_count; pi < 4; ++pi) { @@ -628,7 +912,7 @@ function on_update() { for (let id = BARBARIAN_COUNT[player_count]; id < ui.barbarians.length; ++id) hide(ui.barbarians[id]) - stack_count.fill(1) + stack_count.fill(0) for (let region = 0; region < 12 + 5; ++region) { for (let tribe = 0; tribe < TRIBE_COUNT[player_count]; ++tribe) { diff --git a/tools/boxes.svg b/tools/boxes.svg index 7e5f781..d5aa730 100644 --- a/tools/boxes.svg +++ b/tools/boxes.svg @@ -40,9 +40,9 @@ inkscape:window-height="480" id="namedview6" showgrid="true" - inkscape:zoom="1.7859922" - inkscape:cx="2122.3644" - inkscape:cy="944.53822" + inkscape:zoom="0.63591382" + inkscape:cx="1692.2778" + inkscape:cy="1133.1474" inkscape:current-layer="svg4" inkscape:document-rotation="0"> + height="1650" + id="image2" + sodipodi:insensitive="true" />