Update v0.6.2.1

Donation history viewer and player list UI improvements,
fixed a bug with the donation history viewer

build.js

@@ -35,6 +35,8 @@ let dictionary = {};
 	/\w+\.\w+\((\w+)\)\?\w+\.\w+\(\1\)\?(\w+)=(\w+\.\w+)\(13,\[\2\]\):\(\w+=\w+\.\w+\(\1\),\2=\3\(14,\[(?<playerNames>\w+)\[(\w+)\],(\w+\.\w+\.\w+\()(?<playerBalances>\w+)\[\5\]\),\6(?<playerTerritories>\w+)\[\5\]\),\2\]\),\w+=!0\):\2=/g,
 	// this one also broke in 1.91.3 /,\w+="Player: "\+(?<playerNames>\w+)\[\w+\],\w+=\(\w\+="   Balance: "\+\w+\.\w+\((?<playerBalances>\w+)\[\w+\]\)\)\+\("   Territory: "\+\w+\.\w+\((?<playerTerritories>\w+)\[\w+\]\)\)\+\("   Coords: "/g,
 	/\((?<uiOffset>\w+)=Math\.floor\(\(\w+\?\.0114:\.01296\)\*\w+\)\)/g,
+	/(function \w+\((\w+),(\w+),(\w+),(\w+),(\w+)\){\6\.fillText\((?<playerNames>\w+)\[\2\],\4,\5\)),(\2<(?<gHumans>\w+)&&2!==(?<playerStates>\w+)\[)/g,
+	/,\w+=512,(?<gLobbyMaxJoin>\w+)=\w+,(?<gIsSingleplayer>\w+)&&\(\1=\w+\.\w+\(\)\),\w+=\1-\w+,\w+=0,/g
 ].forEach(expression => {
 	result = expression.exec(script);
 	if (result === null) throw new Error("no match for ") + expression;
@@ -139,7 +141,7 @@ replaceOne(/(this\.\w+=function\((\w+),(\w+)\)\{)(\2===\w+&&\(\w+\.\w+\((\w+\.\w
 // Display donations for a player when clicking on them in the leaderboard
 // match , 0 !== dG[x]) && fq.hB(x, 800, false, 0),
 replaceOne(/,(0!==\w+\[(\w+)\]\)&&\w+\.\w+\(\2,800,!1,0\),)/g,
-	`, ${dictionary.gIsTeamGame} && displayDonationsHistory($2, ${dictionary.playerNames}, ${dictionary.gIsSingleplayer}), $1`);
+	`, ${dictionary.gIsTeamGame} && donationsTracker.displayHistory($2, ${dictionary.playerNames}, ${dictionary.gIsSingleplayer}), $1`);
 
 // Reset donation history when a new game is started
 replaceOne(new RegExp(`,${dictionary.playerBalances}=new Uint32Array\\(\\w+\\),`, "g"), "$& donationsTracker.reset(), ");

static/fx_core.js

@@ -1,5 +1,5 @@
-const fx_version = '0.6.2'; // FX Client Version
-const fx_update = 'Mar 8'; // FX Client Last Updated
+const fx_version = '0.6.2.1'; // FX Client Version
+const fx_update = 'Mar 10'; // FX Client Last Updated
 
 if (localStorage.getItem("fx_winCount") == undefined || localStorage.getItem("fx_winCount") == null) {
     var wins_counter = 0;
@@ -200,6 +200,7 @@ var WindowManager = new (function() {
         if (windows[windowName].isOpen === false) return;
         windows[windowName].isOpen = false;
         windows[windowName].element.style.display = "none";
+        if (windows[windowName].onClose !== undefined) windows[windowName].onClose();
     };
     this.closeAll = function() {
         Object.values(windows).forEach(function(windowObj) {
@@ -217,7 +218,8 @@ WindowManager.add({
     element: document.querySelector("#donationhistory"),
     beforeOpen: function(isSingleplayer) {
         document.getElementById("donationhistory_note").style.display = ((true || settings.showBotDonations || /*getVarByName("dt")*/ isSingleplayer) ? "none" : "block");
-    }
+    },
+    onClose: function() { donationsTracker.openedWindowPlayerID = null; }
 });
 WindowManager.add({
     name: "playerList",
@@ -236,11 +238,14 @@ const playerList = new (function () {
     document.getElementById("playerlist_content").addEventListener("click", event => {
         const playerId = event.target.closest("tr[data-player-id]")?.getAttribute("data-player-id");
         if (!playerId) return;
-        if (getVar("gIsTeamGame")) WindowManager.closeWindow("playerList"), displayDonationsHistory(playerId);
+        if (getVar("gIsTeamGame")) WindowManager.closeWindow("playerList"), donationsTracker.displayHistory(playerId);
     });
     this.display = function displayPlayerList(playerNames) {
-        let listContent = "";
-        for (let i = 0; i < playerNames.length; i++) {
+        const gHumans = getVar("gHumans");
+        const gLobbyMaxJoin = getVar("gLobbyMaxJoin");
+        let listContent = `<h3>Players (${gHumans})</h3>`;
+        for (let i = 0; i < gLobbyMaxJoin; i++) {
+            if (i === gHumans) listContent += `<h3>Bots (${gLobbyMaxJoin - gHumans})</h3>`;
             listContent += `<tr data-player-id="${i}"><td><span class="color-light-gray">${i}.</span> ${escapeHtml(playerNames[i])}</td></tr>`
         }
         document.getElementById("playerlist_content").innerHTML = listContent;
@@ -260,38 +265,50 @@ const playerList = new (function () {
     }
 });
 var donationsTracker = new (function(){
+    this.openedWindowPlayerID = null;
+    this.contentElement = document.querySelector("#donationhistory_content");
     this.donationHistory = Array(512);
     // fill the array with empty arrays with length of 3
     //for (var i = 0; i < 512; i++) this.donationHistory.push([]); // not needed as .reset is called on game start
-    // from inside of game:
-    // ((!gE[g].startsWith("[Bot] ") || settings.showBotDonations) && donationsTracker.logDonation(g,k,x))
+    this.getHistoryOf = function(playerID) {
+        return this.donationHistory[playerID].toReversed();
+    }
+    this.reset = function() { for (var i = 0; i < 512; i++) this.donationHistory[i] = []; };
     this.logDonation = function(senderID, receiverID, amount) {
         const donationInfo = [senderID, receiverID, amount];
         this.donationHistory[receiverID].push(donationInfo);
         this.donationHistory[senderID].push(donationInfo);
+        if (this.openedWindowPlayerID === senderID || this.openedWindowPlayerID === receiverID) {
+            const indexOfNewItem = this.donationHistory[this.openedWindowPlayerID === senderID ? senderID : receiverID].length;
+            this.contentElement.prepend(generateTableRowItem(donationInfo, indexOfNewItem, this.openedWindowPlayerID, true));
+        }
     };
-    this.getRecipientHistoryOf = function(playerID) {
-        return this.donationHistory[playerID];
-    };
-    this.reset = function() { for (var i = 0; i < 512; i++) this.donationHistory[i] = []; };
-});
-function displayDonationsHistory(playerID, playerNames = getVar("playerNames"), isSingleplayer = getVar("gIsSingleplayer")) {
-    var history = donationsTracker.getRecipientHistoryOf(playerID);
-    console.log("History for " + playerNames[playerID] + ":");
-    console.log(history);
-    document.querySelector("#donationhistory h1").innerHTML = "Donation history for " + escapeHtml(playerNames[playerID]);
-    var historyText = "";
-    history.reverse();
-    if (history.length > 0) history.forEach(function(historyItem, index) {
-        historyText += `<span class="color-light-gray">${(history.length - index)}.</span> `;
+    function generateTableRowItem(historyItem, index, playerID, isNew) {
+        const playerNames = getVar("playerNames");
+        const row = document.createElement("tr");
+        if (isNew) row.setAttribute("class", "new");
+        let content = `<td><span class="color-light-gray">${index}.</span> `;
         if (playerID === historyItem[1])
-            historyText += `Received <span class="color-green">${historyItem[2]}</span> resources from ${escapeHtml(playerNames[historyItem[0]])}<br>`;
-        else historyText += `Sent <span class="color-red">${historyItem[2]}</span> resources to ${escapeHtml(playerNames[historyItem[1]])}<br>`;
-    });
-    else historyText = "Nothing to display";
-    document.querySelector("#donationhistory p#donationhistory_text").innerHTML = historyText;
-    WindowManager.openWindow("donationHistory", isSingleplayer);
-}
+            content += `Received <span class="color-green">${historyItem[2]}</span> resources from ${escapeHtml(playerNames[historyItem[0]])}`;
+        else content += `Sent <span class="color-red">${historyItem[2]}</span> resources to ${escapeHtml(playerNames[historyItem[1]])}`;
+        content += "</td>";
+        row.innerHTML = content;
+        return row;
+    }
+    this.displayHistory = function displayDonationsHistory(playerID, playerNames = getVar("playerNames"), isSingleplayer = getVar("gIsSingleplayer")) {
+        var history = donationsTracker.getHistoryOf(playerID);
+        console.log("History for " + playerNames[playerID] + ":");
+        console.log(history);
+        document.querySelector("#donationhistory h1").innerHTML = "Donation history for " + escapeHtml(playerNames[playerID]);
+        this.contentElement.innerHTML = "";
+        if (history.length > 0) history.forEach((historyItem, index) => {
+            this.contentElement.appendChild(generateTableRowItem(historyItem, history.length - index, playerID));
+        });
+        else this.contentElement.innerText = "Nothing to display";
+        this.openedWindowPlayerID = playerID;
+        WindowManager.openWindow("donationHistory", isSingleplayer);
+    }
+});
 
 var utils = new (function() {
     this.getMaxTroops = function(playerTerritories, playerID) { return (playerTerritories[playerID]*150).toString(); };

static/index.html

@@ -117,7 +117,7 @@
     <div class="window scrollable selectable" id="donationhistory" style="display:none">
         <h1>Donation history for </h1>
         <p id="donationhistory_note">Note: donations from bots are not shown here</p>
-        <p id="donationhistory_text"></p>
+        <table><tbody id="donationhistory_content"></tbody></table>
     </div>
     <script src="variables.js?buildTimestamp"></script>
     <script src="fx_core.js?buildTimestamp"></script>

static/main.css

@@ -16,7 +16,7 @@
 	width           : 90%;
 	top             : 0;
 	color           : white;
-	font-family     : 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+	font-family     : 'Franklin Gothic Medium', 'Trebuchet MS', Arial, sans-serif;
 	margin          : auto;
 	margin-top      : 20px;
 	right           : 0;
@@ -62,6 +62,15 @@ h1 {
 	margin-block-end  : 0.5em;
 	transition        : 0.2s;
 }
+#playerlist h1 {
+	margin-block-start: 0.3em;
+	margin-block-end  : 0.3em;
+}
+h3 {
+	font-weight       : normal;
+	margin-block-start: 0.6em;
+	margin-block-end  : 0.6em;
+}
 
 canvas,
 input,
@@ -86,6 +95,19 @@ td {
 #playerlist_content.clickable td { cursor: pointer; }
 #playerlist_content.clickable td:hover { background-color: #00ff0040; }
 
+tr.new {
+    animation: flashAnimation 0.4s ease-out;
+}
+
+@keyframes flashAnimation {
+    0% {
+        background-color: #ffffffaa;
+    }
+    100% {
+        background-color: transparent;
+    }
+}
+
 table {
 	border-spacing: 0px;
 }