heightmap select - style fixes

index.html

@@ -24,8 +24,12 @@
         font-size: 10px;
         overflow: hidden;
       }
-      #map {
+      #loading > * {
-        position: absolute;
+        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"

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

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 {