IdlePixel+ New Card Interface

Improved interface for opening new cards
目前為 2024-03-19 提交的版本，檢視最新版本。
安裝腳本 ?
Wrap lines
// ==UserScript==
// @name         IdlePixel+ New Card Interface
// @namespace    lbtechnology.info
// @version      1.0.2
// @description  Improved interface for opening new cards
// @author       Zlef
// @license      MIT
// @match        *://idle-pixel.com/login/play*
// @grant        none
// @icon         https://d1xsc8x7nc5q8t.cloudfront.net/images/tcg_back_50.png
// @require      https://gf.qytechs.cn/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;
        }

        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){
            if (data.includes("REFRESH_TCG")){
                if (this.showPopup){
                    this.displayNewCard(data);
                    this.showPopup = false;
                }
            }
        }

        displayNewCard(data) {
            const cardData = data.split('~');
            const cardId = cardData[0];
            const cardNameKey = cardData[1]
            const cardName = cardData[1].replace('tcg_', '').replace(/_/g, ' ').replace(" icon", "");
            const isHolo = cardData[2] === 'true';
            const message = isHolo ? `You got a holo ${cardName} card!` : `You got a ${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);

})();
欢迎访问Greasy Fork镜像
