Fix texture loading. Add log overlay

11 files changed, 96 insertions, 65 deletions

diff --git a/src/main/kotlin/Extensions.kt b/src/main/kotlin/Extensions.kt
index 8c11af1..5678a48 100644
--- a/src/main/kotlin/Extensions.kt
+++ b/src/main/kotlin/Extensions.kt
@@ -1,11 +1,9 @@
-fun Double.sine(): Double {
-  return kotlin.math.sin(toRadians(this))
-}
+fun Double.toRadians() = this * kotlin.math.PI / 180
 
-fun Double.cosine(): Double {
-  return kotlin.math.cos(toRadians(this))
-}
+fun Double.sine() = kotlin.math.sin(this.toRadians())
 
-fun Double.toFlooredInt(): Int {
-  return kotlin.math.floor(this).toInt()
-}
\ No newline at end of file
+fun Double.cosine() = kotlin.math.cos(this.toRadians())
+
+fun Double.toFlooredInt() = kotlin.math.floor(this).toInt()
+
+fun Double.toRoundedString() = this.asDynamic().toFixed(2) as String
\ No newline at end of file
diff --git a/src/main/kotlin/Logger.kt b/src/main/kotlin/Logger.kt
new file mode 100644
index 0000000..a9b30c5
--- /dev/null
+++ b/src/main/kotlin/Logger.kt
@@ -0,0 +1,22 @@
+import kotlinx.browser.document
+import org.w3c.dom.HTMLElement
+
+object Logger {
+  private val logMessage = document.getElementById("log-message") as HTMLElement
+  private val logPosition = document.getElementById("log-position") as HTMLElement
+
+  fun log(message: String) {
+    logMessage.textContent = message
+    console.log(message)
+  }
+
+  fun logPosition(camera: Camera) {
+    with(camera) {
+      var normalisedRotation = rotation % 360
+      if(normalisedRotation < 0) normalisedRotation += 360
+      logPosition.textContent = "x: ${xPos.toRoundedString()} y: ${yPos.toRoundedString()} rotation: $normalisedRotation"
+    }
+  }
+
+
+}
\ No newline at end of file
diff --git a/src/main/kotlin/Minimap.kt b/src/main/kotlin/Minimap.kt
index 7cbc892..05c0b0c 100644
--- a/src/main/kotlin/Minimap.kt
+++ b/src/main/kotlin/Minimap.kt
@@ -10,6 +10,7 @@ class Minimap(private val map: Map) {
       width = map.width * scale
       height = map.height * scale
     }
+
   private val context = canvas.getContext("2d") as CanvasRenderingContext2D
 
   private fun drawMap() {
@@ -35,8 +36,8 @@ class Minimap(private val map: Map) {
     context.beginPath()
     context.moveTo(camera.xPos * scale, camera.yPos * scale)
 
-    val cameraCos = kotlin.math.cos(toRadians(camera.rotation))
-    val cameraSin = kotlin.math.sin(toRadians(camera.rotation))
+    val cameraCos = camera.rotation.cosine()
+    val cameraSin = camera.rotation.sine()
 
     val dirX = camera.xPos + cameraCos
     val dirY = camera.yPos + cameraSin
diff --git a/src/main/kotlin/Raycaster.kt b/src/main/kotlin/Raycaster.kt
index 04b4d6f..f012ba8 100644
--- a/src/main/kotlin/Raycaster.kt
+++ b/src/main/kotlin/Raycaster.kt
@@ -51,7 +51,7 @@ class Raycaster {
       raySweepAngle += (camera.fov / viewportWidth.toDouble())
     }
 
-    console.log("Viewport raycast in ${Date().getTime() - raycastStartMs}ms")
+    Logger.log("last frame: ${Date().getTime() - raycastStartMs} ms")
   }
 
   private fun drawWallTexture(rayIndex: Int, wallHeight: Double, textureXIndex: Int, texture: Texture, renderer: Renderer) {
diff --git a/src/main/kotlin/Renderer.kt b/src/main/kotlin/Renderer.kt
index 49d6b2c..fef6835 100644
--- a/src/main/kotlin/Renderer.kt
+++ b/src/main/kotlin/Renderer.kt
@@ -30,8 +30,6 @@ class Renderer(val viewportWidth: Int, val viewportHeight: Int, private val outp
     drawLine(startX.toDouble(), startY, endX.toDouble(), endY.toDouble(), cssColour)
   }
 
-  fun clear() {
-    context.clearRect(0.0, 0.0, viewportWidth.toDouble(), viewportHeight.toDouble())
-  }
+  fun clear() = context.clearRect(0.0, 0.0, viewportWidth.toDouble(), viewportHeight.toDouble())
 
 }
\ No newline at end of file
diff --git a/src/main/kotlin/TextureManager.kt b/src/main/kotlin/TextureManager.kt
index 7c5ab10..41da095 100644
--- a/src/main/kotlin/TextureManager.kt
+++ b/src/main/kotlin/TextureManager.kt
@@ -24,7 +24,7 @@ class TextureManager {
         Texture(id, width, height, parseImage(it, width, height))
       }
 
-    console.log("Loaded ${textures.size} texture(s)")
+    Logger.log("Loaded ${textures.size} texture(s)")
   }
 
   private fun parseImage(image: HTMLImageElement, imageWidth: Int, imageHeight: Int): List<String> {
diff --git a/src/main/kotlin/Ui.kt b/src/main/kotlin/Ui.kt
index dd8b0fc..fb7bd25 100644
--- a/src/main/kotlin/Ui.kt
+++ b/src/main/kotlin/Ui.kt
@@ -1,8 +1,6 @@
 import kotlinx.browser.document
 import kotlinx.dom.removeClass
-import org.w3c.dom.HTMLElement
-import org.w3c.dom.HTMLInputElement
-import org.w3c.dom.HTMLSelectElement
+import org.w3c.dom.*
 
 class Ui(private val context: RaycastContext, private val afterChange: () -> Unit) {
 
@@ -11,7 +9,7 @@ class Ui(private val context: RaycastContext, private val afterChange: () -> Uni
   init {
     registerFovInputHandler()
     registerRaycastPrecisionInputHandler()
-    registerMinimapToggleHandler()
+    registerOverlayToggleHandler()
     registerFisheyeToggleHandler()
   }
 
@@ -44,11 +42,13 @@ class Ui(private val context: RaycastContext, private val afterChange: () -> Uni
     }
   }
 
-  private fun registerMinimapToggleHandler() {
-    val toggle = document.getElementById("minimap-toggle") as HTMLInputElement
+  private fun registerOverlayToggleHandler() {
+    val toggle = document.getElementById("overlay-toggle") as HTMLInputElement
     val minimap = document.getElementById("minimap") as HTMLElement
+    val log = document.getElementById("log") as HTMLElement
     toggle.onchange = {
       minimap.hidden = !toggle.checked
+      log.hidden = !toggle.checked
       afterChange()
     }
   }
@@ -61,11 +61,7 @@ class Ui(private val context: RaycastContext, private val afterChange: () -> Uni
     }
   }
 
-  fun getSelectedTextureSet(): String {
-    return textureSelect.value
-  }
+  fun getSelectedTextureSet() = textureSelect.value
 
-  fun removeLoadingIndicator() {
-    document.getElementById("output-wrapper")?.removeClass("loading")
-  }
+  fun removeLoadingIndicator() = document.getElementById("output-wrapper")?.removeClass("loading")
 }
\ No newline at end of file
diff --git a/src/main/kotlin/main.kt b/src/main/kotlin/main.kt
index aa69ad2..c29374d 100644
--- a/src/main/kotlin/main.kt
+++ b/src/main/kotlin/main.kt
@@ -1,43 +1,44 @@
-fun main() {
-  val raycastOptions = RaycastOptions(fixFisheye = false, stepPrecision = 32)
-  val renderer = Renderer(viewportWidth = 320, viewportHeight = 240, outputScale = 3)
-  val textureManager = TextureManager()
-  val camera = Camera(
-    fov = 90,
-    xPos = 1.2,
-    yPos = 2.5,
-    rotation = 60.0
-  )
-  val map = Map()
-  val minimap = Minimap(map)
-
-  val context = RaycastContext(raycastOptions, renderer, textureManager, camera, map, minimap)
-
-  val raycaster = Raycaster()
-
-  CameraController(camera, moveSpeed = 1.0, rotateSpeed = 15) {
-    paint(raycaster, context)
-  }
+import kotlinx.browser.window
 
-  val ui = Ui(context) {
+fun main() {
+  window.onload = {
+    val raycastOptions = RaycastOptions(fixFisheye = false, stepPrecision = 32)
+    val renderer = Renderer(viewportWidth = 320, viewportHeight = 240, outputScale = 3)
+    val textureManager = TextureManager()
+    val camera = Camera(
+      fov = 90,
+      xPos = 1.2,
+      yPos = 2.5,
+      rotation = 60.0
+    )
+    val map = Map()
+    val minimap = Minimap(map)
+
+    val context = RaycastContext(raycastOptions, renderer, textureManager, camera, map, minimap)
+
+    val raycaster = Raycaster()
+
+    CameraController(camera, moveSpeed = 1.0, rotateSpeed = 15) {
+      paint(raycaster, context)
+    }
+
+    val ui = Ui(context) {
+      paint(raycaster, context)
+    }
+
+    textureManager.loadTextures(ui.getSelectedTextureSet())
+
+    // Do an initial paint and wait for input
     paint(raycaster, context)
+    ui.removeLoadingIndicator()
   }
-
-  textureManager.loadTextures(ui.getSelectedTextureSet())
-
-  // Do an initial paint and wait for input
-  paint(raycaster, context)
-  ui.removeLoadingIndicator()
 }
 
-fun paint(raycaster: Raycaster, raycastContext: RaycastContext) {
+private fun paint(raycaster: Raycaster, raycastContext: RaycastContext) {
   with(raycastContext) {
     renderer.clear()
     raycaster.raycast(this)
     minimap.update(camera)
+    Logger.logPosition(camera)
   }
 }
-
-fun toRadians(degrees: Double): Double {
-  return degrees * kotlin.math.PI / 180
-}
diff --git a/src/main/resources/index.html b/src/main/resources/index.html
index 9dd0d5f..bbb72bb 100644
--- a/src/main/resources/index.html
+++ b/src/main/resources/index.html
@@ -13,6 +13,10 @@
           <div id="output-wrapper" class="loading loading-lg">
             <canvas id="render-output"></canvas>
             <canvas id="minimap"></canvas>
+            <div id="log">
+              <div id="log-position"></div>
+              <div id="log-message"></div>
+            </div>
           </div>
         </div>
         <div class="column">
@@ -51,14 +55,14 @@
               </div>
               <div class="form-group">
                 <label class="form-switch">
-                  <input id="minimap-toggle" type="checkbox" checked>
-                  <i class="form-icon"></i> Show minimap
+                  <input id="overlay-toggle" type="checkbox" checked>
+                  <i class="form-icon"></i> Show minimap and overlay
                 </label>
               </div>
               <div class="form-group">
                 <label class="form-switch">
                   <input id="fisheye-fix" type="checkbox">
-                  <i class="form-icon"></i> Fix fisheye (requires low FOV and high precision)
+                  <i class="form-icon"></i> Fix fisheye (requires low FOV + high precision)
                 </label>
               </div>
               <button id="left" class="btn">←</button>
diff --git a/src/main/resources/style.css b/src/main/resources/style.css
index c8b7d92..42ec857 100644
--- a/src/main/resources/style.css
+++ b/src/main/resources/style.css
@@ -1,5 +1,4 @@
 body {
-  margin: 0.5em;
   font-size: 15px;
 }
 
@@ -19,14 +18,26 @@ p {
   padding: 10px;
 }
 
+#log {
+  position: absolute;
+  left: 0;
+  top: 0;
+  padding: 10px;
+  margin-top: 125px;
+  font-family: monospace;
+  color: yellow;
+  font-size: 14px;
+}
+
 #output-wrapper {
   position: relative;
   width: 960px;
   height: 720px;
+  margin-top: 0.5em;
 }
 
 .controls {
-  /*max-width: 20em;*/
+  margin-top: 0.5em;
 }
 
 .slider {
diff --git a/src/main/resources/textures/blank.png b/src/main/resources/textures/blank.png
new file mode 100644
index 0000000..f2e812a
--- /dev/null
+++ b/src/main/resources/textures/blank.png