v1.2.02

Author: Azgaar

index.css

@@ -70,10 +70,12 @@ button, select, a {
 
 #biomes {
 	stroke-width: .7;
+	fill-rule: evenodd;
 }
 
 #landmass {
 	mask: url(#land);
+	fill-rule: evenodd;
 }
 
 #lakes, #coastline {
@@ -86,6 +88,11 @@ button, select, a {
 	text-anchor: middle;
 	dominant-baseline: central;
 	text-shadow: 0px 0px 10px white;
+	fill-rule: evenodd;
+}
+
+#oceanLayers {
+	fill-rule: evenodd;
 }
 
 #coastline {
@@ -99,7 +106,7 @@ button, select, a {
 
 #statesBody, #provincesBody {
 	stroke-width: 2;
-
+	fill-rule: evenodd;
 	mask: url(#land);
 }
 
@@ -620,14 +627,8 @@ fieldset {
 	cursor: default;
 }
 
-#cellInfo>div {
-	margin: 3px 0px 3px 3px;
-	display: inline-block;
-	vertical-align: top;
-}
-
-#cellInfo>div:nth-child(2) {
-	width: 50%;
+#cellInfo {
+	user-select: text;
 }
 
 #tooltip {
@@ -1582,7 +1583,7 @@ div.states > div.biomeArea {
 
 #ruler .planimeter {
 	fill: lightblue;
-
+	fill-rule: evenodd;
 	fill-opacity: 0.5;
 	stroke: #737373;
 }
@@ -1831,8 +1832,9 @@ svg.button {
 #alertMessage {
 	-moz-user-select: text;
 	user-select: text;
-	max-height: 75vh;
+	max-height: 70vh;
 	max-width: 75vw;
+	overflow: auto;
 }
 
 #alertMessage ul {

index.html

@@ -1249,7 +1249,7 @@
                   <td>Style</td>
                   <td>
                     <select id="styleReliefSet">
-                      <option value="simple" selected>Old</option>
+                      <option value="simple" selected>Simple</option>
                       <option value="gray">Gray</option>
                       <option value="colored">Colored</option>
                     </select>
@@ -1520,21 +1520,21 @@
         <p data-tip="Map generation settings. Generate a new map to apply the settings">Map settings (new map to apply):</p>
         <table>
 
-          <tr data-tip="Map height and width in pixels. Please consider reducing map size in case of performance issues">
+          <tr data-tip="Canvas height and width in pixels, please keep at your screen size or less to improve performance">
             <td></td>
-            <td>Map size</td>
+            <td>Canvas size</td>
             <td>
               <span data-tip="Map width in pixels">width</span>
               <input data-tip="Map width in pixels" id="mapWidthInput" class="paired" type="number" min=240 value=960>
               <span data-tip="Map height in pixels">height</span>
               <input data-tip="Map height in pixels" id="mapHeightInput" class="paired" type="number" min=135 value=540>
             </td>
             <td>
-              <i data-tip="Toggle between screen size and initial map size" id="toggleFullscreen" class="icon-resize-full-alt"></i>
+              <i data-tip="Toggle between screen size and initial canvas size" id="toggleFullscreen" class="icon-resize-full-alt"></i>
             </td>
           </tr>
 
-          <tr data-tip="Map seed number. Seed produces the same map only if map size and options are the same">
+          <tr data-tip="Map seed number. Seed produces the same map only if canvas size and options are the same">
             <td>
               <i data-tip="Click to generate a map for this seed" id="optionsSeedGenerate"></i>
             </td>
@@ -1581,7 +1581,7 @@
                 <option value="Volcano">Volcano</option>
                 <option value="High Island">High Island</option>
                 <option value="Low Island">Low Island</option>
-                <option value="Continents">Continents</option>
+                <option value="Continents">Two Continents</option>
                 <option value="Archipelago">Archipelago</option>
                 <option value="Atoll">Atoll</option>
                 <option value="Mediterranean">Mediterranean</option>
@@ -1692,7 +1692,7 @@
             </td>
           </tr>
 
