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

zoneTypes dialog

Browse source 
add and delete types, dialog
This commit is contained in:
Ángel Montero Lamas 2022-01-19 18:29:06 +01:00
parent b1f3e5035d
commit 7873f8fb80
3 changed files with 125 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

35
index.html
View file

@ -2914,16 +2914,9 @@
<div id="zonesBodySection" class="table" data-type="absolute"></div>
<div id="zonesFilters">
<span>Type: </span>
<select id="zonesFilterType" data-tip="Only zones of this type appear on the map">
<option selected>All</option>
<option>Invasion</option>
<option>Rebels</option>
<option>Proselytism</option>
<option>Crusade</option>
<option>Disease</option>
<option>Disaster</option>
</select>
<span>Filter by type: </span>
<select id="zonesFilterType" data-tip="Only zones of this type appear on the map"></select>
<button id="zonesFilterTable" data-tip="Click to toggle the filtering of elements on the list" class="icon-eye"></button>
</div>
<div id="zonesFooter" class="totalLine">
@ -2950,10 +2943,30 @@
<button id="zonesRemove" data-tip="Click to toggle the removal mode on brush dragging. Shortcut: ctrl" class="icon-eraser"></button>
</div>
<button id="zonesAdd" data-tip="Add a new zone layer" class="icon-plus"></button>
<button id="zonesAdd" data-tip="Add new zone layers or types" class="icon-plus"></button>
<button id="zonesExport" data-tip="Download zones-related data" class="icon-download"></button>
</div>
</div>
<div id="zonesTypes" class="dialog stable" style="display: none">
<div id="customHeader" class="header">
<div style="left:1.8em" data-tip="Name of this type of zone">Type Name&nbsp;</div>
<div style="left:12em" data-tip="Number of zones of this type" class="hide">Amount&nbsp;</div>
</div>
<div id="zonesTypesBodySection" class="table" data-type="absolute"></div>
<div id="zonesTypesFooter" class="totalLine">
<div data-tip="The amount of zone types" style="margin-left: 5px">Types:&nbsp;<span id="zonesTypesFooterNumber">0</span></div>
</div>
<div id="zonesTypesBottom">
<button id="zonesNewBlank" data-tip="Add a new blank zone layer" class="icon-flag-empty"></button>
<button id="zonesNewRandom" data-tip="Add a new pre-filled random zone layer" class="icon-flag"></button>
<input type="text" id="zonesNewTypeInput" data-tip="Write the name of the type you want to add" maxlength="20" placeholder="Add type"></input>
<input type="button" id="zonesNewTypeButton" data-tip="Click add to save the type" value="Add">
</div>
</div>
<div id="notesEditor" class="dialog stable textual" style="display: none">
<div>

8
main.js
View file

