☰

IdlePixel UI Tweaks (Lite)

Adds some options to change details about the IdlePixel user interface.

  1. // ==UserScript==
  2. // @name         IdlePixel UI Tweaks (Lite)
  3. // @namespace    luxferre.dev
  4. // @version      0.9.1
  5. // @description  Adds some options to change details about the IdlePixel user interface.
  6. // @author       Lux-Ferre
  7. // @license      MIT
  8. // @match        *://idle-pixel.com/login/play/
  9. // @grant        none
  10. // @require      https://gf.qytechs.cn/scripts/441206-idlepixel/code/IdlePixel+.js?anticache=20250125
  11. // @require		 https://gf.qytechs.cn/scripts/491983-idlepixel-plugin-paneller/code/IdlePixel%2B%20Plugin%20Paneller.js?anticache=20250129
  12. // ==/UserScript==
  13.  
  14. //	Original Author: Anwinity || Original fork by: GodofNades || Rewritten with ♡ by: Lux-ferre
  15.  
  16. (function () {
  17. 	"use strict";
  18.  
  19. 	class UITweaksPlugin extends IdlePixelPlusPlugin {
  20. 		constructor() {
  21. 			super("ui-tweaks-lite", {
  22. 				about: {
  23. 					name: GM_info.script.name + " (ver: " + GM_info.script.version + ")",
  24. 					version: GM_info.script.version,
  25. 					author: GM_info.script.author,
  26. 					description: GM_info.script.description,
  27. 				},
  28. 			})
  29. 			this.loaded = false
  30.  
  31. 			this.get_selectors()
  32. 			this.get_default_colours()
  33. 			this.get_default_settings()
  34. 			this.load_settings()
  35. 			this.generate_user_stylesheet()
  36. 			this.modify_dom()
  37. 			this.replace_yell_method()
  38.  
  39. 			this.smelt_times = {
  40. 				copper: 3 - 1,
  41. 				iron: 6 - 1,
  42. 				silver: 10 - 1,
  43. 				gold: 50 - 1,
  44. 				promethium: 100 - 1,
  45. 				titanium: 500 - 1,
  46. 				ancient_ore: 1800 - 1,
  47. 				dragon_ore: 3600 - 1,
  48. 			}
  49. 			this.smelt_timer = null;
  50. 		}
  51.  
  52. 		create_settings_modal() {
  53. 			const modal_string = `<div class="modal fade" id="uit_settings" tabindex="-1" data-bs-theme="dark">
  54.     <div class="modal-dialog" style="max-width: 50vw; max-height: 75vh; transform: translate(-20%)">
  55.         <div class="modal-content" style="height: 75vh;">
  56.             <ul class="nav nav-tabs" id="controlPanelTabs">
  57.                 <li class="nav-item">
  58.                     <button class="uit_tab_button nav-link active" id="toggles-tab" data-bs-toggle="tab" data-bs-target="#toggles" type="button">
  59.                         <i class="fas fa-toggle-on me-2"></i>Toggles
  60.                     </button>
  61.                 </li>
  62.                 <li class="nav-item">
  63.                     <button class="uit_tab_button nav-link" id="misc-settings-tab" data-bs-toggle="tab" data-bs-target="#misc_settings" type="button">
  64.                         <i class="fas fa-list-check me-2"></i>Misc
  65.                     </button>
  66.                 </li>
  67.                 <li class="nav-item">
  68.                     <button class="uit_tab_button nav-link" id="bg-colours-tab" data-bs-toggle="tab" data-bs-target="#bg_colours" type="button">
  69.                         <i class="fas fa-palette me-2"></i>Background Colours
  70.                     </button>
  71.                 </li>
  72.                 <li class="nav-item">
  73.                     <button class="uit_tab_button nav-link" id="text-colors-tab" data-bs-toggle="tab" data-bs-target="#text_colours" type="button">
  74.                         <i class="fas fa-font me-2"></i>Text Colours
  75.                     </button>
  76.                 </li>
  77.             </ul>
  78.             <div class="px-3">
  79.                 <div class="tab-content mt-3" id="controlPanelTabContent">
  80.                     <div class="tab-pane fade show active" id="toggles">
  81.                         <div class="row g-4 d-flex justify-content-around text-center">
  82.                             <!-- Toggles will be dynamically inserted here -->
  83.                         </div>
  84.                     </div>
  85.                     <div class="tab-pane fade" id="misc_settings">
  86.                         <div class="row g-4 d-flex justify-content-around text-center">
  87.                             <!-- Settings will be dynamically inserted here -->
  88.                         </div>
  89.                     </div>
  90.                     <div class="tab-pane fade" id="bg_colours">
  91.                         <div class="row g-4 d-flex justify-content-around text-center">
  92.                             <!-- Color pickers will be dynamically inserted here -->
  93.                         </div>
  94.                     </div>
  95.                     <div class="tab-pane fade" id="text_colours">
  96.                         <div class="row g-4 d-flex justify-content-around text-center">
  97.                             <!-- Color pickers will be dynamically inserted here -->
  98.                         </div>
  99.                     </div>
  100.                 </div>
  101.             </div>
  102.         </div>
  103.     </div>
  104. </div>`
  105. 			document.body.insertAdjacentHTML("beforeend", modal_string);
  106. 		}
  107.  
  108. 		populate_settings() {
  109. 			this.ps_background_colours()
  110. 			this.ps_text_colours()
  111. 			this.ps_toggles()
  112. 			this.ps_misc()
  113. 		}
  114.  
  115. 		ps_background_colours() {
  116. 			function rgb_to_hex(rgb) {
  117. 				const [r, g, b] = rgb.match(/\d+/g).map(Number);
  118. 				return `#${((1 << 24) | (r << 16) | (g << 8) | b).toString(16).slice(1)}`;
  119. 			}
  120.  
  121. 			function create_colour_picker(colour, self) {
  122. 				let colour_value = self.settings.get(colour.id) || "rgb(0, 0, 0)"
  123. 				if (colour_value.startsWith('rgb')) {
  124. 					colour_value = rgb_to_hex(colour_value)
  125. 				}
  126.  
  127. 				return `
  128.             <div class="col d-flex align-items-center justify-content-center p-1" style="min-width: 250px; max-width: 250px; border: 2px outset gray">
  129.                 <input type="color" class="color-picker form-control me-1" id="uitl_${colour.id}" data-ident="${colour.id}" value="${colour_value}">
  130.                 <label for="uitl_${colour.id}" class="form-label m-0">${colour.label}</label>
  131.             </div>
  132.         `
  133. 			}
  134.  
  135. 			const bg_colours = [
  136. 				{id: "main_background", label: "Main Background"},
  137. 				{id: "panel_background", label: "Panel Background"},
  138. 				{id: "top_bar_background", label: "Top Bar Background"},
  139. 				{id: "upper_stats_bar_background", label: "Upper Stats Bar Background"},
  140. 				{id: "lower_stats_bar_background", label: "Lower Top Bar Background"},
  141. 				{id: "left_bar_background", label: "Left Bar Background"},
  142. 				{id: "chat_inner_background", label: "Chat Inner Background"},
  143. 				{id: "chat_outer_background", label: "Chat Outer Background"},
  144. 				{id: "chat_border", label: "Chat Border"},
  145. 				{id: "server_message_tag", label: "Server Message Tag"},
  146. 				{id: "chat_raid_link_background", label: "Chat Raid Link Background"},
  147. 			]
  148.  
  149. 			const background_container = document.querySelector('#bg_colours .row')
  150. 			background_container.innerHTML = ""
  151.  
  152. 			bg_colours.forEach(colour => {
  153. 				background_container.innerHTML += create_colour_picker(colour, this);
  154. 			})
  155.  
  156. 			background_container.querySelectorAll("input").forEach(input => {
  157. 				const self = IdlePixelPlus.plugins["ui-tweaks-lite"]
  158. 				input.addEventListener("input", (e) => {
  159. 					const ident = e.target.dataset.ident
  160. 					const prop = ident === "chat_border" ? "border-color" : "background-color"
  161. 					self.update_css(self.selector_map[ident], prop, e.target.value)
  162. 					self.update_setting(ident, e.target.value)
  163. 				})
  164. 			})
  165. 		}
  166.  
  167. 		ps_text_colours() {
  168. 			function rgb_to_hex(rgb) {
  169. 				const [r, g, b] = rgb.match(/\d+/g).map(Number);
  170. 				return `#${((1 << 24) | (r << 16) | (g << 8) | b).toString(16).slice(1)}`;
  171. 			}
  172.  
  173. 			function create_colour_picker(colour, self) {
  174. 				let colour_value = self.settings.get(colour.id) || "rgb(0, 0, 0)"
  175. 				if (colour_value.startsWith('rgb')) {
  176. 					colour_value = rgb_to_hex(colour_value)
  177. 				}
  178.  
  179. 				return `
  180.             <div class="col d-flex align-items-center justify-content-center p-1" style="min-width: 250px; max-width: 250px; border: 2px outset gray">
  181.                 <input type="color" class="color-picker form-control me-1" id="uitl_${colour.id}" data-ident="${colour.id}" value="${colour_value}">
  182.                 <label for="uitl_${colour.id}" class="form-label m-0">${colour.label}</label>
  183.             </div>
  184.         `
  185. 			}
  186.  
  187. 			const text_colours = [
  188. 				{id: "chat_text", label: "Chat Text"},
  189. 				{id: "chat_timestamp_text", label: "Chat Timestamp Text"},
  190. 				{id: "chat_username_text", label: "Chat Username Text"},
  191. 				{id: "chat_level_text", label: "Chat Level Text"},
  192. 				{id: "server_message_text", label: "Server Message Text"},
  193. 				{id: "server_message_tag_text", label: "Server Message Tag Text"},
  194. 				{id: "chat_raid_link_text", label: "Chat Raid Link Text"},
  195. 				{id: "panel_text_1", label: "Panel Text 1"},
  196. 				{id: "panel_text_2", label: "Panel Text 2"},
  197. 				{id: "skill_level_text", label: "Skill Level Text"}
  198. 			]
  199.  
  200. 			const text_container = document.querySelector('#text_colours .row');
  201. 			text_container.innerHTML = ""
  202.  
  203. 			text_colours.forEach(colour => {
  204. 				text_container.innerHTML += create_colour_picker(colour, this);
  205. 			})
  206.  
  207. 			text_container.querySelectorAll("input").forEach(input => {
  208. 				const self = IdlePixelPlus.plugins["ui-tweaks-lite"]
  209. 				input.addEventListener("input", (e) => {
  210. 					const ident = e.target.dataset.ident
  211. 					const prop = "color"
  212. 					self.update_css(self.selector_map[ident], prop, e.target.value)
  213. 					self.update_setting(ident, e.target.value)
  214. 				})
  215. 			})
  216. 		}
  217.  
  218. 		ps_toggles() {
  219. 			function createToggle(toggle) {
  220. 				return `
  221.             <div class="col d-flex align-items-center justify-content-center p-1" style="min-width: 250px; max-width: 250px; border: 2px inset gray">
  222.                 <div class="form-check form-switch">
  223.                     <input class="form-check-input me-1" type="checkbox" id="uitl_${toggle.id}">
  224.                     <label class="form-check-label" for="uitl_${toggle.id}">${toggle.label}</label>
  225.                 </div>
  226.             </div>
  227.         `
  228. 			}
  229.  
  230. 			const toggles = [];
  231. 			const toggles_container = document.querySelector('#toggles .row');
  232. 			toggles_container.innerHTML = ""
  233.  
  234. 			toggles.forEach(toggle => {
  235. 				toggles_container.innerHTML += createToggle(toggle);
  236. 			})
  237. 		}
  238.  
  239. 		ps_misc() {
  240. 			const misc_container = document.querySelector('#misc_settings .row');
  241. 			misc_container.innerHTML = ""
  242.  
  243. 			let user_font = this.settings.get("font") || "IdlePixel Default"
  244.  
  245. 			misc_container.innerHTML += `
  246. 				<div class="col d-flex align-items-center justify-content-center p-1" style="min-width: 250px; max-width: 250px; border: 2px outset gray">
  247. 					<label for="font_picker" class="form-label m-0 me-2">Font</label>
  248. 					<select class="form-select font_picker" id="font_picker"></select>
  249. 				</div>
  250. 			`
  251. 			this.font_list.forEach(font => {
  252. 				const selected_attr = font === user_font ? "selected" : ""
  253. 				const option_str = `<option ${selected_attr} value="${font}">${font}</option>`
  254. 				document.getElementById("font_picker").innerHTML += option_str
  255. 			})
  256.  
  257. 			document.getElementById("font_picker").addEventListener("change", function (event) {
  258. 				const self = IdlePixelPlus.plugins["ui-tweaks-lite"]
  259. 				user_font = event.target.value
  260. 				if (user_font === "IdlePixel Default") {
  261. 					user_font = self.default_settings["font"]
  262. 				}
  263. 				self.update_css("body.font-famlies", "font-family", user_font)
  264. 				self.update_css("#chat-area", "font-family", user_font)
  265. 				self.update_setting("font", user_font)
  266. 			});
  267. 		}
  268.  
  269. 		show_modal() {
  270. 			IdlePixelPlus.plugins["ui-tweaks-lite"].populate_settings()
  271. 			$("#uit_settings").modal("show")
  272. 		}
  273.  
  274. 		get_default_colours() {
  275. 			$("#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>`))
  276. 			this.default_colours = {
  277. 				main_background: "rgb(200, 247, 248)",
  278. 				panel_background: getComputedStyle(document.querySelector("#panels")).backgroundColor,
  279. 				top_bar_background: getComputedStyle(document.querySelector(".game-top-bar")).backgroundColor,
  280. 				upper_stats_bar_background: getComputedStyle(document.querySelector(".game-top-bar-lower")).backgroundColor,
  281. 				lower_stats_bar_background: getComputedStyle(document.querySelector(".game-top-bar-optional-lower")).backgroundColor,
  282. 				left_bar_background: getComputedStyle(document.querySelector("#menu-bar")).backgroundColor,
  283. 				chat_inner_background: getComputedStyle(document.querySelector("#chat-area")).backgroundColor,
  284. 				chat_outer_background: getComputedStyle(document.querySelector("#game-chat")).backgroundColor,
  285. 				chat_border: getComputedStyle(document.querySelector("#game-chat.chat.m-3")).borderColor,
  286. 				server_message_tag: getComputedStyle(document.querySelector(".server_message")).backgroundColor,
  287. 				server_message_tag_text: getComputedStyle(document.querySelector(".server_message")).color,
  288. 				chat_text: getComputedStyle(document.querySelector("#chat-area")).color,
  289. 				chat_timestamp_text: "rgb(0, 128, 0)",
  290. 				chat_username_text: getComputedStyle(document.querySelector(".chat-username")).color,
  291. 				chat_level_text: "rgb(128, 128, 128)",
  292. 				server_message_text: getComputedStyle(document.querySelector(".server_message")).color,
  293. 				chat_raid_link_text: "rgb(197 186 186)",
  294. 				chat_raid_link_background: "rgb(139, 0, 0)",
  295. 				panel_text_1: getComputedStyle(document.querySelector("#panels")).color,
  296. 				panel_text_2: "rgb(128, 128, 128)",
  297. 				skill_level_text: getComputedStyle(document.querySelector("#panels .font-large")).color,
  298. 			}
  299. 			const ele = document.getElementById("temp_chat_colour_picker")
  300. 			if (ele) {
  301. 				ele.remove()
  302. 			}
  303. 		}
  304.  
  305. 		get_font_list() {
  306. 			const possible_fonts = new Set(
  307. 				[
  308. 					// Windows 10
  309. 					"Arial",
  310. 					"Arial Black",
  311. 					"Bahnschrift",
  312. 					"Calibri",
  313. 					"Cambria",
  314. 					"Cambria Math",
  315. 					"Candara",
  316. 					"Comic Sans MS",
  317. 					"Consolas",
  318. 					"Constantia",
  319. 					"Corbel",
  320. 					"Courier New",
  321. 					"Ebrima",
  322. 					"Franklin Gothic Medium",
  323. 					"Gabriola",
  324. 					"Gadugi",
  325. 					"Georgia",
  326. 					"HoloLens MDL2 Assets",
  327. 					"Impact",
  328. 					"Ink Free",
  329. 					"Javanese Text",
  330. 					"Leelawadee UI",
  331. 					"Lucida Console",
  332. 					"Lucida Sans Unicode",
  333. 					"Malgun Gothic",
  334. 					"Marlett",
  335. 					"Microsoft Himalaya",
  336. 					"Microsoft JhengHei",
  337. 					"Microsoft New Tai Lue",
  338. 					"Microsoft PhagsPa",
  339. 					"Microsoft Sans Serif",
  340. 					"Microsoft Tai Le",
  341. 					"Microsoft YaHei",
  342. 					"Microsoft Yi Baiti",
  343. 					"MingLiU-ExtB",
  344. 					"Mongolian Baiti",
  345. 					"MS Gothic",
  346. 					"MV Boli",
  347. 					"Myanmar Text",
  348. 					"Nirmala UI",
  349. 					"Palatino Linotype",
  350. 					"Segoe MDL2 Assets",
  351. 					"Segoe Print",
  352. 					"Segoe Script",
  353. 					"Segoe UI",
  354. 					"Segoe UI Historic",
  355. 					"Segoe UI Emoji",
  356. 					"Segoe UI Symbol",
  357. 					"SimSun",
  358. 					"Sitka",
  359. 					"Sylfaen",
  360. 					"Symbol",
  361. 					"Tahoma",
  362. 					"Times New Roman",
  363. 					"Trebuchet MS",
  364. 					"Verdana",
  365. 					"Webdings",
  366. 					"Wingdings",
  367. 					"Yu Gothic",
  368. 					// macOS
  369. 					"American Typewriter",
  370. 					"Andale Mono",
  371. 					"Arial",
  372. 					"Arial Black",
  373. 					"Arial Narrow",
  374. 					"Arial Rounded MT Bold",
  375. 					"Arial Unicode MS",
  376. 					"Avenir",
  377. 					"Avenir Next",
  378. 					"Avenir Next Condensed",
  379. 					"Baskerville",
  380. 					"Big Caslon",
  381. 					"Bodoni 72",
  382. 					"Bodoni 72 Oldstyle",
  383. 					"Bodoni 72 Smallcaps",
  384. 					"Bradley Hand",
  385. 					"Brush Script MT",
  386. 					"Chalkboard",
  387. 					"Chalkboard SE",
  388. 					"Chalkduster",
  389. 					"Charter",
  390. 					"Cochin",
  391. 					"Comic Sans MS",
  392. 					"Copperplate",
  393. 					"Courier",
  394. 					"Courier New",
  395. 					"Didot",
  396. 					"DIN Alternate",
  397. 					"DIN Condensed",
  398. 					"Futura",
  399. 					"Geneva",
  400. 					"Georgia",
  401. 					"Gill Sans",
  402. 					"Helvetica",
  403. 					"Helvetica Neue",
  404. 					"Herculanum",
  405. 					"Hoefler Text",
  406. 					"Impact",
  407. 					"Lucida Grande",
  408. 					"Luminari",
  409. 					"Marker Felt",
  410. 					"Menlo",
  411. 					"Microsoft Sans Serif",
  412. 					"Monaco",
  413. 					"Noteworthy",
  414. 					"Optima",
  415. 					"Palatino",
  416. 					"Papyrus",
  417. 					"Phosphate",
  418. 					"Rockwell",
  419. 					"Savoye LET",
  420. 					"SignPainter",
  421. 					"Skia",
  422. 					"Snell Roundhand",
  423. 					"Tahoma",
  424. 					"Times",
  425. 					"Times New Roman",
  426. 					"Trattatello",
  427. 					"Trebuchet MS",
  428. 					"Verdana",
  429. 					"Zapfino",
  430. 					// other
  431. 					"Helvetica",
  432. 					"Garamond",
  433. 				].sort()
  434. 			)
  435.  
  436. 			this.font_list = []
  437.  
  438. 			for (const font of possible_fonts.values()) {
  439. 				if (document.fonts.check(`12px "${font}"`)) {
  440. 					this.font_list.push(font);
  441. 				}
  442. 			}
  443. 			this.font_list.unshift("IdlePixel Default")
  444. 		}
  445.  
  446. 		get_default_settings() {
  447. 			this.default_settings = {
  448. 				font: getComputedStyle(document.querySelector("body")).fontFamily,
  449. 				good_moon: 300000,
  450. 				good_sun: 120000000
  451. 			}
  452. 		}
  453.  
  454. 		get_selectors() {
  455. 			this.selector_map = {
  456. 				main_background: ".background-game",
  457. 				panel_background: "#panels",
  458. 				top_bar_background: ".game-top-bar",
  459. 				upper_stats_bar_background: ".game-top-bar-lower",
  460. 				lower_stats_bar_background: ".game-top-bar-optional-lower",
  461. 				left_bar_background: "#menu-bar",
  462. 				chat_inner_background: "#chat-area",
  463. 				chat_outer_background: "#game-chat",
  464. 				chat_border: "#game-chat",
  465. 				server_message_tag: ".server_message",
  466. 				server_message_tag_text: ".server_message",
  467. 				chat_text: "#chat-area",
  468. 				chat_timestamp_text: "#chat-area .color-green",
  469. 				chat_username_text: ".chat-username",
  470. 				chat_level_text: "#chat-area .color-grey",
  471. 				server_message_text: ".server_message_text",
  472. 				chat_raid_link_text: ".raid-link",
  473. 				chat_raid_link_background: ".raid-link",
  474. 				panel_text_1: "#panels",
  475. 				panel_text_2: "#panels .color-grey",
  476. 				skill_level_text: "#panels .font-large"
  477. 			}
  478.  
  479. 		}
  480.  
  481. 		load_settings() {
  482. 			this.settings = new Map([
  483. 				...Object.entries(this.default_colours),
  484. 				...Object.entries(this.default_settings),
  485. 			])
  486. 			const stored_settings = localStorage.getItem("uit-lite-settings")
  487. 			if (stored_settings) {
  488. 				const parsed_settings = JSON.parse(stored_settings)
  489. 				this.settings.forEach((value, key) => {
  490. 					if (parsed_settings.hasOwnProperty(key)) {
  491. 						this.settings.set(key, parsed_settings[key])
  492. 					} else {
  493. 						console.log("Unknown setting key: " + key)
  494. 					}
  495. 				})
  496. 				console.log("Lite settings loaded.")
  497. 			} else {
  498. 				const uit_configs = JSON.parse(localStorage.getItem("idlepixelplus.ui-tweaks.config"))
  499. 				if (uit_configs) {
  500. 					console.log("Legacy UIT settings loaded.")
  501. 					try {
  502. 						this.get_uit_configs()
  503. 					} catch (e) {
  504. 						console.error(`Error loading UIT configs: ${e}`)
  505. 					}
  506. 				} else {
  507. 					console.log("Only default settings loaded.")
  508. 				}
  509. 			}
  510. 			this.save_settings()
  511. 		}
  512.  
  513. 		save_settings() {
  514. 			const json_settings = JSON.stringify(Object.fromEntries(this.settings))
  515. 			localStorage.setItem("uit-lite-settings", json_settings)
  516. 		}
  517.  
  518. 		get_uit_configs() {
  519. 			const uit_configs = JSON.parse(localStorage.getItem("idlepixelplus.ui-tweaks.config"))
  520. 			this.settings
  521. 				.set("main_background", uit_configs["color-body"] || this.default_colours.main_background)
  522. 				.set("panel_background", uit_configs["color-panels"] || this.default_colours.panel_background)
  523. 				.set("top_bar_background", uit_configs["color-top-bar"] || this.default_colours.top_bar_background)
  524. 				.set("left_bar_background", uit_configs["color-menu-bar"] || this.default_colours.left_bar_background)
  525. 				.set("chat_inner_background", uit_configs["color-chat-area"] || this.default_colours.chat_inner_background)
  526. 				.set("chat_outer_background", uit_configs["color-game-chat"] || this.default_colours.chat_outer_background)
  527. 				.set("chat_border", uit_configs["chatBorderOverrideColor"] || this.default_colours.chat_border)
  528. 				.set("server_message_tag", uit_configs["color-chat-area-server_message"] || this.default_colours.server_message_tag)
  529. 				.set("server_message_tag_text", uit_configs["serverMessageTextOverrideColor"] || this.default_colours.server_message_tag_text)
  530. 				.set("chat_text", uit_configs["font-color-chat-area"] || this.default_colours.chat_text)
  531. 				.set("chat_timestamp_text", uit_configs["font-color-chat-area-color-green"] || this.default_colours.chat_timestamp_text)
  532. 				.set("chat_username_text", uit_configs["font-color-chat-area-chat-username"] || this.default_colours.chat_username_text)
  533. 				.set("chat_level_text", uit_configs["font-color-chat-area-color-grey"] || this.default_colours.chat_level_text)
  534. 				.set("server_message_text", uit_configs["serverMessageTextOverrideColor"] || this.default_colours.server_message_text)
  535. 				.set("chat_raid_link_text", uit_configs["font-color-chat-area-chat-raid-password"] || this.default_colours.chat_raid_link_text)
  536. 				.set("chat_raid_link_background", uit_configs["background-color-chat-area-raid-password"] || this.default_colours.chat_raid_link_background)
  537. 				.set("panel_text_1", uit_configs["font-color-panels"] || this.default_colours.panel_text_1)
  538. 				.set("panel_text_2", uit_configs["font-color-panels-color-grey"] || this.default_colours.panel_text_2)
  539. 				.set("skill_level_text", uit_configs["font-color-panels-font-large"] || this.default_colours.skill_level_text)
  540. 				.set("font", uit_configs["font"] || this.default_settings.font)
  541. 		}
  542.  
  543. 		apply_set_styles() {
  544. 			const style = document.createElement("style")
  545. 			style.id = "uit-lite-set-styles"
  546. 			style.textContent = `														
  547. 				#content.side-chat #game-chat > :first-child {
  548. 				  display: grid;
  549. 				  column-gap: 0;
  550. 				  row-gap: 0;
  551. 				  grid-template-columns: 1fr;
  552. 				  grid-template-rows: auto 1fr auto;
  553. 				  height: calc(100% - 16px);
  554. 				}
  555. 								
  556. 				.farming-plot-wrapper.condensed {
  557.                   min-width: 115px;
  558. 				  display: flex;
  559. 				  flex-direction: row;
  560. 				  justify-items: flex-start;
  561. 				  width: fit-content;
  562.                   height: unset;
  563.                   min-height: unset;
  564.                   max-height: unset;
  565. 				}
  566. 				
  567. 				.farming-plot-wrapper.condensed > span {
  568. 				  width: 100px;
  569. 				  max-height: 200px;
  570. 				}
  571. 				
  572. 				.farming-plot-wrapper.condensed img {
  573. 				  width: 100px;
  574. 				}
  575. 				
  576. 				#panel-gathering .gathering-box.condensed {
  577. 				  height: 240px;
  578. 				  position: relative;
  579. 				  margin: 4px auto;
  580. 				  padding-left: 4px;
  581. 				  padding-right: 4px;
  582. 				}
  583. 				
  584. 				#panel-gathering .gathering-box.condensed img.gathering-area-image {
  585. 				  position: absolute;
  586. 				  top: 10px;
  587. 				  left: 10px;
  588. 				  width: 68px;
  589. 				  height: 68px;
  590. 				}
  591. 				
  592. 				#panel-mining.add-arrow-controls itembox {
  593. 				  position: relative;
  594. 				}
  595. 				
  596. 				#panel-mining:not(.add-arrow-controls) itembox .arrow-controls {
  597. 				  display: none !important;
  598. 				}
  599. 				
  600. 				itembox .arrow-controls {
  601. 				  position: absolute;
  602. 				  top: 0px;
  603. 				  right: 2px;
  604. 				  height: 100%;
  605. 				  padding: 2px;
  606. 				  display: flex;
  607. 				  flex-direction: column;
  608. 				  justify-content: space-around;
  609. 				  align-items: center;
  610. 				}
  611. 				
  612. 				itembox .arrow {
  613. 				  border: solid white;
  614. 				  border-width: 0 4px 4px 0;
  615. 				  display: inline-block;
  616. 				  padding: 6px;
  617. 				  cursor: pointer;
  618. 				  opacity: 0.85;
  619. 				}
  620. 				
  621. 				itembox .arrow:hover {
  622. 				  opacity: 1;
  623. 				  border-color: yellow;
  624. 				}
  625. 				
  626. 				itembox .arrow.up {
  627. 				  transform: rotate(-135deg);
  628. 				  -webkit-transform: rotate(-135deg);
  629. 				  margin-top: 3px;
  630. 				}
  631. 				
  632. 				itembox .arrow.down {
  633. 				  transform: rotate(45deg);
  634. 				  -webkit-transform: rotate(45deg);
  635. 				  margin-bottom: 3px;
  636. 				}
  637.  
  638.                 .itembox-large {
  639.                   width: 204px;
  640.                   margin-bottom: 15px;
  641.                 }
  642. 								
  643. 				.game-menu-bar-left-table-btn tr
  644. 				{
  645. 				  background-color: transparent !important;
  646. 				  font-size:medium;
  647. 				}
  648. 				
  649. 				.hover-menu-bar-item:hover {
  650. 				  background: unset;
  651. 				  font-size: medium;
  652. 				}
  653. 				
  654. 				.thin-progress-bar {
  655. 				  background:#437b7c !important;
  656. 				  border:0 !important;
  657. 				  height:unset;
  658. 				}
  659. 				
  660. 				.thin-progress-bar-inner {
  661. 				  background:#88e8ea !important;
  662. 				}
  663. 				
  664. 				.game-menu-bar-left-table-btn td{
  665. 				  padding-left:20px !important;
  666. 				  padding:unset;
  667. 				  margin:0px;
  668. 				  font-size:medium;
  669. 				}
  670.  
  671.                 .game-menu-bar-left-table-btn div td{
  672. 				  padding-left:20px !important;
  673. 				  padding:unset;
  674. 				  margin:0px;
  675. 				  font-size:medium;
  676. 				  background-color: transparent !important;
  677. 				}
  678.  
  679. 				.game-menu-bar-left-table-btn {
  680. 				  background-color: transparent !important;
  681. 				}
  682. 				
  683. 				.left-menu-item {
  684. 				  margin-bottom:unset;
  685. 				  font-size:medium;
  686. 				}
  687. 				
  688. 				.left-menu-item > img {
  689. 				  margin-left: 20px;
  690. 				  margin-right: 20px;
  691. 				}
  692. 				
  693. 				.color-picker {
  694. 					width: 40px;
  695. 					height: 40px;
  696. 					padding: 0;
  697. 					border: solid 2px black;
  698. 					border-radius: 50%;
  699. 					cursor: pointer;
  700. 				}
  701. 				.color-picker::-webkit-color-swatch-wrapper {
  702. 					padding: 0;
  703. 				}
  704. 				.color-picker::-webkit-color-swatch {
  705. 					border: none;
  706. 					border-radius: 4px;
  707. 				}
  708. 				.uit_tab_button {
  709. 					border: none;
  710.     				box-shadow: none;
  711.     				border-radius: none;
  712. 				}
  713. 				#uit_settings .active {
  714. 					background-color:inherit !important;
  715. 					color:white !important;
  716. 				}
  717. 				.left_menu_divider {
  718. 					border-bottom: lightgray 1px outset;
  719. 				}
  720. 				#notifications-area {
  721. 					overflow-y: auto;
  722. 					height: 140px;
  723. 				}
  724. 				.uit_hidden {
  725. 					display: none;
  726. 				}	
  727. 				`
  728.  
  729. 			document.head.appendChild(style)
  730. 		}
  731.  
  732. 		generate_user_stylesheet() {
  733. 			const style = document.createElement("style")
  734. 			style.id = "uit-lite-user-styles"
  735. 			style.textContent = `
  736. 				body.font-famlies {
  737. 					font-family: ${this.settings.get("font")};
  738. 				}
  739. 				
  740. 				.background-game {
  741. 					background-color: ${this.settings.get("main_background")};
  742. 				}
  743. 				
  744. 				#panels {
  745. 					background-color: ${this.settings.get("panel_background")};
  746. 					color: ${this.settings.get("panel_text_1")};
  747. 				}
  748. 				
  749. 				.game-top-bar {
  750. 					background-color: ${this.settings.get("top_bar_background")};
  751. 				}
  752. 				
  753. 				.game-top-bar-lower {
  754. 					background-color: ${this.settings.get("upper_stats_bar_background")};
  755. 				}
  756. 				
  757. 				.game-top-bar-optional-lower {
  758. 					background-color: ${this.settings.get("lower_stats_bar_background")};
  759. 				}
  760. 				
  761. 				#menu-bar {
  762. 					background-color: ${this.settings.get("left_bar_background")};
  763. 				}
  764. 				
  765. 				#chat-area {
  766. 					background-color: ${this.settings.get("chat_inner_background")};
  767. 					color: ${this.settings.get("chat_text")};
  768. 					font-family: ${this.settings.get("font")};
  769. 				}
  770. 				
  771. 				#game-chat {
  772. 					background-color: ${this.settings.get("chat_outer_background")};
  773. 					border-color: ${this.settings.get("chat_border")};
  774. 				}
  775. 				
  776. 				.server_message {
  777. 					background-color: ${this.settings.get("server_message_tag")};
  778. 					color: ${this.settings.get("server_message_tag_text")};
  779. 				}
  780. 				
  781. 				.server_message_text {
  782. 					color: ${this.settings.get("server_message_text")};
  783. 				}
  784. 				
  785. 				#chat-area .color-green {
  786. 					color: ${this.settings.get("chat_timestamp_text")};
  787. 				}
  788. 				
  789. 				.chat-username {
  790. 					color: ${this.settings.get("chat_username_text")};
  791. 				}
  792. 				
  793. 				#chat-area .color-grey {
  794. 					color: ${this.settings.get("chat_level_text")};
  795. 				}
  796. 				
  797. 				.raid-link {
  798. 					background-color: ${this.settings.get("chat_raid_link_background")};
  799. 					color: ${this.settings.get("chat_raid_link_text")};
  800. 				}
  801. 				
  802. 				#panels .color-grey {
  803. 					color: ${this.settings.get("panel_text_2")};
  804. 				}
  805. 				
  806. 				#panels .font-large {
  807. 					color: ${this.settings.get("skill_level_text")};
  808. 				}
  809. 				
  810. 				.sun_distance{}
  811. 				.moon_distance{}
  812. 				`
  813.  
  814. 			document.head.appendChild(style)
  815. 		}
  816.  
  817. 		modify_dom() {
  818. 			// DOM modifications to allow stylesheet rule overrides
  819. 			// Removes inline styles from levels on skill panels.
  820. 			document.querySelectorAll("#panels .font-large").forEach(element => {
  821. 				element.removeAttribute("style")
  822. 			})
  823.  
  824. 			const moon_distance = document.getElementById("top-bar-moon-distance")
  825. 			moon_distance.classList.add("moon_distance")
  826. 			moon_distance.removeAttribute("style")
  827. 			document.body.appendChild(document.createElement("div")).id = "top-bar-moon-distance"	// Creates a new element to be targeted by colouration code
  828. 			moon_distance.removeAttribute("id")	// Removes ID to prevent future inline styles being applies
  829.  
  830. 			const sun_distance = document.getElementById("top-bar-sun-distance")
  831. 			sun_distance.classList.add("sun_distance")
  832. 			document.body.appendChild(document.createElement("div")).id = "top-bar-sun-distance"	// Creates a new element to be targeted by colouration code
  833. 			sun_distance.removeAttribute("id")	// Removes ID to prevent future inline styles being applies
  834. 			sun_distance.querySelector("item-display").removeAttribute("id")	// ID is duplicated to inner element. -.-
  835. 		}
  836.  
  837. 		restructure_chat() {
  838. 			const chat = document.querySelector("#game-chat > :first-child");
  839. 			const chatTop = document.createElement("div");
  840. 			chatTop.id = "chat-top";
  841. 			const chatArea = document.querySelector("#chat-area");
  842. 			const chatBottom = document.querySelector(
  843. 				"#game-chat > :first-child > :last-child"
  844. 			);
  845.  
  846. 			while (chat.firstChild) {
  847. 				chatTop.appendChild(chat.firstChild);
  848. 			}
  849.  
  850. 			chat.appendChild(chatTop);
  851. 			chat.appendChild(chatArea);
  852. 			chat.appendChild(chatBottom);
  853. 		}
  854.  
  855. 		show_extended_levels() {
  856. 			window.refresh_skill_levels_menu_bar = function (skill) {
  857. 				const level = get_level(Items.getItem(`${skill}_xp`), true);
  858.  
  859. 				if (level >= 100) {
  860. 					document.getElementById("menu-bar-" + skill + "-level").innerHTML = `<span style='color:cyan;'>Level 100 (${level})</span>`
  861. 				} else {
  862. 					document.getElementById("menu-bar-" + skill + "-level").innerHTML = `Level ${level}`
  863. 				}
  864. 			}
  865.  
  866. 			window.refresh_xp_required_labels = function () {
  867. 				const skills = ["mining", "crafting", "gathering", "farming", "brewing", "woodcutting", "cooking", "fishing", "breeding", "invention", "melee", "archery", "magic"]
  868. 				let global_level = 0
  869.  
  870. 				skills.forEach(skill => {
  871. 					const current_xp = Items.getItem(skill + "_xp");
  872. 					const current_level = get_level(current_xp, true);
  873. 					const xp_required = get_xp_required(current_level + 1);
  874. 					if (current_level >= 100) hide_element("next-level-" + skill + "-xp-required")
  875. 					document.getElementById("next-level-" + skill + "-xp-required").innerHTML = format_number(xp_required - current_xp) + " xp until next level";
  876.  
  877. 					global_level += current_level
  878. 				})
  879. 				window.var_global_level_ext = global_level
  880. 			}
  881.  
  882. 			const ele = document.createElement("span")
  883. 			ele.innerHTML = `(<item-display class="font-small" data-key="global_level_ext"></item-display>)`
  884. 			ele.classList.add("color-silver")
  885. 			document.querySelector(".game-top-bar-upper > a:nth-child(4) > item-display").insertAdjacentElement("afterend", ele)
  886. 		}
  887.  
  888. 		replace_yell_method() {
  889. 			Chat.yell_to_chat_box = function (data) {
  890. 				var data_array = data.split("~");
  891. 				var tag = "Server message";
  892. 				var tag_css_class = tag.toLowerCase().replaceAll(" ", "_");
  893. 				var sigil_image = "none";
  894. 				var usernameSource = data_array[0];
  895. 				var message = data_array[1];
  896.  
  897. 				if (Items.getItem("team_chat_on") == 1 && usernameSource != "none") {
  898. 					var teamUsernames = Items.getItem("team_usernames").split(",");
  899. 					var found = false;
  900. 					for (var i = 0; i < teamUsernames.length; i++) {
  901.  
  902. 						if (teamUsernames[i] == usernameSource) {
  903. 							found = true;
  904. 							break;
  905. 						}
  906. 					}
  907.  
  908. 					if (!found)
  909. 						return;
  910. 				}
  911.  
  912. 				var html = "";
  913. 				html += "<span class='color-green'>" + Chat._get_time() + "</span>";
  914. 				if (sigil_image != "none") html += " <img src='https://cdn.idle-pixel.com/images/" + sigil_image + ".png' /> ";
  915. 				if (tag != "none") html += "<span class='" + tag_css_class + " shadow'>" + tag + "</span> ";
  916. 				html += sanitize_input(message);
  917.  
  918. 				$("#chat-area").append("<div class='server_message_text'>" + html + "</div>")
  919.  
  920. 				if (Chat._auto_scroll)
  921. 					$("#chat-area").scrollTop($("#chat-area")[0].scrollHeight)
  922. 			};
  923. 		}
  924.  
  925. 		move_plugins_button() {
  926. 			document.getElementById("menu-bar-idlepixelplus-icon")?.parentElement.remove()
  927. 			Paneller.registerPanel("idlepixelplus", "IP+ Plugin Settings")
  928. 		}
  929.  
  930. 		update_css(selector, property, new_value) {
  931. 			const stylesheet = document.getElementById("uit-lite-user-styles").sheet
  932. 			const rules = stylesheet.cssRules
  933. 			for (let i = 0; i < rules.length; i++) {
  934. 				const rule = rules[i];
  935. 				if (rule.selectorText === selector) {
  936. 					rule.style.setProperty(property, new_value);
  937. 					break;
  938. 				}
  939. 			}
  940. 		}
  941.  
  942. 		update_setting(setting, value) {
  943. 			IdlePixelPlus.plugins["ui-tweaks-lite"].settings.set(setting, value);
  944. 			IdlePixelPlus.plugins["ui-tweaks-lite"].save_settings()
  945. 		}
  946.  
  947. 		condense_ui() {
  948. 			let leftbar = document.getElementById("menu-bar-buttons");
  949.  
  950. 			let styleElement = document.getElementById("condensed-ui-tweaks");
  951.  
  952. 			if (styleElement) {
  953. 				styleElement.parentNode.removeChild(styleElement);
  954. 			}
  955. 			document
  956. 				.getElementById("menu-bar-buttons")
  957. 				.querySelectorAll(".font-small")
  958. 				.forEach(function (smallFont) {
  959. 					let classInfo = smallFont.className.replaceAll(
  960. 						"font-small",
  961. 						"font-medium"
  962. 					);
  963. 					smallFont.className = classInfo;
  964. 				})
  965.  
  966. 			leftbar.querySelectorAll("img").forEach(function (img) {
  967. 				img.className = "w20";
  968. 			});
  969. 		}
  970.  
  971. 		condense_woodcutting_patches() {
  972. 			let patch_container = document.createElement("div")
  973. 			patch_container.classList.add("d-flex")
  974. 			const woodcutting_plots = document.querySelectorAll("#panel-woodcutting .farming-plot-wrapper")
  975. 			woodcutting_plots.forEach((plot) => {
  976. 				plot.classList.add("condensed")
  977. 				document
  978. 					.querySelectorAll("#panel-woodcutting .farming-plot-wrapper img[id^='img-tree_shiny']")
  979. 					.forEach(function (el) {
  980. 						el.removeAttribute("width");
  981. 						el.removeAttribute("height");
  982. 					})
  983. 				patch_container.appendChild(plot)
  984. 			})
  985. 			document.getElementById("panel-woodcutting").appendChild(patch_container)
  986. 		}
  987.  
  988. 		condense_farming_patches() {
  989. 			let patch_container = document.createElement("div")
  990. 			patch_container.classList.add("d-flex")
  991. 			const farming_patch_container = document.querySelectorAll("#panel-farming .farming-plot-wrapper")
  992. 			farming_patch_container.forEach((plot) => {
  993. 				plot.classList.add("condensed");
  994. 				document
  995. 					.querySelectorAll("#panel-farming .farming-plot-wrapper img[id^='img-farm_shiny']")
  996. 					.forEach(function (el) {
  997. 						el.removeAttribute("width");
  998. 						el.removeAttribute("height");
  999. 					})
  1000. 				patch_container.appendChild(plot)
  1001. 			})
  1002. 			document.getElementById("panel-farming").appendChild(patch_container)
  1003. 		}
  1004.  
  1005. 		condense_gathering_boxes() {
  1006. 			const gathering_boxes = document.querySelectorAll("#panel-gathering .gathering-box")
  1007. 			gathering_boxes.forEach(function (box) {
  1008. 				box.classList.add("condensed")
  1009. 				box.querySelector("hr").style.display = "none"
  1010. 				box.querySelectorAll(".color-silver").forEach(element => {
  1011. 					element.style.display = "none"
  1012. 				})
  1013. 				const unique_items = box.querySelector(".color-orange")
  1014. 				unique_items.style.display = ""
  1015.  
  1016. 				//	Remove new lines after unique items to make progress bar fit.
  1017. 				let next_sibling = unique_items.nextSibling
  1018. 				while (next_sibling) {
  1019. 					if (next_sibling.tagName === "BR") {
  1020. 						const element_to_remove = next_sibling
  1021. 						next_sibling = next_sibling.nextSibling
  1022. 						element_to_remove.remove()
  1023. 					} else {
  1024. 						next_sibling = next_sibling.nextSibling
  1025. 					}
  1026. 				}
  1027. 			})
  1028. 		}
  1029.  
  1030. 		give_images_titles() {
  1031. 			const images = document.querySelectorAll("img");
  1032. 			images.forEach(function (el) {
  1033. 				const src = el.getAttribute("src");
  1034. 				if (src && src !== "x") {
  1035. 					const title = src.replace(/.*\//, "").replace(/\.\w+$/, "");
  1036. 					el.setAttribute("title", title);
  1037. 				}
  1038. 			})
  1039. 		}
  1040.  
  1041. 		add_labels_to_table_items() {
  1042. 			document.querySelectorAll(`#invention-table tbody tr[data-tablette-required]`).forEach(row => {
  1043. 				row.querySelectorAll(`td:nth-child(4) item-invention-table`).forEach(output => {
  1044. 					const label = output.getAttribute("data-materials-item").replaceAll("_", " ")
  1045. 					output.textContent = `${Number(output.textContent).toLocaleString()} (${label})`
  1046. 				})
  1047. 			})
  1048.  
  1049. 			document.querySelectorAll(`#crafting-table tbody tr[data-crafting-item]`).forEach(row => {
  1050. 				row.querySelectorAll(`td:nth-child(3) item-crafting-table`).forEach(output => {
  1051. 					const label = output.getAttribute("data-materials-item").replaceAll("_", " ")
  1052. 					output.textContent = `${Number(output.textContent).toLocaleString()} (${label})`
  1053. 				})
  1054. 			})
  1055.  
  1056. 			document.querySelectorAll(`#brewing-table tbody tr[data-brewing-item]`).forEach(row => {
  1057. 				row.querySelectorAll(`td:nth-child(3) item-brewing-table`).forEach(output => {
  1058. 					const label = output.getAttribute("data-materials-item").replaceAll("_", " ")
  1059. 					output.textContent = `${Number(output.textContent).toLocaleString()} (${label})`
  1060. 				})
  1061. 			})
  1062. 		}
  1063.  
  1064. 		create_machinery_arrow_template() {
  1065. 			const arrow_template_str = `
  1066. 				<template id="uit_arrow_template">
  1067. 					<div class="arrow-controls" onclick="event.stopPropagation()">
  1068. 						<div class="arrow up"></div>
  1069. 						<item-display data-format="number">1</item-display>
  1070. 						<div class="arrow down"></div>
  1071. 					</div>
  1072. 				</template>
  1073. 			`
  1074. 			$("body").append($(arrow_template_str))
  1075. 		}
  1076.  
  1077. 		add_mining_machine_arrows() {
  1078. 			const machineryList = [
  1079. 				"drill",
  1080. 				"crusher",
  1081. 				"giant_drill",
  1082. 				"excavator",
  1083. 				"giant_excavator",
  1084. 				"massive_excavator",
  1085. 			]
  1086.  
  1087. 			document.querySelector("#panel-mining").classList.add("add-arrow-controls")
  1088.  
  1089. 			const template = document.getElementById("uit_arrow_template")
  1090.  
  1091. 			machineryList.forEach((machine) => {
  1092. 				const itemBox = document.querySelector(`itembox[data-item=${machine}]`)
  1093. 				let clone = template.content.cloneNode(true)
  1094. 				if (itemBox) {
  1095. 					clone.querySelector(".up").onclick = function (event) {
  1096. 						event.stopPropagation()
  1097. 						IdlePixelPlus.sendMessage(`MACHINERY=${machine}~increase`)
  1098. 					}
  1099.  
  1100. 					clone.querySelector("item-display").setAttribute("data-key", `${machine}_on`)
  1101.  
  1102. 					clone.querySelector(".down").onclick = function (event) {
  1103. 						event.stopPropagation()
  1104. 						IdlePixelPlus.sendMessage(`MACHINERY=${machine}~decrease`)
  1105. 					};
  1106.  
  1107. 					itemBox.appendChild(clone)
  1108. 				}
  1109. 			})
  1110. 		}
  1111.  
  1112. 		make_uuid_clickable() {
  1113. 			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;
  1114. 			let chatArea = document.getElementById("chat-area");
  1115. 			let lastMessageElement = chatArea.lastChild;
  1116. 			let player = lastMessageElement.querySelector('.chat-username').innerText;
  1117.  
  1118. 			if (lastMessageElement && 'innerHTML' in lastMessageElement) {
  1119. 				let lastMessage = lastMessageElement.innerHTML
  1120. 				lastMessage = lastMessage.replace(regex, function (match) {
  1121. 					return `<a href="#" class="raid-link" onclick="IdlePixelPlus.plugins['ui-tweaks-lite'].click_raid_link(event)" data-uuid="${match}">${player} Raid</a>`;
  1122. 				})
  1123. 				lastMessageElement.innerHTML = lastMessage;
  1124. 			}
  1125. 		}
  1126.  
  1127. 		click_raid_link(event) {
  1128. 			event.preventDefault()
  1129. 			websocket.send(`JOIN_RAID_TEAM=${event.target.dataset.uuid}`)
  1130. 			switch_panels('panel-combat');
  1131. 			document.getElementById('game-panels-combat-items-area').style.display = 'none';
  1132. 			document.getElementById('combat-stats').style.display = 'none';
  1133. 			document.getElementById('game-panels-combat-raids').style.display = '';
  1134. 		}
  1135.  
  1136. 		add_dividers_to_left_menu() {
  1137. 			document.getElementById("left-menu-bar-labels").classList.add("left_menu_divider")
  1138. 			document.getElementById("left-panel-item_panel-teams")?.classList.add("left_menu_divider")
  1139. 			document.getElementById("left-panel-item_panel-magic").classList.add("left_menu_divider")
  1140. 			document.getElementById("left-panel-item_panel-criptoe-market").classList.add("left_menu_divider")
  1141. 		}
  1142.  
  1143. 		clone_dust_pots() {
  1144. 			const dust_pots = document.getElementById("panel-brewing").querySelectorAll(".dust-box")
  1145. 			dust_pots.forEach((element) => {
  1146. 				if (element.dataset.item.startsWith("cooks")) {
  1147. 					const chefs_hat = document.getElementById("panel-cooking").querySelector('itembox[data-item="chefs_hat"]')
  1148. 					const clone = element.cloneNode(true)
  1149. 					chefs_hat.insertAdjacentElement("afterend", clone)
  1150. 					clone.insertAdjacentHTML("beforebegin", `\n\n`)
  1151. 				}
  1152. 				if (element.dataset.item.startsWith("tree")) {
  1153. 					const chop_all_tree = document.getElementById("panel-woodcutting").querySelector('itembox[data-item="chop_all_ent_special"]')
  1154. 					const clone = element.cloneNode(true)
  1155. 					chop_all_tree.insertAdjacentElement("afterend", clone)
  1156. 					clone.insertAdjacentHTML("beforebegin", `\n\n`)
  1157. 				}
  1158. 				if (element.dataset.item.startsWith("fight")) {
  1159. 					const combat_badges = document.getElementById("combat-badge-itembox")
  1160. 					const clone = element.cloneNode(true)
  1161. 					combat_badges.insertAdjacentElement("beforebegin", clone)
  1162. 					clone.insertAdjacentHTML("afterend", `\n\n`)
  1163. 				}
  1164. 				if (element.dataset.item.startsWith("farm")) {
  1165. 					const compactor = document.getElementById("panel-farming").querySelector('itembox[data-item="seed_compactor"]')
  1166. 					const clone = element.cloneNode(true)
  1167. 					compactor.insertAdjacentElement("afterend", clone)
  1168. 					clone.insertAdjacentHTML("beforebegin", `\n\n`)
  1169. 				}
  1170. 			})
  1171. 		}
  1172.  
  1173. 		add_extra_data_to_combat(){
  1174. 			const extra_data = `
  1175. 			<br>
  1176. 			<div class="td-combat-stat-entry">
  1177. 				<img class="img-15" src="https://cdn.idle-pixel.com/images/combat_loot_potion.png" title="combat_loot_potion">
  1178. 				<span style="color:white">Loot Pot: </span>
  1179. 				<span id="combat_info_loot_pot"></span>
  1180. 			</div>
  1181. 			<div class="td-combat-stat-entry">
  1182. 				<img class="img-15" src="https://cdn.idle-pixel.com/images/rare_monster_potion.png" title="rare_monster_potion">
  1183. 				<span style="color:white">Rare Pot: </span>
  1184. 				<span id="combat_info_rare_pot"></span>
  1185. 			</div>
  1186. 			<div class="td-combat-stat-entry">
  1187. 				<img class="img-15" src="https://cdn.idle-pixel.com/images/fight_points.png" title="fight_points">
  1188. 				<span style="color:white">FP: </span>
  1189. 				<span id="combat_info_fps"></span>
  1190. 			</div>
  1191. 			`
  1192. 			document.getElementById("menu-bar-idle-hero-arrows-area-2").insertAdjacentHTML("afterend", extra_data)
  1193. 		}
  1194.  
  1195. 		create_mixer_notification(){
  1196. 			const potion_element = document.getElementById("notification-potion-guardian_key_potion_timer")
  1197. 			let clone = potion_element.cloneNode(true)
  1198. 			clone.id = "uit_notification_mixer"
  1199. 			clone.style = ""
  1200. 			clone.classList.add("hover")
  1201.  
  1202. 			let img = clone.querySelector("img")
  1203. 			img.setAttribute("src", get_image("images/brewing_xp_mixer.png"))
  1204. 			img.setAttribute("title", "Brewing Mixer")
  1205.  
  1206. 			clone.querySelector("item-display").setAttribute("data-key", "next_day_timer")
  1207.  
  1208. 			let span = clone.querySelector("span")
  1209. 			span.id = ""
  1210. 			span.innerHTML = `<item-display data-format="number" data-key="mixer_charges_remaining"></item-display>/5`
  1211.  
  1212. 			clone.onclick = function () {Modals.clicks_brewing_xp_mixer();}
  1213. 			potion_element.insertAdjacentElement("afterend", clone)
  1214. 		}
  1215.  
  1216. 		create_merchant_notification(){
  1217. 			const ready_element = document.getElementById("notification-robot_waves-ready")
  1218. 			let clone = ready_element.cloneNode(true)
  1219. 			clone.id = "uit_notification_merchant"
  1220. 			clone.style.display = ""
  1221.  
  1222. 			let img = clone.querySelector("img")
  1223. 			img.setAttribute("src", get_image("images/merchant.png"))
  1224. 			img.setAttribute("title", "Merchant")
  1225.  
  1226. 			img.insertAdjacentHTML("afterend", `<item-display class="color-white" data-format="timer" data-key="merchant_timer"></item-display>`)
  1227.  
  1228. 			clone.querySelector("span").remove()
  1229.  
  1230. 			clone.onclick = function () {switch_panels("panel-shop");}
  1231.  
  1232. 			ready_element.insertAdjacentElement("afterend", clone)
  1233. 		}
  1234.  
  1235. 		create_oil_notification(){
  1236. 			const notification = `
  1237. 			<div id="uit_notification_oil" class="notification hover">
  1238. 			  <img src="${get_image("images/oil.png")}" class="w20" title="Oil Delta">
  1239. 			  <item-display id="uit_oil_notif_label" class="color-white" data-key="uit_oil_notif_label">0</item-display>
  1240. 			  <item-display id="uit_oil_notif_timer" class="color-white" data-format="timer" data-key="uit_oil_notif_timer">0</item-display>
  1241. 		   	</div>`
  1242. 			document.getElementById("notification-massive_excavator").insertAdjacentHTML("afterend", notification)
  1243. 		}
  1244.  
  1245. 		update_oil_notification(){
  1246. 			const oil = parseInt(window.var_oil)
  1247. 			const oil_delta = parseInt(window.var_oil_in) - parseInt(window.var_oil_out)
  1248. 			window.var_oil_delta = `${oil_delta}`
  1249. 			const max_oil = parseInt(window.var_max_oil)
  1250. 			window.var_uit_oil_notif_label = ""
  1251. 			if (oil_delta===0){
  1252. 				window.var_uit_oil_notif_label = "Balanced"
  1253. 				document.getElementById("uit_oil_notif_timer").style.display = "none"
  1254. 			} else if (oil_delta>0){
  1255. 				if(oil >= max_oil){
  1256. 					window.var_uit_oil_notif_label = "Oil Full"
  1257. 					document.getElementById("uit_oil_notif_timer").style.display = "none"
  1258. 				} else {
  1259. 					window.var_uit_oil_notif_label = "Oil Increasing"
  1260. 					window.var_uit_oil_notif_timer = `${(max_oil - oil) / oil_delta}`
  1261. 					document.getElementById("uit_oil_notif_timer").style.display = ""
  1262. 					document.getElementById("uit_oil_notif_timer").style.color = "green"
  1263. 				}
  1264. 			} else {
  1265. 				if(oil <= 0){
  1266. 					window.var_uit_oil_notif_label = "Oil Empty"
  1267. 					document.getElementById("uit_oil_notif_timer").style.display = "none"
  1268. 				} else {
  1269. 					window.var_uit_oil_notif_label = "Oil Decreasing"
  1270. 					window.var_uit_oil_notif_timer = `${oil / -oil_delta}`
  1271. 					document.getElementById("uit_oil_notif_timer").style.display = ""
  1272. 					document.getElementById("uit_oil_notif_timer").style.color = "red"
  1273. 				}
  1274. 			}
  1275. 		}
  1276.  
  1277. 		add_timer_to_smelt_notification(){
  1278. 			const timer_html = ` (<item-display class="color-white" data-format="timer" data-key="furnace_timer_remaining"></item-display>)`
  1279. 			document.getElementById("notification-furnace-running").querySelector("span").insertAdjacentHTML("afterend", timer_html)
  1280. 		}
  1281.  
  1282. 		handle_smelt_timer(valueBefore, valueAfter){
  1283. 			if(valueAfter === "none"){
  1284. 				if(this.smelt_timer){
  1285. 					clearInterval(this.smelt_timer)
  1286. 					this.smelt_timer = null
  1287. 				}
  1288. 			} else if (valueBefore !== valueAfter && valueAfter) {
  1289. 				const bar_time = this.smelt_times[valueAfter]
  1290. 				const bars_to_smelt = parseInt(window.var_furnace_ore_amount_set)
  1291. 				if(this.smelt_timer){	// Just in case
  1292. 					clearInterval(this.smelt_timer)
  1293. 					this.smelt_timer = null
  1294. 				}
  1295. 				window.var_furnace_timer_remaining = `${bar_time * bars_to_smelt}`
  1296. 				this.smelt_timer = setInterval(() => {
  1297. 					const new_time = parseInt(window.var_furnace_timer_remaining) - 1
  1298. 					window.var_furnace_timer_remaining = `${new_time}`
  1299.  
  1300. 					if(new_time <= 0){
  1301. 						clearInterval(this.smelt_timer)
  1302. 						this.smelt_timer = null
  1303. 					}
  1304. 				}, 1000)
  1305. 			}
  1306. 		}
  1307.  
  1308. 		hide_active_machinery(){
  1309. 			const machinery_list = ["drill", "crusher", "giant_drill", "excavator", "giant_excavator", "massive_excavator"]
  1310.  
  1311. 			machinery_list.forEach(machine => {
  1312. 				document.getElementById(`notification-${machine}`).classList.add("uit_hidden")
  1313. 			})
  1314. 		}
  1315.  
  1316. 		fix_left_menu(){
  1317. 			document.getElementById("left-panel-item_panel-archery").classList.remove("game-menu-bar-left-table-btn-borderless")
  1318. 			document.getElementById("left-panel-item_panel-archery").classList.add("game-menu-bar-left-table-btn")
  1319. 			document.getElementById("left-panel-item_panel-magic").classList.remove("game-menu-bar-left-table-btn-borderless")
  1320. 			document.getElementById("left-panel-item_panel-magic").classList.add("game-menu-bar-left-table-btn")
  1321.  
  1322. 			let labels = document.getElementById("left-menu-bar-labels");
  1323. 			labels.style.padding = "unset";
  1324. 		}
  1325.  
  1326. 		create_left_menu_extras(){
  1327. 			const container_html = `<div style="padding: unset;" class="left_menu_divider" id="left_menu_extras"></div>`
  1328. 			document.getElementById("left-menu-bar-labels").insertAdjacentHTML("afterend", container_html)
  1329.  
  1330. 			const rocket_html = `<div style="padding: unset;" class="left_menu_divider" id="left_menu_rocket_extras"></div>`
  1331. 			document.getElementById("left_menu_extras").insertAdjacentHTML("afterend", rocket_html)
  1332.  
  1333. 			const lower_top_bar = document.getElementById("top-menu-bar-optional-labels")
  1334.  
  1335. 			const top_extras = lower_top_bar.querySelectorAll(".top-bar-entry")
  1336.  
  1337. 			top_extras.forEach(element => {
  1338. 				let new_element = element.cloneNode(true);
  1339. 				const orig_id = new_element.id
  1340. 				new_element.id = ""
  1341. 				new_element.classList.remove("top-bar-entry")
  1342. 				new_element.classList.add("left-menu-item")
  1343.  
  1344. 				if(orig_id.startsWith("rocket")){
  1345. 					new_element.classList.add("hover")
  1346. 					new_element.setAttribute("onclick", "Modals.clicks_rocket()")
  1347. 					document.getElementById("left_menu_rocket_extras").appendChild(new_element)
  1348. 				} else {
  1349. 					document.getElementById("left_menu_extras").appendChild(new_element)
  1350. 				}
  1351. 			})
  1352.  
  1353. 			this.update_css(".game-top-bar-optional-lower", "display", "none")
  1354. 		}
  1355.  
  1356. 		purple_key_extras(){
  1357. 			const purple_key_element = document.getElementById("guardian-key-3-extra-label")
  1358.  
  1359. 			purple_key_element.classList.add("hover")
  1360.  
  1361. 			purple_key_element.setAttribute("onclick", `websocket.send("CASTLE_MISC=guardian_purple_key_hint")`)
  1362.  
  1363. 			const timer_html = ` ⏲️<item-display data-format="timer" data-key="nades_purple_key_timer"></item-display>`
  1364. 			purple_key_element.querySelector("span").insertAdjacentHTML("afterend", timer_html)
  1365. 		}
  1366.  
  1367. 		rocket_extras(){
  1368. 			const top_moon = document.getElementById("rocket-distance-extra-label-moon")
  1369. 			top_moon.classList.add("hover")
  1370. 			top_moon.setAttribute("onclick", "Modals.clicks_rocket()")
  1371.  
  1372. 			const top_sun = document.getElementById("rocket-distance-extra-label-sun")
  1373. 			top_sun.classList.add("hover")
  1374. 			top_sun.setAttribute("onclick", "Modals.clicks_rocket()")
  1375.  
  1376. 			const fuel_element = $.parseHTML(
  1377. 				`<div class="left-menu-item hover" id="left_menu_fuel">
  1378. 						<img src="${get_image("images/rocket_fuel.png")}" title="fuel" class="w20">
  1379. 						<span>Rocket Fuel - </span>
  1380. 						<item-display data-format="number" data-key="rocket_fuel"></item-display>
  1381.                 	</div>`
  1382. 			)
  1383. 			const rocket_container = $("#left_menu_rocket_extras")
  1384. 			rocket_container.append(fuel_element)
  1385.  
  1386. 			document.getElementById("left_menu_fuel").addEventListener("click", ()=>{
  1387. 				Modals.open_input_dialogue("rocket_fuel", "Crafting", "How many do you want to craft?", "CRAFT")
  1388. 			})
  1389.  
  1390. 			const rocket_pot_element = $.parseHTML(
  1391. 				`<div class="left-menu-item hover" id="left_menu_rocket_pot">
  1392. 						<img src="${get_image("images/rocket_potion.png")}" title="rocket potion" class="w20">
  1393. 						<span>Rocket Potion - </span>
  1394. 						<item-display data-format="number" data-key="rocket_potion"></item-display>
  1395.                 	</div>`
  1396. 			)
  1397. 			rocket_container.append(rocket_pot_element)
  1398.  
  1399. 			document.getElementById("left_menu_rocket_pot").addEventListener("click", ()=>{
  1400. 				if(window.var_rocket_potion > 0){
  1401. 					Brewing.potion_clicked("rocket_potion")
  1402. 				} else {
  1403. 					Modals.open_brew_dialogue("rocket_potion")
  1404. 				}
  1405. 			})
  1406. 		}
  1407.  
  1408. 		update_moon_colour(){
  1409. 			const moon_dist = parseInt(window.var_moon_distance)
  1410. 			if(moon_dist <= this.settings.get("good_moon")){
  1411. 				this.update_css(".moon_distance", "color", "lime")
  1412. 			} else {
  1413. 				this.update_css(".moon_distance", "color", "red")
  1414. 			}
  1415. 		}
  1416.  
  1417. 		update_sun_colour(){
  1418. 			const sun_dist = parseInt(window.var_sun_distance)
  1419. 			if(sun_dist <= this.settings.get("good_sun")){
  1420. 				this.update_css(".sun_distance", "color", "lime")
  1421. 			} else {
  1422. 				this.update_css(".sun_distance", "color", "red")
  1423. 			}
  1424. 		}
  1425.  
  1426. 		update_ui() {
  1427. 			this.condense_woodcutting_patches()
  1428. 			this.condense_farming_patches()
  1429. 			this.condense_gathering_boxes()
  1430. 			this.give_images_titles()
  1431. 			this.add_labels_to_table_items()
  1432. 			this.condense_ui()
  1433. 			this.create_machinery_arrow_template()
  1434. 			this.add_mining_machine_arrows()
  1435. 			this.restructure_chat()
  1436. 			this.move_plugins_button()
  1437. 			this.show_extended_levels()
  1438. 			this.add_dividers_to_left_menu()
  1439. 			this.clone_dust_pots()
  1440. 			this.add_extra_data_to_combat()
  1441. 			this.hide_active_machinery()
  1442. 			this.create_mixer_notification()
  1443. 			this.create_merchant_notification()
  1444. 			this.fix_left_menu()
  1445. 			this.create_oil_notification()
  1446. 			this.add_timer_to_smelt_notification()
  1447. 			this.purple_key_extras()
  1448. 			this.create_left_menu_extras()
  1449. 			this.rocket_extras()
  1450. 		}
  1451.  
  1452. 		criptoe_extras(){
  1453. 			const clock = `<item-display data-format="timer" data-key="utc_time"></item-display>`
  1454. 			document.getElementById("criptoe_path_selected-left-label").insertAdjacentHTML("beforebegin", clock)
  1455. 			const now = new Date()
  1456. 			window.var_utc_time = `${now.getUTCHours() * 3600 + now.getUTCMinutes() * 60 + now.getUTCSeconds()}`
  1457.  
  1458. 			this.utc_clock = setInterval(() => {
  1459. 				let new_time = parseInt(window.var_utc_time) + 1
  1460. 				if (new_time >= 86400){
  1461. 					new_time = 0
  1462. 				}
  1463. 				window.var_utc_time = `${new_time}`
  1464. 			}, 1000)
  1465.  
  1466. 			const wallets = document.getElementById("panel-criptoe-market").querySelectorAll(".CToe-chart-table")
  1467. 			wallets.forEach((wallet, idx)=>{
  1468. 				const previous_element = wallet.querySelector("item-display")
  1469. 				const returns_element = `<br><b>Current Payout: </b><span id="wallet_${idx+1}_payout"></span>`
  1470. 				previous_element.insertAdjacentHTML("afterend", returns_element)
  1471. 			})
  1472. 		}
  1473.  
  1474. 		update_criptoe_payouts(){
  1475. 			const test = document.getElementById(`criptoe-wallet-1-percentage`).innerText
  1476. 			if(test==="%0.00"){
  1477. 				setTimeout(IdlePixelPlus.plugins["ui-tweaks-lite"].update_criptoe_payouts, 1000)
  1478. 				return
  1479. 			}
  1480. 			const wallets = document.getElementById("panel-criptoe-market").querySelectorAll(".CToe-chart-table")
  1481. 			wallets.forEach((wallet, idx)=>{
  1482. 				let payout
  1483. 				const invested = parseInt(window[`var_wallet${idx+1}_invested`]) || 0
  1484.  
  1485. 				if (invested===0){
  1486. 					payout = "No investment"
  1487. 				} else {
  1488. 					let percentage = document.getElementById(`criptoe-wallet-${idx+1}-percentage`).innerText.split(" ")[0]
  1489. 					percentage = 1 + (parseFloat(percentage) / 100)
  1490.  
  1491. 					if (percentage <= -100) {
  1492. 						payout = "No return"
  1493. 					} else {
  1494. 						payout = `${Math.floor(percentage * invested).toLocaleString()}`
  1495. 					}
  1496. 				}
  1497.  
  1498. 				document.getElementById(`wallet_${idx+1}_payout`).innerText = payout
  1499. 			})
  1500. 		}
  1501.  
  1502. 		limitChat() {
  1503. 			const chatArea = document.getElementById("chat-area");
  1504. 			const chatLength = chatArea.innerHTML.length;
  1505.  
  1506. 			if (chatLength > 190000) {
  1507. 				const children = chatArea.children;
  1508.  
  1509. 				for (let i = 0; i < 3; i++) {
  1510. 					try {
  1511. 						chatArea.removeChild(children[i]);
  1512. 					} catch (err) {
  1513. 						console.error("Error cleaning up chat", err);
  1514. 					}
  1515. 				}
  1516. 			}
  1517. 		}
  1518.  
  1519. 		onLogin() {
  1520. 			Paneller.registerPanel("uit_lite_settings", "UIT Lite Settings", IdlePixelPlus.plugins["ui-tweaks-lite"].show_modal)
  1521. 			this.get_font_list()
  1522. 			this.create_settings_modal()
  1523. 			this.apply_set_styles()
  1524. 			this.update_ui()
  1525. 			this.criptoe_extras()
  1526.  
  1527. 			window.var_mixer_charges_remaining = 5
  1528. 			window.var_uit_oil_notif_label = "Balanced"
  1529.  
  1530. 			this.loaded = true
  1531. 		}
  1532.  
  1533. 		onChat(data) {
  1534. 			IdlePixelPlus.plugins["ui-tweaks-lite"].limitChat()
  1535. 			this.make_uuid_clickable()
  1536. 		}
  1537.  
  1538. 		onPanelChanged(panelBefore, panelAfter) {
  1539. 			if (panelAfter === "combat-canvas-raids" || panelAfter === "combat-canvas") {
  1540. 				document.getElementById("game-chat").style.display = ""
  1541. 			}
  1542. 			if (panelAfter === "combat-canvas") {
  1543. 				document.getElementById("combat_info_fps").textContent = window.var_fight_points
  1544. 				document.getElementById("combat_info_rare_pot").textContent = window.var_rare_monster_potion_timer || "Inactive"
  1545. 				document.getElementById("combat_info_loot_pot").textContent = window.var_combat_loot_potion_active === "1" ? "Active" : "Inactive"
  1546. 			}
  1547. 			if (panelAfter === "criptoe-market"){
  1548. 				this.update_criptoe_payouts()
  1549. 			}
  1550. 		}
  1551.  
  1552. 		onVariableSet(key, valueBefore, valueAfter)  {
  1553. 			if(!this.loaded){return;}
  1554. 			if (Globals.currentPanel === "panel-combat-canvas") {
  1555. 				if (key === "fight_points") {
  1556. 					document.getElementById("combat_info_fps").textContent = `${valueAfter.toLocaleString()}`
  1557. 				} else if (key === "rare_monster_potion_timer") {
  1558. 					document.getElementById("combat_info_rare_pot").textContent = valueAfter
  1559. 				} else if (key === "combat_loot_potion_active") {
  1560. 					document.getElementById("combat_info_loot_pot").textContent = valueAfter === "1" ? "Active" : "Inactive"
  1561. 				}
  1562. 			}
  1563.  
  1564. 			if (key==="playtime"){
  1565. 				window.var_next_day_timer = 86400 - valueAfter % 86400
  1566. 			}
  1567. 			else if (key==="brewing_xp_mixer_used"){
  1568. 				window.var_mixer_charges_remaining = 5 - valueAfter
  1569. 			}
  1570. 			else if (key === "oil"){
  1571. 				this.update_oil_notification()
  1572. 			}
  1573. 			else if (key === "furnace_ore_type"){
  1574. 				this.handle_smelt_timer(valueBefore, valueAfter)
  1575. 			}
  1576. 			else if (key === "moon_distance"){
  1577. 				this.update_moon_colour()
  1578. 			}
  1579. 			else if (key === "sun_distance"){
  1580. 				this.update_sun_colour()
  1581. 			}
  1582. 		}
  1583. 	}
  1584.  
  1585. 	const plugin = new UITweaksPlugin();
  1586. 	IdlePixelPlus.registerPlugin(plugin);
  1587. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址