Update v0.6.1.1

Custom keybinds settings UI improvements,
::-webkit-scrollbar css changes,
fix browser caching of the external files by including a build timestamp as a url parameter

build.js

@@ -3,6 +3,7 @@ const fs = require('fs');
 
 if (!fs.existsSync("./build")) fs.mkdirSync("./build");
 fs.cpSync("./static/", "./build/", { recursive: true });
+fs.writeFileSync("./build/index.html", fs.readFileSync("./build/index.html").toString().replace(/buildTimestamp/g, Date.now()));
 let script = fs.readFileSync('./game/latest.js', { encoding: 'utf8' }).replace("\n", "").trim();
 
 const replaceOne = (expression, replaceValue) => {

static/fx_core.js

@@ -1,6 +1,5 @@
-const fx_version = '0.6.1'; // FX Client Version
-const fx_update = 'Feb 21'; // FX Client Last Updated
-
+const fx_version = '0.6.1.1'; // FX Client Version
+const fx_update = 'Feb 22'; // FX Client Last Updated
 
 if (localStorage.getItem("fx_winCount") == undefined || localStorage.getItem("fx_winCount") == null) {
     var wins_counter = 0;
@@ -21,27 +20,27 @@ function KeybindsInput(containerElement) {
     this.displayObjects = function () {
         // Clear the content of the container
         this.container.innerHTML = "";
-        if (this.objectArray.length === 0) return this.container.innerText = "No custom keybinds added";
+        if (this.objectArray.length === 0) return this.container.innerText = "No custom attack percentage keybinds added";
         // Loop through the array and display input fields for each object
         for (var i = 0; i < this.objectArray.length; i++) {
             var objectDiv = document.createElement("div");
             // Create input fields for each key
             this.keys.forEach(function (key) {
+                let inputField = document.createElement(key === "type" ? "select" : "input");
                 if (key === "type") {
-                    var selectMenu = document.createElement("select");
-                    selectMenu.innerHTML = '<option value="absolute">Absolute</option><option value="relative">Relative</option>';
-                    selectMenu.value = this.objectArray[i][key];
-                    selectMenu.addEventListener("change", this.updateObject.bind(this, i, key));
-                    objectDiv.appendChild(selectMenu);
-                    return;
+                    inputField.innerHTML = '<option value="absolute">Absolute</option><option value="relative">Relative</option>';
+                    inputField.addEventListener("change", this.updateObject.bind(this, i, key));
+                } else if (key === "key") {
+                    inputField.type = "text";
+                    inputField.setAttribute("readonly", "");
+                    inputField.setAttribute("placeholder", "No key set");
+                    inputField.addEventListener("click", this.startKeyInput.bind(this, i, key));
+                } else { // key === "value"
+                    inputField.type = "number";
+                    inputField.setAttribute("step", "0.1");
+                    inputField.addEventListener("input", this.updateObject.bind(this, i, key));
                 }
-                var inputField = document.createElement("input");
-                inputField.type = key === "value" ? "number" : "text";
-                if (key === "value") inputField.setAttribute("step", "0.1");
-                if (key === "key") inputField.setAttribute("readonly", "");
                 inputField.value = this.objectArray[i][key];
-                if (key === "key") inputField.addEventListener("click", this.startKeyInput.bind(this, i, key));
-                else inputField.addEventListener("input", this.updateObject.bind(this, i, key));
                 // Append input field to the object div
                 objectDiv.appendChild(inputField);
             }, this);
@@ -55,9 +54,16 @@ function KeybindsInput(containerElement) {
             this.container.appendChild(objectDiv);
         }
     };
+    /** @param {PointerEvent} event */
     this.startKeyInput = function (index, property, event) {
         event.target.value = "Press any key";
-        document.addEventListener('keydown', this.updateObject.bind(this, index, property), { once: true });
+        const handler = this.updateObject.bind(this, index, property);
+        event.target.addEventListener('keydown', handler, { once: true });
+        event.target.addEventListener("blur", () => {
+            event.target.removeEventListener('keydown', handler, { once: true });
+            event.target.value = this.objectArray[index][property];
+            //this.displayObjects();
+        }, { once: true });
     };
     this.updateObject = function (index, property, event) {
         if (index >= this.objectArray.length) return;

static/index.html

@@ -2,13 +2,13 @@
 <html lang="en">
 <head>
     <!-- Google tag (gtag.js) -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-Q96FGB3L05"></script>
+    <!--<script async src="https://www.googletagmanager.com/gtag/js?id=G-Q96FGB3L05"></script>
     <script>
         window.dataLayer = window.dataLayer || [];
         function gtag() { dataLayer.push(arguments); }
         gtag('js', new Date());
         gtag('config', 'G-Q96FGB3L05');
-    </script>
+    </script>-->
     <meta charset="utf-8" />
     <title>FX Client</title>
     <meta name="description" content="Modified Version of Territorial.io - FX Client">
@@ -32,7 +32,7 @@
     <meta itemprop="image" content="https://fxclient.cf/logo.png">
     
     <!-- FX Client CSS -->
-    <link rel="stylesheet" href="main.css">
+    <link rel="stylesheet" href="main.css?buildTimestamp">
     <!-- Game CSS -->
     <style>
         html,
@@ -76,7 +76,7 @@
                 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>-->
-            <p>Keybinds</p>
+            <p>Attack Percentage Keybinds</p>
             <div id="keybinds" class="arrayinput"></div>
             <button id="keybindAddButton">Add</button>
         </div>
@@ -91,8 +91,8 @@
         <p id="donationhistory_note">Note: donations from bots are not shown here</p>
         <p id="donationhistory_text"></p>
     </div>
-    <script src="variables.js"></script>
-    <script src="fx_core.js"></script>
-    <script src="game.js"></script>
+    <script src="variables.js?buildTimestamp"></script>
+    <script src="fx_core.js?buildTimestamp"></script>
+    <script src="game.js?buildTimestamp"></script>
 </body>
 </html>

static/main.css

@@ -2,6 +2,14 @@
 	overflow-y: auto;
 }
 
+::-webkit-scrollbar {
+	width: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+	background-color: #aaaaaa;
+}
+
 .window {
 	position        : fixed;
 	background-color: rgba(0, 0, 0, 0.7);
@@ -55,7 +63,9 @@ h1 {
 	transition        : 0.2s;
 }
 
-canvas, input, textarea {
+canvas,
+input,
+textarea {
 	transition: 0.2s;
 }
 
@@ -74,11 +84,21 @@ input#inputfilebtn {
 	transition: 0.2s
 }
 
-.window#donationhistory { user-select: text; }
+.window#donationhistory {
+	user-select: text;
+}
 
-.color-red { color: #dc143c; }
-.color-green { color: #32cd32; }
-.color-light-gray { color: #aaaaaa; }
+.color-red {
+	color: #dc143c;
+}
+
+.color-green {
+	color: #32cd32;
+}
+
+.color-light-gray {
+	color: #aaaaaa;
+}
 
 /* Checkbox */
 label.checkbox {