☰

IdlePixel+ Overview Panel

Single panel to control many skills

当前为 2023-12-18 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         IdlePixel+ Overview Panel
  3. // @namespace    lbtechnology.info
  4. // @version      1.0.0
  5. // @description  Single panel to control many skills
  6. // @author       Lux-Ferre
  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.     class OverviewPlugin extends IdlePixelPlusPlugin {
  17.         constructor() {
  18.             super("overview", {
  19.                 about: {
  20.                     name: GM_info.script.name,
  21.                     version: GM_info.script.version,
  22.                     author: GM_info.script.author,
  23.                     description: GM_info.script.description
  24.                 },
  25.                 config: [
  26.                     {
  27.                         id: "colNum",
  28.                         label: "Number of modules per row",
  29.                         type: "integer",
  30.                         min: 1,
  31.                         max: 12,
  32.                         default: 3
  33.                     },
  34.                     {
  35.                         id: "farmingEnabled",
  36.                         label: "farmingEnabled",
  37.                         type: "boolean",
  38.                         default: true
  39.                     },
  40.                     {
  41.                         id: "gatheringEnabled",
  42.                         label: "gatheringEnabled",
  43.                         type: "boolean",
  44.                         default: true
  45.                     },
  46.                     {
  47.                         id: "mineralsEnabled",
  48.                         label: "mineralsEnabled",
  49.                         type: "boolean",
  50.                         default: true
  51.                     },
  52.                     {
  53.                         id: "woodcuttingEnabled",
  54.                         label: "woodcuttingEnabled",
  55.                         type: "boolean",
  56.                         default: true
  57.                     },
  58.                     {
  59.                         id: "smeltingEnabled",
  60.                         label: "smeltingEnabled",
  61.                         type: "boolean",
  62.                         default: true
  63.                     },
  64.                     {
  65.                         id: "cookingEnabled",
  66.                         label: "cookingEnabled",
  67.                         type: "boolean",
  68.                         default: true
  69.                     },
  70.                     {
  71.                         id: "brewingEnabled",
  72.                         label: "brewingEnabled",
  73.                         type: "boolean",
  74.                         default: false
  75.                     },
  76.                     {
  77.                         id: "fishingEnabled",
  78.                         label: "fishingEnabled",
  79.                         type: "boolean",
  80.                         default: false
  81.                     },
  82.                     {
  83.                         id: "machineryEnabled",
  84.                         label: "machineryEnabled",
  85.                         type: "boolean",
  86.                         default: false
  87.                     }
  88.                 ]
  89.             });
  90.             this.previous = "";
  91.         }
  92.  
  93.         onConfigsChanged() {
  94.             this.applyConfigs()
  95.         }
  96.  
  97.         onLogin() {
  98.                 const onlineCount = $(".top-bar .gold:not(#top-bar-admin-link)");
  99.                 onlineCount.before(`
  100.                 <a href="#" class="hover float-end link-no-decoration"
  101.                 onclick="event.preventDefault(); IdlePixelPlus.setPanel('overview')"
  102.                 title="Overview">Overview&nbsp;&nbsp;&nbsp;</a>
  103.                 `);
  104.  
  105.                 this.addStyles()
  106.                 this.createPanel()
  107.                 this.addBonemealbinToPanel()
  108.                 this.toggleMultiHarvest()
  109.                 this.addGatheringAreasToPanel()
  110.                 this.highlightGathering()
  111.                 this.applyConfigs()
  112.  
  113.                 const standardItemBoxes = {
  114.                     overviewLogsContainer: {
  115.                         itemList: ["logs", "oak_logs", "willow_logs", "maple_logs", "stardust_logs", "pine_logs", "redwood_logs", "dense_logs"],
  116.                         onClickString: "IdlePixelPlus.plugins['overview'].clicksLogs(this.getAttribute('ov-data-item'))"
  117.                     },
  118.                     overviewBonemealContainer: {
  119.                         itemList: ["bones", "big_bones", "ice_bones", "blood_bones", "dragon_bones", "ashes"],
  120.                         onClickString: "Farming.clicks_bones(this.getAttribute('ov-data-item'))"
  121.                     },
  122.                     overviewSeedsContainer: {
  123.                         itemList: [
  124.                             "dotted_green_leaf_seeds", "green_leaf_seeds", "lime_leaf_seeds", "gold_leaf_seeds",
  125.                             "crystal_leaf_seeds", "red_mushroom_seeds", "stardust_seeds", "tree_seeds", "oak_tree_seeds",
  126.                             "willow_tree_seeds", "maple_tree_seeds", "stardust_tree_seeds", "pine_tree_seeds", "redwood_tree_seeds",
  127.                             "apple_tree_seeds", "banana_tree_seeds", "orange_tree_seeds", "palm_tree_seeds", "dragon_fruit_tree_seeds",
  128.                             "bone_tree_seeds", "lava_tree_seeds", "strange_tree_seeds", "potato_seeds", "carrot_seeds", "beet_seeds", "broccoli_seeds"
  129.                         ],
  130.                         onClickString: "IdlePixelPlus.plugins['overview'].clicksSeeds(this.getAttribute('ov-data-item'))"
  131.                     },
  132.                     overviewBarsContainer: {
  133.                         itemList: ["bronze_bar", "iron_bar", "silver_bar", "gold_bar", "promethium_bar", "titanium_bar", "ancient_bar", "dragon_bar"],
  134.                         onClickString: "IdlePixelPlus.plugins['overview'].clicksBars(this.getAttribute('ov-data-item'))"
  135.                     },
  136.                     overviewOresContainer: {
  137.                         itemList: ["stone", "copper", "iron", "silver", "gold", "promethium", "titanium", "ancient_ore", "dragon_ore"],
  138.                         onClickString: "Modals.open_stardust_or_sell_item_dialogue('mining', this.getAttribute('ov-data-item'))"
  139.                     },
  140.                     overviewRecipeContainer: {
  141.                         itemList: ["dotted_salad", "chocolate_cake", "lime_leaf_salad", "golden_apple", "banana_jello", "orange_pie", "pancakes", "coconut_stew", "dragon_fruit_salad",
  142.                                    "potato_shake", "carrot_shake", "beet_shake", "broccoli_shake"],
  143.                         onClickString: `websocket.send('COOKS_BOOK=' + this.getAttribute('ov-data-item'))`
  144.                     },
  145.                     overviewGatheringBagsContainer: {
  146.                         itemList: ["gathering_loot_bag_mines", "gathering_loot_bag_fields", "gathering_loot_bag_forest", "gathering_loot_bag_fishing_pond",
  147.                                    "gathering_loot_bag_kitchen", "gathering_loot_bag_gem_mine", "gathering_loot_bag_castle", "gathering_loot_bag_junk"],
  148.                         onClickString: "Modals.open_input_dialogue_with_value(this.getAttribute('ov-data-item').slice(19), 'Open', 'How many?', Items.getItem(this.getAttribute('ov-data-item')), 'OPEN_GATHERING_LOOT')"
  149.                     },
  150.                     overviewGemContainer: {
  151.                         itemList: ["sapphire", "emerald", "ruby", "diamond", "blood_diamond"],
  152.                         onClickString: ""
  153.                     },
  154.                     overviewSDCrystalContainer: {
  155.                         itemList: ["small_stardust_prism", "medium_stardust_prism", "large_stardust_prism", "huge_stardust_prism"],
  156.                         onClickString: "Modals.open_input_dialogue_with_value(this.getAttribute('ov-data-item'), 'Smash', 'How many stardust prism do you want to smash?', Items.getItem(this.getAttribute('ov-data-item')), 'SMASH_STARDUST_PRISM')"
  157.                     },
  158.                     overviewGeodeContainer: {
  159.                         itemList: ["grey_geode", "blue_geode", "green_geode", "red_geode", "cyan_geode", "ancient_geode"],
  160.                         onClickString: "Modals.open_input_dialogue_with_value(this.getAttribute('ov-data-item'), 'Open', 'How many geodes to you want to crack?', Items.getItem(this.getAttribute('ov-data-item')), 'CRACK_GEODE')"
  161.                     },
  162.                     overviewMineralContainer: {
  163.                         itemList: ["blue_marble_mineral", "amethyst_mineral", "sea_crystal_mineral", "dense_marble_mineral", "fluorite_mineral", "clear_marble_mineral",
  164.                                    "jade_mineral", "lime_quartz_mineral", "opal_mineral", "purple_quartz_mineral", "amber_mineral", "smooth_pearl_mineral",
  165.                                    "sulfer_mineral", "topaz_mineral", "tanzanite_mineral", "magnesium_mineral", "frozen_mineral", "blood_crystal_mineral"],
  166.                         onClickString: "Modals.clicks_mineral(this.getAttribute('ov-data-item'))"
  167.                     }/*,
  168.                     template: {
  169.                         itemList: [],
  170.                         onClickString: ""
  171.                     }*/
  172.                 }
  173.  
  174.                 for (const [containerId, itemData] of Object.entries(standardItemBoxes)) {
  175.                     this.addStandardItemsToPanel(containerId, itemData)
  176.                 }
  177.             }
  178.  
  179.         onMessageReceived(data) {
  180.             if(Globals.currentPanel !== "panel-overview"){return;}
  181.             if (data.startsWith("SET_ITEMS")){
  182.                 this.updatePanelTrees()
  183.                 this.updatePanelPlants()
  184.                 this.updatePanelCooking()
  185.                 this.updateSmeltingPanel()
  186.            }
  187.         }
  188.  
  189.         addStyles(){
  190.             let borderColour
  191.  
  192.             if ("ui-tweaks" in IdlePixelPlus.plugins){
  193.                 borderColour = IdlePixelPlus.plugins["ui-tweaks"].config["font-color-panels"]
  194.             } else {
  195.                 borderColour = "black"
  196.             }
  197.  
  198.             $("head").append(`
  199.                     <style id="styles-overview">
  200.                         .overviewSkillModule {
  201.                             border-radius: 3px;
  202.                             border-style: outset;
  203.                         }
  204.                         .overviewGatheringBoxArea {
  205.                             width: 150px;
  206.                             height: 150px;
  207.                             border-radius: 30px;
  208.                         }
  209.                         .overviewGatheringBoxSelected {
  210.                             box-shadow: 0 0 15px #80ed6f;
  211.                         }
  212.                         .overviewDottedBorder {
  213.                             border-radius: 2px;
  214.                             border: 1px dotted ${borderColour};
  215.                         }
  216.                     </style>
  217.                 `)
  218.             }
  219.  
  220.         createPanel(){
  221.                 IdlePixelPlus.addPanel("overview", "Overview", function() {
  222.                     const content = `
  223. <div id="overviewTopLevelRow" class="row row-cols-3 d-flex flex-wrap">
  224.     <div id="overviewFarmingModule" class="col overviewSkillModule">
  225.         <div id="overviewBonemealContainer" class="row g-0 d-flex justify-content-evenly overviewDottedBorder"></div>
  226.         <div id="overviewSeedsContainer" class="row g-0 d-flex justify-content-evenly overviewDottedBorder"></div>
  227.         <div id="overviewFarmingPlotContainer" class="row farming-patches-area g-0 overviewDottedBorder">
  228.             <div id="overviewFarmingPlot-1" class="col text-center d-flex flex-column align-items-center"><img id="overviewFarmingPatchImg-1" class="farming-patch" src="https://idlepixel.s3.us-east-2.amazonaws.com/images/woodcutting_none.png" width="75" onclick="Farming.clicksPlot(1)" /><label id="overviewFarmingTimer-1" class="form-label">0</label></div>
  229.             <div id="overviewFarmingPlot-2" class="col text-center d-flex flex-column align-items-center"><img id="overviewFarmingPatchImg-2" class="farming-patch" src="https://idlepixel.s3.us-east-2.amazonaws.com/images/woodcutting_none.png" width="75" onclick="Farming.clicksPlot(2)" /><label id="overviewFarmingTimer-2" class="form-label">0</label></div>
  230.             <div id="overviewFarmingPlot-3" class="col text-center d-flex flex-column align-items-center"><img id="overviewFarmingPatchImg-3" class="farming-patch" src="https://idlepixel.s3.us-east-2.amazonaws.com/images/woodcutting_none.png" width="75" onclick="Farming.clicksPlot(3)" /><label id="overviewFarmingTimer-3" class="form-label">0</label></div>
  231.             <div id="overviewFarmingPlot-4" class="col text-center d-flex flex-column align-items-center"><img id="overviewFarmingPatchImg-4" class="farming-patch" src="https://idlepixel.s3.us-east-2.amazonaws.com/images/woodcutting_none.png" width="75" onclick="Farming.clicksPlot(4)" /><label id="overviewFarmingTimer-4" class="form-label">0</label></div>
  232.             <div id="overviewFarmingPlot-5" class="col text-center d-flex flex-column align-items-center"><img id="overviewFarmingPatchImg-5" class="farming-patch" src="https://idlepixel.s3.us-east-2.amazonaws.com/images/woodcutting_none.png" width="75" onclick="Farming.clicksPlot(5)" /><label id="overviewFarmingTimer-5" class="form-label">0</label></div>
  233.         </div>
  234.         <div class="row">
  235.             <div class="col text-center overviewDottedBorder"><button id="overviewHarvestAll" class="btn btn-primary" type="button" onclick="IdlePixelPlus.plugins.slapchop.quickHarvest()">Harvest All</button></div>
  236.         </div>
  237.     </div>
  238.     <div id="overviewGatheringModule" class="col overviewSkillModule">
  239.         <div id="overviewGatheringBagsContainer" class="row gx-0 d-flex justify-content-evenly overviewDottedBorder"></div>
  240.         <div id="overviewGatheringAreasContainer" class="row gx-0 gy-2 d-flex justify-content-evenly overviewDottedBorder"></div>
  241.     </div>
  242.     <div id="overviewMineralModule" class="col overviewSkillModule">
  243.         <div id="overviewGemContainer" class="row gx-0 d-flex justify-content-evenly overviewDottedBorder"></div>
  244.         <div id="overviewSDCrystalContainer" class="row gx-0 d-flex justify-content-evenly overviewDottedBorder"></div>
  245.         <div id="overviewGeodeContainer" class="row gx-0 d-flex justify-content-evenly overviewDottedBorder"></div>
  246.         <div id="overviewMineralContainer" class="row gx-0 d-flex justify-content-evenly overviewDottedBorder"></div>
  247.     </div>
  248.     <div id="overviewWoodcuttingModule" class="col overviewSkillModule">
  249.         <div class="row">
  250.             <div class="col-lg-3 overviewDottedBorder">
  251.                 <div>
  252.                     <div class="form-check"><input id="overviewUseLogsNone" class="form-check-input" type="radio" checked name="overviewUseLogsType" value="none" /><label class="form-check-label" for="overviewUseLogsNone">None</label></div>
  253.                     <div class="form-check"><input id="overviewUseLogsHeat" class="form-check-input" type="radio" name="overviewUseLogsType" value="heat" /><label class="form-check-label" for="overviewUseLogsHeat">Heat</label></div>
  254.                     <div class="form-check"><input id="overviewUseLogsCharcoal" class="form-check-input" type="radio" name="overviewUseLogsType" value="charcoal" /><label class="form-check-label" for="overviewUseLogsCharcoal">Charcoal</label></div>
  255.                 </div>
  256.             </div>
  257.             <div class="col">
  258.                 <div id="overviewLogsContainer" class="row g-0 d-flex justify-content-evenly overviewDottedBorder"></div>
  259.             </div>
  260.         </div>
  261.         <div id="overviewWCPlotContainer" class="row farming-patches-area g-0 overviewDottedBorder">
  262.             <div id="overviewWCPlot-1" class="col text-center d-flex flex-column align-items-center"><img id="overviewWoodcuttingPatchImg-1" class="farming-patch" src="https://idlepixel.s3.us-east-2.amazonaws.com/images/woodcutting_none.png" width="75" onclick="Woodcutting.clicksPlot(1)" /><label id="overviewWoodcuttingTimer-1" class="form-label">0</label></div>
  263.             <div id="overviewWCPlot-2" class="col text-center d-flex flex-column align-items-center"><img id="overviewWoodcuttingPatchImg-2" class="farming-patch" src="https://idlepixel.s3.us-east-2.amazonaws.com/images/woodcutting_none.png" width="75" onclick="Woodcutting.clicksPlot(2)" /><label id="overviewWoodcuttingTimer-2" class="form-label">0</label></div>
  264.             <div id="overviewWCPlot-3" class="col text-center d-flex flex-column align-items-center"><img id="overviewWoodcuttingPatchImg-3" class="farming-patch" src="https://idlepixel.s3.us-east-2.amazonaws.com/images/woodcutting_none.png" width="75" onclick="Woodcutting.clicksPlot(3)" /><label id="overviewWoodcuttingTimer-3" class="form-label">0</label></div>
  265.             <div id="overviewWCPlot-4" class="col text-center d-flex flex-column align-items-center"><img id="overviewWoodcuttingPatchImg-4" class="farming-patch" src="https://idlepixel.s3.us-east-2.amazonaws.com/images/woodcutting_none.png" width="75" onclick="Woodcutting.clicksPlot(4)" /><label id="overviewWoodcuttingTimer-4" class="form-label">0</label></div>
  266.             <div id="overviewWCPlot-5" class="col text-center d-flex flex-column align-items-center"><img id="overviewWoodcuttingPatchImg-5" class="farming-patch" src="https://idlepixel.s3.us-east-2.amazonaws.com/images/woodcutting_none.png" width="75" onclick="Woodcutting.clicksPlot(5)" /><label id="overviewWoodcuttingTimer-5" class="form-label">0</label></div>
  267.         </div>
  268.         <div class="row">
  269.             <div class="col text-center overviewDottedBorder"><button id="overviewChopAll" class="btn btn-primary" type="button" onclick="IdlePixelPlus.plugins.slapchop.quickChop()">Chop All</button></div>
  270.         </div>
  271.     </div>
  272.     <div id="overviewSmeltingModule" class="col overviewSkillModule">
  273.         <div class="row">
  274.             <div class="col">
  275.                 <div class="row">
  276.                     <div class="col d-flex justify-content-between overviewDottedBorder"><label class="form-label">Oil</label><label id="overviewOilNum" class="form-label">0</label></div>
  277.                 </div>
  278.                 <div class="row">
  279.                     <div class="col d-flex justify-content-between overviewDottedBorder"><label class="form-label">Lava</label><label id="overviewLavaNum" class="form-label">0</label></div>
  280.                 </div>
  281.                 <div class="row">
  282.                     <div class="col d-flex justify-content-between overviewDottedBorder"><label class="form-label">Buckets</label><label id="overviewBucketsNum" class="form-label">0</label></div>
  283.                 </div>
  284.             </div>
  285.             <div class="col text-center align-self-center"><img id="overviewFurnaceIcon" src="https://idlepixel.s3.us-east-2.amazonaws.com/images/promethium_furnace.png" /></div>
  286.             <div class="col">
  287.                 <div class="row">
  288.                     <div class="col d-flex justify-content-between overviewDottedBorder"><label class="form-label">Charcoal</label><label id="overviewCharcoalNum" class="form-label">0</label></div>
  289.                 </div>
  290.                 <div class="row">
  291.                     <div class="col d-flex justify-content-between overviewDottedBorder"><label class="form-label">Plasma</label><label id="overviewPlasmaNum" class="form-label">0</label></div>
  292.                 </div>
  293.                 <div class="row">
  294.                     <div class="col d-flex justify-content-between overviewDottedBorder"><label class="form-label">D. Fire</label><label id="overviewDFireNum" class="form-label">0</label></div>
  295.                 </div>
  296.             </div>
  297.         </div>
  298.         <div id="overviewBarsContainer" class="row gx-0 d-flex justify-content-evenly overviewDottedBorder"></div>
  299.         <div id="overviewOresContainer" class="row gx-0 d-flex justify-content-evenly overviewDottedBorder"></div>
  300.     </div>
  301.     <div id="overviewCookingModule" class="col overviewSkillModule">
  302.         <div class="row">
  303.             <div class="col-xl-4 text-center align-self-center overviewDottedBorder"><img id="overviewCooksBookItem" style="width: 100px;height: 100px;" onclick="websocket.send(&#39;COOKS_BOOK_READY&#39;)" /></div>
  304.             <div class="col text-center align-self-center overviewDottedBorder"><label id="overviewCooksBookTimer" class="col-form-label">0</label></div>
  305.         </div>
  306.         <div id="overviewRecipeContainer" class="row gx-0 d-flex justify-content-evenly overviewDottedBorder"></div>
  307.     </div>
  308.     <div id="overviewBrewingModule" class="col overviewSkillModule"></div>
  309.     <div id="overviewFishingModule" class="col overviewSkillModule"></div>
  310.     <div id="overviewMachineryModule" class="col overviewSkillModule"></div>
  311. </div>
  312.                     `
  313.                     return content
  314.                 });
  315.             }
  316.  
  317.         applyConfigs() {
  318.             // Modules per row
  319.             const colClass = "row-cols-" + this.getConfig("colNum")
  320.             const topLevel = $("#overviewTopLevelRow")
  321.     
  322.             for(let i = 0; i <= 12 ; i++) {
  323.                 const oldClass = `row-cols-${i}`
  324.                 topLevel.removeClass(oldClass)
  325.             }
  326.  
  327.             topLevel.addClass(colClass)
  328.  
  329.             // Enable/disable modules
  330.  
  331.             const moduleList = [
  332.                 ["farmingEnabled", "overviewFarmingModule"],
  333.                 ["gatheringEnabled", "overviewGatheringModule"],
  334.                 ["mineralsEnabled", "overviewMineralModule"],
  335.                 ["woodcuttingEnabled", "overviewWoodcuttingModule"],
  336.                 ["smeltingEnabled", "overviewSmeltingModule"],
  337.                 ["cookingEnabled", "overviewCookingModule"],
  338.                 ["brewingEnabled", "overviewBrewingModule"],
  339.                 ["fishingEnabled", "overviewFishingModule"],
  340.                 ["machineryEnabled", "overviewMachineryModule"]
  341.             ]
  342.  
  343.             moduleList.forEach(module => {
  344.                 const moduleEnabled = this.getConfig(module[0])
  345.  
  346.                 const moduleLocation = $(`#${module[1]}`)
  347.  
  348.                 if (moduleEnabled){
  349.                     moduleLocation.show()
  350.                 } else {
  351.                     moduleLocation.hide()
  352.                 }
  353.             })
  354.  
  355.         }
  356.  
  357.         formatTimeWithDays(timeInSecs) {
  358.             let timerStr = "";
  359.             const hour24 = 24 * 60 * 60;
  360.  
  361.             const timerDays = Math.floor(timeInSecs /  hour24);
  362.             if(timeInSecs > hour24) {
  363.                 timerStr = `${timerDays}d ${format_time(timeInSecs - (timerDays * hour24))}`
  364.             } else {
  365.                 timerStr = `${format_time(timeInSecs - (timerDays * hour24))}`
  366.             }
  367.             return timerStr;
  368.        }
  369.  
  370.         getFurnace(){
  371.             const furnaceList = ["dragon_furnace", "ancient_furnace", "titanium_furnace", "promethium_furnace", "gold_furnace",
  372.                                  "silver_furnace", "iron_furnace", "bronze_furnace", "stone_furnace"]
  373.             for(let i = 0; i < furnaceList.length; i++) {
  374.                 const furnace = furnaceList[i]
  375.                 if(window["var_"+furnace]){
  376.                     return furnace
  377.                 }
  378.             }
  379.             return "";
  380.         }
  381.  
  382.         addStandardItemsToPanel(containerId, itemData){
  383.             const itemList = itemData.itemList
  384.             const itemOnClick = itemData.onClickString
  385.  
  386.             itemList.forEach((itemType) => {
  387.                 const itemElementString = `<div class="col d-flex justify-content-center">
  388.                                                         <itembox data-item="playtime" ov-data-item="${itemType}" id="overview-itembox-${itemType}" onclick="${itemOnClick}" class="shadow hover">
  389.                                                             <div class="center mt-1"><img src="https://d1xsc8x7nc5q8t.cloudfront.net/images/${itemType}.png" title="${itemType}"></div>
  390.                                                             <div class="center mt-2"> <item-display data-format="number" data-key="${itemType}"></item-display></div>
  391.                                                         </itembox>
  392.                                                     </div>`
  393.                 const itemBox = $.parseHTML(itemElementString)
  394.                 $(`#${containerId}`).append(itemBox)
  395.            })
  396.         }
  397.  
  398.         addGatheringAreasToPanel(){
  399.             const areaData = [
  400.                     {
  401.                         id: "overviewGatheringBoxMines",
  402.                         background: "background-dark-grey",
  403.                         image: "gathering_mine.png",
  404.                         name: "mines"
  405.                     },
  406.                     {
  407.                         id: "overviewGatheringBoxFields",
  408.                         background: "background-dark-green",
  409.                         image: "gathering_field.png",
  410.                         name: "fields"
  411.                     },
  412.                     {
  413.                         id: "overviewGatheringBoxForest",
  414.                         background: "background-brown",
  415.                         image: "gathering_forest.png",
  416.                         name: "forest"
  417.                     },
  418.                     {
  419.                         id: "overviewGatheringBoxFishingPond",
  420.                         background: "background-dark-blue",
  421.                         image: "gathering_fishing_pond.png",
  422.                         name: "fishing_pond"
  423.                     },
  424.                     {
  425.                         id: "overviewGatheringBoxKitchen",
  426.                         background: "background-dark-orange",
  427.                         image: "gathering_kitchen.png",
  428.                         name: "kitchen"
  429.                     },
  430.                     {
  431.                         id: "overviewGatheringBoxGemMine",
  432.                         background: "background-dark-cyan",
  433.                         image: "gathering_gem_mine.png",
  434.                         name: "gem_mine"
  435.                     },
  436.                     {
  437.                         id: "overviewGatheringBoxCastle",
  438.                         background: "background-veryrare",
  439.                         image: "gathering_castle.png",
  440.                         name: "castle"
  441.                     }
  442.                 ]
  443.     
  444.             areaData.forEach((area) => {
  445.                 const areaId = area.id
  446.                 const background = area.background
  447.                 const image = area.image
  448.                 const name = area.name
  449.  
  450.                 const areaElementString = `<div class="col d-flex justify-content-center">
  451.                                                         <div id="${areaId}" class="d-flex ${background} hover overviewGatheringBoxArea"
  452.                                                              ov-data-item="${name}" onclick="IdlePixelPlus.plugins['overview'].changeGatheringArea(this.getAttribute('ov-data-item'))">
  453.                                                             <img class="m-auto w-80 h-80" src="https://d1xsc8x7nc5q8t.cloudfront.net/images/${image}" />
  454.                                                         </div>
  455.                                                     </div>`
  456.                 const areaBox = $.parseHTML(areaElementString)
  457.                 $(`#overviewGatheringAreasContainer`).append(areaBox)
  458.             })
  459.         }
  460.     
  461.         addBonemealbinToPanel(){
  462.             const binString = `
  463.             <div class="col d-flex justify-content-center">
  464.                 <itembox data-item="playtime" ov-data-item="bonemeal_bin" class="shadow hover bone-item-box">
  465.                     <div class="center mt-1"><img draggable="false" src="https://d1xsc8x7nc5q8t.cloudfront.net/images/bonemeal_bin.png" title="bonemeal_bin"></div>
  466.                     <div class="center mt-2"> <img src="https://d1xsc8x7nc5q8t.cloudfront.net/images/bonemeal_icon.png"> <item-display data-format="number" data-key="bonemeal">0</item-display></div>
  467.                 </itembox>
  468.             </div>`
  469.  
  470.             const bonemealBox = $.parseHTML(binString)
  471.             $("#overviewBonemealContainer").append(bonemealBox)
  472.         }
  473.  
  474.         toggleMultiHarvest(){
  475.                 if (!("slapchop" in IdlePixelPlus.plugins)){
  476.                     $("#overviewChopAll").hide()
  477.                     $("#overviewHarvestAll").hide()
  478.                 }
  479.         }
  480.  
  481.         updatePanelTrees(){
  482.                 for(let i = 1; i < 6; i++) {
  483.                     const tree = Items.getItemString("tree_" + i);
  484.                     const stage = Items.getItem("tree_stage_" + i);
  485.                     const tree_time = Items.getItem("tree_timer_"+ i)
  486.                     let time_string
  487.  
  488.                     if(tree_time===0){
  489.                         time_string = "EMPTY"
  490.                     } else if (tree_time===1){
  491.                         time_string = "READY"
  492.                     } else {
  493.                         time_string = this.formatTimeWithDays(tree_time)
  494.                     }
  495.  
  496.                     $(`#overviewWoodcuttingTimer-${i}`).html(time_string)
  497.  
  498.                     let img_url
  499.  
  500.                     if(tree !== "none"){
  501.                         img_url = `https://idlepixel.s3.us-east-2.amazonaws.com/images/woodcutting_${tree}_${stage}.png`
  502.                     } else {
  503.                         if(i === 4 || i === 5){
  504.                             if(!DonorShop.has_donor_active(Items.getItem("donor_tree_patches_timestamp"))){
  505.                                 img_url = `https://idlepixel.s3.us-east-2.amazonaws.com/images/woodcutting_locked.png`
  506.                             } else {
  507.                                 img_url = `https://idlepixel.s3.us-east-2.amazonaws.com/images/woodcutting_none.png`
  508.                             }
  509.                         } else {
  510.                             img_url = `https://idlepixel.s3.us-east-2.amazonaws.com/images/woodcutting_none.png`
  511.                         }
  512.                     }
  513.                     $(`#overviewWoodcuttingPatchImg-${i}`).attr("src", img_url)
  514.                 }
  515.         }
  516.  
  517.         updatePanelPlants(){
  518.                 for(let i = 1; i < 6; i++) {
  519.                     const crop = Items.getItemString("farm_" + i);
  520.                     const stage = Items.getItem("farm_stage_" + i);
  521.                     const crop_time = Items.getItem("farm_timer_"+ i)
  522.                     let time_string
  523.  
  524.                     if(crop_time===0){
  525.                         time_string = "EMPTY"
  526.                     } else if (crop_time===1){
  527.                         time_string = "READY"
  528.                     } else {
  529.                         time_string = this.formatTimeWithDays(crop_time)
  530.                     }
  531.  
  532.                     $(`#overviewFarmingTimer-${i}`).html(time_string)
  533.  
  534.                     let img_url
  535.  
  536.                     if(crop !== "none"){
  537.                         if (Items.getItem("farm_death_" + i) === 1){
  538.                             img_url = "https://idlepixel.s3.us-east-2.amazonaws.com/images/farming_dead_leaf.png"
  539.                         } else {
  540.                             img_url = `https://idlepixel.s3.us-east-2.amazonaws.com/images/farming_${crop}_${stage}.png`
  541.                         }
  542.                     } else {
  543.                         if(i === 4 || i === 5){
  544.                             if(!DonorShop.has_donor_active(Items.getItem("donor_tree_patches_timestamp"))){
  545.                                 img_url = `https://idlepixel.s3.us-east-2.amazonaws.com/images/farming_locked.png`
  546.                             } else {
  547.                                 img_url = `https://idlepixel.s3.us-east-2.amazonaws.com/images/farming_none.png`
  548.                             }
  549.                         } else {
  550.                             img_url = `https://idlepixel.s3.us-east-2.amazonaws.com/images/farming_none.png`
  551.                         }
  552.                     }
  553.                     $(`#overviewFarmingPatchImg-${i}`).attr("src", img_url)
  554.                 }
  555.             }
  556.         
  557.         updatePanelCooking() {
  558.             let current_item = IdlePixelPlus.getVarOrDefault("cooks_book_item", "cooks_book", "string")
  559.             if (current_item === "none"){current_item="cooks_book"}
  560.  
  561.             const current_time = IdlePixelPlus.getVarOrDefault("cooks_book_timer", 0, "int")
  562.             let formatted_time
  563.             if (current_time<=1){
  564.                 formatted_time = "Completed."
  565.             } else {
  566.                 formatted_time = this.formatTimeWithDays(current_time)
  567.             }
  568.  
  569.             $("#overviewCooksBookItem").attr("src", `https://d1xsc8x7nc5q8t.cloudfront.net/images/${current_item}.png`)
  570.             $("#overviewCooksBookTimer").html(`${formatted_time}`)
  571.         }
  572.  
  573.         updateSmeltingPanel(){
  574.             /*oil, lava, buckets, coal, plasma, fire, furnace, bar_click*/
  575.             const oilNum = IdlePixelPlus.getVarOrDefault("oil", 0, "int")
  576.             const lavaNum = IdlePixelPlus.getVarOrDefault("lava", 0, "int")
  577.             const bucketsNum = IdlePixelPlus.getVarOrDefault("iron_bucket", 0, "int")
  578.             const charcoalNum = IdlePixelPlus.getVarOrDefault("charcoal", 0, "int")
  579.             const plasmaNum = IdlePixelPlus.getVarOrDefault("plasma", 0, "int")
  580.             const dFireNum = IdlePixelPlus.getVarOrDefault("dragon_fire", 0, "int")
  581.  
  582.             const furnaceType = this.getFurnace()
  583.  
  584.             $("#overviewOilNum").html(oilNum)
  585.             $("#overviewLavaNum").html(lavaNum)
  586.             $("#overviewBucketsNum").html(bucketsNum)
  587.             $("#overviewCharcoalNum").html(charcoalNum)
  588.             $("#overviewPlasmaNum").html(plasmaNum)
  589.             $("#overviewDFNum").html(dFireNum)
  590.  
  591.             $("#overviewFurnaceIcon").attr("src", `https://idlepixel.s3.us-east-2.amazonaws.com/images/${furnaceType}.png`)
  592.         }
  593.  
  594.         clicksLogs(logType){
  595.             const action = $('input[name=overviewUseLogsType]:checked').val();
  596.             if (action === "none") {return;}
  597.             if (action === "heat"){
  598.                 Modals.clicks_oven_log(logType)
  599.             } else if (action === "charcoal"){
  600.                 if ("slapchop" in IdlePixelPlus.plugins){
  601.                     IdlePixelPlus.plugins.slapchop.quickFoundry(logType)
  602.                 } else {
  603.                     Modals.open_foundry_clicks_log(logType)
  604.                 }
  605.             }
  606.         }
  607.  
  608.         clicksSeeds(seedType){
  609.             if ("slapchop" in IdlePixelPlus.plugins){
  610.                 IdlePixelPlus.plugins.slapchop.quickPlant(seedType, "altKey")
  611.             } else {
  612.                 Farming.clicks_seed(seedType)
  613.             }
  614.         }
  615.  
  616.         clicksBars(barType){
  617.             const oreBarMap = {
  618.                 bronze_bar: "copper",
  619.                 iron_bar: "iron",
  620.                 silver_bar: "silver",
  621.                 gold_bar: "gold",
  622.                 promethium_bar: "promethium",
  623.                 titanium_bar: "titanium",
  624.                 ancient_bar: "ancient_ore",
  625.                 dragon_bar: "dragon_ore"
  626.             }
  627.             if ("slapchop" in IdlePixelPlus.plugins){
  628.                 IdlePixelPlus.plugins.slapchop.quickSmelt(oreBarMap[barType])
  629.             } else {
  630.                 Modals.open_stardust_or_sell_item_dialogue('crafting', barType)
  631.             }
  632.         }
  633.  
  634.         highlightGathering(){
  635.             this.gatheringMap = {
  636.                 mines: "overviewGatheringBoxMines",
  637.                 fields: "overviewGatheringBoxFields",
  638.                 forest: "overviewGatheringBoxForest",
  639.                 fishing_pond: "overviewGatheringBoxFishingPond",
  640.                 kitchen: "overviewGatheringBoxKitchen",
  641.                 gem_mine: "overviewGatheringBoxGemMine",
  642.                 castle: "overviewGatheringBoxCastle",
  643.                 none: "none"
  644.             }
  645.  
  646.             const currentArea = IdlePixelPlus.getVarOrDefault("current_gathering_area", "none", "string")
  647.             const areaId = this.gatheringMap[currentArea]
  648.  
  649.             this.selectedGatheringArea = areaId
  650.  
  651.             $(`#${areaId}`).addClass("overviewGatheringBoxSelected")
  652.         }
  653.  
  654.         changeGatheringArea(newArea){
  655.             websocket.send("GATHERING=" + newArea);
  656.             const newAreaId = this.gatheringMap[newArea]
  657.  
  658.             const previousArea = this.selectedGatheringArea
  659.             $(`#${previousArea}`).removeClass("overviewGatheringBoxSelected")
  660.  
  661.             $(`#${newAreaId}`).addClass("overviewGatheringBoxSelected")
  662.             this.selectedGatheringArea = newAreaId
  663.         }
  664.     }
  665.  
  666.     const plugin = new OverviewPlugin();
  667.     IdlePixelPlus.registerPlugin(plugin);
  668.     
  669. })();