backups/Fantasy-Map-Generator
1
0
Fork 0
mirror of https://github.com/Azgaar/Fantasy-Map-Generator.git synced 2025-12-17 17:51:24 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

central store for heightmap configs

Browse source
This commit is contained in:
Azgaar 2022-05-29 01:03:21 +03:00
parent c2640bcada
commit 5a6b5b4c95
9 changed files with 145 additions and 190 deletions
Download patch file Download diff file Expand all files Collapse all files

75
modules/dynamic/heightmap-selection.js
View file

@ -1,46 +1,3 @@
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"}
];
const initialSeed = generateSeed();
appendStyleSheet();
insertEditorHtml();
@ -62,19 +19,20 @@ export function open() {
},
Select: function () {
const id = getSelected();
$templateInput.value = id;
applyOption($templateInput, id, getName(id));
lock("template");
$(this).dialog("close");
},
"New Map": function () {
const id = getSelected();
$templateInput.value = id;
applyOption($templateInput, id, getName(id));
lock("template");
const seed = getSeed();
Math.random = aleaPRNG(seed);
regeneratePrompt({seed});
$(this).dialog("close");
}
}
@ -208,13 +166,14 @@ function insertEditorHtml() {
byId("dialogs").insertAdjacentHTML("beforeend", heightmapSelectionHtml);
const sections = document.getElementsByClassName("heightmap-selection_container");
sections[0].innerHTML = templates
.map(({id, name}) => {
sections[0].innerHTML = Object.keys(heightmapTemplates)
.map(key => {
const name = heightmapTemplates[key].name;
Math.random = aleaPRNG(initialSeed);
const heights = generateHeightmap(id);
const heights = generateHeightmap(key);
const dataUrl = drawHeights(heights);
return /* html */ `<article data-id="${id}" data-seed="${initialSeed}">
return /* html */ `<article data-id="${key}" data-seed="${initialSeed}">
<img src="${dataUrl}" alt="${name}" />
<div>
${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 */ `<article data-id="${id}" data-seed="${initialSeed}">
return /* html */ `<article data-id="${key}" data-seed="${initialSeed}">
<img alt="${name}" />
<div>${name}</div>
</article>`;
@ -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);
}

4
modules/heightmap-generator.js
View file

@ -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();

167
modules/heightmap-templates.js
View file

@ -1,167 +0,0 @@
"use strict";
window.HeightmapTemplates = (function () {
const volcano = `Hill 1 90-100 44-56 40-60
Multiply 0.8 50-100 0 0
Range 1.5 30-55 45-55 40-60
Smooth 3 0 0 0
Hill 1.5 35-45 25-30 20-75
Hill 1 35-55 75-80 25-75
Hill 0.5 20-25 10-15 20-25
Mask 3 0 0 0`;
const highIsland = `Hill 1 90-100 65-75 47-53
Add 7 all 0 0
Hill 5-6 20-30 25-55 45-55
Range 1 40-50 45-55 45-55
Multiply 0.8 land 0 0
Mask 3 0 0 0
Smooth 2 0 0 0
Trough 2-3 20-30 20-30 20-30
Trough 2-3 20-30 60-80 70-80
Hill 1 10-15 60-60 50-50
Hill 1.5 13-16 15-20 20-75
Range 1.5 30-40 15-85 30-40
Range 1.5 30-40 15-85 60-70
Pit 3-5 10-30 15-85 20-80`;
const lowIsland = `Hill 1 90-99 60-80 45-55
Hill 1-2 20-30 10-30 10-90
Smooth 2 0 0 0
Hill 6-7 25-35 20-70 30-70
Range 1 40-50 45-55 45-55
Trough 2-3 20-30 15-85 20-30
Trough 2-3 20-30 15-85 70-80
Hill 1.5 10-15 5-15 20-80
Hill 1 10-15 85-95 70-80
Pit 5-7 15-25 15-85 20-80
Multiply 0.4 20-100 0 0
Mask 4 0 0 0`;
const continents = `Hill 1 80-85 60-80 40-60
Hill 1 80-85 20-30 40-60
Hill 6-7 15-30 25-75 15-85
Multiply 0.6 land 0 0
Hill 8-10 5-10 15-85 20-80
Range 1-2 30-60 5-15 25-75
Range 1-2 30-60 80-95 25-75
Range 0-3 30-60 80-90 20-80
Strait 2 vertical 0 0
Strait 1 vertical 0 0
Smooth 3 0 0 0
Trough 3-4 15-20 15-85 20-80
Trough 3-4 5-10 45-55 45-55
Pit 3-4 10-20 15-85 20-80
Mask 4 0 0 0`;
const archipelago = `Add 11 all 0 0
Range 2-3 40-60 20-80 20-80
Hill 5 15-20 10-90 30-70
Hill 2 10-15 10-30 20-80
Hill 2 10-15 60-90 20-80
Smooth 3 0 0 0
Trough 10 20-30 5-95 5-95
Strait 2 vertical 0 0
Strait 2 horizontal 0 0`;
const atoll = `Hill 1 75-80 50-60 45-55
Hill 1.5 30-50 25-75 30-70
Hill .5 30-50 25-35 30-70
Smooth 1 0 0 0
Multiply 0.2 25-100 0 0
Hill 0.5 10-20 50-55 48-52`;
const mediterranean = `Range 4-6 30-80 0-100 0-10
Range 4-6 30-80 0-100 90-100
Hill 6-8 30-50 10-90 0-5
Hill 6-8 30-50 10-90 95-100
Multiply 0.9 land 0 0
Mask -2 0 0 0
Smooth 1 0 0 0
Hill 2-3 30-70 0-5 20-80
Hill 2-3 30-70 95-100 20-80
Trough 3-6 40-50 0-100 0-10
Trough 3-6 40-50 0-100 90-100`;
const peninsula = `Range 2-3 20-35 40-50 0-15
Add 5 all 0 0
Hill 1 90-100 10-90 0-5
Add 13 all 0 0
Hill 3-4 3-5 5-95 80-100
Hill 1-2 3-5 5-95 40-60
Trough 5-6 10-25 5-95 5-95
Smooth 3 0 0 0
Invert 0.4 both 0 0`;
const pangea = `Hill 1-2 25-40 15-50 0-10
Hill 1-2 5-40 50-85 0-10
Hill 1-2 25-40 50-85 90-100
Hill 1-2 5-40 15-50 90-100
Hill 8-12 20-40 20-80 48-52
Smooth 2 0 0 0
Multiply 0.7 land 0 0
Trough 3-4 25-35 5-95 10-20
Trough 3-4 25-35 5-95 80-90
Range 5-6 30-40 10-90 35-65`;
const isthmus = `Hill 5-10 15-30 0-30 0-20
Hill 5-10 15-30 10-50 20-40
Hill 5-10 15-30 30-70 40-60
Hill 5-10 15-30 50-90 60-80
Hill 5-10 15-30 70-100 80-100
Smooth 2 0 0 0
Trough 4-8 15-30 0-30 0-20
Trough 4-8 15-30 10-50 20-40
Trough 4-8 15-30 30-70 40-60
Trough 4-8 15-30 50-90 60-80
Trough 4-8 15-30 70-100 80-100
Invert 0.25 x 0 0`;
const shattered = `Hill 8 35-40 15-85 30-70
Trough 10-20 40-50 5-95 5-95
Range 5-7 30-40 10-90 20-80
Pit 12-20 30-40 15-85 20-80`;
const taklamakan = `Hill 1-3 20-30 30-70 30-70
Hill 2-4 60-85 0-5 0-100
Hill 2-4 60-85 95-100 0-100
Hill 3-4 60-85 20-80 0-5
Hill 3-4 60-85 20-80 95-100
Smooth 3 0 0 0`;
const oldWorld = `Range 3 70 15-85 20-80
Hill 2-3 50-70 15-45 20-80
Hill 2-3 50-70 65-85 20-80
Hill 4-6 20-25 15-85 20-80
Multiply 0.5 land 0 0
Smooth 2 0 0 0
Range 3-4 20-50 15-35 20-45
Range 2-4 20-50 65-85 45-80
Strait 3-7 vertical 0 0
Trough 6-8 20-50 15-85 45-65
Pit 5-6 20-30 10-90 10-90`;
const fractious = `Hill 12-15 50-80 5-95 5-95
Mask -1.5 0 0 0
Mask 3 0 0 0
Add -20 30-100 0 0
Range 6-8 40-50 5-95 10-90`;
return {
volcano,
highIsland,
lowIsland,
continents,
archipelago,
atoll,
mediterranean,
peninsula,
peninsula,
pangea,
isthmus,
shattered,
taklamakan,
oldWorld,
fractious
};
})();

23
modules/ui/general.js
View file

@ -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

2
modules/ui/heightmap-editor.js
View file

@ -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");

105
modules/ui/options.js
View file

@ -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