Change version

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

patches/patches.js

@@ -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,",

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/mtWFTQhTT9" 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;

version.json

@@ -0,0 +1,11 @@
+{
+    "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)",
+        "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."
+    ]
+}