From 2bbcde7dd370f0f6eb6d8733aab697917f5a8963 Mon Sep 17 00:00:00 2001
From: James Barnett <noreply@jamesbarnett.xyz>
Date: Fri, 9 Aug 2019 20:56:49 +0100
Subject: Add loading overlay during terrain gen

---
 src/main/kotlin/Terrain.kt      | 43 ++++++++++++++++++++++++++-------------
 src/main/resources/index.html   | 12 +++++------
 src/main/resources/presets.json |  2 +-
 src/main/resources/style.css    | 45 +++++++++++++++++++++++++++++++++++++++++
 4 files changed, 81 insertions(+), 21 deletions(-)
 create mode 100644 src/main/resources/style.css

(limited to 'src/main')

diff --git a/src/main/kotlin/Terrain.kt b/src/main/kotlin/Terrain.kt
index f6db6db..054055e 100644
--- a/src/main/kotlin/Terrain.kt
+++ b/src/main/kotlin/Terrain.kt
@@ -18,6 +18,8 @@ import info.laht.threekt.scenes.Scene
 import org.w3c.fetch.Request
 import kotlin.browser.document
 import kotlin.browser.window
+import kotlin.dom.addClass
+import kotlin.dom.removeClass
 import kotlin.math.pow
 
 class Terrain {
@@ -38,11 +40,11 @@ class Terrain {
 
   var options = GenerateOptions(
     80,
-    11.0,
-    ScalingType.LINEAR.name,
+    2.9,
+    ScalingType.EXPONENTIAL.name,
     false,
-    5,
-    15,
+    4,
+    16,
     false)
 
   init {
@@ -73,8 +75,6 @@ class Terrain {
 
     generateTerrain()
 
-    generateWater()
-
     window.addEventListener("resize", {
       camera.aspect = window.innerWidth.toDouble() / window.innerHeight
       camera.updateProjectionMatrix()
@@ -98,8 +98,19 @@ class Terrain {
     generateTerrain()
   }
 
+  private fun regenerateTerrain() {
+    document.getElementById("loading-overlay")?.removeClass("hidden")
+    // without the setTimeout the loading overlay is never rendered
+    window.setTimeout({
+      generateTerrain()
+      document.getElementById("loading-overlay")?.addClass("hidden")
+    }, 10)
+  }
+
   private fun generateTerrain() {
 
+    val genStart = window.performance.now()
+
     if (this::terrainMesh.isInitialized) {
       scene.remove(terrainMesh)
     }
@@ -148,6 +159,11 @@ class Terrain {
     terrainMesh = Mesh(terrainGeom, terrainMaterial)
       .apply { receiveShadows = true }
       .also(scene::add)
+
+    generateWater()
+
+    val genEnd = window.performance.now()
+    println("Terrain generation took ${genEnd - genStart} ms")
   }
 
   private fun applyHeightMapColour(planeGeometry: PlaneGeometry) {
@@ -204,41 +220,40 @@ class Terrain {
             min(10)
               .max(200)
               .step(5)
-              .onFinishChange { generateTerrain() }
+              .onFinishChange { regenerateTerrain() }
           }
 
           (it.add(this.options, "scalingFactor") as NumberController).apply {
             min(0)
               .max(50)
               .step(0.1)
-              .onFinishChange { generateTerrain() }
+              .onFinishChange { regenerateTerrain() }
           }
 
           (it.add(this.options, "waterHeight") as NumberController).apply {
             min(0)
               .max(30)
               .step(1)
-              .onFinishChange { generateWater() }
+              .onChange { generateWater() }
           }
 
           (it.add(this.options, "snowHeightThreshold") as NumberController).apply {
             min(0)
               .max(30)
               .step(1)
-              .onFinishChange { generateTerrain() }
+              .onFinishChange { regenerateTerrain() }
           }
-          it.add(this.options, "scalingType", ScalingType.values()).onChange {
-            generateTerrain()
+          it.add(this.options, "scalingType", Terrain.ScalingType.values()).onChange {
+            regenerateTerrain()
           }
           it.add(this, "reseedNoise")
-          it.add(this.options, "showWireframe").onChange { generateTerrain() }
+          it.add(this.options, "showWireframe").onChange { regenerateTerrain() }
           it.add(this.options, "autoRotate")
         }
 
       }
     }
 
-
   }
 
   fun animate() {
diff --git a/src/main/resources/index.html b/src/main/resources/index.html
index 20e95b7..cc41b60 100644
--- a/src/main/resources/index.html
+++ b/src/main/resources/index.html
@@ -12,16 +12,16 @@
   <script type="text/javascript" src="kotlin/kotlin.js"></script>
   <script type="text/javascript" src="kotlin/threejs-wrapper.js"></script>
   <script type="text/javascript" src="kotlin/terrain.js"></script>
-  <style>
-    body {
-      padding: 0;
-      margin: 0;
-    }
-  </style>
+
+  <link rel="stylesheet" type="text/css" href="style.css">
 </head>
   <body>
 
     <div id="container"></div>
+    <div id="loading-overlay" class="hidden">
+      hello
+      <div id="spinner"></div>
+    </div>
 
     <script>
       new terrain.Terrain().animate()
diff --git a/src/main/resources/presets.json b/src/main/resources/presets.json
index 1cefb98..0c797b3 100644
--- a/src/main/resources/presets.json
+++ b/src/main/resources/presets.json
@@ -1,5 +1,5 @@
 {
-  "preset": "Mountainous",
+  "preset": "Mountain",
   "remembered": {
     "Mountain": {
       "0": {
diff --git a/src/main/resources/style.css b/src/main/resources/style.css
new file mode 100644
index 0000000..4d69b30
--- /dev/null
+++ b/src/main/resources/style.css
@@ -0,0 +1,45 @@
+body {
+  padding: 0;
+  margin: 0;
+}
+
+#loading-overlay {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0,0,0,.5);
+}
+
+#spinner {
+  width: 50px;
+  height: 50px;
+  margin-top: -40px;
+  margin-left: -40px;
+
+  position: absolute;
+  top: 50%;
+  left: 50%;
+
+  border-width: 120px;
+  border-radius: 50%;
+  border: 16px solid #33abda;
+  border-top: 16px solid #3c3c3c;
+  -webkit-animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+canvas {
+  display: block;
+}
+
+.hidden {
+  display: none;
+}
\ No newline at end of file
-- 
cgit v1.2.3