backups/Fantasy-Map-Generator
1
0
Fork 0
mirror of https://github.com/Azgaar/Fantasy-Map-Generator.git synced 2025-12-19 10:31:24 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: zones editor - update to work with pack data

Browse source
This commit is contained in:
Azgaar 2024-08-27 11:29:12 +02:00
parent 01d1a108b5
commit 58f8a59a26
6 changed files with 67 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

5
modules/dynamic/auto-update.js
View file

@ -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");
}
}

9
modules/ui/general.js
View file

@ -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;
}

19
modules/ui/layers.js
View file

@ -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");

49
modules/ui/zones-editor.js
View file

@ -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) {

59
modules/zones-generator.js
View file

@ -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};