Update v0.6.2; Player density update

The territrorial density is now displayed below each player's/bot's name, this can be toggled in the settings

build.js

@@ -59,14 +59,14 @@ replaceOne(/(0===(\w+)\?(\w+)\[\2\]\.length)-1:(\3\[\2\]\.length:1,)/g, "$1 - 2
 // Max size for custom maps: from 4096x4096 to 8192x8192
 // TODO: test this; it might cause issues with new boat mechanics?
 
-{ // Add Troop Density and Maximum Troops in side panel -- todo
+{ // Add Troop Density and Maximum Troops in side panel
 	const { groups: { valuesArray } } = replaceOne(/(,(?<labelsArray>\w+)\[\d\]="Interest",\2\[\d\]="Income",\2\[\d\]="Time"),(\w+=\w+-\w+\(\w+,100\),\((?<valuesArray>\w+)=new Array\(\2\.length\)\)\[0\]=\w+)/g,
 		'$1, $<labelsArray>.push("Max Troops", "Density"), $3'); // add labels
 	replaceOne(new RegExp(/(:(?<valueIndex>\w+)<7\?\w+\.\w+\.\w+\(valuesArray\[\2\]\)):(\w+\.\w+\(valuesArray\[7\]\))}/
 		.source.replace(/valuesArray/g, valuesArray), "g"),
 		'$1 : $<valueIndex> === 7 ? $3 '
 		+ `: $<valueIndex> === 8 ? utils.getMaxTroops(${dictionary.playerTerritories}, ${dictionary.playerId}) `
-		+ `: utils.getDensity(${dictionary.playerBalances}, ${dictionary.playerTerritories}, ${dictionary.playerId}) }`);
+		+ `: utils.getDensity(${dictionary.playerId}) }`);
 	// increase the size of the side panel by 25% to make the text easier to read
 	// match this.w = Math.floor((o ? .1646 : .126) * cZ),
 	replaceOne(/(this\.\w+=Math\.floor\(\(\w+\?\.1646:\.126\))\*(\w+\),)/g, "$1 * 1.25 * $2");
@@ -158,6 +158,15 @@ replaceOne(new RegExp(`,${dictionary.playerBalances}=new Uint32Array\\(\\w+\\),`
 	+ ` else { playerList.hoveringOverButton === true && (playerList.hoveringOverButton = false, ${drawFunction}(), $<setRepaintNeeded>); } $4`);
 }
 
+{ // Display density of other players
+	// Applies when the "Reverse Name/Balance" setting is off
+	const { groups: { settingsSwitchNameAndBalance } } = replaceOne(/(,(?<settingsSwitchNameAndBalance>\w+\.\w+\.\w+)\?(?<nameDrawingFunction>\w+)\(\w+,\w+,(?<x>\w+),(?<y>\w+)\+\.78\*(?<fontSize>\w+),(?<canvas>\w+)\)):(\7\.fillText\(\w+\.\w+\.\w+\(\w+\[(\w+)\]\),\4,\5\+\.78\*\6\))\)\)/g,
+	`$1 : ($8, settings.showPlayerDensity && $<canvas>.fillText(utils.getDensity($9), $<x>, $<y> + $<fontSize> * 1.5)) ))`);
+	// Applies when the "Reverse Name/Balance" setting is on (default)
+	replaceOne(/(function \w+\((\w+),(?<fontSize>\w+),(?<x>\w+),(?<y>\w+),(?<canvas>\w+)\){\6\.fillText\((?<playerNames>\w+)\[\2\],\4,\5\)),(\2<(?<gHumans>\w+)&&2!==(?<playerStates>\w+)\[)/g,
+	`$1, ${settingsSwitchNameAndBalance} && settings.showPlayerDensity && $<canvas>.fillText(utils.getDensity($2), $<x>, $<y> + $<fontSize>), $8`);
+}
+
 // Disable built-in Territorial.io error reporting
 replaceOne(/window\.addEventListener\("error",function (\w+)\((\w+)\){/g,
 	'$& window.removeEventListener("error", $1); return alert("Error:\\n" + $2.filename + " " + $2.lineno + " " + $2.colno + " " + $2.message);');

static/fx_core.js

@@ -1,5 +1,5 @@
-const fx_version = '0.6.1.9'; // FX Client Version
-const fx_update = 'Mar 7'; // FX Client Last Updated
+const fx_version = '0.6.2'; // FX Client Version
+const fx_update = 'Mar 8'; // FX Client Last Updated
 
 if (localStorage.getItem("fx_winCount") == undefined || localStorage.getItem("fx_winCount") == null) {
     var wins_counter = 0;
@@ -95,6 +95,7 @@ var settings = {
     "useFullscreenMode": false,
     "hideAllLinks": false,
     "realisticNames": false,
+    "showPlayerDensity": true,
     "densityDisplayStyle": "percentage",
     //"customMapFileBtn": true
     "customBackgroundUrl": "",
@@ -113,6 +114,7 @@ var settingsManager = new (function() {
         realisticNames: document.getElementById("settings_realisticnames"),
         displayWinCounter: document.getElementById("settings_displaywincounter"),
         useFullscreenMode: document.getElementById("settings_usefullscreenmode"),
+        showPlayerDensity: document.getElementById("settings_showPlayerDensity"),
         //customMapFileBtn: document.getElementById("settings_custommapfileinput")
     };
     this.save = function() {
@@ -293,12 +295,17 @@ function displayDonationsHistory(playerID, playerNames = getVar("playerNames"),
 
 var utils = new (function() {
     this.getMaxTroops = function(playerTerritories, playerID) { return (playerTerritories[playerID]*150).toString(); };
-    this.getDensity = function(playerBalances, playerTerritories, playerID) {
+    this.getDensity = function(playerID, playerBalances = getVar("playerBalances"), playerTerritories = getVar("playerTerritories")) {
         if (settings.densityDisplayStyle === "percentage") return (((playerBalances[playerID] / ((playerTerritories[playerID] === 0 ? 1 : playerTerritories[playerID]) * 150)) * 100).toFixed(1) + "%");
         else return (playerBalances[playerID] / (playerTerritories[playerID] === 0 ? 1 : playerTerritories[playerID])).toFixed(1);
     };
     this.isPointInRectangle = function(x, y, rectangleStartX, rectangleStartY, width, height) {
         return x >= rectangleStartX && x <= rectangleStartX + width && y >= rectangleStartY && y <= rectangleStartY + height;
+    };
+    /** @param {CanvasRenderingContext2D} canvas @param {string} text */
+    this.fillTextMultiline = function(canvas, text, x, y, maxWidth) {
+        const lineHeight = parseInt(canvas.font.split(" ").find(part => part.endsWith("px")).slice(0, -2));
+        text.split("\n").forEach((line, index) => canvas.fillText(line, x, y + index * lineHeight, maxWidth));
     }
 });
 

static/index.html

@@ -83,6 +83,10 @@
                 Realistic Bot Names
                 <input type="checkbox" id="settings_realisticnames"><span class="checkmark"></span>
             </label><br>
+            <label for="settings_showPlayerDensity" class="checkbox">
+                Show player density
+                <input type="checkbox" id="settings_showPlayerDensity"><span class="checkmark"></span>
+            </label><br>
             <label title="Controls how the territorial density value should be rendered">
                 Density value display style: <select id="settings_densityDisplayStyle">
                     <option value="percentage">Percentage</option>