Add a "What's new" screen

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

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/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/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,8 @@
+{
+    "version": "0.6.7.5",
+    "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",
+        "The custom lobby server no longer tries to verify the compatibility of the client version"
+    ]
+}