2929 </portal >
3030
3131 <template >
32- <div id =" map" class =" w-map h-max -mt-12 max-w-full" ></div >
32+ <div class =" relative" >
33+ <div id =" map" class =" w-map h-max -mt-12 max-w-full relative" ></div >
34+ <pre class =" bg-opacity-70 bg-white coordinate-attr absolute bottom-0 left-0 cursor-pointer z-1k" @click =" copyText($event, clickedCoords)" v-if =" clickedCoords" >{{ clickedCoords }}</pre >
35+ </div >
3336 </template >
3437
3538 </div >
@@ -55,6 +58,16 @@ import custom_icons from "../../data/vehicles.json";
5558 if (global ) global .include (MarkerMixin);
5659})(L .Marker );
5760
61+ // Some functions for debugging
62+ let printPlayerInfo = null ;
63+ window .debug = function (cid ) {
64+ printPlayerInfo = cid;
65+ };
66+ window .track = function (cid ) {
67+ window .location .hash = ' player_' + cid;
68+ window .location .reload ();
69+ };
70+
5871export default {
5972 layout: Layout,
6073 components: {
@@ -74,13 +87,44 @@ export default {
7487 connection: null ,
7588 isPaused: false ,
7689 trackedPlayer: window .location .hash .substr (1 ),
77- firstRefresh: true
90+ firstRefresh: true ,
91+ clickedCoords: ' '
7892 };
7993 },
8094 methods: {
95+ getBounds () {
96+ return {
97+ game: {
98+ bounds: {
99+ min: {x: - 2862.10546875 , y: 7616.0966796875 },
100+ max: {x: 4195.29248046875 , y: - 3579.89013671875 }
101+ }
102+ },
103+ map: {
104+ bounds: {
105+ min: {x: 85.546875 , y: - 59.62890625 },
106+ max: {x: 174.2109375 , y: - 200.24609375 }
107+ }
108+ }
109+ };
110+ },
81111 mapNumber (val , in_min , in_max , out_min , out_max ) {
82112 return (val - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
83113 },
114+ copyText (e , text ) {
115+ e .preventDefault ();
116+ const button = $ (e .target ).closest (' a' );
117+
118+ this .$copyText (text).then (function () {
119+ button .removeClass (' bg-blue-800' );
120+ button .addClass (' bg-green-600' );
121+
122+ setTimeout (function () {
123+ button .removeClass (' bg-green-600' );
124+ button .addClass (' bg-blue-800' );
125+ }, 500 );
126+ });
127+ },
84128 coords (coords ) {
85129 return {
86130 lat: coords .y ,
@@ -198,20 +242,7 @@ export default {
198242 this .map .dragging .enable ();
199243 }
200244
201- const conf = {
202- game: {
203- bounds: {
204- min: {x: - 2862.10546875 , y: 7616.0966796875 },
205- max: {x: 4195.29248046875 , y: - 3579.89013671875 }
206- }
207- },
208- map: {
209- bounds: {
210- min: {x: 85.546875 , y: - 59.62890625 },
211- max: {x: 174.2109375 , y: - 200.24609375 }
212- }
213- }
214- };
245+ const conf = this .getBounds ();
215246 const _this = this ;
216247 const convert = coords => {
217248 coords .x = _this .mapNumber (coords .x , conf .game .bounds .min .x , conf .game .bounds .max .x , conf .map .bounds .min .x , conf .map .bounds .max .x );
@@ -227,22 +258,19 @@ export default {
227258
228259 let vehicles = {};
229260 $ .each (data, function (index , player ) {
230- if (! (' character' in player) || ! player .character ) {
231- player .character = {
232- id: 0 ,
233- fullName: ' N/A'
234- };
235- }
236-
237261 if (' vehicle' in player && player .vehicle && player .vehicle .driving ) {
238- vehicles[player .vehicle .id ] = player .character . id === 0 ? ' Nobody' : player .character .fullName ;
262+ vehicles[player .vehicle .id ] = ! player .character ? ' Nobody' : player .character .fullName ;
239263 }
240264
241265 data[index] = player
242266 });
243267
244268 let validIds = [];
245269 $ .each (data, function (_ , player ) {
270+ if (! player .character ) {
271+ return ;
272+ }
273+
246274 const id = " player_" + player .character .id ,
247275 coords = convert (player .coords ),
248276 heading = _this .mapNumber (- player .heading , - 180 , 180 , 0 , 360 ) - 180 ,
@@ -253,6 +281,11 @@ export default {
253281 icon = _this .getIcon (player, isDriving, isPassenger, isInvisible),
254282 vehicle = _this .getVehicleType (player .vehicle );
255283
284+ if (printPlayerInfo && printPlayerInfo === player .character .id ) {
285+ printPlayerInfo = null ;
286+ console .info (' Player debug' , player);
287+ }
288+
256289 validIds .push (id);
257290
258291 if (id in markers) {
@@ -269,7 +302,9 @@ export default {
269302
270303 marker .addTo (_this .map );
271304
272- marker .bindPopup (' ' );
305+ marker .bindPopup (' ' , {
306+ autoPan: false
307+ });
273308
274309 markers[id] = marker;
275310 }
@@ -285,7 +320,7 @@ export default {
285320 markers[id].options .forceZIndex = 101 ;
286321 }
287322 if (isDriving) {
288- attributes .push (' driving (' + vehicle .type + ' )' );
323+ attributes .push (' driving (' + ( vehicle .type === ' car ' ? ' car/bike ' : vehicle . type ) + ' )' );
289324 markers[id].options .forceZIndex = 100 ;
290325 } else if (isPassenger) {
291326 attributes .push (' passenger of ' + (player .vehicle .id in vehicles ? vehicles[player .vehicle .id ] : ' Nobody' ));
@@ -298,7 +333,9 @@ export default {
298333 if (_this .trackedPlayer === id) {
299334 extra += ' <br><br><a href="#" class="track-cid" data-trackid="stop"">' + _this .t (' map.stop_track' ) + ' </a>' ;
300335
301- _this .map .setView (coords, _this .firstRefresh ? 6 : _this .map .getZoom ());
336+ _this .map .setView (coords, _this .firstRefresh ? 6 : _this .map .getZoom (), {
337+ duration: 0.1
338+ });
302339 } else {
303340 extra += ' <br><br><a href="#" class="track-cid" data-trackid="' + id + ' "">' + _this .t (' map.track' ) + ' </a>' ;
304341 }
@@ -325,6 +362,7 @@ export default {
325362 if (this .map ) {
326363 return ;
327364 }
365+ const _this = this ;
328366 const range = (coords , max ) => {
329367 if (coords .x < 0 || coords .y < 0 || coords .x > max || coords .y > max) {
330368 coords .z = 2 ;
@@ -387,16 +425,28 @@ export default {
387425 maxZoom: 7 ,
388426 maxBounds: L .latLngBounds (L .latLng (- 41 , 66 ), L .latLng (- 217 , 185 ))
389427 });
428+ this .map .attributionControl .addAttribution (' <a href="https://github.com/milan60" target="_blank">milan60</a>' );
390429
391430 L .tileLayer .gta ().addTo (this .map );
392431
393432 this .map .setView ([- 124 , 124 ], 3 );
394433
395434 this .map .on (' click' , function (e ) {
396- console .log (' map' , e .latlng );
435+ const conf = _this .getBounds ();
436+ let map = {
437+ x: e .latlng .lng ,
438+ y: e .latlng .lat ,
439+ };
440+ let game = {
441+ x: _this .mapNumber (e .latlng .lng , conf .map .bounds .min .x , conf .map .bounds .max .x , conf .game .bounds .min .x , conf .game .bounds .max .x ),
442+ y: _this .mapNumber (e .latlng .lat , conf .map .bounds .min .y , conf .map .bounds .max .y , conf .game .bounds .min .y , conf .game .bounds .max .y ),
443+ };
444+
445+ _this .clickedCoords = " [X=" + Math .round (game .x ) + " ,Y=" + Math .round (game .y ) + " ] / [X=" + map .x + " ,Y=" + map .y + " ]" ;
446+
447+ console .info (' Clicked coordinates' , map);
397448 });
398449
399- const _this = this ;
400450 $ (' #map' ).on (' click' , ' .track-cid' , function (e ) {
401451 e .preventDefault ();
402452
@@ -412,7 +462,12 @@ export default {
412462 }
413463 });
414464
415- $ (' #map' ).append (' <style>.leaflet-marker-icon {transform-origin: center center !important;}</style>' );
465+ const styles = [
466+ ' .leaflet-marker-icon {transform-origin: center center !important;}' ,
467+ ' .leaflet-grab {cursor: default;}' ,
468+ ' .coordinate-attr{font-size: 11px;padding: 0 5px;color:rgb(0, 120, 168);line-height:16.5px}' ,
469+ ];
470+ $ (' #map' ).append (' <style>' + styles .join (' ' ) + ' </style>' );
416471 }
417472 },
418473 mounted () {
0 commit comments