-          <tr data-tip="Define how many organized (!) religions and cults should be generated">
+          <tr data-tip="Define how many organized religions and cults should be generated. Cultures will have their own folk religions in any case">
             <td>
               <i data-locked=0 id="lock_religions" class="icon-lock-open"></i>
             </td>
@@ -1805,6 +1805,7 @@
         <div>
           <p>Click to overview:</p>
           <button id="overviewBurgsButton" data-tip="Click to open Burgs Overview. Shortcut: Shift + T">Burgs</button>
+          <button id="overviewCellsButton" data-tip="Click to open Cell details view. Shortcut: Shift + E">Cells</button>
           <!-- <button id="overviewLandmassedButton" data-tip="Click to open Landmasses Overview. Shortcut: Shift + L">Landmasses</button> -->
           <!-- <button id="overviewWaterbodiesButton" data-tip="Click to open Waterbodies Overview. Shortcut: Shift + W">Waterbodies</button> -->
           <!-- <button id="overviewRiversButton" data-tip="Click to open Rivers Overview. Shortcut: Shift + V">Rivers</button> -->
@@ -1834,30 +1835,6 @@
           <button id="addRoute" data-tip="Click on map to place a route. Shortcut: Shift + E">Route</button>
           <button id="addMarker" data-tip="Click on map to place a marker. Hold Shift to add multiple. Shortcut: Shift + K">Marker</button>
         </div>
-
-        <p>Cell info: <i data-tip="Click to toggle the section" class="collapsible icon-down-open pointer"></i></p>
-        <div id="cellInfo" style="display: none">
-          <div>
-            Coord: <span id="infoX">0</span>/<span id="infoY">0</span><br>
-            Cell: <span id="infoCell">0</span><br>
-            Area: <span id="infoArea">0</span><br>
-          </div>
-          <div>
-            Type: <span id="infoFeature">n/a</span><br>
-            Precip: <span id="infoPrec">0</span><br>
-            Population: <span id="infoPopulation">0</span>
-          </div>
-          <div>
-            Height: <span id="infoHeight">0</span><br>
-            Temperature: <span id="infoTemp">0</span><br>
-            Biome: <span id="infoBiome">n/a</span><br>
-            State: <span id="infoState">n/a</span><br>
-            Province: <span id="infoProvince">n/a</span><br>
-            Culture: <span id="infoCulture">n/a</span><br>
-            Religion: <span id="infoReligion">n/a</span><br>
-            Burg: <span id="infoBurg">n/a</span>
-          </div>
-        </div>
       </div>
 
       <div id="customizationMenu" class="tabcontent">
@@ -1995,8 +1972,8 @@
             <input id="precOutput" data-stored="prec" type="range" min="0" max="500" value="50">
           </label>
         </div>
-        <div data-tip="Map size. Can be changed in general options">
-          <i>Map size:</i><br>
+        <div data-tip="Canvas size. Can be changed in general options on new map generation">
+          <i>Canvas size:</i><br>
           <span id="mapSize"></span> px = <span id="mapSizeFriendly"></span>
         </div>
         <div>
@@ -2503,7 +2480,7 @@
           <option value="templateVolcano">Volcano</option>
           <option value="templateHighIsland">High Island</option>
           <option value="templateLowIsland">Low Island</option>
-          <option value="templateContinents">Continents</option>
+          <option value="templateContinents">Two Continents</option>
           <option value="templateArchipelago">Archipelago</option>
           <option value="templateAtoll">Atoll</option>
           <option value="templateMediterranean">Mediterranean</option>
@@ -3238,6 +3215,23 @@
       </div>
     </div>
 
