mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-17 01:41:22 +01:00
v1.5.04 - Emblems layer and on map placement
This commit is contained in:
Azgaar
parent
968182512c
commit
549eefe7ba
12 changed files with 276 additions and 47 deletions
|
|
@ -140,12 +140,14 @@
|
|||
}
|
||||
|
||||
function getShield(culture, state) {
|
||||
const emblemShape = document.getElementById("emblemShape").value;
|
||||
if (emblemShape === "state" && state && pack.states[state].coa) return pack.states[state].coa.shield;
|
||||
if (pack.cultures[culture].shield) return pack.cultures[culture].shield;
|
||||
if (state) return pack.states[state].coa.shield;
|
||||
console.error("Emblem shape is not defined on culture level", pack.cultures[culture]);
|
||||
return "heater";
|
||||
}
|
||||
|
||||
// define burg coordinates, port status and define details
|
||||
// define burg coordinates, coa, port status and define details
|
||||
const specifyBurgs = function() {
|
||||
TIME && console.time("specifyBurgs");
|
||||
const cells = pack.cells, vertices = pack.vertices, features = pack.features, temp = grid.cells.temp;
|
||||
|
|
@ -183,6 +185,10 @@
|
|||
if (i%2) b.x = rn(b.x + shift, 2); else b.x = rn(b.x - shift, 2);
|
||||
if (cells.r[i]%2) b.y = rn(b.y + shift, 2); else b.y = rn(b.y - shift, 2);
|
||||
}
|
||||
|
||||
const stateCOA = pack.states[b.state].coa;
|
||||
b.coa = COA.generate(stateCOA);
|
||||
b.coa.shield = getShield(b.culture, b.state);
|
||||
}
|
||||
|
||||
// de-assign port status if it's the only one on feature
|
||||
|
|
@ -207,10 +213,6 @@
|
|||
const religion = cells.religion[b.cell];
|
||||
const theocracy = pack.states[b.state].form === "Theocracy";
|
||||
b.temple = religion && theocracy || pop > 50 || pop > 35 && P(.75) || pop > 20 && P(.5) ? 1 : 0;
|
||||
const province = cells.province[b.cell];
|
||||
const parentCOA = province ? pack.provinces[province].coa : pack.states[b.state].coa;
|
||||
b.coa = COA.generate(parentCOA);
|
||||
b.coa.shield = getShield(b.culture, b.state);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -553,7 +555,7 @@
|
|||
el.insertAdjacentHTML("afterbegin", spans.join(""));
|
||||
if (lines.length < 2) return;
|
||||
|
||||
// check whether multilined label is generally inside the strate. If no, replace with short name label
|
||||
// check whether multilined label is generally inside the state. If no, replace with short name label
|
||||
const cs = pack.cells.state, b = el.parentNode.getBBox();
|
||||
const c1 = () => +cs[findCell(b.x, b.y)] === id;
|
||||
const c2 = () => +cs[findCell(b.x + b.width / 2, b.y)] === id;
|
||||
|
|
@ -941,13 +943,14 @@
|
|||
const center = stateBurgs[i].cell;
|
||||
const burg = stateBurgs[i].i;
|
||||
const c = stateBurgs[i].culture;
|
||||
const name = P(.5) ? Names.getState(Names.getCultureShort(c), c) : stateBurgs[i].name;
|
||||
const nameByBurg = P(.5);
|
||||
const name = nameByBurg ? stateBurgs[i].name : Names.getState(Names.getCultureShort(c), c);
|
||||
const formName = rw(form);
|
||||
form[formName] += 5;
|
||||
const fullName = name + " " + formName;
|
||||
const color = getMixedColor(s.color);
|
||||
const coa = COA.generate(s.coa);
|
||||
coa.shield = getShield(s.culture, s.i);
|
||||
const coa = COA.generate(stateBurgs[i].coa);
|
||||
coa.shield = getShield(c, s.i);
|
||||
provinces.push({i:province, state:s.i, center, burg, name, formName, fullName, color, coa});
|
||||
}
|
||||
});
|
||||
|
|
@ -1032,7 +1035,8 @@
|
|||
|
||||
// generate "wild" province name
|
||||
const c = cells.culture[center];
|
||||
const name = burgCell && P(.5) ? burgs[burg].name : Names.getState(Names.getCultureShort(c), c);
|
||||
const nameByBurg = burgCell && P(.5);
|
||||
const name = nameByBurg ? burgs[burg].name : Names.getState(Names.getCultureShort(c), c);
|
||||
const f = pack.features[cells.f[center]];
|
||||
const provCells = stateNoProvince.filter(i => cells.province[i] === province);
|
||||
const singleIsle = provCells.length === f.cells && !provCells.find(i => cells.f[i] !== f.i);
|
||||
|
|
@ -1042,6 +1046,7 @@
|
|||
const fullName = name + " " + formName;
|
||||
const color = getMixedColor(s.color);
|
||||
const coa = COA.generate(s.coa);
|
||||
coa.shield = getShield(c, s.i);
|
||||
provinces.push({i:province, state:s.i, center, burg, name, formName, fullName, color, coa});
|
||||
s.provinces.push(province);
|
||||
|
||||
|
|
|
|||
|
|
@ -191,7 +191,6 @@
|
|||
};
|
||||
|
||||
const generate = function(parent) {
|
||||
TIME && console.time("generateCOA");
|
||||
let usedPattern = null, usedTinctures = [];
|
||||
|
||||
// TODO
|
||||
|
|
@ -199,8 +198,10 @@
|
|||
// stringify coa on save and load
|
||||
// regenerateAll
|
||||
// generate on new item creation
|
||||
// shields for cultures
|
||||
// old versions auti migration
|
||||
// old versions auto migration: coa generation for cultures and states etc.
|
||||
// emblems layer for old maps
|
||||
// define emblems layer style for all styles
|
||||
// add coa on click events for loaded map
|
||||
|
||||
const t1 = parent && P(.25) ? parent.t1 : getTincture("field");
|
||||
const coa = {t1};
|
||||
|
|
@ -427,7 +428,6 @@
|
|||
return .7; // 1, 2
|
||||
}
|
||||
|
||||
TIME && console.timeEnd("generateCOA");
|
||||
return coa;
|
||||
}
|
||||
|
||||
|
|
@ -442,7 +442,8 @@
|
|||
}
|
||||
|
||||
const toString = coa => JSON.stringify(coa).replaceAll("#", "%23");
|
||||
const copy = coa => JSON.parse(JSON.stringify(coa));
|
||||
|
||||
return {generate, generateAll, toString};
|
||||
return {generate, generateAll, toString, copy};
|
||||
|
||||
})));
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
count = Math.floor(populated.length / 50);
|
||||
if (!count) {
|
||||
WARN && console.warn(`There are no populated cells. Cannot generate cultures`);
|
||||
pack.cultures = [{name:"Wildlands", i:0, base:1, shield:"moriaOrc"}];
|
||||
pack.cultures = [{name:"Wildlands", i:0, base:1, shield:"round"}];
|
||||
alertMessage.innerHTML = `
|
||||
The climate is harsh and people cannot live in this world.<br>
|
||||
No cultures, states and burgs will be created.<br>
|
||||
|
|
@ -41,6 +41,7 @@
|
|||
const cultures = pack.cultures = getRandomCultures(count);
|
||||
const centers = d3.quadtree();
|
||||
const colors = getColors(count);
|
||||
const emblemShape = document.getElementById("emblemShape").value;
|
||||
|
||||
cultures.forEach(function(c, i) {
|
||||
const cell = c.center = placeCenter(c.sort ? c.sort : (i) => cells.s[i]);
|
||||
|
|
@ -54,8 +55,26 @@
|
|||
c.origin = 0;
|
||||
c.code = getCode(c.name);
|
||||
cells.culture[cell] = i+1;
|
||||
if (emblemShape === "random") c.shield = getRandomShiled();
|
||||
else if (emblemShape !== "culture" && emblemShape !== "state") c.shield = emblemShape;
|
||||
});
|
||||
|
||||
function getRandomShiled() {
|
||||
const shields = {
|
||||
types: {basic: 10, regional: 2, historical: 1, specific: 1, banner: 1, simple: 2, fantasy: 1, middleEarth: 0},
|
||||
basic: {heater: 12, spanish: 6, french: 1},
|
||||
regional: {horsehead: 1, horsehead2: 1, polish: 1, hessen: 1, swiss: 1},
|
||||
historical: {boeotian: 1, roman: 2, kite: 1, oldFrench: 5, renaissance: 2, baroque: 2},
|
||||
specific: {targe: 1, targe2: 0, pavise: 5, wedged: 10},
|
||||
banner: {flag: 1, pennon: 0, guidon: 0, banner: 0, dovetail: 1, gonfalon: 5, pennant: 0},
|
||||
simple: {round: 12, oval: 6, vesicaPiscis: 1, square: 1, diamond: 2, no: 0},
|
||||
fantasy: {fantasy1: 2, fantasy2: 2, fantasy3: 1, fantasy4: 1, fantasy5: 3},
|
||||
middleEarth: {noldor: 1, gondor: 1, easterling: 1, erebor: 1, ironHills: 1, urukHai: 1, moriaOrc: 1}
|
||||
}
|
||||
const type = rw(shields.types);
|
||||
return rw(shields[type]);
|
||||
}
|
||||
|
||||
function placeCenter(v) {
|
||||
let c, spacing = (graphWidth + graphHeight) / 2 / count;
|
||||
const sorted = [...populated].sort((a, b) => v(b) - v(a)), max = Math.floor(sorted.length / 2);
|
||||
|
|
@ -65,10 +84,13 @@
|
|||
}
|
||||
|
||||
// the first culture with id 0 is for wildlands
|
||||
cultures.unshift({name:"Wildlands", i:0, base:1, origin:null});
|
||||
cultures.unshift({name:"Wildlands", i:0, base:1, origin:null, shield:"round"});
|
||||
|
||||
// make sure all bases exist in nameBases
|
||||
if (!nameBases.length) {ERROR && console.error("Name base is empty, default nameBases will be applied"); nameBases = Names.getNameBases();}
|
||||
if (!nameBases.length) {
|
||||
ERROR && console.error("Name base is empty, default nameBases will be applied");
|
||||
nameBases = Names.getNameBases();
|
||||
}
|
||||
cultures.forEach(c => c.base = c.base % nameBases.length);
|
||||
|
||||
function getRandomCultures(c) {
|
||||
|
|
|
|||
|
|
@ -2,6 +2,15 @@
|
|||
function editEmblem(type, id, el) {
|
||||
if (customization) return;
|
||||
|
||||
if (!id && d3.event) {
|
||||
const data = d3.event.target.__data__;
|
||||
type = data.type;
|
||||
id = data.id;
|
||||
el = data.el;
|
||||
}
|
||||
|
||||
emblems.selectAll(":scope > use").call(d3.drag().on("drag", dragEmblem)).classed("draggable", true);
|
||||
|
||||
const emblemStates = document.getElementById("emblemStates");
|
||||
const emblemProvinces = document.getElementById("emblemProvinces");
|
||||
const emblemBurgs = document.getElementById("emblemBurgs");
|
||||
|
|
@ -10,8 +19,9 @@ function editEmblem(type, id, el) {
|
|||
updateElementSelectors(type, id, el);
|
||||
|
||||
$("#emblemEditor").dialog({
|
||||
title: "Edit Emblem", resizable: true, width: "auto",
|
||||
position: {my: "left top", at: "left+10 top+10", of: "svg", collision: "fit"}
|
||||
title: "Edit Emblem", resizable: true, width: "auto", height: "auto",
|
||||
position: {my: "left top", at: "left+10 top+10", of: "svg", collision: "fit"},
|
||||
close: closeEmblemEditor
|
||||
});
|
||||
|
||||
if (modules.editEmblem) return;
|
||||
|
|
@ -32,13 +42,19 @@ function editEmblem(type, id, el) {
|
|||
|
||||
// define selected values
|
||||
if (type === "state") state = el.i;
|
||||
else if (type === "province") {province = el.i; state = states[el.state].i;}
|
||||
else {burg = el.i; province = provinces[cells.province[el.cell]].i; state = provinces[province].state;}
|
||||
else if (type === "province") {
|
||||
province = el.i
|
||||
state = states[el.state].i;
|
||||
} else {
|
||||
burg = el.i;
|
||||
province = cells.province[el.cell] ? provinces[cells.province[el.cell]].i : 0;
|
||||
state = provinces[province].state || 0;
|
||||
}
|
||||
|
||||
// update option list and select actual values
|
||||
emblemStates.options.length = 0;
|
||||
const neutralBurgs = burgs.filter(burg => burg.i && !burg.removed && !burg.state);
|
||||
if (neutralBurgs.length) emblemProvinces.options.add(new Option(states[0].name, 0, false, !state));
|
||||
if (neutralBurgs.length) emblemStates.options.add(new Option(states[0].name, 0, false, !state));
|
||||
const stateList = states.filter(state => state.i && !state.removed);
|
||||
stateList.forEach(s => emblemStates.options.add(new Option(s.name, s.i, false, s.i === state)));
|
||||
|
||||
|
|
@ -50,7 +66,7 @@ function editEmblem(type, id, el) {
|
|||
emblemBurgs.options.length = 0;
|
||||
emblemBurgs.options.add(new Option("", 0, false, !burg));
|
||||
const burgList = burgs.filter(burg => !burg.removed && province ? cells.province[burg.cell] === province : burg.state === state);
|
||||
burgList.forEach(b => emblemBurgs.options.add(new Option(b.name, b.i, false, b.i === burg)));
|
||||
burgList.forEach(b => emblemBurgs.options.add(new Option(b.capital ? "👑 " + b.name : b.name, b.i, false, b.i === burg)));
|
||||
emblemBurgs.options[0].disabled = true;
|
||||
|
||||
COArenderer.trigger(id, el.coa);
|
||||
|
|
@ -105,4 +121,18 @@ function editEmblem(type, id, el) {
|
|||
id = "burgCOA"+ burg;
|
||||
updateElementSelectors(type, id, el);
|
||||
}
|
||||
|
||||
function dragEmblem() {
|
||||
const tr = parseTransform(this.getAttribute("transform"));
|
||||
const x = +tr[0] - d3.event.x, y = +tr[1] - d3.event.y;
|
||||
|
||||
d3.event.on("drag", function() {
|
||||
const transform = `translate(${(x + d3.event.x)},${(y + d3.event.y)})`;
|
||||
this.setAttribute("transform", transform);
|
||||
});
|
||||
}
|
||||
|
||||
function closeEmblemEditor() {
|
||||
emblems.selectAll(":scope > use").call(d3.drag().on("drag", null)).attr("class", null);
|
||||
}
|
||||
}
|
||||
|
|
@ -21,7 +21,8 @@ function clicked() {
|
|||
const p = d3.mouse(this);
|
||||
const i = findCell(p[0], p[1]);
|
||||
|
||||
if (parent.id === "rivers") editRiver();
|
||||
if (parent.id === "emblems") editEmblem();
|
||||
else if (parent.id === "rivers") editRiver();
|
||||
else if (grand.id === "routes") editRoute();
|
||||
else if (el.tagName === "tspan" && grand.parentNode.parentNode.id === "labels") editLabel();
|
||||
else if (grand.id === "burgLabels") editBurg();
|
||||
|
|
|
|||
|
|
@ -94,6 +94,14 @@ function showMapTooltip(point, e, i, g) {
|
|||
tip(e.target.parentNode.dataset.name + ". Click to edit");
|
||||
return;
|
||||
}
|
||||
if (group === "emblems" && e.target.__data__?.el) {
|
||||
const el = d3.select(e.target);
|
||||
el.raise();
|
||||
const name = el.datum().el.fullName || el.datum().el.name || "";
|
||||
const type = el.datum().type || "";
|
||||
tip(`${name} ${type} emblem. Click to edit`);
|
||||
return;
|
||||
}
|
||||
if (group === "rivers") {
|
||||
const river = +e.target.id.slice(5);
|
||||
const r = pack.rivers.find(r => r.i === river);
|
||||
|
|
@ -171,7 +179,7 @@ function highlightEditorLine(editor, id, timeout = 15000) {
|
|||
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
|
||||
if (timeout) setTimeout(() => hovered.classList.remove("hovered"), timeout);
|
||||
if (timeout) setTimeout(() => {hovered && hovered.classList.remove("hovered")}, timeout);
|
||||
}
|
||||
|
||||
// get cell info on mouse move
|
||||
|
|
@ -454,6 +462,7 @@ document.addEventListener("keyup", event => {
|
|||
else if (key === 78) togglePopulation(); // "N" to toggle Population layer
|
||||
else if (key === 74) toggleIce(); // "J" to toggle Ice layer
|
||||
else if (key === 65) togglePrec(); // "A" to toggle Precipitation layer
|
||||
else if (key === 89) toggleEmblems(); // "Y" to toggle Emblems layer
|
||||
else if (key === 76) toggleLabels(); // "L" to toggle Labels layer
|
||||
else if (key === 73) toggleIcons(); // "I" to toggle Icons layer
|
||||
else if (key === 77) toggleMilitary(); // "M" to toggle Military layer
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ function restoreLayers() {
|
|||
if (layerIsOn("toggleProvinces")) drawProvinces();
|
||||
if (layerIsOn("toggleReligions")) drawReligions();
|
||||
if (layerIsOn("toggleIce")) drawIce();
|
||||
if (layerIsOn("toggleEmblems")) drawEmblems();
|
||||
|
||||
// states are getting rendered each time, if it's not required than layers should be hidden
|
||||
if (!layerIsOn("toggleBorders")) $('#borders').fadeOut();
|
||||
|
|
@ -877,6 +878,26 @@ function drawProvinces() {
|
|||
const labelsOn = provs.attr("data-labels") == 1;
|
||||
provs.selectAll("*").remove();
|
||||
|
||||
const provinces = pack.provinces;
|
||||
const {body, gap} = getProvincesVertices();
|
||||
|
||||
const g = provs.append("g").attr("id", "provincesBody");
|
||||
const bodyData = body.map((p, i) => [p.length > 10 ? p : null, i, provinces[i].color]).filter(d => d[0]);
|
||||
g.selectAll("path").data(bodyData).enter().append("path").attr("d", d => d[0]).attr("fill", d => d[2]).attr("stroke", "none").attr("id", d => "province"+d[1]);
|
||||
const gapData = gap.map((p, i) => [p.length > 10 ? p : null, i, provinces[i].color]).filter(d => d[0]);
|
||||
g.selectAll(".path").data(gapData).enter().append("path").attr("d", d => d[0]).attr("fill", "none").attr("stroke", d => d[2]).attr("id", d => "province-gap"+d[1]);
|
||||
|
||||
const labels = provs.append("g").attr("id", "provinceLabels");
|
||||
labels.style("display", `${labelsOn ? "block" : "none"}`);
|
||||
const labelData = provinces.filter(p => p.i && !p.removed);
|
||||
labels.selectAll(".path").data(labelData).enter().append("text")
|
||||
.attr("x", d => d.pole[0]).attr("y", d => d.pole[1])
|
||||
.attr("id", d => "provinceLabel"+d.i).text(d => d.name);
|
||||
|
||||
TIME && console.timeEnd("drawProvinces");
|
||||
}
|
||||
|
||||
function getProvincesVertices() {
|
||||
const cells = pack.cells, vertices = pack.vertices, provinces = pack.provinces, n = cells.i.length;
|
||||
const used = new Uint8Array(cells.i.length);
|
||||
const vArray = new Array(provinces.length); // store vertices array
|
||||
|
|
@ -906,18 +927,7 @@ function drawProvinces() {
|
|||
provinces[i].pole = polylabel(sorted, 1.0); // pole of inaccessibility
|
||||
});
|
||||
|
||||
const g = provs.append("g").attr("id", "provincesBody");
|
||||
const bodyData = body.map((p, i) => [p.length > 10 ? p : null, i, provinces[i].color]).filter(d => d[0]);
|
||||
g.selectAll("path").data(bodyData).enter().append("path").attr("d", d => d[0]).attr("fill", d => d[2]).attr("stroke", "none").attr("id", d => "province"+d[1]);
|
||||
const gapData = gap.map((p, i) => [p.length > 10 ? p : null, i, provinces[i].color]).filter(d => d[0]);
|
||||
g.selectAll(".path").data(gapData).enter().append("path").attr("d", d => d[0]).attr("fill", "none").attr("stroke", d => d[2]).attr("id", d => "province-gap"+d[1]);
|
||||
|
||||
const labels = provs.append("g").attr("id", "provinceLabels");
|
||||
labels.style("display", `${labelsOn ? "block" : "none"}`);
|
||||
const labelData = provinces.filter(p => p.i && !p.removed);
|
||||
labels.selectAll(".path").data(labelData).enter().append("text")
|
||||
.attr("x", d => d.pole[0]).attr("y", d => d.pole[1])
|
||||
.attr("id", d => "provinceLabel"+d.i).text(d => d.name);
|
||||
return {body, gap};
|
||||
|
||||
// connect vertices to chain
|
||||
function connectVertices(start, t, province) {
|
||||
|
|
@ -942,7 +952,7 @@ function drawProvinces() {
|
|||
chain.push([start, province, land]); // add starting vertex to sequence to close the path
|
||||
return chain;
|
||||
}
|
||||
TIME && console.timeEnd("drawProvinces");
|
||||
|
||||
}
|
||||
|
||||
function toggleGrid(event) {
|
||||
|
|
@ -1214,7 +1224,71 @@ function toggleZones(event) {
|
|||
if (event && isCtrlClick(event)) {editStyle("zones"); return;}
|
||||
turnButtonOff("toggleZones");
|
||||
$('#zones').fadeOut();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function toggleEmblems(event) {
|
||||
if (!layerIsOn("toggleEmblems")) {
|
||||
turnButtonOn("toggleEmblems");
|
||||
if (!emblems.selectAll("*").size()) drawEmblems();
|
||||
$('#emblems').fadeIn();
|
||||
if (event && isCtrlClick(event)) editStyle("emblems");
|
||||
} else {
|
||||
if (event && isCtrlClick(event)) {editStyle("emblems"); return;}
|
||||
$('#emblems').fadeOut();
|
||||
turnButtonOff("toggleEmblems");
|
||||
}
|
||||
}
|
||||
|
||||
function drawEmblems() {
|
||||
TIME && console.time("drawEmblems");
|
||||
const {states, provinces, burgs, cells} = pack;
|
||||
|
||||
let svg = "";
|
||||
|
||||
// const sizeBurgs = +emblems.attr("size-burgs") || 15;
|
||||
// burgs.filter(b => b.i && !b.removed && b.coa).forEach(burg => {
|
||||
// const {x, y} = burg;
|
||||
// COArenderer.trigger("burgCOA"+burg.i, burg.coa);
|
||||
// svg += `<use x=${x-sizeBurgs/2} y=${y-sizeBurgs/2} width=${sizeBurgs} height=${sizeBurgs} href="#burgCOA${burg.i}"></use>`;
|
||||
// });
|
||||
|
||||
const sizeProvinces = +emblems.attr("size-provinces") || 25;
|
||||
const provinceCOAs = provinces.filter(p => p.i && !p.removed && p.coa).map(province => {
|
||||
if (!province.pole) getProvincesVertices();
|
||||
const [x, y] = province.pole;
|
||||
COArenderer.trigger("provinceCOA"+province.i, province.coa);
|
||||
//svg += `<use x=${x-sizeProvinces/2} y=${y-sizeProvinces/2} width=${sizeProvinces} height=${sizeProvinces} href="#provinceCOA${province.i}"></use>`;
|
||||
return {type: "province", id: "provinceCOA"+province.i, x: x - sizeProvinces/2, y: y - sizeProvinces/2, size: sizeProvinces, el: province};
|
||||
});
|
||||
|
||||
const sizeStates = +emblems.attr("size-states") || 50;
|
||||
const stateCOAs = states.filter(s => s.i && !s.removed && s.coa).map(state => {
|
||||
const [x, y] = state.pole;
|
||||
COArenderer.trigger("stateCOA"+state.i, state.coa);
|
||||
//svg += `<use x=${x-sizeStates/2} y=${y-sizeStates/2} width=${sizeStates} height=${sizeStates} href="#stateCOA${state.i}"></use>`;
|
||||
return {type: "state", id: "stateCOA"+state.i, x: x - sizeStates/2, y: y - sizeStates/2, size: sizeStates, el: state};
|
||||
});
|
||||
|
||||
const nodes = provinceCOAs.concat(stateCOAs);
|
||||
// emblems.html(svg);
|
||||
|
||||
const simulation = d3.forceSimulation(nodes)
|
||||
.alphaMin(.6).alphaDecay(.2)
|
||||
.force('collision', d3.forceCollide().radius(d => d.size/2));
|
||||
|
||||
const node = emblems.selectAll("use").data(nodes).join("use")
|
||||
.attr("href", d => "#"+d.id)
|
||||
.attr("x", d => d.x)
|
||||
.attr("y", d => d.y)
|
||||
.attr("width", d => d.size)
|
||||
.attr("height", d => d.size);
|
||||
|
||||
simulation.on("tick", () => {
|
||||
node.attr("x", d => d.x).attr("y", d => d.y);
|
||||
});
|
||||
|
||||
TIME && console.timeEnd("drawEmblems");
|
||||
}
|
||||
|
||||
function layerIsOn(el) {
|
||||
|
|
@ -1262,6 +1336,7 @@ function getLayer(id) {
|
|||
if (id === "togglePopulation") return $("#population");
|
||||
if (id === "toggleIce") return $("#ice");
|
||||
if (id === "toggleTexture") return $("#texture");
|
||||
if (id === "toggleEmblems") return $("#emblems");
|
||||
if (id === "toggleLabels") return $("#labels");
|
||||
if (id === "toggleIcons") return $("#icons");
|
||||
if (id === "toggleMarkers") return $("#markers");
|
||||
|
|
|
|||
|
|
@ -114,6 +114,7 @@ optionsContent.addEventListener("input", function(event) {
|
|||
else if (id === "neutralOutput") neutralInput.value = value;
|
||||
else if (id === "manorsInput") changeBurgsNumberSlider(value);
|
||||
else if (id === "religionsInput") religionsOutput.value = value;
|
||||
else if (id === "emblemShape") changeEmblemShape(value);
|
||||
else if (id === "uiSizeInput") uiSizeOutput.value = value;
|
||||
else if (id === "uiSizeOutput") changeUIsize(value);
|
||||
else if (id === "tooltipSizeInput" || id === "tooltipSizeOutput") changeTooltipSize(value);
|
||||
|
|
@ -262,6 +263,17 @@ function changeCultureSet() {
|
|||
if (+culturesOutput.value > +max) culturesInput.value = culturesOutput.value = max;
|
||||
}
|
||||
|
||||
function changeEmblemShape(value) {
|
||||
const image = document.getElementById("emblemShapeImage");
|
||||
const shapeEl = document.getElementById(value);
|
||||
if (shapeEl) {
|
||||
const shape = shapeEl.querySelector("path").getAttribute("d");
|
||||
image.setAttribute("d", shape);
|
||||
} else {
|
||||
image.removeAttribute("d");
|
||||
}
|
||||
}
|
||||
|
||||
function changeStatesNumber(value) {
|
||||
regionsInput.value = regionsOutput.value = value;
|
||||
regionsOutput.style.color = +value ? null : "#b12117";
|
||||
|
|
@ -380,6 +392,7 @@ function randomizeOptions() {
|
|||
|
||||
// World settings
|
||||
generateEra();
|
||||
changeEmblemShape(emblemShape.value); // change emblem shape image
|
||||
}
|
||||
|
||||
// select heightmap template pseudo-randomly
|
||||
|
|
|
|||
|
|
@ -795,6 +795,8 @@ function applyDefaultStyle() {
|
|||
labels.select("#addedLabels").attr("fill", "#3e3e4b").attr("opacity", 1).attr("stroke", "#3a3a3a").attr("stroke-width", 0).attr("font-family", "Almendra SC").attr("data-font", "Almendra+SC").attr("font-size", 18).attr("data-size", 18).attr("filter", null);
|
||||
|
||||
fogging.attr("opacity", .98).attr("fill", "#30426f");
|
||||
|
||||
emblems.attr("opacity", .9).attr("size-states", 50).attr("size-provinces", 25).attr("size-burgs", 15).attr("filter", null);
|
||||
}
|
||||
|
||||
// apply style settings in JSON
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue