From 549eefe7ba202e04c43eba9ee3bffd8c9c0fb38f Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Fri, 29 Jan 2021 23:41:43 +0300
Subject: [PATCH] v1.5.04 - Emblems layer and on map placement

---
 index.css                     |  11 +++-
 index.html                    |  63 ++++++++++++++++++++-
 main.js                       |   9 +--
 modules/burgs-and-states.js   |  27 +++++----
 modules/coa-generator.js      |  11 ++--
 modules/cultures-generator.js |  28 ++++++++-
 modules/ui/coa-editor.js      |  42 ++++++++++++--
 modules/ui/editors.js         |   3 +-
 modules/ui/general.js         |  11 +++-
 modules/ui/layers.js          | 103 +++++++++++++++++++++++++++++-----
 modules/ui/options.js         |  13 +++++
 modules/ui/style.js           |   2 +
 12 files changed, 276 insertions(+), 47 deletions(-)

diff --git a/index.css b/index.css
index cb989590..b5df6d00 100644
--- a/index.css
+++ b/index.css
@@ -101,7 +101,7 @@ button, select, a, .pointer {
 	fill-rule: evenodd;
 }
 
-#lakes, #coastline, #armies, #ice {
+#lakes, #coastline, #armies, #ice, #emblems {
 	cursor: pointer;
 }
 
@@ -707,6 +707,15 @@ fieldset {
 	width: 6%;
 }
 
+.emblemShapePreview {
+	width: 1.5em;
+	height: 1.5em;
+	margin: -.4em .1em;
+	fill: #fff;
+	stroke: #000;
+	stroke-width: 5px;
+}
+
 #styleContent table {
 	border-spacing: 0;
 	margin-left: .2em;
diff --git a/index.html b/index.html
index db2f0795..7890c3ce 100644
--- a/index.html
+++ b/index.html
@@ -956,6 +956,7 @@
           <li id="togglePopulation" data-tip="Population map: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: N" class="buttonoff" onclick="togglePopulation(event)">Populatio<u>n</u></li>
           <li id="toggleIce" data-tip="Icebergs and glaciers: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: J" class="buttonoff" onclick="toggleIce(event)">Ice</li>
           <li id="togglePrec" data-tip="Precipitation map: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: A" class="buttonoff" onclick="togglePrec(event)">Precipit<u>a</u>tion</li>
+          <li id="toggleEmblems" data-tip="Emblems: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: Y" class="buttonoff" onclick="toggleEmblems(event)">Emblems</li>
           <li id="toggleLabels" data-tip="Labels: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: L" onclick="toggleLabels(event)"><u>L</u>abels</li>
           <li id="toggleIcons" data-tip="Burg icons: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: I" onclick="toggleIcons(event)"><u>I</u>cons</li>
           <li id="toggleMilitary" data-tip="Military forces: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: M" class="buttonoff" onclick="toggleMilitary(event)"><u>M</u>ilitary</li>
@@ -994,6 +995,7 @@
           <option value="coastline">Coastline</option>
           <option value="coordinates">Coordinates</option>
           <option value="cults">Cultures</option>
+          <option value="emblems">Emblems</option>
           <option value="fogging">Fogging</option>
           <option value="gridOverlay">Grid</option>
           <option value="terrs">Heightmap</option>
@@ -1735,6 +1737,65 @@
               <output id="religionsOutput" data-stored="religions" value="auto"></output>
             </td>
           </tr>
