v1.5.14 - Province/diplom. editors - emblems added

This commit is contained in:
Azgaar 2021-02-10 02:30:31 +03:00
parent d25965b618
commit 6987474c2e
7 changed files with 16 additions and 19 deletions

View file

@ -1412,10 +1412,6 @@ div.states > .coaIcon {
transition: all .4s ease-in-out; transition: all .4s ease-in-out;
} }
div.states > .coaIcon:hover {
transform: scale(8);
}
div.states > .coaIcon > use { div.states > .coaIcon > use {
pointer-events: none; pointer-events: none;
} }
@ -1523,12 +1519,10 @@ div.states.active {
} }
div.states.Self { div.states.Self {
border-color: #858b8e;
background-image: linear-gradient(to right, #f2f2f2 0%, #b0c6d9 100%);
font-style: italic;
font-weight: bold;
margin-bottom: .2em; margin-bottom: .2em;
cursor: default !important; cursor: default !important;
padding: .2em 0 0 .5em;
font-weight: bold;
} }
div.states button.selectCapital { div.states button.selectCapital {

View file

@ -2427,7 +2427,7 @@
<div id="burgEditor" class="dialog" style="display: none"> <div id="burgEditor" class="dialog" style="display: none">
<div id="burgBody" style="padding-bottom: .3em"> <div id="burgBody" style="padding-bottom: .3em">
<svg viewBox="0 0 200 200" width="130" height="130"><use id="burgEmblem"></use></svg> <svg viewBox="0 0 200 200" width="11em" height="11em"><use id="burgEmblem"></use></svg>
<div style="float: right"> <div style="float: right">
<div id="burgProvinceAndState" style="padding: .1em; font-style: italic"></div> <div id="burgProvinceAndState" style="padding: .1em; font-style: italic"></div>
@ -3089,9 +3089,9 @@
<div id="provincesEditor" class="dialog stable" style="display: none"> <div id="provincesEditor" class="dialog stable" style="display: none">
<div id="provincesHeader" class="header"> <div id="provincesHeader" class="header">
<div style="left:1.8em" data-tip="Click to sort by province name" class="sortable alphabetically" data-sortby="name">Province&nbsp;</div> <div style="left:1.8em" data-tip="Click to sort by province name" class="sortable alphabetically" data-sortby="name">Province&nbsp;</div>
<div style="left:8.5em" data-tip="Click to sort by province form name" class="sortable alphabetically hide" data-sortby="form">Form&nbsp;</div> <div style="left:9.7em" data-tip="Click to sort by province form name" class="sortable alphabetically hide" data-sortby="form">Form&nbsp;</div>
<div style="left:15.9em" data-tip="Click to sort by province capital" class="sortable alphabetically hide" data-sortby="capital">Capital&nbsp;</div> <div style="left:15.9em" data-tip="Click to sort by province capital" class="sortable alphabetically hide" data-sortby="capital">Capital&nbsp;</div>
<div style="left:22em" data-tip="Click to sort by province owner" class="sortable alphabetically" data-sortby="state">State&nbsp;</div> <div style="left:23.2em" data-tip="Click to sort by province owner" class="sortable alphabetically" data-sortby="state">State&nbsp;</div>
<div style="left:30em" data-tip="Click to sort by province area" class="sortable hide" data-sortby="area">Area&nbsp;</div> <div style="left:30em" data-tip="Click to sort by province area" class="sortable hide" data-sortby="area">Area&nbsp;</div>
<div style="left:35.3em" data-tip="Click to sort by province population" class="sortable hide" data-sortby="population">Population&nbsp;</div> <div style="left:35.3em" data-tip="Click to sort by province population" class="sortable hide" data-sortby="population">Population&nbsp;</div>
</div> </div>

View file

@ -885,7 +885,7 @@
} }
// state forms requiring Adjective + Name, all other forms use scheme Form + Of + Name // state forms requiring Adjective + Name, all other forms use scheme Form + Of + Name
const adjForms = ["Empire", "Sultanate", "Khaganate", "Shogunate", "Caliphate", "Despotate", "Theocracy", "Oligarchy", "Union", "Confederation", "Trade Company", "League", "Tetrarchy", "Triumvirate", "Diarchy", "Horde"]; const adjForms = ["Empire", "Sultanate", "Khaganate", "Shogunate", "Caliphate", "Despotate", "Theocracy", "Oligarchy", "Union", "Confederation", "Trade Company", "League", "Tetrarchy", "Triumvirate", "Diarchy", "Horde", "Marches"];
const getFullName = function(s) { const getFullName = function(s) {
if (!s.formName) return s.name; if (!s.formName) return s.name;

View file

@ -202,7 +202,6 @@
// style settings for emblems layer // style settings for emblems layer
// test in FF // test in FF
// layout preset // layout preset
// other editors
const t1 = P(kinship) ? parent.t1 : getTincture("field"); const t1 = P(kinship) ? parent.t1 : getTincture("field");
if (t1.includes("-")) usedPattern = t1; if (t1.includes("-")) usedPattern = t1;

View file

@ -54,8 +54,10 @@ function editDiplomacy() {
const selName = states[sel].fullName; const selName = states[sel].fullName;
diplomacySelect.style.display = "none"; diplomacySelect.style.display = "none";
let lines = `<div class="states Self" data-id=${sel}> COArenderer.trigger("stateCOA"+sel, states[sel].coa);
<div data-tip="List below shows relations to ${selName}" style="width: 100%">${selName}</div> let lines = `<div class="states Self" data-id=${sel} data-tip="List below shows relations to ${selName}">
<div style="width: max-content">${selName}</div>
<svg class="coaIcon" viewBox="0 0 200 200"><use href="#stateCOA${sel}"></use></svg>
</div>`; </div>`;
for (const s of states) { for (const s of states) {
@ -66,9 +68,10 @@ function editDiplomacy() {
const tip = s.fullName + description[index] + selName; const tip = s.fullName + description[index] + selName;
const tipSelect = `${tip}. Click to see relations to ${s.name}`; const tipSelect = `${tip}. Click to see relations to ${s.name}`;
const tipChange = `${tip}. Click to change relations to ${selName}`; const tipChange = `${tip}. Click to change relations to ${selName}`;
COArenderer.trigger("stateCOA"+s.i, s.coa);
lines += `<div class="states" data-id=${s.i} data-name="${s.fullName}" data-relations="${relation}"> lines += `<div class="states" data-id=${s.i} data-name="${s.fullName}" data-relations="${relation}">
<span data-tip="${tipSelect}" class="icon-right-open"></span> <svg data-tip="${tipSelect}" class="coaIcon" viewBox="0 0 200 200"><use href="#stateCOA${s.i}"></use></svg>
<div data-tip="${tipSelect}" style="width:12em">${s.fullName}</div> <div data-tip="${tipSelect}" style="width:12em">${s.fullName}</div>
<svg data-tip="${tipChange}" width=".9em" height=".9em" style="margin-bottom:-1px" class="changeRelations"> <svg data-tip="${tipChange}" width=".9em" height=".9em" style="margin-bottom:-1px" class="changeRelations">
<rect x="0" y="0" width="100%" height="100%" fill="${color}" class="fillRect pointer" style="pointer-events: none"></rect> <rect x="0" y="0" width="100%" height="100%" fill="${color}" class="fillRect pointer" style="pointer-events: none"></rect>

View file

@ -38,7 +38,7 @@ function editProvinces() {
const el = ev.target, cl = el.classList, line = el.parentNode, p = +line.dataset.id; const el = ev.target, cl = el.classList, line = el.parentNode, p = +line.dataset.id;
if (cl.contains("fillRect")) changeFill(el); else if (cl.contains("fillRect")) changeFill(el); else
if (cl.contains("name")) editProvinceName(p); else if (cl.contains("name")) editProvinceName(p); else
if (cl.contains("icon-coa")) editCOA(p); else if (cl.contains("coaIcon")) editEmblem("province", "provinceCOA"+p, pack.provinces[p]); else
if (cl.contains("icon-star-empty")) capitalZoomIn(p); else if (cl.contains("icon-star-empty")) capitalZoomIn(p); else
if (cl.contains("icon-flag-empty")) triggerIndependencePromps(p); else if (cl.contains("icon-flag-empty")) triggerIndependencePromps(p); else
if (cl.contains("culturePopulation")) changePopulation(p); else if (cl.contains("culturePopulation")) changePopulation(p); else
@ -114,10 +114,11 @@ function editProvinces() {
const capital = p.burg ? pack.burgs[p.burg].name : ''; const capital = p.burg ? pack.burgs[p.burg].name : '';
const separable = p.burg && p.burg !== pack.states[p.state].capital; const separable = p.burg && p.burg !== pack.states[p.state].capital;
const focused = defs.select("#fog #focusProvince"+p.i).size(); const focused = defs.select("#fog #focusProvince"+p.i).size();
COArenderer.trigger("provinceCOA"+p.i, p.coa);
lines += `<div class="states" data-id=${p.i} data-name="${p.name}" data-form="${p.formName}" data-color="${p.color}" data-capital="${capital}" data-state="${stateName}" data-area=${area} data-population=${population}> lines += `<div class="states" data-id=${p.i} data-name="${p.name}" data-form="${p.formName}" data-color="${p.color}" data-capital="${capital}" data-state="${stateName}" data-area=${area} data-population=${population}>
<svg data-tip="Province fill style. Click to change" width=".9em" height=".9em" style="margin-bottom:-1px"><rect x="0" y="0" width="100%" height="100%" fill="${p.color}" class="fillRect pointer"></svg> <svg data-tip="Province fill style. Click to change" width=".9em" height=".9em" style="margin-bottom:-1px"><rect x="0" y="0" width="100%" height="100%" fill="${p.color}" class="fillRect pointer"></svg>
<input data-tip="Province name. Click to change" class="name pointer" value="${p.name}" readonly> <input data-tip="Province name. Click to change" class="name pointer" value="${p.name}" readonly>
<span data-tip="Click to edit province COA" class="icon-coa pointer hide"></span> <svg data-tip="Click to show and edit province emblem" class="coaIcon hide" viewBox="0 0 200 200"><use href="#provinceCOA${p.i}"></use></svg>
<input data-tip="Province form name. Click to change" class="name pointer hide" value="${p.formName}" readonly> <input data-tip="Province form name. Click to change" class="name pointer hide" value="${p.formName}" readonly>
<span data-tip="Province capital. Click to zoom into view" class="icon-star-empty pointer hide ${p.burg?'':'placeholder'}"></span> <span data-tip="Province capital. Click to zoom into view" class="icon-star-empty pointer hide ${p.burg?'':'placeholder'}"></span>
<select data-tip="Province capital. Click to select from burgs within the state. No capital means the province is governed from the state capital" class="cultureBase hide ${p.burgs.length?'':'placeholder'}">${p.burgs.length ? getCapitalOptions(p.burgs, p.burg) : ''}</select> <select data-tip="Province capital. Click to select from burgs within the state. No capital means the province is governed from the state capital" class="cultureBase hide ${p.burgs.length?'':'placeholder'}">${p.burgs.length ? getCapitalOptions(p.burgs, p.burg) : ''}</select>

View file

@ -116,7 +116,7 @@ function editStates() {
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}> 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> <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> <input data-tip="State name. Click to change" class="stateName name pointer" value="${s.name}" readonly>
<svg data-tip="Click to edit state emblem" class="coaIcon hide" viewBox="0 0 200 200"><use href="#stateCOA${s.i}"></use></svg> <svg data-tip="Click to show and 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> <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> <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"/> <input data-tip="Capital name. Click and type to rename" class="stateCapital hide" value="${capital}" autocorrect="off" spellcheck="false"/>