Add switchable texture sets. Fix minimap

11 files changed, 84 insertions, 31 deletions

diff --git a/src/main/kotlin/CameraController.kt b/src/main/kotlin/CameraController.kt
index a3508c1..436b34b 100644
--- a/src/main/kotlin/CameraController.kt
+++ b/src/main/kotlin/CameraController.kt
@@ -2,8 +2,8 @@ import kotlinx.browser.document
 
 class CameraController(
   private val camera: Camera,
-  private val moveSpeed: Double = 0.5,
-  private val rotateSpeed: Int = 5,
+  private val moveSpeed: Double,
+  private val rotateSpeed: Int,
   private val afterInput: () -> Unit
 ) {
 
@@ -19,6 +19,7 @@ class CameraController(
       "KeyD" -> rotateClockwise()
     }
     afterInput()
+    console.log("x: ${camera.xPos} y: ${camera.yPos} r: ${camera.rotation}")
   }
 
   private fun moveForward() {
diff --git a/src/main/kotlin/Map.kt b/src/main/kotlin/Map.kt
index 43c707d..e5f7bd3 100644
--- a/src/main/kotlin/Map.kt
+++ b/src/main/kotlin/Map.kt
@@ -1,15 +1,13 @@
 class Map {
   val data = listOf(
-    listOf(1,1,1,1,1,1,1,1,1,1),
-    listOf(1,0,0,0,0,0,0,0,0,1),
-    listOf(1,0,0,0,0,0,0,0,0,1),
-    listOf(1,0,0,2,2,0,2,0,0,1),
-    listOf(1,0,0,2,0,0,2,0,0,1),
-    listOf(1,0,0,2,0,0,2,0,0,1),
-    listOf(1,0,0,2,0,2,2,0,0,1),
-    listOf(1,0,0,0,0,0,0,0,0,1),
-    listOf(1,0,0,0,0,0,0,0,0,1),
-    listOf(1,1,1,1,1,1,1,1,1,1)
+    listOf(1,2,1,2,1,1,2,1,1,2,1,1,2,1,1,2),
+    listOf(2,0,0,1,0,0,0,0,0,0,0,1,2,0,2,2),
+    listOf(2,0,0,1,0,0,0,0,0,0,0,0,0,0,2,2),
+    listOf(1,0,0,1,0,0,0,3,5,4,3,0,0,0,0,6),
+    listOf(1,0,0,0,0,0,0,3,3,3,4,0,0,0,0,9),
+    listOf(2,0,0,0,0,0,0,0,0,5,5,0,0,0,0,6),
+    listOf(2,0,0,1,0,0,0,0,0,4,3,0,0,0,1,1),
+    listOf(1,1,2,1,6,9,7,6,8,6,1,2,1,1,2,1)
   )
 
   val width = data[0].size
diff --git a/src/main/kotlin/Minimap.kt b/src/main/kotlin/Minimap.kt
index eb762ab..34862e0 100644
--- a/src/main/kotlin/Minimap.kt
+++ b/src/main/kotlin/Minimap.kt
@@ -3,15 +3,13 @@ import org.w3c.dom.CanvasRenderingContext2D
 import org.w3c.dom.HTMLCanvasElement
 
 class Minimap(private val map: Map) {
-  private val scale = 30
+  private val scale = 20
 
   private val canvas = (document.createElement("canvas") as HTMLCanvasElement)
     .apply {
       width = map.width * scale
       height = map.height * scale
       id = "minimap"
-      style.width = "${width}px"
-      style.height = "${height}px"
     }
   private val context = canvas.getContext("2d") as CanvasRenderingContext2D
 
@@ -21,7 +19,7 @@ class Minimap(private val map: Map) {
 
   private fun drawMap() {
     for (y in 0 until map.height) {
-      for (x in 0 until map.height) {
+      for (x in 0 until map.width) {
         val wall = map.data[y][x]
         if (wall > 0) {
           context.fillStyle = "#000000"
@@ -35,15 +33,15 @@ class Minimap(private val map: Map) {
     context.clearRect(0.0, 0.0, (map.width * scale).toDouble(), (map.height * scale).toDouble())
     drawMap()
     context.fillStyle = "#FF0000"
-    context.fillRect(camera.xPos * scale, camera.yPos * scale, scale.toDouble(), scale.toDouble())
+    context.fillRect((camera.xPos * scale)-5, (camera.yPos * scale)-5, 10.0, 10.0)
 
     context.strokeStyle = "#00FF00"
     context.lineWidth = 2.0
     context.beginPath()
     context.moveTo(camera.xPos * scale, camera.yPos * scale)
 
-    val cameraCos = kotlin.math.cos(toRadians(camera.rotation)) * 4
-    val cameraSin = kotlin.math.sin(toRadians(camera.rotation)) * 4
+    val cameraCos = kotlin.math.cos(toRadians(camera.rotation))
+    val cameraSin = kotlin.math.sin(toRadians(camera.rotation))
 
     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 8cc3781..ff2cc24 100644
--- a/src/main/kotlin/Raycaster.kt
+++ b/src/main/kotlin/Raycaster.kt
@@ -30,7 +30,8 @@ class Raycaster(private val stepPrecision: Int) {
       val texture = textureManager.getTexture(objectTypeHit)
       val textureXIndex = ((texture.width * (rayX + rayY)) % texture.width).toFlooredInt()
 
-      val distanceToWall = kotlin.math.sqrt((camera.xPos - rayX).pow(2) + (camera.yPos - rayY).pow(2))
+      var distanceToWall = kotlin.math.sqrt((camera.xPos - rayX).pow(2) + (camera.yPos - rayY).pow(2))
+//      distanceToWall *= (raySweepAngle-camera.rotation).cosine()
       val wallHeight = viewportHeightHalf / distanceToWall
 
       // Ceiling
diff --git a/src/main/kotlin/TextureManager.kt b/src/main/kotlin/TextureManager.kt
index 58005e9..7c5ab10 100644
--- a/src/main/kotlin/TextureManager.kt
+++ b/src/main/kotlin/TextureManager.kt
@@ -10,14 +10,15 @@ class TextureManager {
   private lateinit var textures: List<Texture>
 
   fun getTexture(id: Int): Texture {
-    return textures.first { it.id == id }
+    return textures.find { it.id == id } ?: textures.first()
   }
 
-  fun loadTextures() {
+  fun loadTextures(set: String) {
     textures = document.getElementsByClassName("texture-definition").asList()
       .map { it as HTMLImageElement }
+      .filter { it.getAttribute("data-set") == set }
       .map {
-        val id = it.id.toInt()
+        val id = it.getAttribute("data-texture-id")!!.toInt()
         val width = it.getAttribute("data-width")?.toInt() ?: 64
         val height = it.getAttribute("data-height")?.toInt() ?: 64
         Texture(id, width, height, parseImage(it, width, height))
diff --git a/src/main/kotlin/Ui.kt b/src/main/kotlin/Ui.kt
new file mode 100644
index 0000000..e477bec
--- /dev/null
+++ b/src/main/kotlin/Ui.kt
@@ -0,0 +1,23 @@
+import kotlinx.browser.document
+import org.w3c.dom.HTMLSelectElement
+
+class Ui(private val textureManager: TextureManager, private val afterChange: () -> Unit) {
+  private val textureSelect: HTMLSelectElement
+  init {
+    textureSelect = registerTextureSetHandler()
+  }
+
+  private fun registerTextureSetHandler(): HTMLSelectElement {
+    val select = document.getElementById("texture-set") as HTMLSelectElement
+    select.onchange = {
+      textureManager.loadTextures(select.value)
+      afterChange()
+    }
+
+    return select
+  }
+
+  fun getSelectedTextureSet(): String {
+    return textureSelect.value
+  }
+}
\ No newline at end of file
diff --git a/src/main/kotlin/main.kt b/src/main/kotlin/main.kt
index 7533287..bc39316 100644
--- a/src/main/kotlin/main.kt
+++ b/src/main/kotlin/main.kt
@@ -1,12 +1,11 @@
 fun main() {
   val renderer = Renderer(viewportWidth = 320, viewportHeight = 240, outputScale = 3)
   val textureManager = TextureManager()
-    .apply { loadTextures() }
   val camera = Camera(
     fov = 90,
-    xPos = 2.0,
-    yPos = 2.0,
-    rotation = 90.0
+    xPos = 1.2,
+    yPos = 2.5,
+    rotation = 60.0
   )
   val map = Map()
   val minimap = Minimap(map)
@@ -15,10 +14,16 @@ fun main() {
 
   val raycaster = Raycaster(stepPrecision = 32)
 
-  CameraController(camera, moveSpeed = 0.5, rotateSpeed = 5) {
+  CameraController(camera, moveSpeed = 1.0, rotateSpeed = 15) {
     paint(raycaster, context)
   }
 
+  val ui = Ui(textureManager) {
+    paint(raycaster, context)
+  }
+
+  textureManager.loadTextures(ui.getSelectedTextureSet())
+
   // Do an initial paint and wait for input
   paint(raycaster, context)
 }
diff --git a/src/main/resources/index.html b/src/main/resources/index.html
index bbf13e6..f224a2e 100644
--- a/src/main/resources/index.html
+++ b/src/main/resources/index.html
@@ -5,13 +5,39 @@
     <title>Kotlin Raycaster</title>
     <style>
       .texture-definition {
-        display: none
+        display: none;
+      }
+      #minimap {
+        transform: rotate(180deg);
       }
     </style>
   </head>
   <body>
-    <img id="1" src="textures/wolf/wall1.png" data-width="64" data-height="64" class="texture-definition">
-    <img id="2" src="textures/wolf/wood1.png" data-width="64" data-height="64" class="texture-definition">
+    <img data-texture-id="1" src="textures/wolf3d/wall-stone-1.png" data-width="64" data-height="64" class="texture-definition" data-set="wolf3d">
+    <img data-texture-id="2" src="textures/wolf3d/wall-stone-2.png" data-width="64" data-height="64" class="texture-definition" data-set="wolf3d">
+    <img data-texture-id="3" src="textures/wolf3d/wall-wood-1.png" data-width="64" data-height="64" class="texture-definition" data-set="wolf3d">
+    <img data-texture-id="4" src="textures/wolf3d/wall-wood-1.png" data-width="64" data-height="64" class="texture-definition" data-set="wolf3d">
+    <img data-texture-id="5" src="textures/wolf3d/wall-wood-2.png" data-width="64" data-height="64" class="texture-definition" data-set="wolf3d">
+    <img data-texture-id="7" src="textures/wolf3d/wall-blue-1.png" data-width="64" data-height="64" class="texture-definition" data-set="wolf3d">
+    <img data-texture-id="6" src="textures/wolf3d/wall-blue-2.png" data-width="64" data-height="64" class="texture-definition" data-set="wolf3d">
+    <img data-texture-id="8" src="textures/wolf3d/wall-blue-3.png" data-width="64" data-height="64" class="texture-definition" data-set="wolf3d">
+    <img data-texture-id="9" src="textures/wolf3d/wall-blue-door.png" data-width="64" data-height="64" class="texture-definition" data-set="wolf3d">
+
+    <img data-texture-id="1" src="textures/doom/wall-g-1.png" data-width="64" data-height="64" class="texture-definition" data-set="doom">
+    <img data-texture-id="2" src="textures/doom/wall-g-2.png" data-width="64" data-height="64" class="texture-definition" data-set="doom">
+    <img data-texture-id="3" src="textures/doom/wall-brown-1.png" data-width="64" data-height="64" class="texture-definition" data-set="doom">
+    <img data-texture-id="5" src="textures/doom/wall-brown-2.png" data-width="64" data-height="64" class="texture-definition" data-set="doom">
+    <img data-texture-id="4" src="textures/doom/wall-brown-3.png" data-width="64" data-height="64" class="texture-definition" data-set="doom">
+    <img data-texture-id="6" src="textures/doom/wall-stone-1.png" data-width="64" data-height="64" class="texture-definition" data-set="doom">
+    <img data-texture-id="7" src="textures/doom/wall-stone-2.png" data-width="64" data-height="64" class="texture-definition" data-set="doom">
+    <img data-texture-id="8" src="textures/doom/wall-stone-3.png" data-width="64" data-height="64" class="texture-definition" data-set="doom">
+    <img data-texture-id="9" src="textures/doom/door.png" data-width="64" data-height="64" class="texture-definition" data-set="doom">
+
+    <select id="texture-set">
+      <option value="wolf3d" selected>Wolfenstein 3D</option>
+      <option value="doom">Doom E1M1</option>
+    </select>
+
     <script src="kotlin-raycaster.js"></script>
   </body>
 </html>
diff --git a/src/main/resources/textures/wolf/wall1.png b/src/main/resources/textures/wolf/wall1.png
deleted file mode 100644
index 53cb30c..0000000
--- a/src/main/resources/textures/wolf/wall1.png
+++ /dev/null
diff --git a/src/main/resources/textures/wolf/wood1.png b/src/main/resources/textures/wolf/wood1.png
deleted file mode 100644
index 735b8ad..0000000
--- a/src/main/resources/textures/wolf/wood1.png
+++ /dev/null
diff --git a/src/main/resources/textures/wolf/wood2.png b/src/main/resources/textures/wolf/wood2.png
deleted file mode 100644
index 5f36e40..0000000
--- a/src/main/resources/textures/wolf/wood2.png
+++ /dev/null