Change discord server invite link

- Version info is now stored in a JSON file separate from main.js

modUtils.js

@@ -24,6 +24,13 @@ class ModUtils {
     script = "";
     /** @type {{[key: string]: string}} */
     dictionary = {};
+    safeDictionary = new Proxy(this.dictionary, {
+        get(target, prop) {
+            if (typeof prop === 'symbol') prop = prop.toString();
+            if (prop in target) return target[prop];
+            throw new Error(`Property ${prop} is not defined in dictionary`);
+        }
+    });
     /** @type {Function[]} */
     postMinifyHandlers = [];
 

patches/customLobby.js

@@ -1,7 +1,7 @@
 import ModUtils from '../modUtils.js';
 
 // Custom lobby patches
-export default (/** @type {ModUtils} */ { insertCode, replaceCode, replaceRawCode, dictionary: dict, waitForMinification }) => {
+export default (/** @type {ModUtils} */ { insertCode, replaceCode, replaceRawCode, safeDictionary: dict, waitForMinification }) => {
     
     // set player id correctly
     insertCode(`function aBG(aBE) {

patches/patches.js

@@ -6,10 +6,10 @@ export default (/** @type {ModUtils} */ modUtils) => {
 }
 //export const requiredVariables = ["game", "playerId", "playerData", "rawPlayerNames", "gIsSingleplayer", "playerTerritories"];
 
-function applyPatches(/** @type {ModUtils} */ { replace, replaceOne, replaceRawCode, dictionary, matchOne, matchRawCode, escapeRegExp }) {
+function applyPatches(/** @type {ModUtils} */ { replace, replaceOne, replaceRawCode, safeDictionary, matchOne, matchRawCode, escapeRegExp }) {
 
     // Constants for easy usage of otherwise long variable access expressions
-    const dict = dictionary;
+    const dict = safeDictionary;
     const playerId = `${dict.game}.${dict.playerId}`;
     const rawPlayerNames = `${dict.playerData}.${dict.rawPlayerNames}`;
     const gIsSingleplayer = `${dict.game}.${dict.gIsSingleplayer}`;
@@ -144,7 +144,7 @@ canvas.font=aY.g0.g1(1,fontSize),canvas.fillStyle="rgba("+gR+","+tD+","+hj+",0.6
     // variable in the modified leaderboard click handler from the leaderboard filter)
     // match , 0 !== dG[x]) && fq.hB(x, 800, false, 0),
     replaceOne(/,(0!==\w+\.\w+\[(\w+)\])(\)&&\w+\.\w+\(\2,800,!1,0\),)/g,
-        `, ${dict.game}.${dict.gIsTeamGame} && __fx.donationsTracker.displayHistory($2, ${rawPlayerNames}, ${gIsSingleplayer}), $1 && !isEmptySpace $3`);
+        `, ${dict.game}.${dict.gIsTeamGame} && __fx.settings.openDonationHistoryFromLb && __fx.donationsTracker.displayHistory($2, ${rawPlayerNames}, ${gIsSingleplayer}), $1 && !isEmptySpace $3`);
 
     // Reset donation history and leaderboard filter when a new game is started
     replaceRawCode(",ab.dP(),ad.a10(),b5.nZ.oJ=[],bc.dP(),this.wE=1,",
@@ -153,7 +153,7 @@ canvas.font=aY.g0.g1(1,fontSize),canvas.fillStyle="rgba("+gR+","+tD+","+hj+",0.6
 
     { // Player list and leaderboard filter tabs
         // Draw player list button
-        const uiOffset = dictionary.uiSizes + "." + dictionary.gap;
+        const uiOffset = dict.uiSizes + "." + dict.gap;
         const { groups: { drawFunction, topBarHeight } } = replaceOne(/(="";function (?<drawFunction>\w+)\(\){[^}]+?(?<canvas>\w+)\.fillRect\(0,(?<topBarHeight>\w+),\w+,1\),(?:\3\.fillRect\([^()]+\),)+\3\.font=\w+,(\w+\.\w+)\.textBaseline\(\3,1\),\5\.textAlign\(\3,1\),\3\.fillText\(\w+,Math\.floor\()(\w+)\/2\),(Math\.floor\(\w+\+\w+\/2\)\));/g,
             "$1($6 + $<topBarHeight> - 22) / 2), $7; __fx.playerList.drawButton($<canvas>, 12, 12, $<topBarHeight> - 22);");
         const buttonBoundsCheck = `__fx.utils.isPointInRectangle($<x>, $<y>, ${uiOffset} + 12, ${uiOffset} + 12, ${topBarHeight} - 22, ${topBarHeight} - 22)`

src/changelog.js

@@ -0,0 +1,24 @@
+import versionData from '../version.json';
+const { changes, version } = versionData;
+
+import windowManager from "./windowManager.js";
+
+const window = windowManager.create({
+    name: "changelog",
+    closeWithButton: true
+});
+const title = document.createElement("h1");
+title.textContent = "What's new";
+const description = document.createElement("p");
+description.textContent = `in FX Client v${version}`;
+const list = document.createElement("ul");
+changes.forEach(change => {
+    const item = document.createElement("li");
+    item.textContent = change;
+    list.appendChild(item);
+});
+window.append(title, description, list);
+
+export function displayChangelog() {
+    windowManager.openWindow("changelog");
+}

src/customLobby.js

@@ -126,13 +126,21 @@ main.append(playerListContainer, optionsContainer);
 
 const footer = document.createElement("footer");
 footer.style.marginTop = "10px";
-const startButton = document.createElement("button");
-const leaveButton = document.createElement("button");
-startButton.textContent = "Start game";
-leaveButton.textContent = "Leave lobby";
-startButton.addEventListener("click", startGame);
-leaveButton.addEventListener("click", () => leaveLobby());
-footer.append(startButton, leaveButton);
+
+function createButton(text, action) {
+    const button = document.createElement("button");
+    button.textContent = text;
+    button.addEventListener("click", action);
+    return button;
+}
+const startButton = createButton("Start game", startGame);
+const leaveButton = createButton("Leave lobby", () => leaveLobby());
+const copyLinkButton = createButton("Copy link", () => {
+    navigator.clipboard.writeText(`${window.location.href}#lobby=${currentCode}`);
+    copyLinkButton.textContent = "Copied!";
+    setTimeout(() => copyLinkButton.textContent = "Copy link", 1000);
+});
+footer.append(startButton, leaveButton, copyLinkButton);
 
 windowElement.append(header, main, footer);
 
@@ -290,8 +298,22 @@ function startGame() {
 function rejoinLobby() {
     joinLobby();
 }
+function checkForLobbyLink(isHashChangeEvent) {
+    const hash = window.location.hash;
+    if (hash.startsWith("#lobby=")) {
+        // in case the player is already in a lobby
+        if (isHashChangeEvent) leaveLobby();
+        currentCode = hash.slice(7);
+        isActive = true;
+        joinLobby();
+    }
+}
+window.addEventListener("hashchange", () => checkForLobbyLink(true));
 
-function setJoinFunction(f) { joinLobby = f; }
+function setJoinFunction(f) {
+    joinLobby = f;
+    setTimeout(checkForLobbyLink, 0);
+}
 function setLeaveFunction(f) { leaveLobby = f; }
 function setSendFunction(f) { sendRaw = f; }
 function setActive(active) {

src/main.js

@@ -1,5 +1,5 @@
-const fx_version = '0.6.7.4'; // FX Client Version
-const fx_update = 'Mar 8'; // FX Client Last Updated
+import versionData from '../version.json';
+const { version, lastUpdated } = versionData;
 
 if ("serviceWorker" in navigator) {
   navigator.serviceWorker.addEventListener("message", (e) => {
@@ -22,13 +22,17 @@ import gameScriptUtils from "./gameScriptUtils.js";
 import hoveringTooltip from "./hoveringTooltip.js";
 import { keybindFunctions, keybindHandler, mobileKeybinds } from "./keybinds.js";
 import customLobby from './customLobby.js';
+import { displayChangelog } from './changelog.js';
 
 const savedVersion = localStorage.getItem("fx_version");
-if (savedVersion !== fx_version) localStorage.setItem("fx_version", fx_version);
+if (savedVersion !== version) {
+  localStorage.setItem("fx_version", version);
+  if (savedVersion !== null) displayChangelog();
+}
 
 window.__fx = window.__fx || {};
 const __fx = window.__fx;
-__fx.version = fx_version + " " + fx_update;
+__fx.version = version + " " + lastUpdated;
 
 __fx.settingsManager = settingsManager;
 __fx.leaderboardFilter = leaderboardFilter;

src/settings.js

@@ -1,6 +1,8 @@
 import { KeybindsInput } from "./keybindsInput.js";
 import winCounter from "./winCounter.js";
 import WindowManager from "./windowManager.js";
+import versionData from '../version.json';
+import { displayChangelog } from './changelog.js';
 
 window.__fx = window.__fx || {};
 const __fx = window.__fx;
@@ -19,6 +21,7 @@ var settings = {
   hideBotNames: false,
   highlightClanSpawns: false,
   detailedTeamPercentage: false,
+  openDonationHistoryFromLb: true,
   //"customMapFileBtn": true
   customBackgroundUrl: "",
   keybindButtons: false,
@@ -94,6 +97,12 @@ const settingsManager = new (function () {
       label: "Detailed team pie chart percentage",
       note: "For example: this would show 25.82% instead of 26% on the pie chart in team games"
     },
+    {
+      for: "openDonationHistoryFromLb",
+      type: "checkbox",
+      label: "Open donation history from the leaderboard",
+      note: "Changes whether or not clicking on a player's name in the in-game leaderboard in team games will open their donation history",
+    },
     {
       for: "customBackgroundUrl",
       type: "textInput",
@@ -106,6 +115,17 @@ const settingsManager = new (function () {
     {
       for: "keybindButtons", type: "checkbox",
       label: "Keybind buttons", note: "Show keybind buttons above the troop selector (max 6)"
+    },
+    function Footer(container) {
+      const versionInfo = document.createElement("p");
+      versionInfo.innerText = `FX Client v${versionData.version}`;
+      const links = document.createElement("p");
+      links.innerHTML = `<a href="https://discord.gg/dyxcwdNKwK" target="_blank">Discord server</a> |
+        <a href="https://github.com/fxclient/FXclient#readme">Github repository</a>`;
+      const changelogButton = document.createElement("button");
+      changelogButton.innerText = "Changelog";
+      changelogButton.addEventListener("click", displayChangelog);
+      container.append(versionInfo, links, changelogButton);
     }
   ];
   const settingsContainer = document.querySelector(".settings .scrollable");
@@ -232,7 +252,7 @@ const settingsManager = new (function () {
     Object.keys(checkboxFields).forEach(function (key) {
       checkboxFields[key].checked = settings[key];
     });
-    customElements.forEach((element) => element.update(settings));
+    customElements.forEach((element) => element.update?.(settings));
   };
   this.resetAll = function () {
     if (

src/windowManager.js

@@ -12,6 +12,12 @@ function create(info) {
       ? " " + info.classes
       : " scrollable selectable");
   window.style.display = "none";
+  if (info.closeWithButton === true) {
+    const button = document.createElement("button");
+    button.addEventListener("click", () => closeWindow(info.name));
+    button.textContent = "Close";
+    setTimeout(() => window.appendChild(button));
+  }
   container.appendChild(window);
   add(info);
   return window;

static/main.css

@@ -16,7 +16,7 @@
 	width           : 90%;
 	top             : 0;
 	color           : white;
-	font-family     : 'Franklin Gothic Medium', 'Trebuchet MS', Arial, sans-serif;
+	font-family     : 'Trebuchet MS', 'Franklin Gothic Medium', Arial, sans-serif;
 	margin          : auto;
 	margin-top      : 20px;
 	right           : 0;

version.json

@@ -0,0 +1,12 @@
+{
+    "version": "0.6.8",
+    "lastUpdated": "Mar 22",
+    "changes": [
+        "Added a \"What's new\" screen (the one you're looking at right now!) which displays a changelog of the latest version",
+        "Added custom lobby join links - to get one, click on the new \"Copy link\" button while in a lobby.",
+        "Added version information at the bottom of the setting page along with a link to the FX Client Discord server and GitHub repository. Previously this was shown only in the vanilla version menu.",
+        "Added a settings option to toggle displaying a player's donation history when clicking on their name in the leaderboard (applies to team games only)",
+        "Changed the font for the FX Client UI elements",
+        "The custom lobby server no longer tries to verify the compatibility of the client's protocol version. This will make custom lobbies usable immediately after an update, provided that the communication protocol has not changed significantly."
+    ]
+}