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

burgs overview - icon upload basic

Browse source
This commit is contained in:
Azgaar 2021-06-01 02:01:06 +03:00 • committed by Peter
parent 9c02906c88
commit f88d263e68
2 changed files with 177 additions and 91 deletions
Download patch file Download diff file Expand all files Collapse all files

167
modules/ui/emblems-editor.js
View file

@ -1,14 +1,14 @@
"use strict"; 'use strict';
function editEmblem(type, id, el) { function editEmblem(type, id, el) {
if (customization) return; if (customization) return;
if (!id && d3.event) defineEmblemData(d3.event); if (!id && d3.event) defineEmblemData(d3.event);
emblems.selectAll("use").call(d3.drag().on("drag", dragEmblem)).classed("draggable", true); emblems.selectAll('use').call(d3.drag().on('drag', dragEmblem)).classed('draggable', true);
const emblemStates = document.getElementById("emblemStates"); const emblemStates = document.getElementById('emblemStates');
const emblemProvinces = document.getElementById("emblemProvinces"); const emblemProvinces = document.getElementById('emblemProvinces');
const emblemBurgs = document.getElementById("emblemBurgs"); const emblemBurgs = document.getElementById('emblemBurgs');
const emblemShapeSelector = document.getElementById("emblemShapeSelector"); const emblemShapeSelector = document.getElementById('emblemShapeSelector');
updateElementSelectors(type, id, el); updateElementSelectors(type, id, el);
@ -26,21 +26,21 @@ function editEmblem(type, id, el) {
emblemProvinces.oninput = selectProvince; emblemProvinces.oninput = selectProvince;
emblemBurgs.oninput = selectBurg; emblemBurgs.oninput = selectBurg;
emblemShapeSelector.oninput = changeShape; emblemShapeSelector.oninput = changeShape;
document.getElementById("emblemSizeSlider").oninput = changeSize; document.getElementById('emblemSizeSlider').oninput = changeSize;
document.getElementById("emblemSizeNumber").oninput = changeSize; document.getElementById('emblemSizeNumber').oninput = changeSize;
document.getElementById("emblemsRegenerate").onclick = regenerate; document.getElementById('emblemsRegenerate').onclick = regenerate;
document.getElementById("emblemsArmoria").onclick = openInArmoria; document.getElementById('emblemsArmoria').onclick = openInArmoria;
document.getElementById("emblemsUpload").onclick = toggleUpload; document.getElementById('emblemsUpload').onclick = toggleUpload;
document.getElementById("emblemsUploadImage").onclick = () => emblemImageToLoad.click(); document.getElementById('emblemsUploadImage').onclick = () => imageToLoad.click();
document.getElementById("emblemsUploadSVG").onclick = () => emblemSVGToLoad.click(); document.getElementById('emblemsUploadSVG').onclick = () => svgToLoad.click();
document.getElementById("emblemImageToLoad").onchange = () => upload("image"); document.getElementById('imageToLoad').onchange = () => uploadImage('image');
document.getElementById("emblemSVGToLoad").onchange = () => upload("svg"); document.getElementById('svgToLoad').onchange = () => uploadImage('svg');
document.getElementById("emblemsDownload").onclick = toggleDownload; document.getElementById('emblemsDownload').onclick = toggleDownload;
document.getElementById("emblemsDownloadSVG").onclick = () => download("svg"); document.getElementById('emblemsDownloadSVG').onclick = () => download('svg');
document.getElementById("emblemsDownloadPNG").onclick = () => download("png"); document.getElementById('emblemsDownloadPNG').onclick = () => download('png');
document.getElementById("emblemsDownloadJPG").onclick = () => download("jpeg"); document.getElementById('emblemsDownloadJPG').onclick = () => download('jpeg');
document.getElementById("emblemsGallery").onclick = downloadGallery; document.getElementById('emblemsGallery').onclick = downloadGallery;
document.getElementById("emblemsFocus").onclick = showArea; document.getElementById('emblemsFocus').onclick = showArea;
function defineEmblemData(e) { function defineEmblemData(e) {
const parent = e.target.parentNode; const parent = e.target.parentNode;
@ -57,9 +57,9 @@ function editEmblem(type, id, el) {
burg = 0; burg = 0;
// set active type // set active type
emblemStates.parentElement.className = type === "state" ? "active" : ""; emblemStates.parentElement.className = type === 'state' ? 'active' : '';
emblemProvinces.parentElement.className = type === "province" ? "active" : ""; emblemProvinces.parentElement.className = type === 'province' ? 'active' : '';
emblemBurgs.parentElement.className = type === "burg" ? "active" : ""; emblemBurgs.parentElement.className = type === 'burg' ? 'active' : '';
// define selected values // define selected values
if (type === "state") state = el.i; if (type === "state") state = el.i;
@ -72,19 +72,19 @@ function editEmblem(type, id, el) {
state = el.state; state = el.state;
} }
const validBurgs = pack.burgs.filter(burg => burg.i && !burg.removed && burg.coa); const validBurgs = pack.burgs.filter((burg) => burg.i && !burg.removed && burg.coa);
// update option list and select actual values // update option list and select actual values
emblemStates.options.length = 0; emblemStates.options.length = 0;
const neutralBurgs = validBurgs.filter(burg => !burg.state); const neutralBurgs = validBurgs.filter((burg) => !burg.state);
if (neutralBurgs.length) emblemStates.options.add(new Option(pack.states[0].name, 0, false, !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); 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))); stateList.forEach((s) => emblemStates.options.add(new Option(s.name, s.i, false, s.i === state)));
emblemProvinces.options.length = 0; emblemProvinces.options.length = 0;
emblemProvinces.options.add(new Option("", 0, false, !province)); emblemProvinces.options.add(new Option('', 0, false, !province));
const provinceList = pack.provinces.filter(province => !province.removed && province.state === state); 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))); provinceList.forEach((p) => emblemProvinces.options.add(new Option(p.name, p.i, false, p.i === province)));
emblemBurgs.options.length = 0; emblemBurgs.options.length = 0;
emblemBurgs.options.add(new Option("", 0, false, !burg)); emblemBurgs.options.add(new Option("", 0, false, !burg));
@ -98,33 +98,33 @@ function editEmblem(type, id, el) {
function updateEmblemData(type, id, el) { function updateEmblemData(type, id, el) {
if (!el.coa) return; if (!el.coa) return;
document.getElementById("emblemImage").setAttribute("href", "#" + id); document.getElementById('emblemImage').setAttribute('href', '#' + id);
let name = el.fullName || el.name; let name = el.fullName || el.name;
if (type === "burg") name = "Burg of " + name; if (type === 'burg') name = 'Burg of ' + name;
document.getElementById("emblemArmiger").innerText = name; document.getElementById('emblemArmiger').innerText = name;
if (el.coa === "custom") emblemShapeSelector.disabled = true; if (el.coa === 'custom') emblemShapeSelector.disabled = true;
else { else {
emblemShapeSelector.disabled = false; emblemShapeSelector.disabled = false;
emblemShapeSelector.value = el.coa.shield; emblemShapeSelector.value = el.coa.shield;
} }
const size = el.coaSize || 1; const size = el.coaSize || 1;
document.getElementById("emblemSizeSlider").value = size; document.getElementById('emblemSizeSlider').value = size;
document.getElementById("emblemSizeNumber").value = size; document.getElementById('emblemSizeNumber').value = size;
} }
function selectState() { function selectState() {
const state = +this.value; const state = +this.value;
if (state) { if (state) {
type = "state"; type = 'state';
el = pack.states[state]; el = pack.states[state];
id = "stateCOA" + state; id = "stateCOA" + state;
} else { } else {
// select neutral burg if state is changed to Neutrals // select neutral burg if state is changed to Neutrals
const neutralBurgs = pack.burgs.filter(burg => burg.i && !burg.removed && !burg.state); const neutralBurgs = pack.burgs.filter((burg) => burg.i && !burg.removed && !burg.state);
if (!neutralBurgs.length) return; if (!neutralBurgs.length) return;
type = "burg"; type = 'burg';
el = neutralBurgs[0]; el = neutralBurgs[0];
id = "burgCOA" + neutralBurgs[0].i; id = "burgCOA" + neutralBurgs[0].i;
} }
@ -135,13 +135,13 @@ function editEmblem(type, id, el) {
const province = +this.value; const province = +this.value;
if (province) { if (province) {
type = "province"; type = 'province';
el = pack.provinces[province]; el = pack.provinces[province];
id = "provinceCOA" + province; id = "provinceCOA" + province;
} else { } else {
// select state if province is changed to null value // select state if province is changed to null value
const state = +emblemStates.value; const state = +emblemStates.value;
type = "state"; type = 'state';
el = pack.states[state]; el = pack.states[state];
id = "stateCOA" + state; id = "stateCOA" + state;
} }
@ -151,7 +151,7 @@ function editEmblem(type, id, el) {
function selectBurg() { function selectBurg() {
const burg = +this.value; const burg = +this.value;
type = "burg"; type = 'burg';
el = pack.burgs[burg]; el = pack.burgs[burg];
id = "burgCOA" + burg; id = "burgCOA" + burg;
updateElementSelectors(type, id, el); updateElementSelectors(type, id, el);
@ -193,8 +193,8 @@ function editEmblem(type, id, el) {
function regenerate() { function regenerate() {
let parent = null; let parent = null;
if (type === "province") parent = pack.states[el.state]; if (type === 'province') parent = pack.states[el.state];
else if (type === "burg") { else if (type === 'burg') {
const province = pack.cells.province[el.cell]; const province = pack.cells.province[el.cell];
parent = province ? pack.provinces[province] : pack.states[el.state]; parent = province ? pack.provinces[province] : pack.states[el.state];
} }
@ -211,64 +211,57 @@ function editEmblem(type, id, el) {
} }
function openInArmoria() { function openInArmoria() {
const coa = el.coa && el.coa !== "custom" ? el.coa : {t1: "sable"}; const coa = el.coa && el.coa !== 'custom' ? el.coa : {t1: 'sable'};
const json = JSON.stringify(coa).replaceAll("#", "%23"); const json = JSON.stringify(coa).replaceAll('#', '%23');
const url = `https://azgaar.github.io/Armoria/?coa=${json}&from=FMG`; const url = `https://azgaar.github.io/Armoria/?coa=${json}&from=FMG`;
openURL(url); openURL(url);
} }
function toggleUpload() { function toggleUpload() {
document.getElementById("emblemDownloadControl").classList.add("hidden"); document.getElementById('emblemDownloadControl').classList.add('hidden');
const buttons = document.getElementById("emblemUploadControl"); const buttons = document.getElementById('emblemUploadControl');
buttons.classList.toggle("hidden"); buttons.classList.toggle('hidden');
} }
function upload(type) { function uploadImage(type) {
const input = type === "image" ? document.getElementById("emblemImageToLoad") : document.getElementById("emblemSVGToLoad"); const input = type === 'image' ? document.getElementById('imageToLoad') : document.getElementById('svgToLoad');
const file = input.files[0]; const file = input.files[0];
input.value = ""; input.value = '';
if (file.size > 500000) { if (file.size > 500000) return 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);
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(); const reader = new FileReader();
reader.onload = function (readerEvent) { reader.onload = function (readerEvent) {
const result = readerEvent.target.result; const result = readerEvent.target.result;
const defs = document.getElementById("defs-emblems"); const defs = document.getElementById('defs-emblems');
const coa = document.getElementById(id); // old emblem const coa = document.getElementById(id); // old emblem
if (type === "image") { 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>`; 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); defs.insertAdjacentHTML('beforeend', svg);
} else { } else {
const el = document.createElement("html"); const el = document.createElement('html');
el.innerHTML = result; el.innerHTML = result;
// remove sodipodi and inkscape attributes // remove sodipodi and inkscape attributes
el.querySelectorAll("*").forEach(el => { el.querySelectorAll('*').forEach((el) => {
const attributes = el.getAttributeNames(); const attributes = el.getAttributeNames();
attributes.forEach(attr => { attributes.forEach((attr) => {
if (attr.includes("inkscape") || attr.includes("sodipodi")) el.removeAttribute(attr); if (attr.includes('inkscape') || attr.includes('sodipodi')) el.removeAttribute(attr);
}); });
}); });
const svg = el.querySelector("svg"); const svg = el.querySelector('svg');
if (!svg) { if (!svg) return tip('The file should be prepated for load to FMG. Please use Armoria or other relevant tools', false, 'error');
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); const newEmblem = defs.appendChild(svg);
newEmblem.id = id; newEmblem.id = id;
newEmblem.setAttribute("width", 200); newEmblem.setAttribute('width', 200);
newEmblem.setAttribute("height", 200); newEmblem.setAttribute('height', 200);
} }
if (coa) coa.remove(); // remove old emblem if (coa) coa.remove(); // remove old emblem
el.coa = "custom"; el.coa = 'custom';
emblemShapeSelector.disabled = true; emblemShapeSelector.disabled = true;
}; };
@ -277,17 +270,17 @@ function editEmblem(type, id, el) {
} }
function toggleDownload() { function toggleDownload() {
document.getElementById("emblemUploadControl").classList.add("hidden"); document.getElementById('emblemUploadControl').classList.add('hidden');
const buttons = document.getElementById("emblemDownloadControl"); const buttons = document.getElementById('emblemDownloadControl');
buttons.classList.toggle("hidden"); buttons.classList.toggle('hidden');
} }
async function download(format) { async function download(format) {
const coa = document.getElementById(id); const coa = document.getElementById(id);
const size = +emblemsDownloadSize.value; const size = +emblemsDownloadSize.value;
const url = await getURL(coa, size); const url = await getURL(coa, size);
const link = document.createElement("a"); const link = document.createElement('a');
link.download = getFileName(`Emblem ${el.fullName || el.name}`) + "." + format; link.download = getFileName(`Emblem ${el.fullName || el.name}`) + '.' + format;
if (format === "svg") downloadSVG(url, link); if (format === "svg") downloadSVG(url, link);
else downloadRaster(format, url, link, size); else downloadRaster(format, url, link, size);
@ -300,8 +293,8 @@ function editEmblem(type, id, el) {
} }
function downloadRaster(format, url, link, size) { function downloadRaster(format, url, link, size) {
const canvas = document.createElement("canvas"); const canvas = document.createElement('canvas');
const ctx = canvas.getContext("2d"); const ctx = canvas.getContext('2d');
canvas.width = size; canvas.width = size;
canvas.height = size; canvas.height = size;
@ -336,10 +329,10 @@ function editEmblem(type, id, el) {
} }
async function downloadGallery() { async function downloadGallery() {
const name = getFileName("Emblems Gallery"); const name = getFileName('Emblems Gallery');
const validStates = pack.states.filter(s => s.i && !s.removed && s.coa); 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 validProvinces = pack.provinces.filter((p) => p.i && !p.removed && p.coa);
const validBurgs = pack.burgs.filter(b => b.i && !b.removed && b.coa); const validBurgs = pack.burgs.filter((b) => b.i && !b.removed && b.coa);
await renderAllEmblems(validStates, validProvinces, validBurgs); await renderAllEmblems(validStates, validProvinces, validBurgs);
runDownload(); runDownload();
@ -480,14 +473,14 @@ function editEmblem(type, id, el) {
} }
async function renderAllEmblems(states, provinces, burgs) { async function renderAllEmblems(states, provinces, burgs) {
tip("Preparing for download...", true, "warn"); tip('Preparing for download...', true, 'warn');
const statePromises = states.map(state => COArenderer.trigger("stateCOA" + state.i, state.coa)); 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 provincePromises = provinces.map(province => COArenderer.trigger("provinceCOA" + province.i, province.coa));
const burgPromises = burgs.map(burg => COArenderer.trigger("burgCOA" + burg.i, burg.coa)); const burgPromises = burgs.map(burg => COArenderer.trigger("burgCOA" + burg.i, burg.coa));
const promises = [...statePromises, ...provincePromises, ...burgPromises]; const promises = [...statePromises, ...provincePromises, ...burgPromises];
return Promise.allSettled(promises).then(res => clearMainTip()); return Promise.allSettled(promises).then((res) => clearMainTip());
} }
function dragEmblem() { function dragEmblem() {
@ -502,6 +495,6 @@ function editEmblem(type, id, el) {
} }
function closeEmblemEditor() { function closeEmblemEditor() {
emblems.selectAll("use").call(d3.drag().on("drag", null)).attr("class", null); emblems.selectAll('use').call(d3.drag().on('drag', null)).attr('class', null);
} }
} }

101
modules/ui/resources-editor.js
View file

@ -678,17 +678,110 @@ function editResources() {
resource.chance = line.dataset.chance = +chance; resource.chance = line.dataset.chance = +chance;
} }
function resourceChangeColor() { function changeIcon(resource, line, el) {
const circle = this.querySelector('circle'); const standardIcons = Array.from(document.getElementById('resource-icons').querySelectorAll('symbol')).map((el) => el.id);
const resource = Resources.get(+this.parentNode.dataset.id); const standardIconsOptions = standardIcons.map((icon) => `<option value=${icon}${resource.icon === icon ? 'selected' : ''}>${icon}</option>`);
const callback = function (fill) { const customIconsEl = document.getElementById('defs-icons');
const customIcons = customIconsEl ? Array.from(document.getElementById('defs-icons').querySelectorAll('svg')).map((el) => el.id) : [];
const customIconsOptions = customIcons.map((icon) => `<option value=${icon}${resource.icon === icon ? 'selected' : ''}>${icon}</option>`);
const select = document.getElementById('resourceSelectIcon');
select.innerHTML = standardIconsOptions + customIconsOptions;
const preview = document.getElementById('resourceIconPreview');
preview.setAttribute('href', '#' + resource.icon);
$('#resourceIconEditor').dialog({
resizable: false,
title: 'Change Icon',
buttons: {
Cancel: function () {
$(this).dialog('close');
},
'Change color': () => changeColor(resource, line, el),
Apply: function () {
$(this).dialog('close');
resource.icon = select.value;
line.querySelector('svg.resourceIcon > use').setAttribute('href', '#' + select.value);
drawResources();
}
},
position: {my: 'center bottom', at: 'center', of: 'svg'}
});
const uploadTo = document.getElementById('defs-icons');
const onUpload = (id) => {
preview.setAttribute('href', '#' + id);
select.innerHTML += `<option value=${id}>${id}</option>`;
select.value = id;
};
// add listeners
select.onchange = () => preview.setAttribute('href', '#' + select.value);
document.getElementById('resourceUploadIconRaster').onclick = () => imageToLoad.click();
document.getElementById('resourceUploadIconVector').onclick = () => svgToLoad.click();
document.getElementById('imageToLoad').onchange = () => uploadImage('image', uploadTo, onUpload);
document.getElementById('svgToLoad').onchange = () => uploadImage('svg', uploadTo, onUpload);
}
function uploadImage(type, uploadTo, callback) {
const input = type === 'image' ? document.getElementById('imageToLoad') : document.getElementById('svgToLoad');
const file = input.files[0];
input.value = '';
if (file.size > 200000) return tip(`File is too big, please optimize file size up to 200kB and re-upload. Recommended size is 48x48 px and up to 10kB`, true, 'error', 5000);
const reader = new FileReader();
reader.onload = function (readerEvent) {
const result = readerEvent.target.result;
const id = 'resource-custom-' + Math.random().toString(36).slice(-6);
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>`;
uploadTo.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);
});
});
// remove all text if source is Noun project (to make it usable)
if (result.includes('from the Noun Project')) el.querySelectorAll('text').forEach((textEl) => textEl.remove());
const svg = el.querySelector('svg');
if (!svg) return tip("The file should be prepated for load to FMG. If you don't know why it's happening, try to upload the raster image", false, 'error');
const icon = uploadTo.appendChild(svg);
icon.id = id;
icon.setAttribute('width', 200);
icon.setAttribute('height', 200);
}
callback(id);
};
if (type === 'image') reader.readAsDataURL(file);
else reader.readAsText(file);
}
function changeColor(resource, line, el) {
const circle = el.querySelector('circle');
const callback = (fill) => {
const stroke = Resources.getStroke(fill); const stroke = Resources.getStroke(fill);
circle.setAttribute('fill', fill); circle.setAttribute('fill', fill);
circle.setAttribute('stroke', stroke); circle.setAttribute('stroke', stroke);
resource.color = fill; resource.color = fill;
resource.stroke = stroke; resource.stroke = stroke;
goods.selectAll(`circle[data-i='${resource.i}']`).attr('fill', fill).attr('stroke', stroke); goods.selectAll(`circle[data-i='${resource.i}']`).attr('fill', fill).attr('stroke', stroke);
line.dataset.color = fill;
}; };
openPicker(resource.color, callback, {allowHatching: false}); openPicker(resource.color, callback, {allowHatching: false});