feat: configure world - checkbox to auto-apply changes (v1.97.16)

index.css

@@ -2181,7 +2181,7 @@ svg.button {
 #worldControls input[type="number"] {
   border: 1px solid #e5e5e5;
   padding: 0px;
-  width: 3.2em;
+  width: 4em;
 }
 
 #worldControls i.icon-lock-open,

index.html

@@ -138,7 +138,7 @@
       }
     </style>
 
-    <link rel="preload" href="index.css?v=1.96.00" as="style" onload="this.onload=null; this.rel='stylesheet'" />
+    <link rel="preload" href="index.css?v=1.97.16" as="style" onload="this.onload=null; this.rel='stylesheet'" />
     <link rel="preload" href="icons.css" as="style" onload="this.onload=null; this.rel='stylesheet'" />
     <link rel="preload" href="libs/jquery-ui.css" as="style" onload="this.onload=null; this.rel='stylesheet'" />
   </head>
@@ -2557,7 +2557,9 @@
             </div>
 
             <div>
-              <label data-tip="Set precipitation - water amount clouds can bring. Defines rivers and biomes generation">
+              <label
+                data-tip="Set precipitation - water amount clouds can bring. Defines rivers and biomes generation. Keep around 100% for default generation"
+              >
                 <i data-locked="0" id="lock_prec" class="icon-lock-open"></i>
                 <i>Precipitation:</i>
                 <input id="precInput" data-stored="prec" type="number" />%
@@ -2643,6 +2645,14 @@
             </button>
           </div>
         </div>
+
+        <div style="margin-top: 0.3em">
+          <i>Presets:</i>
+          <button id="wcWholeWorld" data-tip="Click to set map size to cover the whole world">Whole world</button>
+          <button id="wcNorthern" data-tip="Click to set map size to cover the Northern latitudes">Northern</button>
+          <button id="wcTropical" data-tip="Click to set map size to cover the Tropical latitudes">Tropical</button>
+          <button id="wcSouthern" data-tip="Click to set map size to cover the Southern latitudes">Southern</button>
+        </div>
       </div>
 
       <div id="labelEditor" class="dialog" style="display: none">
@@ -8078,7 +8088,7 @@
     <script defer src="modules/ui/style.js?v=1.96.00"></script>
     <script defer src="modules/ui/editors.js?v=1.97.12"></script>
     <script defer src="modules/ui/tools.js?v=1.97.12"></script>
-    <script defer src="modules/ui/world-configurator.js?v=1.98.00"></script>
+    <script defer src="modules/ui/world-configurator.js?v=1.97.16"></script>
     <script defer src="modules/ui/heightmap-editor.js?v=1.96.00"></script>
     <script defer src="modules/ui/provinces-editor.js?v=1.96.00"></script>
     <script defer src="modules/ui/biomes-editor.js?v=1.91.05"></script>

modules/ui/world-configurator.js

