Add web-side of player tracking

config.js

@@ -91,4 +91,5 @@ export const spriteBounds = {
     service_repair: new SpriteBounds(20,120,20,20),
     service_diesel: new SpriteBounds(40,120,20,20),
     service_charger: new SpriteBounds(60,120,20,20),
+    player: new SpriteBounds(20,0,20,20),
 }

index.js

@@ -23,6 +23,7 @@ document.addEventListener('DOMContentLoaded', async () => {
     await loadShopData('shop_items.json');
     await loadTrackData('trackdata_dv.json');
     await loadPoiData('poi_dv.json');
+    MapData.markers.push(MapData.playerMarker);
     MapData.sortMarkers();
 
     Utils.generateGradeArrows();
@@ -300,7 +301,7 @@ function redrawMap(){
     for(const marker of MapData.markers){
         curSprite = null;
         marker.visible = false;
-        if((marker.minZoom && MapData.view.scale < marker.minZoom) || (marker.maxZoom && MapData.view.scale > marker.maxZoom)) continue;
+        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);
         if(markerX > mapCanvas.width + Config.viewCullMargin || markerX < -Config.viewCullMargin || markerY > mapCanvas.height + Config.viewCullMargin || markerY < -Config.viewCullMargin) continue; // View Culling
@@ -454,6 +455,29 @@ function redrawMap(){
                 mapctx.fill();
                 mapctx.globalAlpha = 1.0;
                 break;
+            case 'player':
+                if(!(MapData.layers.poi)) break;
+                marker.visible = true;
+                curSprite = Config.spriteBounds.player;
+                spriteSize = 45;
+                
+                mapctx.translate(markerX, markerY);
+                mapctx.rotate(marker.rotation);
+                mapctx.translate(-0.5*spriteSize * MapData.view.pixelRatio, -0.5*spriteSize * MapData.view.pixelRatio);
+                mapctx.drawImage(
+                    mapSprites,
+                    curSprite.x,
+                    curSprite.y,
+                    curSprite.width,
+                    curSprite.height,
+                    0,
+                    0,
+                    spriteSize * MapData.view.pixelRatio,
+                    spriteSize * MapData.view.pixelRatio
+                );
+                mapctx.resetTransform();
+                curSprite = null;
+                break;
             default:
                 if(!MapData.layers.poi) break;
                 marker.visible = true;

js/mapdata.js

@@ -15,6 +15,17 @@ let uniqueTrackNames = {};
 
 export let testPoint = {x:0,y:0};
 
+let playerLocation = null;
+export let playerMarker = {
+    type: 'player',
+    name: 'Player',
+    position: {x:8192, y:200, z:8192},
+    rotation: 0.0,
+    minZoom: 0.0,
+    hidden: true,
+};
+let locationUpdateRate = 500;
+
 export let Shops = {
     Common:[]
 }
@@ -93,6 +104,8 @@ export function sortTracks(){
 
 export function sortMarkers(){
     markers.sort((a,b) => {
+        if(a.type == 'player') return 1;
+        if(b.type == 'player') return -1;
         if(a.type == b.type){
             switch(a.type){
                 case 'speed':
@@ -635,3 +648,59 @@ export function setTrackColorMode(mode){
     }
     view.dirty = true;
 }
+
+export function setLocationUpdateRate(rate){
+    locationUpdateRate = rate;
+}
+
+export function connectPlayerLocation(address, status){
+    if(!address.startsWith('http://')){
+        address.replaceAll(/.*:\/\//g, '');
+        address = 'http://' + address;
+    }
+    address += '/location';
+    console.log(`Connecting to game at ${address}`);
+    let started = false;
+    const endConnect = () => {
+        playerLocation = null;
+        status.value = 'Connect';
+        playerMarker.hidden = true;
+        view.dirty = true;
+    }
+    const pingLocation = async () => {
+        if(playerLocation == null && started){
+            endConnect();
+            return;
+        }
+        status.value = 'Disconnect...';
+        try {
+            const fetchRequest = await fetch(new Request(address), {signal: AbortSignal.timeout(5000)});
+            if(!fetchRequest.ok || (playerLocation == null && started)){
+                endConnect();
+                return;
+            }
+            status.value = 'Disconnect   ';
+            playerLocation = await (fetchRequest).json();
+            playerMarker.position = {
+                x: playerLocation.X,
+                y: playerLocation.Y,
+                z: playerLocation.Z,
+            };
+            playerMarker.rotation = playerLocation.Rotation;
+            playerMarker.tooltip = `<h1>Player</h1>X: ${playerMarker.position.x.toFixed(2)}\nY: ${playerMarker.position.y.toFixed(2)}\nZ: ${playerMarker.position.z.toFixed(2)}\nBearing ${(playerMarker.rotation * (180/Math.PI)).toFixed(1)} (${Utils.angleToCardinalDirection(playerMarker.rotation)})`;
+            playerMarker.hidden = false;
+            started = true;
+            view.dirty = true;
+            setTimeout(pingLocation, locationUpdateRate);
+        }catch(e){
+            endConnect();
+            console.log(e);
+        }
+    }
+    pingLocation();
+}
+
+export function disconnectPlayerLocation(){
+    console.log('Disconnecting');
+    playerLocation = null;
+}

legend.js

@@ -162,6 +162,51 @@ let settingEntries = [
                 }
             }
         }
+    },
+    {
+        label: '<hr><div class="quiet">Community Map Location Mod</div>',
+        id: 'header_cmlm',
+    },
+    {
+        label: 'Location Host',
+        id: 'field_locationHost',
+        state: 'localhost:9090',
+        button: 'Wait',
+        func: state =>{
+            let button = document.getElementById('field_locationHost').nextSibling;
+            if(button.value.startsWith('Connect')){
+                MapData.connectPlayerLocation(state, button);
+            }else if(button.value.startsWith('Disconnect')){
+                button.value = 'Disconnect';
+                MapData.disconnectPlayerLocation();
+            }else if(!button.value.startsWith('Fetch')){
+                button.value = 'Connect';
+                MapData.disconnectPlayerLocation();
+            }else{
+                MapData.disconnectPlayerLocation();
+            }
+        }
+    },
+    {
+        label: 'Location Update Rate (seconds)',
+        id: 'dropdown_locationFrequency',
+        tooltip: 'Lower update intervals may cause poor performance',
+        state: '0.5',
+        options: [
+            '0.05',
+            '0.1',
+            '0.2',
+            '0.25',
+            '0.5',
+            '1',
+            '2',
+            '5',
+            '10',
+            '30',
+        ],
+        func: state =>{
+            MapData.setLocationUpdateRate(Number(state) * 1000);
+        }
     }
 ];
 
@@ -194,8 +239,8 @@ function addSettingEntry(thisSetting, parent, indent=0){
     thisSetting.labelElement = document.createElement('label');
     thisSetting.divContainer.appendChild(thisSetting.labelElement);
 
-    let settingType = thisSetting.id.split('_')[0];
+    thisSetting.settingType = thisSetting.id.split('_')[0];
-    switch(settingType){
+    switch(thisSetting.settingType){
         case 'toggle':
             thisSetting.inputElement = document.createElement('input');
             thisSetting.inputElement.type = 'checkbox';
@@ -244,6 +289,23 @@ function addSettingEntry(thisSetting, parent, indent=0){
                 });
             }
             break;
+        case 'field':
+            thisSetting.inputElement = document.createElement('input');
+            thisSetting.inputElement.type = 'text';
+            thisSetting.inputElement.value = thisSetting.state;
+            if(thisSetting.button){
+                thisSetting.buttonElement = document.createElement('input');
+                thisSetting.buttonElement.type = 'button';
+                thisSetting.buttonElement.value = thisSetting.button;
+                if(thisSetting.func){
+                    thisSetting.buttonElement.addEventListener('click', e => {
+                        thisSetting.func(thisSetting.inputElement.value);
+                    });
+                }
+            }
+            break;
+        case 'header':
+            break;
         default:
             thisSetting.divContainer.remove();
             return;
@@ -251,10 +313,18 @@ function addSettingEntry(thisSetting, parent, indent=0){
     parent.appendChild(thisSetting.divContainer);
     thisSetting.labelElement.innerHTML = thisSetting.label;
     thisSetting.labelElement.htmlFor = thisSetting.id;
-    thisSetting.inputElement.id = thisSetting.id;
+    if(thisSetting.tooltip) thisSetting.labelElement.title = thisSetting.tooltip;
 
-    thisSetting.inputElement.style.margin = `0 0.5em 0 ${indent}em`;
+    if(thisSetting.settingType == 'field'){
-    thisSetting.divContainer.prepend(thisSetting.inputElement);
+        thisSetting.buttonElement.style.margin = `0 0.5em 0 ${indent}em`;
+        thisSetting.buttonElement.style.padding = `0 0.2em`;
+        thisSetting.divContainer.prepend(thisSetting.buttonElement);
+    }
+    if(thisSetting.inputElement){
+        thisSetting.inputElement.id = thisSetting.id;
+        thisSetting.inputElement.style.margin = `0 0.5em 0 ${indent}em`;
+        thisSetting.divContainer.prepend(thisSetting.inputElement);
+    }
 
     if(thisSetting.func){
         thisSetting.func(thisSetting.state);
@@ -304,10 +374,11 @@ function populateKey(){
     addKeyEntry('landmark', 'Landmark');
     addKeyEntry('garage', 'Garage');
     addKeyEntry('demonstrator', 'Demonstrator Spawn');
+    addKeyEntry('player', 'Player');
     //Add empty entries to make entries align right in the columns.
-    for(let i=0; i<3; i++){
+    /*for(let i=0; i<1; i++){
         addKeyEntry();
-    }
+    }*/
 }
 
 /**

mapSprites.svg

@@ -12,7 +12,8 @@
    xmlns="http://www.w3.org/2000/svg"
    xmlns:svg="http://www.w3.org/2000/svg"><defs
      id="defs1" /><g
-     id="g33"><rect
+     id="g33"
+     style="display:inline"><rect
        style="fill:#bb3f3f;stroke:#ebebeb;stroke-width:0.9"
        id="rect32"
        width="9.9940004"
@@ -30,7 +31,8 @@
        ry="0.98900002"
        transform="rotate(22.53)"
        rx="0.98900002" /></g><g
-     id="g34"><circle
+     id="g34"
+     style="display:inline"><circle
        style="opacity:1;fill:#702012;fill-opacity:1;stroke:#e73819;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
        id="path33"
        cx="10"
@@ -163,14 +165,15 @@
          style="display:inline;opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1.24675;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
          d="M 0,-3.4155845 1.3234947,0.4155845 0,-0.44155834 -1.3234947,0.4155845 Z"
          id="path60" /></g></g><g
-     id="layer1"><circle
+     id="layer1"
+     style="display:inline"><circle
        style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1.99998;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
        id="path54"
        cx="10"
        cy="10"
        r="10" /><path
-       style="opacity:1;fill:#fff;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
-       d="m8.92 1.99q3.29 0 4.68 1.13 1.39 1.1 1.39 2.74 0 2.06-1.78 3.36-.67.5-1.63.91l-.38.17q-.17.07-.34 1.01-.14.91-.14 1.32-.12.12-.7.29-.55.14-.94.14-.36 0-.55-.05-.26-.43-.26-1.87 0-1.44.12-1.85 3.79-.91 3.79-3.07 0-1.87-3.46-1.87-1.22 0-1.78.24-.14-.24-.14-1.01 0-.77.22-1.3.65-.29 1.9-.29zm-.7 15.5q-.46-.48-.46-1.15 0-.67.46-1.13.48-.48 1.15-.48.67 0 1.13.48.48.46.48 1.13 0 .67-.48 1.15-.46.46-1.13.46-.67 0-1.15-.46z"
+       d="m 8.92,1.99 q 3.29,0 4.68,1.13 1.39,1.1 1.39,2.74 0,2.06 -1.78,3.36 -0.67,0.5 -1.63,0.91 L 11.2,10.3 q -0.17,0.07 -0.34,1.01 -0.14,0.91 -0.14,1.32 -0.12,0.12 -0.7,0.29 -0.55,0.14 -0.94,0.14 -0.36,0 -0.55,-0.05 Q 8.27,12.58 8.27,11.14 8.27,9.7 8.39,9.29 12.18,8.38 12.18,6.22 12.18,4.35 8.72,4.35 7.5,4.35 6.94,4.59 6.8,4.35 6.8,3.58 6.8,2.81 7.02,2.28 7.67,1.99 8.92,1.99 Z m -0.7,15.5 q -0.46,-0.48 -0.46,-1.15 0,-0.67 0.46,-1.13 0.48,-0.48 1.15,-0.48 0.67,0 1.13,0.48 0.48,0.46 0.48,1.13 0,0.67 -0.48,1.15 -0.46,0.46 -1.13,0.46 -0.67,0 -1.15,-0.46 z"
        id="path55" /><circle
        style="opacity:1;fill:#c4693e;fill-opacity:1;stroke:none;stroke-width:1.99998;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
        id="circle1"
@@ -190,7 +193,7 @@
        xlink:href="#path1"
        id="use2"
        transform="translate(20)" /><circle
-       style="opacity:1;fill:#b44;fill-opacity:1;stroke:none;stroke-width:1.99998;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       style="opacity:1;fill:#bb4444;fill-opacity:1;stroke:none;stroke-width:1.99998;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
        id="circle3"
        cx="50"
        cy="90"
@@ -279,4 +282,12 @@
        r="10" /><path
        id="path13"
        style="fill:#ffffff;fill-opacity:1;stroke-width:2;stroke-linecap:round;stroke-linejoin:round"
-       d="m 115.6875,105.5 -0.125,2.5625 -2.5625,0.0625 -0.875,1.1875 0.875,-0.0625 -2.07583,2.73928 0.45267,-2.13259 -1.08081,0.0183 0.37814,-1.37814 -3.61167,0.19064 L 107,106.5 l 0.4375,0.0625 0.125,-0.9375 -5.25,0.375 0.8125,6.5625 12.6875,-0.4375 -0.125,1.5625 h 2.125 L 117.25,111.5 l 0.4375,-3.5625 h -0.875 l 0.25,-2.25 z m -9.48828,1.14062 0.0879,2.1211 -2.29883,0.13281 -0.4414,-1.94531 z m 8.17578,5.98438 c -0.51777,0 -0.9375,0.4757 -0.9375,1.0625 0,0.5868 0.41973,1.0625 0.9375,1.0625 0.51777,0 0.9375,-0.4757 0.9375,-1.0625 0,-0.5868 -0.41973,-1.0625 -0.9375,-1.0625 z m -2.125,0.0625 c -0.5868,0 -1.0625,0.51767 -1.0625,1.15625 0,0.63858 0.4757,1.15625 1.0625,1.15625 0.5868,0 1.0625,-0.51767 1.0625,-1.15625 0,-0.63858 -0.4757,-1.15625 -1.0625,-1.15625 z m -2.65625,0.125 c -0.63858,0 -1.15625,0.51767 -1.15625,1.15625 0,0.63858 0.51767,1.15625 1.15625,1.15625 0.63858,0 1.15625,-0.51767 1.15625,-1.15625 0,-0.63858 -0.51767,-1.15625 -1.15625,-1.15625 z m -2.625,0.25 c -0.63858,0 -1.15625,0.48969 -1.15625,1.09375 0,0.60406 0.51767,1.09375 1.15625,1.09375 0.63858,0 1.15625,-0.48969 1.15625,-1.09375 0,-0.60406 -0.51767,-1.09375 -1.15625,-1.09375 z m 9.125,0.75 c -0.25888,0 -0.46875,0.22386 -0.46875,0.5 0,0.27614 0.20987,0.5 0.46875,0.5 0.25888,0 0.46875,-0.22386 0.46875,-0.5 0,-0.27614 -0.20987,-0.5 -0.46875,-0.5 z m -11.9375,0.5 c -0.25888,0 -0.46875,0.22386 -0.46875,0.5 0,0.27614 0.20987,0.5 0.46875,0.5 0.25888,0 0.46875,-0.22386 0.46875,-0.5 0,-0.27614 -0.20987,-0.5 -0.46875,-0.5 z" /></g></svg>
+       d="m 115.6875,105.5 -0.125,2.5625 -2.5625,0.0625 -0.875,1.1875 0.875,-0.0625 -2.07583,2.73928 0.45267,-2.13259 -1.08081,0.0183 0.37814,-1.37814 -3.61167,0.19064 L 107,106.5 l 0.4375,0.0625 0.125,-0.9375 -5.25,0.375 0.8125,6.5625 12.6875,-0.4375 -0.125,1.5625 h 2.125 L 117.25,111.5 l 0.4375,-3.5625 h -0.875 l 0.25,-2.25 z m -9.48828,1.14062 0.0879,2.1211 -2.29883,0.13281 -0.4414,-1.94531 z m 8.17578,5.98438 c -0.51777,0 -0.9375,0.4757 -0.9375,1.0625 0,0.5868 0.41973,1.0625 0.9375,1.0625 0.51777,0 0.9375,-0.4757 0.9375,-1.0625 0,-0.5868 -0.41973,-1.0625 -0.9375,-1.0625 z m -2.125,0.0625 c -0.5868,0 -1.0625,0.51767 -1.0625,1.15625 0,0.63858 0.4757,1.15625 1.0625,1.15625 0.5868,0 1.0625,-0.51767 1.0625,-1.15625 0,-0.63858 -0.4757,-1.15625 -1.0625,-1.15625 z m -2.65625,0.125 c -0.63858,0 -1.15625,0.51767 -1.15625,1.15625 0,0.63858 0.51767,1.15625 1.15625,1.15625 0.63858,0 1.15625,-0.51767 1.15625,-1.15625 0,-0.63858 -0.51767,-1.15625 -1.15625,-1.15625 z m -2.625,0.25 c -0.63858,0 -1.15625,0.48969 -1.15625,1.09375 0,0.60406 0.51767,1.09375 1.15625,1.09375 0.63858,0 1.15625,-0.48969 1.15625,-1.09375 0,-0.60406 -0.51767,-1.09375 -1.15625,-1.09375 z m 9.125,0.75 c -0.25888,0 -0.46875,0.22386 -0.46875,0.5 0,0.27614 0.20987,0.5 0.46875,0.5 0.25888,0 0.46875,-0.22386 0.46875,-0.5 0,-0.27614 -0.20987,-0.5 -0.46875,-0.5 z m -11.9375,0.5 c -0.25888,0 -0.46875,0.22386 -0.46875,0.5 0,0.27614 0.20987,0.5 0.46875,0.5 0.25888,0 0.46875,-0.22386 0.46875,-0.5 0,-0.27614 -0.20987,-0.5 -0.46875,-0.5 z" /><path
+       id="circle14"
+       style="opacity:1;fill:#7bb5ff;fill-opacity:1;stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+       d="M 30,1.2539062 C 27.479868,3.8850658 24.073484,6.0853211 23.789062,10 23.788759,13.430332 26.569668,16.211241 30,16.210938 33.430332,16.211241 36.211241,13.430332 36.210938,10 35.999554,6.1494588 32.53281,3.7856267 30,1.2539062 Z" /><circle
+       style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       id="circle15"
+       cx="30"
+       cy="10"
+       r="4.7519341" /></g></svg>

style.css

@@ -122,9 +122,12 @@ a:visited{
 
 #settingsPanel{
     user-select: none;
-    input, label{
+    input:not([type=text]), label{
         cursor: pointer;
     }
+    input[type=text], div{
+        cursor:unset;
+    }
 }
 
 #stats{