Improved interface for opening new cards & receiving cards in trade
// ==UserScript==
// @name IdlePixel+ New Card Interface
// @namespace lbtechnology.info
// @version 1.1.2
// @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]
}
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);
let isHolo = relevantCard[2];
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.includes("(holo)")){
isHolo = 'true';
this.card = this.card.replace(/ \(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], isHolo);
}
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);
})();