From 69d42a0e3a42eaa4e2bf5bc17a24bcf45aad6fcf Mon Sep 17 00:00:00 2001 From: Tor Andersson Date: Mon, 19 Dec 2022 13:32:56 +0100 Subject: Embiggen locale hit boxes. --- play.js | 161 +++++++++++++++++++++++++++++++++++----------------------------- 1 file changed, 88 insertions(+), 73 deletions(-) (limited to 'play.js') diff --git a/play.js b/play.js index ee95c52..2fe5152 100644 --- a/play.js +++ b/play.js @@ -414,7 +414,7 @@ let expand_calendar = -1 const ui = { locale: [], - locale_extra: [], + locale_name: [], locale_markers: [], lord_cylinder: [], lord_service: [], @@ -458,17 +458,7 @@ function clean_name(name) { return name.toLowerCase().replaceAll("&", "and").replaceAll(" ", "_") } -const extra_size_100 = { - town: [ 60, 42 ], - castle: [ 60, 42 ], - fort: [ 72, 42 ], - traderoute: [ 72, 42 ], - bishopric: [ 84, 60 ], - city: [ 132, 72 ], - novgorod: [ 156, 96 ], -} - -const extra_size = { +const extra_size_OLD = { town: [ 45, 32 ], castle: [ 45, 32 ], fort: [ 54, 32 ], @@ -675,14 +665,14 @@ function sub_card_event(match, p1) { function on_focus_locale_tip(loc) { ui.locale[loc].classList.add("tip") - if (ui.locale_extra[loc]) - ui.locale_extra[loc].classList.add("tip") + if (ui.locale_name[loc]) + ui.locale_name[loc].classList.add("tip") } function on_blur_locale_tip(loc) { ui.locale[loc].classList.remove("tip") - if (ui.locale_extra[loc]) - ui.locale_extra[loc].classList.remove("tip") + if (ui.locale_name[loc]) + ui.locale_name[loc].classList.remove("tip") } function on_click_locale_tip(loc) { @@ -1025,9 +1015,9 @@ function update_veche() { function update_locale(loc) { ui.locale[loc].classList.toggle("action", is_locale_action(loc) || is_laden_march_action(loc)) ui.locale[loc].classList.toggle("laden", is_laden_march_action(loc)) - if (ui.locale_extra[loc]) { - ui.locale_extra[loc].classList.toggle("action", is_locale_action(loc) || is_laden_march_action(loc)) - ui.locale_extra[loc].classList.toggle("laden", is_laden_march_action(loc)) + if (ui.locale_name[loc]) { + ui.locale_name[loc].classList.toggle("action", is_locale_action(loc) || is_laden_march_action(loc)) + ui.locale_name[loc].classList.toggle("laden", is_laden_march_action(loc)) } ui.locale_markers[loc].replaceChildren() @@ -1268,36 +1258,38 @@ function on_update() { ui.veche.classList.toggle("action", is_veche_action()) - action_button("use_legate", "Legate") - - action_button("stonemasons", "Stonemasons") - action_button("stone_kremlin", "Stone Kremlin") - action_button("smerdi", "Smerdi") - + // Misc action_button("left", "Left") action_button("right", "Right") - + action_button("march", "March") action_button("withdraw", "Withdraw") action_button("surrender", "Surrender") action_button("siegeworks", "Siegeworks") - action_button("march", "March") - action_button("sail", "Sail") + // Use all commands + action_button("use_legate", "Legate") + action_button("stonemasons", "Stonemasons") + action_button("stone_kremlin", "Stone Kremlin") + action_button("tax", "Tax") action_button("siege", "Siege") + + // Use one command + action_button("smerdi", "Smerdi") action_button("storm", "Storm") action_button("sally", "Sally") + action_button("sail", "Sail") action_button("supply", "Supply") action_button("forage", "Forage") action_button("ravage", "Ravage") - action_button("tax", "Tax") + // Muster action_button("ship", "Ship") action_button("boat", "Boat") action_button("cart", "Cart") action_button("sled", "Sled") - action_button("capability", "Capability") + // Events action_button("delay", "Delay") // delay Aleksandr/Andrey action_button("deploy", "Deploy") action_button("discard", "Discard") @@ -1394,58 +1386,80 @@ function build_way(name, sel) { ui.ways[way].addEventListener("mousedown", on_click_way) } +const locale_size = { + region: [ 88, 56 ], + town: [ 80, 72 ], + traderoute: [ 90, 54 ], + fort: [ 96, 54 ], + castle: [ 96, 56 ], + city: [ 126, 80 ], + bishopric: [ 106, 72 ], + novgorod: [ 144, 86 ], +} + function build_map() { data.locales.forEach((locale, ix) => { - let e = ui.locale[ix] = document.createElement("div") let region = clean_name(locale.region) - e.className = "locale " + locale.type + " " + region - let x = round(locale.box.x * MAP_DPI / 300) - let y = round(locale.box.y * MAP_DPI / 300) - let w = floor((locale.box.x+locale.box.w) * MAP_DPI / 300) - x - let h = floor((locale.box.y+locale.box.h) * MAP_DPI / 300) - y - if (locale.type === 'town') { - locale_xy[ix] = [ round(x + w / 2), y - 24 ] - x -= 11 - y -= 5 - w += 16 - h += 5 - } else if (locale.type === 'region') { - locale_xy[ix] = [ round(x + w / 2), round(y + h / 2) - 32 ] - x -= 3 - y -= 4 - // XXX - x -= 8 - y -= 6 - w += 16 - h += 12 + let x = floor(locale.box.x * MAP_DPI / 300) + let y = floor(locale.box.y * MAP_DPI / 300) + let w = ceil((locale.box.x+locale.box.w) * MAP_DPI / 300) - x + let h = ceil((locale.box.y+locale.box.h) * MAP_DPI / 300) - y + let xc = round(x + w / 2) + let yc = round(y + h / 2) + let e + + switch (locale.type) { + case "town": + locale_xy[ix] = [ xc, y - 24 ] + w = locale_size.town[0] + h = locale_size.town[1] + x = xc - w/2 + y = y - h + 16 + break + case "region": + xc += 2 + yc -= 3 + locale_xy[ix] = [ xc, yc - 24 ] + w = locale_size.region[0] + h = locale_size.region[1] + x = xc - w/2 + y = yc - h/2 + break + default: + locale_xy[ix] = [ xc, y - 36 ] + break + } + // Main Area + e = ui.locale[ix] = document.createElement("div") + e.className = "locale " + locale.type + " " + region + e.my_id = ix + if (locale.type !== "region" && locale.type !== "town") { + let ew = locale_size[locale.type][0] + let eh = locale_size[locale.type][1] + e.style.top = (y - eh) + "px" + e.style.left = (xc - ew/2) + "px" + e.style.width = (ew) + "px" + e.style.height = (eh) + "px" } else { - locale_xy[ix] = [ round(x + w / 2), y - 36 ] - x -= 2 - y -= 2 - w -= 2 - h -= 2 + e.style.left = x + "px" + e.style.top = y + "px" + e.style.width = w + "px" + e.style.height = h + "px" } - e.style.left = x + "px" - e.style.top = y + "px" - e.style.width = w + "px" - e.style.height = h + "px" - e.my_id = ix e.addEventListener("mousedown", on_click_locale) e.addEventListener("mouseenter", on_focus_locale) e.addEventListener("mouseleave", on_blur) document.getElementById("locales").appendChild(e) - if (locale.type !== 'region') { - e = ui.locale_extra[ix] = document.createElement("div") - e.className = "locale_extra " + locale.type + " " + region - let cx = x + (w >> 1) + 4 - let ew = extra_size[locale.type][0] - let eh = extra_size[locale.type][1] - e.style.top = (y - eh) + "px" - e.style.left = (cx - ew/2) + "px" - e.style.width = ew + "px" - e.style.height = eh + "px" + // Name Plate + if (locale.type !== 'region' && locale.type !== 'town') { + e = ui.locale_name[ix] = document.createElement("div") + e.className = "locale_name " + locale.type + " " + region + e.style.left = x + "px" + e.style.top = y + "px" + e.style.width = w + "px" + e.style.height = h + "px" e.my_id = ix e.addEventListener("mousedown", on_click_locale) e.addEventListener("mouseenter", on_focus_locale) @@ -1453,10 +1467,11 @@ function build_map() { document.getElementById("locales").appendChild(e) } + // Locale Markers e = ui.locale_markers[ix] = document.createElement("div") e.className = "locale_markers " + locale.type + " " + region - x = (locale.box.x + locale.box.w / 2) * MAP_DPI / 300 - 196/2 - y = (locale.box.y + locale.box.h * 0) * MAP_DPI / 300 - 8 + x = xc - 196/2 + y = y - 8 e.style.top = y + "px" e.style.left = x + "px" e.style.width = 196 + "px" -- cgit v1.2.3