const dictionary = {"gIsTeamGame":"hT","game":"b","playerId":"ea","playerData":"a6","playerNames":"jt","rawPlayerNames":"tL","playerBalances":"eb","playerTerritories":"f5","gameState":"sh","fontSize":"fontSize","x":"fO","y":"fP","canvas":"gW","gHumans":"ht","playerStates":"vZ","fontGeneratorFunction":"aZ.g5.g6","gIsSingleplayer":"iv","gLobbyMaxJoin":"qI","SingleplayerMenu":"z","getSingleplayerPlayerCount":"wW","gMaxPlayers":"ej","gBots":"ip","Translations":"aW","txt":"no","strs":"a2B","uiSizes":"b1","gap":"gap","i":"eJ"}; const fx_version = '0.6.4.7'; // FX Client Version const fx_update = 'Jun 20'; // FX Client Last Updated if (localStorage.getItem("fx_winCount") == undefined || localStorage.getItem("fx_winCount") == null) { var wins_counter = 0; console.log('Couldn\'t find a saved win data. creating one...'); } else if (localStorage.getItem("fx_winCount") != undefined || localStorage.getItem("fx_winCount") != null) { var wins_counter = localStorage.getItem("fx_winCount"); } const playerDataProperties = ["playerTerritories", "playerBalances", "rawPlayerNames"]; const gameObjectProperties = ["playerId", "gIsTeamGame", "gHumans", "gLobbyMaxJoin", "gameState", "gIsSingleplayer"]; const getVar = varName => { if (playerDataProperties.includes(varName)) return window[dictionary.playerData][dictionary[varName]]; if (gameObjectProperties.includes(varName)) return window[dictionary.game][dictionary[varName]]; return window[dictionary[varName]] }; // https://stackoverflow.com/a/6234804 function escapeHtml(unsafe) { return unsafe.replace(/&/g, "&").replace(//g, ">").replace(/"/g, """).replace(/'/g, "'"); } function KeybindsInput(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: 0.8 }); this.displayObjects(); keybindAddButton.scrollIntoView(false); }; 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 = ""; 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") { inputField.innerHTML = ''; 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" const isAbsolute = this.objectArray[i].type === "absolute"; inputField.type = isAbsolute ? "text" : "number"; if (isAbsolute) inputField.addEventListener("click", this.convertIntoNumberInput.bind(this, i, key), { once: true }); else inputField.setAttribute("step", "0.1"); inputField.addEventListener("input", this.updateObject.bind(this, i, key)); } if (key === "value" && this.objectArray[i].type === "absolute") inputField.value = this.objectArray[i][key] * 100 + "%"; else inputField.value = this.objectArray[i][key]; // Append input field to the object div objectDiv.appendChild(inputField); }, this); // Button to delete the object var deleteButton = document.createElement("button"); deleteButton.textContent = "Delete"; deleteButton.addEventListener("click", this.deleteObject.bind(this, i)); // Append delete button to the object div objectDiv.appendChild(deleteButton); // Append the object div to the container this.container.appendChild(objectDiv); } }; /** @param {PointerEvent} event */ this.startKeyInput = function (index, property, event) { event.target.value = "Press any key"; 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 }); }; /** @param {PointerEvent} event */ this.convertIntoNumberInput = function (index, property, event) { event.target.value = event.target.value.slice(0, -1); event.target.type = "number"; event.target.addEventListener("blur", () => { //event.target.value = this.objectArray[index][property]; this.displayObjects(); }, { once: true }); }; this.updateObject = function (index, property, event) { if (index >= this.objectArray.length) return; // Update the corresponding property of the object in the array const value = property === "value" ? ( this.objectArray[index].type === "absolute" ? parseFloat(event.target.value) / 100 : parseFloat(event.target.value) ) : property === "key" ? event.key : event.target.value; this.objectArray[index][property] = value; if (property === "key") this.displayObjects(); }; this.deleteObject = function (index) { // Remove the object from the array this.objectArray.splice(index, 1); // Display the updated input fields for objects this.displayObjects(); }; return this; } var settings = { //"fontName": "Trebuchet MS", //"showBotDonations": false, "displayWinCounter": true, "useFullscreenMode": false, "hoveringTooltip": true, //"hideAllLinks": false, "realisticNames": false, "showPlayerDensity": true, "coloredDensity": true, "densityDisplayStyle": "percentage", //"customMapFileBtn": true "customBackgroundUrl": "", "attackPercentageKeybinds": [], }; const discontinuedSettings = [ "hideAllLinks", "fontName" ]; let makeMainMenuTransparent = false; var settingsManager = new (function() { const settingsStructure = [ //{ 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, ..."}, { type: "button", text: "Reset Wins Counter", action: removeWins }, { for: "displayWinCounter", type: "checkbox", label: "Display win counter", note: "The win counter tracks multiplayer solo wins (not in team games)" }, { 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." }, { for: "hoveringTooltip", type: "checkbox", label: "Hovering tooltip", note: "Display map territory info constantly (on mouse hover) instead of only when right clicking on the map" }, //{ for: "hideAllLinks", type: "checkbox", label: "Hide Links option also hides app store links" }, { for: "realisticNames", type: "checkbox", label: "Realistic Bot Names" }, { for: "showPlayerDensity", type: "checkbox", label: "Show player density" }, { for: "coloredDensity", type: "checkbox", label: "Colored density", note: "Display the density with a color between red and green depending on the density value" }, { for: "densityDisplayStyle", type: "selectMenu", label: "Density value display style:", tooltip: "Controls how the territorial density value should be rendered", options: [ { value: "percentage", label: "Percentage" }, { value: "absoluteQuotient", label: "Value from 0 to 150 (BetterTT style)" } ]}, { 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(); }; 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]; }); customElements.forEach(element => element.update()); }; this.resetAll = function() { if (!confirm("Are you Really SURE you want to RESET ALL SETTINGS back to the default?")) return; localStorage.removeItem("fx_settings"); window.location.reload(); }; this.applySettings = function() { //setVarByName("bu", "px " + settings.fontName); if (settings.useFullscreenMode && document.fullscreenEnabled) { function tryEnterFullscreen() { if (document.fullscreenElement !== null) return; document.documentElement.requestFullscreen({ navigationUI: "hide" }) .then(() => { console.log('Fullscreen mode activated'); }) .catch((error) => { console.warn('Could not enter fullscreen mode:', error); }); } document.addEventListener('mousedown', tryEnterFullscreen, { once: true }); document.addEventListener('click', tryEnterFullscreen, { once: true }); } if (settings.customBackgroundUrl !== "") { document.body.style.backgroundImage = "url(" + settings.customBackgroundUrl + ")"; document.body.style.backgroundSize = "cover"; document.body.style.backgroundPosition = "center"; } makeMainMenuTransparent = settings.customBackgroundUrl !== ""; }; }); function removeWins() { var confirm1 = confirm('Do you really want to reset your Wins?'); if (confirm1) { wins_counter = 0; localStorage.removeItem('fx_winCount'); alert("Successfully reset wins"); } } const openCustomBackgroundFilePicker = () => { const fileInput = document.getElementById("customBackgroundFileInput"); fileInput.click(); fileInput.addEventListener('change', handleFileSelect); } function handleFileSelect(event) { const fileInput = event.target; const selectedFile = fileInput.files[0]; console.log(fileInput.files); console.log(fileInput.files[0]); if (selectedFile) { const fileUrl = URL.createObjectURL(selectedFile); console.log("File URL:", fileUrl); fileInput.value = ""; fileInput.removeEventListener("change", handleFileSelect); } } var WindowManager = new (function() { var windows = {}; this.add = function(newWindow) { windows[newWindow.name] = newWindow; windows[newWindow.name].isOpen = false; }; this.openWindow = function(windowName, ...args) { if (windows[windowName].isOpen === true) return; if (windows[windowName].beforeOpen !== undefined) windows[windowName].beforeOpen(...args); windows[windowName].isOpen = true; windows[windowName].element.style.display = null; }; this.closeWindow = function(windowName) { if (windows[windowName].isOpen === false) return; windows[windowName].isOpen = false; windows[windowName].element.style.display = "none"; if (windows[windowName].onClose !== undefined) windows[windowName].onClose(); }; this.closeAll = function() { Object.values(windows).forEach(function(windowObj) { WindowManager.closeWindow(windowObj.name); }); }; }); WindowManager.add({ name: "settings", element: document.querySelector(".settings"), beforeOpen: function() { settingsManager.syncFields(); } }); WindowManager.add({ name: "donationHistory", element: document.querySelector("#donationhistory"), beforeOpen: function(isSingleplayer) { document.getElementById("donationhistory_note").style.display = ((true || settings.showBotDonations || /*getVarByName("dt")*/ isSingleplayer) ? "none" : "block"); }, onClose: function() { donationsTracker.openedWindowPlayerID = null; } }); WindowManager.add({ name: "playerList", element: document.getElementById("playerlist"), beforeOpen: function() {} }); document.getElementById("canvasA").addEventListener("mousedown", WindowManager.closeAll); document.getElementById("canvasA").addEventListener("touchstart", WindowManager.closeAll, { passive: true }); document.addEventListener("keydown", event => { if (event.key === "Escape") WindowManager.closeAll(); }); var settingsGearIcon = document.createElement('img'); settingsGearIcon.setAttribute('src', 'assets/geari_white.png'); const playerList = new (function () { const playersIcon = document.createElement('img'); playersIcon.setAttribute('src', 'assets/players_icon.png'); document.getElementById("playerlist_content").addEventListener("click", event => { const playerId = event.target.closest("tr[data-player-id]")?.getAttribute("data-player-id"); if (!playerId) return; if (getVar("gIsTeamGame")) WindowManager.closeWindow("playerList"), donationsTracker.displayHistory(playerId); }); this.display = function displayPlayerList(playerNames) { const gHumans = getVar("gHumans"); const gLobbyMaxJoin = getVar("gLobbyMaxJoin"); let listContent = `