+    <div id="cellInfo" style="display: none" class="dialog stable">
+      <p><b>Cell:</b> <span id="infoCell">0</span></p>
+      <p><b>Coord:</b> <span id="infoX">0</span>/<span id="infoY">0</span></p>
+      <p><b>Area:</b> <span id="infoArea">0</span></p>
+      <p><b>Type:</b> <span id="infoFeature">n/a</span></p>
+      <p><b>Precipitation:</b> <span id="infoPrec">0</span></p>
+      <p><b>Population:</b> <span id="infoPopulation">0</span></p>
+      <p><b>Height:</b> <span id="infoHeight">0</span></p>
+      <p><b>Temperature:</b> <span id="infoTemp">0</span></p>
+      <p><b>Biome:</b> <span id="infoBiome">n/a</span></p>
+      <p><b>State:</b> <span id="infoState">n/a</span></p>
+      <p><b>Province:</b> <span id="infoProvince">n/a</span></p>
+      <p><b>Culture:</b> <span id="infoCulture">n/a</span></p>
+      <p><b>Religion:</b> <span id="infoReligion">n/a</span></p>
+      <p><b>Burg:</b> <span id="infoBurg">n/a</span></p>
+    </div>
+
     <div id="preview3d" class="dialog stable" style="display: none; padding: 0px"></div>
 
     <div id="alert" style="display: none" class="dialog">

modules/relief-icons.js

