Adjust zoom settings and sync slider with mouse wheel.

- Changed default zoom from 2.5 to 6.0 (further away).
- Reduced max zoom distance from 30 to 15.
- Fixed slider not updating when using mouse wheel zoom.

src/engine/dungeon/TileDefinitions.js

@@ -9,7 +9,10 @@ export const TILES = {
         id: 'corridor_straight',
         name: 'Corridor',
         type: TILE_TYPES.CORRIDOR,
-        textures: ['/assets/images/dungeon1/tiles/corridor1.png'],
+        textures: ['/assets/images/dungeon1/tiles/corridor1.png',
+            '/assets/images/dungeon1/tiles/corridor2.png',
+            '/assets/images/dungeon1/tiles/corridor3.png',
+        ],
         variants: {
             [DIRECTIONS.NORTH]: {
                 width: 2, height: 6,

src/view/CameraManager.js

@@ -7,9 +7,11 @@ export class CameraManager {
 
         // Configuration
         // Configuration
-        this.zoomLevel = 2.5; // Orthographic zoom factor (Lower = Closer)
+        this.zoomLevel = 6.0; // Started further back as requested
         this.aspect = window.innerWidth / window.innerHeight;
 
+        this.onZoomChange = null;
+
         // Isometric Setup: Orthographic Camera
         this.camera = new THREE.OrthographicCamera(
             -this.zoomLevel * this.aspect,
@@ -69,9 +71,10 @@ export class CameraManager {
             e.preventDefault();
             // Adjust Zoom Level property
             if (e.deltaY < 0) this.zoomLevel = Math.max(3, this.zoomLevel - 1);
-            else this.zoomLevel = Math.min(30, this.zoomLevel + 1);
+            else this.zoomLevel = Math.min(15, this.zoomLevel + 1);
 
             this.updateProjection();
+            if (this.onZoomChange) this.onZoomChange(this.zoomLevel);
         }, { passive: false });
 
         // Pan Listeners (Middle Click)

src/view/UIManager.js

@@ -65,20 +65,26 @@ export class UIManager {
 
         const zoomSlider = document.createElement('input');
         zoomSlider.type = 'range';
-        zoomSlider.min = '2.5'; // Closest zoom
-        zoomSlider.max = '30'; // Farthest zoom
-        zoomSlider.value = '2.5'; // Start at closest
+        zoomSlider.min = '3';
+        zoomSlider.max = '15';
+        zoomSlider.value = '6';
         zoomSlider.step = '0.5';
         zoomSlider.style.width = '100px';
         zoomSlider.style.transform = 'rotate(-90deg)';
         zoomSlider.style.transformOrigin = 'center';
         zoomSlider.style.cursor = 'pointer';
-        zoomSlider.style.marginTop = '40px'; // Push slider down to make room for label
+        zoomSlider.style.marginTop = '40px';
 
-        // Set initial zoom to closest
-        this.cameraManager.zoomLevel = 2.5;
+        this.zoomSlider = zoomSlider;
+
+        // Set initial zoom
+        this.cameraManager.zoomLevel = 6;
         this.cameraManager.updateProjection();
 
+        this.cameraManager.onZoomChange = (val) => {
+            if (this.zoomSlider) this.zoomSlider.value = val;
+        };
+
         zoomSlider.oninput = (e) => {
             this.cameraManager.zoomLevel = parseFloat(e.target.value);
             this.cameraManager.updateProjection();