mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-19 10:31:24 +01:00
feat: zones editor - update to work with pack data
This commit is contained in:
Azgaar
parent
01d1a108b5
commit
58f8a59a26
6 changed files with 67 additions and 76 deletions
2
main.js
2
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");
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 `<path id="zone${i}" data-id="${i}" d="${cellsPath}" fill="${color}" />`;
|
||||
}
|
||||
|
||||
function toggleEmblems(event) {
|
||||
if (!layerIsOn("toggleEmblems")) {
|
||||
turnButtonOn("toggleEmblems");
|
||||
|
|
|
|||
|
|
@ -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 `<div class="states" data-id="${zoneEl.id}" data-fill="${fill}" data-description="${description}"
|
||||
data-type="${type}" data-cells=${c.length} data-area=${area} data-population=${population}>
|
||||
<fill-box fill="${fill}"></fill-box>
|
||||
<input data-tip="Zone description. Click and type to change" style="width: 11em" class="zoneName" value="${description}" autocorrect="off" spellcheck="false">
|
||||
return `<div class="states" data-id="zone${i}" data-fill="${color}" data-description="${name}"
|
||||
data-type="${type}" data-cells=${cells.length} data-area=${area} data-population=${population}>
|
||||
<fill-box fill="${color}"></fill-box>
|
||||
<input data-tip="Zone description. Click and type to change" style="width: 11em" class="zoneName" value="${name}" autocorrect="off" spellcheck="false">
|
||||
<input data-tip="Zone type. Click and type to change" class="zoneType" value="${type}">
|
||||
<span data-tip="Cells count" class="icon-check-empty hide"></span>
|
||||
<div data-tip="Cells count" class="stateCells hide">${c.length}</div>
|
||||
<div data-tip="Cells count" class="stateCells hide">${cells.length}</div>
|
||||
<span data-tip="Zone area" style="padding-right:4px" class="icon-map-o hide"></span>
|
||||
<div data-tip="Zone area" class="biomeArea hide">${si(area) + unit}</div>
|
||||
<span data-tip="${populationTip}" class="icon-male hide"></span>
|
||||
<div data-tip="${populationTip}" class="culturePopulation hide">${si(population)}</div>
|
||||
<span data-tip="Drag to raise or lower the zone" class="icon-resize-vertical hide"></span>
|
||||
<span data-tip="Toggle zone focus" class="icon-pin ${focused ? "" : " inactive"} hide ${
|
||||
c.length ? "" : " placeholder"
|
||||
cells.length ? "" : " placeholder"
|
||||
}"></span>
|
||||
<span data-tip="Toggle zone visibility" class="icon-eye ${inactive ? " inactive" : ""} hide ${
|
||||
c.length ? "" : " placeholder"
|
||||
<span data-tip="Toggle zone visibility" class="icon-eye ${hidden ? " inactive" : ""} hide ${
|
||||
cells.length ? "" : " placeholder"
|
||||
}"></span>
|
||||
<span data-tip="Remove zone" class="icon-trash-empty hide"></span>
|
||||
</div>`;
|
||||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue