Merge pull request #51 from Bpendragon/main

Add Follow Player mode

index.html

@@ -27,7 +27,7 @@
         </div>
         <div id="zoomLevelDisplay"></div>
         <div id="cursorCoordDisplay"></div>
-        Map v0.6.6 alpha
+        Map v0.6.7 alpha
         <br>
         Updated for Game Build 99.7
         <br>

index.js

@@ -497,9 +497,24 @@ function redrawDynamics(){
     for(const marker of MapData.dynamicMarkers){
         curSprite = null;
         marker.visible = false;
-        if(marker.hidden || (marker.minZoom && MapData.view.scale < marker.minZoom) || (marker.maxZoom && MapData.view.scale > marker.maxZoom)) continue;
         let markerX = MapData.view.convertX(marker.position.x);
         let markerY = MapData.view.convertY(marker.position.z);
+        
+        // Placing this here means the map should always snap to the player if the toggle is on. 
+        // Placing it after culling means that if the user fast travels the map won't snap to them until manually scrolled to near their position. 
+        if(MapData.layers.gps && marker.type === 'player') {
+            
+            // These functions are very closely related to convertX and convertY
+            let newX = -marker.position.x * MapData.view.scale + mapCanvas.width * 0.5;
+            let newY = ((MapData.matrix.minY+MapData.matrix.maxY-marker.position.z) * MapData.view.scale - mapCanvas.height * 0.5);
+            if(Math.abs(MapData.view.x - newX) >= 10 || Math.abs(MapData.view.y - newY) >= 10) { 
+                MapData.view.x = newX;
+                MapData.view.y = newY;
+                MapData.view.dirty = true;
+            } 
+        }
+
+        if(marker.hidden || (marker.minZoom && MapData.view.scale < marker.minZoom) || (marker.maxZoom && MapData.view.scale > marker.maxZoom)) continue;
         if(markerX > mapCanvas.width + Config.viewCullMargin || markerX < -Config.viewCullMargin || markerY > mapCanvas.height + Config.viewCullMargin || markerY < -Config.viewCullMargin) continue; // View Culling
         switch(marker.type){
             case 'player':

legend.js

@@ -256,7 +256,20 @@ let settingEntries = [
                 func: state =>{
                     MapData.layers.player = state;
                     MapData.view.dynDirty = true;
+                },
+                children: [
+                    {
+                        label: 'Follow Player',
+                        tooltip: 'Keep View centered on player',
+                        id: 'toggle_gps',
+                        saveState: true,
+                        state: true,
+                        func: state =>{
+                            MapData.layers.gps = state;
+                            MapData.view.dynDirty = true;
                         }
+                    }
+                ]
             },
             {
                 label: 'Train Cars',