@@ -5,18 +5,17 @@ function editWorld() {
     title: "Configure World",
     resizable: false,
     width: "minmax(40em, 85vw)",
-    buttons: {
+    buttons: {"Update world": updateWorld},
-      "Whole World": () => applyWorldPreset(100, 50),
-      Northern: () => applyWorldPreset(33, 25),
-      Tropical: () => applyWorldPreset(33, 50),
-      Southern: () => applyWorldPreset(33, 75)
-    },
     open: function () {
-      const buttons = $(this).dialog("widget").find(".ui-dialog-buttonset > button");
+      const checkbox = /* html */ `<div class="dontAsk" data-tip="Automatically update world on input changes and button clicks">
-      buttons[0].addEventListener("mousemove", () => tip("Click to set map size to cover the whole World"));
+        <input id="wcAutoChange" class="checkbox" type="checkbox" checked />
-      buttons[1].addEventListener("mousemove", () => tip("Click to set map size to cover the Northern latitudes"));
+        <label for="wcAutoChange" class="checkbox-label"><i>auto-apply changes</i></label>
-      buttons[2].addEventListener("mousemove", () => tip("Click to set map size to cover the Tropical latitudes"));
+      </div>`;
-      buttons[3].addEventListener("mousemove", () => tip("Click to set map size to cover the Southern latitudes"));
+      const pane = this.parentElement.querySelector(".ui-dialog-buttonpane");
+      pane.insertAdjacentHTML("afterbegin", checkbox);
+
+      const button = this.parentElement.querySelector(".ui-dialog-buttonset > button");
+      button.on("mousemove", () => tip("Apply curreny settings to the map"));
     },
     close: function () {
       $(this).dialog("destroy");
@@ -34,12 +33,16 @@ function editWorld() {
   if (modules.editWorld) return;
   modules.editWorld = true;
 
-  byId("worldControls").addEventListener("input", e => updateWorld(e.target));
+  globe.select("#globeWindArrows").on("click", handleWindChange);
-  globe.select("#globeWindArrows").on("click", changeWind);
   globe.select("#globeGraticule").attr("d", round(path(d3.geoGraticule()()))); // globe graticule
   updateWindDirections();
 
-  byId("restoreWinds").addEventListener("click", restoreDefaultWinds);
+  byId("worldControls").on("input", handleControlsChange);
+  byId("restoreWinds").on("click", restoreDefaultWinds);
+  byId("wcWholeWorld").on("click", () => applyWorldPreset(100, 50));
+  byId("wcNorthern").on("click", () => applyWorldPreset(33, 25));
+  byId("wcTropical").on("click", () => applyWorldPreset(33, 50));
+  byId("wcSouthern").on("click", () => applyWorldPreset(33, 75));
 
   function updateInputValues() {
     byId("temperatureEquatorInput").value = options.temperatureEquator;
@@ -55,27 +58,27 @@ function editWorld() {
     byId("temperatureSouthPoleF").innerText = convertTemperature(options.temperatureSouthPole, "°F");
   }
 
-  function updateWorld(el) {
+  function handleControlsChange({target}) {
-    if (el?.dataset.stored) {
+    const stored = target.dataset.stored;
-      const stored = el.dataset.stored;
+    byId(stored + "Input").value = target.value;
-      byId(stored + "Input").value = el.value;
+    byId(stored + "Output").value = target.value;
-      byId(stored + "Output").value = el.value;
+    lock(stored);
-      lock(el.dataset.stored);
 
-      if (stored === "temperatureEquator") {
+    if (stored === "temperatureEquator") {
-        options.temperatureEquator = Number(el.value);
+      options.temperatureEquator = Number(target.value);
-        byId("temperatureEquatorF").innerText = convertTemperature(options.temperatureEquator, "°F");
+      byId("temperatureEquatorF").innerText = convertTemperature(options.temperatureEquator, "°F");
-      }
+    } else if (stored === "temperatureNorthPole") {
-      if (stored === "temperatureNorthPole") {
+      options.temperatureNorthPole = Number(target.value);
-        options.temperatureNorthPole = Number(el.value);
+      byId("temperatureNorthPoleF").innerText = convertTemperature(options.temperatureNorthPole, "°F");
-        byId("temperatureNorthPoleF").innerText = convertTemperature(options.temperatureNorthPole, "°F");
+    } else if (stored === "temperatureSouthPole") {
-      }
+      options.temperatureSouthPole = Number(target.value);
-      if (stored === "temperatureSouthPole") {
+      byId("temperatureSouthPoleF").innerText = convertTemperature(options.temperatureSouthPole, "°F");
-        options.temperatureSouthPole = Number(el.value);
-        byId("temperatureSouthPoleF").innerText = convertTemperature(options.temperatureSouthPole, "°F");
-      }
     }
 
+    if (byId("wcAutoChange").checked) updateWorld();
+  }
+
+  function updateWorld() {
     updateGlobeTemperature();
     updateGlobePosition();
     calculateTemperatures();
@@ -130,6 +133,7 @@ function editWorld() {
       [mc.lonW, mc.latN],
       [mc.lonE, mc.latS]
     ]);
+
     globe.select("#globeArea").attr("d", round(path(area.outline()))); // map area
   }
 
@@ -163,21 +167,22 @@ function editWorld() {
       });
   }
 
-  function changeWind() {
+  function handleWindChange() {
     const arrow = d3.event.target.nextElementSibling;
     const tier = +arrow.dataset.tier;
     options.winds[tier] = (options.winds[tier] + 45) % 360;
     const tr = parseTransform(arrow.getAttribute("transform"));
     arrow.setAttribute("transform", `rotate(${options.winds[tier]} ${tr[1]} ${tr[2]})`);
     localStorage.setItem("winds", options.winds);
+
     const mapTiers = d3.range(mapCoordinates.latN, mapCoordinates.latS, -30).map(c => ((90 - c) / 30) | 0);
-    if (mapTiers.includes(tier)) updateWorld();
+    if (byId("wcAutoChange").checked && mapTiers.includes(tier)) updateWorld();
   }
 
   function restoreDefaultWinds() {
     const defaultWinds = [225, 45, 225, 315, 135, 315];
     const mapTiers = d3.range(mapCoordinates.latN, mapCoordinates.latS, -30).map(c => ((90 - c) / 30) | 0);
-    const update = mapTiers.some(t => options.winds[t] != defaultWinds[t]);
+    const update = byId("wcAutoChange").checked && mapTiers.some(t => options.winds[t] != defaultWinds[t]);
     options.winds = defaultWinds;
     updateWindDirections();
     if (update) updateWorld();
@@ -188,6 +193,6 @@ function editWorld() {
     byId("latitudeInput").value = byId("latitudeOutput").value = lat;
     lock("mapSize");
     lock("latitude");
-    updateWorld();
+    if (byId("wcAutoChange").checked) updateWorld();
   }
 }

versioning.js

@@ -1,7 +1,7 @@
 "use strict";
 
 // version and caching control
-const version = "1.97.15"; // generator version, update each time
+const version = "1.97.16"; // generator version, update each time
 
 {
   document.title += " v" + version;