☰

IdlePixel UI Tweaks

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

目前为 2022-09-22 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name         IdlePixel UI Tweaks
  3. // @namespace    com.anwinity.idlepixel
  4. // @version      1.3.17
  5. // @description  Adds some options to change details about the IdlePixel user interface.
  6. // @author       Anwinity
  7. // @license      MIT
  8. // @match        *://idle-pixel.com/login/play*
  9. // @grant        none
  10. // @require      https://greasyfork.org/scripts/441206-idlepixel/code/IdlePixel+.js?anticache=20220905
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.  
  16.     const LEVELS = function(){
  17.         let result = [];
  18.         result[1] = 0;
  19.         for(let lv = 2; lv <= 100; lv++) {
  20.             result[lv] = Math.ceil(Math.pow(lv, 3+(lv/200)));
  21.         }
  22.         return result;
  23.     }();
  24.  
  25.     function xpToLevel(xp) {
  26.         if(xp <= 0) {
  27.             return 1;
  28.         }
  29.         if(xp >= LEVELS[100]) {
  30.             return 100;
  31.         }
  32.         let lower = 1;
  33.         let upper = 100;
  34.         while(lower <= upper) {
  35.             let mid = Math.floor((lower + upper) / 2);
  36.             let midXP = LEVELS[mid];
  37.             let midPlus1XP = LEVELS[mid+1];
  38.             if(xp < midXP) {
  39.                 upper = mid;
  40.                 continue;
  41.             }
  42.             if(xp > midPlus1XP) {
  43.                 lower=mid+1;
  44.                 continue;
  45.             }
  46.             if(mid<100 && xp == LEVELS[mid+1]) {
  47.                 return mid+1;
  48.             }
  49.             return mid;
  50.         }
  51.     }
  52.  
  53.  
  54.     // will be overwritten if data available in IdlePixelPlus.info
  55.     const SMELT_TIMES = {
  56.         copper: 3 - 1,
  57.         iron: 6 - 1,
  58.         silver: 15 - 1,
  59.         gold: 50 - 1,
  60.         promethium: 100 - 1
  61.     };
  62.  
  63.     const IMAGE_URL_BASE = $("itembox[data-item=copper] img").attr("src").replace(/\/[^/]+.png$/, "");
  64.     const FONTS = [];
  65.     const FONT_DEFAULT = "IdlePixel Default";
  66.     const FONT_FAMILY_DEFAULT = "pixel, \"Courier New\", Courier, monospace";
  67.     (async() => {
  68.         const FONTS_CHECK = new Set([
  69.             // Windows 10
  70.             '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',
  71.             // macOS
  72.             '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',
  73.             // other
  74.             'Helvetica', 'Garamond',
  75.         ].sort());
  76.         await document.fonts.ready;
  77.         for(const font of FONTS_CHECK.values()) {
  78.             if (document.fonts.check(`12px "${font}"`)) {
  79.                 FONTS.push(font);
  80.             }
  81.         }
  82.         FONTS.unshift("IdlePixel Default");
  83.     })();
  84.  
  85.     const BG_COLORS = {
  86.         "#chat-area .server_message": "",
  87.         "body": 'rgb(200, 247, 248)',
  88.         ".top-bar": $(".top-bar").css("background-color"),
  89.         "#menu-bar": $("#menu-bar").css("background-color"),
  90.         "#chat-area": $("#chat-area").css("background-color"),
  91.         "#game-chat": $("#game-chat").css("background-color"),
  92.         "#panels": $("#panels").css("background-color"),
  93.     };
  94.  
  95.     const FONT_COLORS = {
  96.         "#chat-area .server_message": "",
  97.         "#chat-area": $("#chat-area").css("color"),
  98.         "#chat-area .color-green": $("#chat-area .color-green").css("color"),
  99.         "#chat-area .color-grey": $("#chat-area .color-grey").css("color"),
  100.         "#chat-area .chat-username": $("#chat-area .chat-username").css("color"),
  101.         "#panels": $("#panels").css("color"),
  102.         "#panels .color-grey": $("#panels .color-grey").css("color"),
  103.     };
  104.  
  105.     const CHAT_UPDATE_FILTER = [
  106.         "#chat-area",
  107.         "#chat-area .color-green",
  108.         "#chat-area .color-grey",
  109.         "#chat-area .chat-username",
  110.         "#chat-area .server_message"
  111.     ];
  112.  
  113.     const PANEL_UPDATE_FILTER = [
  114.         "#panels"
  115.     ];
  116.  
  117.     class UITweaksPlugin extends IdlePixelPlusPlugin {
  118.         constructor() {
  119.             super("ui-tweaks", {
  120.                 about: {
  121.                     name: GM_info.script.name,
  122.                     version: GM_info.script.version,
  123.                     author: GM_info.script.author,
  124.                     description: GM_info.script.description
  125.                 },
  126.                 config: [
  127.                     {
  128.                         label: "General Stuff",
  129.                         type: "label"
  130.                     },
  131.                     {
  132.                         id: "font",
  133.                         label: "Primary Font",
  134.                         type: "select",
  135.                         options: FONTS,
  136.                         default: FONT_DEFAULT
  137.                     },
  138.                     {
  139.                         id: "sideChat",
  140.                         label: "Side Chat",
  141.                         type: "boolean",
  142.                         default: false
  143.                     },
  144.                     {
  145.                         id: "chatLimit",
  146.                         label: "Chat Message Limit (&leq; 0 means no limit)",
  147.                         type: "int",
  148.                         min: -1,
  149.                         max: 5000,
  150.                         default: 0
  151.                     },
  152.                     {
  153.                         id: "imageTitles",
  154.                         label: "Image Mouseover",
  155.                         type: "boolean",
  156.                         default: true
  157.                     },
  158.                     {
  159.                         id: "heatInFishingTab",
  160.                         label: "Heat In Fishing Tab",
  161.                         type: "boolean",
  162.                         default: true
  163.                     },
  164.                     {
  165.                         id: "fightPointsStats",
  166.                         label: "Fight Points in Left Menu",
  167.                         type: "boolean",
  168.                         default: true
  169.                     },
  170.                     {
  171.                         id: "miningMachineArrows",
  172.                         label: "Mining Machine Arrows",
  173.                         type: "boolean",
  174.                         default: true
  175.                     },
  176.                     {
  177.                         id: "oilSummaryMining",
  178.                         label: "Oil Summary, Mining Panel",
  179.                         type: "boolean",
  180.                         default: true
  181.                     },
  182.                     {
  183.                         id: "oilSummaryCrafting",
  184.                         label: "Oil Summary, Crafting Panel",
  185.                         type: "boolean",
  186.                         default: true
  187.                     },
  188.                     {
  189.                         id: "smeltingNotificationTimer",
  190.                         label: "Smelting Notification Timer",
  191.                         type: "boolean",
  192.                         default: true
  193.                     },
  194.                     {
  195.                         id: "lowerToast",
  196.                         label: "Lower Toast (top-right popup)",
  197.                         type: "boolean",
  198.                         default: false
  199.                     },
  200.                     {
  201.                         id: "condenseWoodcuttingPatches",
  202.                         label: "Condensed Woodcutting Patches",
  203.                         type: "boolean",
  204.                         default: false
  205.                     },
  206.                     {
  207.                         id: "condenseFarmingPatches",
  208.                         label: "Condensed Farming Patches",
  209.                         type: "boolean",
  210.                         default: false
  211.                     },
  212.                     {
  213.                         id: "condenseGatheringBoxes",
  214.                         label: "Condensed Gathering Boxes",
  215.                         type: "boolean",
  216.                         default: false
  217.                     },
  218.                     {
  219.                         label: "Notifications",
  220.                         type: "label"
  221.                     },
  222.                     {
  223.                         id: "oilFullNotification",
  224.                         label: "Oil Full",
  225.                         type: "boolean",
  226.                         default: true
  227.                     },
  228.                     {
  229.                         label: "BG Color Overrides",
  230.                         type: "label"
  231.                     },
  232.                     {
  233.                         id: "color-enabled-body",
  234.                         label: "Main Background: Enabled",
  235.                         type: "boolean",
  236.                         default: false
  237.                     },
  238.                     {
  239.                         id: "color-body",
  240.                         label: "Main Background: Color",
  241.                         type: "color",
  242.                         default: BG_COLORS["body"]
  243.                     },
  244.                     {
  245.                         id: "color-enabled-panels",
  246.                         label: "Panel Background: Enabled",
  247.                         type: "boolean",
  248.                         default: false
  249.                     },
  250.                     {
  251.                         id: "color-panels",
  252.                         label: "Panel Background: Color",
  253.                         type: "color",
  254.                         default: BG_COLORS["#panels"]
  255.                     },
  256.                     {
  257.                         id: "color-enabled-top-bar",
  258.                         label: "Top Background: Enabled",
  259.                         type: "boolean",
  260.                         default: false
  261.                     },
  262.                     {
  263.                         id: "color-top-bar",
  264.                         label: "Top Background: Color",
  265.                         type: "color",
  266.                         default: BG_COLORS[".top-bar"]
  267.                     },
  268.                     {
  269.                         id: "color-enabled-menu-bar",
  270.                         label: "Menu Background: Enabled",
  271.                         type: "boolean",
  272.                         default: false
  273.                     },
  274.                     {
  275.                         id: "color-menu-bar",
  276.                         label: "Menu Background: Color",
  277.                         type: "color",
  278.                         default: BG_COLORS["#menu-bar"]
  279.                     },
  280.                     {
  281.                         id: "color-enabled-chat-area",
  282.                         label: "Inner Chat BG: Enabled",
  283.                         type: "boolean",
  284.                         default: false
  285.                     },
  286.                     {
  287.                         id: "color-chat-area",
  288.                         label: "Inner Chat BG: Color",
  289.                         type: "color",
  290.                         default: BG_COLORS["#chat-area"]
  291.                     },
  292.                     {
  293.                         id: "color-enabled-game-chat",
  294.                         label: "Outer Chat BG: Enabled",
  295.                         type: "boolean",
  296.                         default: false
  297.                     },
  298.                     {
  299.                         id: "color-game-chat",
  300.                         label: "Outer Chat BG: Color",
  301.                         type: "color",
  302.                         default: BG_COLORS["#game-chat"]
  303.                     },
  304.                     {
  305.                         id: "color-enabled-chat-area-server_message",
  306.                         label: "Server Message Tag: Enabled",
  307.                         type: "boolean",
  308.                         default: false
  309.                     },
  310.                     {
  311.                         id: "color-chat-area-server_message",
  312.                         label: "Server Message Tag: Color",
  313.                         type: "color",
  314.                         default: BG_COLORS["#chat-area .server_message"]
  315.                     },
  316.                     {
  317.                         label: "Text Color Overrides",
  318.                         type: "label"
  319.                     },
  320.                     {
  321.                         id: "font-color-enabled-chat-area",
  322.                         label: "Chat Text: Enabled",
  323.                         type: "boolean",
  324.                         default: false
  325.                     },
  326.                     {
  327.                         id: "font-color-chat-area",
  328.                         label: "Chat Text: Color",
  329.                         type: "color",
  330.                         default: FONT_COLORS["#chat-area"]
  331.                     },
  332.                     {
  333.                         id: "font-color-enabled-chat-area-color-green",
  334.                         label: "Chat Timestamp: Enabled",
  335.                         type: "boolean",
  336.                         default: false
  337.                     },
  338.                     {
  339.                         id: "font-color-chat-area-color-green",
  340.                         label: "Chat Timestamp: Color",
  341.                         type: "color",
  342.                         default: FONT_COLORS["#chat-area .color-green"]
  343.                     },
  344.                     {
  345.                         id: "font-color-enabled-chat-area-chat-username",
  346.                         label: "Chat Username: Enabled",
  347.                         type: "boolean",
  348.                         default: false
  349.                     },
  350.                     {
  351.                         id: "font-color-chat-area-chat-username",
  352.                         label: "Chat Username: Color",
  353.                         type: "color",
  354.                         default: FONT_COLORS["#chat-area .chat-username"]
  355.                     },
  356.                     {
  357.                         id: "font-color-enabled-chat-area-color-grey",
  358.                         label: "Chat Level: Enabled",
  359.                         type: "boolean",
  360.                         default: false
  361.                     },
  362.                     {
  363.                         id: "font-color-chat-area-color-grey",
  364.                         label: "Chat Level: Color",
  365.                         type: "color",
  366.                         default: FONT_COLORS["#chat-area .color-grey"]
  367.                     },
  368.                     {
  369.                         id: "font-color-enabled-chat-area-server_message",
  370.                         label: "Server Message Tag: Enabled",
  371.                         type: "boolean",
  372.                         default: false
  373.                     },
  374.                     {
  375.                         id: "font-color-chat-area-server_message",
  376.                         label: "Server Message Tag: Color",
  377.                         type: "color",
  378.                         default: FONT_COLORS["#chat-area .server_message"]
  379.                     },
  380.                     {
  381.                         id: "serverMessageTextOverrideEnabled",
  382.                         label: "Server Message Text: Enabled",
  383.                         type: "boolean",
  384.                         default: false
  385.                     },
  386.                     {
  387.                         id: "serverMessageTextOverrideColor",
  388.                         label: "Server Message Text: Color",
  389.                         type: "color",
  390.                         default: "blue"
  391.                     },
  392.                     {
  393.                         id: "font-color-enabled-panels",
  394.                         label: "Panels 1: Enabled",
  395.                         type: "boolean",
  396.                         default: false
  397.                     },
  398.                     {
  399.                         id: "font-color-panels",
  400.                         label: "Panels 1: Color",
  401.                         type: "color",
  402.                         default: FONT_COLORS["#chat-area"]
  403.                     },
  404.                     {
  405.                         id: "font-color-enabled-panels-color-grey",
  406.                         label: "Panels 2: Enabled",
  407.                         type: "boolean",
  408.                         default: false
  409.                     },
  410.                     {
  411.                         id: "font-color-panels-color-grey",
  412.                         label: "Panels 2: Color",
  413.                         type: "color",
  414.                         default: FONT_COLORS["#chat-area .color-grey"]
  415.                     }
  416.                 ]
  417.             });
  418.         }
  419.  
  420.         onConfigsChanged() {
  421.             $("body").css("font-family", "");
  422.             const font = this.getConfig("font");
  423.             if(font && font!=FONT_DEFAULT) {
  424.                 const bodyStyle = $("body").attr("style");
  425.                 $("body").attr("style", `${bodyStyle}; font-family: ${font} !important`);
  426.             }
  427.  
  428.             const sideChat = this.getConfig("sideChat");
  429.             if(sideChat) {
  430.                 $("#content").addClass("side-chat");
  431.             }
  432.             else {
  433.                 $("#content").removeClass("side-chat");
  434.             }
  435.  
  436.             if(this.getConfig("fightPointsStats")) {
  437.                 $("#menu-bar-fight-points").show();
  438.                 $("#menu-bar-combat-fight-points").show();
  439.             }
  440.             else {
  441.                 $("#menu-bar-fight-points").hide();
  442.                 $("#menu-bar-combat-fight-points").hide();
  443.             }
  444.  
  445.             const condenseWoodcuttingPatches = this.getConfig("condenseWoodcuttingPatches");
  446.             if(condenseWoodcuttingPatches) {
  447.                 $("#panel-woodcutting .farming-patches-area").addClass("condensed");
  448.                 $(`#panel-woodcutting .farming-patches-area img[id^="img-tree_shiny"]`).each(function() {
  449.                     const el = $(this);
  450.                     el.attr("width", "");
  451.                     el.attr("height", "");
  452.                 });
  453.             }
  454.             else {
  455.                 $("#panel-woodcutting .farming-patches-area").removeClass("condensed");
  456.                 $(`#panel-woodcutting .farming-patches-area img[id^="img-tree_shiny"]`).each(function() {
  457.                     const el = $(this);
  458.                     el.attr("width", el.attr("original-width"));
  459.                     el.attr("height", el.attr("original-height"));
  460.                 });
  461.             }
  462.  
  463.             const condenseFarmingPatches = this.getConfig("condenseFarmingPatches");
  464.             if(condenseFarmingPatches) {
  465.                 $("#panel-farming .farming-patches-area").addClass("condensed");
  466.                 $(`#panel-farming .farming-patches-area img[id^="img-farm_shiny"]`).each(function() {
  467.                     const el = $(this);
  468.                     el.attr("width", "");
  469.                     el.attr("height", "");
  470.                 });
  471.             }
  472.             else {
  473.                 $("#panel-farming .farming-patches-area").removeClass("condensed");
  474.                 $(`#panel-farming .farming-patches-area img[id^="img-farm_shiny"]`).each(function() {
  475.                     const el = $(this);
  476.                     el.attr("width", el.attr("original-width"));
  477.                     el.attr("height", el.attr("original-height"));
  478.                 });
  479.             }
  480.  
  481.             const condenseGatheringBoxes = this.getConfig("condenseGatheringBoxes");
  482.             if(condenseGatheringBoxes) {
  483.                 $("#panel-gathering .gathering-box").addClass("condensed");
  484.             }
  485.             else {
  486.                 $("#panel-gathering .gathering-box").removeClass("condensed");
  487.             }
  488.  
  489.             if(this.getConfig("imageTitles")) {
  490.                 $("img").each(function() {
  491.                     const el = $(this);
  492.                     let src = el.attr("src");
  493.                     if(src && src!="x") {
  494.                         src = src.replace(/.*\//, "").replace(/\.\w+$/, "");
  495.                         el.attr("title", src);
  496.                     }
  497.                 });
  498.             }
  499.             else {
  500.                 $("img").each(function() {
  501.                     const el = $(this);
  502.                     el.attr("title", "");
  503.                 });
  504.             }
  505.  
  506.             if(this.getConfig("miningMachineArrows")) {
  507.                 $("#panel-mining").addClass("add-arrow-controls");
  508.             }
  509.             else {
  510.                 $("#panel-mining").removeClass("add-arrow-controls");
  511.             }
  512.  
  513.             const toast = $(".toast-container");
  514.             if(this.getConfig("lowerToast")) {
  515.                 toast.removeClass("top-0");
  516.                 toast.css("top", "45px");
  517.             }
  518.             else {
  519.                 toast.css("top", "");
  520.                 toast.addClass("top-0");
  521.             }
  522.  
  523.             const oilSummaryMining = this.getConfig("oilSummaryMining");
  524.             if(oilSummaryMining) {
  525.                 $("#oil-summary-mining").show();
  526.             }
  527.             else {
  528.                 $("#oil-summary-mining").hide();
  529.             }
  530.  
  531.             const oilSummaryCrafting = this.getConfig("oilSummaryCrafting");
  532.             if(oilSummaryCrafting) {
  533.                 $("#oil-summary-crafting").show();
  534.             }
  535.             else {
  536.                 $("#oil-summary-crafting").hide();
  537.             }
  538.  
  539.             const smeltingNotificationTimer = this.getConfig("smeltingNotificationTimer");
  540.             if(smeltingNotificationTimer) {
  541.                 $("#notification-furnace-timer").show();
  542.             }
  543.             else {
  544.                 $("#notification-furnace-timer").hide();
  545.             }
  546.  
  547.             const heatInFishingTab = this.getConfig("heatInFishingTab");
  548.             if(heatInFishingTab) {
  549.                 $("#heat-fishing-tab").show();
  550.                 $("#heat-fishing-tab").attr("data-item", "heat");
  551.             }
  552.             else {
  553.                 $("#heat-fishing-tab").hide();
  554.                 $("#heat-fishing-tab").removeAttr("data-item");
  555.             }
  556.  
  557.             this.onVariableSet("oil", window.var_oil, window.var_oil);
  558.  
  559.             this.updateColors();
  560.         }
  561.  
  562.         updateColors(filter) {
  563.             Object.keys(BG_COLORS).forEach(selector => {
  564.                 if(!filter || filter.includes(selector)) {
  565.                     const key = selector.replace(/[#\.]/g, '').replace(/-?\s+-?/, "-");
  566.                     const enabled = this.getConfig(`color-enabled-${key}`);
  567.                     const color = enabled ? this.getConfig(`color-${key}`) : BG_COLORS[selector];
  568.                     let selected = $(selector);
  569.                     selected.css("background-color", "");
  570.                     selected.css("background-color", color);
  571.                 }
  572.             });
  573.  
  574.             Object.keys(FONT_COLORS).forEach(selector => {
  575.                 if(!filter || filter.includes(selector)) {
  576.                     const key = selector.replace(/[#\.]/g, '').replace(/-?\s+-?/, "-");
  577.                     const enabled = this.getConfig(`font-color-enabled-${key}`);
  578.                     const color = enabled ? this.getConfig(`font-color-${key}`) : FONT_COLORS[selector];
  579.                     let selected = $(selector);
  580.                     selected.css("color", "");
  581.                     selected.css("color", color);
  582.                 }
  583.             });
  584.  
  585.             const serverMessageTextOverrideEnabled = this.getConfig("serverMessageTextOverrideEnabled");
  586.             const serverMessageTextOverrideColor = serverMessageTextOverrideEnabled ? this.getConfig("serverMessageTextOverrideColor") : "blue";
  587.             $("#chat-area .server_message").parent().css("color", serverMessageTextOverrideColor);
  588.  
  589.         }
  590.  
  591.         onLogin() {
  592.             // fix chat
  593.             const self = this;
  594.             const chat = $("#game-chat > :first-child");
  595.             const chatTop = $('<div id="chat-top"></div>"');
  596.             const chatArea = $("#chat-area").detach();
  597.             const chatBottom = $("#game-chat > :first-child > :last-child").detach();
  598.             $("#game-chat > :first-child > *").detach().appendTo(chatTop);
  599.             chat.empty();
  600.             chat.append(chatTop);
  601.             chat.append(chatArea);
  602.             chat.append(chatBottom);
  603.  
  604.             this.onConfigsChanged();
  605.             $("head").append(`
  606.             <style id="styles-ui-tweaks">
  607.             #chat-top {
  608.               display: flex;
  609.               flex-direction: row;
  610.               justify-content: left;
  611.             }
  612.             #chat-top > button {
  613.               margin-left: 2px;
  614.               margin-right: 2px;
  615.               white-space: nowrap;
  616.             }
  617.             #content.side-chat {
  618.               display: grid;
  619.               column-gap: 0;
  620.               row-gap: 0;
  621.               grid-template-columns: 2fr minmax(300px, 1fr);
  622.               grid-template-rows: 1fr;
  623.             }
  624.             #content.side-chat #game-chat {
  625.               max-height: calc(100vh - 32px);
  626.             }
  627.             #content.side-chat #game-chat > :first-child {
  628.               display: grid;
  629.               column-gap: 0;
  630.               row-gap: 0;
  631.               grid-template-columns: 1fr;
  632.               grid-template-rows: auto 1fr auto;
  633.               height: calc(100% - 16px);
  634.             }
  635.             #content.side-chat #chat-area {
  636.               height: auto !important;
  637.             }
  638.     	    .farming-patches-area.condensed {
  639. 	    	  display: flex;
  640. 		      flex-direction: row;
  641.     		  justify-items: flex-start;
  642.     		  width: fit-content;
  643.     	    }
  644.     	    .farming-patches-area.condensed > span {
  645.     		  width: 100px;
  646.     		  max-height: 200px;
  647.     		  border: 1px solid green;
  648.     	    }
  649.     	    .farming-patches-area.condensed img {
  650.     		  width: 100px;
  651.     	    }
  652. 	    	#panel-gathering .gathering-box.condensed {
  653. 		      height: 240px;
  654. 		      position: relative;
  655.               margin: 4px auto;
  656.               padding-left: 4px;
  657.               padding-right: 4px;
  658. 		    }
  659. 		    #panel-gathering .gathering-box.condensed img.gathering-area-image {
  660. 		      position: absolute;
  661. 		      top: 10px;
  662. 		      left: 10px;
  663. 		      width: 68px;
  664. 		      height: 68px;
  665. 		    }
  666. 		    #panel-gathering .gathering-box.condensed br:nth-child(2),
  667. 		    #panel-gathering .gathering-box.condensed br:nth-child(3)
  668. 		    {
  669. 		      display: none;
  670. 		    }
  671.             #panel-mining.add-arrow-controls itembox {
  672.               position: relative;
  673.             }
  674.             #panel-mining:not(.add-arrow-controls) itembox .arrow-controls {
  675.               display: none !important;
  676.             }
  677.             itembox .arrow-controls {
  678.               position: absolute;
  679.               top: 0px;
  680.               right: 2px;
  681.               height: 100%;
  682.               padding: 2px;
  683.               display: flex;
  684.               flex-direction: column;
  685.               justify-content: space-around;
  686.               align-items: center;
  687.             }
  688.             itembox .arrow {
  689.               border: solid white;
  690.               border-width: 0 4px 4px 0;
  691.               display: inline-block;
  692.               padding: 6px;
  693.               cursor: pointer;
  694.               opacity: 0.85;
  695.             }
  696.             itembox .arrow:hover {
  697.               opacity: 1;
  698.               border-color: yellow;
  699.             }
  700.             itembox .arrow.up {
  701.               transform: rotate(-135deg);
  702.               -webkit-transform: rotate(-135deg);
  703.               margin-top: 3px;
  704.             }
  705.             itembox .arrow.down {
  706.               transform: rotate(45deg);
  707.               -webkit-transform: rotate(45deg);
  708.               margin-bottom: 3px;
  709.             }
  710.             </style>
  711.             `);
  712.  
  713.             $("#menu-bar-energy").after(`
  714.             <span id="menu-bar-fight-points">
  715.               <br />
  716.               <img id="menu-bar-fight-points-img" class="img-20" src="${IMAGE_URL_BASE}/fight_points.png"> <item-display data-format="number" data-key="fight_points">0</item-display>
  717.             </span>
  718.             `);
  719.  
  720.             $("#combat-menu-spells").before(`
  721.             	<span id="menu-bar-combat-fight-points">
  722.             		<br />
  723.             		<img src="${IMAGE_URL_BASE}/fight_points.png" width="20px" height="20px" title="fight points">
  724.             		<span class="color-grey">Fight Points: <item-display data-format="number" data-key="fight_points"></item-display></span>
  725.             	</span>
  726.             `);
  727.  
  728.             $(".color-grey.font-small item-display").each(function() {
  729.                 let el = $(this);
  730.                 let dataKey = el.attr("data-key");
  731.                 if(dataKey.endsWith("_xp")) {
  732.                     el.after(`
  733.                     <span class="ui-tweaks-xp-next">
  734.                       &nbsp;&nbsp;Next Level:
  735.                       <item-display data-format="number"data-key="ipp_${dataKey}_next"></item-display>
  736.                     </span>
  737. 				    `);
  738.                 }
  739.             });
  740.  
  741.             // machine arrows
  742.             ["drill", "crusher", "giant_drill"].forEach(machine => {
  743.                 $(`itembox[data-item=${machine}]`).append(`
  744.                 <div class="arrow-controls" onclick="event.stopPropagation();">
  745.                   <div class="arrow up" onclick="event.stopPropagation(); IdlePixelPlus.sendMessage('MACHINERY=${machine}~increase');"></div>
  746.                     <item-display data-format="number" data-key="${machine}_on">1</item-display>
  747.                   <div class="arrow down" onclick="event.stopPropagation(); IdlePixelPlus.sendMessage('MACHINERY=${machine}~decrease');"></div>
  748.                 </div>
  749.                 `);
  750.             });
  751.  
  752.             // custom notifications
  753.             $("#notifications-area").append(`
  754.             <div id="ui-tweaks-notification-oil-full" style="display:none;" class="notification hover" onclick="switch_panels('panel-mining')">
  755.                 <img src="${IMAGE_URL_BASE}/oil.png" class="w20">
  756.                 <span class="font-small color-yellow">Oil Full</span>
  757.             </div>
  758.             `);
  759.  
  760.             $("#panel-mining .progress-bar").first().after(`
  761.             <div id="oil-summary-mining" style="margin-top: 0.5em">
  762.             	<strong>Oil: </strong><item-display data-format="number" data-key="oil"></item-display> / <item-display data-format="number" data-key="max_oil"></item-display><br>
  763.             	<strong>In: </strong>+<item-display data-format="number" data-key="oil_in"></item-display>&nbsp;&nbsp;&nbsp;
  764.             	<strong>Out: </strong>-<item-display data-format="number" data-key="oil_out"></item-display>&nbsp;&nbsp;&nbsp;
  765.             	<strong>Delta: </strong><item-display data-key="oil_delta" data-format="number"></item-display><br>
  766.             </div>
  767.             `);
  768.  
  769.             $("#panel-crafting .progress-bar").first().after(`
  770.             <div id="oil-summary-crafting" style="margin-top: 0.5em">
  771.             	<strong>Oil: </strong><item-display data-format="number" data-key="oil"></item-display> / <item-display data-format="number" data-key="max_oil"></item-display><br>
  772.             	<strong>In: </strong>+<item-display data-format="number" data-key="oil_in"></item-display>&nbsp;&nbsp;&nbsp;
  773.             	<strong>Out: </strong>-<item-display data-format="number" data-key="oil_out"></item-display>&nbsp;&nbsp;&nbsp;
  774.             	<strong>Delta: </strong><item-display data-key="oil_delta" data-format="number"></item-display><br>
  775.             </div>
  776.             `);
  777.  
  778.             $("#notification-furnace-label").after(`<span id="notification-furnace-timer" class="font-small color-white"></span>`);
  779.  
  780.             $(`itembox[data-item="fishing_net"]`).before(`
  781.             <itembox id="heat-fishing-tab" data-item="heat" class="shadow hover" data-bs-toggle="tooltip">
  782.                 <div class="center mt-1"><img src="https://d1xsc8x7nc5q8t.cloudfront.net/images/heat.png" width="50px" height="50px"></div>
  783.                 <div class="center mt-2"><item-display data-format="number" data-key="heat"></item-display></div>
  784.             </itembox>
  785.             `);
  786.  
  787.             // clear chat button
  788.             $("#chat-auto-scroll-button").after(`<button id="chat-clear-button" onclick="IdlePixelPlus.plugins['ui-tweaks'].clearChat()" style="color: green">CLEAR</button>`);
  789.  
  790.             // override for service messages
  791.             const original_yell_to_chat_box = Chat.yell_to_chat_box;
  792.             Chat.yell_to_chat_box = function() {
  793.                 original_yell_to_chat_box.apply(Chat, arguments);
  794.                 self.updateColors();
  795.             }
  796.  
  797.             this.onConfigsChanged();
  798.         }
  799.  
  800.         clearChat() {
  801.             $("#chat-area").empty();
  802.         }
  803.  
  804.         limitChat() {
  805.             const limit = this.getConfig("chatLimit");
  806.             if(limit > 0) {
  807.                 const children = $("#chat-area").children();
  808.                 if(children.length > limit) {
  809.                     const toDelete = children.length - limit;
  810.                     for(let i = 0; i < toDelete; i++) {
  811.                         try {
  812.                             children[i].remove();
  813.                         }
  814.                         catch(err) {
  815.                             console.error("Error cleaning up chat", err);
  816.                         }
  817.                     }
  818.                     if(Chat._auto_scroll) {
  819.                         $("#chat-area").scrollTop($("#chat-area")[0].scrollHeight);
  820.                     }
  821.                 }
  822.             }
  823.         }
  824.  
  825.         onPanelChanged(panelBefore, panelAfter) {
  826.             if(panelBefore != panelAfter && panelAfter == "idlepixelplus") {
  827.                 const options = $("#idlepixelplus-config-ui-tweaks-font > option");
  828.                 if(options) {
  829.                     options.each(function() {
  830.                         const el = $(this);
  831.                         let value = el.attr("value");
  832.                         if(value == "IdlePixel Default") {
  833.                             el.css("font-family", FONT_FAMILY_DEFAULT);
  834.                         }
  835.                         else {
  836.                             el.css("font-family", value);
  837.                         }
  838.                     });
  839.                 }
  840.             }
  841.             if(["farming", "woodcutting", "combat"].includes(panelAfter) && this.getConfig("imageTitles")) {
  842.                 $(`#panel-${panelAfter} img`).each(function() {
  843.                     const el = $(this);
  844.                     let src = el.attr("src");
  845.                     if(src && src!="x") {
  846.                         src = src.replace(/.*\//, "").replace(/\.\w+$/, "");
  847.                         el.attr("title", src);
  848.                     }
  849.                 });
  850.             }
  851.         }
  852.  
  853.         onVariableSet(key, valueBefore, valueAfter) {
  854.             if(key.endsWith("_xp")) {
  855.                 const varName = `var_ipp_${key}_next`;
  856.                 const xp = parseInt(valueAfter||'0');
  857.                 const level = xpToLevel(xp);
  858.                 const xpAtNext = LEVELS[level+1];
  859.                 const next = level>=100 ? 0 : xpAtNext-xp;
  860.                 window[varName] = `${next}`;
  861.             }
  862.             if(["oil", "max_oil"].includes(key)) {
  863.                 const oil = IdlePixelPlus.getVar("oil");
  864.                 const maxOil = IdlePixelPlus.getVar("max_oil");
  865.                 if(oil && oil==maxOil && this.getConfig("oilFullNotification")) {
  866.                     $("#ui-tweaks-notification-oil-full").show();
  867.                 }
  868.                 else {
  869.                     $("#ui-tweaks-notification-oil-full").hide();
  870.                 }
  871.             }
  872.             if(["oil_in", "oil_out"].includes(key)) {
  873.                 const oilIn = IdlePixelPlus.getVarOrDefault("oil_in", 0, "int");
  874.                 const oilOut = IdlePixelPlus.getVarOrDefault("oil_out", 0, "int");
  875.                 window.var_oil_delta = `${oilIn-oilOut}`;
  876.             }
  877.             /*
  878.             if(["furnace_ore_type", "furnace_countdown"].includes(key)) {
  879.                 const el = $("#notification-furnace-timer");
  880.                 const ore = IdlePixelPlus.getVarOrDefault("furnace_ore_type", "none");
  881.                 if(ore == "none") {
  882.                     el.text("");
  883.                     return;
  884.                 }
  885.                 const timerRemaining = IdlePixelPlus.getVarOrDefault("furnace_countdown", 0, "int") - 1;
  886.                 const timePerOre = SMELT_TIMES[ore];
  887.                 const startAmount = IdlePixelPlus.getVarOrDefault("furnace_ore_amount_set", 0, "int");
  888.                 const doneAmount = IdlePixelPlus.getVarOrDefault("furnace_ore_amount_at", 0, "int");
  889.                 const remaining = startAmount - doneAmount;
  890.                 const totalTime = (remaining*timePerOre) + timerRemaining;
  891.                 el.text(" - " + format_time(totalTime));
  892.             }
  893.             */
  894.         }
  895.  
  896.         onCombatEnd() {
  897.             this.updateColors(PANEL_UPDATE_FILTER);
  898.         }
  899.  
  900.         onChat(data) {
  901.             this.updateColors(CHAT_UPDATE_FILTER);
  902.             this.limitChat();
  903.         }
  904.  
  905.     }
  906.  
  907.     $("[width]").each(function() {
  908.         const el = $(this);
  909.         el.attr("original-width", el.attr("width"));
  910.     });
  911.     $("[height]").each(function() {
  912.         const el = $(this);
  913.         el.attr("original-height", el.attr("height"));
  914.     });
  915.  
  916.     const plugin = new UITweaksPlugin();
  917.     IdlePixelPlus.registerPlugin(plugin);
  918.  
  919. })();