base dialog

index.css

@@ -1318,6 +1318,12 @@ div.slider .ui-slider-handle {
   scrollbar-width: thin;
 }
 
+.dialog::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+  background-color: transparent;
+}
+
 #alertMessage::-webkit-scrollbar,
 .table::-webkit-scrollbar,
 .matrix-table::-webkit-scrollbar {
@@ -1326,6 +1332,7 @@ div.slider .ui-slider-handle {
   background-color: transparent;
 }
 
+.dialog::-webkit-scrollbar-thumb,
 #alertMessage::-webkit-scrollbar-thumb,
 .table::-webkit-scrollbar-thumb,
 .matrix-table::-webkit-scrollbar-thumb {
@@ -1333,6 +1340,7 @@ div.slider .ui-slider-handle {
   border-radius: 6px;
 }
 
+.dialog::-webkit-scrollbar-thumb:hover,
 #alertMessage::-webkit-scrollbar-thumb:hover,
 .table::-webkit-scrollbar-thumb:hover,
 .matrix-table::-webkit-scrollbar-thumb:hover {
@@ -2363,3 +2371,8 @@ svg.button {
     display: none;
   }
 }
+
+
+img {}
+
+div {}

index.html

@@ -1331,7 +1331,9 @@
                   </optgroup>
                 </select>
               </td>
-              <td></td>
+              <td>
+                <button id="templateSelect" data-tip="Select heightmap template or pre-made heightmap">Select</button>
+              </td>
             </tr>
 
             <tr data-tip="Define how many Cultures should be generated">

modules/dynamic/editors/cultures-editor.js

@@ -24,7 +24,7 @@ export function open() {
 }
 
 function insertEditorHtml() {
-  const editorHtml = /* html */ `<div id="culturesEditor" class="dialog stable" style="display: none">
+  const editorHtml = /* html */ `<div id="culturesEditor" class="dialog stable">
     <div id="culturesHeader" class="header">
       <div style="left: 1.8em" data-tip="Click to sort by culture name" class="sortable alphabetically" data-sortby="name">Culture&nbsp;</div>
       <div style="left: 9.9em" data-tip="Click to sort by type" class="sortable alphabetically" data-sortby="type">Type&nbsp;</div>

modules/dynamic/editors/states-editor.js

@@ -21,7 +21,7 @@ export function open() {
 }
 
 function insertEditorHtml() {
-  const editorHtml = /* html */ `<div id="statesEditor" class="dialog stable" style="display: none">
+  const editorHtml = /* html */ `<div id="statesEditor" class="dialog stable">
     <div id="statesHeader" class="header">
       <div style="left: 1.8em" data-tip="Click to sort by state name" class="sortable alphabetically" data-sortby="name">State&nbsp;</div>
       <div style="left: 10.8em" data-tip="Click to sort by state form name" class="sortable alphabetically" data-sortby="form">Form&nbsp;</div>

modules/dynamic/heightmap-selection.js

@@ -0,0 +1,183 @@
+const templates = [
+  {id: "volcano", name: "Volcano"},
+  {id: "highIsland", name: "High Island"},
+  {id: "lowIsland", name: "Low Island"},
+  {id: "continents", name: "Continents"},
+  {id: "archipelago", name: "Archipelago"},
+  {id: "atoll", name: "Atoll"},
+  {id: "mediterranean", name: "Mediterranean"},
+  {id: "peninsula", name: "Peninsula"},
+  {id: "pangea", name: "Pangea"},
+  {id: "isthmus", name: "Isthmus"},
+  {id: "shattered", name: "Shattered"},
+  {id: "taklamakan", name: "Taklamakan"},
+  {id: "oldWorld", name: "Old World"},
+  {id: "fractious", name: "Fractious"}
+];
+
+const heightmaps = [
+  {id: "africa-centric", name: "Africa Centric"},
+  {id: "arabia", name: "Arabia"},
+  {id: "atlantics", name: "Atlantics"},
+  {id: "britain", name: "Britain"},
+  {id: "caribbean", name: "Caribbean"},
+  {id: "east-asia", name: "East Asia"},
+  {id: "eurasia", name: "Eurasia"},
+  {id: "europe", name: "Europe"},
+  {id: "europe-accented", name: "Europe Accented"},
+  {id: "europe-and-central-asia", name: "Europe and Central Asia"},
+  {id: "europe-central", name: "Europe Central"},
+  {id: "europe-north", name: "Europe North"},
+  {id: "greenland", name: "Greenland"},
+  {id: "hellenica", name: "Hellenica"},
+  {id: "iceland", name: "Iceland"},
+  {id: "indian-ocean", name: "Indian Ocean"},
+  {id: "mediterranean-sea", name: "Mediterranean Sea"},
+  {id: "middle-east", name: "Middle East"},
+  {id: "north-america", name: "North America"},
+  {id: "us-centric", name: "US-centric"},
+  {id: "us-mainland", name: "US Mainland"},
+  {id: "world", name: "World"},
+  {id: "world-from-pacific", name: "World from Pacific"}
+];
+
+appendStyleSheet();
+insertEditorHtml();
+addListeners();
+
+export function open() {
+  closeDialogs(".stable");
+
+  const $templateInput = byId("templateInput");
+  setSelected($templateInput.value);
+
+  $("#heightmapSelection").dialog({
+    title: "Select Heightmap",
+    resizable: false,
+    position: {my: "center", at: "center", of: "svg"},
+    buttons: {
+      Cancel: function () {
+        $(this).dialog("close");
+      },
+      Select: function () {
+        $templateInput.value = getSelected();
+        $(this).dialog("close");
+      }
+    }
+  });
+}
+
+function appendStyleSheet() {
+  const styles = /* css */ `
+    .heightmap-selection {
+      width: 70vw;
+      height: 70vh;
+    }
+
+    .heightmap-selection_container {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+      grid-gap: 8px;
+    }
+
+    .heightmap-selection article {
+      padding: 4px;
+      border-radius: 8px;
+      transition: all 0.1s ease-in-out;
+      filter: drop-shadow(1px 1px 4px #999);
+    }
+
+    .heightmap-selection article:hover {
+      background-color: #ddd;
+      filter: drop-shadow(1px 1px 8px #999);
+      cursor: pointer;
+    }
+
+    .heightmap-selection article.selected {
+      background-color: #ccc;
+      outline: 1px solid var(--dark-solid);
+      filter: drop-shadow(1px 1px 8px #999);
+    }
+
+    .heightmap-selection article > div {
+      display: flex;
+      justify-content: space-between;
+      padding: 2px 1px;
+    }
+
+    .heightmap-selection article > div > span.icon-cw:hover {
+      color: #000;
+    }
+
+    .heightmap-selection article > img {
+      width: 100%;
+      aspect-ratio: 16/9;
+      border-radius: 8px;
+      object-fit: cover;
+      filter: contrast(1.3);
+    }
+  `;
+
+  const style = document.createElement("style");
+  style.appendChild(document.createTextNode(styles));
+  document.head.appendChild(style);
+}
+
+function insertEditorHtml() {
+  const templatesHtml = templates
+    .map(({id, name}) => {
+      return /* html */ `<article data-id="${id}">
+      <img src="../../heightmaps/europe.png" alt="${name}" loading="lazy" />
+      <div>
+        ${name}
+        <span data-tip="Regenerate preview" class="icon-cw"></span>
+      </div>
+    </article>`;
+    })
+    .join("");
+
+  const heightmapsHtml = heightmaps
+    .map(({id, name}) => {
+      return /* html */ `<article data-id="${id}">
+      <img src="../../heightmaps/${id}.png" alt="${name}" loading="lazy" />
+      <div>${name}</div>
+    </article>`;
+    })
+    .join("");
+
+  const heightmapSelectionHtml = /* html */ `<div id="heightmapSelection" class="dialog stable">
+    <div class="heightmap-selection">
+      <section>
+        <header><h1>Heightmap templates</h1></header>
+        <div class="heightmap-selection_container">
+          ${templatesHtml}
+        </div>
+      </section>
+      <section>
+        <header><h1>Pre-created heightmaps</h1></header>
+        <div class="heightmap-selection_container">
+          ${heightmapsHtml}
+        </div>
+      </section>
+    </div>
+  </div>`;
+
+  byId("dialogs").insertAdjacentHTML("beforeend", heightmapSelectionHtml);
+}
+
+function addListeners() {
+  byId("heightmapSelection").on("click", event => {
+    const article = event.target.closest("#heightmapSelection article");
+    if (article) setSelected(article.dataset.id);
+  });
+}
+
+function getSelected() {
+  return byId("heightmapSelection").querySelector(".selected")?.dataset?.id;
+}
+
+function setSelected(id) {
+  const $heightmapSelection = byId("heightmapSelection");
+  $heightmapSelection.querySelector(".selected")?.classList?.remove("selected");
+  $heightmapSelection.querySelector(`[data-id="${id}"]`)?.classList?.add("selected");
+}

modules/ui/options.js

@@ -142,6 +142,7 @@ optionsContent.addEventListener("click", function (event) {
   else if (id === "optionsMapHistory") showSeedHistoryDialog();
   else if (id === "optionsCopySeed") copyMapURL();
   else if (id === "optionsEraRegenerate") regenerateEra();
+  else if (id === "templateSelect") openTemplateSelectionDialog();
   else if (id === "zoomExtentDefault") restoreDefaultZoomExtent();
   else if (id === "translateExtent") toggleTranslateExtent(event.target);
   else if (id === "speakerTest") testSpeaker();
@@ -623,6 +624,11 @@ function changeEra() {
   options.era = eraInput.value;
 }
 
+async function openTemplateSelectionDialog() {
+  const HeightmapSelectionDialog = await import("../dynamic/heightmap-selection.js");
+  HeightmapSelectionDialog.open();
+}
+
 // remove all saved data from LocalStorage and reload the page
 function restoreDefaultOptions() {
   localStorage.clear();

versioning.js

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