From 48e36fa26c00e98aa50df228d90fe0a20603bd5b Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Fri, 27 May 2022 02:22:25 +0300
Subject: [PATCH] heightmap select - style fixes

---
 index.html                             |  9 +++++++--
 modules/dynamic/heightmap-selection.js | 20 ++++++++++++++++++++
 modules/heightmap-generator.js         |  1 +
 3 files changed, 28 insertions(+), 2 deletions(-)

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 {