IdlePixel Loot Log Tweaks

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

您需要先安裝使用者腳本管理器擴展,如 TampermonkeyGreasemonkeyViolentmonkey 之後才能安裝該腳本。

You will need to install an extension such as Tampermonkey to install this script.

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyUserscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展,比如 Tampermonkey,才能安裝此腳本

您需要先安裝使用者腳本管理器擴充功能後才能安裝該腳本。

(我已經安裝了使用者腳本管理器,讓我安裝!)

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

(我已經安裝了使用者樣式管理器,讓我安裝!)

// ==UserScript==
// @name         IdlePixel Loot Log Tweaks
// @namespace    godofnades.idlepixel
// @version      0.1.9
// @description  Moving the Loot Log into a container like IdlePixel Fixed had with 'Tab' as the button to open.
// @author       GodofNades
// @match        *://idle-pixel.com/login/play*
// @grant        none
// @license      MIT
// @require      https://greasyfork.org/scripts/441206-idlepixel/code/IdlePixel+.js?anticache=20220905
// @require		 	https://greasyfork.org/scripts/491983-idlepixel-plugin-paneller/code/IdlePixel%2B%20Plugin%20Paneller.js?anticache=20240410
// ==/UserScript==

(function () {
    "use strict";

    let lootLogRefreshTimer;

    LogManager.prototype.refresh_panel = function() {
        var content = document.getElementById("panel-history-content");
        var custom = document.getElementById("ll-panel-div");
        var imgLoc = `https://d1xsc8x7nc5q8t.cloudfront.net/`;
        var html = "";
        for(var i = this.data.length - 1; i >= 0; i--) {
            var entry = this.data[i];
            var dt = entry.datetime;
            var slug = entry.slug;
            var monster_drops = entry.data;

            // Custom time formatting code
            var nowObj = new Date();
            var dtObj = new Date(dt);
            var delta = nowObj.getTime() - dtObj.getTime();
            var deltaSeconds = Math.floor(delta / 1000);
            var deltaMinutes = Math.floor(deltaSeconds / 60);
            var deltaHours = Math.floor(deltaMinutes / 60);
            var deltaDays = Math.floor(deltaHours / 24);

            var timeLabel = deltaSeconds + " seconds ago";
            if(deltaDays > 0) {
                timeLabel = deltaDays + " days ago";
            } else if(deltaHours > 0) {
                timeLabel = deltaHours + " hours ago";
            } else if(deltaMinutes > 0) {
                timeLabel = deltaMinutes + " minutes ago";
            }

            html += "<div class='drop-log-div'>";
            html += "<div class='drop-log-dt'>" + timeLabel + "</div>";
            if(slug == 'raid_drop') {
                var imgRaid = entry.data.split("~")[0];
                html += "<div class='loot' style='background-color:aquamarine'>"
                html += "<img src='" + imgLoc + imgRaid + "'class='w50 me-3'>"
                html += entry.data.split("~")[1];
                html += "</div>"
            } else {
                monster_drops.forEach(function(drop) {
                    var image = drop.image;
                    var label = drop.label;
                    var color = drop.color;
                    html += "<div class='loot' style='background-color:" + color + "'>";
                    html += "<img src='" + imgLoc + image + "' class='w50 me-3'>";
                    html += label;
                    html += "</div>";
                });
            }
            html += "</div><br /><br />";
        }

        if(html === "") {
            html = "<div class='center'>You have no data yet. Loot something and come back to check!</div>";
        }
        content.innerHTML = html;
        custom.innerHTML = html;
    };

    class lootLogTweaks extends IdlePixelPlusPlugin {
        constructor() {
            super("lootlogtweaks", {
                about: {
                    name: GM_info.script.name + " (ver: " + GM_info.script.version + ")",
                    version: GM_info.script.version,
                    author: GM_info.script.author,
                    description: GM_info.script.description,
                },
                /*config: [
                    {
                        label: "------------------------------",
                        type: "label"
                    },
                    {
                        label: "General Stuff",
                        type: "label"
                    },
                    {
                        label: "------------------------------",
                        type: "label"
                    },
                    {
                        id: "font",
                        label: "Primary Font",
                        type: "select",
                        options: FONTS,
                        default: FONT_DEFAULT
                    }
                ]*/
            });
        }

        initStyles() {
            const css = `
              #modal-style-ll .drop-log-dt {
                color: cyan;
              }

              #close-button-ll {
                background-color: red;
                width: 30px;
                height: 30px;
                position: absolute;
                top: 10px;
                right: 10px;
                border-radius: 50%;
                cursor: pointer;
              }

              #inner-close-button {
                color: white;
                font-size: 20px;
                font-weight: bold;
                text-align: center;
                line-height: 30px;
              }

              #ll-panel-div-container {
                overflow:auto;
                padding: 0.5em;
              }

              #modal-style-ll {
                display: none;
              }

              #modal-style-ll-container {
                position: absolute;
                top: 0px;
                left: 0px;
                width: 98vw;
                height: 100vh;
              }

              #ll-modal-base_window {
                position: absolute;
                top: 10vh;
                left: 25vw;
                width: 45vw;
                height: 85vh;
                text-align: center;
                border: 1px solid grey;
                background-color: rgb(0, 0, 0);
                border-radius:20px;
                padding: 20px;
                z-index: 10000;
                display: flex;
                align-items: center;
                flex-direction: column;
              }
            `;
                const styleSheet = document.createElement("style");
                styleSheet.innerHTML = css;
                document.head.appendChild(styleSheet);
            }

            createPanel() {
                let llModalHTML = `
              <div id="modal-style-ll"">
                <div id="modal-style-ll-container">
                  <div id="ll-modal-base_window" style="">
                    <div id="close-button-ll">
                      <p id="inner-close-button">X</p>
                    </div>
                    <br/>
                    <p id="activity-subheader" class="activity-subheader">Loot Log</p>
                    <hr>
                    <div id="ll-panel-div-container"">
                      <div id="ll-panel-div">
                      </div>
                    </div>
                  </div>
                  </br>
                </div>
              </div>
            `;

            const contentDiv = document.getElementById("content");
            const modalContainer = document.createElement("div");
            modalContainer.innerHTML = llModalHTML;
            contentDiv.appendChild(modalContainer);

            const onlineCount = document.querySelector(
                ".game-top-bar .gold:not(#top-bar-admin-link)"
            );
            const linkElement = document.createElement("a");
            linkElement.href = "#";
            linkElement.className = "hover float-end link-no-decoration";
            linkElement.title = "Loot Log";
            linkElement.textContent = "Loot Log" + "\u00A0\u00A0\u00A0";

            onlineCount.insertAdjacentElement("beforebegin", linkElement);

            const modalStyleLL = document.getElementById("modal-style-ll");
            const closeButton = document.getElementById("close-button-ll");

            linkElement.addEventListener("click", function (event) {
                event.preventDefault();
                modalStyleLL.style.display = "block";
                new LogManager().refresh_panel();
            });

            closeButton.addEventListener("click", function () {
                modalStyleLL.style.display = "none";
            });

            document.addEventListener("keydown", function (event) {
                var chatInput = document.getElementById("chat-area-input");
                var chat_focused = document.activeElement === chatInput;
                if (!chat_focused) {
                    if (event.keyCode === 9) {
                        if (modalStyleLL.style.display === "block") {
                            modalStyleLL.style.display = "none";
                        } else {
                            modalStyleLL.style.display = "block";
                            new LogManager().refresh_panel();
                        }
                    }
                }
            });

            modalStyleLL.addEventListener("click", function (event) {
                const isClickInside = document
                .getElementById("al-modal-base_window")
                .contains(event.target);

                if (!isClickInside) {
                    modalStyleLL.style.display = "none";
                }
            });

            document
                .getElementById("ll-modal-base_window")
                .addEventListener("click", function (event) {
                event.stopPropagation();
            });
        }

            onLogin() {
                this.initStyles();
                this.createPanel();
                //Paneller.registerPanel("lootLogTweaks", "Loot Log")
            }

            onMessageReceived(data) {
                if(data.startsWith('OPEN_LOOT_DIALOGUE')) {
                    new LogManager().refresh_panel();
                }
                if(data.startsWith('OPEN_DIALOGUE=RAIDS REWARD')) {
                    new LogManager().add_entry('raid_drop', `${data.split('~')[1]}~${data.split('~')[2]}`);
                }
            }
        }

    const plugin = new lootLogTweaks();
    IdlePixelPlus.registerPlugin(plugin);
})();