diff --git a/index.html b/index.html
index e38546c0..138148d5 100644
--- a/index.html
+++ b/index.html
@@ -24,8 +24,12 @@
font-size: 10px;
overflow: hidden;
}
- #map {
- position: absolute;
+ #loading > * {
+ pointer-events: none;
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
}
#loading > * {
pointer-events: none;
@@ -117,6 +121,7 @@
id="map"
width="100%"
height="100%"
+ style="position: absolute"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
diff --git a/modules/dynamic/heightmap-selection.js b/modules/dynamic/heightmap-selection.js
index 9b78d118..6c2bc9f5 100644
--- a/modules/dynamic/heightmap-selection.js
+++ b/modules/dynamic/heightmap-selection.js
@@ -96,6 +96,19 @@ function appendStyleSheet() {
justify-self: end;
}
+ @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;
@@ -308,6 +321,13 @@ async function drawPrecreatedHeightmap(id) {
article.querySelector("img").src = dataUrl;
}
+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) {
graph = getGraph(graph);
const seed = generateSeed();
diff --git a/modules/heightmap-generator.js b/modules/heightmap-generator.js
index 66696953..cb297f2e 100644
--- a/modules/heightmap-generator.js
+++ b/modules/heightmap-generator.js
@@ -510,6 +510,7 @@ window.HeightmapGenerator = (function () {
const powered = lightness < 0.2 ? lightness : 0.2 + (lightness - 0.2) ** 0.8;
heights[i] = minmax(Math.floor(powered * 100), 0, 100);
}
+ return heights;
}
return {