v1.5.33 - emblem shape change takes immediate effect

index.html

@@ -1107,8 +1107,67 @@
               <output id="religionsOutput" data-stored="religions" value="auto"></output>
             </td>
           </tr>
+        </table>
 
-          <tr data-tip="Select emblem shape to be applied on generation. Can be set indivudually in Emblem editor">
+        <p data-tip="Tool settings that don't affect maps. Changes are getting applied immediately">Generator settings:</p>
+        <table>
+          <tr data-tip="Set what Generator should do on opening">
+            <td></td>
+            <td>Onload behavior</td>
+            <td>
+              <select id="onloadMap" data-stored="onloadMap">
+                <option value="random" selected>Generate random map</option>
+                <option value="saved">Open last saved map</option>
+              </select>
+            </td>
+            <td></td>
+          </tr>
+
+          <tr data-tip="Set user interface size. Please note browser zoom also affects interface size (Ctrl + or Ctrl - to change)">
+            <td></td>
+            <td>Interface size</td>
+            <td>
+              <input id="uiSizeInput" data-stored="uiSize" type="range" min=.6 max=3 step=.1 value=1>
+            </td>
+            <td>
+              <input id="uiSizeOutput" data-stored="uiSize" type="number" min=.6 max=3 step=.1 value=1>
+            </td>
+          </tr>
+
+          <tr data-tip="Set tooltip size">
+            <td></td>
+            <td>Tooltip size</td>
+            <td>
+              <input id="tooltipSizeInput" data-stored="tooltipSize" type="range" min=4 max=32 value=14>
+            </td>
+            <td>
+              <input id="tooltipSizeOutput" data-stored="tooltipSize" type="number" min=4 max=32 value=14>
+            </td>
+          </tr>
+
+          <tr data-tip="Set dialog and tool windows transparency">
+            <td></td>
+            <td>Transparency</td>
+            <td>
+              <input id="transparencyInput" data-stored="transparency" type="range" min=0 max=100 value=15>
+            </td>
+            <td>
+              <input id="transparencyOutput" data-stored="transparency" type="number" min=0 max=100 value=15>
+            </td>
+          </tr>
+
+          <tr data-tip="Select speech synthesis voice to pronounce generated names">
+            <td></td>
+            <td>Speaker voice</td>
+            <td>
+              <select id="speakerVoice" data-stored="speakerVoice"></select>
+            </td>
+            <td>
+              <span id="speakerTest" data-tip="Click to test the voice" style="cursor: pointer">🔊</span>
+            </td>
+          </tr>
+
+          <tr data-tip="Select emblem shape. Can be changed indivudually in Emblem editor">
             <td>
               <i data-locked=0 id="lock_emblemShape" class="icon-lock"></i>
             </td>
@@ -1184,65 +1243,6 @@
               <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>
-        <table>
-          <tr data-tip="Set what Generator should do on opening">
-            <td></td>
-            <td>Onload behavior</td>
-            <td>
-              <select id="onloadMap" data-stored="onloadMap">
-                <option value="random" selected>Generate random map</option>
-                <option value="saved">Open last saved map</option>
-              </select>
-            </td>
-            <td></td>
-          </tr>
-
-          <tr data-tip="Set user interface size. Please note browser zoom also affects interface size (Ctrl + or Ctrl - to change)">
-            <td></td>
-            <td>Interface size</td>
-            <td>
-              <input id="uiSizeInput" data-stored="uiSize" type="range" min=.6 max=3 step=.1 value=1>
-            </td>
-            <td>
-              <input id="uiSizeOutput" data-stored="uiSize" type="number" min=.6 max=3 step=.1 value=1>
-            </td>
-          </tr>
-
-          <tr data-tip="Set tooltip size">
-            <td></td>
-            <td>Tooltip size</td>
-            <td>
-              <input id="tooltipSizeInput" data-stored="tooltipSize" type="range" min=4 max=32 value=14>
-            </td>
-            <td>
-              <input id="tooltipSizeOutput" data-stored="tooltipSize" type="number" min=4 max=32 value=14>
-            </td>
-          </tr>
-
-          <tr data-tip="Set dialog and tool windows transparency">
-            <td></td>
-            <td>Transparency</td>
-            <td>
-              <input id="transparencyInput" data-stored="transparency" type="range" min=0 max=100 value=15>
-            </td>
-            <td>
-              <input id="transparencyOutput" data-stored="transparency" type="number" min=0 max=100 value=15>
-            </td>
-          </tr>
-
-          <tr data-tip="Select speech synthesis voice to pronounce generated names">
-            <td></td>
-            <td>Speaker voice</td>
-            <td>
-              <select id="speakerVoice" data-stored="speakerVoice"></select>
-            </td>
-            <td>
-              <span id="speakerTest" data-tip="Click to test the voice" style="cursor: pointer">🔊</span>
-            </td>
-          </tr>
 
           <tr data-tip="Set minimum and maximum possible zoom level">
             <td></td>

