☰

IdlePixel Kaat Client

Kaat account interaction panel

当前为 2024-04-10 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         IdlePixel Kaat Client
  3. // @namespace    lbtechnology.info
  4. // @version      1.0.0
  5. // @description  Kaat account interaction panel
  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 KaatClientPlugin extends IdlePixelPlusPlugin {
  17.         constructor() {
  18.             super("kaat-client", {
  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: "kaatAccount",
  28.                         label: "Account name to running the v-pet.",
  29.                         type: "string",
  30.                         max: 20,
  31.                         default: "ᓚᘏᗢ"
  32.                     }
  33.                 ]
  34.             });
  35.             this.previous = "";
  36.         }
  37.  
  38.         onLogin() {
  39.             this.createPanel()
  40.             this.acquireKaatStats()
  41.             this.addStyles()
  42.  
  43.             if (!("kaat-host" in IdlePixelPlus.plugins)){
  44.                 $("#controlTabButton").hide()
  45.             }
  46.     
  47.             const onlineCount = $(".top-bar .gold:not(#top-bar-admin-link)");
  48.                 onlineCount.before(`
  49.                     <a href="#" class="hover float-end link-no-decoration"
  50.                     onclick="event.preventDefault(); IdlePixelPlus.setPanel('kaat-client')"
  51.                     title="Nya~">Nya~&nbsp;&nbsp;&nbsp;</a>
  52.                 `);
  53.             }
  54.  
  55.         onCustomMessageReceived(player, content, callbackId) {
  56.             const customData = this.parseCustom(player, content, callbackId)
  57.             if (!(customData.plugin === "kaatpet" || customData.anwinFormatted)){
  58.                 return
  59.             }
  60.             if (customData.player === this.getConfig("kaatAccount")){
  61.                 if (customData.command === "kaatData"){
  62.                     this.refreshKaatStats(customData.payload)
  63.                 }
  64.             }
  65.         }
  66.  
  67.         addStyles(){
  68.             let borderColour
  69.             
  70.             if ("ui-tweaks" in IdlePixelPlus.plugins){
  71.                 borderColour = IdlePixelPlus.plugins["ui-tweaks"].config["font-color-panels"]
  72.             } else {
  73.                 borderColour = "black"
  74.             }
  75.  
  76.             $("head").append(`
  77.                 <style id="styles-kaat-client">
  78.                     :root {
  79.                         --border-colour: ${borderColour}
  80.                     }
  81.                 </style>
  82.             `)
  83.         }
  84.  
  85.         parseCustom(player, content, callbackId){
  86.             const customData = {
  87.                 player: player,
  88.                 callbackId: callbackId,
  89.                 anwinFormatted: false
  90.             }
  91.             const splitPayload = content.split(":")
  92.             if(splitPayload.length >= 3){
  93.                 customData.anwinFormatted = true
  94.                 customData.plugin = splitPayload[0]
  95.                 customData.command = splitPayload[1]
  96.                 customData.payload = splitPayload.slice(2).join(":")
  97.             } else {
  98.                 customData.anwinFormatted = false
  99.                 customData.plugin = "unknown"
  100.                 customData.command = "unknown"
  101.                 customData.payload = content
  102.             }
  103.     
  104.             return customData
  105.         }
  106.     
  107.         createPanel(){
  108.             IdlePixelPlus.addPanel("kaat-client", "Nya~", function() {
  109.                 const content = `
  110. <div class="container" style="width: 100%;">
  111.     <header>
  112.         <h1>Kaat Client</h1>
  113.     </header>
  114.     <div>
  115.         <ul class="nav nav-tabs" role="tablist">
  116.             <li class="nav-item" role="presentation"><a class="nav-link active" role="tab" data-bs-toggle="tab" href="#tab-1">Status</a></li>
  117.             <li id="controlTabButton" class="nav-item" role="presentation"><a class="nav-link" role="tab" data-bs-toggle="tab" href="#tab-2">Control</a></li>
  118.         </ul>
  119.         <div class="tab-content">
  120.             <div id="tab-1" class="tab-pane active" role="tabpanel">
  121.                 <h2>Kaat Status</h2>
  122.                 <div class="vstack">
  123.                     <div style="border: 2px solid var(--border-colour);">
  124.                         <div class="row" style="border-bottom: 1px solid var(--border-colour);margin: 0px;">
  125.                             <h3 style="border: 0px solid var(--border-colour);">Overall Mood</h3>
  126.                         </div>
  127.                         <div class="row" style="margin: 0px;">
  128.                             <div class="col-xl-9 d-flex flex-column justify-content-between align-self-center">
  129.                                 <div class="progress" style="height: 24px;">
  130.                                     <div id="mood" class="progress-bar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">50%</div>
  131.                                 </div>
  132.                                 <div class="row">
  133.                                     <div class="col">
  134.                                         <div class="row">
  135.                                             <div class="col-xl-2"><label class="col-form-label fw-bold">Is alive?</label></div>
  136.                                             <div class="col-xl-1"><label id="isAliveLbl" class="col-form-label fw-bold"></label></div>
  137.                                             <div class="col"><label class="col-form-label"></label></div>
  138.                                         </div>
  139.                                         <div class="row">
  140.                                             <div class="col-xl-2"><label class="col-form-label fw-bold">Is asleep?</label></div>
  141.                                             <div class="col-xl-1"><label id="isAsleepLbl" class="col-form-label fw-bold"></label></div>
  142.                                             <div class="col"><label class="col-form-label"></label></div>
  143.                                         </div>
  144.                                     </div>
  145.                                 </div>
  146.                             </div>
  147.                             <div class="col flex-shrink-1" style="text-align: center;"><img class="img-fluid flex-shrink-1" src="https://cdn.discordapp.com/attachments/1170262289803390997/1177053355240075314/DALLE_2023-11-22_12.57.21_-_Create_a_black_and_white_pixelated_image_of_a_cat_sleeping_with_black_coloration_around_its_ears_on_its_head._The_cat_should_be_depicted_in_a_peaceful.png" style="max-width: 10vw;" /></div>
  148.                         </div>
  149.                     </div>
  150.                     <div style="border: 2px solid var(--border-colour);">
  151.                         <div class="row" style="border-bottom: 1px solid var(--border-colour);margin: 0px;">
  152.                             <h3>Individual Stats</h3>
  153.                         </div>
  154.                         <div class="row" style="border-bottom: 1px outset var(--border-colour);margin: 0px;">
  155.                             <div class="col-xl-1"><label class="col-form-label" for="hunger">Hunger</label></div>
  156.                             <div class="col align-self-center">
  157.                                 <div class="progress" style="height: 24px;">
  158.                                     <div id="hunger" class="progress-bar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">50%</div>
  159.                                 </div>
  160.                             </div>
  161.                         </div>
  162.                         <div class="row" style="border-bottom: 1px outset var(--border-colour);margin: 0px;">
  163.                             <div class="col-xl-1"><label class="col-form-label" for="tiredness">Tiredness</label></div>
  164.                             <div class="col align-self-center">
  165.                                 <div class="progress" style="height: 24px;">
  166.                                     <div id="tiredness" class="progress-bar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">50%</div>
  167.                                 </div>
  168.                             </div>
  169.                         </div>
  170.                         <div class="row" style="border-bottom: 1px outset var(--border-colour);margin: 0px;">
  171.                             <div class="col-xl-1"><label class="col-form-label" for="social">Social</label></div>
  172.                             <div class="col align-self-center">
  173.                                 <div class="progress" style="height: 24px;">
  174.                                     <div id="social" class="progress-bar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">50%</div>
  175.                                 </div>
  176.                             </div>
  177.                         </div>
  178.                         <div class="row" style="margin: 0px;">
  179.                             <div class="col-xl-1"><label class="col-form-label" for="energy">Energy</label></div>
  180.                             <div class="col align-self-center">
  181.                                 <div class="progress" style="height: 24px;">
  182.                                     <div id="energy" class="progress-bar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">50%</div>
  183.                                 </div>
  184.                             </div>
  185.                         </div>
  186.                     </div>
  187.                 </div>
  188.             </div>
  189.             <div id="tab-2" class="tab-pane" role="tabpanel">
  190.                 <h2>Kaat Configs</h2>
  191.                 <div class="vstack">
  192.                     <div style="border: 2px solid var(--border-colour);">
  193.                         <div class="row d-flex flex-wrap" style="margin: 0px;border-bottom: 1px dotted var(--border-colour);">
  194.                             <div class="col-xl-1"><label class="col-form-label"></label></div>
  195.                             <div class="col-2 col-xl-2 text-center"><button class="btn btn-secondary" type="button" onclick="IdlePixelPlus.plugins[&#39;kaat-client&#39;].populateConfigs()">Load Configs</button></div>
  196.                             <div class="col-2 col-xl-2 text-center"><label class="col-form-label"></label></div>
  197.                             <div class="col-2 col-xl-2 text-center"><button class="btn btn-success" type="button" onclick="IdlePixelPlus.plugins[&#39;kaat-host&#39;].revive()">Revive ᓚᘏᗢ</button><label class="form-label"></label></div>
  198.                             <div class="col-2 col-xl-2 text-center"><label class="col-form-label"></label></div>
  199.                             <div class="col-4 col-xl-2 text-center" style="text-align: center;"><button class="btn btn-secondary" type="button" onclick="IdlePixelPlus.plugins[&#39;kaat-client&#39;].saveConfigs()">Save Configs</button></div>
  200.                             <div class="col-xl-1"><label class="col-form-label"></label></div>
  201.                         </div>
  202.                     </div>
  203.                     <div style="border: 2px solid var(--border-colour);">
  204.                         <div class="row" style="border-bottom: 1px solid var(--border-colour);margin: 0px;">
  205.                             <h3 style="border: 0px solid var(--border-colour);">Controls</h3>
  206.                         </div>
  207.                         <div class="row d-flex flex-wrap" style="margin: 0px;border-bottom: 1px dotted var(--border-colour);">
  208.                             <div class="col-2 col-xl-2 text-center justify-content-center align-self-center">
  209.                                 <p>Tick Length (ms)</p>
  210.                             </div>
  211.                             <div class="col" style="text-align: center;border-right: 1px dotted var(--border-colour);"><input id="tickLengthInput" type="number" min="1000" max="300000" style="width: 100%;" /></div>
  212.                             <div class="col-2 col-xl-2 text-center" style="text-align: center;">
  213.                                 <p>Cooldown Length (ms)</p>
  214.                             </div>
  215.                             <div class="col-4 col-xl-4" style="text-align: center;"><input id="cooldownLengthInput" type="number" min="1000" max="300000" style="width: 100%;" /></div>
  216.                         </div>
  217.                         <div class="row" style="margin: 0px;border-bottom: 1px dotted var(--border-colour);">
  218.                             <div class="col-2 col-xl-2 text-center justify-content-center align-self-center">
  219.                                 <p>Hunger removed by !feed</p>
  220.                             </div>
  221.                             <div class="col-4 col-xl-4 align-self-center" style="text-align: center;border-right: 1px dotted var(--border-colour);"><label id="feedHungerSliderLbl" class="form-label" for="feedHungerSlider">0</label><input id="feedHungerSlider" class="form-range" type="range" min="1" max="100" step="1" value="50" oninput="$(&#39;#feedHungerSliderLbl&#39;).html(this.value)" /></div>
  222.                             <div class="col-2 col-xl-2 text-center align-self-center" style="text-align: center;">
  223.                                 <p>Social restored by !pet</p>
  224.                             </div>
  225.                             <div class="col-4 col-xl-4 align-self-center" style="text-align: center;"><label id="petSocialSliderLbl" class="form-label" for="petSocialSlider">0</label><input id="petSocialSlider" class="form-range" type="range" min="1" max="100" step="1" value="50" oninput="$(&#39;#petSocialSliderLbl&#39;).html(this.value)" /></div>
  226.                         </div>
  227.                         <div class="row" style="margin: 0px;">
  228.                             <div class="col-2 col-xl-2 text-center justify-content-center">
  229.                                 <p>Energy used by !play</p>
  230.                             </div>
  231.                             <div class="col-4 col-xl-4 align-self-center" style="text-align: center;border-right: 1px dotted var(--border-colour);"><label id="playEnergySliderLbl" class="form-label" for="playEnergySlider">0</label><input id="playEnergySlider" class="form-range" type="range" min="1" max="100" step="1" value="50" oninput="$(&#39;#playEnergySliderLbl&#39;).html(this.value)" /></div>
  232.                             <div class="col-2 col-xl-2 text-center flex-shrink-1 align-self-center" style="text-align: center;">
  233.                                 <p>Social restored by !play</p>
  234.                             </div>
  235.                             <div class="col-4 col-xl-4 align-self-center" style="text-align: center;"><label id="playSocialSliderLbl" class="form-label" for="playSocialSlider">0</label><input id="playSocialSlider" class="form-range" type="range" min="1" max="100" step="1" value="50" oninput="$(&#39;#playSocialSliderLbl&#39;).html(this.value)" /></div>
  236.                         </div>
  237.                         <div class="row" style="margin: 0px;">
  238.                             <div class="col-2 col-xl-2 justify-content-center"></div>
  239.                             <div class="col-4 col-xl-4 flex-shrink-1" style="text-align: center;"></div>
  240.                             <div class="col-2 col-xl-2 flex-shrink-1" style="text-align: center;"></div>
  241.                             <div class="col-4 col-xl-4 flex-shrink-1" style="text-align: center;"></div>
  242.                         </div>
  243.                     </div>
  244.                     <div style="border: 2px solid var(--border-colour);">
  245.                         <div class="row" style="border-bottom: 1px solid var(--border-colour);margin: 0px;">
  246.                             <h3>Reply Strings</h3>
  247.                         </div>
  248.                         <div class="row" style="margin: 0px;border-top: 2px solid var(--border-colour);border-bottom: 1px solid var(--border-colour);">
  249.                             <h4>Hunger</h4>
  250.                         </div>
  251.                         <div class="row" style="border-bottom: 1px solid var(--border-colour);margin: 0px;">
  252.                             <h5>!feed</h5>
  253.                         </div>
  254.                         <div class="row" style="border-bottom: 1px outset var(--border-colour);margin: 0px;">
  255.                             <div class="col-xl-2"><label class="col-form-label">Not hungry</label></div>
  256.                             <div class="col align-self-center"><input id="notHungryInput" type="text" style="width: 100%;" /></div>
  257.                         </div>
  258.                         <div class="row" style="border-bottom: 1px outset var(--border-colour);margin: 0px;">
  259.                             <div class="col-xl-2"><label class="col-form-label">Part one</label></div>
  260.                             <div class="col align-self-center"><input id="beenFedInput" type="text" style="width: 100%;" /></div>
  261.                         </div>
  262.                         <div class="row" style="border-bottom: 1px outset var(--border-colour);margin: 0px;">
  263.                             <div class="col-xl-2"><label class="col-form-label">Part two - high hunger</label></div>
  264.                             <div class="col align-self-center"><input id="stillHungryInput" type="text" style="width: 100%;" /></div>
  265.                         </div>
  266.                         <div class="row" style="border-bottom: 1px outset var(--border-colour);margin: 0px;">
  267.                             <div class="col-xl-2"><label class="col-form-label">Part two - low hunger</label></div>
  268.                             <div class="col align-self-center"><input id="wellFedInput" type="text" style="width: 100%;" /></div>
  269.                         </div>
  270.                         <div class="row" style="margin: 0px;border-top: 2px solid var(--border-colour);border-bottom: 1px solid var(--border-colour);">
  271.                             <h4>Tiredness</h4>
  272.                         </div>
  273.                         <div class="row" style="border-bottom: 1px outset var(--border-colour);margin: 0px;">
  274.                             <div class="col-xl-2"><label class="col-form-label">Wake up</label></div>
  275.                             <div class="col align-self-center"><input id="wakeUpInput" type="text" style="width: 100%;" /></div>
  276.                         </div>
  277.                         <div class="row" style="border-bottom: 1px outset var(--border-colour);margin: 0px;">
  278.                             <div class="col-xl-2"><label class="col-form-label">Is sleeping</label></div>
  279.                             <div class="col align-self-center"><input id="isSleepingInput" type="text" style="width: 100%;" /></div>
  280.                         </div>
  281.                         <div class="row" style="border-bottom: 1px solid var(--border-colour);margin: 0px;">
  282.                             <h5>!sleep</h5>
  283.                         </div>
  284.                         <div class="row" style="border-bottom: 1px outset var(--border-colour);margin: 0px;">
  285.                             <div class="col-xl-2"><label class="col-form-label">Not tired</label></div>
  286.                             <div class="col align-self-center"><input id="notTiredInput" type="text" style="width: 100%;" /></div>
  287.                         </div>
  288.                         <div class="row" style="border-bottom: 1px outset var(--border-colour);margin: 0px;">
  289.                             <div class="col-xl-2"><label class="col-form-label">Start sleep</label></div>
  290.                             <div class="col align-self-center"><input id="startSleepInput" type="text" style="width: 100%;" /></div>
  291.                         </div>
  292.                         <div class="row" style="margin: 0px;border-top: 2px solid var(--border-colour);border-bottom: 1px solid var(--border-colour);">
  293.                             <h4>Social</h4>
  294.                         </div>
  295.                         <div class="row" style="border-bottom: 1px solid var(--border-colour);margin: 0px;">
  296.                             <h5>!play</h5>
  297.                         </div>
  298.                         <div class="row" style="border-bottom: 1px outset var(--border-colour);margin: 0px;">
  299.                             <div class="col-xl-2"><label class="col-form-label">No play</label></div>
  300.                             <div class="col align-self-center"><input id="noPlayInput" type="text" style="width: 100%;" /></div>
  301.                         </div>
  302.                         <div class="row" style="border-bottom: 1px outset var(--border-colour);margin: 0px;">
  303.                             <div class="col-xl-2"><label class="col-form-label">No energy to play</label></div>
  304.                             <div class="col align-self-center"><input id="noEnergyForPlayInput" type="text" style="width: 100%;" /></div>
  305.                         </div>
  306.                         <div class="row" style="border-bottom: 1px outset var(--border-colour);margin: 0px;">
  307.                             <div class="col-xl-2"><label class="col-form-label">Part one</label></div>
  308.                             <div class="col align-self-center"><input id="hadPlayInput" type="text" style="width: 100%;" /></div>
  309.                         </div>
  310.                         <div class="row" style="border-bottom: 1px outset var(--border-colour);margin: 0px;">
  311.                             <div class="col-xl-2"><label class="col-form-label">Part two - high social</label></div>
  312.                             <div class="col align-self-center"><input id="donePlayInput" type="text" style="width: 100%;" /></div>
  313.                         </div>
  314.                         <div class="row" style="border-bottom: 1px outset var(--border-colour);margin: 0px;">
  315.                             <div class="col-xl-2"><label class="col-form-label">Part two - low social</label></div>
  316.                             <div class="col align-self-center"><input id="morePlayInput" type="text" style="width: 100%;" /></div>
  317.                         </div>
  318.                         <div class="row" style="border-bottom: 1px solid var(--border-colour);margin: 0px;">
  319.                             <h5>!pet</h5>
  320.                         </div>
  321.                         <div class="row" style="border-bottom: 1px outset var(--border-colour);margin: 0px;">
  322.                             <div class="col-xl-2"><label class="col-form-label">No pets</label></div>
  323.                             <div class="col align-self-center"><input id="noPetsInput" type="text" style="width: 100%;" /></div>
  324.                         </div>
  325.                         <div class="row" style="border-bottom: 1px outset var(--border-colour);margin: 0px;">
  326.                             <div class="col-xl-2"><label class="col-form-label">Had pets</label></div>
  327.                             <div class="col align-self-center"><input id="hadPetsInput" type="text" style="width: 100%;" /></div>
  328.                         </div>
  329.                         <div class="row" style="margin: 0px;border-top: 2px solid var(--border-colour);border-bottom: 1px solid var(--border-colour);">
  330.                             <h4>Status</h4>
  331.                         </div>
  332.                         <div class="row" style="border-bottom: 1px outset var(--border-colour);margin: 0px;">
  333.                             <div class="col-xl-2"><label class="col-form-label">Very high hunger</label></div>
  334.                             <div class="col align-self-center"><input id="starvingInput" type="text" style="width: 100%;" /></div>
  335.                         </div>
  336.                         <div class="row" style="border-bottom: 1px outset var(--border-colour);margin: 0px;">
  337.                             <div class="col-xl-2"><label class="col-form-label">High hunger</label></div>
  338.                             <div class="col align-self-center"><input id="hungryInput" type="text" style="width: 100%;" /></div>
  339.                         </div>
  340.                         <div class="row" style="border-bottom: 1px outset var(--border-colour);margin: 0px;">
  341.                             <div class="col-xl-2"><label class="col-form-label">Very high tiredness</label></div>
  342.                             <div class="col align-self-center"><input id="exhaustedInput" type="text" style="width: 100%;" /></div>
  343.                         </div>
  344.                         <div class="row" style="border-bottom: 1px outset var(--border-colour);margin: 0px;">
  345.                             <div class="col-xl-2"><label class="col-form-label">High tiredness</label></div>
  346.                             <div class="col align-self-center"><input id="sleepyInput" type="text" style="width: 100%;" /></div>
  347.                         </div>
  348.                         <div class="row" style="border-bottom: 1px outset var(--border-colour);margin: 0px;">
  349.                             <div class="col-xl-2"><label class="col-form-label">Very low social</label></div>
  350.                             <div class="col align-self-center"><input id="lonelyInput" type="text" style="width: 100%;" /></div>
  351.                         </div>
  352.                         <div class="row" style="border-bottom: 1px outset var(--border-colour);margin: 0px;">
  353.                             <div class="col-xl-2"><label class="col-form-label">Low social</label></div>
  354.                             <div class="col align-self-center"><input id="needsAttentionInput" type="text" style="width: 100%;" /></div>
  355.                         </div>
  356.                         <div class="row" style="border-bottom: 1px outset var(--border-colour);margin: 0px;">
  357.                             <div class="col-xl-2"><label class="col-form-label">All stats high</label></div>
  358.                             <div class="col align-self-center"><input id="feelGreatInput" type="text" style="width: 100%;" /></div>
  359.                         </div>
  360.                         <div class="row" style="border-bottom: 1px outset var(--border-colour);margin: 0px;">
  361.                             <div class="col-xl-2"><label class="col-form-label">All stats mid</label></div>
  362.                             <div class="col align-self-center"><input id="feelOkayInput" type="text" style="width: 100%;" /></div>
  363.                         </div>
  364.                         <div class="row" style="border-bottom: 1px outset var(--border-colour);margin: 0px;">
  365.                             <div class="col-xl-2"><label class="col-form-label">Has died</label></div>
  366.                             <div class="col align-self-center"><input id="hasDiedInput" type="text" style="width: 100%;" /></div>
  367.                         </div>
  368.                     </div>
  369.                 </div>
  370.             </div>
  371.         </div>
  372.     </div>
  373. </div>
  374.                     `
  375.                     return content
  376.                 });
  377.         }
  378.     
  379.         acquireKaatStats(){
  380.             const kaatAccount = this.getConfig("kaatAccount")
  381.             const command = "kaatDataRequest"
  382.             const data = "None"
  383.             this.sendCustom(kaatAccount, command, data)
  384.         }
  385.     
  386.         refreshKaatStats(rawData){
  387.             const data = JSON.parse(rawData)
  388.             
  389.             const dataPointMap = {
  390.                 hunger: {value: data.hunger, negative: true},
  391.                 tiredness: {value: data.tiredness, negative: true},
  392.                 energy: {value: data.energy, negative: false},
  393.                 social: {value: data.social, negative: false},
  394.             }
  395.  
  396.             dataPointMap.mood = {
  397.                 value: Math.floor(( (100-dataPointMap.hunger.value) + (100-dataPointMap.tiredness.value) + dataPointMap.social.value) / 3),
  398.                 negative: false
  399.             }
  400.             
  401.             for (const [key, data] of Object.entries(dataPointMap)) {
  402.                 const value = data.value
  403.                 const isNegative = data.negative
  404.                 let hue = Math.floor(value * 1.2)
  405.                 if (isNegative){
  406.                     hue = 120 - hue
  407.                 }
  408.                 $(`#${key}`)
  409.                     .attr({
  410.                         "aria-valuenow": value,
  411.                         "style": `width: ${value}%; background-color: hsl(${hue}, 70%, 50%) !important;`
  412.                     })
  413.                     .html(value+'%')
  414.             }
  415.             
  416.             $("#isAliveLbl").html(data.alive? "Yes" : "No")
  417.             $("#isAsleepLbl").html(data.sleeping? "Yes" : "No")
  418.         }
  419.                 
  420.         sendCustom(recipient, command, data){
  421.             const pluginValue = "kaatpet"
  422.             
  423.             const content = `${pluginValue}:${command}:${data}`
  424.     
  425.             const payload = {
  426.                 content: content, 
  427.                 onResponse: function(player, content, callbackId) {
  428.                     return true;
  429.                     },
  430.                 onOffline: function(player, content) {
  431.                     console.log(content)
  432.                 },
  433.                 timeout: 2000 // callback expires after 2 seconds
  434.             }
  435.             IdlePixelPlus.sendCustomMessage(recipient, payload)
  436.         }
  437.     
  438.         populateConfigs(){
  439.             const storedReplyStrings = localStorage.getItem("kaatReplies")
  440.             if (storedReplyStrings){
  441.                 this.replyStrings = JSON.parse(storedReplyStrings)
  442.             } else {
  443.                 this.replyStrings = {
  444.                     notHungry: "",
  445.                     beenFed: "",
  446.                     stillHungry: "",
  447.                     wellFed: "",
  448.                     wakeUp: "",
  449.                     notTired: "",
  450.                     startSleep: "",
  451.                     isSleeping: "",
  452.                     noPlay: "",
  453.                     noEnergyForPlay: "",
  454.                     hadPlay: "",
  455.                     donePlay: "",
  456.                     morePlay: "",
  457.                     noPets: "",
  458.                     hadPets: "",
  459.                     starving: "",
  460.                     hungry: "",
  461.                     exhausted: "",
  462.                     sleepy: "",
  463.                     lonely: "",
  464.                     needsAttention: "",
  465.                     feelGreat: "",
  466.                     feelOkay: "",
  467.                     hasDied: "",
  468.                 }
  469.             }
  470.  
  471.             for (const [key, value] of Object.entries(this.replyStrings)) {
  472.                 $(`#${key}Input`).val(value)
  473.             }
  474.  
  475.             const storedConfigs = localStorage.getItem("kaatConfigs")
  476.             if (storedConfigs){
  477.                 this.configValues = JSON.parse(storedConfigs)
  478.             } else {
  479.                 this.configValues = {
  480.                     tickLength: {
  481.                         value: 0,
  482.                         element: "tickLengthInput"
  483.                     },
  484.                     cooldownLength: {
  485.                         value: 0,
  486.                         element: "cooldownLengthInput"
  487.                     },
  488.                     feedHungerDif: {
  489.                         value: 0,
  490.                         element: "feedHungerSlider"
  491.                     },
  492.                     playEnergyDif: {
  493.                         value: 0,
  494.                         element: "playEnergySlider"
  495.                     },
  496.                     playSocialDif: {
  497.                         value: 0,
  498.                         element: "playSocialSlider"
  499.                     },
  500.                     petSocialDif: {
  501.                         value: 0,
  502.                         element: "petSocialSlider"
  503.                     },
  504.                 }
  505.             }
  506.  
  507.             for (const [key, value] of Object.entries(this.configValues)) {
  508.                 $(`#${value.element}`).val(value.value)
  509.                 if (value.element.endsWith("Slider")){
  510.                     $(`#${value.element}Lbl`).html(value.value)
  511.                 }
  512.             }
  513.         }
  514.  
  515.         saveConfigs(){
  516.             const newConfigValues = {
  517.                 tickLength: {
  518.                     value: 0,
  519.                     element: "tickLengthInput"
  520.                 },
  521.                 cooldownLength: {
  522.                     value: 0,
  523.                     element: "cooldownLengthInput"
  524.                 },
  525.                 feedHungerDif: {
  526.                     value: 0,
  527.                     element: "feedHungerSlider"
  528.                 },
  529.                 playEnergyDif: {
  530.                     value: 0,
  531.                     element: "playEnergySlider"
  532.                 },
  533.                 playSocialDif: {
  534.                     value: 0,
  535.                     element: "playSocialSlider"
  536.                 },
  537.                 petSocialDif: {
  538.                     value: 0,
  539.                     element: "petSocialSlider"
  540.                 },
  541.             }
  542.  
  543.             const newReplyStrings = {
  544.                 notHungry: "",
  545.                 beenFed: "",
  546.                 stillHungry: "",
  547.                 wellFed: "",
  548.                 wakeUp: "",
  549.                 notTired: "",
  550.                 startSleep: "",
  551.                 isSleeping: "",
  552.                 noPlay: "",
  553.                 noEnergyForPlay: "",
  554.                 hadPlay: "",
  555.                 donePlay: "",
  556.                 morePlay: "",
  557.                 noPets: "",
  558.                 hadPets: "",
  559.                 starving: "",
  560.                 hungry: "",
  561.                 exhausted: "",
  562.                 sleepy: "",
  563.                 lonely: "",
  564.                 needsAttention: "",
  565.                 feelGreat: "",
  566.                 feelOkay: "",
  567.                 hasDied: "",
  568.             }
  569.  
  570.             for (const [key, value] of Object.entries(newReplyStrings)) {
  571.                 newReplyStrings[key] = $(`#${key}Input`).val()
  572.             }
  573.  
  574.             for (const [key, value] of Object.entries(newConfigValues)) {
  575.                 newConfigValues[key].value = parseInt($(`#${value.element}`).val())
  576.             }
  577.  
  578.             const configString = JSON.stringify(newConfigValues)
  579.             const replyStringsString = JSON.stringify(newReplyStrings)
  580.  
  581.             localStorage.setItem("kaatConfigs", configString)
  582.             localStorage.setItem("kaatReplies", replyStringsString)
  583.         }
  584. }
  585.  
  586.     const plugin = new KaatClientPlugin();
  587.     IdlePixelPlus.registerPlugin(plugin);
  588.     
  589. })();