+
+          <tr data-tip="Select emblem shape to be applied on generation. Can be set indivudually in Emblem editor">
+            <td>
+              <i data-locked=0 id="lock_emblemShape" class="icon-lock"></i>
+            </td>
+            <td>Emblem shape</td>
+            <td>
+              <select id="emblemShape" data-stored="emblemShape">
+                <option value="culture" selected>Culture-specific</option>
+                <option value="random">Culture-random</option>
+                <option value="state">State-specific</option>
+                <option value="heater">Heater</option>
+                <option value="spanish">Spanish</option>
+                <option value="french">French</option>
+                <option value="horsehead">Horsehead</option>
+                <option value="horsehead2">Horsehead Edgy</option>
+                <option value="polish">Polish</option>
+                <option value="hessen">Hessen</option>
+                <option value="swiss">Swiss</option>
+                <option value="boeotian">Boeotian</option>
+                <option value="roman">Roman</option>
+                <option value="kite">Kite</option>
+                <option value="oldFrench">Old French</option>
+                <option value="renaissance">Renaissance</option>
+                <option value="baroque">Baroque</option>
+                <option value="targe">Targe</option>
+                <option value="targe2">Targe2</option>
+                <option value="pavise">Pavise</option>
+                <option value="wedged">Wedged</option>
+                <option value="flag">Flag</option>
+                <option value="pennon">Pennon</option>
+                <option value="guidon">Guidon</option>
+                <option value="banner">Banner</option>
+                <option value="dovetail">Dovetail</option>
+                <option value="gonfalon">Gonfalon</option>
+                <option value="pennant">Pennant</option>
+                <option value="round">Round</option>
+                <option value="oval">Oval</option>
+                <option value="vesicaPiscis">Vesica Piscis</option>
+                <option value="square">Square</option>
+                <option value="diamond">Diamond</option>
+                <option value="fantasy1">Fantasy1</option>
+                <option value="fantasy2">Fantasy2</option>
+                <option value="fantasy3">Fantasy3</option>
+                <option value="fantasy4">Fantasy4</option>
+                <option value="fantasy5">Fantasy5</option>
+                <option value="noldor">Noldor</option>
+                <option value="gondor">Gondor</option>
+                <option value="easterling">Easterling</option>
+                <option value="erebor">Erebor</option>
+                <option value="ironHills">Iron Hills</option>
+                <option value="urukHai">UrukHai</option>
+                <option value="moriaOrc">Moria Orc</option>
+              </select>
+            </td>
+            <td>
+              <svg class="emblemShapePreview" viewBox="0 0 200 210"><path id="emblemShapeImage"/></svg>
+            </td>
+          </tr>
         </table>
 
         <p data-tip="Tool settings that don't affect maps. Changes are getting applied immediately">Generator settings:</p>
@@ -1799,7 +1860,7 @@
             </td>
           </tr>
 
-          <!-- <tr data-tip="Select language (please note not all languages are fully supported). Reload the page to apply">
+          <!-- <tr data-tip="Select language (not all languages are fully supported). Reload the page to apply">
             <td></td>
             <td>Language</td>
             <td>
diff --git a/main.js b/main.js
index 3ab242d7..697e7340 100644
--- a/main.js
+++ b/main.js
@@ -11,8 +11,8 @@ const version = "1.4"; // generator version
 document.title += " v" + version;
 
 // Switches to disable/enable logging features
-const INFO = 0;
-const TIME = 0;
+const INFO = 1;
+const TIME = 1;
 const WARN = 1;
 const ERROR = 1;
 
@@ -61,6 +61,7 @@ let coastline = viewbox.append("g").attr("id", "coastline");
 let ice = viewbox.append("g").attr("id", "ice").style("display", "none");
 let prec = viewbox.append("g").attr("id", "prec").style("display", "none");
 let population = viewbox.append("g").attr("id", "population");
+let emblems = viewbox.append("g").attr("id", "emblems");
 let labels = viewbox.append("g").attr("id", "labels");
 let icons = viewbox.append("g").attr("id", "icons");
 let burgIcons = icons.append("g").attr("id", "burgIcons");
