☰

IdlePixel Kaat Client

Kaat account interaction panel

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