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

generation flow for heightmap select

Browse source
This commit is contained in:
Azgaar 2022-05-26 00:19:32 +03:00
parent ff31e23a27
commit 6766de46ef
9 changed files with 132 additions and 100 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -41,8 +41,6 @@ const heightmaps = [
{id: "world-from-pacific", name: "World from Pacific"}
];
let seed = Math.floor(Math.random() * 1e9);
appendStyleSheet();
insertEditorHtml();
addListeners();
@ -62,7 +60,20 @@ export function open() {
$(this).dialog("close");
},
Select: function () {
$templateInput.value = getSelected();
const id = getSelected();
$templateInput.value = id;
lock("template");
$(this).dialog("close");
},
"New Map": function () {
const id = getSelected();
$templateInput.value = id;
lock("template");
const seed = getSeed();
Math.random = aleaPRNG(seed);
regeneratePrompt({seed});
$(this).dialog("close");
}
}
@ -133,13 +144,12 @@ function appendStyleSheet() {
}
function insertEditorHtml() {
const seed = generateSeed();
const templatesHtml = templates
.map(({id, name}) => {
Math.random = aleaPRNG(seed);
HeightmapGenerator.resetHeights();
const heights = HeightmapGenerator.fromTemplate(id);
HeightmapGenerator.cleanup();
const heights = generateHeightmap(id);
const dataUrl = drawHeights(heights);
return /* html */ `<article data-id="${id}" data-seed="${seed}">
@ -154,7 +164,7 @@ function insertEditorHtml() {
const heightmapsHtml = heightmaps
.map(({id, name}) => {
return /* html */ `<article data-id="${id}">
return /* html */ `<article data-id="${id}" data-seed="${seed}">
<img src="../../heightmaps/${id}.png" alt="${name}" class="heightmap-selection_precreated" />
<div>${name}</div>
</article>`;
@ -202,6 +212,10 @@ function setSelected(id) {
$heightmapSelection.querySelector(`[data-id="${id}"]`)?.classList?.add("selected");
}
function getSeed() {
return byId("heightmapSelection").querySelector(".selected")?.dataset?.seed;
}
function drawHeights(heights) {
const canvas = document.createElement("canvas");
canvas.width = grid.cellsX;
@ -222,14 +236,19 @@ function drawHeights(heights) {
return canvas.toDataURL("image/png");
}
function regeneratePreview(article, id) {
seed = Math.floor(Math.random() * 1e9);
article.dataset.seed = seed;
Math.random = aleaPRNG(seed);
function generateHeightmap(id) {
HeightmapGenerator.resetHeights();
const heights = HeightmapGenerator.fromTemplate(id);
HeightmapGenerator.cleanup();
return heights;
}
function regeneratePreview(article, id) {
const seed = generateSeed();
article.dataset.seed = seed;
Math.random = aleaPRNG(seed);
const heights = generateHeightmap(id);
const dataUrl = drawHeights(heights);
article.querySelector("img").src = dataUrl;
}