mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-17 09:41:24 +01:00
Merge branch 'master' of https://github.com/Azgaar/Fantasy-Map-Generator into shortcuts
This commit is contained in:
Azgaar
commit
77430e2dbe
19 changed files with 1232 additions and 1148 deletions
1017
modules/dynamic/editors/cultures-editor.js
Normal file
1017
modules/dynamic/editors/cultures-editor.js
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -124,6 +124,8 @@ function insertEditorHtml() {
|
|||
}
|
||||
|
||||
function addListeners() {
|
||||
applySortingByHeader("statesHeader");
|
||||
|
||||
byId("statesEditorRefresh").on("click", refreshStatesEditor);
|
||||
byId("statesEditStyle").on("click", () => editStyle("regions"));
|
||||
byId("statesLegend").on("click", toggleLegend);
|
||||
|
|
@ -183,7 +185,7 @@ function refreshStatesEditor() {
|
|||
|
||||
// add line for each state
|
||||
function statesEditorAddLines() {
|
||||
const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
|
||||
const unit = getAreaUnit();
|
||||
const hidden = byId("statesRegenerateButtons").style.display === "block" ? "" : "hidden"; // toggle regenerate columns
|
||||
let lines = "";
|
||||
let totalArea = 0;
|
||||
|
|
@ -192,7 +194,7 @@ function statesEditorAddLines() {
|
|||
|
||||
for (const s of pack.states) {
|
||||
if (s.removed) continue;
|
||||
const area = s.area * distanceScaleInput.value ** 2;
|
||||
const area = getArea(s.area);
|
||||
const rural = s.rural * populationRate;
|
||||
const urban = s.urban * populationRate * urbanization;
|
||||
const population = rn(rural + urban);
|
||||
|
|
@ -229,7 +231,7 @@ function statesEditorAddLines() {
|
|||
<span data-tip="Burgs count" class="icon-dot-circled hide" style="padding-right: 1px"></span>
|
||||
<div data-tip="Burgs count" class="stateBurgs hide">${s.burgs}</div>
|
||||
<span data-tip="Neutral lands area" style="padding-right: 4px" class="icon-map-o hide"></span>
|
||||
<div data-tip="Neutral lands area" class="stateArea hide" style="width: 6em">${si(area) + unit}</div>
|
||||
<div data-tip="Neutral lands area" class="stateArea hide" style="width: 6em">${si(area)} ${unit}</div>
|
||||
<span data-tip="${populationTip}" class="icon-male hide"></span>
|
||||
<div data-tip="${populationTip}" class="statePopulation pointer hide" style="width: 5em">${si(population)}</div>
|
||||
<select class="cultureType ${hidden} placeholder show hide">${getTypeOptions(0)}</select>
|
||||
|
|
@ -268,7 +270,7 @@ function statesEditorAddLines() {
|
|||
<span data-tip="Burgs count" style="padding-right: 1px" class="icon-dot-circled hide"></span>
|
||||
<div data-tip="Burgs count" class="stateBurgs hide">${s.burgs}</div>
|
||||
<span data-tip="State area" style="padding-right: 4px" class="icon-map-o hide"></span>
|
||||
<div data-tip="State area" class="stateArea hide" style="width: 6em">${si(area) + unit}</div>
|
||||
<div data-tip="State area" class="stateArea hide" style="width: 6em">${si(area)} ${unit}</div>
|
||||
<span data-tip="${populationTip}" class="icon-male hide"></span>
|
||||
<div data-tip="${populationTip}" class="statePopulation pointer hide" style="width: 5em">${si(population)}</div>
|
||||
<select data-tip="State type. Defines growth model. Click to change" class="cultureType ${hidden} show hide">${getTypeOptions(s.type)}</select>
|
||||
|
|
@ -774,8 +776,7 @@ function showStatesChart() {
|
|||
d3.select(ev.target).select("circle").classed("selected", 1);
|
||||
const state = d.data.fullName;
|
||||
|
||||
const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
|
||||
const area = d.data.area * distanceScaleInput.value ** 2 + unit;
|
||||
const area = getArea(d.data.area) + " " + getAreaUnit();
|
||||
const rural = rn(d.data.rural * populationRate);
|
||||
const urban = rn(d.data.urban * populationRate * urbanization);
|
||||
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@ window.Cloud = (function () {
|
|||
},
|
||||
|
||||
async connect(token) {
|
||||
await import("https://unpkg.com/dropbox@10.8.0/dist/Dropbox-sdk.min.js");
|
||||
await import("../../libs/dropbox-sdk.min.js");
|
||||
const auth = new Dropbox.DropboxAuth({clientId: this.clientId});
|
||||
auth.setAccessToken(token);
|
||||
this.api = new Dropbox.Dropbox({auth});
|
||||
|
|
|
|||
|
|
@ -139,7 +139,7 @@ async function saveTiles() {
|
|||
|
||||
// parse map svg to object url
|
||||
async function getMapURL(type, options = {}) {
|
||||
const {debug = false, globe = false, noLabels = false, noWater = false, fullMap = false} = options;
|
||||
const {debug = false, globe = false, noLabels = false, noWater = false, noScaleBar = false, noIce = false, fullMap = false} = options;
|
||||
|
||||
if (fullMap) drawScaleBar(1);
|
||||
|
||||
|
|
@ -164,6 +164,8 @@ async function getMapURL(type, options = {}) {
|
|||
clone.select("#oceanBase").attr("opacity", 0);
|
||||
clone.select("#oceanPattern").attr("opacity", 0);
|
||||
}
|
||||
if (noScaleBar) clone.select("#scaleBar")?.remove();
|
||||
if (noIce) clone.select("#ice")?.remove();
|
||||
if (fullMap) {
|
||||
// reset transform to show the whole map
|
||||
clone.attr("width", graphWidth).attr("height", graphHeight);
|
||||
|
|
|
|||
|
|
@ -76,7 +76,7 @@ function editBiomes() {
|
|||
}
|
||||
|
||||
function biomesEditorAddLines() {
|
||||
const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
|
||||
const unit = " " + getAreaUnit();
|
||||
const b = biomesData;
|
||||
let lines = "",
|
||||
totalArea = 0,
|
||||
|
|
@ -84,7 +84,7 @@ function editBiomes() {
|
|||
|
||||
for (const i of b.i) {
|
||||
if (!i || biomesData.name[i] === "removed") continue; // ignore water and removed biomes
|
||||
const area = b.area[i] * distanceScaleInput.value ** 2;
|
||||
const area = getArea(b.area[i]);
|
||||
const rural = b.rural[i] * populationRate;
|
||||
const urban = b.urban[i] * populationRate * urbanization;
|
||||
const population = rn(rural + urban);
|
||||
|
|
@ -281,7 +281,7 @@ function editBiomes() {
|
|||
b.cells.push(0);
|
||||
b.area.push(0);
|
||||
|
||||
const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
|
||||
const unit = getAreaUnit();
|
||||
const line = `<div class="states biomes" data-id="${i}" data-name="${b.name[i]}" data-habitability=${b.habitability[i]} data-cells=0 data-area=0 data-population=0 data-color=${b.color[i]}>
|
||||
<fill-box fill="${b.color[i]}"></fill-box>
|
||||
<input data-tip="Biome name. Click and type to change" class="biomeName" value="${b.name[i]}" autocorrect="off" spellcheck="false">
|
||||
|
|
|
|||
|
|
@ -57,9 +57,8 @@ function editCoastline(node = d3.event.target) {
|
|||
.call(d3.drag().on("drag", dragVertex))
|
||||
.on("mousemove", () => tip("Drag to move the vertex, please use for fine-tuning only. Edit heightmap to change actual cell heights"));
|
||||
|
||||
const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
|
||||
const area = pack.features[f].area;
|
||||
coastlineArea.innerHTML = si(area * distanceScaleInput.value ** 2) + unit;
|
||||
coastlineArea.innerHTML = si(getArea(area)) + " " + getAreaUnit();
|
||||
}
|
||||
|
||||
function dragVertex() {
|
||||
|
|
@ -89,9 +88,8 @@ function editCoastline(node = d3.event.target) {
|
|||
defs.select("mask#land > path#land_" + f).attr("d", d); // update land mask
|
||||
defs.select("mask#water > path#water_" + f).attr("d", d); // update water mask
|
||||
|
||||
const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
|
||||
const area = Math.abs(d3.polygonArea(points));
|
||||
coastlineArea.innerHTML = si(area * distanceScaleInput.value ** 2) + unit;
|
||||
coastlineArea.innerHTML = si(getArea(area)) + " " + getAreaUnit();
|
||||
}
|
||||
|
||||
function showGroupSection() {
|
||||
|
|
|
|||
|
|
@ -1,979 +0,0 @@
|
|||
"use strict";
|
||||
function editCultures() {
|
||||
const cultureTypes = ["Generic", "River", "Lake", "Naval", "Nomadic", "Hunting", "Highland"];
|
||||
if (customization) return;
|
||||
closeDialogs("#culturesEditor, .stable");
|
||||
if (!layerIsOn("toggleCultures")) toggleCultures();
|
||||
if (layerIsOn("toggleStates")) toggleStates();
|
||||
if (layerIsOn("toggleBiomes")) toggleBiomes();
|
||||
if (layerIsOn("toggleReligions")) toggleReligions();
|
||||
if (layerIsOn("toggleProvinces")) toggleProvinces();
|
||||
|
||||
const body = document.getElementById("culturesBody");
|
||||
drawCultureCenters();
|
||||
refreshCulturesEditor();
|
||||
|
||||
if (modules.editCultures) return;
|
||||
modules.editCultures = true;
|
||||
|
||||
$("#culturesEditor").dialog({
|
||||
title: "Cultures Editor",
|
||||
resizable: false,
|
||||
width: fitContent(),
|
||||
close: closeCulturesEditor,
|
||||
position: {my: "right top", at: "right-10 top+10", of: "svg"}
|
||||
});
|
||||
body.focus();
|
||||
|
||||
// add listeners
|
||||
document.getElementById("culturesEditorRefresh").addEventListener("click", refreshCulturesEditor);
|
||||
document.getElementById("culturesEditStyle").addEventListener("click", () => editStyle("cults"));
|
||||
document.getElementById("culturesLegend").addEventListener("click", toggleLegend);
|
||||
document.getElementById("culturesPercentage").addEventListener("click", togglePercentageMode);
|
||||
document.getElementById("culturesHeirarchy").addEventListener("click", showHierarchy);
|
||||
document.getElementById("culturesRecalculate").addEventListener("click", () => recalculateCultures(true));
|
||||
document.getElementById("culturesManually").addEventListener("click", enterCultureManualAssignent);
|
||||
document.getElementById("culturesManuallyApply").addEventListener("click", applyCultureManualAssignent);
|
||||
document.getElementById("culturesManuallyCancel").addEventListener("click", () => exitCulturesManualAssignment());
|
||||
document.getElementById("culturesEditNamesBase").addEventListener("click", editNamesbase);
|
||||
document.getElementById("culturesAdd").addEventListener("click", enterAddCulturesMode);
|
||||
document.getElementById("culturesExport").addEventListener("click", downloadCulturesData);
|
||||
document.getElementById("culturesImport").addEventListener("click", () => document.getElementById("culturesCSVToLoad").click());
|
||||
document.getElementById("culturesCSVToLoad").addEventListener("change", uploadCulturesData);
|
||||
|
||||
function refreshCulturesEditor() {
|
||||
culturesCollectStatistics();
|
||||
culturesEditorAddLines();
|
||||
drawCultureCenters();
|
||||
}
|
||||
|
||||
function culturesCollectStatistics() {
|
||||
const cells = pack.cells,
|
||||
cultures = pack.cultures;
|
||||
cultures.forEach(c => (c.cells = c.area = c.rural = c.urban = 0));
|
||||
|
||||
for (const i of cells.i) {
|
||||
if (cells.h[i] < 20) continue;
|
||||
const c = cells.culture[i];
|
||||
cultures[c].cells += 1;
|
||||
cultures[c].area += cells.area[i];
|
||||
cultures[c].rural += cells.pop[i];
|
||||
if (cells.burg[i]) cultures[c].urban += pack.burgs[cells.burg[i]].population;
|
||||
}
|
||||
}
|
||||
|
||||
// add line for each culture
|
||||
function culturesEditorAddLines() {
|
||||
const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
|
||||
let lines = "";
|
||||
let totalArea = 0;
|
||||
let totalPopulation = 0;
|
||||
|
||||
const emblemShapeGroup = document.getElementById("emblemShape").selectedOptions[0].parentNode.label;
|
||||
const selectShape = emblemShapeGroup === "Diversiform";
|
||||
|
||||
for (const c of pack.cultures) {
|
||||
if (c.removed) continue;
|
||||
const area = c.area * distanceScaleInput.value ** 2;
|
||||
const rural = c.rural * populationRate;
|
||||
const urban = c.urban * populationRate * urbanization;
|
||||
const population = rn(rural + urban);
|
||||
const populationTip = `Total population: ${si(population)}; Rural population: ${si(rural)}; Urban population: ${si(urban)}. Click to edit`;
|
||||
totalArea += area;
|
||||
totalPopulation += population;
|
||||
|
||||
if (!c.i) {
|
||||
// Uncultured (neutral) line
|
||||
lines += /* html */ `<div
|
||||
class="states"
|
||||
data-id=${c.i}
|
||||
data-name="${c.name}"
|
||||
data-color=""
|
||||
data-cells=${c.cells}
|
||||
data-area=${area}
|
||||
data-population=${population}
|
||||
data-base=${c.base}
|
||||
data-type=""
|
||||
data-expansionism=""
|
||||
data-emblems="${c.shield}"
|
||||
>
|
||||
<svg width="9" height="9" class="placeholder"></svg>
|
||||
<input data-tip="Neutral culture name. Click and type to change" class="cultureName italic" value="${c.name}" autocorrect="off" spellcheck="false" />
|
||||
<span class="icon-cw placeholder"></span>
|
||||
<span data-tip="Cells count" class="icon-check-empty hide"></span>
|
||||
<div data-tip="Cells count" class="stateCells hide">${c.cells}</div>
|
||||
<span class="icon-resize-full placeholder hide"></span>
|
||||
<input class="statePower placeholder hide" type="number" />
|
||||
<select class="cultureType placeholder">
|
||||
${getTypeOptions(c.type)}
|
||||
</select>
|
||||
<span data-tip="Culture area" style="padding-right: 4px" class="icon-map-o hide"></span>
|
||||
<div data-tip="Culture 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="Click to re-generate names for burgs with this culture assigned" class="icon-arrows-cw hide"></span>
|
||||
<select data-tip="Culture namesbase. Click to change. Click on arrows to re-generate names" class="cultureBase">
|
||||
${getBaseOptions(c.base)}
|
||||
</select>
|
||||
${
|
||||
selectShape
|
||||
? `<select data-tip="Emblem shape associated with culture. Click to change" class="cultureShape hide">${getShapeOptions(c.shield)}</select>`
|
||||
: ""
|
||||
}
|
||||
</div>`;
|
||||
continue;
|
||||
}
|
||||
|
||||
lines += /* html */ `<div
|
||||
class="states cultures"
|
||||
data-id=${c.i}
|
||||
data-name="${c.name}"
|
||||
data-color="${c.color}"
|
||||
data-cells=${c.cells}
|
||||
data-area=${area}
|
||||
data-population=${population}
|
||||
data-base=${c.base}
|
||||
data-type=${c.type}
|
||||
data-expansionism=${c.expansionism}
|
||||
data-emblems="${c.shield}"
|
||||
>
|
||||
<fill-box fill="${c.color}"></fill-box>
|
||||
<input data-tip="Culture name. Click and type to change" class="cultureName" value="${c.name}" autocorrect="off" spellcheck="false" />
|
||||
<span data-tip="Regenerate culture name" class="icon-cw hiddenIcon" style="visibility: hidden"></span>
|
||||
<span data-tip="Cells count" class="icon-check-empty hide"></span>
|
||||
<div data-tip="Cells count" class="stateCells hide">${c.cells}</div>
|
||||
<span data-tip="Culture expansionism. Defines competitive size" class="icon-resize-full hide"></span>
|
||||
<input
|
||||
data-tip="Culture expansionism. Defines competitive size. Click to change, then click Recalculate to apply change"
|
||||
class="statePower hide"
|
||||
type="number"
|
||||
min="0"
|
||||
max="99"
|
||||
step=".1"
|
||||
value=${c.expansionism}
|
||||
/>
|
||||
<select data-tip="Culture type. Defines growth model. Click to change" class="cultureType">
|
||||
${getTypeOptions(c.type)}
|
||||
</select>
|
||||
<span data-tip="Culture area" style="padding-right: 4px" class="icon-map-o hide"></span>
|
||||
<div data-tip="Culture 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="Click to re-generate names for burgs with this culture assigned" class="icon-arrows-cw hide"></span>
|
||||
<select data-tip="Culture namesbase. Click to change. Click on arrows to re-generate names" class="cultureBase">
|
||||
${getBaseOptions(c.base)}
|
||||
</select>
|
||||
${
|
||||
selectShape
|
||||
? `<select data-tip="Emblem shape associated with culture. Click to change" class="cultureShape hide">${getShapeOptions(c.shield)}</select>`
|
||||
: ""
|
||||
}
|
||||
<span data-tip="Remove culture" class="icon-trash-empty hide"></span>
|
||||
</div>`;
|
||||
}
|
||||
body.innerHTML = lines;
|
||||
|
||||
// update footer
|
||||
culturesFooterCultures.innerHTML = pack.cultures.filter(c => c.i && !c.removed).length;
|
||||
culturesFooterCells.innerHTML = pack.cells.h.filter(h => h >= 20).length;
|
||||
culturesFooterArea.innerHTML = si(totalArea) + unit;
|
||||
culturesFooterPopulation.innerHTML = si(totalPopulation);
|
||||
culturesFooterArea.dataset.area = totalArea;
|
||||
culturesFooterPopulation.dataset.population = totalPopulation;
|
||||
|
||||
// add listeners
|
||||
body.querySelectorAll("div.cultures").forEach(el => el.addEventListener("mouseenter", ev => cultureHighlightOn(ev)));
|
||||
body.querySelectorAll("div.cultures").forEach(el => el.addEventListener("mouseleave", ev => cultureHighlightOff(ev)));
|
||||
body.querySelectorAll("div.states").forEach(el => el.addEventListener("click", selectCultureOnLineClick));
|
||||
body.querySelectorAll("fill-box").forEach(el => el.addEventListener("click", cultureChangeColor));
|
||||
body.querySelectorAll("div > input.cultureName").forEach(el => el.addEventListener("input", cultureChangeName));
|
||||
body.querySelectorAll("div > span.icon-cw").forEach(el => el.addEventListener("click", cultureRegenerateName));
|
||||
body.querySelectorAll("div > input.statePower").forEach(el => el.addEventListener("input", cultureChangeExpansionism));
|
||||
body.querySelectorAll("div > select.cultureType").forEach(el => el.addEventListener("change", cultureChangeType));
|
||||
body.querySelectorAll("div > select.cultureBase").forEach(el => el.addEventListener("change", cultureChangeBase));
|
||||
body.querySelectorAll("div > select.cultureShape").forEach(el => el.addEventListener("change", cultureChangeShape));
|
||||
body.querySelectorAll("div > div.culturePopulation").forEach(el => el.addEventListener("click", changePopulation));
|
||||
body.querySelectorAll("div > span.icon-arrows-cw").forEach(el => el.addEventListener("click", cultureRegenerateBurgs));
|
||||
body.querySelectorAll("div > span.icon-trash-empty").forEach(el => el.addEventListener("click", cultureRemove));
|
||||
|
||||
culturesHeader.querySelector("div[data-sortby='emblems']").style.display = selectShape ? "inline-block" : "none";
|
||||
|
||||
if (body.dataset.type === "percentage") {
|
||||
body.dataset.type = "absolute";
|
||||
togglePercentageMode();
|
||||
}
|
||||
applySorting(culturesHeader);
|
||||
$("#culturesEditor").dialog({width: fitContent()});
|
||||
}
|
||||
|
||||
function getTypeOptions(type) {
|
||||
let options = "";
|
||||
cultureTypes.forEach(t => (options += `<option ${type === t ? "selected" : ""} value="${t}">${t}</option>`));
|
||||
return options;
|
||||
}
|
||||
|
||||
function getBaseOptions(base) {
|
||||
let options = "";
|
||||
nameBases.forEach((n, i) => (options += `<option ${base === i ? "selected" : ""} value="${i}">${n.name}</option>`));
|
||||
return options;
|
||||
}
|
||||
|
||||
function getShapeOptions(selected) {
|
||||
const shapes = Object.keys(COA.shields.types)
|
||||
.map(type => Object.keys(COA.shields[type]))
|
||||
.flat();
|
||||
return shapes.map(shape => `<option ${shape === selected ? "selected" : ""} value="${shape}">${capitalize(shape)}</option>`);
|
||||
}
|
||||
|
||||
function cultureHighlightOn(event) {
|
||||
const culture = +event.target.dataset.id;
|
||||
const info = document.getElementById("cultureInfo");
|
||||
if (info) {
|
||||
d3.select("#hierarchy")
|
||||
.select("g[data-id='" + culture + "'] > path")
|
||||
.classed("selected", 1);
|
||||
const c = pack.cultures[culture];
|
||||
const rural = c.rural * populationRate;
|
||||
const urban = c.urban * populationRate * urbanization;
|
||||
const population = rural + urban > 0 ? si(rn(rural + urban)) + " people" : "Extinct";
|
||||
info.innerHTML = /* html */ `${c.name} culture. ${c.type}. ${population}`;
|
||||
tip("Drag to change parent, drag to itself to move to the top level. Hold CTRL and click to change abbreviation");
|
||||
}
|
||||
|
||||
if (!layerIsOn("toggleCultures")) return;
|
||||
if (customization) return;
|
||||
const animate = d3.transition().duration(2000).ease(d3.easeSinIn);
|
||||
cults
|
||||
.select("#culture" + culture)
|
||||
.raise()
|
||||
.transition(animate)
|
||||
.attr("stroke-width", 2.5)
|
||||
.attr("stroke", "#d0240f");
|
||||
debug
|
||||
.select("#cultureCenter" + culture)
|
||||
.raise()
|
||||
.transition(animate)
|
||||
.attr("r", 8)
|
||||
.attr("stroke", "#d0240f");
|
||||
}
|
||||
|
||||
function cultureHighlightOff(event) {
|
||||
const culture = +event.target.dataset.id;
|
||||
const info = document.getElementById("cultureInfo");
|
||||
if (info) {
|
||||
d3.select("#hierarchy")
|
||||
.select("g[data-id='" + culture + "'] > path")
|
||||
.classed("selected", 0);
|
||||
info.innerHTML = "‍";
|
||||
tip("");
|
||||
}
|
||||
|
||||
if (!layerIsOn("toggleCultures")) return;
|
||||
cults
|
||||
.select("#culture" + culture)
|
||||
.transition()
|
||||
.attr("stroke-width", null)
|
||||
.attr("stroke", null);
|
||||
debug
|
||||
.select("#cultureCenter" + culture)
|
||||
.transition()
|
||||
.attr("r", 6)
|
||||
.attr("stroke", null);
|
||||
}
|
||||
|
||||
function cultureChangeColor() {
|
||||
const el = this;
|
||||
const currentFill = el.getAttribute("fill");
|
||||
const culture = +el.parentNode.dataset.id;
|
||||
|
||||
const callback = newFill => {
|
||||
el.fill = newFill;
|
||||
pack.cultures[culture].color = newFill;
|
||||
cults
|
||||
.select("#culture" + culture)
|
||||
.attr("fill", newFill)
|
||||
.attr("stroke", newFill);
|
||||
debug.select("#cultureCenter" + culture).attr("fill", newFill);
|
||||
};
|
||||
|
||||
openPicker(currentFill, callback);
|
||||
}
|
||||
|
||||
function cultureChangeName() {
|
||||
const culture = +this.parentNode.dataset.id;
|
||||
this.parentNode.dataset.name = this.value;
|
||||
pack.cultures[culture].name = this.value;
|
||||
pack.cultures[culture].code = abbreviate(
|
||||
this.value,
|
||||
pack.cultures.map(c => c.code)
|
||||
);
|
||||
}
|
||||
|
||||
function cultureRegenerateName() {
|
||||
const culture = +this.parentNode.dataset.id;
|
||||
const name = Names.getCultureShort(culture);
|
||||
this.parentNode.querySelector("input.cultureName").value = name;
|
||||
pack.cultures[culture].name = name;
|
||||
}
|
||||
|
||||
function cultureChangeExpansionism() {
|
||||
const culture = +this.parentNode.dataset.id;
|
||||
this.parentNode.dataset.expansionism = this.value;
|
||||
pack.cultures[culture].expansionism = +this.value;
|
||||
recalculateCultures();
|
||||
}
|
||||
|
||||
function cultureChangeType() {
|
||||
const culture = +this.parentNode.dataset.id;
|
||||
this.parentNode.dataset.type = this.value;
|
||||
pack.cultures[culture].type = this.value;
|
||||
recalculateCultures();
|
||||
}
|
||||
|
||||
function cultureChangeBase() {
|
||||
const culture = +this.parentNode.dataset.id;
|
||||
const v = +this.value;
|
||||
this.parentNode.dataset.base = pack.cultures[culture].base = v;
|
||||
}
|
||||
|
||||
function cultureChangeShape() {
|
||||
const culture = +this.parentNode.dataset.id;
|
||||
const shape = this.value;
|
||||
this.parentNode.dataset.emblems = pack.cultures[culture].shield = shape;
|
||||
|
||||
const rerenderCOA = (id, coa) => {
|
||||
const coaEl = document.getElementById(id);
|
||||
if (!coaEl) return; // not rendered
|
||||
coaEl.remove();
|
||||
COArenderer.trigger(id, coa);
|
||||
};
|
||||
|
||||
pack.states.forEach(state => {
|
||||
if (state.culture !== culture || !state.i || state.removed || !state.coa || state.coa === "custom") return;
|
||||
if (shape === state.coa.shield) return;
|
||||
state.coa.shield = shape;
|
||||
rerenderCOA("stateCOA" + state.i, state.coa);
|
||||
});
|
||||
|
||||
pack.provinces.forEach(province => {
|
||||
if (pack.cells.culture[province.center] !== culture || !province.i || province.removed || !province.coa || province.coa === "custom") return;
|
||||
if (shape === province.coa.shield) return;
|
||||
province.coa.shield = shape;
|
||||
rerenderCOA("provinceCOA" + province.i, province.coa);
|
||||
});
|
||||
|
||||
pack.burgs.forEach(burg => {
|
||||
if (burg.culture !== culture || !burg.i || burg.removed || !burg.coa || burg.coa === "custom") return;
|
||||
if (shape === burg.coa.shield) return;
|
||||
burg.coa.shield = shape;
|
||||
rerenderCOA("burgCOA" + burg.i, burg.coa);
|
||||
});
|
||||
}
|
||||
|
||||
function changePopulation() {
|
||||
const culture = +this.parentNode.dataset.id;
|
||||
const c = pack.cultures[culture];
|
||||
if (!c.cells) {
|
||||
tip("Culture does not have any cells, cannot change population", false, "error");
|
||||
return;
|
||||
}
|
||||
const rural = rn(c.rural * populationRate);
|
||||
const urban = rn(c.urban * populationRate * urbanization);
|
||||
const total = rural + urban;
|
||||
const l = n => Number(n).toLocaleString();
|
||||
const burgs = pack.burgs.filter(b => !b.removed && b.culture === culture);
|
||||
|
||||
alertMessage.innerHTML = /* html */ ` Rural: <input type="number" min="0" step="1" id="ruralPop" value=${rural} style="width:6em" /> Urban:
|
||||
<input type="number" min="0" step="1" id="urbanPop" value=${urban} style="width:6em" ${burgs.length ? "" : "disabled"} />
|
||||
<p>Total population: ${l(total)} ⇒ <span id="totalPop">${l(total)}</span> (<span id="totalPopPerc">100</span>%)</p>`;
|
||||
|
||||
const update = function () {
|
||||
const totalNew = ruralPop.valueAsNumber + urbanPop.valueAsNumber;
|
||||
if (isNaN(totalNew)) return;
|
||||
totalPop.innerHTML = l(totalNew);
|
||||
totalPopPerc.innerHTML = rn((totalNew / total) * 100);
|
||||
};
|
||||
|
||||
ruralPop.oninput = () => update();
|
||||
urbanPop.oninput = () => update();
|
||||
|
||||
$("#alert").dialog({
|
||||
resizable: false,
|
||||
title: "Change culture population",
|
||||
width: "24em",
|
||||
buttons: {
|
||||
Apply: function () {
|
||||
applyPopulationChange(rural, urban, ruralPop.value, urbanPop.value, culture);
|
||||
$(this).dialog("close");
|
||||
},
|
||||
Cancel: function () {
|
||||
$(this).dialog("close");
|
||||
}
|
||||
},
|
||||
position: {my: "center", at: "center", of: "svg"}
|
||||
});
|
||||
}
|
||||
|
||||
function applyPopulationChange(oldRural, oldUrban, newRural, newUrban, culture) {
|
||||
const ruralChange = newRural / oldRural;
|
||||
if (isFinite(ruralChange) && ruralChange !== 1) {
|
||||
const cells = pack.cells.i.filter(i => pack.cells.culture[i] === culture);
|
||||
cells.forEach(i => (pack.cells.pop[i] *= ruralChange));
|
||||
}
|
||||
if (!isFinite(ruralChange) && +newRural > 0) {
|
||||
const points = newRural / populationRate;
|
||||
const cells = pack.cells.i.filter(i => pack.cells.culture[i] === culture);
|
||||
const pop = rn(points / cells.length);
|
||||
cells.forEach(i => (pack.cells.pop[i] = pop));
|
||||
}
|
||||
|
||||
const burgs = pack.burgs.filter(b => !b.removed && b.culture === culture);
|
||||
const urbanChange = newUrban / oldUrban;
|
||||
if (isFinite(urbanChange) && urbanChange !== 1) {
|
||||
burgs.forEach(b => (b.population = rn(b.population * urbanChange, 4)));
|
||||
}
|
||||
if (!isFinite(urbanChange) && +newUrban > 0) {
|
||||
const points = newUrban / populationRate / urbanization;
|
||||
const population = rn(points / burgs.length, 4);
|
||||
burgs.forEach(b => (b.population = population));
|
||||
}
|
||||
|
||||
refreshCulturesEditor();
|
||||
}
|
||||
|
||||
function cultureRegenerateBurgs() {
|
||||
if (customization === 4) return;
|
||||
const culture = +this.parentNode.dataset.id;
|
||||
const cBurgs = pack.burgs.filter(b => b.culture === culture && !b.lock);
|
||||
cBurgs.forEach(b => {
|
||||
b.name = Names.getCulture(culture);
|
||||
labels.select("[data-id='" + b.i + "']").text(b.name);
|
||||
});
|
||||
tip(`Names for ${cBurgs.length} burgs are regenerated`, false, "success");
|
||||
}
|
||||
|
||||
function removeCultureModel(culture) {
|
||||
cults.select("#culture" + culture).remove();
|
||||
debug.select("#cultureCenter" + culture).remove();
|
||||
|
||||
pack.burgs.filter(b => b.culture == culture).forEach(b => (b.culture = 0));
|
||||
pack.states.forEach((s, i) => {
|
||||
if (s.culture === culture) s.culture = 0;
|
||||
});
|
||||
pack.cells.culture.forEach((c, i) => {
|
||||
if (c === culture) pack.cells.culture[i] = 0;
|
||||
});
|
||||
pack.cultures[culture].removed = true;
|
||||
|
||||
const origin = pack.cultures[culture].origin;
|
||||
pack.cultures.forEach(c => {
|
||||
if (c.origin === culture) c.origin = origin;
|
||||
});
|
||||
refreshCulturesEditor();
|
||||
}
|
||||
|
||||
function cultureRemove() {
|
||||
if (customization === 4) return;
|
||||
const culture = +this.parentNode.dataset.id;
|
||||
|
||||
alertMessage.innerHTML = "Are you sure you want to remove the culture? <br>This action cannot be reverted";
|
||||
$("#alert").dialog({
|
||||
resizable: false,
|
||||
title: "Remove culture",
|
||||
buttons: {
|
||||
Remove: function () {
|
||||
removeCultureModel(culture);
|
||||
$(this).dialog("close");
|
||||
},
|
||||
Cancel: function () {
|
||||
$(this).dialog("close");
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function drawCultureCenters() {
|
||||
const tooltip = "Drag to move the culture center (ancestral home)";
|
||||
debug.select("#cultureCenters").remove();
|
||||
const cultureCenters = debug.append("g").attr("id", "cultureCenters").attr("stroke-width", 2).attr("stroke", "#444444").style("cursor", "move");
|
||||
|
||||
const data = pack.cultures.filter(c => c.i && !c.removed);
|
||||
cultureCenters
|
||||
.selectAll("circle")
|
||||
.data(data)
|
||||
.enter()
|
||||
.append("circle")
|
||||
.attr("id", d => "cultureCenter" + d.i)
|
||||
.attr("data-id", d => d.i)
|
||||
.attr("r", 6)
|
||||
.attr("fill", d => d.color)
|
||||
.attr("cx", d => pack.cells.p[d.center][0])
|
||||
.attr("cy", d => pack.cells.p[d.center][1])
|
||||
.on("mouseenter", d => {
|
||||
tip(tooltip, true);
|
||||
body.querySelector(`div[data-id='${d.i}']`).classList.add("selected");
|
||||
cultureHighlightOn(event);
|
||||
})
|
||||
.on("mouseleave", d => {
|
||||
tip("", true);
|
||||
body.querySelector(`div[data-id='${d.i}']`).classList.remove("selected");
|
||||
cultureHighlightOff(event);
|
||||
})
|
||||
.call(d3.drag().on("start", cultureCenterDrag));
|
||||
}
|
||||
|
||||
function cultureCenterDrag() {
|
||||
const el = d3.select(this);
|
||||
const c = +this.id.slice(13);
|
||||
d3.event.on("drag", () => {
|
||||
el.attr("cx", d3.event.x).attr("cy", d3.event.y);
|
||||
const cell = findCell(d3.event.x, d3.event.y);
|
||||
if (pack.cells.h[cell] < 20) return; // ignore dragging on water
|
||||
pack.cultures[c].center = cell;
|
||||
recalculateCultures();
|
||||
});
|
||||
}
|
||||
|
||||
function toggleLegend() {
|
||||
if (legend.selectAll("*").size()) {
|
||||
clearLegend();
|
||||
return;
|
||||
} // hide legend
|
||||
const data = pack.cultures
|
||||
.filter(c => c.i && !c.removed && c.cells)
|
||||
.sort((a, b) => b.area - a.area)
|
||||
.map(c => [c.i, c.color, c.name]);
|
||||
drawLegend("Cultures", data);
|
||||
}
|
||||
|
||||
function togglePercentageMode() {
|
||||
if (body.dataset.type === "absolute") {
|
||||
body.dataset.type = "percentage";
|
||||
const totalCells = +culturesFooterCells.innerHTML;
|
||||
const totalArea = +culturesFooterArea.dataset.area;
|
||||
const totalPopulation = +culturesFooterPopulation.dataset.population;
|
||||
|
||||
body.querySelectorAll(":scope > div").forEach(function (el) {
|
||||
el.querySelector(".stateCells").innerHTML = rn((+el.dataset.cells / totalCells) * 100) + "%";
|
||||
el.querySelector(".biomeArea").innerHTML = rn((+el.dataset.area / totalArea) * 100) + "%";
|
||||
el.querySelector(".culturePopulation").innerHTML = rn((+el.dataset.population / totalPopulation) * 100) + "%";
|
||||
});
|
||||
} else {
|
||||
body.dataset.type = "absolute";
|
||||
culturesEditorAddLines();
|
||||
}
|
||||
}
|
||||
|
||||
function showHierarchy() {
|
||||
// build hierarchy tree
|
||||
pack.cultures[0].origin = null;
|
||||
const cultures = pack.cultures.filter(c => !c.removed);
|
||||
if (cultures.length < 3) {
|
||||
tip("Not enough cultures to show hierarchy", false, "error");
|
||||
return;
|
||||
}
|
||||
const root = d3
|
||||
.stratify()
|
||||
.id(d => d.i)
|
||||
.parentId(d => d.origin)(cultures);
|
||||
const treeWidth = root.leaves().length;
|
||||
const treeHeight = root.height;
|
||||
const width = treeWidth * 40,
|
||||
height = treeHeight * 60;
|
||||
|
||||
const margin = {top: 10, right: 10, bottom: -5, left: 10};
|
||||
const w = width - margin.left - margin.right;
|
||||
const h = height + 30 - margin.top - margin.bottom;
|
||||
const treeLayout = d3.tree().size([w, h]);
|
||||
|
||||
// prepare svg
|
||||
alertMessage.innerHTML = "<div id='cultureInfo' class='chartInfo'>‍</div>";
|
||||
const svg = d3
|
||||
.select("#alertMessage")
|
||||
.insert("svg", "#cultureInfo")
|
||||
.attr("id", "hierarchy")
|
||||
.attr("width", width)
|
||||
.attr("height", height)
|
||||
.style("text-anchor", "middle");
|
||||
const graph = svg.append("g").attr("transform", `translate(10, -45)`);
|
||||
const links = graph.append("g").attr("fill", "none").attr("stroke", "#aaaaaa");
|
||||
const nodes = graph.append("g");
|
||||
|
||||
renderTree();
|
||||
function renderTree() {
|
||||
treeLayout(root);
|
||||
links
|
||||
.selectAll("path")
|
||||
.data(root.links())
|
||||
.enter()
|
||||
.append("path")
|
||||
.attr("d", d => {
|
||||
return (
|
||||
"M" +
|
||||
d.source.x +
|
||||
"," +
|
||||
d.source.y +
|
||||
"C" +
|
||||
d.source.x +
|
||||
"," +
|
||||
(d.source.y * 3 + d.target.y) / 4 +
|
||||
" " +
|
||||
d.target.x +
|
||||
"," +
|
||||
(d.source.y * 2 + d.target.y) / 3 +
|
||||
" " +
|
||||
d.target.x +
|
||||
"," +
|
||||
d.target.y
|
||||
);
|
||||
});
|
||||
|
||||
const node = nodes
|
||||
.selectAll("g")
|
||||
.data(root.descendants())
|
||||
.enter()
|
||||
.append("g")
|
||||
.attr("data-id", d => d.data.i)
|
||||
.attr("stroke", "#333333")
|
||||
.attr("transform", d => `translate(${d.x}, ${d.y})`)
|
||||
.on("mouseenter", () => cultureHighlightOn(event))
|
||||
.on("mouseleave", () => cultureHighlightOff(event))
|
||||
.call(d3.drag().on("start", d => dragToReorigin(d)));
|
||||
|
||||
node
|
||||
.append("path")
|
||||
.attr("d", d => {
|
||||
if (!d.data.i) return "M5,0A5,5,0,1,1,-5,0A5,5,0,1,1,5,0";
|
||||
// small circle
|
||||
else if (d.data.type === "Generic") return "M11.3,0A11.3,11.3,0,1,1,-11.3,0A11.3,11.3,0,1,1,11.3,0";
|
||||
// circle
|
||||
else if (d.data.type === "River") return "M0,-14L14,0L0,14L-14,0Z";
|
||||
// diamond
|
||||
else if (d.data.type === "Lake") return "M-6.5,-11.26l13,0l6.5,11.26l-6.5,11.26l-13,0l-6.5,-11.26Z";
|
||||
// hexagon
|
||||
else if (d.data.type === "Naval") return "M-11,-11h22v22h-22Z"; // square
|
||||
if (d.data.type === "Highland") return "M-11,-11l11,2l11,-2l-2,11l2,11l-11,-2l-11,2l2,-11Z"; // concave square
|
||||
if (d.data.type === "Nomadic") return "M-4.97,-12.01 l9.95,0 l7.04,7.04 l0,9.95 l-7.04,7.04 l-9.95,0 l-7.04,-7.04 l0,-9.95Z"; // octagon
|
||||
if (d.data.type === "Hunting") return "M0,-14l14,11l-6,14h-16l-6,-14Z"; // pentagon
|
||||
return "M-11,-11h22v22h-22Z"; // square
|
||||
})
|
||||
.attr("fill", d => (d.data.i ? d.data.color : "#ffffff"))
|
||||
.attr("stroke-dasharray", d => (d.data.cells ? "null" : "1"));
|
||||
|
||||
node
|
||||
.append("text")
|
||||
.attr("dy", ".35em")
|
||||
.text(d => (d.data.i ? d.data.code : ""));
|
||||
}
|
||||
|
||||
$("#alert").dialog({
|
||||
title: "Cultures tree",
|
||||
width: fitContent(),
|
||||
resizable: false,
|
||||
position: {my: "left center", at: "left+10 center", of: "svg"},
|
||||
buttons: {},
|
||||
close: () => {
|
||||
alertMessage.innerHTML = "";
|
||||
}
|
||||
});
|
||||
|
||||
function dragToReorigin(d) {
|
||||
if (isCtrlClick(d3.event.sourceEvent)) {
|
||||
changeCode(d);
|
||||
return;
|
||||
}
|
||||
|
||||
const originLine = graph.append("path").attr("class", "dragLine").attr("d", `M${d.x},${d.y}L${d.x},${d.y}`);
|
||||
|
||||
d3.event.on("drag", () => {
|
||||
originLine.attr("d", `M${d.x},${d.y}L${d3.event.x},${d3.event.y}`);
|
||||
});
|
||||
|
||||
d3.event.on("end", () => {
|
||||
originLine.remove();
|
||||
const selected = graph.select("path.selected");
|
||||
if (!selected.size()) return;
|
||||
const culture = d.data.i;
|
||||
const oldOrigin = d.data.origin;
|
||||
let newOrigin = selected.datum().data.i;
|
||||
if (newOrigin == oldOrigin) return; // already a child of the selected node
|
||||
if (newOrigin == culture) newOrigin = 0; // move to top
|
||||
if (newOrigin && d.descendants().some(node => node.id == newOrigin)) return; // cannot be a child of its own child
|
||||
pack.cultures[culture].origin = d.data.origin = newOrigin; // change data
|
||||
showHierarchy(); // update hierarchy
|
||||
});
|
||||
}
|
||||
|
||||
function changeCode(d) {
|
||||
prompt(`Please provide an abbreviation for culture: ${d.data.name}`, {default: d.data.code}, v => {
|
||||
pack.cultures[d.data.i].code = v;
|
||||
nodes
|
||||
.select("g[data-id='" + d.data.i + "']")
|
||||
.select("text")
|
||||
.text(v);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function recalculateCultures(must) {
|
||||
if (!must && !culturesAutoChange.checked) return;
|
||||
|
||||
pack.cells.culture = new Uint16Array(pack.cells.i.length);
|
||||
pack.cultures.forEach(function (c) {
|
||||
if (!c.i || c.removed) return;
|
||||
pack.cells.culture[c.center] = c.i;
|
||||
});
|
||||
Cultures.expand();
|
||||
drawCultures();
|
||||
pack.burgs.forEach(b => (b.culture = pack.cells.culture[b.cell]));
|
||||
refreshCulturesEditor();
|
||||
document.querySelector("input.statePower").focus(); // to not trigger hotkeys
|
||||
}
|
||||
|
||||
function enterCultureManualAssignent() {
|
||||
if (!layerIsOn("toggleCultures")) toggleCultures();
|
||||
customization = 4;
|
||||
cults.append("g").attr("id", "temp");
|
||||
document.querySelectorAll("#culturesBottom > *").forEach(el => (el.style.display = "none"));
|
||||
document.getElementById("culturesManuallyButtons").style.display = "inline-block";
|
||||
debug.select("#cultureCenters").style("display", "none");
|
||||
|
||||
culturesEditor.querySelectorAll(".hide").forEach(el => el.classList.add("hidden"));
|
||||
culturesHeader.querySelector("div[data-sortby='type']").style.left = "8.8em";
|
||||
culturesHeader.querySelector("div[data-sortby='base']").style.left = "13.6em";
|
||||
culturesFooter.style.display = "none";
|
||||
body.querySelectorAll("div > input, select, span, svg").forEach(e => (e.style.pointerEvents = "none"));
|
||||
$("#culturesEditor").dialog({position: {my: "right top", at: "right-10 top+10", of: "svg"}});
|
||||
|
||||
tip("Click on culture to select, drag the circle to change culture", true);
|
||||
viewbox
|
||||
.style("cursor", "crosshair")
|
||||
.on("click", selectCultureOnMapClick)
|
||||
.call(d3.drag().on("start", dragCultureBrush))
|
||||
.on("touchmove mousemove", moveCultureBrush);
|
||||
|
||||
body.querySelector("div").classList.add("selected");
|
||||
}
|
||||
|
||||
function selectCultureOnLineClick(i) {
|
||||
if (customization !== 4) return;
|
||||
body.querySelector("div.selected").classList.remove("selected");
|
||||
this.classList.add("selected");
|
||||
}
|
||||
|
||||
function selectCultureOnMapClick() {
|
||||
const point = d3.mouse(this);
|
||||
const i = findCell(point[0], point[1]);
|
||||
if (pack.cells.h[i] < 20) return;
|
||||
|
||||
const assigned = cults.select("#temp").select("polygon[data-cell='" + i + "']");
|
||||
const culture = assigned.size() ? +assigned.attr("data-culture") : pack.cells.culture[i];
|
||||
|
||||
body.querySelector("div.selected").classList.remove("selected");
|
||||
body.querySelector("div[data-id='" + culture + "']").classList.add("selected");
|
||||
}
|
||||
|
||||
function dragCultureBrush() {
|
||||
const r = +culturesManuallyBrush.value;
|
||||
|
||||
d3.event.on("drag", () => {
|
||||
if (!d3.event.dx && !d3.event.dy) return;
|
||||
const p = d3.mouse(this);
|
||||
moveCircle(p[0], p[1], r);
|
||||
|
||||
const found = r > 5 ? findAll(p[0], p[1], r) : [findCell(p[0], p[1], r)];
|
||||
const selection = found.filter(isLand);
|
||||
if (selection) changeCultureForSelection(selection);
|
||||
});
|
||||
}
|
||||
|
||||
function changeCultureForSelection(selection) {
|
||||
const temp = cults.select("#temp");
|
||||
const selected = body.querySelector("div.selected");
|
||||
|
||||
const cultureNew = +selected.dataset.id;
|
||||
const color = pack.cultures[cultureNew].color || "#ffffff";
|
||||
|
||||
selection.forEach(function (i) {
|
||||
const exists = temp.select("polygon[data-cell='" + i + "']");
|
||||
const cultureOld = exists.size() ? +exists.attr("data-culture") : pack.cells.culture[i];
|
||||
if (cultureNew === cultureOld) return;
|
||||
|
||||
// change of append new element
|
||||
if (exists.size()) exists.attr("data-culture", cultureNew).attr("fill", color).attr("stroke", color);
|
||||
else
|
||||
temp
|
||||
.append("polygon")
|
||||
.attr("data-cell", i)
|
||||
.attr("data-culture", cultureNew)
|
||||
.attr("points", getPackPolygon(i))
|
||||
.attr("fill", color)
|
||||
.attr("stroke", color);
|
||||
});
|
||||
}
|
||||
|
||||
function moveCultureBrush() {
|
||||
showMainTip();
|
||||
const point = d3.mouse(this);
|
||||
const radius = +culturesManuallyBrush.value;
|
||||
moveCircle(point[0], point[1], radius);
|
||||
}
|
||||
|
||||
function applyCultureManualAssignent() {
|
||||
const changed = cults.select("#temp").selectAll("polygon");
|
||||
changed.each(function () {
|
||||
const i = +this.dataset.cell;
|
||||
const c = +this.dataset.culture;
|
||||
pack.cells.culture[i] = c;
|
||||
if (pack.cells.burg[i]) pack.burgs[pack.cells.burg[i]].culture = c;
|
||||
});
|
||||
|
||||
if (changed.size()) {
|
||||
drawCultures();
|
||||
refreshCulturesEditor();
|
||||
}
|
||||
exitCulturesManualAssignment();
|
||||
}
|
||||
|
||||
function exitCulturesManualAssignment(close) {
|
||||
customization = 0;
|
||||
cults.select("#temp").remove();
|
||||
removeCircle();
|
||||
document.querySelectorAll("#culturesBottom > *").forEach(el => (el.style.display = "inline-block"));
|
||||
document.getElementById("culturesManuallyButtons").style.display = "none";
|
||||
|
||||
culturesEditor.querySelectorAll(".hide").forEach(el => el.classList.remove("hidden"));
|
||||
culturesHeader.querySelector("div[data-sortby='type']").style.left = "18.6em";
|
||||
culturesHeader.querySelector("div[data-sortby='base']").style.left = "35.8em";
|
||||
culturesFooter.style.display = "block";
|
||||
body.querySelectorAll("div > input, select, span, svg").forEach(e => (e.style.pointerEvents = "all"));
|
||||
if (!close) $("#culturesEditor").dialog({position: {my: "right top", at: "right-10 top+10", of: "svg"}});
|
||||
|
||||
debug.select("#cultureCenters").style("display", null);
|
||||
restoreDefaultEvents();
|
||||
clearMainTip();
|
||||
const selected = body.querySelector("div.selected");
|
||||
if (selected) selected.classList.remove("selected");
|
||||
}
|
||||
|
||||
function enterAddCulturesMode() {
|
||||
if (this.classList.contains("pressed")) {
|
||||
exitAddCultureMode();
|
||||
return;
|
||||
}
|
||||
customization = 9;
|
||||
this.classList.add("pressed");
|
||||
tip("Click on the map to add a new culture", true);
|
||||
viewbox.style("cursor", "crosshair").on("click", addCulture);
|
||||
body.querySelectorAll("div > input, select, span, svg").forEach(e => (e.style.pointerEvents = "none"));
|
||||
}
|
||||
|
||||
function exitAddCultureMode() {
|
||||
customization = 0;
|
||||
restoreDefaultEvents();
|
||||
clearMainTip();
|
||||
body.querySelectorAll("div > input, select, span, svg").forEach(e => (e.style.pointerEvents = "all"));
|
||||
if (culturesAdd.classList.contains("pressed")) culturesAdd.classList.remove("pressed");
|
||||
}
|
||||
|
||||
function addCulture() {
|
||||
const point = d3.mouse(this);
|
||||
const center = findCell(point[0], point[1]);
|
||||
if (pack.cells.h[center] < 20) {
|
||||
tip("You cannot place culture center into the water. Please click on a land cell", false, "error");
|
||||
return;
|
||||
}
|
||||
const occupied = pack.cultures.some(c => !c.removed && c.center === center);
|
||||
if (occupied) {
|
||||
tip("This cell is already a culture center. Please select a different cell", false, "error");
|
||||
return;
|
||||
}
|
||||
|
||||
if (d3.event.shiftKey === false) exitAddCultureMode();
|
||||
Cultures.add(center);
|
||||
|
||||
drawCultureCenters();
|
||||
culturesEditorAddLines();
|
||||
}
|
||||
|
||||
function downloadCulturesData() {
|
||||
const unit = areaUnit.value === "square" ? distanceUnitInput.value + "2" : areaUnit.value;
|
||||
let data = "Id,Culture,Color,Cells,Expansionism,Type,Area " + unit + ",Population,Namesbase,Emblems Shape,Origin\n"; // headers
|
||||
|
||||
body.querySelectorAll(":scope > div").forEach(function (el) {
|
||||
data += el.dataset.id + ",";
|
||||
data += el.dataset.name + ",";
|
||||
data += el.dataset.color + ",";
|
||||
data += el.dataset.cells + ",";
|
||||
data += el.dataset.expansionism + ",";
|
||||
data += el.dataset.type + ",";
|
||||
data += el.dataset.area + ",";
|
||||
data += el.dataset.population + ",";
|
||||
const base = +el.dataset.base;
|
||||
data += nameBases[base].name + ",";
|
||||
data += el.dataset.emblems + ",";
|
||||
data += pack.cultures[+el.dataset.id].origin + "\n";
|
||||
});
|
||||
|
||||
const name = getFileName("Cultures") + ".csv";
|
||||
downloadFile(data, name);
|
||||
}
|
||||
|
||||
function closeCulturesEditor() {
|
||||
debug.select("#cultureCenters").remove();
|
||||
exitCulturesManualAssignment("close");
|
||||
exitAddCultureMode();
|
||||
}
|
||||
|
||||
async function uploadCulturesData() {
|
||||
const csv = await Formats.csvParser(this.files[0]);
|
||||
this.value = "";
|
||||
|
||||
const cultures = pack.cultures;
|
||||
const shapes = Object.keys(COA.shields.types)
|
||||
.map(type => Object.keys(COA.shields[type]))
|
||||
.flat();
|
||||
const populated = pack.cells.pop.map((c, i) => (c ? i : null)).filter(c => c);
|
||||
cultures.forEach(item => {
|
||||
if (item.i) item.removed = true;
|
||||
});
|
||||
for (const c of csv.iterator((a, b) => +a[0] > +b[0])) {
|
||||
let current;
|
||||
if (+c.id < cultures.length) {
|
||||
current = cultures[c.id];
|
||||
|
||||
const ratio = current.urban / (current.rural + current.urban);
|
||||
applyPopulationChange(current.rural, current.urban, c.population * (1 - ratio), c.population * ratio, +c.id);
|
||||
} else {
|
||||
current = {i: cultures.length, center: ra(populated), area: 0, cells: 0, origin: 0, rural: 0, urban: 0};
|
||||
cultures.push(current);
|
||||
}
|
||||
|
||||
current.removed = false;
|
||||
current.name = c.culture;
|
||||
current.code = abbreviate(
|
||||
current.name,
|
||||
cultures.map(c => c.code)
|
||||
);
|
||||
|
||||
current.color = c.color;
|
||||
current.expansionism = +c.expansionism;
|
||||
current.origin = +c.origin;
|
||||
|
||||
if (cultureTypes.includes(c.type)) current.type = c.type;
|
||||
else current.type = "Generic";
|
||||
|
||||
const shieldShape = c["emblems shape"].toLowerCase();
|
||||
if (shapes.includes(shieldShape)) current.shield = shieldShape;
|
||||
else current.shield = "heater";
|
||||
|
||||
const nameBaseIndex = nameBases.findIndex(n => n.name == c.namesbase);
|
||||
current.base = nameBaseIndex === -1 ? 0 : nameBaseIndex;
|
||||
}
|
||||
|
||||
cultures.filter(c => c.removed).forEach(c => removeCultureModel(c.i));
|
||||
|
||||
drawCultures();
|
||||
refreshCulturesEditor();
|
||||
}
|
||||
}
|
||||
|
|
@ -85,6 +85,17 @@ document.querySelectorAll(".sortable").forEach(function (e) {
|
|||
});
|
||||
});
|
||||
|
||||
function applySortingByHeader(headerContainer) {
|
||||
document
|
||||
.getElementById(headerContainer)
|
||||
.querySelectorAll(".sortable")
|
||||
.forEach(function (element) {
|
||||
element.addEventListener("click", function () {
|
||||
sortLines(this);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function sortLines(headerElement) {
|
||||
const type = headerElement.classList.contains("alphabetically") ? "name" : "number";
|
||||
let order = headerElement.className.includes("-down") ? "-up" : "-down";
|
||||
|
|
@ -1050,6 +1061,17 @@ function selectIcon(initial, callback) {
|
|||
});
|
||||
}
|
||||
|
||||
function getAreaUnit(squareMark = "²") {
|
||||
return document.getElementById("areaUnit").value === "square"
|
||||
? document.getElementById("distanceUnitInput").value + squareMark
|
||||
: document.getElementById("areaUnit").value;
|
||||
}
|
||||
|
||||
function getArea(rawArea) {
|
||||
const distanceScale = document.getElementById("distanceScaleInput")?.value;
|
||||
return rawArea * distanceScale ** 2;
|
||||
}
|
||||
|
||||
function confirmationDialog(options) {
|
||||
const {
|
||||
title = "Confirm action",
|
||||
|
|
@ -1097,6 +1119,12 @@ function refreshAllEditors() {
|
|||
// dynamically loaded editors
|
||||
async function editStates() {
|
||||
if (customization) return;
|
||||
const StateEditor = await import("../dynamic/editors/states-editor.js?v=17052022");
|
||||
const StateEditor = await import("../dynamic/editors/states-editor.js?v=20052022");
|
||||
StateEditor.open();
|
||||
}
|
||||
|
||||
async function editCultures() {
|
||||
if (customization) return;
|
||||
const CulturesEditor = await import("../dynamic/editors/cultures-editor.js?v=20052022");
|
||||
CulturesEditor.open();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -202,18 +202,18 @@ function showMapTooltip(point, e, i, g) {
|
|||
const province = pack.cells.province[i];
|
||||
const prov = province ? pack.provinces[province].fullName + ", " : "";
|
||||
tip(prov + stateName);
|
||||
if (document.getElementById('statesEditor')?.offsetParent) highlightEditorLine(statesEditor, state);
|
||||
if (document.getElementById('diplomacyEditor')?.offsetParent) highlightEditorLine(diplomacyEditor, state);
|
||||
if (document.getElementById('militaryOverview')?.offsetParent) highlightEditorLine(militaryOverview, state);
|
||||
if (document.getElementById('provincesEditor')?.offsetParent) highlightEditorLine(provincesEditor, province);
|
||||
if (document.getElementById("statesEditor")?.offsetParent) highlightEditorLine(statesEditor, state);
|
||||
if (document.getElementById("diplomacyEditor")?.offsetParent) highlightEditorLine(diplomacyEditor, state);
|
||||
if (document.getElementById("militaryOverview")?.offsetParent) highlightEditorLine(militaryOverview, state);
|
||||
if (document.getElementById("provincesEditor")?.offsetParent) highlightEditorLine(provincesEditor, province);
|
||||
} else if (layerIsOn("toggleCultures") && pack.cells.culture[i]) {
|
||||
const culture = pack.cells.culture[i];
|
||||
tip("Culture: " + pack.cultures[culture].name);
|
||||
if (culturesEditor?.offsetParent) highlightEditorLine(culturesEditor, culture);
|
||||
if (document.getElementById("culturesEditor")?.offsetParent) highlightEditorLine(culturesEditor, culture);
|
||||
} else if (layerIsOn("toggleHeight")) tip("Height: " + getFriendlyHeight(point));
|
||||
}
|
||||
|
||||
function highlightEditorLine(editor, id, timeout = 15000) {
|
||||
function highlightEditorLine(editor, id, timeout = 10000) {
|
||||
Array.from(editor.getElementsByClassName("states hovered")).forEach(el => el.classList.remove("hovered")); // clear all hovered
|
||||
const hovered = Array.from(editor.querySelectorAll("div")).find(el => el.dataset.id == id);
|
||||
if (hovered) hovered.classList.add("hovered"); // add hovered class
|
||||
|
|
@ -233,8 +233,7 @@ function updateCellInfo(point, i, g) {
|
|||
infoLon.innerHTML = toDMS(getLongitude(x, 4), "lon");
|
||||
|
||||
infoCell.innerHTML = i;
|
||||
const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
|
||||
infoArea.innerHTML = cells.area[i] ? si(cells.area[i] * distanceScaleInput.value ** 2) + unit : "n/a";
|
||||
infoArea.innerHTML = cells.area[i] ? si(getArea(cells.area[i])) + " " + getAreaUnit() : "n/a";
|
||||
infoEvelation.innerHTML = getElevation(pack.features[f], pack.cells.h[i]);
|
||||
infoDepth.innerHTML = getDepth(pack.features[f], pack.cells.h[i], point);
|
||||
infoTemp.innerHTML = convertTemperature(grid.cells.temp[g]);
|
||||
|
|
|
|||
|
|
@ -45,9 +45,7 @@ function editLake() {
|
|||
|
||||
const l = getLake();
|
||||
document.getElementById("lakeName").value = l.name;
|
||||
|
||||
const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
|
||||
document.getElementById("lakeArea").value = si(l.area * distanceScaleInput.value ** 2) + unit;
|
||||
document.getElementById("lakeArea").value = si(getArea(l.area)) + " " + getAreaUnit();
|
||||
|
||||
const length = d3.polygonLength(l.vertices.map(v => pack.vertices.p[v]));
|
||||
document.getElementById("lakeShoreLength").value = si(length * distanceScaleInput.value) + " " + distanceUnitInput.value;
|
||||
|
|
@ -118,9 +116,8 @@ function editLake() {
|
|||
elSelected.attr("d", d);
|
||||
defs.select("mask#land > path#land_" + feature.i).attr("d", d); // update land mask
|
||||
|
||||
const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
|
||||
feature.area = Math.abs(d3.polygonArea(points));
|
||||
document.getElementById("lakeArea").value = si(feature.area * distanceScaleInput.value ** 2) + unit;
|
||||
document.getElementById("lakeArea").value = si(getArea(feature.area)) + " " + getAreaUnit();
|
||||
}
|
||||
|
||||
function changeName() {
|
||||
|
|
|
|||
|
|
@ -528,8 +528,7 @@ class Planimeter extends Measurer {
|
|||
if (this.points.length < 3) return;
|
||||
|
||||
const polygonArea = rn(Math.abs(d3.polygonArea(this.points)));
|
||||
const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
|
||||
const area = si(polygonArea * distanceScaleInput.value ** 2) + " " + unit;
|
||||
const area = si(getArea(polygonArea)) + " " + getAreaUnit();
|
||||
const c = polylabel([this.points], 1.0);
|
||||
this.el.select("text").attr("x", c[0]).attr("y", c[1]).text(area);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -108,7 +108,7 @@ function editProvinces() {
|
|||
|
||||
// add line for each state
|
||||
function provincesEditorAddLines() {
|
||||
const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
|
||||
const unit = " " + getAreaUnit();
|
||||
const selectedState = +document.getElementById("provincesFilterState").value;
|
||||
let filtered = pack.provinces.filter(p => p.i && !p.removed); // all valid burgs
|
||||
if (selectedState != -1) filtered = filtered.filter(p => p.state === selectedState); // filtered by state
|
||||
|
|
@ -118,7 +118,7 @@ function editProvinces() {
|
|||
totalPopulation = 0;
|
||||
|
||||
for (const p of filtered) {
|
||||
const area = p.area * distanceScaleInput.value ** 2;
|
||||
const area = getArea(p.area);
|
||||
totalArea += area;
|
||||
const rural = p.rural * populationRate;
|
||||
const urban = p.urban * populationRate * urbanization;
|
||||
|
|
@ -632,8 +632,7 @@ function editProvinces() {
|
|||
const name = d.data.fullName;
|
||||
const state = pack.states[d.data.state].fullName;
|
||||
|
||||
const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
|
||||
const area = d.data.area * distanceScaleInput.value ** 2 + unit;
|
||||
const area = getArea(d.data.area) + " " + getAreaUnit();
|
||||
const rural = rn(d.data.rural * populationRate);
|
||||
const urban = rn(d.data.urban * populationRate * urbanization);
|
||||
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@ function editReligions() {
|
|||
|
||||
// add line for each religion
|
||||
function religionsEditorAddLines() {
|
||||
const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
|
||||
const unit = " " + getAreaUnit();
|
||||
let lines = "",
|
||||
totalArea = 0,
|
||||
totalPopulation = 0;
|
||||
|
|
@ -67,7 +67,7 @@ function editReligions() {
|
|||
for (const r of pack.religions) {
|
||||
if (r.removed) continue;
|
||||
|
||||
const area = r.area * distanceScaleInput.value ** 2;
|
||||
const area = getArea(r.area);
|
||||
const rural = r.rural * populationRate;
|
||||
const urban = r.urban * populationRate * urbanization;
|
||||
const population = rn(rural + urban);
|
||||
|
|
@ -117,7 +117,7 @@ function editReligions() {
|
|||
data-deity=""
|
||||
data-expansionism=""
|
||||
>
|
||||
<svg width="9" height="9" class="placeholder"></svg>
|
||||
<svg width="11" height="11" class="placeholder"></svg>
|
||||
<input data-tip="Religion name. Click and type to change" class="religionName italic" value="${r.name}" autocorrect="off" spellcheck="false" />
|
||||
<select data-tip="Religion type" class="religionType placeholder">
|
||||
${getTypeOptions(r.type)}
|
||||
|
|
|
|||
|
|
@ -2,20 +2,29 @@
|
|||
// UI elements for submap generation
|
||||
|
||||
window.UISubmap = (function () {
|
||||
document.getElementById("submapPointsInput").addEventListener("input", function () {
|
||||
const output = document.getElementById("submapPointsOutputFormatted");
|
||||
const byId = document.getElementById.bind(document);
|
||||
byId("submapPointsInput").addEventListener("input", function () {
|
||||
const output = byId("submapPointsOutputFormatted");
|
||||
const cells = cellsDensityMap[+this.value] || 1000;
|
||||
this.dataset.cells = cells;
|
||||
output.value = getCellsDensityValue(cells);
|
||||
output.style.color = getCellsDensityColor(cells);
|
||||
});
|
||||
|
||||
document.getElementById("submapScaleInput").addEventListener("input", function (event) {
|
||||
byId("submapScaleInput").addEventListener("input", function (event) {
|
||||
const exp = Math.pow(1.1, +event.target.value);
|
||||
document.getElementById("submapScaleOutput").value = rn(exp,2);
|
||||
event.stopPropagation();
|
||||
byId("submapScaleOutput").value = rn(exp,2);
|
||||
});
|
||||
|
||||
byId("submapAngleInput").addEventListener("input", function (event) {
|
||||
byId("submapAngleOutput").value = event.target.value;
|
||||
});
|
||||
|
||||
const $previewBox = byId("submapPreview");
|
||||
const $scaleInput = byId("submapScaleInput");
|
||||
const $shiftX = byId("submapShiftX");
|
||||
const $shiftY = byId("submapShiftY");
|
||||
|
||||
function openSubmapMenu() {
|
||||
$("#submapOptionsDialog").dialog({
|
||||
title: "Create a submap",
|
||||
|
|
@ -34,25 +43,67 @@ window.UISubmap = (function () {
|
|||
});
|
||||
}
|
||||
|
||||
function openResampleMenu() {
|
||||
const getTransformInput = _ => ({
|
||||
angle: (+byId("submapAngleInput").value / 180) * Math.PI,
|
||||
shiftX: +byId("submapShiftX").value,
|
||||
shiftY: +byId("submapShiftY").value,
|
||||
ratio: +byId("submapScaleInput").value,
|
||||
mirrorH: byId("submapMirrorH").checked,
|
||||
mirrorV: byId("submapMirrorV").checked,
|
||||
})
|
||||
|
||||
async function openResampleMenu() {
|
||||
resetZoom(0);
|
||||
|
||||
document.getElementById("submapAngleInput").value = 0;
|
||||
document.getElementById("submapAngleOutput").value = "0";
|
||||
document.getElementById("submapScaleInput").value = 1;
|
||||
document.getElementById("submapScaleOutput").value = 1;
|
||||
document.getElementById("submapShiftX").value = 0;
|
||||
document.getElementById("submapShiftY").value = 0;
|
||||
document.getElementById("submapMirrorH").checked = false;
|
||||
document.getElementById("submapMirrorV").checked = false;
|
||||
byId("submapAngleInput").value = 0;
|
||||
byId("submapAngleOutput").value = "0";
|
||||
byId("submapScaleOutput").value = 1;
|
||||
byId("submapMirrorH").checked = false;
|
||||
byId("submapMirrorV").checked = false;
|
||||
$scaleInput.value = 0;
|
||||
$shiftX.value = 0;
|
||||
$shiftY.value = 0;
|
||||
|
||||
const previewScale = 400 / graphWidth;
|
||||
const [w, h] = [400, graphHeight * previewScale];
|
||||
$previewBox.style.width = w + 'px';
|
||||
$previewBox.style.height = h + 'px';
|
||||
$previewBox.style.position = 'relative';
|
||||
|
||||
// handle mouse input
|
||||
const dispatchInput = e => e.dispatchEvent(new Event('input', {bubbles:true}));
|
||||
|
||||
// mouse wheel
|
||||
$previewBox.onwheel = e => {
|
||||
$scaleInput.value = $scaleInput.valueAsNumber - Math.sign(e.deltaY);
|
||||
dispatchInput($scaleInput);
|
||||
};
|
||||
|
||||
// mouse drag
|
||||
let mouseIsDown = false, mouseX = 0, mouseY = 0;
|
||||
$previewBox.onmousedown = e => {
|
||||
mouseIsDown = true;
|
||||
mouseX = $shiftX.value - e.clientX / previewScale;
|
||||
mouseY = $shiftY.value - e.clientY / previewScale;
|
||||
}
|
||||
$previewBox.onmouseup = _ => mouseIsDown = false;
|
||||
$previewBox.onmouseleave = _ => mouseIsDown = false;
|
||||
$previewBox.onmousemove = e => {
|
||||
if (!mouseIsDown) return;
|
||||
e.preventDefault();
|
||||
$shiftX.value = Math.round(mouseX + e.clientX / previewScale);
|
||||
$shiftY.value = Math.round(mouseY + e.clientY / previewScale);
|
||||
dispatchInput($shiftX);
|
||||
// dispatchInput($shiftY); // not needed X bubbles anyway
|
||||
};
|
||||
|
||||
$("#resampleDialog").dialog({
|
||||
title: "Resample map",
|
||||
width: "30em",
|
||||
title: "Transform map",
|
||||
width: "430px",
|
||||
resizable: false,
|
||||
position: {my: "center", at: "center", of: "svg"},
|
||||
buttons: {
|
||||
Resample: function () {
|
||||
Transform: function () {
|
||||
$(this).dialog("close");
|
||||
resampleCurrentMap();
|
||||
},
|
||||
|
|
@ -61,25 +112,71 @@ window.UISubmap = (function () {
|
|||
}
|
||||
}
|
||||
});
|
||||
|
||||
// use double resolution for PNG to get sharper image
|
||||
const $preview = await loadPreview($previewBox, w*2, h*2);
|
||||
// could be done with SVG. Faster to load, slower to use.
|
||||
// const $preview = await loadPreviewSVG($previewBox, w, h);
|
||||
$preview.style.position = "absolute";
|
||||
$preview.style.width = w + "px";
|
||||
$preview.style.height = h + "px";
|
||||
|
||||
byId("resampleDialog").oninput = event => {
|
||||
const { angle, shiftX, shiftY, ratio, mirrorH, mirrorV } = getTransformInput();
|
||||
const scale = Math.pow(1.1,ratio);
|
||||
const transformStyle = `
|
||||
translate(${shiftX*previewScale}px, ${shiftY*previewScale}px)
|
||||
scale(${mirrorH?-scale:scale}, ${mirrorV?-scale:scale})
|
||||
rotate(${angle}rad)
|
||||
`;
|
||||
|
||||
$preview.style.transform = transformStyle;
|
||||
$preview.style['transform-origin'] = 'center';
|
||||
event.stopPropagation();
|
||||
}
|
||||
}
|
||||
|
||||
async function loadPreview($container, w, h) {
|
||||
const url = await getMapURL("png", { globe: false, noWater: true, fullMap: true, noLabels: true, noScaleBar: true, noIce: true });
|
||||
|
||||
const canvas = document.createElement("canvas");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = w;
|
||||
canvas.height = h;
|
||||
const img = new Image();
|
||||
img.src = url;
|
||||
img.onload = function () {
|
||||
ctx.drawImage(img, 0, 0, w, h);
|
||||
};
|
||||
$container.textContent = '';
|
||||
$container.appendChild(canvas);
|
||||
return canvas;
|
||||
}
|
||||
|
||||
// currently unused alternative to PNG version
|
||||
async function loadPreviewSVG($container, w, h) {
|
||||
$container.innerHTML = /*html*/`
|
||||
<svg id="submapPreviewSVG" viewBox="0 0 ${graphWidth} ${graphHeight}">
|
||||
<rect width="100%" height="100%" fill="${byId('styleOceanFill').value}" />
|
||||
<rect fill="url(#oceanic)" width="100%" height="100%" />
|
||||
<use href="#map"></use>
|
||||
</svg>
|
||||
`;
|
||||
return byId("submapPreviewSVG");
|
||||
}
|
||||
|
||||
// Resample the whole map to different cell resolution or shape
|
||||
const resampleCurrentMap = debounce(function () {
|
||||
WARN && console.warn("Resampling current map");
|
||||
const cellNumId = +document.getElementById("submapPointsInput").value;
|
||||
const cellNumId = +byId("submapPointsInput").value;
|
||||
if (!cellsDensityMap[cellNumId]) return console.error("Unknown cell number!");
|
||||
|
||||
const angle = (+document.getElementById("submapAngleInput").value / 180) * Math.PI;
|
||||
const shiftX = +document.getElementById("submapShiftX").value;
|
||||
const shiftY = +document.getElementById("submapShiftY").value;
|
||||
const ratio = +document.getElementById("submapScaleInput").value;
|
||||
const mirrorH = document.getElementById("submapMirrorH").checked;
|
||||
const mirrorV = document.getElementById("submapMirrorV").checked;
|
||||
const { angle, shiftX, shiftY, ratio, mirrorH, mirrorV } = getTransformInput()
|
||||
|
||||
const [cx, cy] = [graphWidth / 2, graphHeight / 2];
|
||||
const rot = alfa => (x, y) => [(x - cx) * Math.cos(alfa) - (y - cy) * Math.sin(alfa) + cx, (y - cy) * Math.cos(alfa) + (x - cx) * Math.sin(alfa) + cy];
|
||||
const scale = ratio => (x, y) => [(x-cx) * ratio + cx, (y-cy) * ratio + cy];
|
||||
const shift = (dx, dy) => (x, y) => [x + dx, y + dy];
|
||||
const scale = r => (x, y) => [(x-cx) * r + cx, (y-cy) * r + cy];
|
||||
const flipH = (x, y) => [-x + 2 * cx, y];
|
||||
const flipV = (x, y) => [x, -y + 2 * cy];
|
||||
const app = (f, g) => (x, y) => f(...g(x, y));
|
||||
|
|
@ -89,13 +186,13 @@ window.UISubmap = (function () {
|
|||
let inverse = id;
|
||||
|
||||
if (angle) [projection, inverse] = [rot(angle), rot(-angle)];
|
||||
if (ratio) [projection, inverse] = [app(scale(Math.pow(1.1,ratio)), projection), app(inverse, scale(Math.pow(1.1,-ratio)))];
|
||||
if (mirrorH) [projection, inverse] = [app(flipH, projection), app(inverse, flipH)];
|
||||
if (mirrorV) [projection, inverse] = [app(flipV, projection), app(inverse, flipV)];
|
||||
if (shiftX || shiftY) {
|
||||
projection = app(shift(shiftX, shiftY), projection);
|
||||
inverse = app(inverse, shift(-shiftX, -shiftY));
|
||||
}
|
||||
if (ratio) [projection, inverse] = [app(scale(Math.pow(1.1,ratio)), projection), app(inverse, scale(Math.pow(1.1,-ratio)))];
|
||||
if (mirrorH) [projection, inverse] = [app(flipH, projection), app(inverse, flipH)];
|
||||
if (mirrorV) [projection, inverse] = [app(flipV, projection), app(inverse, flipV)];
|
||||
|
||||
changeCellsDensity(cellNumId);
|
||||
startResample({
|
||||
|
|
@ -106,6 +203,7 @@ window.UISubmap = (function () {
|
|||
promoteTowns: false,
|
||||
smoothHeightMap: false,
|
||||
rescaleStyles: false,
|
||||
scale: 1,
|
||||
projection,
|
||||
inverse
|
||||
});
|
||||
|
|
@ -115,7 +213,7 @@ window.UISubmap = (function () {
|
|||
const generateSubmap = debounce(function () {
|
||||
WARN && console.warn("Resampling current map");
|
||||
closeDialogs("#worldConfigurator, #options3d");
|
||||
const checked = id => Boolean(document.getElementById(id).checked);
|
||||
const checked = id => Boolean(byId(id).checked);
|
||||
|
||||
// Create projection func from current zoom extents
|
||||
const [[x0, y0], [x1, y1]] = getViewBoxExtent();
|
||||
|
|
@ -136,14 +234,14 @@ window.UISubmap = (function () {
|
|||
};
|
||||
|
||||
// converting map position on the planet
|
||||
const mapSizeOutput = document.getElementById("mapSizeOutput");
|
||||
const latitudeOutput = document.getElementById("latitudeOutput");
|
||||
const mapSizeOutput = byId("mapSizeOutput");
|
||||
const latitudeOutput = byId("latitudeOutput");
|
||||
const latN = 90 - ((180 - (mapSizeInput.value / 100) * 180) * latitudeOutput.value) / 100;
|
||||
const newLatN = latN - ((y0 / graphHeight) * mapSizeOutput.value * 180) / 100;
|
||||
mapSizeOutput.value /= scale;
|
||||
latitudeOutput.value = ((90 - newLatN) / (180 - (mapSizeOutput.value / 100) * 180)) * 100;
|
||||
document.getElementById("mapSizeInput").value = mapSizeOutput.value;
|
||||
document.getElementById("latitudeInput").value = latitudeOutput.value;
|
||||
byId("mapSizeInput").value = mapSizeOutput.value;
|
||||
byId("latitudeInput").value = latitudeOutput.value;
|
||||
|
||||
// fix scale
|
||||
distanceScaleInput.value = distanceScaleOutput.value = rn((distanceScale = distanceScaleOutput.value / scale), 2);
|
||||
|
|
@ -188,7 +286,7 @@ window.UISubmap = (function () {
|
|||
|
||||
function changeStyles(scale) {
|
||||
// resize burgIcons
|
||||
const burgIcons = [...document.getElementById("burgIcons").querySelectorAll("g")];
|
||||
const burgIcons = [...byId("burgIcons").querySelectorAll("g")];
|
||||
for (const bi of burgIcons) {
|
||||
const newRadius = rn(minmax(bi.getAttribute("size") * scale, 0.2, 10), 2);
|
||||
changeRadius(newRadius, bi.id);
|
||||
|
|
@ -197,7 +295,7 @@ window.UISubmap = (function () {
|
|||
}
|
||||
|
||||
// burglabels
|
||||
const burgLabels = [...document.getElementById("burgLabels").querySelectorAll("g")];
|
||||
const burgLabels = [...byId("burgLabels").querySelectorAll("g")];
|
||||
for (const bl of burgLabels) {
|
||||
const size = +bl.dataset["size"];
|
||||
bl.dataset["size"] = Math.max(rn((size + size / scale) / 2, 2), 1) * scale;
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@ function editZones() {
|
|||
|
||||
// add line for each zone
|
||||
function zonesEditorAddLines() {
|
||||
const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
|
||||
const unit = " " + getAreaUnit();
|
||||
|
||||
const typeToFilterBy = document.getElementById("zonesFilterType").value;
|
||||
const zones = Array.from(document.querySelectorAll("#zones > g"));
|
||||
|
|
@ -78,7 +78,7 @@ function editZones() {
|
|||
const description = zoneEl.dataset.description;
|
||||
const type = zoneEl.dataset.type;
|
||||
const fill = zoneEl.getAttribute("fill");
|
||||
const area = d3.sum(c.map(i => pack.cells.area[i])) * distanceScaleInput.value ** 2;
|
||||
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 urban = d3.sum(c.map(i => pack.cells.burg[i]).map(b => pack.burgs[b].population)) * populationRate * urbanization;
|
||||
const population = rural + urban;
|
||||
|
|
@ -107,7 +107,8 @@ function editZones() {
|
|||
body.innerHTML = lines.join("");
|
||||
|
||||
// update footer
|
||||
const totalArea = (zonesFooterArea.dataset.area = graphWidth * graphHeight * distanceScaleInput.value ** 2);
|
||||
const totalArea = getArea(graphWidth * graphHeight);
|
||||
zonesFooterArea.dataset.area = totalArea;
|
||||
const totalPop = (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}`;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue