feat: add style preset, add heighmap color schemes

index.html

@@ -1281,7 +1281,9 @@
                   <select id="styleHeightmapScheme">
                     <option value="bright" selected>Bright</option>
                     <option value="light">Light</option>
+                    <option value="natural">Natural</option>
                     <option value="green">Green</option>
+                    <option value="livid">Livid</option>
                     <option value="monochrome">Monochrome</option>
                   </select>
                 </td>
@@ -3813,8 +3815,8 @@
           <button id="battleNameShow" data-tip="Set battle name" class="icon-font"></button>
           <div id="battleNameSection" style="display: none">
             <button id="battleNameHide" data-tip="Hide the battle name section" class="icon-font"></button>
-            <input id="battleNamePlace" data-tip="Type place name" style="width: 30%"> <input id="battleNameFull"
+            <input id="battleNamePlace" data-tip="Type place name" style="width: 30%" />
-            data-tip="Type full battle name" style="width: 46%">
+            <input id="battleNameFull" data-tip="Type full battle name" style="width: 46%" />
             <button
               id="battleNameCulture"
               data-tip="Generate culture-specific name for place and battle"
@@ -7991,9 +7993,9 @@
     <script src="libs/lineclip.min.js"></script>
     <script src="libs/alea.min.js"></script>
     <script src="modules/fonts.js?v=1.89.18"></script>
-    <script src="modules/ui/layers.js"></script>
+    <script src="modules/ui/layers.js?v=1.93.06"></script>
     <script src="modules/ui/measurers.js?v=1.87.02"></script>
-    <script src="modules/ui/stylePresets.js?v=1.89.11"></script>
+    <script src="modules/ui/stylePresets.js?v=1.93.06"></script>
 
     <script src="modules/ui/general.js?v=1.93.04"></script>
     <script src="modules/ui/options.js?v=1.93.03"></script>

modules/dynamic/heightmap-selection.js

@@ -177,7 +177,9 @@ function insertHtml() {
               <select id="heightmapSelectionColorScheme">
                 <option value="bright" selected>Bright</option>
                 <option value="light">Light</option>
+                <option value="natural">Natural</option>
                 <option value="green">Green</option>
+                <option value="livid">Livid</option>
                 <option value="monochrome">Monochrome</option>
               </select>
             </div>

modules/ui/layers.js

@@ -297,12 +297,18 @@ function drawHeightmap() {
   TIME && console.timeEnd("drawHeightmap");
 }
 
+const colorSchemes = {
+  bright: d3.scaleSequential(d3.interpolateSpectral),
+  light: d3.scaleSequential(d3.interpolateRdYlGn),
+  natural: d3.scaleSequential(d3.interpolateRgbBasis(["white", "#EEEECC", "tan", "green", "teal"])),
+  green: d3.scaleSequential(d3.interpolateGreens),
+  livid: d3.scaleSequential(d3.interpolateRgbBasis(["#BBBBDD", "#2A3440", "#17343B", "#0A1E24"])),
+  monochrome: d3.scaleSequential(d3.interpolateGreys)
+};
+
 function getColorScheme(scheme) {
-  if (scheme === "bright") return d3.scaleSequential(d3.interpolateSpectral);
+  if (scheme in colorSchemes) return colorSchemes[scheme];
-  if (scheme === "light") return d3.scaleSequential(d3.interpolateRdYlGn);
+  throw new Error(`Unsupported color scheme: ${scheme}`);
-  if (scheme === "green") return d3.scaleSequential(d3.interpolateGreens);
-  if (scheme === "monochrome") return d3.scaleSequential(d3.interpolateGreys);
-  return d3.scaleSequential(d3.interpolateSpectral);
 }
 
 function getColor(value, scheme = getColorScheme()) {

modules/ui/options.js

@@ -702,7 +702,7 @@ function changeEra() {
 }
 
 async function openTemplateSelectionDialog() {
-  const HeightmapSelectionDialog = await import("../dynamic/heightmap-selection.js?v=1.87.00");
+  const HeightmapSelectionDialog = await import("../dynamic/heightmap-selection.js?v=1.93.06");
   HeightmapSelectionDialog.open();
 }
 

modules/ui/stylePresets.js

@@ -11,6 +11,7 @@ const systemPresets = [
   "clean",
   "atlas",
   "cyberpunk",
+  "night",
   "monochrome"
 ];
 const customPresetPrefix = "fmgStyle_";

styles/gloom.json

@@ -293,10 +293,10 @@
   "#terrs": {
     "opacity": 1,
     "scheme": "bright",
-    "terracing": 0,
+    "terracing": 2,
-    "skip": 0,
+    "skip": 1,
-    "relax": 1,
+    "relax": 2,
-    "curve": 1,
+    "curve": 0,
     "filter": "url(#filter-grayscale)",
     "mask": "url(#land)"
   },

styles/night.json

@@ -0,0 +1,390 @@
+{
+  "#map": {
+    "background-color": "#000000",
+    "filter": null,
+    "data-filter": null
+  },
+  "#armies": {
+    "font-size": 6,
+    "box-size": 3,
+    "stroke": "#000",
+    "stroke-width": 0,
+    "fill-opacity": 0.4,
+    "filter": ""
+  },
+  "#biomes": {
+    "opacity": 1,
+    "filter": null,
+    "mask": "url(#land)"
+  },
+  "#stateBorders": {
+    "opacity": 0.4,
+    "stroke": "#ffffff",
+    "stroke-width": 0.67,
+    "stroke-dasharray": "",
+    "stroke-linecap": "square",
+    "filter": "url(#outline)"
+  },
+  "#provinceBorders": {
+    "opacity": 0.4,
+    "stroke": "#f0f2e3",
+    "stroke-width": 0.2,
+    "stroke-dasharray": 0.5,
+    "stroke-linecap": "square",
+    "filter": ""
+  },
+  "#cells": {
+    "opacity": null,
+    "stroke": "#808080",
+    "stroke-width": 0.1,
+    "filter": null,
+    "mask": null
+  },
+  "#gridOverlay": {
+    "opacity": 0.8,
+    "scale": 2,
+    "dx": 0,
+    "dy": 0,
+    "type": "pointyHex",
+    "stroke": "#808080",
+    "stroke-width": 0.5,
+    "stroke-dasharray": null,
+    "stroke-linecap": null,
+    "transform": null,
+    "filter": null,
+    "mask": null
+  },
+  "#coordinates": {
+    "opacity": 1,
+    "data-size": 14,
+    "font-size": 14,
+    "stroke": "#465053",
+    "stroke-width": 1,
+    "stroke-dasharray": 5,
+    "stroke-linecap": "butt",
+    "filter": "",
+    "mask": null
+  },
+  "#compass": {
+    "opacity": 1,
+    "transform": null,
+    "filter": null,
+    "mask": "url(#water)",
+    "shape-rendering": "optimizespeed"
+  },
+  "#rose": {
+    "transform": "translate(80 80) scale(0.25)"
+  },
+  "#relig": {
+    "opacity": 0.4,
+    "stroke": "#404040",
+    "stroke-width": 0.7,
+    "filter": null
+  },
+  "#cults": {
+    "opacity": 0.4,
+    "stroke": "#777777",
+    "stroke-width": 1.5,
+    "stroke-dasharray": null,
+    "stroke-linecap": null,
+    "filter": "url(#dropShadow)"
+  },
+  "#landmass": {
+    "opacity": 1,
+    "fill": "#04121a",
+    "filter": null
+  },
+  "#markers": {
+    "opacity": 1,
+    "rescale": null,
+    "filter": "url(#dropShadow01)"
+  },
+  "#prec": {
+    "opacity": null,
+    "stroke": "#ffffff",
+    "stroke-width": 0,
+    "fill": "#5069b9",
+    "filter": null
+  },
+  "#population": {
+    "opacity": null,
+    "stroke-width": 1.6,
+    "stroke-dasharray": null,
+    "stroke-linecap": "butt",
+    "filter": null
+  },
+  "#rural": {
+    "stroke": "#0000ff"
+  },
+  "#urban": {
+    "stroke": "#ff0000"
+  },
+  "#freshwater": {
+    "opacity": 0.62,
+    "fill": "#00050a",
+    "stroke": "#000000",
+    "stroke-width": 0.43,
+    "filter": "url(#dropShadow)"
+  },
+  "#salt": {
+    "opacity": 0.62,
+    "fill": "#000a0a",
+    "stroke": "#173634",
+    "stroke-width": 1.72,
+    "filter": "url(#dropShadow)"
+  },
+  "#sinkhole": {
+    "opacity": 1,
+    "fill": "#5bc9fd",
+    "stroke": "#53a3b0",
+    "stroke-width": 0.7,
+    "filter": null
+  },
+  "#frozen": {
+    "opacity": 0.95,
+    "fill": "#cdd4e7",
+    "stroke": "#cfe0eb",
+    "stroke-width": 0,
+    "filter": null
+  },
+  "#lava": {
+    "opacity": 0.7,
+    "fill": "#90270d",
+    "stroke": "#f93e0c",
+    "stroke-width": 2,
+    "filter": "url(#crumpled)"
+  },
+  "#dry": {
+    "opacity": 0.62,
+    "fill": "#c9bfa7",
+    "stroke": "#000000",
+    "stroke-width": 1.72,
+    "filter": "url(#dropShadow)"
+  },
+  "#sea_island": {
+    "opacity": 1,
+    "stroke": "#000000",
+    "stroke-width": 0.29,
+    "filter": "",
+    "auto-filter": null
+  },
+  "#lake_island": {
+    "opacity": 1,
+    "stroke": "#7c8eaf",
+    "stroke-width": 0.35,
+    "filter": null
+  },
+  "#terrain": {
+    "opacity": 0.54,
+    "set": "simple",
+    "size": 1,
+    "density": 0.3,
+    "filter": null,
+    "mask": null
+  },
+  "#rivers": {
+    "opacity": null,
+    "filter": "",
+    "fill": "#00050a"
+  },
+  "#ruler": {
+    "opacity": 1,
+    "filter": null
+  },
+  "#roads": {
+    "opacity": 0.72,
+    "stroke": "#7f96f0",
+    "stroke-width": 0.75,
+    "stroke-dasharray": 0,
+    "stroke-linecap": "butt",
+    "filter": "",
+    "mask": "url(#land)"
+  },
+  "#trails": {
+    "opacity": 0.62,
+    "stroke": "#7f96f0",
+    "stroke-width": 0.35,
+    "stroke-dasharray": 0,
+    "stroke-linecap": "butt",
+    "filter": "",
+    "mask": null
+  },
+  "#searoutes": {
+    "opacity": 1,
+    "stroke": "#7f96f0",
+    "stroke-width": 0.5,
+    "stroke-dasharray": "2 1",
+    "stroke-linecap": "butt",
+    "filter": "",
+    "mask": ""
+  },
+  "#statesBody": {
+    "opacity": 0.07,
+    "filter": ""
+  },
+  "#statesHalo": {
+    "opacity": 0,
+    "data-width": 0,
+    "stroke-width": 0,
+    "filter": null
+  },
+  "#provs": {
+    "opacity": 0.4,
+    "fill": null,
+    "font-size": null,
+    "font-family": null,
+    "filter": ""
+  },
+  "#temperature": {
+    "opacity": 1,
+    "font-size": "12px",
+    "fill": "#000000",
+    "fill-opacity": 1,
+    "stroke": null,
+    "stroke-width": 1.5,
+    "stroke-dasharray": null,
+    "stroke-linecap": null,
+    "filter": ""
+  },
+  "#ice": {
+    "opacity": 0.15,
+    "fill": "#e8f0f6",
+    "stroke": "#e8f0f6",
+    "stroke-width": 0,
+    "filter": ""
+  },
+  "#emblems": {
+    "opacity": null,
+    "stroke-width": null,
+    "filter": null
+  },
+  "#texture": {
+    "opacity": 0.1,
+    "filter": null,
+    "mask": "url(#water)"
+  },
+  "#textureImage": {
+    "x": 0,
+    "y": 0,
+    "src": "https://i2.wp.com/azgaar.files.wordpress.com/2019/07/marble-blue-small.jpg"
+  },
+  "#zones": {
+    "opacity": 0.6,
+    "stroke": "#333333",
+    "stroke-width": 0,
+    "stroke-dasharray": null,
+    "stroke-linecap": "butt",
+    "filter": null,
+    "mask": null
+  },
+  "#oceanLayers": {
+    "filter": "",
+    "layers": "none"
+  },
+  "#oceanBase": {
+    "fill": "#000000"
+  },
+  "#oceanicPattern": {
+    "href": "",
+    "opacity": 0.3
+  },
+  "#terrs": {
+    "opacity": 1,
+    "scheme": "livid",
+    "terracing": 0,
+    "skip": 10,
+    "relax": 0,
+    "curve": 0,
+    "filter": "url(#blurFilter)",
+    "mask": "url(#land)"
+  },
+  "#legend": {
+    "data-size": 11.7,
+    "font-size": 11.7,
+    "font-family": "MedievalSharp",
+    "stroke": "#812929",
+    "stroke-width": 2.67,
+    "stroke-dasharray": "0 4 10 4",
+    "stroke-linecap": "square",
+    "data-x": 14.26,
+    "data-y": 99.37,
+    "data-columns": null
+  },
+  "#burgLabels > #cities": {
+    "opacity": 1,
+    "fill": "#dbdbe1",
+    "text-shadow": "black 0px 0px 4px",
+    "data-size": 8,
+    "font-size": 8,
+    "font-family": "Courier New"
+  },
+  "#burgIcons > #cities": {
+    "opacity": 1,
+    "fill": "#ffffff",
+    "fill-opacity": 0.7,
+    "size": 2.1,
+    "stroke": "#000000",
+    "stroke-width": 0.2,
+    "stroke-dasharray": "",
+    "stroke-linecap": "butt"
+  },
+  "#anchors > #cities": {
+    "opacity": 1,
+    "fill": "#ffffff",
+    "size": 4.2,
+    "stroke": "#000000",
+    "stroke-width": 1.46
+  },
+  "#burgLabels > #towns": {
+    "opacity": 1,
+    "fill": "#ffffff",
+    "text-shadow": "black 0px 0px 4px",
+    "data-size": 4.28,
+    "font-size": 4.28,
+    "font-family": "Courier New"
+  },
+  "#burgIcons > #towns": {
+    "opacity": 1,
+    "fill": "#ffffff",
+    "fill-opacity": 0.7,
+    "size": 0.8,
+    "stroke": "#000000",
+    "stroke-width": 0.1,
+    "stroke-dasharray": "",
+    "stroke-linecap": "butt"
+  },
+  "#anchors > #towns": {
+    "opacity": 1,
+    "fill": "#ffffff",
+    "size": 1.6,
+    "stroke": "#000000",
+    "stroke-width": 1.53
+  },
+  "#labels > #states": {
+    "opacity": 1,
+    "fill": "#5d77a2",
+    "stroke": "#7a83ae",
+    "stroke-width": 0.3,
+    "text-shadow": "black 0px 0px 0.1px",
+    "data-size": 14,
+    "font-size": 14,
+    "font-family": "Courier New",
+    "filter": ""
+  },
+  "#labels > #addedLabels": {
+    "opacity": 1,
+    "fill": "#3e3e4b",
+    "stroke": "#3a3a3a",
+    "stroke-width": 0,
+    "text-shadow": "white 0px 0px 4px",
+    "data-size": 18,
+    "font-size": 18,
+    "font-family": "Almendra SC",
+    "filter": null
+  },
+  "#fogging": {
+    "opacity": 0.8,
+    "fill": "#000000",
+    "filter": null
+  }
+}

versioning.js

@@ -1,7 +1,7 @@
 "use strict";
 
 // version and caching control
-const version = "1.93.05"; // generator version, update each time
+const version = "1.93.06"; // generator version, update each time
 
 {
   document.title += " v" + version;
@@ -28,6 +28,7 @@ const version = "1.93.05"; // generator version, update each time
 
       <ul>
         <strong>Latest changes:</strong>
+        <li>New style preset Night and new heightmap color schemes</li>
         <li>Random encounter markers (integration with <a href="https://deorum.vercel.app/" target="_blank">Deorum</a>)</li>
         <li>Auto-load of the last saved map is now optional (see <i>Onload behavior</i> in Options)</li>
         <li>New label placement algorithm for states</li>