Adds some options to change details about the IdlePixel user interface.
目前為
// ==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://gf.qytechs.cn/scripts/441206-idlepixel/code/IdlePixel+.js?anticache=20250125
// @require https://gf.qytechs.cn/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);
})();
QingJ © 2025
镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址