+
+ ${name}
+
+
+
+ const editorHtml = /* html */ `
Culture
Type
diff --git a/modules/dynamic/editors/states-editor.js b/modules/dynamic/editors/states-editor.js
index ea97aec0..a5241a33 100644
--- a/modules/dynamic/editors/states-editor.js
+++ b/modules/dynamic/editors/states-editor.js
@@ -21,7 +21,7 @@ export function open() {
}
function insertEditorHtml() {
- const editorHtml = /* html */ `
+ const editorHtml = /* html */ `
+
+ `;
+ })
+ .join("");
+
+ const heightmapsHtml = heightmaps
+ .map(({id, name}) => {
+ return /* html */ `
+ 
+ `;
+ })
+ .join("");
+
+ const heightmapSelectionHtml = /* html */ `
State
Form
diff --git a/modules/dynamic/heightmap-selection.js b/modules/dynamic/heightmap-selection.js
new file mode 100644
index 00000000..d1e9d000
--- /dev/null
+++ b/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 */ `
+
+ ${name}
+
+
`;
+
+ 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");
+}
diff --git a/modules/ui/options.js b/modules/ui/options.js
index e9fdf849..c392bf14 100644
--- a/modules/ui/options.js
+++ b/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();
diff --git a/versioning.js b/versioning.js
index 54c53146..3a934a0a 100644
--- a/versioning.js
+++ b/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;
+
+
+
+
+
+ Heightmap templates
+ ${templatesHtml}
+
+ Pre-created heightmaps
+ ${heightmapsHtml}
+
+