From 8cdd83a6ee21349005e7be0baef693128db9379f Mon Sep 17 00:00:00 2001
From: Pyro Nicampt <81565698+PyroNicampt@users.noreply.github.com>
Date: Wed, 11 Jun 2025 16:09:03 -0500
Subject: [PATCH] Add web-side of player tracking
---
config.js | 1 +
index.js | 26 ++++++++++++++-
js/mapdata.js | 69 ++++++++++++++++++++++++++++++++++++++++
legend.js | 85 +++++++++++++++++++++++++++++++++++++++++++++-----
mapSprites.svg | 25 ++++++++++-----
style.css | 5 ++-
6 files changed, 195 insertions(+), 16 deletions(-)
diff --git a/config.js b/config.js
index a0beadf..b0e6b85 100644
--- a/config.js
+++ b/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),
}
\ No newline at end of file
diff --git a/index.js b/index.js
index 820b0f5..b6be92e 100644
--- a/index.js
+++ b/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;
diff --git a/js/mapdata.js b/js/mapdata.js
index 8452f58..3c1805a 100644
--- a/js/mapdata.js
+++ b/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':
@@ -634,4 +647,60 @@ 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 = `Player
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;
}
\ No newline at end of file
diff --git a/legend.js b/legend.js
index 93d4fe8..a01067e 100644
--- a/legend.js
+++ b/legend.js
@@ -162,6 +162,51 @@ let settingEntries = [
}
}
}
+ },
+ {
+ label: '
Community Map Location Mod
',
+ 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];
- switch(settingType){
+ thisSetting.settingType = thisSetting.id.split('_')[0];
+ 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`;
- thisSetting.divContainer.prepend(thisSetting.inputElement);
+ if(thisSetting.settingType == 'field'){
+ 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();
- }
+ }*/
}
/**
diff --git a/mapSprites.svg b/mapSprites.svg
index ee1012c..ee3b8d4 100644
--- a/mapSprites.svg
+++ b/mapSprites.svg
@@ -12,7 +12,8 @@
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/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" />
diff --git a/style.css b/style.css
index d765e83..dbc6c88 100644
--- a/style.css
+++ b/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{