modules/coa-renderer.js

@@ -1051,6 +1051,6 @@
     if (layerIsOn("toggleEmblems")) trigger(id, coa);
   }
 
-  return {trigger, add};
+  return {trigger, add, shieldPaths};
 
 })));

modules/cultures-generator.js

@@ -55,26 +55,10 @@
       c.origin = 0;
       c.code = getCode(c.name);
       cells.culture[cell] = i+1;
-      if (emblemShape === "random") c.shield = getRandomShiled();
+      if (emblemShape === "random") c.shield = getRandomShield();
       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);
@@ -161,7 +145,14 @@
     const code = getCode(name);
     const i = pack.cultures.length;
     const color = d3.color(d3.scaleSequential(d3.interpolateRainbow)(Math.random())).hex();
-    pack.cultures.push({name, color, base, center, i, expansionism:1, type:"Generic", cells:0, area:0, rural:0, urban:0, origin:0, code});
+
+    // define emblem shape
+    const emblemShape = document.getElementById("emblemShape").value;
+    let shield = culture.shield;
+    if (emblemShape === "random") shield = getRandomShield();
+    else if (emblemShape !== "culture" && emblemShape !== "state") shield = emblemShape;
+
+    pack.cultures.push({name, color, base, center, i, expansionism:1, type:"Generic", cells:0, area:0, rural:0, urban:0, origin:0, code, shield});
   }
 
   const getDefault = function(count) {
@@ -428,6 +419,22 @@
     return 0;
   }
 
-  return {generate, add, expand, getDefault};
+  const getRandomShield = function() {
+    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]);
+  }
+
+  return {generate, add, expand, getDefault, getRandomShield};
 
 })));

modules/ui/emblems-editor.js

@@ -150,7 +150,8 @@ function editEmblem(type, id, el) {
 
   function changeShape() {
     el.coa.shield = this.value;
-    document.getElementById(id).remove();
+    const coaEl = document.getElementById(id);
+    if (coaEl) coaEl.remove();
     COArenderer.trigger(id, el.coa);
   }
 

modules/ui/options.js

@@ -289,15 +289,44 @@ function changeCultureSet() {
   if (+culturesOutput.value > +max) culturesInput.value = culturesOutput.value = max;
 }
 
-function changeEmblemShape(value) {
+function changeEmblemShape(emblemShape) {
   const image = document.getElementById("emblemShapeImage");
-  const shapeEl = document.getElementById(value);
+  const shapePath = window.COArenderer && COArenderer.shieldPaths[emblemShape];
-  if (shapeEl) {
+  shapePath ? image.setAttribute("d", shapePath) : image.removeAttribute("d");
-    const shape = shapeEl.querySelector("path").getAttribute("d");
+
-    image.setAttribute("d", shape);
+  const specificShape = ["culture", "state", "random"].includes(emblemShape) ? null : emblemShape;
-  } else {
+  if (emblemShape === "random") pack.cultures.filter(c => !c.removed).forEach(c => c.shield = Cultures.getRandomShield());
-    image.removeAttribute("d");
+
+  const rerenderCOA = (id, coa) => {
+    const coaEl = document.getElementById(id);
+    if (coaEl) coaEl.remove();
+    COArenderer.trigger(id, coa);
   }
+
+  pack.states.forEach(state => {
+    if (!state.i || state.removed || !state.coa || state.coa === "custom") return;
+    const newShield = specificShape || COA.getShield(state.culture, null);
+    if (newShield === state.coa.shield) return;
+    state.coa.shield = newShield;
+    rerenderCOA("stateCOA" + state.i, state.coa);
+  });
+
+  pack.provinces.forEach(province => {
+    if (!province.i || province.removed || !province.coa || province.coa === "custom") return;
+    const culture = pack.cells.culture[province.center];
+    const newShield = specificShape || COA.getShield(culture, province.state);
+    if (newShield === province.coa.shield) return;
+    province.coa.shield = newShield;
+    rerenderCOA("provinceCOA" + province.i, province.coa);
+  });
+
+  pack.burgs.forEach(burg => {
+    if (!burg.i || burg.removed || !burg.coa || burg.coa === "custom") return;
+    const newShield = specificShape || COA.getShield(burg.culture, burg.state);
+    if (newShield === burg.coa.shield) return;
+    burg.coa.shield = newShield
+    rerenderCOA("burgCOA" + burg.i, burg.coa);
+  });
 }
 
 function changeStatesNumber(value) {
@@ -419,7 +448,6 @@ function randomizeOptions() {
 
   // World settings
   generateEra();
-  changeEmblemShape(emblemShape.value); // change emblem shape image
 }
 
 // select heightmap template pseudo-randomly