@@ -555,7 +556,7 @@ function generate() {
     Names.getMapName();
 
     WARN && console.warn(`TOTAL: ${rn((performance.now()-timeStart)/1000,2)}s`);
-    showStatistics();
+    INFO && showStatistics();
     INFO && console.groupEnd("Generated Map " + seed);
   }
   catch(error) {
@@ -1718,7 +1719,7 @@ function showStatistics() {
 
   mapId = Date.now(); // unique map id is it's creation date number
   mapHistory.push({seed, width:graphWidth, height:graphHeight, template, created:mapId});
-  INFO && console.log(stats);
+  console.log(stats);
 }
 
 const regenerateMap = debounce(function() {
diff --git a/modules/burgs-and-states.js b/modules/burgs-and-states.js
index 6bf2a570..f44d3063 100644
--- a/modules/burgs-and-states.js
+++ b/modules/burgs-and-states.js
@@ -140,12 +140,14 @@
   }
 
   function getShield(culture, state) {
+    const emblemShape = document.getElementById("emblemShape").value;
+    if (emblemShape === "state" && state && pack.states[state].coa) return pack.states[state].coa.shield;
     if (pack.cultures[culture].shield) return pack.cultures[culture].shield;
-    if (state) return pack.states[state].coa.shield;
+    console.error("Emblem shape is not defined on culture level", pack.cultures[culture]);
     return "heater";
   }
 
-  // define burg coordinates, port status and define details
+  // define burg coordinates, coa, port status and define details
   const specifyBurgs = function() {
     TIME && console.time("specifyBurgs");
     const cells = pack.cells, vertices = pack.vertices, features = pack.features, temp = grid.cells.temp;
@@ -183,6 +185,10 @@
         if (i%2) b.x = rn(b.x + shift, 2); else b.x = rn(b.x - shift, 2);
         if (cells.r[i]%2) b.y = rn(b.y + shift, 2); else b.y = rn(b.y - shift, 2);
       }
+
+      const stateCOA = pack.states[b.state].coa;
+      b.coa = COA.generate(stateCOA);
+      b.coa.shield = getShield(b.culture, b.state);
     }
 
     // de-assign port status if it's the only one on feature
@@ -207,10 +213,6 @@
       const religion = cells.religion[b.cell];
       const theocracy = pack.states[b.state].form === "Theocracy";
       b.temple = religion && theocracy || pop > 50 || pop > 35 && P(.75) || pop > 20 && P(.5) ? 1 : 0;
-      const province = cells.province[b.cell];
-      const parentCOA = province ? pack.provinces[province].coa : pack.states[b.state].coa;
-      b.coa = COA.generate(parentCOA);
-      b.coa.shield = getShield(b.culture, b.state);
     });
   }
 
@@ -553,7 +555,7 @@
         el.insertAdjacentHTML("afterbegin", spans.join(""));
         if (lines.length < 2) return;
 
-        // check whether multilined label is generally inside the strate. If no, replace with short name label
+        // check whether multilined label is generally inside the state. If no, replace with short name label
         const cs = pack.cells.state, b = el.parentNode.getBBox();
         const c1 = () => +cs[findCell(b.x, b.y)] === id;
         const c2 = () => +cs[findCell(b.x + b.width / 2, b.y)] === id;
@@ -941,13 +943,14 @@
         const center = stateBurgs[i].cell;
         const burg = stateBurgs[i].i;
         const c = stateBurgs[i].culture;
-        const name = P(.5) ? Names.getState(Names.getCultureShort(c), c) : stateBurgs[i].name;
+        const nameByBurg = P(.5);
+        const name = nameByBurg ? stateBurgs[i].name : Names.getState(Names.getCultureShort(c), c);
         const formName = rw(form);
         form[formName] += 5;
         const fullName = name + " " + formName;
         const color = getMixedColor(s.color);
-        const coa = COA.generate(s.coa);
-        coa.shield = getShield(s.culture, s.i);
+        const coa = COA.generate(stateBurgs[i].coa);
+        coa.shield = getShield(c, s.i);
         provinces.push({i:province, state:s.i, center, burg, name, formName, fullName, color, coa});
       }
     });
@@ -1032,7 +1035,8 @@
 
         // generate "wild" province name
         const c = cells.culture[center];
-        const name = burgCell && P(.5) ? burgs[burg].name : Names.getState(Names.getCultureShort(c), c);
+        const nameByBurg = burgCell && P(.5);
+        const name = nameByBurg ? burgs[burg].name : Names.getState(Names.getCultureShort(c), c);
         const f = pack.features[cells.f[center]];
         const provCells = stateNoProvince.filter(i => cells.province[i] === province);
         const singleIsle = provCells.length === f.cells && !provCells.find(i => cells.f[i] !== f.i);
