mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-18 02:01:22 +01:00
refactor: replace fmg.modules with local vars
This commit is contained in:
Azgaar
parent
80bf0ef688
commit
a97e7f44f6
31 changed files with 141 additions and 95 deletions
|
|
@ -9,6 +9,8 @@ import {capitalize} from "utils/stringUtils";
|
|||
import {getAdjective, list} from "utils/languageUtils";
|
||||
import {closeDialogs} from "dialogs/utils";
|
||||
|
||||
let isLoaded = false;
|
||||
|
||||
export class Battle {
|
||||
constructor(attacker, defender) {
|
||||
if (customization) return;
|
||||
|
|
@ -42,8 +44,8 @@ export class Battle {
|
|||
close: () => Battle.prototype.context.cancelResults()
|
||||
});
|
||||
|
||||
if (fmg.modules.Battle) return;
|
||||
fmg.modules.Battle = true;
|
||||
if (isLoaded) return;
|
||||
isLoaded = true;
|
||||
|
||||
// add listeners
|
||||
document.getElementById("battleType").addEventListener("click", ev => this.toggleChange(ev));
|
||||
|
|
|
|||
|
|
@ -421,6 +421,5 @@ function showElevationProfile(data, routeLen, isRiver) {
|
|||
document.getElementById("epCurve").removeEventListener("change", draw);
|
||||
document.getElementById("epSave").removeEventListener("click", downloadCSV);
|
||||
document.getElementById("elevationGraph").innerHTML = "";
|
||||
fmg.modules.elevation = false;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,590 +0,0 @@
|
|||
import * as d3 from "d3";
|
||||
|
||||
import {clearMainTip} from "scripts/tooltips";
|
||||
import {tip} from "scripts/tooltips";
|
||||
import {openURL} from "utils/linkUtils";
|
||||
import {rn} from "utils/numberUtils";
|
||||
import {parseTransform} from "utils/stringUtils";
|
||||
|
||||
export function editEmblem(type, id, el) {
|
||||
if (customization) return;
|
||||
if (!id && d3.event) defineEmblemData(d3.event);
|
||||
|
||||
emblems.selectAll("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");
|
||||
const emblemShapeSelector = document.getElementById("emblemShapeSelector");
|
||||
|
||||
updateElementSelectors(type, id, el);
|
||||
|
||||
$("#emblemEditor").dialog({
|
||||
title: "Edit Emblem",
|
||||
resizable: true,
|
||||
width: "18.2em",
|
||||
height: "auto",
|
||||
position: {my: "left top", at: "left+10 top+10", of: "svg", collision: "fit"},
|
||||
close: closeEmblemEditor
|
||||
});
|
||||
|
||||
// add listeners,then remove on closure
|
||||
emblemStates.oninput = selectState;
|
||||
emblemProvinces.oninput = selectProvince;
|
||||
emblemBurgs.oninput = selectBurg;
|
||||
emblemShapeSelector.oninput = changeShape;
|
||||
document.getElementById("emblemSizeSlider").oninput = changeSize;
|
||||
document.getElementById("emblemSizeNumber").oninput = changeSize;
|
||||
document.getElementById("emblemsRegenerate").onclick = regenerate;
|
||||
document.getElementById("emblemsArmoria").onclick = openInArmoria;
|
||||
document.getElementById("emblemsUpload").onclick = toggleUpload;
|
||||
document.getElementById("emblemsUploadImage").onclick = () => emblemImageToLoad.click();
|
||||
document.getElementById("emblemsUploadSVG").onclick = () => emblemSVGToLoad.click();
|
||||
document.getElementById("emblemImageToLoad").onchange = () => upload("image");
|
||||
document.getElementById("emblemSVGToLoad").onchange = () => upload("svg");
|
||||
document.getElementById("emblemsDownload").onclick = toggleDownload;
|
||||
document.getElementById("emblemsDownloadSVG").onclick = () => download("svg");
|
||||
document.getElementById("emblemsDownloadPNG").onclick = () => download("png");
|
||||
document.getElementById("emblemsDownloadJPG").onclick = () => download("jpeg");
|
||||
document.getElementById("emblemsGallery").onclick = downloadGallery;
|
||||
document.getElementById("emblemsFocus").onclick = showArea;
|
||||
|
||||
function defineEmblemData(e) {
|
||||
const parent = e.target.parentNode;
|
||||
const [g, t] =
|
||||
parent.id === "burgEmblems"
|
||||
? [pack.burgs, "burg"]
|
||||
: parent.id === "provinceEmblems"
|
||||
? [pack.provinces, "province"]
|
||||
: [pack.states, "state"];
|
||||
const i = +e.target.dataset.i;
|
||||
type = t;
|
||||
id = type + "COA" + i;
|
||||
el = g[i];
|
||||
}
|
||||
|
||||
function updateElementSelectors(type, id, el) {
|
||||
let state = 0,
|
||||
province = 0,
|
||||
burg = 0;
|
||||
|
||||
// set active type
|
||||
emblemStates.parentElement.className = type === "state" ? "active" : "";
|
||||
emblemProvinces.parentElement.className = type === "province" ? "active" : "";
|
||||
emblemBurgs.parentElement.className = type === "burg" ? "active" : "";
|
||||
|
||||
// define selected values
|
||||
if (type === "state") state = el.i;
|
||||
else if (type === "province") {
|
||||
province = el.i;
|
||||
state = pack.states[el.state].i;
|
||||
} else {
|
||||
burg = el.i;
|
||||
province = pack.cells.province[el.cell] ? pack.provinces[pack.cells.province[el.cell]].i : 0;
|
||||
state = el.state;
|
||||
}
|
||||
|
||||
const validBurgs = pack.burgs.filter(burg => burg.i && !burg.removed && burg.coa);
|
||||
|
||||
// update option list and select actual values
|
||||
emblemStates.options.length = 0;
|
||||
const neutralBurgs = validBurgs.filter(burg => !burg.state);
|
||||
if (neutralBurgs.length) emblemStates.options.add(new Option(pack.states[0].name, 0, false, !state));
|
||||
const stateList = pack.states.filter(state => state.i && !state.removed);
|
||||
stateList.forEach(s => emblemStates.options.add(new Option(s.name, s.i, false, s.i === state)));
|
||||
|
||||
emblemProvinces.options.length = 0;
|
||||
emblemProvinces.options.add(new Option("", 0, false, !province));
|
||||
const provinceList = pack.provinces.filter(province => !province.removed && province.state === state);
|
||||
provinceList.forEach(p => emblemProvinces.options.add(new Option(p.name, p.i, false, p.i === province)));
|
||||
|
||||
emblemBurgs.options.length = 0;
|
||||
emblemBurgs.options.add(new Option("", 0, false, !burg));
|
||||
const burgList = validBurgs.filter(burg =>
|
||||
province ? pack.cells.province[burg.cell] === province : burg.state === state
|
||||
);
|
||||
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);
|
||||
updateEmblemData(type, id, el);
|
||||
}
|
||||
|
||||
function updateEmblemData(type, id, el) {
|
||||
if (!el.coa) return;
|
||||
document.getElementById("emblemImage").setAttribute("href", "#" + id);
|
||||
let name = el.fullName || el.name;
|
||||
if (type === "burg") name = "Burg of " + name;
|
||||
document.getElementById("emblemArmiger").innerText = name;
|
||||
|
||||
if (el.coa === "custom") emblemShapeSelector.disabled = true;
|
||||
else {
|
||||
emblemShapeSelector.disabled = false;
|
||||
emblemShapeSelector.value = el.coa.shield;
|
||||
}
|
||||
|
||||
const size = el.coaSize || 1;
|
||||
document.getElementById("emblemSizeSlider").value = size;
|
||||
document.getElementById("emblemSizeNumber").value = size;
|
||||
}
|
||||
|
||||
function selectState() {
|
||||
const state = +this.value;
|
||||
if (state) {
|
||||
type = "state";
|
||||
el = pack.states[state];
|
||||
id = "stateCOA" + state;
|
||||
} else {
|
||||
// select neutral burg if state is changed to Neutrals
|
||||
const neutralBurgs = pack.burgs.filter(burg => burg.i && !burg.removed && !burg.state);
|
||||
if (!neutralBurgs.length) return;
|
||||
type = "burg";
|
||||
el = neutralBurgs[0];
|
||||
id = "burgCOA" + neutralBurgs[0].i;
|
||||
}
|
||||
updateElementSelectors(type, id, el);
|
||||
}
|
||||
|
||||
function selectProvince() {
|
||||
const province = +this.value;
|
||||
|
||||
if (province) {
|
||||
type = "province";
|
||||
el = pack.provinces[province];
|
||||
id = "provinceCOA" + province;
|
||||
} else {
|
||||
// select state if province is changed to null value
|
||||
const state = +emblemStates.value;
|
||||
type = "state";
|
||||
el = pack.states[state];
|
||||
id = "stateCOA" + state;
|
||||
}
|
||||
|
||||
updateElementSelectors(type, id, el);
|
||||
}
|
||||
|
||||
function selectBurg() {
|
||||
const burg = +this.value;
|
||||
type = "burg";
|
||||
el = pack.burgs[burg];
|
||||
id = "burgCOA" + burg;
|
||||
updateElementSelectors(type, id, el);
|
||||
}
|
||||
|
||||
function changeShape() {
|
||||
el.coa.shield = this.value;
|
||||
const coaEl = document.getElementById(id);
|
||||
if (coaEl) coaEl.remove();
|
||||
COArenderer.trigger(id, el.coa);
|
||||
}
|
||||
|
||||
function showArea() {
|
||||
const i = el.i;
|
||||
const cells = pack.cells;
|
||||
const animation = d3.transition().duration(1000).ease(d3.easeSinIn);
|
||||
|
||||
if (type === "burg") {
|
||||
const {x, y} = el;
|
||||
debug
|
||||
.append("circle")
|
||||
.attr("cx", x)
|
||||
.attr("cy", y)
|
||||
.attr("r", 0)
|
||||
.attr("fill", "none")
|
||||
.attr("stroke", "#d0240f")
|
||||
.attr("stroke-width", 1)
|
||||
.attr("opacity", 1)
|
||||
.transition(animation)
|
||||
.attr("r", 20)
|
||||
.attr("opacity", 0.1)
|
||||
.attr("stroke-width", 0)
|
||||
.remove();
|
||||
return;
|
||||
}
|
||||
|
||||
const [x, y] = el.pole || pack.cells.p[el.center];
|
||||
const obj = type === "state" ? cells.state : cells.province;
|
||||
const borderCells = cells.i.filter(id => obj[id] === i && cells.c[id].some(n => obj[n] !== i));
|
||||
const data = Array.from(borderCells)
|
||||
.filter((c, i) => !(i % 2))
|
||||
.map(i => cells.p[i])
|
||||
.map(i => [i[0], i[1], Math.hypot(i[0] - x, i[1] - y)]);
|
||||
|
||||
debug
|
||||
.selectAll("line")
|
||||
.data(data)
|
||||
.enter()
|
||||
.append("line")
|
||||
.attr("x1", x)
|
||||
.attr("y1", y)
|
||||
.attr("x2", d => d[0])
|
||||
.attr("y2", d => d[1])
|
||||
.attr("stroke", "#d0240f")
|
||||
.attr("stroke-width", 0.5)
|
||||
.attr("opacity", 0.2)
|
||||
.attr("stroke-dashoffset", d => d[2])
|
||||
.attr("stroke-dasharray", d => d[2])
|
||||
.transition(animation)
|
||||
.attr("stroke-dashoffset", 0)
|
||||
.attr("opacity", 1)
|
||||
.transition(animation)
|
||||
.delay(1000)
|
||||
.attr("stroke-dashoffset", d => d[2])
|
||||
.attr("opacity", 0)
|
||||
.remove();
|
||||
}
|
||||
|
||||
function changeSize() {
|
||||
const size = (el.coaSize = +this.value);
|
||||
document.getElementById("emblemSizeSlider").value = size;
|
||||
document.getElementById("emblemSizeNumber").value = size;
|
||||
|
||||
const g = emblems.select("#" + type + "Emblems");
|
||||
g.select("[data-i='" + el.i + "']").remove();
|
||||
if (!size) return;
|
||||
|
||||
// re-append use element
|
||||
const categotySize = +g.attr("font-size");
|
||||
const shift = (categotySize * size) / 2;
|
||||
const x = el.x || el.pole[0];
|
||||
const y = el.y || el.pole[1];
|
||||
g.append("use")
|
||||
.attr("data-i", el.i)
|
||||
.attr("x", rn(x - shift), 2)
|
||||
.attr("y", rn(y - shift), 2)
|
||||
.attr("width", size + "em")
|
||||
.attr("height", size + "em")
|
||||
.attr("href", "#" + id);
|
||||
}
|
||||
|
||||
function regenerate() {
|
||||
let parent = null;
|
||||
if (type === "province") parent = pack.states[el.state];
|
||||
else if (type === "burg") {
|
||||
const province = pack.cells.province[el.cell];
|
||||
parent = province ? pack.provinces[province] : pack.states[el.state];
|
||||
}
|
||||
|
||||
const shield = el.coa.shield || COA.getShield(el.culture || parent?.culture || 0, el.state);
|
||||
el.coa = COA.generate(parent ? parent.coa : null, 0.3, 0.1, null);
|
||||
el.coa.shield = shield;
|
||||
emblemShapeSelector.disabled = false;
|
||||
emblemShapeSelector.value = el.coa.shield;
|
||||
|
||||
const coaEl = document.getElementById(id);
|
||||
if (coaEl) coaEl.remove();
|
||||
COArenderer.trigger(id, el.coa);
|
||||
}
|
||||
|
||||
function openInArmoria() {
|
||||
const coa = el.coa && el.coa !== "custom" ? el.coa : {t1: "sable"};
|
||||
const json = JSON.stringify(coa).replaceAll("#", "%23");
|
||||
const url = `https://azgaar.github.io/Armoria/?coa=${json}&from=FMG`;
|
||||
openURL(url);
|
||||
}
|
||||
|
||||
function toggleUpload() {
|
||||
document.getElementById("emblemDownloadControl").classList.add("hidden");
|
||||
const buttons = document.getElementById("emblemUploadControl");
|
||||
buttons.classList.toggle("hidden");
|
||||
}
|
||||
|
||||
function upload(type) {
|
||||
const input =
|
||||
type === "image" ? document.getElementById("emblemImageToLoad") : document.getElementById("emblemSVGToLoad");
|
||||
const file = input.files[0];
|
||||
input.value = "";
|
||||
|
||||
if (file.size > 500000) {
|
||||
tip(
|
||||
`File is too big, please optimize file size up to 500kB and re-upload. Recommended size is 200x200 px and up to 100kB`,
|
||||
true,
|
||||
"error",
|
||||
5000
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
const reader = new FileReader();
|
||||
|
||||
reader.onload = function (readerEvent) {
|
||||
const result = readerEvent.target.result;
|
||||
const defs = document.getElementById("defs-emblems");
|
||||
const coa = document.getElementById(id); // old emblem
|
||||
|
||||
if (type === "image") {
|
||||
const svg = `<svg id="${id}" xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><image x="0" y="0" width="200" height="200" href="${result}"/></svg>`;
|
||||
defs.insertAdjacentHTML("beforeend", svg);
|
||||
} else {
|
||||
const el = document.createElement("html");
|
||||
el.innerHTML = result;
|
||||
|
||||
// remove sodipodi and inkscape attributes
|
||||
el.querySelectorAll("*").forEach(el => {
|
||||
const attributes = el.getAttributeNames();
|
||||
attributes.forEach(attr => {
|
||||
if (attr.includes("inkscape") || attr.includes("sodipodi")) el.removeAttribute(attr);
|
||||
});
|
||||
});
|
||||
|
||||
const svg = el.querySelector("svg");
|
||||
if (!svg) {
|
||||
tip(
|
||||
"The file should be prepated for load to FMG. Please use Armoria or other relevant tools",
|
||||
false,
|
||||
"error"
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
const newEmblem = defs.appendChild(svg);
|
||||
newEmblem.id = id;
|
||||
newEmblem.setAttribute("width", 200);
|
||||
newEmblem.setAttribute("height", 200);
|
||||
}
|
||||
|
||||
if (coa) coa.remove(); // remove old emblem
|
||||
el.coa = "custom";
|
||||
emblemShapeSelector.disabled = true;
|
||||
};
|
||||
|
||||
if (type === "image") reader.readAsDataURL(file);
|
||||
else reader.readAsText(file);
|
||||
}
|
||||
|
||||
function toggleDownload() {
|
||||
document.getElementById("emblemUploadControl").classList.add("hidden");
|
||||
const buttons = document.getElementById("emblemDownloadControl");
|
||||
buttons.classList.toggle("hidden");
|
||||
}
|
||||
|
||||
async function download(format) {
|
||||
const coa = document.getElementById(id);
|
||||
const size = +emblemsDownloadSize.value;
|
||||
const url = await getURL(coa, size);
|
||||
const link = document.createElement("a");
|
||||
link.download = getFileName(`Emblem ${el.fullName || el.name}`) + "." + format;
|
||||
|
||||
if (format === "svg") downloadSVG(url, link);
|
||||
else downloadRaster(format, url, link, size);
|
||||
document.getElementById("emblemDownloadControl").classList.add("hidden");
|
||||
}
|
||||
|
||||
function downloadSVG(url, link) {
|
||||
link.href = url;
|
||||
link.click();
|
||||
}
|
||||
|
||||
function downloadRaster(format, url, link, size) {
|
||||
const canvas = document.createElement("canvas");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = size;
|
||||
canvas.height = size;
|
||||
|
||||
const img = new Image();
|
||||
img.src = url;
|
||||
img.onload = function () {
|
||||
if (format === "jpeg") {
|
||||
ctx.fillStyle = "#fff";
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
}
|
||||
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
|
||||
const dataURL = canvas.toDataURL("image/" + format, 0.92);
|
||||
link.href = dataURL;
|
||||
link.click();
|
||||
window.setTimeout(() => window.URL.revokeObjectURL(dataURL), 6000);
|
||||
};
|
||||
}
|
||||
|
||||
async function getURL(svg, size) {
|
||||
const serialized = getSVG(svg, size);
|
||||
const blob = new Blob([serialized], {type: "image/svg+xml;charset=utf-8"});
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
window.setTimeout(() => window.URL.revokeObjectURL(url), 6000);
|
||||
return url;
|
||||
}
|
||||
|
||||
function getSVG(svg, size) {
|
||||
const clone = svg.cloneNode(true);
|
||||
clone.setAttribute("width", size);
|
||||
clone.setAttribute("height", size);
|
||||
return new XMLSerializer().serializeToString(clone);
|
||||
}
|
||||
|
||||
async function downloadGallery() {
|
||||
const name = getFileName("Emblems Gallery");
|
||||
const validStates = pack.states.filter(s => s.i && !s.removed && s.coa);
|
||||
const validProvinces = pack.provinces.filter(p => p.i && !p.removed && p.coa);
|
||||
const validBurgs = pack.burgs.filter(b => b.i && !b.removed && b.coa);
|
||||
await renderAllEmblems(validStates, validProvinces, validBurgs);
|
||||
runDownload();
|
||||
|
||||
function runDownload() {
|
||||
const back = `<a href="javascript:history.back()">Go Back</a>`;
|
||||
|
||||
const stateSection =
|
||||
`<div><h2>States</h2>` +
|
||||
validStates
|
||||
.map(state => {
|
||||
const el = document.getElementById("stateCOA" + state.i);
|
||||
return `<figure id="state_${state.i}"><a href="#provinces_${state.i}"><figcaption>${
|
||||
state.fullName
|
||||
}</figcaption>${getSVG(el, 200)}</a></figure>`;
|
||||
})
|
||||
.join("") +
|
||||
`</div>`;
|
||||
|
||||
const provinceSections = validStates
|
||||
.map(state => {
|
||||
const stateProvinces = validProvinces.filter(p => p.state === state.i);
|
||||
const figures = stateProvinces
|
||||
.map(province => {
|
||||
const el = document.getElementById("provinceCOA" + province.i);
|
||||
return `<figure id="province_${province.i}"><a href="#burgs_${province.i}"><figcaption>${
|
||||
province.fullName
|
||||
}</figcaption>${getSVG(el, 200)}</a></figure>`;
|
||||
})
|
||||
.join("");
|
||||
return stateProvinces.length
|
||||
? `<div id="provinces_${state.i}">${back}<h2>${state.fullName} provinces</h2>${figures}</div>`
|
||||
: "";
|
||||
})
|
||||
.join("");
|
||||
|
||||
const burgSections = validStates
|
||||
.map(state => {
|
||||
const stateBurgs = validBurgs.filter(b => b.state === state.i);
|
||||
let stateBurgSections = validProvinces
|
||||
.filter(p => p.state === state.i)
|
||||
.map(province => {
|
||||
const provinceBurgs = stateBurgs.filter(b => pack.cells.province[b.cell] === province.i);
|
||||
const provinceBurgFigures = provinceBurgs
|
||||
.map(burg => {
|
||||
const el = document.getElementById("burgCOA" + burg.i);
|
||||
return `<figure id="burg_${burg.i}"><figcaption>${burg.name}</figcaption>${getSVG(el, 200)}</figure>`;
|
||||
})
|
||||
.join("");
|
||||
return provinceBurgs.length
|
||||
? `<div id="burgs_${province.i}">${back}<h2>${province.fullName} burgs</h2>${provinceBurgFigures}</div>`
|
||||
: "";
|
||||
})
|
||||
.join("");
|
||||
|
||||
const stateBurgOutOfProvinces = stateBurgs.filter(b => !pack.cells.province[b.cell]);
|
||||
const stateBurgOutOfProvincesFigures = stateBurgOutOfProvinces
|
||||
.map(burg => {
|
||||
const el = document.getElementById("burgCOA" + burg.i);
|
||||
return `<figure id="burg_${burg.i}"><figcaption>${burg.name}</figcaption>${getSVG(el, 200)}</figure>`;
|
||||
})
|
||||
.join("");
|
||||
if (stateBurgOutOfProvincesFigures)
|
||||
stateBurgSections += `<div><h2>${state.fullName} burgs under direct control</h2>${stateBurgOutOfProvincesFigures}</div>`;
|
||||
return stateBurgSections;
|
||||
})
|
||||
.join("");
|
||||
|
||||
const neutralBurgs = validBurgs.filter(b => !b.state);
|
||||
const neutralsSection = neutralBurgs.length
|
||||
? "<div><h2>Independent burgs</h2>" +
|
||||
neutralBurgs
|
||||
.map(burg => {
|
||||
const el = document.getElementById("burgCOA" + burg.i);
|
||||
return `<figure id="burg_${burg.i}"><figcaption>${burg.name}</figcaption>${getSVG(el, 200)}</figure>`;
|
||||
})
|
||||
.join("") +
|
||||
"</div>"
|
||||
: "";
|
||||
|
||||
const FMG = `<a href="https://azgaar.github.io/Fantasy-Map-Generator" target="_blank">Azgaar's Fantasy Map Generator</a>`;
|
||||
const license = `<a target="_blank" href="https://github.com/Azgaar/Armoria#license">the license</a>`;
|
||||
const html = /* html */ `<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>${mapName.value} Emblems Gallery</title>
|
||||
</head>
|
||||
<style type="text/css">
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 1em;
|
||||
font-family: serif;
|
||||
}
|
||||
h1,
|
||||
h2 {
|
||||
font-family: "Forum";
|
||||
}
|
||||
div {
|
||||
width: 100%;
|
||||
max-width: 1018px;
|
||||
margin: 0 auto;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
figure {
|
||||
margin: 0 0 2em;
|
||||
display: inline-block;
|
||||
transition: 0.2s;
|
||||
}
|
||||
figure:hover {
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
figcaption {
|
||||
text-align: center;
|
||||
margin: 0.4em 0;
|
||||
width: 200px;
|
||||
font-family: "Overlock SC";
|
||||
}
|
||||
address {
|
||||
width: 100%;
|
||||
max-width: 1018px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
a {
|
||||
color: black;
|
||||
}
|
||||
figure > a {
|
||||
text-decoration: none;
|
||||
}
|
||||
div > a {
|
||||
float: right;
|
||||
font-family: monospace;
|
||||
margin-top: 0.8em;
|
||||
}
|
||||
</style>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Forum&family=Overlock+SC" rel="stylesheet" />
|
||||
<body>
|
||||
<div><h1>${mapName.value} Emblems Gallery</h1></div>
|
||||
${stateSection} ${provinceSections} ${burgSections} ${neutralsSection}
|
||||
<address>Generated by ${FMG}. The tool is free, but images may be copyrighted, see ${license}</address>
|
||||
</body>
|
||||
</html>`;
|
||||
downloadFile(html, name + ".html", "text/plain");
|
||||
}
|
||||
}
|
||||
|
||||
async function renderAllEmblems(states, provinces, burgs) {
|
||||
tip("Preparing for download...", true, "warn");
|
||||
|
||||
const statePromises = states.map(state => COArenderer.trigger("stateCOA" + state.i, state.coa));
|
||||
const provincePromises = provinces.map(province => COArenderer.trigger("provinceCOA" + province.i, province.coa));
|
||||
const burgPromises = burgs.map(burg => COArenderer.trigger("burgCOA" + burg.i, burg.coa));
|
||||
const promises = [...statePromises, ...provincePromises, ...burgPromises];
|
||||
|
||||
return Promise.allSettled(promises).then(res => clearMainTip());
|
||||
}
|
||||
|
||||
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("use").call(d3.drag().on("drag", null)).attr("class", null);
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load diff
|
|
@ -7,6 +7,8 @@ import {ra} from "utils/probabilityUtils";
|
|||
import {parseTransform} from "utils/stringUtils";
|
||||
import {closeDialogs} from "dialogs/utils";
|
||||
|
||||
let isLoaded = false;
|
||||
|
||||
export function editIce() {
|
||||
if (customization) return;
|
||||
closeDialogs(".stable");
|
||||
|
|
@ -26,8 +28,8 @@ export function editIce() {
|
|||
close: closeEditor
|
||||
});
|
||||
|
||||
if (fmg.modules.editIce) return;
|
||||
fmg.modules.editIce = true;
|
||||
if (isLoaded) return;
|
||||
isLoaded = true;
|
||||
|
||||
// add listeners
|
||||
document.getElementById("iceEditStyle").addEventListener("click", () => editStyle("ice"));
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@ import {tip, showMainTip} from "scripts/tooltips";
|
|||
import {round, parseTransform} from "utils/stringUtils";
|
||||
import {closeDialogs} from "dialogs/utils";
|
||||
|
||||
let isLoaded = false;
|
||||
|
||||
export function editLabel() {
|
||||
if (customization) return;
|
||||
closeDialogs();
|
||||
|
|
@ -26,8 +28,8 @@ export function editLabel() {
|
|||
selectLabelGroup(text);
|
||||
updateValues(textPath);
|
||||
|
||||
if (fmg.modules.editLabel) return;
|
||||
fmg.modules.editLabel = true;
|
||||
if (isLoaded) return;
|
||||
isLoaded = true;
|
||||
|
||||
// add listeners
|
||||
document.getElementById("labelGroupShow").addEventListener("click", showGroupSection);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,8 @@ import {rand} from "utils/probabilityUtils";
|
|||
import {round} from "utils/stringUtils";
|
||||
import {getArea, getAreaUnit, getHeight, si} from "utils/unitUtils";
|
||||
|
||||
let isLoaded = false;
|
||||
|
||||
export function editLake() {
|
||||
if (customization) return;
|
||||
closeDialogs(".stable");
|
||||
|
|
@ -28,8 +30,8 @@ export function editLake() {
|
|||
drawLakeVertices();
|
||||
viewbox.on("touchmove mousemove", null);
|
||||
|
||||
if (fmg.modules.editLake) return;
|
||||
fmg.modules.editLake = true;
|
||||
if (isLoaded) return;
|
||||
isLoaded = true;
|
||||
|
||||
// add listeners
|
||||
document.getElementById("lakeName").addEventListener("input", changeName);
|
||||
|
|
|
|||
|
|
@ -7,6 +7,8 @@ import {capitalize} from "utils/stringUtils";
|
|||
import {si} from "utils/unitUtils";
|
||||
import {closeDialogs} from "dialogs/utils";
|
||||
|
||||
let isLoaded = false;
|
||||
|
||||
export function overviewMilitary() {
|
||||
if (customization) return;
|
||||
closeDialogs("#militaryOverview, .stable");
|
||||
|
|
@ -18,8 +20,9 @@ export function overviewMilitary() {
|
|||
addLines();
|
||||
$("#militaryOverview").dialog();
|
||||
|
||||
if (fmg.modules.overviewMilitary) return;
|
||||
fmg.modules.overviewMilitary = true;
|
||||
if (isLoaded) return;
|
||||
isLoaded = true;
|
||||
|
||||
updateHeaders();
|
||||
|
||||
$("#militaryOverview").dialog({
|
||||
|
|
@ -243,6 +246,8 @@ export function overviewMilitary() {
|
|||
}
|
||||
}
|
||||
|
||||
let isCustomizeLoaded = false;
|
||||
|
||||
function militaryCustomize() {
|
||||
const types = ["melee", "ranged", "mounted", "machinery", "naval", "armored", "aviation", "magical"];
|
||||
const tableBody = document.getElementById("militaryOptions").querySelector("tbody");
|
||||
|
|
@ -282,8 +287,8 @@ export function overviewMilitary() {
|
|||
}
|
||||
});
|
||||
|
||||
if (fmg.modules.overviewMilitaryCustomize) return;
|
||||
fmg.modules.overviewMilitaryCustomize = true;
|
||||
if (isCustomizeLoaded) return;
|
||||
isCustomizeLoaded = true;
|
||||
|
||||
tableBody.addEventListener("click", event => {
|
||||
const el = event.target;
|
||||
|
|
|
|||
|
|
@ -6,13 +6,15 @@ import {openURL} from "utils/linkUtils";
|
|||
import {rn} from "utils/numberUtils";
|
||||
import {closeDialogs} from "dialogs/utils";
|
||||
|
||||
let isLoaded = false;
|
||||
|
||||
export function editNamesbase() {
|
||||
if (customization) return;
|
||||
closeDialogs("#namesbaseEditor, .stable");
|
||||
$("#namesbaseEditor").dialog();
|
||||
|
||||
if (fmg.modules.editNamesbase) return;
|
||||
fmg.modules.editNamesbase = true;
|
||||
if (isLoaded) return;
|
||||
isLoaded = true;
|
||||
|
||||
// add listeners
|
||||
document.getElementById("namesbaseSelect").addEventListener("change", updateInputs);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
import {tip} from "scripts/tooltips";
|
||||
|
||||
let isLoaded = false;
|
||||
|
||||
export function editNotes(id, name) {
|
||||
// elements
|
||||
const notesLegend = document.getElementById("notesLegend");
|
||||
|
|
@ -49,8 +51,8 @@ export function editNotes(id, name) {
|
|||
});
|
||||
$("[aria-describedby='notesEditor']").css("top", "10vh");
|
||||
|
||||
if (modules.editNotes) return;
|
||||
modules.editNotes = true;
|
||||
if (isLoaded) return;
|
||||
isLoaded = true;
|
||||
|
||||
// add listeners
|
||||
document.getElementById("notesSelect").addEventListener("change", changeElement);
|
||||
|
|
|
|||
|
|
@ -974,6 +974,8 @@ function resize3d() {
|
|||
ThreeD.redraw();
|
||||
}
|
||||
|
||||
let isLoaded = false;
|
||||
|
||||
function toggle3dOptions() {
|
||||
if (options3dUpdate.offsetParent) {
|
||||
$("#options3d").dialog("close");
|
||||
|
|
@ -988,8 +990,8 @@ function toggle3dOptions() {
|
|||
|
||||
updateValues();
|
||||
|
||||
if (fmg.modules.options3d) return;
|
||||
fmg.modules.options3d = true;
|
||||
if (isLoaded) return;
|
||||
isLoaded = true;
|
||||
|
||||
document.getElementById("options3dUpdate").addEventListener("click", ThreeD.update);
|
||||
document.getElementById("options3dSave").addEventListener("click", ThreeD.saveScreenshot);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import * as d3 from "d3";
|
||||
|
||||
import {closeDialogs} from "dialogs/utils";
|
||||
import {openDialog} from "dialogs";
|
||||
import {turnLayerButtonOff} from "layers";
|
||||
import {restoreDefaultEvents} from "scripts/events";
|
||||
import {clearMainTip, showMainTip, tip} from "scripts/tooltips";
|
||||
|
|
@ -13,6 +14,8 @@ import {byId} from "utils/shorthands";
|
|||
import {parseTransform} from "utils/stringUtils";
|
||||
import {getArea, getAreaUnit, si} from "utils/unitUtils";
|
||||
|
||||
let isLoaded = false;
|
||||
|
||||
export function editProvinces() {
|
||||
if (customization) return;
|
||||
closeDialogs("#provincesEditor, .stable");
|
||||
|
|
@ -25,8 +28,8 @@ export function editProvinces() {
|
|||
const body = byId("provincesBodySection");
|
||||
refreshProvincesEditor();
|
||||
|
||||
if (fmg.modules.editProvinces) return;
|
||||
fmg.modules.editProvinces = true;
|
||||
if (isLoaded) return;
|
||||
isLoaded = true;
|
||||
|
||||
$("#provincesEditor").dialog({
|
||||
title: "Provinces Editor",
|
||||
|
|
@ -61,7 +64,8 @@ export function editProvinces() {
|
|||
|
||||
if (el.tagName === "FILL-BOX") changeFill(el);
|
||||
else if (cl.contains("name")) editProvinceName(p);
|
||||
else if (cl.contains("coaIcon")) editEmblem("province", "provinceCOA" + p, pack.provinces[p]);
|
||||
else if (cl.contains("coaIcon"))
|
||||
openDialog("emblemEditor", null, {type: "province", id: "provinceCOA" + p, el: pack.provinces[p]});
|
||||
else if (cl.contains("icon-star-empty")) capitalZoomIn(p);
|
||||
else if (cl.contains("icon-flag-empty")) triggerIndependencePromps(p);
|
||||
else if (cl.contains("culturePopulation")) changePopulation(p);
|
||||
|
|
@ -506,6 +510,8 @@ export function editProvinces() {
|
|||
});
|
||||
}
|
||||
|
||||
let isNameEditorLoaded = false;
|
||||
|
||||
function editProvinceName(province) {
|
||||
const p = pack.provinces[province];
|
||||
byId("provinceNameEditor").dataset.province = province;
|
||||
|
|
@ -528,8 +534,8 @@ export function editProvinces() {
|
|||
position: {my: "center", at: "center", of: "svg"}
|
||||
});
|
||||
|
||||
if (fmg.modules.editProvinceName) return;
|
||||
fmg.modules.editProvinceName = true;
|
||||
if (isNameEditorLoaded) return;
|
||||
isNameEditorLoaded = true;
|
||||
|
||||
// add listeners
|
||||
byId("provinceNameEditorShortCulture").addEventListener("click", regenerateShortNameCuture);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,8 @@ import {rn} from "utils/numberUtils";
|
|||
import {capitalize} from "utils/stringUtils";
|
||||
import {closeDialogs} from "dialogs/utils";
|
||||
|
||||
let isLoaded = false;
|
||||
|
||||
export function editRegiment(selector) {
|
||||
if (customization) return;
|
||||
closeDialogs(".stable");
|
||||
|
|
@ -28,8 +30,8 @@ export function editRegiment(selector) {
|
|||
position: {my: "left top", at: "left+10 top+10", of: "#map"}
|
||||
});
|
||||
|
||||
if (fmg.modules.editRegiment) return;
|
||||
fmg.modules.editRegiment = true;
|
||||
if (isLoaded) return;
|
||||
isLoaded = true;
|
||||
|
||||
// add listeners
|
||||
document.getElementById("regimentNameRestore").addEventListener("click", restoreName);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,8 @@ import {capitalize} from "utils/stringUtils";
|
|||
import {si} from "utils/unitUtils";
|
||||
import {closeDialogs} from "dialogs/utils";
|
||||
|
||||
let isLoaded = false;
|
||||
|
||||
export function overviewRegiments(state) {
|
||||
if (customization) return;
|
||||
closeDialogs(".stable");
|
||||
|
|
@ -18,8 +20,9 @@ export function overviewRegiments(state) {
|
|||
addLines();
|
||||
$("#regimentsOverview").dialog();
|
||||
|
||||
if (fmg.modules.overviewRegiments) return;
|
||||
fmg.modules.overviewRegiments = true;
|
||||
if (isLoaded) return;
|
||||
isLoaded = true;
|
||||
|
||||
updateHeaders();
|
||||
|
||||
$("#regimentsOverview").dialog({
|
||||
|
|
|
|||
|
|
@ -6,6 +6,8 @@ import {tip, showMainTip, clearMainTip} from "scripts/tooltips";
|
|||
import {rn} from "utils/numberUtils";
|
||||
import {closeDialogs} from "dialogs/utils";
|
||||
|
||||
let isLoaded = false;
|
||||
|
||||
export function editReliefIcon() {
|
||||
if (customization) return;
|
||||
closeDialogs(".stable");
|
||||
|
|
@ -26,8 +28,8 @@ export function editReliefIcon() {
|
|||
close: closeReliefEditor
|
||||
});
|
||||
|
||||
if (fmg.modules.editReliefIcon) return;
|
||||
fmg.modules.editReliefIcon = true;
|
||||
if (isLoaded) return;
|
||||
isLoaded = true;
|
||||
|
||||
// add listeners
|
||||
document.getElementById("reliefIndividual").addEventListener("click", enterIndividualMode);
|
||||
|
|
|
|||
|
|
@ -7,6 +7,8 @@ import {tip, clearMainTip} from "scripts/tooltips";
|
|||
import {rn} from "utils/numberUtils";
|
||||
import {closeDialogs} from "dialogs/utils";
|
||||
|
||||
let isLoaded = false;
|
||||
|
||||
export function createRiver() {
|
||||
if (customization) return;
|
||||
closeDialogs();
|
||||
|
|
@ -29,8 +31,8 @@ export function createRiver() {
|
|||
close: closeRiverCreator
|
||||
});
|
||||
|
||||
if (fmg.modules.createRiver) return;
|
||||
fmg.modules.createRiver = true;
|
||||
if (isLoaded) return;
|
||||
isLoaded = true;
|
||||
|
||||
// add listeners
|
||||
document.getElementById("riverCreatorComplete").addEventListener("click", addRiver);
|
||||
|
|
|
|||
|
|
@ -7,6 +7,8 @@ import {rn} from "utils/numberUtils";
|
|||
import {rand} from "utils/probabilityUtils";
|
||||
import {closeDialogs} from "dialogs/utils";
|
||||
|
||||
let isLoaded = false;
|
||||
|
||||
export function editRiver(id) {
|
||||
if (customization) return;
|
||||
if (elSelected && id === elSelected.attr("id")) return;
|
||||
|
|
@ -40,8 +42,8 @@ export function editRiver(id) {
|
|||
close: closeRiverEditor
|
||||
});
|
||||
|
||||
if (fmg.modules.editRiver) return;
|
||||
fmg.modules.editRiver = true;
|
||||
if (isLoaded) return;
|
||||
isLoaded = true;
|
||||
|
||||
// add listeners
|
||||
document.getElementById("riverCreateSelectingCells").addEventListener("click", createRiver);
|
||||
|
|
@ -173,7 +175,7 @@ export function editRiver(id) {
|
|||
elSelected.attr("d", path);
|
||||
|
||||
updateRiverLength(river);
|
||||
if (fmg.modules.elevation) showEPForRiver(elSelected.node());
|
||||
// TODO: check visibility showEPForRiver(elSelected.node());
|
||||
}
|
||||
|
||||
function addControlPoint() {
|
||||
|
|
@ -237,7 +239,6 @@ export function editRiver(id) {
|
|||
}
|
||||
|
||||
function showElevationProfile() {
|
||||
fmg.modules.elevation = true;
|
||||
showEPForRiver(elSelected.node());
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@ import * as d3 from "d3";
|
|||
import {rn} from "utils/numberUtils";
|
||||
import {closeDialogs} from "dialogs/utils";
|
||||
|
||||
let isLoaded = false;
|
||||
|
||||
export function overviewRivers() {
|
||||
if (customization) return;
|
||||
closeDialogs("#riversOverview, .stable");
|
||||
|
|
@ -12,8 +14,8 @@ export function overviewRivers() {
|
|||
riversOverviewAddLines();
|
||||
$("#riversOverview").dialog();
|
||||
|
||||
if (fmg.modules.overviewRivers) return;
|
||||
fmg.modules.overviewRivers = true;
|
||||
if (isLoaded) return;
|
||||
isLoaded = true;
|
||||
|
||||
$("#riversOverview").dialog({
|
||||
title: "Rivers Overview",
|
||||
|
|
|
|||
|
|
@ -7,6 +7,8 @@ import {getNextId} from "utils/nodeUtils";
|
|||
import {round} from "utils/stringUtils";
|
||||
import {closeDialogs} from "dialogs/utils";
|
||||
|
||||
let isLoaded = false;
|
||||
|
||||
export function editRoute(onClick) {
|
||||
if (customization) return;
|
||||
if (!onClick && elSelected && d3.event.target.id === elSelected.attr("id")) return;
|
||||
|
|
@ -29,8 +31,8 @@ export function editRoute(onClick) {
|
|||
viewbox.on("touchmove mousemove", showEditorTips);
|
||||
if (onClick) toggleRouteCreationMode();
|
||||
|
||||
if (fmg.modules.editRoute) return;
|
||||
fmg.modules.editRoute = true;
|
||||
if (isLoaded) return;
|
||||
isLoaded = true;
|
||||
|
||||
// add listeners
|
||||
document.getElementById("routeGroupsShow").addEventListener("click", showGroupSection);
|
||||
|
|
@ -106,11 +108,10 @@ export function editRoute(onClick) {
|
|||
const l = elSelected.node().getTotalLength();
|
||||
routeLength.innerHTML = rn(l * distanceScaleInput.value) + " " + distanceUnitInput.value;
|
||||
|
||||
if (fmg.modules.elevation) showEPForRoute(elSelected.node());
|
||||
// TODO: check visibility showEPForRoute(elSelected.node());
|
||||
}
|
||||
|
||||
function showElevationProfile() {
|
||||
fmg.modules.elevation = true;
|
||||
showEPForRoute(elSelected.node());
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -131,6 +131,8 @@ function applyStyleWithUiRefresh(style) {
|
|||
setPresetRemoveButtonVisibiliy();
|
||||
}
|
||||
|
||||
let isLoaded = false;
|
||||
|
||||
function addStylePreset() {
|
||||
$("#styleSaver").dialog({title: "Style Saver", width: "26em", position: {my: "center", at: "center", of: "svg"}});
|
||||
|
||||
|
|
@ -139,8 +141,8 @@ function addStylePreset() {
|
|||
styleSaverJSON.value = JSON.stringify(collectStyleData(), null, 2);
|
||||
checkName();
|
||||
|
||||
if (fmg.modules.saveStyle) return;
|
||||
fmg.modules.saveStyle = true;
|
||||
if (isLoaded) return;
|
||||
isLoaded = true;
|
||||
|
||||
// add listeners
|
||||
document.getElementById("styleSaverName").addEventListener("input", checkName);
|
||||
|
|
|
|||
|
|
@ -126,7 +126,7 @@ async function openEmblemEditor() {
|
|||
}
|
||||
|
||||
await COArenderer.trigger(id, el.coa);
|
||||
editEmblem(type, id, el);
|
||||
openDialog("emblemEditor", null, {type, id, el});
|
||||
}
|
||||
|
||||
function regenerateRivers() {
|
||||
|
|
|
|||
|
|
@ -4,6 +4,8 @@ import {tip} from "scripts/tooltips";
|
|||
import {rn} from "utils/numberUtils";
|
||||
import {round, parseTransform} from "utils/stringUtils";
|
||||
|
||||
let isLoaded = false;
|
||||
|
||||
export function editWorld() {
|
||||
if (customization) return;
|
||||
$("#worldConfigurator").dialog({
|
||||
|
|
@ -40,8 +42,8 @@ export function editWorld() {
|
|||
updateGlobeTemperature();
|
||||
updateGlobePosition();
|
||||
|
||||
if (fmg.modules.editWorld) return;
|
||||
fmg.modules.editWorld = true;
|
||||
if (isLoaded) return;
|
||||
isLoaded = true;
|
||||
|
||||
document.getElementById("worldControls").addEventListener("input", e => updateWorld(e.target));
|
||||
globe.select("#globeWindArrows").on("click", changeWind);
|
||||
|
|
|
|||
|
|
@ -9,6 +9,8 @@ import {getNextId} from "utils/nodeUtils";
|
|||
import {rn} from "utils/numberUtils";
|
||||
import {getArea, getAreaUnit, si} from "utils/unitUtils";
|
||||
|
||||
let isLoaded = false;
|
||||
|
||||
export function editZones() {
|
||||
closeDialogs();
|
||||
if (!layerIsOn("toggleZones")) toggleZones();
|
||||
|
|
@ -17,8 +19,8 @@ export function editZones() {
|
|||
updateFilters();
|
||||
zonesEditorAddLines();
|
||||
|
||||
if (fmg.modules.editZones) return;
|
||||
fmg.modules.editZones = true;
|
||||
if (isLoaded) return;
|
||||
isLoaded = true;
|
||||
|
||||
$("#zonesEditor").dialog({
|
||||
title: "Zones Editor",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue