Keep camera in map boundary

4 files changed, 28 insertions, 8 deletions

diff --git a/src/main/kotlin/CameraController.kt b/src/main/kotlin/CameraController.kt
index 510f1a0..c2885de 100644
--- a/src/main/kotlin/CameraController.kt
+++ b/src/main/kotlin/CameraController.kt
@@ -5,6 +5,8 @@ class CameraController(
   private val camera: Camera,
   private val moveSpeed: Double,
   private val rotateSpeed: Int,
+  private val xMax: Int,
+  private val yMax: Int,
   private val afterInput: () -> Unit
 ) {
 
@@ -30,6 +32,7 @@ class CameraController(
     val cameraSin = camera.rotation.sine() * moveSpeed
     camera.xPos += cameraCos
     camera.yPos += cameraSin
+    boundsCheck(camera)
     afterInput()
   }
 
@@ -38,6 +41,7 @@ class CameraController(
     val cameraSin = camera.rotation.sine() * moveSpeed
     camera.xPos -= cameraCos
     camera.yPos -= cameraSin
+    boundsCheck(camera)
     afterInput()
   }
 
@@ -51,4 +55,17 @@ class CameraController(
     afterInput()
   }
 
+  private fun boundsCheck(camera: Camera) {
+    camera.xPos = clamp(camera.xPos, xMax)
+    camera.yPos = clamp(camera.yPos, yMax)
+  }
+
+  private fun clamp(position: Double, max: Int): Double {
+    return when {
+      position < 1 -> 1.0
+      position > max -> max.toDouble()
+      else -> position
+    }
+  }
+
 }
\ No newline at end of file
diff --git a/src/main/kotlin/Raycaster.kt b/src/main/kotlin/Raycaster.kt
index f012ba8..53c6dc6 100644
--- a/src/main/kotlin/Raycaster.kt
+++ b/src/main/kotlin/Raycaster.kt
@@ -27,8 +27,6 @@ class Raycaster {
       do {
         rayX += raySweepAngle.cosine() / options.stepPrecision
         rayY += raySweepAngle.sine() / options.stepPrecision
-
-        // TODO bounds checking
         objectTypeHit = map.data[rayY.toFlooredInt()][rayX.toFlooredInt()]
       } while (objectTypeHit == 0)
 
diff --git a/src/main/kotlin/main.kt b/src/main/kotlin/main.kt
index c29374d..0d0d600 100644
--- a/src/main/kotlin/main.kt
+++ b/src/main/kotlin/main.kt
@@ -18,7 +18,13 @@ fun main() {
 
     val raycaster = Raycaster()
 
-    CameraController(camera, moveSpeed = 1.0, rotateSpeed = 15) {
+    CameraController(
+      camera,
+      moveSpeed = 1.0,
+      rotateSpeed = 15,
+      xMax = map.width - 1,
+      yMax = map.height - 1
+    ) {
       paint(raycaster, context)
     }
 
diff --git a/src/main/resources/index.html b/src/main/resources/index.html
index bbb72bb..81f121a 100644
--- a/src/main/resources/index.html
+++ b/src/main/resources/index.html
@@ -10,7 +10,7 @@
     <div class="container grid-xl">
       <div class="columns">
         <div class="column col-xl-12">
-          <div id="output-wrapper" class="loading loading-lg">
+          <div id="output-wrapper" class="p-centered loading loading-lg">
             <canvas id="render-output"></canvas>
             <canvas id="minimap"></canvas>
             <div id="log">
@@ -22,15 +22,14 @@
         <div class="column">
           <div class="columns controls">
             <div class="column col-12 col-xl-3">
-              <p>A simple <a href="https://en.wikipedia.org/wiki/Ray_casting">raycasting</a> engine written from scratch in Kotlin (transpiled to JS), rendered using only vertical lines drawn on an HTML5 canvas. The source is on <a href="https://github.com/jamesbarnett91/kotlin-raycaster">GitHub</a>.</p>
-              <p>The raycasting rendering method was used in early 90's 3D games, most famously <a href="https://en.wikipedia.org/wiki/Wolfenstein_3D">Wolfenstein 3D</a>.</p>
+              <p>A simple <a href="https://en.wikipedia.org/wiki/Ray_casting" target="_blank">raycasting</a> engine written from scratch in Kotlin (transpiled to JS), rendered using only vertical lines drawn on an HTML5 canvas. The source is on <a href="https://github.com/jamesbarnett91/kotlin-raycaster" target="_blank">GitHub</a>.</p>
+              <p>The raycasting rendering method was used in early 90's 3D games, most famously <a href="https://en.wikipedia.org/wiki/Wolfenstein_3D" target="_blank">Wolfenstein 3D</a>.</p>
               <p>Use WASD to move, or the arrow buttons on mobile.</p>
             </div>
             <div class="column col-12 col-xl-1 hide-xl">
               <div class="divider"></div>
             </div>
-            <div class="divider-vert show-xl"></div>
-            <div class="column col-12 col-xl-5">
+            <div class="column col-12 col-xl-9">
               <div class="form-group">
                 <label class="form-label label-sm" for="texture-set">Texture set</label>
                 <select id="texture-set" class="form-select select-sm">