View stats of active Goatling and swap them from anywhere.
// ==UserScript==
// @name Goatlings Stat Viewer & Quick Swap Add-On
// @namespace goatlings.statandswap
// @description View stats of active Goatling and swap them from anywhere.
// @version 2.0.0
// @license GPL
// @grant GM.getValue
// @grant GM.setValue
// @grant GM.xmlHttpRequest
// @match https://www.goatlings.com/*
// ==/UserScript==
// CHANGE ME (if you want):
let showStats = true // default true
let showList = true // default true
let showScrollbar = false // default false, change to true if you to see the scrollbar on the Goatling list
// (most) CSS can be changed at the bottom
// GOATLING STAT VIEWER (updated for the tabs update!!!):
GM.xmlHttpRequest( {
method: "GET",
url: "https://www.goatlings.com/MyGoatlings/",
onload: parseResponse
} );
// adding this for greasemonkey compatibility (plus gm_addstyle is deprecated)
function addGlobalStyle(css) {
var head, style;
head = document.getElementsByTagName('head')[0];
if (!head) { return; }
style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = css;
head.appendChild(style);
} // credit arserbin3 on stackoverflow
async function parseResponse(response) {
const myGoatlingsHTML = response.responseText;
const parser = new DOMParser();
const doc = parser.parseFromString(myGoatlingsHTML, "text/html");
// 1. Figure out what the active Goatlings name is:
let activeGoatling = doc.querySelector("a[href='https://www.goatlings.com/mypets/']").innerHTML;
let activeImage = doc.getElementById("active_pet_image").getElementsByTagName('img')[0].src;
let activeHP = null, activeMood = null, activeLevel = null, activeHunger = null, activeEXP = null
// 2. We have pain in the ass tabs now, so we gotta grab a list of em all along with their urls:
let tabDivs = doc.querySelectorAll('.pv-cat');
let tabMap = {};
tabDivs.forEach(function(div) {
let tabLink = div.querySelectorAll('a[href^="https://www.goatlings.com/MyGoatlings/manage/"]')[1];
if (tabLink) {
let tabName = tabLink.textContent.trim();
let link = tabLink.getAttribute('href');
tabMap[tabName] = link;
}
});
// So that I can re-use as much of the existing code as possible, I'm just going to combine all of the tabs into one page
async function fetchAndParse(url) {
let response = await fetch(url);
let text = await response.text();
return parser.parseFromString(text, "text/html");
}
async function combineTheTabs(tabMap) {
let allGoats = document.implementation.createHTMLDocument("All Goats");
for (let [tabName, url] of Object.entries(tabMap)) {
let doc = await fetchAndParse(url);
// Create a wrapper div so there can be some separation between the tabs even though they're all being combined onto one page
let wrapperDiv = allGoats.createElement('div');
wrapperDiv.className = 'tab-content-wrapper';
wrapperDiv.setAttribute('data-tab-name', tabName); // Tab name is stored here in case it's needed in the future
wrapperDiv.append(...doc.body.children);
allGoats.body.appendChild(wrapperDiv);
}
return allGoats
}
let myGoatsDoc = await combineTheTabs(tabMap);
let myGoats = Array.from(myGoatsDoc.querySelectorAll ("div.mystuff"));
let myGoatNames = [], goatData = null, splitData = null
//iterate through goatling stats and find which belongs to active
for (let goat of myGoats){
let currentGoat = goat.innerText;
if (currentGoat.includes("Goatlings:")) continue; // Filtering out the tabs amongst the goats
myGoatNames.push(currentGoat.split("\n")[2].trim());
if (currentGoat.includes(activeGoatling)){
goatData = currentGoat;
}
}
splitData = goatData.split("\n");
for (let data of splitData){
if (data.includes("Level:")){
activeLevel = data.trim();
} else if (data.includes("HP:")){
activeHP = data.trim();
} else if (data.includes("Hunger:")){
activeHunger = data.trim();
} else if (data.includes("Mood:")){
activeMood = data.trim();
} else if (data.includes("EXP:")){
activeEXP = data.trim();
}
}
// Doing some basic scaling:
let scaleVal = 1;
if (window.innerWidth < 1400){
scaleVal = 0.75
} if (window.innerWidth < 1300) {
scaleVal = 0.6
}
// STAT VIEWER CODE:
let stats = document.createElement("div");
stats.id = 'stats'
if (activeGoatling.length > 18){
stats.innerHTML = "<div style='text-align:center;font-size:16px'>" + activeGoatling + "</div>";
} else{
stats.innerHTML = "<div style='text-align:center'>" + activeGoatling + "</div>";
}
stats.innerHTML += "<div style='border-radius:12px;background:white;width:80%;display:flex;justify-content:center;margin:auto'><div style='position:relative;left:2.5px'><img src=" + activeImage +"></div></div>";
// making the font size for exp smaller when it's huge
if (activeEXP.length >= 20){
stats.innerHTML += activeLevel + "<br /><div style=font-size:14px>" + activeEXP + "</div>" + activeHP + "<br />" + activeHunger + "<br />" + activeMood;
} else{
stats.innerHTML += activeLevel + "<br />" + activeEXP + "<br />" + activeHP + "<br />" + activeHunger + "<br />" + activeMood;
}
stats.classList.add("based","basedCard");
// grabbing the stored values for the element coordinates (default to 10)
stats.style.left = await GM.getValue("startX", 10);
stats.style.top = await GM.getValue("startY", 10);
stats.style.transform = "scale(" + scaleVal + "," + scaleVal + ")";
// add it into the page
if (showStats === true){
document.body.appendChild(stats);
}
// QUICK SWITCHER CODE:
// get the links to post to for switching goatlings
let makeActiveMap = {};
myGoats.forEach(currentGoat => {
if (currentGoat.innerText.includes("Goatlings:")) return; // Filtering out the tabs amongst the goats (again)
let name = currentGoat.querySelector('p:nth-of-type(2)').textContent.trim();
let makeActiveLink = Array.from(currentGoat.querySelectorAll('a')).find(a => a.textContent.trim() === 'Make Active');
makeActiveMap[name] = makeActiveLink.href;
});
// start cooking up the div to display your goats
let goatList = document.createElement("div");
goatList.id = 'goatList'
goatList.innerHTML = "<div style='text-align:center'> My Goatlings </div>";
// add each goat name as a button
for (let goat of myGoatNames){
goatList.innerHTML += "<div class='basedButtonGroup' id='swapButton'><button class='basedButton'>" + goat + "</button></div>"
}
goatList.classList.add("based","basedList");
goatList.style.left = await GM.getValue("listX", 10);
goatList.style.top = await GM.getValue("listY", 10);
goatList.style.transform = "scale("+scaleVal+","+scaleVal+")";
// add it into the page
if (showList === true){
document.body.appendChild(goatList);
}
// function to send a post request to tell the game we want to swap to a specific goatling
function swapGoatling(event){
let targetGoat = event.currentTarget.innerText
GM.xmlHttpRequest({
method: "GET",
url: makeActiveMap[targetGoat],
onload: function(response) {
// refresh after requesting
window.location = document.URL;
}
});
}
let goatButtons = document.querySelectorAll("#swapButton");
// add in a listener, so once the buttons are clicked, the function is called
for (let goatButton of goatButtons){
goatButton.addEventListener ("click", swapGoatling, false);
}
// adjust scale when resizing past some thresholds
window.addEventListener("resize", reSize);
function reSize(){
let scaleVal = 1;
if (window.innerWidth < 1400){
scaleVal = 0.75
} if (window.innerWidth < 1300) {
scaleVal = 0.6
}
stats.style.transform = "scale("+scaleVal+","+scaleVal+")";
goatList.style.transform = "scale("+scaleVal+","+scaleVal+")";
}
// following is shamelessly lifted from w3schools
if (showStats === true){
dragElement(document.getElementById("stats"));
}
if (showList === true){
dragElement(document.getElementById("goatList"));
}
function dragElement(elmnt) {
let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
elmnt.onmousedown = dragMouseDown;
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
// calculating new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
async function closeDragElement(e) {
document.onmouseup = null;
document.onmousemove = null;
e = e || window.event;
e.preventDefault();
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// saving element co-ordinates for some level of location persistence
let setValY = "startY", setValX = "startX";
// need to keep 2 separate values for both elements
if (elmnt.id === "goatList"){
setValY = "listY";
setValX = "listX";
}
GM.setValue(setValY, (elmnt.offsetTop - pos2));
GM.setValue(setValX, (elmnt.offsetLeft - pos1));
}
}
}
// EDIT HERE FOR STYLE!
addGlobalStyle (`
.basedButtonGroup .basedButton {
background-color: #956e43;
border: 4px solid #ad8a60;
color: white;
padding: 5px 10px;
text-align: center;
text-decoration: none;
font-size: 15px;
cursor: pointer;
min-width: 122px;
display: block;
margin: auto;
border-radius:8px;
text-shadow:-2px -2px 0 #ae8c5c, 2px -2px 0 #ae8c5c, -2px 2px 0 #ae8c5c, 2px 2px 0 #ae8c5c;
font-weight:bold;
font-family:Trebuchet MS;
margin-bottom: 2px;
}
.basedButtonGroup .basedButton:not(:last-child) {
border-bottom: none;
}
.basedButtonGroup .basedButton:hover {
background-color: #755839;
}
.based {
font-family:Trebuchet MS;
text-shadow:-1px -1px 0 #a2bfa1, 1px -1px 0 #a2bfa1, -1px 1px 0 #a2bfa1, 1px 1px 0 #a2bfa1;
cursor:move;
position:absolute;
border-radius:12px;
font-size:21px;
color:white;
font-weight:bold;
background-image:url('https://www.goatlings.com/images/layout/greenbg.gif');
border:3px rgb(220,228,220) solid;
}
.basedCard {
z-index:10000;
padding:3px;
}
.basedList {
z-index:10001;
min-height:100px;
max-height:284px;
overflow-y:auto;
overflow-x:hidden;
min-width:135px;
}
`);
if (showScrollbar === false){
addGlobalStyle (`
.basedList {
-ms-overflow-style: none;
scrollbar-width: none;
}
.basedList::-webkit-scrollbar {
display: none;
}
`);
}