From 6987474c2e0200173347eb30e2ac47d67f9a4d6f Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Wed, 10 Feb 2021 02:30:31 +0300
Subject: [PATCH] v1.5.14 - Province/diplom. editors - emblems added

---
 index.css                      | 10 ++--------
 index.html                     |  6 +++---
 modules/burgs-and-states.js    |  2 +-
 modules/coa-generator.js       |  1 -
 modules/ui/diplomacy-editor.js |  9 ++++++---
 modules/ui/provinces-editor.js |  5 +++--
 modules/ui/states-editor.js    |  2 +-
 7 files changed, 16 insertions(+), 19 deletions(-)

diff --git a/index.css b/index.css
index 0adc7ba2..5244484c 100644
--- a/index.css
+++ b/index.css
@@ -1412,10 +1412,6 @@ div.states > .coaIcon {
 	transition: all .4s ease-in-out;
 }
 
-div.states > .coaIcon:hover {
-	transform: scale(8);
-}
-
 div.states > .coaIcon > use {
 	pointer-events: none;
 }
@@ -1523,12 +1519,10 @@ div.states.active {
 }
 
 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;
 	cursor: default !important;
+	padding: .2em 0 0 .5em;
+	font-weight: bold;
 }
 
 div.states button.selectCapital {
diff --git a/index.html b/index.html
index d8ed8b7f..ed7eb455 100644
--- a/index.html
+++ b/index.html
@@ -2427,7 +2427,7 @@
     <div id="burgEditor" class="dialog" style="display: none">
 
       <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 id="burgProvinceAndState" style="padding: .1em; font-style: italic"></div>
 
@@ -3089,9 +3089,9 @@
     <div id="provincesEditor" class="dialog stable" style="display: none">
       <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: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: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:35.3em" data-tip="Click to sort by province population" class="sortable hide" data-sortby="population">Population&nbsp;</div>
       </div>
diff --git a/modules/burgs-and-states.js b/modules/burgs-and-states.js
index 0c26db25..97bf5c07 100644
--- a/modules/burgs-and-states.js
+++ b/modules/burgs-and-states.js
@@ -885,7 +885,7 @@
   }
 
   // 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) {
     if (!s.formName) return s.name;
diff --git a/modules/coa-generator.js b/modules/coa-generator.js
index a0702e34..e0caf2c8 100644
--- a/modules/coa-generator.js
+++ b/modules/coa-generator.js
@@ -202,7 +202,6 @@
     // style settings for emblems layer
     // test in FF
     // layout preset
-    // other editors
 
     const t1 = P(kinship) ? parent.t1 : getTincture("field");
     if (t1.includes("-")) usedPattern = t1;
diff --git a/modules/ui/diplomacy-editor.js b/modules/ui/diplomacy-editor.js
index 67dc6173..c5f5e986 100644
--- a/modules/ui/diplomacy-editor.js
+++ b/modules/ui/diplomacy-editor.js
@@ -54,8 +54,10 @@ function editDiplomacy() {
     const selName = states[sel].fullName;
     diplomacySelect.style.display = "none";
 
-    let lines = `<div class="states Self" data-id=${sel}>
-      <div data-tip="List below shows relations to ${selName}" style="width: 100%">${selName}</div>
+    COArenderer.trigger("stateCOA"+sel, states[sel].coa);
+    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>`;
 
     for (const s of states) {
@@ -66,9 +68,10 @@ function editDiplomacy() {
       const tip = s.fullName + description[index] + selName;
       const tipSelect = `${tip}. Click to see relations to ${s.name}`;
       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}">
-        <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>
         <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>
diff --git a/modules/ui/provinces-editor.js b/modules/ui/provinces-editor.js
index 90966494..e8fab8dd 100644
--- a/modules/ui/provinces-editor.js
+++ b/modules/ui/provinces-editor.js
@@ -38,7 +38,7 @@ function editProvinces() {
     const el = ev.target, cl = el.classList, line = el.parentNode, p = +line.dataset.id;
     if (cl.contains("fillRect")) changeFill(el); 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-flag-empty")) triggerIndependencePromps(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 separable = p.burg && p.burg !== pack.states[p.state].capital;
       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}>
         <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>
-        <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>
         <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>
diff --git a/modules/ui/states-editor.js b/modules/ui/states-editor.js
index bd61aaec..42e228aa 100644
--- a/modules/ui/states-editor.js
+++ b/modules/ui/states-editor.js
@@ -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}>
         <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>
-        <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>
         <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"/>