@@ -1042,6 +1046,7 @@
         const fullName = name + " " + formName;
         const color = getMixedColor(s.color);
         const coa = COA.generate(s.coa);
+        coa.shield = getShield(c, s.i);
         provinces.push({i:province, state:s.i, center, burg, name, formName, fullName, color, coa});
         s.provinces.push(province);
 
diff --git a/modules/coa-generator.js b/modules/coa-generator.js
index 869ad986..9f473711 100644
--- a/modules/coa-generator.js
+++ b/modules/coa-generator.js
@@ -191,7 +191,6 @@
   };
 
   const generate = function(parent) {
-    TIME && console.time("generateCOA");
     let usedPattern = null, usedTinctures = [];
 
     // TODO
@@ -199,8 +198,10 @@
     // stringify coa on save and load
     // regenerateAll
     // generate on new item creation
-    // shields for cultures
-    // old versions auti migration
+    // old versions auto migration: coa generation for cultures and states etc.
+    // emblems layer for old maps
+    // define emblems layer style for all styles
+    // add coa on click events for loaded map
 
     const t1 = parent && P(.25) ? parent.t1 : getTincture("field");
     const coa = {t1};
@@ -427,7 +428,6 @@
       return .7; // 1, 2
     }
 
-    TIME && console.timeEnd("generateCOA");
     return coa;
   }
 
@@ -442,7 +442,8 @@
   }
 
   const toString = coa => JSON.stringify(coa).replaceAll("#", "%23");
+  const copy = coa => JSON.parse(JSON.stringify(coa));
 
-  return {generate, generateAll, toString};
+  return {generate, generateAll, toString, copy};
 
 })));
