Add derail state & speed to map

Add legend toggle for non-player trains.
v0.6.2 > v0.6.3

index.html

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

index.js

@@ -527,6 +527,7 @@ function redrawDynamics(){
                 break;
             case 'car':
                 if(!(MapData.layers.dynamic && MapData.layers.cars)) break;
+                if(!MapData.layers.otherCars && !marker.isPlayer) break;
                 let scale = MapData.view.pixelRatio * MapData.view.scale;
                 let limitScaleRatio = (MapData.view.pixelRatio * Math.max(MapData.view.scale, 3)) / scale;
                 let width = marker.width * scale;
@@ -544,14 +545,17 @@ function redrawDynamics(){
                 dynctx.moveTo(0.5 * width, 0);
                 dynctx.arc(0.5 * width, 0.5 * length, 15, -0.5*Math.PI, 1.5*Math.PI);
                 dynctx.resetTransform();
-                dynctx.strokeStyle = '#fff';
+                dynctx.strokeStyle = marker.derailed ? '#f83' : '#fff';
                 dynctx.lineWidth = 0.75 * scale * limitScaleRatio;
                 dynctx.miterLimit = 1.5;
                 dynctx.stroke();
 
-                dynctx.fillStyle = marker.isLoco ? '#e79830aa' : '#559bd4aa';
+                if(marker.derailed)
+                    dynctx.fillStyle = marker.isLoco ? '#db4f18aa' : '#9e54d3aa';
+                else
+                    dynctx.fillStyle = marker.isLoco ? '#e79830aa' : '#559bd4aa';
                 dynctx.fill();
-                dynctx.strokeStyle = '#000';
+                dynctx.strokeStyle = marker.derailed ? '#410' : '#000';
                 dynctx.lineWidth = 0.3 * scale * limitScaleRatio;
                 dynctx.stroke();
                 if(!marker.tooltipHitzone){

js/mapdata.js

@@ -734,12 +734,15 @@ export function connectPlayerLocation(address, status){
                         y: car.y,
                         z: car.z
                     },
-                    length: car.length,
+                    length: car.length - 0.5,
                     width: 2.0,
                     rotation: car.rotation,
                     guid: car.carGuid,
                     isLoco: car.isLoco,
-                    tooltip: `<h1>${car.id}</h1>Type: ${car.name}\nLength: ${car.length.toFixed(1)}m`,
+                    tooltip: `<h1>${car.id}</h1>Type: ${car.name}\nLength: ${car.length.toFixed(1)}m${car.speed >= 0.1 ? `\nSpeed: ${(car.speed * 3.6).toFixed(1)} km/h` : '' }${car.derailed ? '\nDerailed!' : ''}`,
+                    derailed: car.derailed,
+                    isPlayer: car.isPlayer,
+                    isActive: car.isActive,
                 });
             }
             dynamicMarkers.push(playerMarker);

legend.js

@@ -259,7 +259,7 @@ let settingEntries = [
                 }
             },
             {
-                label: 'Cars',
+                label: 'Train Cars',
                 id: 'toggle_cars',
                 saveState: true,
                 state: true,
@@ -267,6 +267,19 @@ let settingEntries = [
                     MapData.layers.cars = state;
                     MapData.view.dynDirty = true;
                 },
+                children:[
+                    {
+                        label: 'Non-Player Trains',
+                        tooltip: 'Other trains with active locomotives',
+                        id: 'toggle_otherCars',
+                        saveState: true,
+                        state: true,
+                        func: state =>{
+                            MapData.layers.otherCars = state;
+                            MapData.view.dynDirty = true;
+                        },
+                    }
+                ]
             },
         ]
     },