const $body = insertEditorHtml();
addListeners();
const cultureTypes = ["Generic", "River", "Lake", "Naval", "Nomadic", "Hunting", "Highland"];
export function open() {
closeDialogs("#culturesEditor, .stable");
if (!layerIsOn("toggleCultures")) toggleCultures();
if (layerIsOn("toggleStates")) toggleStates();
if (layerIsOn("toggleBiomes")) toggleBiomes();
if (layerIsOn("toggleReligions")) toggleReligions();
if (layerIsOn("toggleProvinces")) toggleProvinces();
refreshCulturesEditor();
$("#culturesEditor").dialog({
title: "Cultures Editor",
resizable: false,
close: closeCulturesEditor,
position: {my: "right top", at: "right-10 top+10", of: "svg"}
});
$body.focus();
}
function insertEditorHtml() {
const editorHtml = /* html */ ``;
byId("dialogs").insertAdjacentHTML("beforeend", editorHtml);
return byId("culturesBody");
}
function addListeners() {
applySortingByHeader("culturesHeader");
byId("culturesEditorRefresh").on("click", refreshCulturesEditor);
byId("culturesEditStyle").on("click", () => editStyle("cults"));
byId("culturesLegend").on("click", toggleLegend);
byId("culturesPercentage").on("click", togglePercentageMode);
byId("culturesHeirarchy").on("click", showHierarchy);
byId("culturesRecalculate").on("click", () => recalculateCultures(true));
byId("culturesManually").on("click", enterCultureManualAssignent);
byId("culturesManuallyApply").on("click", applyCultureManualAssignent);
byId("culturesManuallyCancel").on("click", () => exitCulturesManualAssignment());
byId("culturesEditNamesBase").on("click", editNamesbase);
byId("culturesAdd").on("click", enterAddCulturesMode);
byId("culturesExport").on("click", downloadCulturesCsv);
byId("culturesImport").on("click", () => byId("culturesCSVToLoad").click());
byId("culturesCSVToLoad").on("change", uploadCulturesData);
}
function refreshCulturesEditor() {
culturesCollectStatistics();
culturesEditorAddLines();
drawCultureCenters();
}
function culturesCollectStatistics() {
const {cells, cultures, burgs} = pack;
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 cultureId = cells.culture[i];
cultures[cultureId].cells += 1;
cultures[cultureId].area += cells.area[i];
cultures[cultureId].rural += cells.pop[i];
const burgId = cells.burg[i];
if (burgId) cultures[cultureId].urban += burgs[burgId].population;
}
}
function culturesEditorAddLines() {
const unit = getAreaUnit();
let lines = "";
let totalArea = 0;
let totalPopulation = 0;
const emblemShapeGroup = byId("emblemShape")?.selectedOptions[0]?.parentNode?.label;
const selectShape = emblemShapeGroup === "Diversiform";
for (const c of pack.cultures) {
if (c.removed) continue;
const area = getArea(c.area);
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 */ ``;
continue;
}
lines += /* html */ ``;
}
$body.innerHTML = lines;
// update footer
byId("culturesFooterCultures").innerHTML = pack.cultures.filter(c => c.i && !c.removed).length;
byId("culturesFooterCells").innerHTML = pack.cells.h.filter(h => h >= 20).length;
byId("culturesFooterArea").innerHTML = `${si(totalArea)} ${unit}`;
byId("culturesFooterPopulation").innerHTML = si(totalPopulation);
byId("culturesFooterArea").dataset.area = totalArea;
byId("culturesFooterPopulation").dataset.population = totalPopulation;
// add listeners
$body.querySelectorAll("div.cultures").forEach(el => el.on("mouseenter", cultureHighlightOn));
$body.querySelectorAll("div.cultures").forEach(el => el.on("mouseleave", cultureHighlightOff));
$body.querySelectorAll("div.states").forEach(el => el.on("click", selectCultureOnLineClick));
$body.querySelectorAll("fill-box").forEach(el => el.on("click", cultureChangeColor));
$body.querySelectorAll("div > input.cultureName").forEach(el => el.on("input", cultureChangeName));
$body.querySelectorAll("div > span.icon-cw").forEach(el => el.on("click", cultureRegenerateName));
$body.querySelectorAll("div > input.cultureExpan").forEach(el => el.on("input", cultureChangeExpansionism));
$body.querySelectorAll("div > select.cultureType").forEach(el => el.on("change", cultureChangeType));
$body.querySelectorAll("div > select.cultureBase").forEach(el => el.on("change", cultureChangeBase));
$body.querySelectorAll("div > select.cultureEmblems").forEach(el => el.on("change", cultureChangeEmblemsShape));
$body.querySelectorAll("div > div.culturePopulation").forEach(el => el.on("click", changePopulation));
$body.querySelectorAll("div > span.icon-arrows-cw").forEach(el => el.on("click", cultureRegenerateBurgs));
$body.querySelectorAll("div > span.icon-trash-empty").forEach(el => el.on("click", cultureRemove));
const $culturesHeader = byId("culturesHeader");
$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 += ``));
return options;
}
function getBaseOptions(base) {
let options = "";
nameBases.forEach((n, i) => (options += ``));
return options;
}
function getShapeOptions(selectShape, selected) {
if (!selectShape) return "";
const shapes = Object.keys(COA.shields.types)
.map(type => Object.keys(COA.shields[type]))
.flat();
const options = shapes.map(
shape => ``
);
return ``;
}
function cultureHighlightOn(event) {
const culture = Number(event.id || event.target.dataset.id);
const $info = byId("cultureInfo");
if ($info) {
d3.select("#hierarchy").select(`g[data-id='${culture}']`).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 = `${c.name} culture. ${c.type}. ${population}`;
tip("Drag to other node to add parent, click to edit");
}
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 = Number(event.id || event.target.dataset.id);
const $info = byId("cultureInfo");
if ($info) {
d3.select("#hierarchy").select(`g[data-id='${culture}']`).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 cultureChangeEmblemsShape() {
const culture = +this.parentNode.dataset.id;
const shape = this.value;
this.parentNode.dataset.emblems = pack.cultures[culture].shield = shape;
const rerenderCOA = (id, coa) => {
const $coa = byId(id);
if (!$coa) return; // not rendered
$coa.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 cultureId = +this.parentNode.dataset.id;
const culture = pack.cultures[cultureId];
if (!culture.cells) return tip("Culture does not have any cells, cannot change population", false, "error");
const rural = rn(culture.rural * populationRate);
const urban = rn(culture.urban * populationRate * urbanization);
const total = rural + urban;
const l = n => Number(n).toLocaleString();
const burgs = pack.burgs.filter(b => !b.removed && b.culture === cultureId);
alertMessage.innerHTML = /* html */ `Rural: Urban:
Total population: ${l(total)} ⇒ ${l(
total
)} (100%)
`;
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, cultureId);
$(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 cultureId = +this.parentNode.dataset.id;
const cBurgs = pack.burgs.filter(b => b.culture === cultureId && !b.lock);
cBurgs.forEach(b => {
b.name = Names.getCulture(cultureId);
labels.select("[data-id='" + b.i + "']").text(b.name);
});
tip(`Names for ${cBurgs.length} burgs are regenerated`, false, "success");
}
function removeCulture(cultureId) {
cults.select("#culture" + cultureId).remove();
debug.select("#cultureCenter" + cultureId).remove();
const {burgs, states, cells, cultures} = pack;
burgs.filter(b => b.culture == cultureId).forEach(b => (b.culture = 0));
states.forEach(s => {
if (s.culture === cultureId) s.culture = 0;
});
cells.culture.forEach((c, i) => {
if (c === cultureId) cells.culture[i] = 0;
});
cultures[cultureId].removed = true;
cultures
.filter(c => c.i && !c.removed)
.forEach(c => {
c.origins = c.origins.filter(origin => origin !== cultureId);
if (!c.origins.length) c.origins = [0];
});
refreshCulturesEditor();
}
function cultureRemove() {
if (customization === 4) return;
const cultureId = +this.parentNode.dataset.id;
alertMessage.innerHTML = "Are you sure you want to remove the culture?
This action cannot be reverted";
$("#alert").dialog({
resizable: false,
title: "Remove culture",
buttons: {
Remove: function () {
removeCulture(cultureId);
$(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(".cultureCells").innerHTML = rn((+el.dataset.cells / totalCells) * 100) + "%";
el.querySelector(".cultureArea").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].origins = [null];
const validCultures = pack.cultures.filter(c => !c.removed);
if (validCultures.length < 3) return tip("Not enough cultures to show hierarchy", false, "error");
const root = d3
.stratify()
.id(d => d.i)
.parentId(d => d.origins[0])(validCultures);
const treeWidth = root.leaves().length;
const treeHeight = root.height;
const width = Math.max(treeWidth * 40, 300);
const 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]);
alertMessage.innerHTML = /* html */ ``;
// prepare svg
const svg = d3
.select("#alertMessage")
.insert("svg", "#cultureChartDetails")
.attr("id", "hierarchy")
.attr("width", width)
.attr("height", height)
.style("text-anchor", "middle")
.style("min-width", "300px");
const graph = svg.append("g").attr("transform", `translate(10, -45)`);
const links = graph.append("g").attr("fill", "none").attr("stroke", "#aaaaaa");
const primaryLinks = links.append("g");
const secondaryLinks = links.append("g").attr("stroke-dasharray", 1);
const nodes = graph.append("g");
// render helper functions
const getLinkPath = d => {
const {
source: {x: sx, y: sy},
target: {x: tx, y: ty}
} = d;
return `M${sx},${sy} C${sx},${(sy * 3 + ty) / 4} ${tx},${(sy * 2 + ty) / 3} ${tx},${ty}`;
};
const getSecondaryLinks = root => {
const nodes = root.descendants();
const links = [];
for (const node of nodes) {
const origins = node.data.origins;
if (node.depth < 2) continue;
for (let i = 1; i < origins.length; i++) {
const source = nodes.find(n => n.data.i === origins[i]);
if (source) links.push({source, target: node});
}
}
return links;
};
const nodePathMap = {
undefined: "M5,0A5,5,0,1,1,-5,0A5,5,0,1,1,5,0", // small circle
Generic: "M11.3,0A11.3,11.3,0,1,1,-11.3,0A11.3,11.3,0,1,1,11.3,0", // circle
River: "M0,-14L14,0L0,14L-14,0Z", // diamond
Lake: "M-6.5,-11.26l13,0l6.5,11.26l-6.5,11.26l-13,0l-6.5,-11.26Z", // hexagon
Naval: "M-11,-11h22v22h-22Z", // square
Highland: "M-11,-11l11,2l11,-2l-2,11l2,11l-11,-2l-11,2l2,-11Z", // concave square
Nomadic: "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
Hunting: "M0,-14l14,11l-6,14h-16l-6,-14Z" // pentagon
};
const getNodePath = d => nodePathMap[d.data.type];
renderTree();
function renderTree() {
treeLayout(root);
primaryLinks.selectAll("path").data(root.links()).enter().append("path").attr("d", getLinkPath);
secondaryLinks.selectAll("path").data(getSecondaryLinks(root)).enter().append("path").attr("d", getLinkPath);
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)
.on("mouseleave", cultureHighlightOff)
.on("click", cultureSelect)
.call(d3.drag().on("start", dragToReorigin));
node
.append("path")
.attr("d", getNodePath)
.attr("fill", d => d.data.color || "#ffffff")
.attr("stroke-dasharray", d => (d.data.cells ? "null" : "1"));
node
.append("text")
.attr("dy", ".35em")
.text(d => d.data.code || "");
}
$("#alert").dialog({
title: "Cultures tree",
width: fitContent(),
minWidth: "20vw",
resizable: false,
position: {my: "left center", at: "left+10 center", of: "svg"},
buttons: null,
close: () => {
alertMessage.innerHTML = "";
}
});
function cultureSelect(d) {
d3.event.stopPropagation();
nodes.selectAll("g").style("outline", "none");
this.style.outline = "1px solid #c13119";
byId("cultureSelected").style.display = "block";
byId("cultureInfo").style.display = "none";
const culture = d.data;
byId("cultureSelectedName").innerText = culture.name;
byId("cultureSelectedCode").value = culture.code;
byId("cultureSelectedCode").onchange = function () {
if (this.value.length > 3) return tip("Abbreviation must be 3 characters or less", false, "error", 3000);
if (!this.value.length) return tip("Abbreviation cannot be empty", false, "error", 3000);
nodes.select(`g[data-id="${d.id}"] > text`).text(this.value);
culture.code = this.value;
};
byId("cultureSelectedClear").onclick = () => {
culture.origins = [0];
showHierarchy();
};
byId("cultureSelectedClose").onclick = () => {
this.style.outline = "none";
byId("cultureSelected").style.display = "none";
byId("cultureInfo").style.display = "block";
};
}
function dragToReorigin(d) {
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("g.selected");
if (!selected.size()) return;
const cultureId = d.data.i;
const newOrigin = Number(selected.datum().data.i);
if (cultureId === newOrigin) return; // dragged to itself
if (d.data.origins.includes(newOrigin)) return; // already a child of the selected node
if (newOrigin && d.descendants().some(node => node.id === newOrigin)) return; // cannot be a child of its own child
const culture = pack.cultures[cultureId];
if (culture.origins[0] === 0) culture.origins = [];
culture.origins.push(newOrigin);
showHierarchy();
});
}
}
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.cultureExpan").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"));
byId("culturesManuallyButtons").style.display = "inline-block";
debug.select("#cultureCenters").style("display", "none");
culturesEditor.querySelectorAll(".hide").forEach(el => el.classList.add("hidden"));
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 radius = +culturesManuallyBrush.value;
d3.event.on("drag", () => {
if (!d3.event.dx && !d3.event.dy) return;
const p = d3.mouse(this);
moveCircle(p[0], p[1], radius);
const found = radius > 5 ? findAll(p[0], p[1], radius) : [findCell(p[0], p[1], radius)];
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"));
byId("culturesManuallyButtons").style.display = "none";
culturesEditor.querySelectorAll(".hide").forEach(el => el.classList.remove("hidden"));
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")) return exitAddCultureMode();
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)
return tip("You cannot place culture center into the water. Please click on a land cell", false, "error");
const occupied = pack.cultures.some(c => !c.removed && c.center === center);
if (occupied) return tip("This cell is already a culture center. Please select a different cell", false, "error");
if (d3.event.shiftKey === false) exitAddCultureMode();
Cultures.add(center);
drawCultureCenters();
culturesEditorAddLines();
}
function downloadCulturesCsv() {
const unit = getAreaUnit("2");
const headers = `Id,Name,Color,Cells,Expansionism,Type,Area ${unit},Population,Namesbase,Emblems Shape,Origin`;
const lines = Array.from($body.querySelectorAll(":scope > div"));
const data = lines.map($line => {
const {id, name, color, cells, expansionism, type, area, population, emblems, base} = $line.dataset;
const namesbase = nameBases[+base].name;
const {origin} = pack.cultures[+id];
return [id, name, color, cells, expansionism, type, area, population, namesbase, emblems, origin].join(",");
});
const csvData = [headers].concat(data).join("\n");
const name = getFileName("Cultures") + ".csv";
downloadFile(csvData, 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, cells} = pack;
const shapes = Object.keys(COA.shields.types)
.map(type => Object.keys(COA.shields[type]))
.flat();
const populated = 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.origins = JSON.parse(c.origins);
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 => removeCulture(c.i));
drawCultures();
refreshCulturesEditor();
}