Click the Premium icon to display your bankroll stats
// ==UserScript==
// @name Neopets - Premium Toolbar (Beta)
// @namespace http://tampermonkey.net/
// @version 2021.02.08
// @description Click the Premium icon to display your bankroll stats
// @author EatWoolooAsMutton
// @match http://www.neopets.com/*
// ==/UserScript==
if (typeof jQuery === "undefined") return;
jQuery.fn.exists = function () {
return this.length > 0
};
// Check if page is new layout
if (!$("[class^='nav-pet-menu-icon']").exists()) {
return false;
}
const hasPremium = $(".navsub-ssw-icon__2020").exists();
const $premium = $(".nav-top-grid__2020 a[href*='premium']");
if (hasPremium && $premium.exists()) {
$("[class^='nav-text__']:contains('Premium')").html("Bankroll");
function getPremiumStats() {
return new Promise((resolve, reject) => {
$.ajax({
type : "GET",
async : true,
url : "/premium",
timeout : 10000,
dataFilter : data => {
const response = $.parseHTML(data);
let stats = {};
$(response).find(".bankroll-mid p").each(function (index, element) {
const html = $(element).html();
switch (index) {
case 0:
stats["total"] = html.split(": ")[1];
break;
case 1:
stats["bank"] = html.split(": ")[1];
break;
case 2:
stats["till"] = html.split(": ")[1];
break;
case 3:
stats["stockQty"] = html;
break;
case 4:
stats["stockPaid"] = html;
break;
case 5:
stats["stockVal"] = html;
break;
case 6:
stats["percent"] = html;
break;
default:
// your pc explodes if you reach here
}
});
resolve(stats);
},
error : data => {
console.log(data);
reject("Request timed out");
}
});
})
}
const menuStyle = `
<style>
.prem-dropdown {
position: absolute;
/*top: calc(100%);
left: 80%;
margin-left: -40px;*/
width: fit-content;
overflow-x: hidden;
overflow-y: hidden;
box-sizing: border-box;
border-radius: 10px;
background-color: #f5fdff;
color: #000000;
border: 2px solid #e91216;
display: none;
font-family: MuseoSansRounded700, Arial, sans-serif;
padding: 12px;
text-align: center;
}
.prem-dropdown img {
width: 30px;
height: 30px;
vertical-align: middle;
}
.prem-dropdown a {
color: #000000;
}
.stockTable {
margin: auto;
}
.stockTable td {
padding: 3px 8px;
}
</style>`;
$(menuStyle).appendTo("head");
const loading = `
<div id="prem-dropdown" class="prem-dropdown" style="display: none;">
<!--Promise pending-->
<img alt="Loading..." src="http://images.neopets.com/games/pages/Z8AGM.gif">
<span style="color: #000000">Getting data...</span>
</div>`;
$premium.before(loading);
const $menu = $("#prem-dropdown");
// Click method
let onFirstClick = true;
$premium.removeAttr("href").on("click", function () {
reposition();
if (onFirstClick) {
(async () => {
try {
const {
bank, till, total,
stockPaid, stockQty, stockVal, percent
} = await getPremiumStats();
$menu.html(`
<a href="/bank.phtml?type=your" title="Bank Balance">
<img src="http://images.neopets.com/premium/portal/images/banktotal-icon.png">
<span id="np-bank"> ${bank}</span>
</a>
<a href="/market.phtml?type=till" title="Shop Till">
<img src="http://images.neopets.com/premium/portal/images/shoptill-icon.png">
<span id="np-till"> ${till}</span>
</a>
<a href="/inventory.phtml" title="Total NP">
<img src="http://images.neopets.com/premium/portal/images/nptotal-icon.png">
<span id="np-total"> ${total}</span>
</a>
<br><br>
<a href="/stockmarket.phtml?type=portfolio" title="Stocks">
<table class="stockTable">
<tr>
<td rowspan="2" style="padding:0"><img src="http://images.neopets.com/premium/portal/images/stocks-positive.svg" style="width: 50px; height: auto;"></td>
<td style="color: #808080">Quantity</td>
<td style="color: #0064eb">${stockQty}</td>
<td style="color: #808080">Paid</td>
<td style="color: #0064eb">${stockPaid}</td>
</tr>
<tr>
<td style="color: #808080">Value</td>
<td style="color: #0064eb">${stockVal}</td>
<td style="color: #808080">Change</td>
<td style="color: ${percent.match(/\+/) ? "#008000" : "#ff0000"}">${percent}</td>
</tr>
</table>
</a>
<div style="text-align: right; font-size: 80%; color: #0000ff">
<a href="/premium"><img src="http://images.neopets.com/premium/portal/images/anchor-star.png" title="Premium Portal"></a>
</div>
`);
reposition();
} catch (error) {
console.log(error.message);
$(".prem-dropdown").html(`<span style="color: #ff0000">Request timed out.</span>`);
} finally {
onFirstClick = false;
}
})();
}
if ($menu.is(":hidden")) {
$(this).find("[class^='nav-text']").html("Hide");
$menu.show();
} else if ($menu.is(":visible")) {
$(this).find("[class^='nav-text']").html("Bankroll");
$menu.hide();
}
});
function reposition() {
const pWidth = parseFloat($premium.css("width")),
pHeight = parseFloat($premium.css("height")),
pTop = $premium.position().top,
pLeft = $premium.position().left,
toolbarWidth = parseFloat($menu.css("width")),
top = pHeight + pTop + 5,
left = pWidth + pLeft - toolbarWidth;
$menu.css({
"top" : `${top}px`,
"left" : `${left}px`
});
}
}