☰

IdlePixel Loot Log Tweaks

Moving the Loot Log into a container like IdlePixel Fixed had with 'Tab' as the button to open.

  1. // ==UserScript==
  2. // @name         IdlePixel Loot Log Tweaks
  3. // @namespace    godofnades.idlepixel
  4. // @version      0.1.9
  5. // @description  Moving the Loot Log into a container like IdlePixel Fixed had with 'Tab' as the button to open.
  6. // @author       GodofNades
  7. // @match        *://idle-pixel.com/login/play*
  8. // @grant        none
  9. // @license      MIT
  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.     let lootLogRefreshTimer;
  18.  
  19.     LogManager.prototype.refresh_panel = function() {
  20.         var content = document.getElementById("panel-history-content");
  21.         var custom = document.getElementById("ll-panel-div");
  22.         var imgLoc = `https://d1xsc8x7nc5q8t.cloudfront.net/`;
  23.         var html = "";
  24.         for(var i = this.data.length - 1; i >= 0; i--) {
  25.             var entry = this.data[i];
  26.             var dt = entry.datetime;
  27.             var slug = entry.slug;
  28.             var monster_drops = entry.data;
  29.  
  30.             // Custom time formatting code
  31.             var nowObj = new Date();
  32.             var dtObj = new Date(dt);
  33.             var delta = nowObj.getTime() - dtObj.getTime();
  34.             var deltaSeconds = Math.floor(delta / 1000);
  35.             var deltaMinutes = Math.floor(deltaSeconds / 60);
  36.             var deltaHours = Math.floor(deltaMinutes / 60);
  37.             var deltaDays = Math.floor(deltaHours / 24);
  38.  
  39.             var timeLabel = deltaSeconds + " seconds ago";
  40.             if(deltaDays > 0) {
  41.                 timeLabel = deltaDays + " days ago";
  42.             } else if(deltaHours > 0) {
  43.                 timeLabel = deltaHours + " hours ago";
  44.             } else if(deltaMinutes > 0) {
  45.                 timeLabel = deltaMinutes + " minutes ago";
  46.             }
  47.  
  48.             html += "<div class='drop-log-div'>";
  49.             html += "<div class='drop-log-dt'>" + timeLabel + "</div>";
  50.             if(slug == 'raid_drop') {
  51.                 var imgRaid = entry.data.split("~")[0];
  52.                 html += "<div class='loot' style='background-color:aquamarine'>"
  53.                 html += "<img src='" + imgLoc + imgRaid + "'class='w50 me-3'>"
  54.                 html += entry.data.split("~")[1];
  55.                 html += "</div>"
  56.             } else {
  57.                 monster_drops.forEach(function(drop) {
  58.                     var image = drop.image;
  59.                     var label = drop.label;
  60.                     var color = drop.color;
  61.                     html += "<div class='loot' style='background-color:" + color + "'>";
  62.                     html += "<img src='" + imgLoc + image + "' class='w50 me-3'>";
  63.                     html += label;
  64.                     html += "</div>";
  65.                 });
  66.             }
  67.             html += "</div><br /><br />";
  68.         }
  69.  
  70.         if(html === "") {
  71.             html = "<div class='center'>You have no data yet. Loot something and come back to check!</div>";
  72.         }
  73.         content.innerHTML = html;
  74.         custom.innerHTML = html;
  75.     };
  76.  
  77.     class lootLogTweaks extends IdlePixelPlusPlugin {
  78.         constructor() {
  79.             super("lootlogtweaks", {
  80.                 about: {
  81.                     name: GM_info.script.name + " (ver: " + GM_info.script.version + ")",
  82.                     version: GM_info.script.version,
  83.                     author: GM_info.script.author,
  84.                     description: GM_info.script.description,
  85.                 },
  86.                 /*config: [
  87.                     {
  88.                         label: "------------------------------",
  89.                         type: "label"
  90.                     },
  91.                     {
  92.                         label: "General Stuff",
  93.                         type: "label"
  94.                     },
  95.                     {
  96.                         label: "------------------------------",
  97.                         type: "label"
  98.                     },
  99.                     {
  100.                         id: "font",
  101.                         label: "Primary Font",
  102.                         type: "select",
  103.                         options: FONTS,
  104.                         default: FONT_DEFAULT
  105.                     }
  106.                 ]*/
  107.             });
  108.         }
  109.  
  110.         initStyles() {
  111.             const css = `
  112.               #modal-style-ll .drop-log-dt {
  113.                 color: cyan;
  114.               }
  115.  
  116.               #close-button-ll {
  117.                 background-color: red;
  118.                 width: 30px;
  119.                 height: 30px;
  120.                 position: absolute;
  121.                 top: 10px;
  122.                 right: 10px;
  123.                 border-radius: 50%;
  124.                 cursor: pointer;
  125.               }
  126.  
  127.               #inner-close-button {
  128.                 color: white;
  129.                 font-size: 20px;
  130.                 font-weight: bold;
  131.                 text-align: center;
  132.                 line-height: 30px;
  133.               }
  134.  
  135.               #ll-panel-div-container {
  136.                 overflow:auto;
  137.                 padding: 0.5em;
  138.               }
  139.  
  140.               #modal-style-ll {
  141.                 display: none;
  142.               }
  143.  
  144.               #modal-style-ll-container {
  145.                 position: absolute;
  146.                 top: 0px;
  147.                 left: 0px;
  148.                 width: 98vw;
  149.                 height: 100vh;
  150.               }
  151.  
  152.               #ll-modal-base_window {
  153.                 position: absolute;
  154.                 top: 10vh;
  155.                 left: 25vw;
  156.                 width: 45vw;
  157.                 height: 85vh;
  158.                 text-align: center;
  159.                 border: 1px solid grey;
  160.                 background-color: rgb(0, 0, 0);
  161.                 border-radius:20px;
  162.                 padding: 20px;
  163.                 z-index: 10000;
  164.                 display: flex;
  165.                 align-items: center;
  166.                 flex-direction: column;
  167.               }
  168.             `;
  169.                 const styleSheet = document.createElement("style");
  170.                 styleSheet.innerHTML = css;
  171.                 document.head.appendChild(styleSheet);
  172.             }
  173.  
  174.             createPanel() {
  175.                 let llModalHTML = `
  176.               <div id="modal-style-ll"">
  177.                 <div id="modal-style-ll-container">
  178.                   <div id="ll-modal-base_window" style="">
  179.                     <div id="close-button-ll">
  180.                       <p id="inner-close-button">X</p>
  181.                     </div>
  182.                     <br/>
  183.                     <p id="activity-subheader" class="activity-subheader">Loot Log</p>
  184.                     <hr>
  185.                     <div id="ll-panel-div-container"">
  186.                       <div id="ll-panel-div">
  187.                       </div>
  188.                     </div>
  189.                   </div>
  190.                   </br>
  191.                 </div>
  192.               </div>
  193.             `;
  194.  
  195.             const contentDiv = document.getElementById("content");
  196.             const modalContainer = document.createElement("div");
  197.             modalContainer.innerHTML = llModalHTML;
  198.             contentDiv.appendChild(modalContainer);
  199.  
  200.             const onlineCount = document.querySelector(
  201.                 ".game-top-bar .gold:not(#top-bar-admin-link)"
  202.             );
  203.             const linkElement = document.createElement("a");
  204.             linkElement.href = "#";
  205.             linkElement.className = "hover float-end link-no-decoration";
  206.             linkElement.title = "Loot Log";
  207.             linkElement.textContent = "Loot Log" + "\u00A0\u00A0\u00A0";
  208.  
  209.             onlineCount.insertAdjacentElement("beforebegin", linkElement);
  210.  
  211.             const modalStyleLL = document.getElementById("modal-style-ll");
  212.             const closeButton = document.getElementById("close-button-ll");
  213.  
  214.             linkElement.addEventListener("click", function (event) {
  215.                 event.preventDefault();
  216.                 modalStyleLL.style.display = "block";
  217.                 new LogManager().refresh_panel();
  218.             });
  219.  
  220.             closeButton.addEventListener("click", function () {
  221.                 modalStyleLL.style.display = "none";
  222.             });
  223.  
  224.             document.addEventListener("keydown", function (event) {
  225.                 var chatInput = document.getElementById("chat-area-input");
  226.                 var chat_focused = document.activeElement === chatInput;
  227.                 if (!chat_focused) {
  228.                     if (event.keyCode === 9) {
  229.                         if (modalStyleLL.style.display === "block") {
  230.                             modalStyleLL.style.display = "none";
  231.                         } else {
  232.                             modalStyleLL.style.display = "block";
  233.                             new LogManager().refresh_panel();
  234.                         }
  235.                     }
  236.                 }
  237.             });
  238.  
  239.             modalStyleLL.addEventListener("click", function (event) {
  240.                 const isClickInside = document
  241.                 .getElementById("al-modal-base_window")
  242.                 .contains(event.target);
  243.  
  244.                 if (!isClickInside) {
  245.                     modalStyleLL.style.display = "none";
  246.                 }
  247.             });
  248.  
  249.             document
  250.                 .getElementById("ll-modal-base_window")
  251.                 .addEventListener("click", function (event) {
  252.                 event.stopPropagation();
  253.             });
  254.         }
  255.  
  256.             onLogin() {
  257.                 this.initStyles();
  258.                 this.createPanel();
  259.                 //Paneller.registerPanel("lootLogTweaks", "Loot Log")
  260.             }
  261.  
  262.             onMessageReceived(data) {
  263.                 if(data.startsWith('OPEN_LOOT_DIALOGUE')) {
  264.                     new LogManager().refresh_panel();
  265.                 }
  266.                 if(data.startsWith('OPEN_DIALOGUE=RAIDS REWARD')) {
  267.                     new LogManager().add_entry('raid_drop', `${data.split('~')[1]}~${data.split('~')[2]}`);
  268.                 }
  269.             }
  270.         }
  271.  
  272.     const plugin = new lootLogTweaks();
  273.     IdlePixelPlus.registerPlugin(plugin);
  274. })();