\ No newline at end of file
diff --git a/modules/cultures-generator.js b/modules/cultures-generator.js
index 58f5a47a..01ed06a8 100644
--- a/modules/cultures-generator.js
+++ b/modules/cultures-generator.js
@@ -17,7 +17,7 @@
       count = Math.floor(populated.length / 50);
       if (!count) {
         WARN && console.warn(`There are no populated cells. Cannot generate cultures`);
-        pack.cultures = [{name:"Wildlands", i:0, base:1, shield:"moriaOrc"}];
+        pack.cultures = [{name:"Wildlands", i:0, base:1, shield:"round"}];
         alertMessage.innerHTML = `
           The climate is harsh and people cannot live in this world.<br>
           No cultures, states and burgs will be created.<br>
@@ -41,6 +41,7 @@
     const cultures = pack.cultures = getRandomCultures(count);
     const centers = d3.quadtree();
     const colors = getColors(count);
+    const emblemShape = document.getElementById("emblemShape").value;
 
     cultures.forEach(function(c, i) {
       const cell = c.center = placeCenter(c.sort ? c.sort : (i) => cells.s[i]);
@@ -54,8 +55,26 @@
       c.origin = 0;
       c.code = getCode(c.name);
       cells.culture[cell] = i+1;
+      if (emblemShape === "random") c.shield = getRandomShiled();
+      else if (emblemShape !== "culture" && emblemShape !== "state") c.shield = emblemShape;
     });
 
+    function getRandomShiled() {
+      const shields = {
+        types: {basic: 10, regional: 2, historical: 1, specific: 1, banner: 1, simple: 2, fantasy: 1, middleEarth: 0},
+        basic: {heater: 12, spanish: 6, french: 1},
+        regional: {horsehead: 1, horsehead2: 1, polish: 1, hessen: 1, swiss: 1},
+        historical: {boeotian: 1, roman: 2, kite: 1, oldFrench: 5, renaissance: 2, baroque: 2},
+        specific: {targe: 1, targe2: 0, pavise: 5, wedged: 10},
+        banner: {flag: 1, pennon: 0, guidon: 0, banner: 0, dovetail: 1, gonfalon: 5, pennant: 0},
+        simple: {round: 12, oval: 6, vesicaPiscis: 1, square: 1, diamond: 2, no: 0},
+        fantasy: {fantasy1: 2, fantasy2: 2, fantasy3: 1, fantasy4: 1, fantasy5: 3},
+        middleEarth: {noldor: 1, gondor: 1, easterling: 1, erebor: 1, ironHills: 1, urukHai: 1, moriaOrc: 1}
+      }
+      const type = rw(shields.types);
+      return rw(shields[type]);
+    }
+
     function placeCenter(v) {
       let c, spacing = (graphWidth + graphHeight) / 2 / count;
       const sorted = [...populated].sort((a, b) => v(b) - v(a)), max = Math.floor(sorted.length / 2);
@@ -65,10 +84,13 @@
     }
 
     // the first culture with id 0 is for wildlands
-    cultures.unshift({name:"Wildlands", i:0, base:1, origin:null});
+    cultures.unshift({name:"Wildlands", i:0, base:1, origin:null, shield:"round"});
 
     // make sure all bases exist in nameBases
-    if (!nameBases.length) {ERROR && console.error("Name base is empty, default nameBases will be applied"); nameBases = Names.getNameBases();}
+    if (!nameBases.length) {
+      ERROR && console.error("Name base is empty, default nameBases will be applied");
+      nameBases = Names.getNameBases();
+    }
     cultures.forEach(c => c.base = c.base % nameBases.length);
 
     function getRandomCultures(c) {
diff --git a/modules/ui/coa-editor.js b/modules/ui/coa-editor.js
index fd257c79..80b59435 100644
--- a/modules/ui/coa-editor.js
+++ b/modules/ui/coa-editor.js
@@ -2,6 +2,15 @@
 function editEmblem(type, id, el) {
   if (customization) return;
 
+  if (!id && d3.event) {
+    const data = d3.event.target.__data__;
+    type = data.type;
+    id = data.id;
+    el = data.el;
+  }
+
+  emblems.selectAll(":scope > 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");
@@ -10,8 +19,9 @@ function editEmblem(type, id, el) {
   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"}
+    title: "Edit Emblem", resizable: true, width: "auto", height: "auto",
+    position: {my: "left top", at: "left+10 top+10", of: "svg", collision: "fit"},
+    close: closeEmblemEditor
   });
 
   if (modules.editEmblem) return;
@@ -32,13 +42,19 @@ function editEmblem(type, id, el) {
 
     // 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;}
+    else if (type === "province") {
+      province = el.i
+      state = states[el.state].i;
+    } else {
+      burg = el.i;
+      province = cells.province[el.cell] ? provinces[cells.province[el.cell]].i : 0;
+      state = provinces[province].state || 0;
+    }
 
     // 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));
+    if (neutralBurgs.length) emblemStates.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)));
 
@@ -50,7 +66,7 @@ function editEmblem(type, id, el) {
     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)));
+    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);
@@ -105,4 +121,18 @@ function editEmblem(type, id, el) {
     id = "burgCOA"+ burg;
     updateElementSelectors(type, id, el);
   }
+
+  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(":scope > use").call(d3.drag().on("drag", null)).attr("class", null);
+  }
 }
\ No newline at end of file
diff --git a/modules/ui/editors.js b/modules/ui/editors.js
index a67873ff..f6cc739b 100644
--- a/modules/ui/editors.js
+++ b/modules/ui/editors.js
@@ -21,7 +21,8 @@ function clicked() {
   const p = d3.mouse(this);
   const i = findCell(p[0], p[1]);
 
-  if (parent.id === "rivers") editRiver();
+  if (parent.id === "emblems") editEmblem();
+  else if (parent.id === "rivers") editRiver();
   else if (grand.id === "routes") editRoute();
   else if (el.tagName === "tspan" && grand.parentNode.parentNode.id === "labels") editLabel();
   else if (grand.id === "burgLabels") editBurg();
diff --git a/modules/ui/general.js b/modules/ui/general.js
index 3c1c7470..ed3254e8 100644
--- a/modules/ui/general.js
+++ b/modules/ui/general.js
@@ -94,6 +94,14 @@ function showMapTooltip(point, e, i, g) {
     tip(e.target.parentNode.dataset.name + ". Click to edit");
     return;
   }
+  if (group === "emblems" && e.target.__data__?.el) {
+    const el = d3.select(e.target);
+    el.raise();
+    const name = el.datum().el.fullName || el.datum().el.name || "";
+    const type = el.datum().type || "";
+    tip(`${name} ${type} emblem. Click to edit`);
+    return;
+  }
   if (group === "rivers") {
     const river = +e.target.id.slice(5);
     const r = pack.rivers.find(r => r.i === river);
@@ -171,7 +179,7 @@ function highlightEditorLine(editor, id, timeout = 15000) {
   Array.from(editor.getElementsByClassName("states hovered")).forEach(el => el.classList.remove("hovered")); // clear all hovered
   const hovered = Array.from(editor.querySelectorAll("div")).find(el => el.dataset.id == id);
   if (hovered) hovered.classList.add("hovered"); // add hovered class
-  if (timeout) setTimeout(() => hovered.classList.remove("hovered"), timeout);
+  if (timeout) setTimeout(() => {hovered && hovered.classList.remove("hovered")}, timeout);
 }
 
 // get cell info on mouse move
@@ -454,6 +462,7 @@ document.addEventListener("keyup", event => {
   else if (key === 78) togglePopulation(); // "N" to toggle Population layer
   else if (key === 74) toggleIce(); // "J" to toggle Ice layer
   else if (key === 65) togglePrec(); // "A" to toggle Precipitation layer
+  else if (key === 89) toggleEmblems(); // "Y" to toggle Emblems layer
   else if (key === 76) toggleLabels(); // "L" to toggle Labels layer
   else if (key === 73) toggleIcons(); // "I" to toggle Icons layer
   else if (key === 77) toggleMilitary(); // "M" to toggle Military layer
diff --git a/modules/ui/layers.js b/modules/ui/layers.js
index 6f66e108..018c1b2a 100644
--- a/modules/ui/layers.js
+++ b/modules/ui/layers.js
@@ -17,6 +17,7 @@ function restoreLayers() {
   if (layerIsOn("toggleProvinces")) drawProvinces();
   if (layerIsOn("toggleReligions")) drawReligions();
   if (layerIsOn("toggleIce")) drawIce();
+  if (layerIsOn("toggleEmblems")) drawEmblems();
 
   // states are getting rendered each time, if it's not required than layers should be hidden
   if (!layerIsOn("toggleBorders")) $('#borders').fadeOut();
@@ -877,6 +878,26 @@ function drawProvinces() {
   const labelsOn = provs.attr("data-labels") == 1;
   provs.selectAll("*").remove();
 
+  const provinces = pack.provinces;
+  const {body, gap} = getProvincesVertices();
+
+  const g = provs.append("g").attr("id", "provincesBody");
+  const bodyData = body.map((p, i) => [p.length > 10 ? p : null, i, provinces[i].color]).filter(d => d[0]);
+  g.selectAll("path").data(bodyData).enter().append("path").attr("d", d => d[0]).attr("fill", d => d[2]).attr("stroke", "none").attr("id", d => "province"+d[1]);
+  const gapData = gap.map((p, i) => [p.length > 10 ? p : null, i, provinces[i].color]).filter(d => d[0]);
+  g.selectAll(".path").data(gapData).enter().append("path").attr("d", d => d[0]).attr("fill", "none").attr("stroke", d => d[2]).attr("id", d => "province-gap"+d[1]);
+
+  const labels = provs.append("g").attr("id", "provinceLabels");
+  labels.style("display", `${labelsOn ? "block" : "none"}`);
+  const labelData = provinces.filter(p => p.i && !p.removed);
+  labels.selectAll(".path").data(labelData).enter().append("text")
+    .attr("x", d => d.pole[0]).attr("y", d => d.pole[1])
+    .attr("id", d => "provinceLabel"+d.i).text(d => d.name);
+
+  TIME && console.timeEnd("drawProvinces");
+}
+
+function getProvincesVertices() {
   const cells = pack.cells, vertices = pack.vertices, provinces = pack.provinces, n = cells.i.length;
   const used = new Uint8Array(cells.i.length);
   const vArray = new Array(provinces.length); // store vertices array
@@ -906,18 +927,7 @@ function drawProvinces() {
     provinces[i].pole = polylabel(sorted, 1.0); // pole of inaccessibility
   });
 
-  const g = provs.append("g").attr("id", "provincesBody");
-  const bodyData = body.map((p, i) => [p.length > 10 ? p : null, i, provinces[i].color]).filter(d => d[0]);
-  g.selectAll("path").data(bodyData).enter().append("path").attr("d", d => d[0]).attr("fill", d => d[2]).attr("stroke", "none").attr("id", d => "province"+d[1]);
-  const gapData = gap.map((p, i) => [p.length > 10 ? p : null, i, provinces[i].color]).filter(d => d[0]);
-  g.selectAll(".path").data(gapData).enter().append("path").attr("d", d => d[0]).attr("fill", "none").attr("stroke", d => d[2]).attr("id", d => "province-gap"+d[1]);
-
-  const labels = provs.append("g").attr("id", "provinceLabels");
-  labels.style("display", `${labelsOn ? "block" : "none"}`);
-  const labelData = provinces.filter(p => p.i && !p.removed);
-  labels.selectAll(".path").data(labelData).enter().append("text")
-    .attr("x", d => d.pole[0]).attr("y", d => d.pole[1])
-    .attr("id", d => "provinceLabel"+d.i).text(d => d.name);
+  return {body, gap};
 
   // connect vertices to chain
   function connectVertices(start, t, province) {
@@ -942,7 +952,7 @@ function drawProvinces() {
     chain.push([start, province, land]); // add starting vertex to sequence to close the path
     return chain;
   }
-  TIME && console.timeEnd("drawProvinces");
+
 }
 
 function toggleGrid(event) {
@@ -1214,7 +1224,71 @@ function toggleZones(event) {
     if (event && isCtrlClick(event)) {editStyle("zones"); return;}
     turnButtonOff("toggleZones");
     $('#zones').fadeOut();
-  }  
+  }
+}
+
+function toggleEmblems(event) {
+  if (!layerIsOn("toggleEmblems")) {
+    turnButtonOn("toggleEmblems");
+    if (!emblems.selectAll("*").size()) drawEmblems();
+    $('#emblems').fadeIn();
+    if (event && isCtrlClick(event)) editStyle("emblems");
+  } else {
+    if (event && isCtrlClick(event)) {editStyle("emblems"); return;}
+    $('#emblems').fadeOut();
+    turnButtonOff("toggleEmblems");
+  }
+}
+
+function drawEmblems() {
+  TIME && console.time("drawEmblems");
+  const {states, provinces, burgs, cells} = pack;
+
+  let svg = "";
+
+  // const sizeBurgs = +emblems.attr("size-burgs") || 15;
+  // burgs.filter(b => b.i && !b.removed && b.coa).forEach(burg => {
+  //   const {x, y} = burg;
+  //   COArenderer.trigger("burgCOA"+burg.i, burg.coa);
+  //   svg += `<use x=${x-sizeBurgs/2} y=${y-sizeBurgs/2} width=${sizeBurgs} height=${sizeBurgs} href="#burgCOA${burg.i}"></use>`;
+  // });
+
+  const sizeProvinces = +emblems.attr("size-provinces") || 25;
+  const provinceCOAs = provinces.filter(p => p.i && !p.removed && p.coa).map(province => {
+    if (!province.pole) getProvincesVertices();
+    const [x, y] = province.pole;
+    COArenderer.trigger("provinceCOA"+province.i, province.coa);
+    //svg += `<use x=${x-sizeProvinces/2} y=${y-sizeProvinces/2} width=${sizeProvinces} height=${sizeProvinces} href="#provinceCOA${province.i}"></use>`;
+    return {type: "province", id: "provinceCOA"+province.i, x: x - sizeProvinces/2, y: y - sizeProvinces/2, size: sizeProvinces, el: province};
+  });
+
+  const sizeStates = +emblems.attr("size-states") || 50;
+  const stateCOAs = states.filter(s => s.i && !s.removed && s.coa).map(state => {
+    const [x, y] = state.pole;
+    COArenderer.trigger("stateCOA"+state.i, state.coa);
+    //svg += `<use x=${x-sizeStates/2} y=${y-sizeStates/2} width=${sizeStates} height=${sizeStates} href="#stateCOA${state.i}"></use>`;
+    return {type: "state", id: "stateCOA"+state.i, x: x - sizeStates/2, y: y - sizeStates/2, size: sizeStates, el: state};
+  });
+
+  const nodes = provinceCOAs.concat(stateCOAs);
+  // emblems.html(svg);
+
+  const simulation = d3.forceSimulation(nodes)
+    .alphaMin(.6).alphaDecay(.2)
+    .force('collision', d3.forceCollide().radius(d => d.size/2));
+
+  const node = emblems.selectAll("use").data(nodes).join("use")
+    .attr("href", d => "#"+d.id)
+    .attr("x", d => d.x)
+    .attr("y", d => d.y)
+    .attr("width", d => d.size)
+    .attr("height", d => d.size);
+
+  simulation.on("tick", () => {
+    node.attr("x", d => d.x).attr("y", d => d.y);
+  });
+
+  TIME && console.timeEnd("drawEmblems");
 }
 
 function layerIsOn(el) {
@@ -1262,6 +1336,7 @@ function getLayer(id) {
   if (id === "togglePopulation") return $("#population");
   if (id === "toggleIce") return $("#ice");
   if (id === "toggleTexture") return $("#texture");
+  if (id === "toggleEmblems") return $("#emblems");
   if (id === "toggleLabels") return $("#labels");
   if (id === "toggleIcons") return $("#icons");
   if (id === "toggleMarkers") return $("#markers");
diff --git a/modules/ui/options.js b/modules/ui/options.js
index 7a6e24c3..ed20fdf8 100644
--- a/modules/ui/options.js
+++ b/modules/ui/options.js
@@ -114,6 +114,7 @@ optionsContent.addEventListener("input", function(event) {
   else if (id === "neutralOutput") neutralInput.value = value;
   else if (id === "manorsInput") changeBurgsNumberSlider(value);
   else if (id === "religionsInput") religionsOutput.value = value;
+  else if (id === "emblemShape") changeEmblemShape(value);
   else if (id === "uiSizeInput") uiSizeOutput.value = value;
   else if (id === "uiSizeOutput") changeUIsize(value);
   else if (id === "tooltipSizeInput" || id === "tooltipSizeOutput") changeTooltipSize(value);
@@ -262,6 +263,17 @@ function changeCultureSet() {
   if (+culturesOutput.value > +max) culturesInput.value = culturesOutput.value = max;
 }
 
+function changeEmblemShape(value) {
+  const image = document.getElementById("emblemShapeImage");
+  const shapeEl = document.getElementById(value);
+  if (shapeEl) {
+    const shape = shapeEl.querySelector("path").getAttribute("d");
+    image.setAttribute("d", shape);
+  } else {
+    image.removeAttribute("d");
+  }
+}
+
 function changeStatesNumber(value) {
   regionsInput.value = regionsOutput.value = value;
   regionsOutput.style.color = +value ? null : "#b12117";
@@ -380,6 +392,7 @@ function randomizeOptions() {
 
   // World settings
   generateEra();
+  changeEmblemShape(emblemShape.value); // change emblem shape image
 }
 
 // select heightmap template pseudo-randomly
diff --git a/modules/ui/style.js b/modules/ui/style.js
index db3b1db8..13a9d5f0 100644
--- a/modules/ui/style.js
+++ b/modules/ui/style.js
@@ -795,6 +795,8 @@ function applyDefaultStyle() {
   labels.select("#addedLabels").attr("fill", "#3e3e4b").attr("opacity", 1).attr("stroke", "#3a3a3a").attr("stroke-width", 0).attr("font-family", "Almendra SC").attr("data-font", "Almendra+SC").attr("font-size", 18).attr("data-size", 18).attr("filter", null);
 
   fogging.attr("opacity", .98).attr("fill", "#30426f");
+
+  emblems.attr("opacity", .9).attr("size-states", 50).attr("size-provinces", 25).attr("size-burgs", 15).attr("filter", null);
 }
 
 // apply style settings in JSON