@@ -4,13 +4,12 @@
     (global.ReliefIcons = factory());
 }(this, (function () {'use strict';
 
-  var ReliefIcons = function ReliefIcons() {
+  const ReliefIcons = function() {
     console.time('drawRelief');
     terrain.selectAll("*").remove();
-    const density = +styleReliefDensityInput.value;
-    if (!density) return;
-
-    const size = 1.6, mod = .2 * size; // size modifier;s
+    const density = terrain.attr("density") || .4;
+    const size = 1.6 * (terrain.attr("size") || 1);
+    const mod = .2 * size; // size modifier;s
     const relief = []; // t: type, c: cell, x: centerX, y: centerY, s: size;
     const cells = pack.cells;
 
@@ -106,9 +105,10 @@
   }
 
   function getIcon(type) {
-    if (styleReliefSet.value === "simple") return "#relief-" + getOldIcon(type) + "-1";
-    if (styleReliefSet.value === "colored") return "#relief-" + type + "-" + getVariant(type);
-    if (styleReliefSet.value === "gray") return "#relief-" + type + "-" + getVariant(type) + "-bw";
+    const set = terrain.attr("set") || "simple";
+    if (set === "simple") return "#relief-" + getOldIcon(type) + "-1";
+    if (set === "colored") return "#relief-" + type + "-" + getVariant(type);
+    if (set === "gray") return "#relief-" + type + "-" + getVariant(type) + "-bw";
     return "#relief-" + getOldIcon(type) + "-1"; // simple
   }
 

modules/save-and-load.js

@@ -74,7 +74,7 @@ async function saveJPEG() {
 }
 
 // parse map svg to object url
-async function getMapURL(type) {
+async function getMapURL(type, subtype) {
   const cloneEl = document.getElementById("map").cloneNode(true); // clone svg
   cloneEl.id = "fantasyMap";
   document.body.appendChild(cloneEl);
@@ -83,6 +83,7 @@ async function getMapURL(type) {
 
   const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
   if (isFirefox && type === "mesh") clone.select("#oceanPattern").remove();
+  if (subtype === "globe") clone.select("#scaleBar").remove();
   if (type === "mesh") clone.attr("width", graphWidth).attr("height", graphHeight);
   if (type !== "png") clone.select("#viewbox").attr("transform", null); // reset transform to show whole map
   if (type === "svg") removeUnusedElements(clone);
@@ -551,7 +552,7 @@ function uploadMap(file, callback) {
 function parseLoadedData(data) {
   try {
     // exit customization
-    closeDialogs();
+    if (window.closeDialogs) closeDialogs();
     customization = 0;
     if (customizationMenu.offsetParent) styleTab.click();
 
@@ -908,12 +909,18 @@ function parseLoadedData(data) {
 
         // v 1.11 had an issue with fogging being displayed on load
         unfog();
+
+        // v 1.2 added new terrain attributes
+        if (!terrain.attr("set")) terrain.attr("set", "simple");
+        if (!terrain.attr("size")) terrain.attr("size", 1);
+        if (!terrain.attr("density")) terrain.attr("density", .4);
       }
 
     }()
 
     changeMapSize();
     if (window.restoreDefaultEvents) restoreDefaultEvents();
+    focusOn(); // based on searchParams focus on point, cell or burg
     invokeActiveZooming();
 
     console.warn(`TOTAL: ${rn((performance.now()-uploadMap.timeStart)/1000,2)}s`);

modules/ui/3d.js

@@ -190,7 +190,7 @@ async function startGlobe(canvas) {
 // create globe mesh just from svg
 async function addGlobe3dMesh() {
   threeD.material = new THREE.MeshLambertMaterial();
-  const url = await getMapURL("mesh");
+  const url = await getMapURL("mesh", "globe");
   threeD.material.map = new THREE.TextureLoader().load(url, render);
   threeD.mesh = new THREE.Mesh(new THREE.SphereBufferGeometry(1, 64, 64), threeD.material);
   threeD.scene.add(threeD.mesh);

modules/ui/cultures-editor.js

@@ -304,6 +304,9 @@ function editCultures() {
     pack.cells.culture.forEach((c, i) => {if(c === culture) pack.cells.culture[i] = 0;});
     pack.cultures[culture].removed = true;
 
+    const origin = pack.cultures[culture].origin;
+    pack.cultures.forEach(c => {if(c.origin === culture) c.origin = origin;});
+
     refreshCulturesEditor();
   }
 
@@ -363,6 +366,7 @@ function editCultures() {
     // build hierarchy tree
     pack.cultures[0].origin = null;
     const cultures = pack.cultures.filter(c => !c.removed);
+    if (cultures.length < 3) {tip("Not enough cultures to show hierarchy", false, "error"); return;}
     const root = d3.stratify().id(d => d.i).parentId(d => d.origin)(cultures);
     const treeWidth = root.leaves().length;
     const treeHeight = root.height;
@@ -452,7 +456,6 @@ function editCultures() {
     }
   }
 
-  // re-calculate cultures
   function recalculateCultures(must) {
     if (!must && !culturesAutoChange.checked) return;
 
@@ -508,7 +511,7 @@ function editCultures() {
     body.querySelector("div.selected").classList.remove("selected");
     body.querySelector("div[data-id='"+culture+"']").classList.add("selected");
   }
-  
+
   function dragCultureBrush() {
     const r = +culturesManuallyBrush.value;
 
@@ -523,7 +526,6 @@ function editCultures() {
     });
   }
 
-  // change culture within selection
   function changeCultureForSelection(selection) {
     const temp = cults.select("#temp");
     const selected = body.querySelector("div.selected");
@@ -564,7 +566,7 @@ function editCultures() {
     }
     exitCulturesManualAssignment();
   }
- 
+
   function exitCulturesManualAssignment(close) {
     customization = 0;
     cults.select("#temp").remove();
@@ -637,7 +639,7 @@ function editCultures() {
     const name = getFileName("Cultures") + ".csv";
     downloadFile(data, name);
   }
-  
+
   function closeCulturesEditor() {
     debug.select("#cultureCenters").remove();
     exitCulturesManualAssignment("close");

modules/ui/editors.js

@@ -262,7 +262,7 @@ function drawLegend(name, data) {
   fitLegendBox();
 }
 
-// fit Legend box to map size
+// fit Legend box to canvas size
 function fitLegendBox() {
   if (!legend.selectAll("*").size()) return;
   const px = isNaN(+legend.attr("data-x")) ? 99 : legend.attr("data-x") / 100;

modules/ui/general.js

@@ -50,7 +50,7 @@ function moved() {
   showNotes(d3.event, i);
   const g = findGridCell(point[0], point[1]); // grid cell id
   if (tooltip.dataset.main) showMainTip(); else showMapTooltip(point, d3.event, i, g);
-  if (toolsContent.style.display === "block" && cellInfo.style.display === "block") updateCellInfo(point, i, g);
+  if (cellInfo.offsetParent) updateCellInfo(point, i, g);
 }
 
 // show note box on hover (if any)