- // ==UserScript==
- // @name IdlePixel UI Tweaks (Lite)
- // @namespace luxferre.dev
- // @version 0.2.0
- // @description Adds some options to change details about the IdlePixel user interface.
- // @author Lux-Ferre
- // @license MIT
- // @match *://idle-pixel.com/login/play/
- // @grant none
- // @require https://greasyfork.org/scripts/441206-idlepixel/code/IdlePixel+.js?anticache=20250125
- // @require https://greasyfork.org/scripts/491983-idlepixel-plugin-paneller/code/IdlePixel%2B%20Plugin%20Paneller.js?anticache=20250129
- // ==/UserScript==
-
- // Original Author: Anwinity || Original fork by: GodofNades || Rewritten with ♡ by: Lux-ferre
-
- (function () {
- "use strict";
-
- window.uitTableLabels = function () {
- window.UIT_POTION_XP_MAP = {
- stardust_potion: 75,
- energy_potion: 50,
- anti_disease_potion: 250,
- tree_speed_potion: 525,
- smelting_upgrade_potion: 550,
- great_stardust_potion: 1925,
- farming_speed_potion: 500,
- rare_monster_potion: 2125,
- super_stardust_potion: 4400,
- gathering_unique_potion: 3000,
- heat_potion: 2500,
- bait_potion: 1000,
- bone_potion: 1550,
- furnace_speed_potion: 6000,
- promethium_potion: 2000,
- oil_potion: 5000,
- super_rare_monster_potion: 6000,
- ultra_stardust_potion: 12900,
- magic_shiny_crystal_ball_potion: 7000,
- birdhouse_potion: 800,
- rocket_potion: 1500,
- titanium_potion: 5000,
- blue_orb_potion: 50000,
- geode_potion: 9500,
- magic_crystal_ball_potion: 12000,
- stone_converter_potion: 4000,
- rain_potion: 2500,
- combat_loot_potion: 9500,
- rotten_potion: 1250,
- merchant_speed_potion: 50000,
- green_orb_potion: 200000,
- guardian_key_potion: 42500,
- ancient_potion: 40000,
- red_orb_potion: 500000,
- cooks_dust_potion: 100000,
- farm_dust_potion: 100000,
- fighting_dust_potion: 100000,
- tree_dust_potion: 100000,
- infinite_oil_potion: 0,
- raids_hp_potion: 0,
- raids_mana_potion: 0,
- raids_bomb_potion: 0,
- };
-
- return {
- addTableCraftLabels: function () {
- // Invention Table
- const inventionTableRows = document.querySelectorAll(
- "#invention-table tbody tr[data-tablette-required]"
- );
- inventionTableRows.forEach((row) => {
- const outputs = row.querySelectorAll(
- "td:nth-child(4) item-invention-table"
- );
- outputs.forEach((output) => {
- output.textContent =
- Number(output.textContent).toLocaleString() +
- " (" +
- output.getAttribute("data-materials-item").replaceAll("_", " ") +
- ")";
- });
- });
-
- // Crafting Table
- const craftingTableRows = document.querySelectorAll(
- "#crafting-table tbody tr[data-crafting-item]"
- );
- craftingTableRows.forEach((row) => {
- const outputs = row.querySelectorAll(
- "td:nth-child(3) item-crafting-table"
- );
- outputs.forEach((output) => {
- output.textContent =
- Number(output.textContent).toLocaleString() +
- " (" +
- output.getAttribute("data-materials-item").replaceAll("_", " ") +
- ")";
- });
- });
-
- // Brewing Table
- const brewingTableRows = document.querySelectorAll(
- "#brewing-table tbody tr[data-brewing-item]"
- );
- brewingTableRows.forEach((row) => {
- const outputs = row.querySelectorAll(
- "td:nth-child(3) item-brewing-table"
- );
- outputs.forEach((output) => {
- output.textContent =
- output.textContent +
- " (" +
- output.getAttribute("data-materials-item").replaceAll("_", " ") +
- ")";
- });
- });
- },
-
- updateTableCraftLabels: function () {
- const brewingTable = document.querySelector("#brewing-table");
- if (brewingTable) {
- const rows = brewingTable.querySelectorAll(
- "tbody tr[data-brewing-item]"
- );
- rows.forEach((row) => {
- if (row.id != "id-raids_hp_potion" || row.id != "id-raids_mana_potion" || row.id != "id-raids_bomb_potion") {
- const brewingXP = row.querySelector("td:nth-child(6)");
- if (brewingXP) {
- const potionName = brewingXP.getAttribute("data-xp").replace("_xp", "");
- const potionXP =
- UIT_POTION_XP_MAP[potionName]?.toLocaleString() + " xp";
- const potionOrig = document.createElement("span");
- potionOrig.classList.add("font-small", "color-grey");
- potionOrig.textContent = potionXP;
- brewingXP.innerHTML = "";
- brewingXP.appendChild(potionOrig);
- }
- }
- });
- }
- },
-
- disableTableRefreshBrewing: function () {
- Brewing.refresh_table = function (brewing_table) {
- Brewing._refresh_click_events(brewing_table)
- Brewing._refresh_materials(brewing_table)
- Brewing._refresh_timers(brewing_table)
- Brewing._refresh_backgrounds(brewing_table)
- //Brewing._refresh_xp_labels(brewing_table)
- }
- },
-
- Crafting_getMaterials: function () {
- Crafting._refresh_materials_and_level = function (crafting_table) {
- // var crafting_table = document.getElementById("crafting-table");
- if (!crafting_table) {
- crafting_table = document.getElementById("crafting-table");
- }
-
- var materials_req_array = crafting_table.getElementsByTagName("item-crafting-table");
- var levels_req_array = crafting_table.getElementsByTagName("item-crafting-table-level");
-
- for (var i = 0; i < materials_req_array.length; i++) {
- var materials_req = materials_req_array[i];
- var item = materials_req.getAttribute("data-materials-item");
- var originalAmount = materials_req.innerHTML;
- var amountText = originalAmount.split(" ")[0];
- var cleanedAmountText = amountText.replace(/[,.\s]/g, '');
- var amount = parseInt(cleanedAmountText, 10);
-
- if (Items.getItem(item) >= amount)
- materials_req_array[i].style.color = "#00a200";
- else
- materials_req_array[i].style.color = "red";
- }
-
- for (var ix = 0; ix < levels_req_array.length; ix++) {
- var levels_req = levels_req_array[ix];
- var level_found = parseInt(levels_req.innerHTML);
- if (get_level(Items.getItem("crafting_xp")) >= level_found)
- levels_req.style.color = "green";
- else
- levels_req.style.color = "red";
- }
- }
- Crafting._refresh_click_events = function (crafting_table) {
- if (!crafting_table) {
- crafting_table = document.getElementById("crafting-table");
- }
- if (!Crafting._click_events_loaded) {
- var crafting_row_array = crafting_table.getElementsByTagName("tr");
-
- for (var i = 0; i < crafting_row_array.length; i++) {
- var crafting_row = crafting_row_array[i];
- if (!crafting_row.hasAttribute("data-crafting-item"))
- continue;
-
- crafting_row.addEventListener('click', (e) => {
- var target_clicked = e.target;
- var tr = target_clicked.closest("tr");
- var crafting_row_item = tr.getAttribute("data-crafting-item");
- var can_use_crafting_input_multiple = tr.getAttribute("data-crafting-item-multiple") === "true";
-
- if (can_use_crafting_input_multiple)
- Modals.open_input_dialogue(crafting_row_item, "Crafting", "How many do you want to craft?", "CRAFT");
- else {
- var materials = Crafting.get_materials(crafting_row_item);
- var html = "<div class='modal-crafting-ingredients shadow'>";
- html += "<b>MATERIALS</b><hr />";
- for (var i = 0; i < materials.length; i++) {
- var name = materials[i];
- i++;
- var amount = materials[i];
- var originalAmount = materials[i];
- //console.log(originalAmount);
- var amountText = originalAmount.split(" ")[0];
- var cleanedAmountText = amountText.replace(/[,.\s]/g, '');
- var amountClick = parseInt(cleanedAmountText, 10);
-
- var img = '<img width="15px" height="15px" src="https://d1xsc8x7nc5q8t.cloudfront.net/images/x.png">';
-
- if (Items.getItem(name) >= amountClick)
- img = '<img width="15px" height="15px" src="https://d1xsc8x7nc5q8t.cloudfront.net/images/check.png">';
-
- html += "<img class='w40' src='https://d1xsc8x7nc5q8t.cloudfront.net/images/" + name + ".png' /> " + originalAmount + " " + img;
- html += "<br />";
- }
- html += "</div><br /><br />Craft Item?";
-
- document.getElementById("modal-brew-ingredients").innerHTML = html;
- Modals.open_image_modal("Crafting", "images/" + crafting_row_item + ".png", html, "Craft", "Cancel", "CRAFT=" + crafting_row_item + "~" + 1)
- }
-
- });
- }
- Crafting._click_events_loaded = true;
- }
-
- }
- },
-
- Invention_getMaterials: function () {
- Invention._refresh_materials = function () {
- var invention_table = document.getElementById("invention-table");
- var materials_req_array = invention_table.getElementsByTagName("item-invention-table");
-
- for (var i = 0; i < materials_req_array.length; i++) {
- var materials_req = materials_req_array[i];
- var item = materials_req.getAttribute("data-materials-item");
- var originalAmount = materials_req.innerHTML;
- var amountText = originalAmount.split(" ")[0];
- var cleanedAmountText = amountText.replace(/[,.\s]/g, '');
- var amount = parseInt(cleanedAmountText, 10);
-
- if (Items.getItem(item) >= amount)
- materials_req_array[i].style.color = "#00a200";
- else
- materials_req_array[i].style.color = "red";
- }
- }
- },
- Modals_changeModal: function () {
- Modals.open_brew_dialogue = function (item) {
- document.getElementById("modal-brew-item-name-hidden").value = item;
- document.getElementById("modal-brew-item-image").src = get_image("images/" + item + ".png");
- document.getElementById("modal-brew-item-amount").value = "1";
- var materials = Brewing.get_ingredients(item);
- var html = "<b>INGREDIENTS</b><hr />";
- var dict = {};
- for (var i = 0; i < materials.length; i++) {
- var name = materials[i];
- i++;
- var amount = materials[i];
- var originalAmount = materials[i];
- //console.log(originalAmount);
- var amountText = originalAmount.split(" ")[0];
- var cleanedAmountText = amountText.replace(/[,.\s]/g, '');
- var amountClick = parseInt(cleanedAmountText, 10);
- html += "<img class='w40' src='https://d1xsc8x7nc5q8t.cloudfront.net/images/" + name + ".png' /> " + format_number(amountClick);
- html += "<br />";
- dict[name] = amountClick;
- }
- //console.log(dict);
- document.getElementById("modal-brew-ingredients").innerHTML = html;
- Modals.open_modern_input_dialogue_with_value(
- item,
- "images/" + item + ".png",
- dict,
- 'PLUS_ONE',
- null,
- "Brew",
- "BREW=" + item,
- )
- }
- },
- };
- };
-
- let onLoginLoaded = false;
-
- class UITweaksPlugin extends IdlePixelPlusPlugin {
- constructor() {
- super("ui-tweaks-lite", {
- about: {
- name: GM_info.script.name + " (ver: " + GM_info.script.version + ")",
- version: GM_info.script.version,
- author: GM_info.script.author,
- description: GM_info.script.description,
- },
- })
- this.get_selectors()
- this.get_default_colours()
- this.get_default_settings()
- this.load_settings()
- this.generate_user_stylesheet()
- this.modify_dom()
- this.replace_yell_method()
- }
-
- create_settings_modal(){
- const modal_string = `<div class="modal fade" id="uit_settings" tabindex="-1" data-bs-theme="dark">
- <div class="modal-dialog" style="max-width: 50vw; max-height: 75vh; transform: translate(-20%)">
- <div class="modal-content" style="height: 75vh;">
- <ul class="nav nav-tabs" id="controlPanelTabs">
- <li class="nav-item">
- <button class="uit_tab_button nav-link active" id="toggles-tab" data-bs-toggle="tab" data-bs-target="#toggles" type="button">
- <i class="fas fa-toggle-on me-2"></i>Toggles
- </button>
- </li>
- <li class="nav-item">
- <button class="uit_tab_button nav-link" id="misc-settings-tab" data-bs-toggle="tab" data-bs-target="#misc_settings" type="button">
- <i class="fas fa-list-check me-2"></i>Misc
- </button>
- </li>
- <li class="nav-item">
- <button class="uit_tab_button nav-link" id="bg-colours-tab" data-bs-toggle="tab" data-bs-target="#bg_colours" type="button">
- <i class="fas fa-palette me-2"></i>Background Colours
- </button>
- </li>
- <li class="nav-item">
- <button class="uit_tab_button nav-link" id="text-colors-tab" data-bs-toggle="tab" data-bs-target="#text_colours" type="button">
- <i class="fas fa-font me-2"></i>Text Colours
- </button>
- </li>
- </ul>
- <div class="px-3">
- <div class="tab-content mt-3" id="controlPanelTabContent">
- <div class="tab-pane fade show active" id="toggles">
- <div class="row g-4 d-flex justify-content-around text-center">
- <!-- Toggles will be dynamically inserted here -->
- </div>
- </div>
- <div class="tab-pane fade" id="misc_settings">
- <div class="row g-4 d-flex justify-content-around text-center">
- <!-- Settings will be dynamically inserted here -->
- </div>
- </div>
- <div class="tab-pane fade" id="bg_colours">
- <div class="row g-4 d-flex justify-content-around text-center">
- <!-- Color pickers will be dynamically inserted here -->
- </div>
- </div>
- <div class="tab-pane fade" id="text_colours">
- <div class="row g-4 d-flex justify-content-around text-center">
- <!-- Color pickers will be dynamically inserted here -->
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>`
- document.body.insertAdjacentHTML("beforeend", modal_string);
- }
-
- populate_settings(){
- this.ps_background_colours()
- this.ps_text_colours()
- this.ps_toggles()
- this.ps_misc()
- }
-
- ps_background_colours(){
- function rgb_to_hex(rgb) {
- const [r, g, b] = rgb.match(/\d+/g).map(Number);
- return `#${((1 << 24) | (r << 16) | (g << 8) | b).toString(16).slice(1)}`;
- }
-
- function create_colour_picker(colour, self) {
- let colour_value = self.settings.get(colour.id) || "rgb(0, 0, 0)"
- if (colour_value.startsWith('rgb')) {
- colour_value = rgb_to_hex(colour_value)
- }
-
- return `
- <div class="col d-flex align-items-center justify-content-center p-1" style="min-width: 250px; max-width: 250px; border: 2px outset gray">
- <input type="color" class="color-picker form-control me-1" id="uitl_${colour.id}" data-ident="${colour.id}" value="${colour_value}">
- <label for="uitl_${colour.id}" class="form-label m-0">${colour.label}</label>
- </div>
- `
- }
-
- const bg_colours = [
- {id: "main_background", label: "Main Background"},
- {id: "panel_background", label: "Panel Background"},
- {id: "top_bar_background", label: "Top Bar Background"},
- {id: "left_bar_background", label: "Left Bar Background"},
- {id: "chat_inner_background", label: "Chat Inner Background"},
- {id: "chat_outer_background", label: "Chat Outer Background"},
- {id: "chat_border", label: "Chat Border"},
- {id: "server_message_tag", label: "Server Message Tag"},
- {id: "chat_raid_link_background", label: "Chat Raid Link Background"},
- ]
-
- const background_container = document.querySelector('#bg_colours .row')
- background_container.innerHTML = ""
-
- bg_colours.forEach(colour => {
- background_container.innerHTML += create_colour_picker(colour, this);
- })
-
- background_container.querySelectorAll("input").forEach(input => {
- const self = IdlePixelPlus.plugins["ui-tweaks-lite"]
- input.addEventListener("input", (e) => {
- const ident = e.target.dataset.ident
- const prop = ident==="chat_border"? "border-color" : "background-color"
- self.update_css(self.selector_map[ident], prop, e.target.value)
- self.update_setting(ident, e.target.value)
- })
- })
- }
-
- ps_text_colours(){
- function rgb_to_hex(rgb) {
- const [r, g, b] = rgb.match(/\d+/g).map(Number);
- return `#${((1 << 24) | (r << 16) | (g << 8) | b).toString(16).slice(1)}`;
- }
-
- function create_colour_picker(colour, self) {
- let colour_value = self.settings.get(colour.id) || "rgb(0, 0, 0)"
- if (colour_value.startsWith('rgb')) {
- colour_value = rgb_to_hex(colour_value)
- }
-
- return `
- <div class="col d-flex align-items-center justify-content-center p-1" style="min-width: 250px; max-width: 250px; border: 2px outset gray">
- <input type="color" class="color-picker form-control me-1" id="uitl_${colour.id}" data-ident="${colour.id}" value="${colour_value}">
- <label for="uitl_${colour.id}" class="form-label m-0">${colour.label}</label>
- </div>
- `
- }
-
- const text_colours = [
- {id: "chat_text", label: "Chat Text"},
- {id: "chat_timestamp_text", label: "Chat Timestamp Text"},
- {id: "chat_username_text", label: "Chat Username Text"},
- {id: "chat_level_text", label: "Chat Level Text"},
- {id: "server_message_text", label: "Server Message Text"},
- {id: "server_message_tag_text", label: "Server Message Tag Text"},
- {id: "chat_raid_link_text", label: "Chat Raid Link Text"},
- {id: "panel_text_1", label: "Panel Text 1"},
- {id: "panel_text_2", label: "Panel Text 2"},
- {id: "skill_level_text", label: "Skill Level Text"}
- ]
-
- const text_container = document.querySelector('#text_colours .row');
- text_container.innerHTML = ""
-
- text_colours.forEach(colour => {
- text_container.innerHTML += create_colour_picker(colour, this);
- })
-
- text_container.querySelectorAll("input").forEach(input => {
- const self = IdlePixelPlus.plugins["ui-tweaks-lite"]
- input.addEventListener("input", (e) => {
- const ident = e.target.dataset.ident
- const prop = "color"
- self.update_css(self.selector_map[ident], prop, e.target.value)
- self.update_setting(ident, e.target.value)
- })
- })
- }
-
- ps_toggles(){
- function createToggle(toggle) {
- return `
- <div class="col d-flex align-items-center justify-content-center p-1" style="min-width: 250px; max-width: 250px; border: 2px inset gray">
- <div class="form-check form-switch">
- <input class="form-check-input me-1" type="checkbox" id="uitl_${toggle.id}">
- <label class="form-check-label" for="uitl_${toggle.id}">${toggle.label}</label>
- </div>
- </div>
- `
- }
-
- const toggles = [];
- const toggles_container = document.querySelector('#toggles .row');
- toggles_container.innerHTML = ""
-
- toggles.forEach(toggle => {
- toggles_container.innerHTML += createToggle(toggle);
- })
- }
-
- ps_misc(){
- const misc_container = document.querySelector('#misc_settings .row');
- misc_container.innerHTML = ""
-
- let user_font = this.settings.get("font") || "IdlePixel Default"
-
- misc_container.innerHTML += `
- <div class="col d-flex align-items-center justify-content-center p-1" style="min-width: 250px; max-width: 250px; border: 2px outset gray">
- <label for="font_picker" class="form-label m-0 me-2">Font</label>
- <select class="form-select font_picker" id="font_picker"></select>
- </div>
- `
- this.font_list.forEach(font=>{
- const selected_attr = font === user_font ? "selected" : ""
- const option_str = `<option ${selected_attr} value="${font}">${font}</option>`
- document.getElementById("font_picker").innerHTML += option_str
- })
-
- document.getElementById("font_picker").addEventListener("change", function(event) {
- const self = IdlePixelPlus.plugins["ui-tweaks-lite"]
- user_font = event.target.value
- if (user_font === "IdlePixel Default") {user_font=self.default_settings["font"]}
- self.update_css("body.font-famlies", "font-family", user_font)
- self.update_css("#chat-area", "font-family", user_font)
- self.update_setting("font", user_font)
- });
- }
-
- show_modal(){
- IdlePixelPlus.plugins["ui-tweaks-lite"].populate_settings()
- $("#uit_settings").modal("show")
- }
-
- get_default_colours(){
- $("#chat-area").append($.parseHTML(`<div id="temp_chat_colour_picker"><div class="chat-username"></div><div class="server_message"></div><div class="server_message_text"></div></div>`))
- this.default_colours = {
- main_background: "rgb(200, 247, 248)",
- panel_background: getComputedStyle(document.querySelector("#panels")).backgroundColor,
- top_bar_background: getComputedStyle(document.querySelector(".game-top-bar")).backgroundColor,
- left_bar_background: getComputedStyle(document.querySelector("#menu-bar")).backgroundColor,
- chat_inner_background: getComputedStyle(document.querySelector("#chat-area")).backgroundColor,
- chat_outer_background: getComputedStyle(document.querySelector("#game-chat")).backgroundColor,
- chat_border: getComputedStyle(document.querySelector("#game-chat.chat.m-3")).borderColor,
- server_message_tag: getComputedStyle(document.querySelector(".server_message")).backgroundColor,
- server_message_tag_text: getComputedStyle(document.querySelector(".server_message")).color,
- chat_text: getComputedStyle(document.querySelector("#chat-area")).color,
- chat_timestamp_text: "rgb(0, 128, 0)",
- chat_username_text: getComputedStyle(document.querySelector(".chat-username")).color,
- chat_level_text: "rgb(128, 128, 128)",
- server_message_text: getComputedStyle(document.querySelector(".server_message")).color,
- chat_raid_link_text: "rgb(197 186 186)",
- chat_raid_link_background: "rgb(139, 0, 0)",
- panel_text_1: getComputedStyle(document.querySelector("#panels")).color,
- panel_text_2: "rgb(128, 128, 128)",
- skill_level_text: getComputedStyle(document.querySelector("#panels .font-large")).color,
- }
- const ele = document.getElementById("temp_chat_colour_picker")
- if(ele){ele.remove()}
- }
-
- get_font_list(){
- const possible_fonts = new Set(
- [
- // Windows 10
- "Arial",
- "Arial Black",
- "Bahnschrift",
- "Calibri",
- "Cambria",
- "Cambria Math",
- "Candara",
- "Comic Sans MS",
- "Consolas",
- "Constantia",
- "Corbel",
- "Courier New",
- "Ebrima",
- "Franklin Gothic Medium",
- "Gabriola",
- "Gadugi",
- "Georgia",
- "HoloLens MDL2 Assets",
- "Impact",
- "Ink Free",
- "Javanese Text",
- "Leelawadee UI",
- "Lucida Console",
- "Lucida Sans Unicode",
- "Malgun Gothic",
- "Marlett",
- "Microsoft Himalaya",
- "Microsoft JhengHei",
- "Microsoft New Tai Lue",
- "Microsoft PhagsPa",
- "Microsoft Sans Serif",
- "Microsoft Tai Le",
- "Microsoft YaHei",
- "Microsoft Yi Baiti",
- "MingLiU-ExtB",
- "Mongolian Baiti",
- "MS Gothic",
- "MV Boli",
- "Myanmar Text",
- "Nirmala UI",
- "Palatino Linotype",
- "Segoe MDL2 Assets",
- "Segoe Print",
- "Segoe Script",
- "Segoe UI",
- "Segoe UI Historic",
- "Segoe UI Emoji",
- "Segoe UI Symbol",
- "SimSun",
- "Sitka",
- "Sylfaen",
- "Symbol",
- "Tahoma",
- "Times New Roman",
- "Trebuchet MS",
- "Verdana",
- "Webdings",
- "Wingdings",
- "Yu Gothic",
- // macOS
- "American Typewriter",
- "Andale Mono",
- "Arial",
- "Arial Black",
- "Arial Narrow",
- "Arial Rounded MT Bold",
- "Arial Unicode MS",
- "Avenir",
- "Avenir Next",
- "Avenir Next Condensed",
- "Baskerville",
- "Big Caslon",
- "Bodoni 72",
- "Bodoni 72 Oldstyle",
- "Bodoni 72 Smallcaps",
- "Bradley Hand",
- "Brush Script MT",
- "Chalkboard",
- "Chalkboard SE",
- "Chalkduster",
- "Charter",
- "Cochin",
- "Comic Sans MS",
- "Copperplate",
- "Courier",
- "Courier New",
- "Didot",
- "DIN Alternate",
- "DIN Condensed",
- "Futura",
- "Geneva",
- "Georgia",
- "Gill Sans",
- "Helvetica",
- "Helvetica Neue",
- "Herculanum",
- "Hoefler Text",
- "Impact",
- "Lucida Grande",
- "Luminari",
- "Marker Felt",
- "Menlo",
- "Microsoft Sans Serif",
- "Monaco",
- "Noteworthy",
- "Optima",
- "Palatino",
- "Papyrus",
- "Phosphate",
- "Rockwell",
- "Savoye LET",
- "SignPainter",
- "Skia",
- "Snell Roundhand",
- "Tahoma",
- "Times",
- "Times New Roman",
- "Trattatello",
- "Trebuchet MS",
- "Verdana",
- "Zapfino",
- // other
- "Helvetica",
- "Garamond",
- ].sort()
- )
-
- this.font_list = []
-
- for (const font of possible_fonts.values()) {
- if (document.fonts.check(`12px "${font}"`)) {
- this.font_list.push(font);
- }
- }
- this.font_list.unshift("IdlePixel Default")
- }
-
- get_default_settings(){
- this.default_settings = {
- font: getComputedStyle(document.querySelector("body")).fontFamily,
- }
- }
-
- get_selectors(){
- this.selector_map = {
- main_background: ".background-game",
- panel_background: "#panels",
- top_bar_background: ".game-top-bar",
- left_bar_background: "#menu-bar",
- chat_inner_background: "#chat-area",
- chat_outer_background: "#game-chat",
- chat_border: "#game-chat",
- server_message_tag: ".server_message",
- server_message_tag_text: ".server_message",
- chat_text: "#chat-area",
- chat_timestamp_text: "#chat-area .color-green",
- chat_username_text: ".chat-username",
- chat_level_text: "#chat-area .color-grey",
- server_message_text: ".server_message_text",
- chat_raid_link_text: ".raid-link",
- chat_raid_link_background: ".raid-link",
- panel_text_1: "#panels",
- panel_text_2: "#panels .color-grey",
- skill_level_text: "#panels .font-large"
- }
-
- }
-
- load_settings(){
- this.settings = new Map([
- ...Object.entries(this.default_colours),
- ...Object.entries(this.default_settings),
- ])
- const stored_settings = localStorage.getItem("uit-lite-settings")
- if(stored_settings){
- const parsed_settings = JSON.parse(stored_settings)
- this.settings.forEach((value, key)=>{
- if (parsed_settings.hasOwnProperty(key)) {
- this.settings.set(key, parsed_settings[key])
- } else {
- console.log("Unknown setting key: " + key)
- }
- })
- console.log("Lite settings loaded.")
- } else {
- const uit_configs = JSON.parse(localStorage.getItem("idlepixelplus.ui-tweaks.config"))
- if(uit_configs){
- console.log("Legacy UIT settings loaded.")
- try {
- this.get_uit_configs()
- } catch(e) {
- console.error(`Error loading UIT configs: ${e}`)
- }
- } else {
- console.log("Only default settings loaded.")
- }
- }
- this.save_settings()
- }
-
- save_settings(){
- const json_settings = JSON.stringify(Object.fromEntries(this.settings))
- localStorage.setItem("uit-lite-settings", json_settings)
- }
-
- get_uit_configs(){
- const uit_configs = JSON.parse(localStorage.getItem("idlepixelplus.ui-tweaks.config"))
- this.settings
- .set("main_background", uit_configs["color-body"] || this.default_colours.main_background)
- .set("panel_background", uit_configs["color-panels"] || this.default_colours.panel_background)
- .set("top_bar_background", uit_configs["color-top-bar"] || this.default_colours.top_bar_background)
- .set("left_bar_background", uit_configs["color-menu-bar"] || this.default_colours.left_bar_background)
- .set("chat_inner_background", uit_configs["color-chat-area"] || this.default_colours.chat_inner_background)
- .set("chat_outer_background", uit_configs["color-game-chat"] || this.default_colours.chat_outer_background)
- .set("chat_border", uit_configs["chatBorderOverrideColor"] || this.default_colours.chat_border)
- .set("server_message_tag", uit_configs["color-chat-area-server_message"] || this.default_colours.server_message_tag)
- .set("server_message_tag_text", uit_configs["serverMessageTextOverrideColor"] || this.default_colours.server_message_tag_text)
- .set("chat_text", uit_configs["font-color-chat-area"] || this.default_colours.chat_text)
- .set("chat_timestamp_text", uit_configs["font-color-chat-area-color-green"] || this.default_colours.chat_timestamp_text)
- .set("chat_username_text", uit_configs["font-color-chat-area-chat-username"] || this.default_colours.chat_username_text)
- .set("chat_level_text", uit_configs["font-color-chat-area-color-grey"] || this.default_colours.chat_level_text)
- .set("server_message_text", uit_configs["serverMessageTextOverrideColor"] || this.default_colours.server_message_text)
- .set("chat_raid_link_text", uit_configs["font-color-chat-area-chat-raid-password"] || this.default_colours.chat_raid_link_text)
- .set("chat_raid_link_background", uit_configs["background-color-chat-area-raid-password"] || this.default_colours.chat_raid_link_background)
- .set("panel_text_1", uit_configs["font-color-panels"] || this.default_colours.panel_text_1)
- .set("panel_text_2", uit_configs["font-color-panels-color-grey"] || this.default_colours.panel_text_2)
- .set("skill_level_text", uit_configs["font-color-panels-font-large"] || this.default_colours.skill_level_text)
- .set("font", uit_configs["font"] || this.default_settings.font)
- }
-
- apply_set_styles(){
- const style = document.createElement("style")
- style.id = "uit-lite-set-styles"
- style.textContent = `
- #chat-top {
- display: flex;
- flex-direction: row;
- justify-content: left;
- }
-
- #chat-top > button {
- margin-left: 2px;
- margin-right: 2px;
- white-space: nowrap;
- }
-
- #content.side-chat {
- display: grid;
- column-gap: 0;
- row-gap: 0;
- grid-template-columns: 2fr minmax(300px, 1fr);
- grid-template-rows: 1fr;
- }
-
- #content.side-chat #game-chat {
- max-height: calc(100vh - 32px);
- }
-
- #content.side-chat #game-chat > :first-child {
- display: grid;
- column-gap: 0;
- row-gap: 0;
- grid-template-columns: 1fr;
- grid-template-rows: auto 1fr auto;
- height: calc(100% - 16px);
- }
-
- #content.side-chat #chat-area {
- height: auto !important;
- }
-
- .farming-plot-wrapper.condensed {
- min-width: 115px;
- display: flex;
- flex-direction: row;
- justify-items: flex-start;
- width: fit-content;
- height: unset;
- min-height: unset;
- max-height: unset;
- }
-
- .farming-plot-wrapper.condensed > span {
- width: 100px;
- max-height: 200px;
- }
-
- .farming-plot-wrapper.condensed img {
- width: 100px;
- }
-
- #panel-gathering .gathering-box.condensed {
- height: 240px;
- position: relative;
- margin: 4px auto;
- padding-left: 4px;
- padding-right: 4px;
- }
-
- #panel-gathering .gathering-box.condensed img.gathering-area-image {
- position: absolute;
- top: 10px;
- left: 10px;
- width: 68px;
- height: 68px;
- }
-
- #panel-mining.add-arrow-controls itembox {
- position: relative;
- }
-
- #panel-mining:not(.add-arrow-controls) itembox .arrow-controls {
- display: none !important;
- }
-
- itembox .arrow-controls {
- position: absolute;
- top: 0px;
- right: 2px;
- height: 100%;
- padding: 2px;
- display: flex;
- flex-direction: column;
- justify-content: space-around;
- align-items: center;
- }
-
- itembox .arrow {
- border: solid white;
- border-width: 0 4px 4px 0;
- display: inline-block;
- padding: 6px;
- cursor: pointer;
- opacity: 0.85;
- }
-
- itembox .arrow:hover {
- opacity: 1;
- border-color: yellow;
- }
-
- itembox .arrow.up {
- transform: rotate(-135deg);
- -webkit-transform: rotate(-135deg);
- margin-top: 3px;
- }
-
- itembox .arrow.down {
- transform: rotate(45deg);
- -webkit-transform: rotate(45deg);
- margin-bottom: 3px;
- }
-
- .itembox-large {
- width: 204px;
- margin-bottom: 15px;
- }
-
- .game-menu-bar-left-table-btn tr
- {
- background-color: transparent !important;
- border:0 !important;
- font-size:medium;
- }
-
- .hover-menu-bar-item:hover {
- background: #256061 !important;
- border:0 !important;
- filter:unset;
- font-size:medium;
- }
-
- .thin-progress-bar {
- background:#437b7c !important;
- border:0 !important;
- height:unset;
- }
-
- .thin-progress-bar-inner {
- background:#88e8ea !important;
- }
-
- .game-menu-bar-left-table-btn td{
- padding-left:20px !important;
- padding:unset;
- margin:0px;
- font-size:medium;
- }
-
- .game-menu-bar-left-table-btn div td{
- padding-left:20px !important;
- padding:unset;
- margin:0px;
- font-size:medium;
- background-color: transparent !important;
- }
-
- .game-menu-bar-left-table-btn {
- background-color: transparent !important;
- }
-
- .left-menu-item {
- margin-bottom:unset;
- font-size:medium;
- }
-
- .left-menu-item > img {
- margin-left: 20px;
- margin-right: 20px;
- }
-
- .color-picker {
- width: 40px;
- height: 40px;
- padding: 0;
- border: solid 2px black;
- border-radius: 50%;
- cursor: pointer;
- }
- .color-picker::-webkit-color-swatch-wrapper {
- padding: 0;
- }
- .color-picker::-webkit-color-swatch {
- border: none;
- border-radius: 4px;
- }
- .uit_tab_button {
- border: none;
- box-shadow: none;
- border-radius: none;
- }
- #uit_settings .active {
- background-color:inherit !important;
- color:white !important;
- }
- `
-
- document.head.appendChild(style)
- }
-
- generate_user_stylesheet(){
- const style = document.createElement("style")
- style.id = "uit-lite-user-styles"
- style.textContent = `
- body.font-famlies {
- font-family: ${this.settings.get("font")};
- }
-
- .background-game {
- background-color: ${this.settings.get("main_background")};
- }
-
- #panels {
- background-color: ${this.settings.get("panel_background")};
- color: ${this.settings.get("panel_text_1")};
- }
-
- .game-top-bar {
- background-color: ${this.settings.get("top_bar_background")};
- }
-
- #menu-bar {
- background-color: ${this.settings.get("left_bar_background")};
- }
-
- #chat-area {
- background-color: ${this.settings.get("chat_inner_background")};
- color: ${this.settings.get("chat_text")};
- font-family: ${this.settings.get("font")};
- }
-
- #game-chat {
- background-color: ${this.settings.get("chat_outer_background")};
- border-color: ${this.settings.get("chat_border")};
- }
-
- .server_message {
- background-color: ${this.settings.get("server_message_tag")};
- color: ${this.settings.get("server_message_tag_text")};
- }
-
- .server_message_text {
- color: ${this.settings.get("server_message_text")};
- }
-
- #chat-area .color-green {
- color: ${this.settings.get("chat_timestamp_text")};
- }
-
- .chat-username {
- color: ${this.settings.get("chat_username_text")};
- }
-
- #chat-area .color-grey {
- color: ${this.settings.get("chat_level_text")};
- }
-
- .raid-link {
- background-color: ${this.settings.get("chat_raid_link_background")};
- color: ${this.settings.get("chat_raid_link_text")};
- }
-
- #panels .color-grey {
- color: ${this.settings.get("panel_text_2")};
- }
-
- #panels .font-large {
- color: ${this.settings.get("skill_level_text")};
- }
- `
-
- document.head.appendChild(style)
- }
-
- modify_dom(){
- // DOM modifications to allow CSS rule overrides
- // Removes inline styles from levels on skill panels.
- document.querySelectorAll("#panels .font-large").forEach(element => {
- element.removeAttribute("style")
- })
- }
-
- restructure_chat(){
- const chat = document.querySelector("#game-chat > :first-child");
- const chatTop = document.createElement("div");
- chatTop.id = "chat-top";
- const chatArea = document.querySelector("#chat-area");
- const chatBottom = document.querySelector(
- "#game-chat > :first-child > :last-child"
- );
-
- while (chat.firstChild) {
- chatTop.appendChild(chat.firstChild);
- }
-
- chat.appendChild(chatTop);
- chat.appendChild(chatArea);
- chat.appendChild(chatBottom);
- }
-
- replace_yell_method(){
- Chat.yell_to_chat_box = function (data) {
- var data_array = data.split("~");
- var tag = "Server message";
- var tag_css_class = tag.toLowerCase().replaceAll(" ", "_");
- var sigil_image = "none";
- var usernameSource = data_array[0];
- var message = data_array[1];
-
- if(Items.getItem("team_chat_on") == 1 && usernameSource != "none") {
- var teamUsernames = Items.getItem("team_usernames").split(",");
- var found = false;
- for(var i = 0; i < teamUsernames.length; i++) {
-
- if(teamUsernames[i] == usernameSource) {
- found = true;
- break;
- }
- }
-
- if(!found)
- return;
- }
-
- var html = "";
- html += "<span class='color-green'>"+Chat._get_time()+"</span>";
- if(sigil_image != "none") html += " <img src='https://cdn.idle-pixel.com/images/"+sigil_image+".png' /> ";
- if(tag != "none") html += "<span class='"+tag_css_class+" shadow'>" + tag + "</span> ";
- html += sanitize_input(message);
-
- $("#chat-area").append("<div class='server_message_text'>" + html + "</div>")
-
- if(Chat._auto_scroll)
- $("#chat-area").scrollTop($("#chat-area")[0].scrollHeight)
- };
- }
-
- move_plugins_button(){
- document.getElementById("menu-bar-idlepixelplus-icon")?.parentElement.remove()
- Paneller.registerPanel("idlepixelplus", "IP+ Plugin Settings")
- }
-
- update_css(selector, property, new_value) {
- const stylesheet = document.getElementById("uit-lite-user-styles").sheet
- const rules = stylesheet.cssRules
- for (let i = 0; i < rules.length; i++) {
- const rule = rules[i];
- if (rule.selectorText === selector) {
- rule.style.setProperty(property, new_value);
- break;
- }
- }
- }
-
- update_setting(setting, value) {
- IdlePixelPlus.plugins["ui-tweaks-lite"].settings.set(setting, value);
- IdlePixelPlus.plugins["ui-tweaks-lite"].save_settings()
- }
-
- condense_ui() {
- let leftbar = document.getElementById("menu-bar-buttons");
-
- let styleElement = document.getElementById("condensed-ui-tweaks");
-
- if (styleElement) {
- styleElement.parentNode.removeChild(styleElement);
- }
- document
- .getElementById("menu-bar-buttons")
- .querySelectorAll(".font-small")
- .forEach(function (smallFont) {
- let classInfo = smallFont.className.replaceAll(
- "font-small",
- "font-medium"
- );
- smallFont.className = classInfo;
- })
-
- leftbar.querySelectorAll("img").forEach(function (img) {
- img.className = "w20";
- });
- }
-
- condense_woodcutting_patches(){
- let patch_container = document.createElement("div")
- patch_container.classList.add("d-flex")
- const woodcutting_plots = document.querySelectorAll("#panel-woodcutting .farming-plot-wrapper")
- woodcutting_plots.forEach((plot) => {
- plot.classList.add("condensed")
- document
- .querySelectorAll("#panel-woodcutting .farming-plot-wrapper img[id^='img-tree_shiny']")
- .forEach(function (el) {
- el.removeAttribute("width");
- el.removeAttribute("height");
- })
- patch_container.appendChild(plot)
- })
- document.getElementById("panel-woodcutting").appendChild(patch_container)
- }
-
- condense_farming_patches() {
- let patch_container = document.createElement("div")
- patch_container.classList.add("d-flex")
- const farming_patch_container = document.querySelectorAll("#panel-farming .farming-plot-wrapper")
- farming_patch_container.forEach((plot) => {
- plot.classList.add("condensed");
- document
- .querySelectorAll("#panel-farming .farming-plot-wrapper img[id^='img-farm_shiny']")
- .forEach(function (el) {
- el.removeAttribute("width");
- el.removeAttribute("height");
- })
- patch_container.appendChild(plot)
- })
- document.getElementById("panel-farming").appendChild(patch_container)
- }
-
- condense_gathering_boxes(){
- const gathering_boxes = document.querySelectorAll("#panel-gathering .gathering-box")
- gathering_boxes.forEach(function (box) {
- box.classList.add("condensed")
- box.querySelector("hr").style.display = "none"
- box.querySelectorAll(".color-silver").forEach(element => {
- element.style.display = "none"
- })
- const unique_items = box.querySelector(".color-orange")
- unique_items.style.display = ""
-
- // Remove new lines after unique items to make progress bar fit.
- let next_sibling = unique_items.nextSibling
- while (next_sibling) {
- if (next_sibling.tagName === "BR") {
- const element_to_remove = next_sibling
- next_sibling = next_sibling.nextSibling
- element_to_remove.remove()
- } else {
- next_sibling = next_sibling.nextSibling
- }
- }
- })
- }
-
- give_images_titles(){
- const images = document.querySelectorAll("img");
- images.forEach(function (el) {
- const src = el.getAttribute("src");
- if (src && src !== "x") {
- const title = src.replace(/.*\//, "").replace(/\.\w+$/, "");
- el.setAttribute("title", title);
- }
- })
- }
-
- create_machinery_arrow_template() {
- const arrow_template_str = `
- <template id="uit_arrow_template">
- <div class="arrow-controls" onclick="event.stopPropagation()">
- <div class="arrow up"></div>
- <item-display data-format="number">1</item-display>
- <div class="arrow down"></div>
- </div>
- </template>
- `
- $("body").append($(arrow_template_str))
- }
-
- add_mining_machine_arrows(){
- const machineryList = [
- "drill",
- "crusher",
- "giant_drill",
- "excavator",
- "giant_excavator",
- "massive_excavator",
- ]
-
- document.querySelector("#panel-mining").classList.add("add-arrow-controls")
-
- const template = document.getElementById("uit_arrow_template")
-
- machineryList.forEach((machine) => {
- const itemBox = document.querySelector(`itembox[data-item=${machine}]`)
- let clone = template.content.cloneNode(true)
- if (itemBox) {
- clone.querySelector(".up").onclick = function (event) {
- event.stopPropagation()
- IdlePixelPlus.sendMessage(`MACHINERY=${machine}~increase`)
- }
-
- clone.querySelector("item-display").setAttribute("data-key", `${machine}_on`)
-
- clone.querySelector(".down").onclick = function (event) {
- event.stopPropagation()
- IdlePixelPlus.sendMessage(`MACHINERY=${machine}~decrease`)
- };
-
- itemBox.appendChild(clone)
- }
- })
- }
-
- make_uuid_clickable() {
- const regex = /\b[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}\b/gi;
- let chatArea = document.getElementById("chat-area");
- let lastMessageElement = chatArea.lastChild;
- let player = lastMessageElement.querySelector('.chat-username').innerText;
-
- if (lastMessageElement && 'innerHTML' in lastMessageElement) {
- let lastMessage = lastMessageElement.innerHTML
- lastMessage = lastMessage.replace(regex, function (match) {
- return `<a href="#" class="raid-link" onclick="IdlePixelPlus.plugins['ui-tweaks-lite'].click_raid_link(event)" data-uuid="${match}">${player} Raid</a>`;
- })
- lastMessageElement.innerHTML = lastMessage;
- }
- }
-
- click_raid_link(event){
- event.preventDefault()
- websocket.send(`JOIN_RAID_TEAM=${event.target.dataset.uuid}`)
- switch_panels('panel-combat');
- document.getElementById('game-panels-combat-items-area').style.display = 'none';
- document.getElementById('combat-stats').style.display = 'none';
- document.getElementById('game-panels-combat-raids').style.display = '';
- }
-
- update_ui(){
- this.condense_woodcutting_patches()
- this.condense_farming_patches()
- this.condense_gathering_boxes()
- this.give_images_titles()
- this.condense_ui()
- this.create_machinery_arrow_template()
- this.add_mining_machine_arrows()
- this.restructure_chat()
- this.move_plugins_button()
-
- document.getElementById("left-panel-item_panel-archery").classList.remove("game-menu-bar-left-table-btn-borderless")
- document.getElementById("left-panel-item_panel-archery").classList.add("game-menu-bar-left-table-btn")
- document.getElementById("left-panel-item_panel-magic").classList.remove("game-menu-bar-left-table-btn-borderless")
- document.getElementById("left-panel-item_panel-magic").classList.add("game-menu-bar-left-table-btn")
-
- let labels = document.getElementById("left-menu-bar-labels");
- labels.style.padding = "unset";
- }
-
- limitChat() {
- const chatArea = document.getElementById("chat-area");
- const chatLength = chatArea.innerHTML.length;
-
- if (chatLength > 190000) {
- const children = chatArea.children;
-
- for (let i = 0; i < 3; i++) {
- try {
- chatArea.removeChild(children[i]);
- } catch (err) {
- console.error("Error cleaning up chat", err);
- }
- }
- }
- }
-
- onLogin() {
- this.get_font_list()
- this.create_settings_modal()
- Paneller.registerPanel("uit_lite_settings", "UIT Lite Settings", IdlePixelPlus.plugins["ui-tweaks-lite"].show_modal);
- this.apply_set_styles()
- this.update_ui()
-
- uitTableLabels().disableTableRefreshBrewing();
- uitTableLabels().Crafting_getMaterials();
- uitTableLabels().Invention_getMaterials();
- uitTableLabels().Modals_changeModal();
-
- onLoginLoaded = true;
- }
-
- onChat(data) {
- IdlePixelPlus.plugins["ui-tweaks-lite"].limitChat()
- this.make_uuid_clickable()
- }
- }
-
- const plugin = new UITweaksPlugin();
- IdlePixelPlus.registerPlugin(plugin);
- })();