${name}
@@ -224,11 +183,12 @@ function insertEditorHtml() {
})
.join("");
- sections[1].innerHTML = heightmaps
- .map(({id, name}) => {
- drawPrecreatedHeightmap(id);
+ sections[1].innerHTML = Object.keys(precreatedHeightmaps)
+ .map(key => {
+ const name = precreatedHeightmaps[key].name;
+ drawPrecreatedHeightmap(key);
- return /* html */ `
+ return /* html */ `
![${name}]()
`;
@@ -271,6 +231,11 @@ function getSeed() {
return byId("heightmapSelection").querySelector(".selected")?.dataset?.seed;
}
+function getName(id) {
+ const isTemplate = id in heightmapTemplates;
+ return isTemplate ? heightmapTemplates[id].name : precreatedHeightmaps[id].name;
+}
+
function drawHeights(heights) {
const canvas = document.createElement("canvas");
canvas.width = grid.cellsX;
@@ -325,7 +290,7 @@ function redrawAll() {
const {id, seed} = article.dataset;
Math.random = aleaPRNG(seed);
- const isTemplate = id in HeightmapTemplates;
+ const isTemplate = id in heightmapTemplates;
if (isTemplate) drawTemplatePreview(id);
else drawPrecreatedHeightmap(id);
}
diff --git a/modules/heightmap-generator.js b/modules/heightmap-generator.js
index 71f2ea2d..bb4c0100 100644
--- a/modules/heightmap-generator.js
+++ b/modules/heightmap-generator.js
@@ -8,7 +8,7 @@ window.HeightmapGenerator = (function () {
const cleanup = () => (heights = null);
const fromTemplate = template => {
- const templateString = HeightmapTemplates[template];
+ const templateString = heightmapTemplates[template]?.template || "";
const steps = templateString.split("\n");
if (!steps.length) throw new Error(`Heightmap template: no steps. Template: ${template}. Steps: ${steps}`);
@@ -52,7 +52,7 @@ window.HeightmapGenerator = (function () {
const id = byId("templateInput").value;
resetHeights();
- const isTemplate = id in HeightmapTemplates;
+ const isTemplate = id in heightmapTemplates;
grid.cells.h = isTemplate ? fromTemplate(id) : await fromPrecreated(id);
cleanup();
diff --git a/modules/ui/general.js b/modules/ui/general.js
index 1b63dbac..7cb0f5c3 100644
--- a/modules/ui/general.js
+++ b/modules/ui/general.js
@@ -3,7 +3,7 @@
// fit full-screen map if window is resized
window.addEventListener("resize", function (e) {
- if (localStorage.getItem("mapWidth") && localStorage.getItem("mapHeight")) return;
+ if (stored("mapWidth") && stored("mapHeight")) return;
mapWidthInput.value = window.innerWidth;
mapHeightInput.value = window.innerHeight;
changeMapSize();
@@ -414,7 +414,7 @@ document.querySelectorAll("[data-locked]").forEach(function (e) {
// lock option
function lock(id) {
const input = document.querySelector('[data-stored="' + id + '"]');
- if (input) localStorage.setItem(id, input.value);
+ if (input) store(id, input.value);
const el = document.getElementById("lock_" + id);
if (!el) return;
el.dataset.locked = 1;
@@ -436,9 +436,14 @@ function locked(id) {
return lockEl.dataset.locked == 1;
}
-// check if option is stored in localStorage
-function stored(option) {
- return localStorage.getItem(option);
+// return key value stored in localStorage or null
+function stored(key) {
+ return localStorage.getItem(key) || null;
+}
+
+// store key value in localStorage
+function store(key, value) {
+ return localStorage.setItem(key, value);
}
// assign skeaker behaviour
@@ -458,10 +463,10 @@ function speak(text) {
}
// apply drop-down menu option. If the value is not in options, add it
-function applyOption(select, id, name = id) {
- const custom = !Array.from(select.options).some(o => o.value == id);
- if (custom) select.options.add(new Option(name, id));
- select.value = id;
+function applyOption($select, value, name = value) {
+ const isExisting = Array.from($select.options).some(o => o.value === value);
+ if (!isExisting) $select.options.add(new Option(name, value));
+ $select.value = value;
}
// show info about the generator in a popup
diff --git a/modules/ui/heightmap-editor.js b/modules/ui/heightmap-editor.js
index 69d98184..beb34ae5 100644
--- a/modules/ui/heightmap-editor.js
+++ b/modules/ui/heightmap-editor.js
@@ -921,7 +921,7 @@ function editHeightmap(options) {
body.setAttribute("data-changed", 0);
body.innerHTML = "";
- const templateString = HeightmapTemplates[template];
+ const templateString = heightmapTemplates[template]?.template;
if (!templateString) return;
const steps = templateString.split("\n");
diff --git a/modules/ui/options.js b/modules/ui/options.js
index 260cdea5..888571c7 100644
--- a/modules/ui/options.js
+++ b/modules/ui/options.js
@@ -6,14 +6,14 @@ $("#exitCustomization").draggable({handle: "div"});
$("#mapLayers").disableSelection();
// remove glow if tip is aknowledged
-if (localStorage.getItem("disable_click_arrow_tooltip")) {
+if (stored("disable_click_arrow_tooltip")) {
clearMainTip();
optionsTrigger.classList.remove("glow");
}
// Show options pane on trigger click
function showOptions(event) {
- if (!localStorage.getItem("disable_click_arrow_tooltip")) {
+ if (!stored("disable_click_arrow_tooltip")) {
clearMainTip();
localStorage.setItem("disable_click_arrow_tooltip", true);
optionsTrigger.classList.remove("glow");
@@ -81,12 +81,12 @@ async function showSupporters() {
}
// on any option or dialog change
-document.getElementById("options").addEventListener("change", checkIfStored);
-document.getElementById("dialogs").addEventListener("change", checkIfStored);
+document.getElementById("options").addEventListener("change", storeValueIfRequired);
+document.getElementById("dialogs").addEventListener("change", storeValueIfRequired);
document.getElementById("options").addEventListener("input", updateOutputToFollowInput);
document.getElementById("dialogs").addEventListener("input", updateOutputToFollowInput);
-function checkIfStored(ev) {
+function storeValueIfRequired(ev) {
if (ev.target.dataset.stored) lock(ev.target.dataset.stored);
}
@@ -142,7 +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 === "templateSelectButton") openTemplateSelectionDialog();
+ else if (id === "templateInput") openTemplateSelectionDialog();
else if (id === "zoomExtentDefault") restoreDefaultZoomExtent();
else if (id === "translateExtent") toggleTranslateExtent(event.target);
else if (id === "speakerTest") testSpeaker();
@@ -233,7 +233,7 @@ const voiceInterval = setInterval(function () {
voices.forEach((voice, i) => {
select.options.add(new Option(voice.name, i, false));
});
- if (stored("speakerVoice")) select.value = localStorage.getItem("speakerVoice");
+ if (stored("speakerVoice")) select.value = stored("speakerVoice");
// se voice to store
else select.value = voices.findIndex(voice => voice.lang === "en-US"); // or to first found English-US
}, 1000);
@@ -273,13 +273,14 @@ function showSeedHistoryDialog() {
// generate map with historical seed
function restoreSeed(id) {
- if (mapHistory[id].seed == seed) return tip("The current map is already generated with this seed", null, "error");
+ const {seed, width, height, template} = mapHistory[id];
+ byId("optionsSeed").value = seed;
+ byId("mapWidthInput").value = width;
+ byId("mapHeightInput").value = height;
+ byId("templateInput").value = template;
- optionsSeed.value = mapHistory[id].seed;
- mapWidthInput.value = mapHistory[id].width;
- mapHeightInput.value = mapHistory[id].height;
- templateInput.value = mapHistory[id].template;
if (locked("template")) unlock("template");
+
regeneratePrompt();
}
@@ -457,43 +458,50 @@ function changeZoomExtent(value) {
zoom.scaleTo(svg, scale);
}
-// control stored options logic
+// restore options stored in localStorage
function applyStoredOptions() {
- if (!localStorage.getItem("mapWidth") || !localStorage.getItem("mapHeight")) {
+ if (!stored("mapWidth") || !stored("mapHeight")) {
mapWidthInput.value = window.innerWidth;
mapHeightInput.value = window.innerHeight;
}
- if (localStorage.getItem("distanceUnit")) applyOption(distanceUnitInput, localStorage.getItem("distanceUnit"));
- if (localStorage.getItem("heightUnit")) applyOption(heightUnit, localStorage.getItem("heightUnit"));
-
- for (let i = 0; i < localStorage.length; i++) {
- const stored = localStorage.key(i);
- const value = localStorage.getItem(stored);
-
- if (stored === "speakerVoice") continue;
- const input = document.getElementById(stored + "Input") || document.getElementById(stored);
- const output = document.getElementById(stored + "Output");
- if (input) input.value = value;
- if (output) output.value = value;
- lock(stored);
-
- // add saved style presets to options
- if (stored.slice(0, 5) === "style") applyOption(stylePreset, stored, stored.slice(5));
+ const heightmapId = stored("template");
+ if (heightmapId) {
+ const name = heightmapTemplates[heightmapId]?.name || precreatedHeightmaps[heightmapId]?.name || heightmapId;
+ applyOption(byId("templateInput"), heightmapId, name);
}
- if (localStorage.getItem("winds"))
+ if (stored("distanceUnit")) applyOption(distanceUnitInput, stored("distanceUnit"));
+ if (stored("heightUnit")) applyOption(heightUnit, stored("heightUnit"));
+
+ for (let i = 0; i < localStorage.length; i++) {
+ const key = localStorage.key(i);
+
+ if (key === "speakerVoice") continue;
+ const input = byId(key + "Input") || byId(key);
+ const output = byId(key + "Output");
+
+ const value = stored(key);
+ if (input) input.value = value;
+ if (output) output.value = value;
+ lock(key);
+
+ // add saved style presets to options
+ if (key.slice(0, 5) === "style") applyOption(stylePreset, key, key.slice(5));
+ }
+
+ if (stored("winds"))
options.winds = localStorage
.getItem("winds")
.split(",")
.map(w => +w);
- if (localStorage.getItem("military")) options.military = JSON.parse(localStorage.getItem("military"));
+ if (stored("military")) options.military = JSON.parse(stored("military"));
- if (localStorage.getItem("tooltipSize")) changeTooltipSize(localStorage.getItem("tooltipSize"));
- if (localStorage.getItem("regions")) changeStatesNumber(localStorage.getItem("regions"));
+ if (stored("tooltipSize")) changeTooltipSize(stored("tooltipSize"));
+ if (stored("regions")) changeStatesNumber(stored("regions"));
uiSizeInput.max = uiSizeOutput.max = getUImaxSize();
- if (localStorage.getItem("uiSize")) changeUIsize(localStorage.getItem("uiSize"));
+ if (stored("uiSize")) changeUIsize(stored("uiSize"));
else changeUIsize(minmax(rn(mapWidthInput.value / 1280, 1), 1, 2.5));
// search params overwrite stored and default options
@@ -503,8 +511,8 @@ function applyStoredOptions() {
if (width) mapWidthInput.value = width;
if (height) mapHeightInput.value = height;
- const transparency = localStorage.getItem("transparency") || 5;
- const themeColor = localStorage.getItem("themeColor");
+ const transparency = stored("transparency") || 5;
+ const themeColor = stored("themeColor");
changeDialogsTheme(themeColor, transparency);
setRendering(shapeRendering.value);
@@ -549,22 +557,13 @@ function randomizeOptions() {
// select heightmap template pseudo-randomly
function randomizeHeightmapTemplate() {
- const templates = {
- volcano: 3,
- highIsland: 19,
- lowIsland: 9,
- continents: 16,
- archipelago: 18,
- mediterranean: 5,
- peninsula: 3,
- pangea: 5,
- isthmus: 2,
- atoll: 1,
- shattered: 7,
- taklamakan: 1,
- oldWorld: 11
- };
- document.getElementById("templateInput").value = rw(templates);
+ const templates = {};
+ for (const key in heightmapTemplates) {
+ templates[key] = heightmapTemplates[key].probability || 0;
+ }
+ const template = rw(templates);
+ const name = heightmapTemplates[template].name;
+ applyOption(byId("templateInput"), template, name);
}
// select culture set pseudo-randomly
${name}