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

v1.5.02 - COA rendering + editor basic UI

Browse source
This commit is contained in:
Azgaar 2021-01-28 01:40:11 +03:00
parent b86d985607
commit 9f1012603d
9 changed files with 1663 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

108
modules/ui/coa-editor.js Normal file
View file

@ -0,0 +1,108 @@
"use strict";
function editEmblem(type, id, el) {
if (customization) return;
const emblemStates = document.getElementById("emblemStates");
const emblemProvinces = document.getElementById("emblemProvinces");
const emblemBurgs = document.getElementById("emblemBurgs");
const {states, provinces, burgs, cells} = pack;
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"}
});
if (modules.editEmblem) return;
modules.editEmblem = true;
// add listeners
emblemStates.addEventListener("input", selectState);
emblemProvinces.addEventListener("input", selectProvince);
emblemBurgs.addEventListener("input", selectBurg);
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 = states[el.state].i;}
else {burg = el.i; province = provinces[cells.province[el.cell]].i; state = provinces[province].state;}
// 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));
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)));
emblemProvinces.options.length = 0;
emblemProvinces.options.add(new Option("", 0, false, !province));
const provinceList = 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 = 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)));
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);
document.getElementById("emblemArmiger").innerText = el.fullName || el.name;
}
function selectState() {
const state = +this.value;
if (state) {
type = "state";
el = states[state];
id = "stateCOA"+ state;
} else {
// select neutral burg if state is changed to Neutrals
const neutralBurgs = 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 = provinces[province];
id = "provinceCOA"+ province;
} else {
// select state if province is changed to null value
const state = +emblemStates.value;
type = "state";
el = states[state];
id = "stateCOA"+ state;
}
updateElementSelectors(type, id, el);
}
function selectBurg() {
const burg = +this.value;
type = "burg";
el = burgs[burg];
id = "burgCOA"+ burg;
updateElementSelectors(type, id, el);
}
}

7
modules/ui/general.js
View file

@ -339,6 +339,7 @@ function showInfo() {
const Reddit = link("https://www.reddit.com/r/FantasyMapGenerator", "Reddit")
const Patreon = link("https://www.patreon.com/azgaar", "Patreon");
const Trello = link("https://trello.com/b/7x832DG4/fantasy-map-generator", "Trello");
const Armoria = link("https://azgaar.github.io/Armoria", "Armoria");
const QuickStart = link("https://github.com/Azgaar/Fantasy-Map-Generator/wiki/Quick-Start-Tutorial", "Quick start tutorial");
const QAA = link("https://github.com/Azgaar/Fantasy-Map-Generator/wiki/Q&A", "Q&A page");
@ -353,9 +354,11 @@ function showInfo() {
<p>The best way to get help is to contact the community on ${Discord} and ${Reddit}.
Before asking questions, please check out the ${QuickStart} and the ${QAA}.</p>
<p>You can track the development process on ${Trello}.</p>
<p>Track the development process on ${Trello}.</p>
Links:
<p>Check out our new project: ${Armoria}, heraldry generator and editor.</p>
<b>Links:</b>
<ul style="columns:2">
<li>${link("https://github.com/Azgaar/Fantasy-Map-Generator", "GitHub repository")}</li>
<li>${link("https://github.com/Azgaar/Fantasy-Map-Generator/blob/master/LICENSE", "License")}</li>

23
modules/ui/states-editor.js
View file

@ -42,7 +42,7 @@ function editStates() {
const el = ev.target, cl = el.classList, line = el.parentNode, state = +line.dataset.id;
if (cl.contains("fillRect")) stateChangeFill(el); else
if (cl.contains("name")) editStateName(state); else
if (cl.contains("emblemIcon")) editCOA(state); else
if (cl.contains("coaIcon")) editEmblem("state", "stateCOA"+state, pack.states[state]); else
if (cl.contains("icon-star-empty")) stateCapitalZoomIn(state); else
if (cl.contains("culturePopulation")) changePopulation(state); else
if (cl.contains("icon-pin")) toggleFog(state, cl); else
@ -83,7 +83,6 @@ function editStates() {
totalPopulation += population;
totalBurgs += s.burgs;
const focused = defs.select("#fog #focusState"+s.i).size();
const COAsize = Math.round(15 * +uiSizeInput.value);
if (!s.i) {
// Neutral line
@ -91,7 +90,7 @@ function editStates() {
data-population=${population} data-burgs=${s.burgs} data-color="" data-form="" data-capital="" data-culture="" data-type="" data-expansionism="">
<svg width="9" height="9" class="placeholder"></svg>
<input data-tip="Neutral lands name. Click to change" class="stateName name pointer italic" value="${s.name}" readonly>
<embed class="emblemIcon placeholder hide" type="image/svg+xml" width=${COAsize} height=${COAsize} >
<svg class="coaIcon placeholder hide"></svg>
<input class="stateForm placeholder" value="none">
<span class="icon-star-empty placeholder hide"></span>
<input class="stateCapital placeholder hide">
@ -110,13 +109,14 @@ function editStates() {
</div>`;
continue;
}
const capital = pack.burgs[s.capital].name;
const coaURL = `http://azgaar.github.io/Armoria/?view=1&size=${COAsize}&noedit&coa=${COA.toString(s.coa)}`;
COArenderer.trigger("stateCOA"+s.i, s.coa);
lines += `<div class="states" data-id=${s.i} data-name="${s.name}" data-form="${s.formName}" data-capital="${capital}" data-color="${s.color}" data-cells=${s.cells}
data-area=${area} data-population=${population} data-burgs=${s.burgs} data-culture=${pack.cultures[s.culture].name} data-type=${s.type} data-expansionism=${s.expansionism}>
<svg data-tip="State fill style. Click to change" width=".9em" height=".9em" style="margin-bottom:-1px"><rect x="0" y="0" width="100%" height="100%" fill="${s.color}" class="fillRect pointer"></svg>
<input data-tip="State name. Click to change" class="stateName name pointer" value="${s.name}" readonly>
<embed data-tip="Click to show state COA" class="emblemIcon hide" type="image/svg+xml" width=${COAsize} height=${COAsize} src='${coaURL}'>
<svg data-tip="Click to edit state emblem" class="coaIcon hide" viewBox="0 0 200 200"><use href="#stateCOA${s.i}"></use></svg>
<input data-tip="State form name. Click to change" class="stateForm name pointer" value="${s.formName}" readonly>
<span data-tip="State capital. Click to zoom into view" class="icon-star-empty pointer hide"></span>
<input data-tip="Capital name. Click and type to rename" class="stateCapital hide" value="${capital}" autocorrect="off" spellcheck="false"/>
@ -315,19 +315,6 @@ function editStates() {
document.querySelector("#burgLabel"+capital).textContent = value;
}
function editCOA(state) {
const coa = COA.toString(pack.states[state].coa);
const url = "http://azgaar.github.io/Armoria/?view=1&size=200&noedit&coa=" + coa;
$("#emblemsEditor").dialog({
title: "Emblems Editor", resizable: false, width: fitContent(), close: closeStatesEditor,
position: {my: "left top", at: "left+10 top+10", of: "svg", collision: "fit"}
});
const embed = document.getElementById("emblemsEmbed");
embed.setAttribute("src", url);
}
function changePopulation(state) {
const s = pack.states[state];
if (!s.cells) {tip("State does not have any cells, cannot change population", false, "error"); return;}