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

heightmap select - style fixes

Browse source
This commit is contained in:
Azgaar 2022-05-27 02:22:25 +03:00
parent 6766de46ef
commit f56bd0f586
7 changed files with 123 additions and 91 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -89,10 +89,23 @@ function appendStyleSheet() {
.heightmap-selection_container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
grid-gap: 8px;
}
@media (max-width: 600px) {
.heightmap-selection_container {
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
grid-gap: 4px;
}
}
@media (min-width: 2000px) {
.heightmap-selection_container {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
}
.heightmap-selection article {
padding: 4px;
border-radius: 8px;
@ -128,13 +141,9 @@ function appendStyleSheet() {
.heightmap-selection article > img {
width: 100%;
aspect-ratio: 16/9;
aspect-ratio: ${graphWidth}/${graphHeight};
border-radius: 8px;
object-fit: cover;
}
img.heightmap-selection_precreated {
filter: contrast(1.3);
object-fit: fill;
}
`;
@ -153,21 +162,23 @@ function insertEditorHtml() {
const dataUrl = drawHeights(heights);
return /* html */ `<article data-id="${id}" data-seed="${seed}">
<img src="${dataUrl}" alt="${name}" />
<div>
${name}
<span data-tip="Regenerate preview" class="icon-cw"></span>
</div>
</article>`;
<img src="${dataUrl}" alt="${name}" />
<div>
${name}
<span data-tip="Regenerate preview" class="icon-cw"></span>
</div>
</article>`;
})
.join("");
const heightmapsHtml = heightmaps
.map(({id, name}) => {
drawPrecreatedHeightmap(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>`;
<img alt="${name}" />
<div>${name}</div>
</article>`;
})
.join("");
@ -222,15 +233,19 @@ function drawHeights(heights) {
canvas.height = grid.cellsY;
const ctx = canvas.getContext("2d");
const imageData = ctx.createImageData(grid.cellsX, grid.cellsY);
const scheme = getColorScheme();
const waterColor = scheme(1);
heights.forEach((height, i) => {
const h = height < 20 ? Math.max(height / 1.5, 0) : height;
const v = (h / 100) * 255;
imageData.data[i * 4] = v;
imageData.data[i * 4 + 1] = v;
imageData.data[i * 4 + 2] = v;
imageData.data[i * 4 + 3] = 255;
});
for (let i = 0; i < heights.length; i++) {
const color = heights[i] < 20 ? waterColor : scheme(1 - heights[i] / 100);
const {r, g, b} = d3.color(color);
const n = i * 4;
imageData.data[n] = r;
imageData.data[n + 1] = g;
imageData.data[n + 2] = b;
imageData.data[n + 3] = 255;
}
ctx.putImageData(imageData, 0, 0);
return canvas.toDataURL("image/png");
@ -243,6 +258,13 @@ function generateHeightmap(id) {
return heights;
}
async function drawPrecreatedHeightmap(id) {
const heights = await HeightmapGenerator.fromPrecreated(id);
const dataUrl = drawHeights(heights);
const article = byId("heightmapSelection").querySelector(`[data-id="${id}"]`);
article.querySelector("img").src = dataUrl;
}
function regeneratePreview(article, id) {
const seed = generateSeed();
article.dataset.seed = seed;