@ -122,6 +122,7 @@ let customization = 0;
let biomesData = applyDefaultBiomesSystem();
let nameBases = Names.getNameBases(); // cultures-related data
const zoneTypes = ["Invasion", "Rebels", "Proselytism", "Crusade", "Disease", "Disaster"];
let color = d3.scaleSequential(d3.interpolateSpectral); // default color scheme
const lineGen = d3.line().curve(d3.curveBasis); // d3 line generator with default curve interpolation
@ -1847,6 +1848,13 @@ function addZones(number = 1) {
TIME && console.timeEnd("addZones");
}
// Update zone types
function updateZoneType(zone, newType) {
if (zone) {
zone.dataset.type = newType;
}
}
// show map stats on generation complete
function showStatistics() {
const template = templateInput.options[templateInput.selectedIndex].text;

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

@ -19,6 +19,7 @@ function editZones() {
// add listeners
document.getElementById("zonesFilterType").addEventListener("change", refreshZonesEditor);
document.getElementById("zonesFilterTable").addEventListener("click", toggleFilterTable);
document.getElementById("zonesEditorRefresh").addEventListener("click", refreshZonesEditor);
document.getElementById("zonesEditStyle").addEventListener("click", () => editStyle("zones"));
document.getElementById("zonesLegend").addEventListener("click", toggleLegend);
@ -26,7 +27,11 @@ function editZones() {
document.getElementById("zonesManually").addEventListener("click", enterZonesManualAssignent);
document.getElementById("zonesManuallyApply").addEventListener("click", applyZonesManualAssignent);
document.getElementById("zonesManuallyCancel").addEventListener("click", cancelZonesManualAssignent);
document.getElementById("zonesAdd").addEventListener("click", addZonesLayer);
document.getElementById("zonesAdd").addEventListener("click", addZonesDialog);
document.getElementById("typeTrash").addEventListener("click", removeType);
document.getElementById("zonesNewBlank").addEventListener("click", addZonesLayer);
document.getElementById("zonesNewRandom").addEventListener("click", addZonesLayer);
document.getElementById("zonesNewTypeButton").addEventListener("click", addZonesType);
document.getElementById("zonesExport").addEventListener("click", downloadZonesData);
document.getElementById("zonesRemove").addEventListener("click", toggleEraseMode);
@ -68,10 +73,10 @@ function editZones() {
zonesEditorAddLines();
}
function updateSVG() {
function updateSVG() {
const value = document.getElementById("zonesFilterType").value;
zones.selectAll("g").each(function () {
zones.selectAll("g").each(function () {
if (value == "All" || this.dataset.type == value) {
this.style.display = "block";
} else {
@ -80,11 +85,30 @@ zones.selectAll("g").each(function () {
});
}
function getZoneTypesList(zoneId, currentType) {
let res = `<select id="zoneTypeZoneId${zoneId}" class="zoneTypeList" onchange="updateZoneType(${zoneId}, this.options[this.selectedIndex].value)">`;
zoneTypes.forEach(function(z, i) {
res += `<option ${z === currentType ? "selected" : ""} value=${z}>${z}</option>`;
});
res += '</select>';
return res;
}
// add line for each zone
function zonesEditorAddLines() {
const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
let lines = "";
const selectedType = zonesFilterType.value || "All";
zonesFilterType.options.length=0;
zonesFilterType.options.add(new Option("All", "All", false, selectedType=="All"));
zoneTypes.forEach(function(z, i) {
zonesFilterType.options.add(new Option(z, z, false, selectedType==z));
});
let lines = "";
zones.selectAll("g").each(function () {
const c = this.dataset.cells ? this.dataset.cells.split(",").map(c => +c) : [];
const description = this.dataset.description;
@ -93,8 +117,9 @@ zones.selectAll("g").each(function () {
const rural = d3.sum(c.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;
const population = rural + urban;
const zoneType = this.dataset.type;
const zoneTypeList = getZoneTypesList(this.id, this.dataset.type);
const populationTip = `Total population: ${si(population)}; Rural population: ${si(rural)}; Urban population: ${si(urban)}. Click to change`;
const zonetype = this.dataset.type;
const inactive = this.style.display === "none";
const focused = defs.select("#fog #focus" + this.id).size();
@ -107,7 +132,7 @@ zones.selectAll("g").each(function () {
<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>
<input data-tip="Zone type. Click and type to change" value="${zonetype}" autocorrect="off" spellcheck="false">
${zoneTypeList}
<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"}"></span>
<span data-tip="Toggle zone visibility" class="icon-eye ${inactive ? " inactive" : ""} hide ${c.length ? "" : " placeholder"}"></span>
@ -360,6 +385,32 @@ zones.selectAll("g").each(function () {
zonesEditorAddLines();
}
}
function toggleFilterTable() {
this.classList.toggle("pressed");
const selectedType = zonesFilterType.value || "All";
//zoneTypes.forEach(function(z, i) {
//});
// if zone != selected type , hide the zones not selected from the list.
//zonesFilterType.options.length=0;
const FilterTable = document.getElementById("zonesFilterTable").classList.contains("pressed");
if (FilterTable) {
// hide the elements from the list
selection.forEach(i => {
const index = zones.id(i);
if (index === -1) return;
zone.select("polygon#" + base + i).remove();
cells.splice(index, 1);
});
} else {
// keep the elements visible
selection.forEach(i => {
if (zones.includes(i)) return;
zone
.attr("id", base + i);
});
}
}
function addZonesLayer() {
const id = getNextId("zone");
@ -483,6 +534,42 @@ zones.selectAll("g").each(function () {
}
}
function zonesTypesAddLines() {
const zoneTypeListBody = document.getElementById("zonesTypesBodySection");
let lines = "";
zoneTypes.forEach(function(z, i) {
lines += `<div class="states"><span class="religionname">${z}</span>`;
if (i > 5) {
lines += '<span id="typeTrash" data-tip="Remove zone type" class="icon-trash-empty"></span>';
}
lines += '</div>';
});
zoneTypeListBody.innerHTML = lines;
zonesTypesFooterNumber.innerHTML = zoneTypes.length;
}
function addZonesDialog() {
//const body = document.getElementById("zonesTypesBodySection");
$("#zonesTypes").dialog({
title: "Add zones and types",
width: fitContent(),
position: {my: "center", at: "center", of: "svg"},
});
zonesTypesAddLines();
}
function addZonesType() {
let zoneType = zonesNewTypeInput.value;
if (!zoneTypes.includes(zoneType)) { zoneTypes.push(zoneType); }
zonesTypesAddLines();
//body.insertAdjacentHTML("beforeend", line);
zonesTypesFooterNumber.innerHTML = zoneTypes.length;
}
function removeType () {
zoneType = this.dataset.type
}
function zoneRemove(zone) {
zones.select("#" + zone).remove();
unfog("focusZone" + zone);