feat: add dynamic blip CSS

Blip images for use in HTML is dynamically created in the generateBlipShit function in "markers.js". Since there's a load of blips, I felt dynamically creating them would be better than sitting down for two hours and manually putting them in. It doesn't take into account the other marker types (yet).

Author: TGRHavoc

index.php

@@ -88,6 +88,8 @@
 	var _MAP_tileURL = "<?php echo $config->mapTileUrl; ?>";
 	var _MAP_iconURL = "<?php echo $config->mapIconUrl; ?>";
 
+	var _MAP_currentUri = "<?php echo $_SERVER["REQUEST_URI"]; ?>";
+
 	// Sets whether it should showSets whether it should show Atlas map (WARNING: REQUIRES "atlas" TILE DIRECTORY)
 	var _MAP_atlasMap = <?php echo json_encode($config->atlasEnabled); ?>;
 

js/src/markers.js

@@ -219,8 +219,19 @@ var types = {
     DollarSignSquared : {id: 434}
 };
 
+var blipCss = `.blip {
+    background: url("${_MAP_currentUri}${_MAP_iconURL}blips_texturesheet.png");
+    background-size: ${1024/2}px ${1024/2}px;
+    display: inline-block;
+    width: ${customImageWidth}px;
+    height: ${customImageHeight}px;
+}`;
 function generateBlipShit(){
     var currentX = 0, currentY = 0, currentId = 0;
+
+    var previousLeft = 0, previousTop = 0;
+    var linePadding = 0;
+
     for(var blipName in types){
         var blip = types[blipName];
 
@@ -248,7 +259,19 @@ function generateBlipShit(){
             scaledSize: new google.maps.Size( 1024/2,1024/2 ),
             origin: new google.maps.Point( customImageWidth * currentX , customImageHeight * currentY ),
         };
+
+        // CSS GENERATOR FOR BLIP ICONS IN HTML
+        // Just add the class "blip blip-<NAME>" to the element for blip icons
+        // e.g. <span class="blip blip-Standard"> for a Standard blip
+        var left = (currentX * customImageWidth) + linePadding; // 0 = padding between images
+        var top = (currentY * customImageHeight) + linePadding; // 0 = padding
+
+        // For styling spans and shit
+        blipCss += `.blip-${blipName} { background-position: -${left}px -${top}px }
+`;
     }
+
+    $("head").append(`<style>${blipCss}</style>`);
 }
 
-generateBlipShit();
+setTimeout(generateBlipShit, 50);

js/src/socket.js

@@ -301,9 +301,6 @@ function getPlayerInfoHtml(plr) {
 
 function doPlayerUpdate(players) {
 
-    //Quickly sort the names, alphabetical order
-    players.sort();
-
     if (_SETTINGS_debug) {
         console.log(players);
     }

utils/minifier.php

@@ -114,6 +114,4 @@ public static function printLastJs($debug){
     }
 }
 
-
-
 ?>