diff --git a/main.js b/main.js index ff0b2b47..c430faa3 100644 --- a/main.js +++ b/main.js @@ -62,7 +62,7 @@ let regions = viewbox.append("g").attr("id", "regions"); let statesBody = regions.append("g").attr("id", "statesBody"); let statesHalo = regions.append("g").attr("id", "statesHalo"); let provs = viewbox.append("g").attr("id", "provs"); -let zones = viewbox.append("g").attr("id", "zones").style("display", "none"); +let zones = viewbox.append("g").attr("id", "zones"); let borders = viewbox.append("g").attr("id", "borders"); let stateBorders = borders.append("g").attr("id", "stateBorders"); let provinceBorders = borders.append("g").attr("id", "provinceBorders"); diff --git a/modules/dynamic/auto-update.js b/modules/dynamic/auto-update.js index 77b2f5ae..a01a1bb8 100644 --- a/modules/dynamic/auto-update.js +++ b/modules/dynamic/auto-update.js @@ -925,4 +925,9 @@ export function resolveVersionConflicts(mapVersion) { } } } + + if (isOlderThan("1.100.0")) { + // v1.100.00 added zones to pack data + zones.stlye("display", "none"); + } } diff --git a/modules/ui/general.js b/modules/ui/general.js index f665902d..7fd7e4d5 100644 --- a/modules/ui/general.js +++ b/modules/ui/general.js @@ -168,6 +168,7 @@ function showMapTooltip(point, e, i, g) { if (burgsOverview?.offsetParent) highlightEditorLine(burgsOverview, burg, 5000); return; } + if (group === "labels") return tip("Click to edit the Label"); if (group === "markers") return tip("Click to edit the Marker. Hold Shift to not close the assosiated note"); @@ -199,9 +200,11 @@ function showMapTooltip(point, e, i, g) { if (group === "coastline") return tip("Click to edit the coastline"); if (group === "zones") { - const zone = path[path.length - 8]; - tip(zone.dataset.description); - if (zonesEditor?.offsetParent) highlightEditorLine(zonesEditor, zone.id, 5000); + const element = path[path.length - 8]; + const zoneId = +element.dataset.id; + const zone = pack.zones.find(zone => zone.i === zoneId); + tip(zone.name); + if (zonesEditor?.offsetParent) highlightEditorLine(zonesEditor, zoneId, 5000); return; } diff --git a/modules/ui/layers.js b/modules/ui/layers.js index 5572ef78..14d9cbb9 100644 --- a/modules/ui/layers.js +++ b/modules/ui/layers.js @@ -1872,18 +1872,25 @@ function fitScaleBar(scaleBar, fullWidth, fullHeight) { function toggleZones(event) { if (!layerIsOn("toggleZones")) { turnButtonOn("toggleZones"); - $("#zones").fadeIn(); + drawZones(); if (event && isCtrlClick(event)) editStyle("zones"); } else { - if (event && isCtrlClick(event)) { - editStyle("zones"); - return; - } + if (event && isCtrlClick(event)) return editStyle("zones"); turnButtonOff("toggleZones"); - $("#zones").fadeOut(); + zones.selectAll("*").remove(); } } +function drawZones() { + const zonesHtml = pack.zones.map(drawZone); + zones.html(zonesHtml.join("")); +} + +function drawZone({i, cells, color}) { + const cellsPath = cells.map(cell => "M" + getPackPolygon(cell).join(" ")).join(" "); + return ``; +} + function toggleEmblems(event) { if (!layerIsOn("toggleEmblems")) { turnButtonOn("toggleEmblems"); diff --git a/modules/ui/zones-editor.js b/modules/ui/zones-editor.js index 0e0bc6b6..0f6c0226 100644 --- a/modules/ui/zones-editor.js +++ b/modules/ui/zones-editor.js @@ -14,7 +14,6 @@ function editZones() { $("#zonesEditor").dialog({ title: "Zones Editor", resizable: false, - width: fitContent(), close: () => exitZonesManualAssignment("close"), position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"} }); @@ -55,8 +54,7 @@ function editZones() { // update type filter with a list of used types function updateFilters() { - const zones = Array.from(document.querySelectorAll("#zones > g")); - const types = unique(zones.map(zone => zone.dataset.type)); + const types = unique(pack.zones.map(zone => zone.type)); const filterSelect = byId("zonesFilterType"); const typeToFilterBy = types.includes(zonesFilterType.value) ? zonesFilterType.value : "all"; @@ -71,42 +69,37 @@ function editZones() { const unit = " " + getAreaUnit(); const typeToFilterBy = byId("zonesFilterType").value; - const zones = Array.from(document.querySelectorAll("#zones > g")); - const filteredZones = typeToFilterBy === "all" ? zones : zones.filter(zone => zone.dataset.type === typeToFilterBy); + const filteredZones = + typeToFilterBy === "all" ? pack.zones : pack.zones.filter(zone => zone.type === typeToFilterBy); - const lines = filteredZones.map(zoneEl => { - const c = zoneEl.dataset.cells ? zoneEl.dataset.cells.split(",").map(c => +c) : []; - const description = zoneEl.dataset.description; - const type = zoneEl.dataset.type; - const fill = zoneEl.getAttribute("fill"); - const area = getArea(d3.sum(c.map(i => pack.cells.area[i]))); - const rural = d3.sum(c.map(i => pack.cells.pop[i])) * populationRate; + const lines = filteredZones.map(({i, name, type, cells, color, hidden}) => { + const area = getArea(d3.sum(cells.map(i => pack.cells.area[i]))); + const rural = d3.sum(cells.map(i => pack.cells.pop[i])) * populationRate; const urban = - d3.sum(c.map(i => pack.cells.burg[i]).map(b => pack.burgs[b].population)) * populationRate * urbanization; + d3.sum(cells.map(i => pack.cells.burg[i]).map(b => pack.burgs[b].population)) * populationRate * urbanization; const population = rural + urban; const populationTip = `Total population: ${si(population)}; Rural population: ${si( rural )}; Urban population: ${si(urban)}. Click to change`; - const inactive = zoneEl.style.display === "none"; - const focused = defs.select("#fog #focus" + zoneEl.id).size(); + const focused = defs.select("#fog #focusZone" + i).size(); - return `
- - + return `
+ + -
${c.length}
+
${cells.length}
${si(area) + unit}
${si(population)}
-
`; @@ -121,14 +114,13 @@ function editZones() { (d3.sum(pack.cells.pop) + d3.sum(pack.burgs.filter(b => !b.removed).map(b => b.population)) * urbanization) * populationRate; zonesFooterPopulation.dataset.population = totalPop; - zonesFooterNumber.innerHTML = /* html */ `${filteredZones.length} of ${zones.length}`; + zonesFooterNumber.innerHTML = `${filteredZones.length} of ${zones.length}`; zonesFooterCells.innerHTML = pack.cells.i.length; zonesFooterArea.innerHTML = si(totalArea) + unit; zonesFooterPopulation.innerHTML = si(totalPop); - // add listeners - body.querySelectorAll("div.states").forEach(el => el.on("mouseenter", ev => zoneHighlightOn(ev))); - body.querySelectorAll("div.states").forEach(el => el.on("mouseleave", ev => zoneHighlightOff(ev))); + body.querySelectorAll("div.states").forEach(el => el.on("mouseenter", zoneHighlightOn)); + body.querySelectorAll("div.states").forEach(el => el.on("mouseleave", zoneHighlightOff)); if (body.dataset.type === "percentage") { body.dataset.type = "absolute"; @@ -167,7 +159,8 @@ function editZones() { axis: "y", update: movezone }); - function movezone(ev, ui) { + + function movezone(_ev, ui) { const zone = $("#" + ui.item.attr("data-id")); const prev = $("#" + ui.item.prev().attr("data-id")); if (prev) { diff --git a/modules/zones-generator.js b/modules/zones-generator.js index 94914b09..2a66bd63 100644 --- a/modules/zones-generator.js +++ b/modules/zones-generator.js @@ -28,30 +28,6 @@ window.Zones = (function () { } }); - console.table(pack.zones); - drawZones(); - - function drawZones() { - zones - .selectAll("g") - .data(pack.zones) - .enter() - .append("g") - .attr("id", d => "zone" + d.i) - .attr("data-description", d => d.name) - .attr("data-type", d => d.type) - .attr("data-cells", d => d.cells.join(",")) - .attr("fill", d => d.color) - .selectAll("polygon") - .data(d => d.cells) - .enter() - .append("polygon") - .attr("points", d => getPackPolygon(d)) - .attr("id", function (d) { - return this.parentNode.id + "_" + d; - }); - } - TIME && console.timeEnd("generateZones"); }; @@ -98,7 +74,7 @@ window.Zones = (function () { Intervention: 1 }); const name = getAdjective(invader.name) + " " + invasion; - pack.zones.push({name, type: "Invasion", cells: cellsArray, color: "url(#hatch1)"}); + pack.zones.push({i: pack.zones.length, name, type: "Invasion", cells: cellsArray, color: "url(#hatch1)"}); } function addRebels(usedCells) { @@ -145,7 +121,7 @@ window.Zones = (function () { }); const name = getAdjective(states[neib].name) + " " + rebels; - pack.zones.push({name, type: "Rebels", cells: cellsArray, color: "url(#hatch3)"}); + pack.zones.push({i: pack.zones.length, name, type: "Rebels", cells: cellsArray, color: "url(#hatch3)"}); } function addProselytism(usedCells) { @@ -183,7 +159,7 @@ window.Zones = (function () { } const name = getAdjective(organized.name.split(" ")[0]) + " Proselytism"; - pack.zones.push({name, type: "Proselytism", cells: cellsArray, color: "url(#hatch6)"}); + pack.zones.push({i: pack.zones.length, name, type: "Proselytism", cells: cellsArray, color: "url(#hatch6)"}); } function addCrusade(usedCells) { @@ -191,12 +167,18 @@ window.Zones = (function () { if (!heresy) return; const cells = pack.cells; - const cellsArray = cells.i.filter(i => !usedCells[i] && cells.religion[i] === heresy.i); - if (!cellsArray.length) return; - cellsArray.forEach(i => (usedCells[i] = 1)); + const crusadeCells = cells.i.filter(i => !usedCells[i] && cells.religion[i] === heresy.i); + if (!crusadeCells.length) return; + crusadeCells.forEach(i => (usedCells[i] = 1)); const name = getAdjective(heresy.name.split(" ")[0]) + " Crusade"; - pack.zones.push({name, type: "Crusade", cells: cellsArray, color: "url(#hatch6)"}); + pack.zones.push({ + i: pack.zones.length, + name, + type: "Crusade", + cells: Array.from(crusadeCells), + color: "url(#hatch6)" + }); } function addDisease(usedCells) { @@ -276,8 +258,9 @@ window.Zones = (function () { Dropsy: 1, Leprosy: 2 }); + const name = rw({[color()]: 4, [animal()]: 2, [adjective()]: 1}) + " " + type; - pack.zones.push({name, type: "Disease", cells: cellsArray, color: "url(#hatch12)"}); + pack.zones.push({i: pack.zones.length, name, type: "Disease", cells: cellsArray, color: "url(#hatch12)"}); } function addDisaster(usedCells) { @@ -310,7 +293,7 @@ window.Zones = (function () { const type = rw({Famine: 5, Dearth: 1, Drought: 3, Earthquake: 3, Tornadoes: 1, Wildfires: 1}); const name = getAdjective(burg.name) + " " + type; - pack.zones.push({name, type: "Disaster", cells: cellsArray, color: "url(#hatch5)"}); + pack.zones.push({i: pack.zones.length, name, type: "Disaster", cells: cellsArray, color: "url(#hatch5)"}); } function addEruption(usedCells) { @@ -342,7 +325,7 @@ window.Zones = (function () { }); } - pack.zones.push({name, type: "Disaster", cells: cellsArray, color: "url(#hatch7)"}); + pack.zones.push({i: pack.zones.length, name, type: "Disaster", cells: cellsArray, color: "url(#hatch7)"}); } function addAvalanche(usedCells) { @@ -368,7 +351,7 @@ window.Zones = (function () { const proper = getAdjective(Names.getCultureShort(cells.culture[cell])); const name = proper + " Avalanche"; - pack.zones.push({name, type: "Disaster", cells: cellsArray, color: "url(#hatch5)"}); + pack.zones.push({i: pack.zones.length, name, type: "Disaster", cells: cellsArray, color: "url(#hatch5)"}); } function addFault(usedCells) { @@ -394,7 +377,7 @@ window.Zones = (function () { const proper = getAdjective(Names.getCultureShort(cells.culture[cell])); const name = proper + " Fault"; - pack.zones.push({name, type: "Disaster", cells: cellsArray, color: "url(#hatch2)"}); + pack.zones.push({i: pack.zones.length, name, type: "Disaster", cells: cellsArray, color: "url(#hatch2)"}); } function addFlood(usedCells) { @@ -428,7 +411,7 @@ window.Zones = (function () { } const name = getAdjective(pack.burgs[cells.burg[cell]].name) + " Flood"; - pack.zones.push({name, type: "Disaster", cells: cellsArray, color: "url(#hatch13)"}); + pack.zones.push({i: pack.zones.length, name, type: "Disaster", cells: cellsArray, color: "url(#hatch13)"}); } function addTsunami(usedCells) { @@ -459,7 +442,7 @@ window.Zones = (function () { const proper = getAdjective(Names.getCultureShort(cells.culture[cell])); const name = proper + " Tsunami"; - pack.zones.push({name, type: "Disaster", cells: cellsArray, color: "url(#hatch13)"}); + pack.zones.push({i: pack.zones.length, name, type: "Disaster", cells: cellsArray, color: "url(#hatch13)"}); } return {generate};