IdlePixel+ New Card Interface

Improved interface for opening new cards & receiving cards in trade
当前为 2024-03-28 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         IdlePixel+ New Card Interface
// @namespace    lbtechnology.info
// @version      1.1.1
// @description  Improved interface for opening new cards & receiving cards in trade
// @author       Zlef
// @license      MIT
// @match        *://idle-pixel.com/login/play*
// @grant        none
// @icon         https://d1xsc8x7nc5q8t.cloudfront.net/images/tcg_back_50.png
// @require      https://greasyfork.org/scripts/441206-idlepixel/code/IdlePixel+.js?anticache=20220905
// ==/UserScript==
 
(function() {
    'use strict';
 
    class NewCard extends IdlePixelPlusPlugin {
        constructor() {
            super("newcard", {
                about: {
                    name: GM_info.script.name,
                    version: GM_info.script.version,
                    author: GM_info.script.author,
                    description: GM_info.script.description
                }
            });
 
            this.showPopup = false;
            this.messageStart = "You got a"
            this.trade = false;
            this.card = "";
        }
 
        onLogin() {
            if (!CardData.data) {
                CardData.fetchData();
            }
            this.monitorRevealTCG();
        }
 
        monitorRevealTCG() {
            const originalWebSocketSend = WebSocket.prototype.send;
            const self = this;
            WebSocket.prototype.send = function(data) {
                try {
                    originalWebSocketSend.call(this, data);
                    if (data === 'REVEAL_TCG_CARD') {
                        self.showPopup = true;
                    }
                } catch (error) {
                    console.error('Error in overridden WebSocket send:', error);
                }
            };
        }
 
        onMessageReceived(data){
            const originalOpenImageModal = Modals.open_image_modal;
            const self = this;
 
            if (data.includes("OPEN_DIALOGUE")){
                Modals.open_image_modal = function(title, imgUrl, description, footerText, closeBtnText, anotherBtnText, isModalDismissible) {
                    // console.log(`title: ${title}, imgUrl: ${imgUrl}, description: ${description}, footerText: ${footerText}, closeBtnText: ${closeBtnText}, anotherBtnText: ${anotherBtnText}, isModalDismissible: ${isModalDismissible}`);
 
                    if (description.includes("You were given a card from")) {
                        // console.log("Found trade received modal call, blocking");
 
                        const usernameRegex = /You were given a card from (.*?)<br \/>/;
                        const cardRegex = /<span class='color-grey'>(.*?)<\/span>/;
 
                        const usernameMatch = description.match(usernameRegex);
                        const cardMatch = description.match(cardRegex);
 
                        let username = "";
                        let card = "";
 
                        if (usernameMatch && usernameMatch.length > 1) {
                            username = usernameMatch[1];
                        }
 
                        if (cardMatch && cardMatch.length > 1) {
                            self.card = cardMatch[1].replace(/ \(holo\)$/, '');
                        }
 
 
                        self.messageStart = `${username} sent you a`
                        self.trade = true;
                        self.showPopup = true;
                        // console.log(`username: ${username}, card: ${self.card}, showPopup ${self.showPopup}, trade: ${self.trade}, messageStart: ${self.messageStart}`);
                    } else {
                        originalOpenImageModal.call(this, title, imgUrl, description, footerText, closeBtnText, anotherBtnText, isModalDismissible);
                    }
                }
            }
 
            if (data.includes("REFRESH_TCG")){
                // console.log(`showPopup: ${this.showPopup}, showPotradepup: ${this.trade}, card: ${this.card}, messageStart: ${this.messageStart}`)
                if (this.showPopup){
                    if (this.trade){
                        this.getCardInfo(data, true);
                        this.trade = false;
                        this.card = "";
                    } else {
                        this.getCardInfo(data, false);
                    }
                    this.showPopup = false;
                    this.messageStart = "You got a "
                }
            }
        }
 
        chunks(array, chunkSize) {
            const result = [];
            for (let i = 0; i < array.length; i += chunkSize) {
                const chunk = array.slice(i, i + chunkSize);
                result.push(chunk);
            }
            return result;
        }
 
        getCardInfo(data, isTrade) {
            // console.log("getCardInfo called with data:", data, "isTrade:", isTrade);
 
            const cardData = data.split('~');
            // console.log("Splitted cardData:", cardData);
 
            const chunkedData = this.chunks(cardData, 3); // id, nameKey, holo
            // console.log("Chunked data:", chunkedData);
 
            let relevantCard = chunkedData[0]; // Default to the first card for non-trade
            // console.log("Default relevant card:", relevantCard);
 
            if (isTrade) {
                // console.log(`Trade detected. Looking for card: ${this.card}`);
                for (let i = 0; i < chunkedData.length; i++) {
                    const [id, nameKey, holo] = chunkedData[i];
                    // console.log(`Checking chunk: ${i}, ID: ${id}, NameKey: ${nameKey}, Holo: ${holo}`);
 
                    if (this.card === nameKey) {
                        console.log("Matching card found in trade:", chunkedData[i]);
                        relevantCard = chunkedData[i];
                        break;
                    }
                }
            }
 
            // console.log("Relevant card to display:", relevantCard);
            this.displayNewCard(relevantCard[0], relevantCard[1], relevantCard[2]);
        }
 
 
        displayNewCard(cardId, cardNameKey, holo) {
            const cardName = cardNameKey.replace('tcg_', '').replace(/_/g, ' ').replace(" icon", "");
            const isHolo = holo === 'true';
 
            const message = isHolo ? `${this.messageStart} holo ${cardName} card!` : `${this.messageStart} ${cardName} card!`;
            const cardHTML = CardData.getCardHTML(cardId, cardNameKey, isHolo);
 
            this.createPopup(message, cardHTML);
 
        }
 
        createPopup(message, cardHTML) {
            // Check and remove existing overlay
            const existingOverlay = document.getElementById('newCardOverlay');
 
            if (existingOverlay) {
                document.body.removeChild(existingOverlay);
            }
 
            // Element setup
            const overlay = document.createElement('div');
            overlay.id = 'newCardOverlay';
            overlay.style.position = 'fixed';
            overlay.style.top = '0';
            overlay.style.left = '0';
            overlay.style.width = '100%';
            overlay.style.height = '100%';
            overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
            overlay.style.zIndex = '1000';
            overlay.style.display = 'flex';
            overlay.style.justifyContent = 'center';
            overlay.style.alignItems = 'center';
 
            const popupBox = document.createElement('div');
            popupBox.id = 'newCardPopupBox';
            popupBox.style.width = '300px';
            popupBox.style.margin = '0 auto';
            popupBox.style.backgroundColor = '#fff';
            popupBox.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.5)';
            popupBox.style.borderRadius = '8px';
            popupBox.style.padding = '20px';
            popupBox.style.textAlign = 'center';
 
            const messageP = document.createElement('p');
            messageP.textContent = message;
            messageP.style.fontSize = '18px';
            messageP.style.fontWeight = 'bold';
 
            const cardContainer = document.createElement('div');
            cardContainer.innerHTML = cardHTML;
            cardContainer.firstChild.style.marginTop = '0px';
 
            const cardTitle = cardContainer.querySelector('.tcg-card-title');
            const cardInnerText = cardContainer.querySelector('.tcg-card-inner-text');
            if (cardTitle) {
                cardTitle.style.textAlign = 'left';
            }
            if (cardInnerText) {
                cardInnerText.style.textAlign = 'left';
            }
 
            const openAnotherButton = document.createElement('button');
            openAnotherButton.textContent = 'OPEN ANOTHER';
            openAnotherButton.style.padding = '10px 20px';
            openAnotherButton.style.fontSize = '16px';
            openAnotherButton.style.cursor = 'pointer';
            openAnotherButton.style.marginRight = '10px';
 
            const closeButton = document.createElement('button');
            closeButton.textContent = 'CLOSE';
            closeButton.style.padding = '10px 20px';
            closeButton.style.fontSize = '16px';
            closeButton.style.cursor = 'pointer';
 
            // Append elements
            popupBox.appendChild(messageP);
            popupBox.appendChild(cardContainer);
            popupBox.appendChild(openAnotherButton);
            popupBox.appendChild(closeButton);
            overlay.appendChild(popupBox);
            document.body.appendChild(overlay);
 
            // Event listeners
            openAnotherButton.addEventListener('click', () => {
                IdlePixelPlus.sendMessage("REVEAL_TCG_CARD");
                document.body.removeChild(overlay);
            });
 
            const tcg_unknown = IdlePixelPlus.getVarOrDefault("tcg_unknown", 0, "int");
            openAnotherButton.disabled = tcg_unknown <= 1;
 
            closeButton.addEventListener('click', () => {
                document.body.removeChild(overlay);
                window.removeEventListener('resize', adjustPopupPosition);
            });
 
            const adjustPopupPosition = () => {
                const viewportHeight = window.innerHeight;
                const popupHeight = popupBox.offsetHeight;
                const topPosition = (viewportHeight - popupHeight) / 2;
                popupBox.style.position = 'absolute';
                popupBox.style.top = `${topPosition > 0 ? topPosition : 0}px`;
            };
            adjustPopupPosition();
 
            window.addEventListener('resize', adjustPopupPosition);
 
            overlay.addEventListener('click', (event) => {
                if (event.target === overlay) {
                    document.body.removeChild(overlay);
                    window.removeEventListener('resize', adjustPopupPosition);
                }
            });
 
            popupBox.addEventListener('click', (event) => {
                event.stopPropagation();
            });
        }
 
 
    }
 
    const plugin = new NewCard();
    IdlePixelPlus.registerPlugin(plugin);
 
})();