deploy: 5fba0336a0

fx_core.js

@@ -1,6 +1,6 @@
-const dictionary = {"gIsSingleplayer":"j1","gIsTeamGame":"ha","playerId":"eu","playerNames":"k5","playerBalances":"ev","playerTerritories":"fP","uiOffset":"nf","gHumans":"h9","playerStates":"hB","gLobbyMaxJoin":"pu"};
+const dictionary = {"gIsTeamGame":"hN","playerId":"eW","playerNames":"jm","playerBalances":"eX","playerTerritories":"f1","gHumans":"h2","playerStates":"h4","gLobbyMaxJoin":"pS","gIsSingleplayer":"io","uiSizes":"b0","gap":"gap"};
-const fx_version = '0.6.2.1'; // FX Client Version
+const fx_version = '0.6.3'; // FX Client Version
-const fx_update = 'Mar 10'; // FX Client Last Updated
+const fx_update = 'Mar 26'; // FX Client Last Updated
 
 if (localStorage.getItem("fx_winCount") == undefined || localStorage.getItem("fx_winCount") == null) {
     var wins_counter = 0;
@@ -17,14 +17,25 @@ function escapeHtml(unsafe) {
 }
 
 function KeybindsInput(containerElement) {
-    this.container = containerElement;
+    const header = document.createElement("p");
+    header.innerText = "Attack Percentage Keybinds";
+    const keybindContainer = document.createElement("div");
+    keybindContainer.className = "arrayinput";
+    const keybindAddButton = document.createElement("button");
+    keybindAddButton.innerText = "Add";
+    containerElement.append(header, keybindContainer, keybindAddButton);
+    this.container = keybindContainer;
     this.keys = [ "key", "type", "value" ];
     this.objectArray = [];
     this.addObject = function () {
         this.objectArray.push({ key: "", type: "absolute", value: 1 });
         this.displayObjects();
     };
-    document.getElementById("keybindAddButton").addEventListener("click", this.addObject.bind(this));
+    this.update = function () {
+        this.objectArray = settings.attackPercentageKeybinds;
+        this.displayObjects();
+    }
+    keybindAddButton.addEventListener("click", this.addObject.bind(this));
     this.displayObjects = function () {
         // Clear the content of the container
         this.container.innerHTML = "";
@@ -90,11 +101,11 @@ function KeybindsInput(containerElement) {
 }
 
 var settings = {
-    "fontName": "Trebuchet MS",
+    //"fontName": "Trebuchet MS",
-    "showBotDonations": false,
+    //"showBotDonations": false,
     "displayWinCounter": true,
     "useFullscreenMode": false,
-    "hideAllLinks": false,
+    //"hideAllLinks": false,
     "realisticNames": false,
     "showPlayerDensity": true,
     "densityDisplayStyle": "percentage",
@@ -102,37 +113,80 @@ var settings = {
     "customBackgroundUrl": "",
     "attackPercentageKeybinds": [],
 };
+const discontinuedSettings = [ "hideAllLinks", "fontName" ];
 let makeMainMenuTransparent = false;
 var settingsManager = new (function() {
-    var inputFields = { // (includes select menus)
+    const settingsStructure = [
-        fontName: document.getElementById("settings_fontname"),
+        //{ for: "fontName", type: "textInput", label: "Font name:", placeholder: "Enter font name", tooltip: "Name of the font to be used for rendering. For example: Arial, Georgia, sans-serif, serif, Comic Sans MS, ..."},
-        customBackgroundUrl: document.getElementById("settings_custombackgroundurl"),
+        { type: "button", text: "Reset Wins Counter", action: removeWins },
-        densityDisplayStyle: document.getElementById("settings_densityDisplayStyle")
+        { for: "displayWinCounter", type: "checkbox", label: "Display win counter" },
-    };
+        { for: "useFullscreenMode", type: "checkbox", label: "Use fullscreen mode", note: "Note: fullscreen mode will trigger after you click anywhere on the page due to browser policy restrictions." },
-    var checkboxFields = {
+        //{ for: "hideAllLinks", type: "checkbox", label: "Hide Links option also hides app store links" },
-        //showBotDonations: document.getElementById("settings_donations_bots"),
+        { for: "realisticNames", type: "checkbox", label: "Realistic Bot Names" },
-        hideAllLinks: document.getElementById("settings_hidealllinks"),
+        { for: "showPlayerDensity", type: "checkbox", label: "Show player density" },
-        realisticNames: document.getElementById("settings_realisticnames"),
+        { for: "densityDisplayStyle", type: "selectMenu", label: "Density value display style:", tooltip: "Controls how the territorial density value should be rendered", options: [
-        displayWinCounter: document.getElementById("settings_displaywincounter"),
+            { value: "percentage", label: "Percentage" },
-        useFullscreenMode: document.getElementById("settings_usefullscreenmode"),
+            { value: "absoluteQuotient", label: "Value from 0 to 150 (BetterTT style)" }
-        showPlayerDensity: document.getElementById("settings_showPlayerDensity"),
+        ]},
-        //customMapFileBtn: document.getElementById("settings_custommapfileinput")
+        { for: "customBackgroundUrl", type: "textInput", label: "Custom main menu background:", placeholder: "Enter an image URL here", tooltip: "A custom image to be shown as the main menu background instead of the currently selected map." },
-    };
+        KeybindsInput
+    ];
+    const settingsContainer = document.querySelector(".settings .scrollable");
+    var inputFields = {}; // (includes select menus)
+    var checkboxFields = {};
+    var customElements = [];
+    settingsStructure.forEach(item => {
+        if (typeof item === "function") {
+            const container = document.createElement("div");
+            customElements.push(new item(container));
+            return settingsContainer.append(container);
+        }
+        const label = document.createElement("label");
+        if (item.tooltip) label.title = item.tooltip;
+        const isValueInput = item.type.endsWith("Input");
+        const element = document.createElement(isValueInput || item.type === "checkbox" ? "input" : item.type === "selectMenu" ? "select" : "button");
+        if (item.type === "textInput") element.type = "text";
+        if (item.placeholder) element.placeholder = item.placeholder;
+        if (isValueInput || item.type === "selectMenu") inputFields[item.for] = element;
+        if (item.text) element.innerText = item.text;
+        if (item.action) element.addEventListener("click", item.action);
+        if (item.label) label.append(item.label + " ");
+        if (item.note) {
+            const note = document.createElement("small");
+            note.innerText = item.note;
+            label.append(document.createElement("br"), note)
+        }
+        if (item.options) item.options.forEach(option => {
+            const optionElement = document.createElement("option");
+            optionElement.setAttribute("value", option.value);
+            optionElement.innerText = option.label;
+            element.append(optionElement);
+        });
+        label.append(element);
+        if (item.type === "checkbox") {
+            element.type = "checkbox";
+            const checkmark = document.createElement("span");
+            checkmark.className = "checkmark";
+            label.className = "checkbox";
+            label.append(checkmark);
+            checkboxFields[item.for] = element;
+        } else label.append(document.createElement("br"));
+        settingsContainer.append(label, document.createElement("br"));
+    });
     this.save = function() {
         Object.keys(inputFields).forEach(function(key) { settings[key] = inputFields[key].value.trim(); });
         Object.keys(checkboxFields).forEach(function(key) { settings[key] = checkboxFields[key].checked; });
         this.applySettings();
         WindowManager.closeWindow("settings");
+        discontinuedSettings.forEach(settingName => delete settings[settingName]);
         localStorage.setItem("fx_settings", JSON.stringify(settings));
         // should probably firgure out a way to do this without reloading - // You can't do it, localstorages REQUIRE you to reload
         window.location.reload();
     };
-    let keybindsInput = new KeybindsInput(document.getElementById("keybinds"));
     this.syncFields = function() {
         Object.keys(inputFields).forEach(function(key) { inputFields[key].value = settings[key]; });
         Object.keys(checkboxFields).forEach(function(key) { checkboxFields[key].checked = settings[key]; });
-        keybindsInput.objectArray = settings.attackPercentageKeybinds;
+        customElements.forEach(element => element.update());
-        keybindsInput.displayObjects();
     };
     this.resetAll = function() {
         if (!confirm("Are you Really SURE you want to RESET ALL SETTINGS back to the default?")) return;

index.html

@@ -34,7 +34,7 @@
     <meta itemprop="image" content="https://mohsenemx.github.io/FXclient/assets/logo.png">
     
     <!-- FX Client CSS -->
-    <link rel="stylesheet" href="main.css?1710192538510">
+    <link rel="stylesheet" href="main.css?1711467512301">
     <!-- Game CSS -->
     <style>
         html,
@@ -43,13 +43,15 @@
           padding: 0;
           margin: 0;
           background: rgb(0, 0, 0);
-            touch-action: none;
+          color: rgb(255, 255, 255);
-            -webkit-touch-callout: none;
+        }
-            -webkit-user-select: none;
+    
-            -khtml-user-select: none;
+        * {
-            -moz-user-select: none;
+          box-sizing: border-box;
-            -ms-user-select: none;
+        }
-            user-select: none;
+    
+        a {
+          color: rgb(225, 225, 255);
         }
       </style>
 </head>
@@ -59,13 +61,13 @@
     <div class="window flex settings" style="display:none">
         <h1>Settings</h1>
         <div class="scrollable">
-            <label title="Name of the font to be used for rendering. For example: Arial, Georgia, sans-serif, serif, Comic Sans MS, ...">
+            <!--<label title="Name of the font to be used for rendering. For example: Arial, Georgia, sans-serif, serif, Comic Sans MS, ...">
                 Font name: <input id="settings_fontname" placeholder="Enter font name" value="Arial"></label><br>
             <br><button onclick="removeWins()">Reset Wins Counter</button><br><br>
-            <!--<label for="settings_donations_bots" class="checkbox">
+            <!- -<label for="settings_donations_bots" class="checkbox">
                 Display donations from bots in donation history viewer (applies to multiplayer only)
                 <input type="checkbox" id="settings_donations_bots"><span class="checkmark"></span>
-            </label><br>-->
+            </label><br>- ->
             <label for="settings_displaywincounter" class="checkbox">
                 Display win counter
                 <input type="checkbox" id="settings_displaywincounter"><span class="checkmark"></span>
@@ -94,15 +96,15 @@
                 </select></label><br><br>
             <label title="A custom image to be shown in the main menu background instead of the currently selected map.">
                 Custom main menu background: <input id="settings_custombackgroundurl" placeholder="Enter an image URL here"></label>
-            <!--<input type="file" id="customBackgroundFileInput" style="display:none;">
+            <!- -<input type="file" id="customBackgroundFileInput" style="display:none;">
-            or <button onclick="openCustomBackgroundFilePicker()">Open a local file</button>--><br><br>
+            or <button onclick="openCustomBackgroundFilePicker()">Open a local file</button>- -><br><br>
-            <!--<label for="settings_custommapfileinput" class="checkbox">
+            <!- -<label for="settings_custommapfileinput" class="checkbox">
                 Bring back the custom map file button after the creator removed it in 1.83.0
                 <input type="checkbox" id="settings_custommapfileinput"><span class="checkmark"></span>
-            </label>-->
+            </label>- ->
             <p>Attack Percentage Keybinds</p>
             <div id="keybinds" class="arrayinput"></div>
-            <button id="keybindAddButton">Add</button>
+            <button id="keybindAddButton">Add</button>-->
         </div>
         <hr>
         <footer>
@@ -119,8 +121,8 @@
         <p id="donationhistory_note">Note: donations from bots are not shown here</p>
         <table><tbody id="donationhistory_content"></tbody></table>
     </div>
-    <script src="variables.js?1710192538510"></script>
+    <script src="variables.js?1711467512301"></script>
-    <script src="fx_core.js?1710192538510"></script>
+    <script src="fx_core.js?1711467512301"></script>
-    <script src="game.js?1710192538510"></script>
+    <script src="game.js?1711467512301"></script>
 </body>
 </html>