☰

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