Avatar, Site Themes, Relics, and Trophies checklist for Grundo's Cafe, visit https://www.grundos.cafe/~Tyco
// ==UserScript==
// @name [GC] Avatar Checklist
// @namespace https://www.grundos.cafe/
// @version 4.0.0
// @description Avatar, Site Themes, Relics, and Trophies checklist for Grundo's Cafe, visit https://www.grundos.cafe/~Tyco
// @author soupfaerie, supercow64, arithmancer
// @match https://www.grundos.cafe/~Tyco*
// @match https://www.grundos.cafe/~tyco*
// @match https://www.grundos.cafe/~TYCO*
// @grant none
// @license MIT
// ==/UserScript==
const textToHTML = (text) => new DOMParser().parseFromString(text, "text/html");
/**
* Normalizes text by removing extra whitespace, newlines, and other special characters.
* This helps ensure consistent comparison between strings that might have different formatting.
*
* @param {string} text The text to normalize
* @returns {string} The normalized text
*/
const normalizeText = (text) => {
if (!text) return '';
return text
// Convert to lowercase first
.toLowerCase()
// Replace special quotes/apostrophes with standard ones
.replace(/[''""`´]/g, "'")
// Remove all punctuation except apostrophes
.replace(/[^\w\s']/g, ' ')
// Replace multiple spaces with single space
.replace(/\s+/g, ' ')
// Trim leading/trailing whitespace
.trim();
};
/**
* Fetches /water/colouring/, parses it, and extracts the username from
* the #user-info-username element.
*
* @returns {Promise<string>} The username
*/
const getUsernameFromColouringAsync = () =>
fetch("/water/colouring/")
.then((res) => res.text())
.then(textToHTML)
.then((doc) => {
const username =
doc.querySelector("#user-info-username")?.textContent?.trim() || "";
if (!username) {
throw new Error("Username not found on /water/colouring/");
}
return username;
});
/**
* Fetches /userlookup/?user={username}, parses it, and returns the Document.
*
* @param {string} username
* @returns {Promise<Document>} The parsed userlookup Document
*/
const getUserLookupDocAsync = (username) =>
fetch("/userlookup/?user=" + encodeURIComponent(username))
.then((res) => res.text())
.then(textToHTML);
/**
* Convenience function that:
* 1) Gets username via /water/colouring/
* 2) Fetches and parses /userlookup/?user={username}
*
* @returns {Promise<{ username: string, userLookupDoc: Document }>}
*/
const getTrophiesViaColouringAsync = () =>
getUsernameFromColouringAsync().then((username) =>
getUserLookupDocAsync(username).then((doc) => ({
username,
userLookupDoc: doc,
}))
);
/**
* Analyse the user lookup Document for a list of collected game trophies.
* Returns the list as image basenames like "85_1.gif".
*
* @param {Node} node The root node (default: document)
* @returns {string[]} basenames of collected game trophy images
*/
const getCollectedGameTrophies = (node = document) => {
const imgs = Array.from(node.querySelectorAll('#gameTrophiesList img'));
return imgs
.map((img) => basename(img.src))
.filter((name) => !!name);
};
/**
* Expand trophy basenames to include implied lower ranks for the same game.
* - Default rule: if _1 (gold) exists, also include _2 and _3; if _2 (silver) exists, also include _3.
* - goldOnly games imply nothing (no silver/bronze).
* - hasRunnerUp games: if rank is 1/2/3, also include _4 (runner-up).
* If the user only has _4, keep it and do not imply other ranks.
*
* @param {string[]} basenames
* @returns {string[]} expanded list including implied lower ranks and runner-ups where applicable
*/
const expandTrophyBasenames = (basenames) => {
const goldOnly = new Set([67, 41]); // games that only have gold trophies
const hasRunnerUp = new Set([76]); // games that have a runner-up trophy
const set = new Set(basenames);
basenames.forEach((name) => {
// Recognize ranks 1–4, so we handle "only 4" gracefully.
const m = name.match(/^(\d+)_([1-4])\.gif$/);
if (!m) return;
const game = Number(m[1]);
const rank = Number(m[2]);
// If the game supports runner-up and rank is 1–3, imply _4.
if (hasRunnerUp.has(game) && rank >= 1 && rank <= 3) {
set.add(`${game}_4.gif`);
}
// Gold-only games do not imply silver/bronze; keep whatever is present.
if (goldOnly.has(game)) {
return;
}
// Default implications for non-goldOnly games:
if (rank === 1) {
set.add(`${game}_2.gif`);
set.add(`${game}_3.gif`);
} else if (rank === 2) {
set.add(`${game}_3.gif`);
}
// If rank === 3 or rank === 4, no further implications.
});
return Array.from(set);
};
/**
* Fetch the user lookup via colouring and return collected game trophy basenames (expanded).
*
* @returns {Promise<string[]>}
*/
const getCollectedGameTrophiesAsync = () =>
getTrophiesViaColouringAsync().then(({ userLookupDoc }) =>
expandTrophyBasenames(getCollectedGameTrophies(userLookupDoc))
);
/**
* Move collected game trophy cards into their section's <details> element.
* Sections live under #trophies, and each has a details .avatar-grid target.
*
* @param {string[]} collectedTrophies basenames like "85_1.gif"
*/
function moveCollectedTrophies(collectedTrophies) {
const sections = document.querySelectorAll('#trophies > *');
const collectedSet = new Set(collectedTrophies);
const found = new Set();
sections.forEach((section) => {
const foundGrid = section.querySelector('details .avatar-grid');
if (!foundGrid) return;
const cards = section.querySelectorAll(':scope > .avatar-grid > .avatar-card');
cards.forEach((card) => {
const img = card.querySelector('img');
if (!img) return;
const name = basename(img.src);
if (collectedSet.has(name)) {
card.classList.add('achieved');
foundGrid.appendChild(card);
found.add(name);
}
});
});
collectedTrophies.forEach((name) => {
if (!found.has(name)) {
console.log(`Collected trophy not found on page: ${name}`);
}
});
}
/**
* Analyse the HTML select element for a list of avatars the user has collected.
*
* @param {Node} node The root node (default: document)
* @returns {string[]} the list of avatars as an array of basenames
*/
const getCollectedAvatars = (node = document) => {
// The list of avatars is partitioned into default avatars
// and collected secret avatars. The option with the text ---
// (6 dashes) is the inclusive cutoff. All avatars at and below
// the cutoff are collected secret avatars
const allAvatars = Array.from(
node.querySelectorAll(`[name="new_avatar"] option`)
);
const i = allAvatars.findIndex((e) => e.textContent.includes("---"));
return allAvatars.slice(i).map((e) => e.value);
};
/**
* Analyse the HTML select element for all site themes available to the user.
*
* @param {Node} node The root node (default: document)
* @returns {string[]} all site themes as an array of theme names
*/
const getAllSiteThemes = (node = document) => {
// Find all options in the site_theme select element
const themeOptions = Array.from(node.querySelectorAll(`[name="site_theme"] option`));
if (!themeOptions.length) return [];
// Return the text content of each option
return themeOptions
.map(option => option.textContent.trim())
.filter(themeName => themeName); // Filter out any empty theme names
};
/**
* Returns a Promise that resolves to a list of avatars
* the user has collected.
*
* @returns {string[]} list of collected avatars
*/
const getCollectedAvatarsAsync = () =>
fetch("/neoboards/preferences/")
.then((res) => res.text())
.then(textToHTML)
.then(getCollectedAvatars);
/**
* Returns a Promise that resolves to all site themes
* available to the user.
*
* @returns {string[]} all site themes as an array of theme names
*/
const getAllSiteThemesAsync = () =>
fetch("/help/siteprefs")
.then((res) => res.text())
.then(textToHTML)
.then(getAllSiteThemes);
/**
* Analyse the HTML response to identify logged relics.
*
* @param {Node} node The root node (default: document)
* @returns {string[]} the list of logged relics as an array of relic names
*/
const getLoggedRelics = (node = document) => {
// Find all relic divs
const relicDivs = Array.from(
node.querySelectorAll(`.flex-column.small-gap.center-items`)
);
if (!relicDivs.length) return [];
// Extract the names of relics that don't have the not-redeemed class
const loggedRelics = relicDivs
.map(relic => {
const img = relic.querySelector('img');
// Check if the image doesn't have the not-redeemed class (meaning it's logged)
if (img && !img.classList.contains('not-redeemed')) {
// Use the title attribute of the image which contains the relic name
if (img.title) {
return normalizeText(img.title);
}
// If title is not available, try to get the name from the span element
const span = relic.querySelector('span.medfont strong');
if (span) {
return normalizeText(span.textContent);
}
}
// If the image has the not-redeemed class or no name could be found, return null
return null;
})
.filter(name => name); // Filter out any null values
return loggedRelics;
};
/**
* Analyse the HTML response to identify unlogged relics.
*
* @param {Node} node The root node (default: document)
* @returns {string[]} the list of unlogged relics as an array of relic names
*/
const getUnloggedRelics = (node = document) => {
// Find all relic divs
const relicDivs = Array.from(
node.querySelectorAll(`.flex-column.small-gap.center-items`)
);
if (!relicDivs.length) return [];
// Extract the names of relics that have the not-redeemed class
const unloggedRelics = relicDivs
.map(relic => {
const img = relic.querySelector('img');
// Check if the image has the not-redeemed class (meaning it's not logged)
if (img && img.classList.contains('not-redeemed')) {
// Use the title attribute of the image which contains the relic name
if (img.title) {
return normalizeText(img.title);
}
// If title is not available, try to get the name from the span element
const span = relic.querySelector('span.medfont strong');
if (span) {
return normalizeText(span.textContent);
}
}
// If the image doesn't have the not-redeemed class or no name could be found, return null
return null;
})
.filter(name => name); // Filter out any null values
return unloggedRelics;
};
/**
* Returns a Promise that resolves to a list of logged relics.
*
* @returns {string[]} list of logged relics as an array of relic names
*/
const getLoggedRelicsAsync = () =>
fetch("/space/warehouse/relics/")
.then((res) => res.text())
.then(textToHTML)
.then(getLoggedRelics);
/**
* Returns a Promise that resolves to a list of unlogged relics.
*
* @returns {string[]} list of unlogged relics as an array of relic names
*/
const getUnloggedRelicsAsync = () =>
fetch("/space/warehouse/relics/")
.then((res) => res.text())
.then(textToHTML)
.then(getUnloggedRelics);
/**
* For static assets, returns the basename of the asset indicated
* in the url.
*
* ```js
* basename("https://example.com/foo/bar/baz.gif") == "baz.gif"
* ```
*
* @param {string} url path to the file with slashes
* @returns {string} the basename
*/
const basename = (url) => url.split("/").slice(-1)[0];
/**
* Move collected avatar cards into their section's <details> element.
*
* The tracker page groups avatars by section. Each section is a <div>
* directly under the #avatars container. Within each section there are one or
* more `.avatar-grid` containers followed by a <details> element containing an
* empty `.avatar-grid`. Collected avatars should be appended to that grid.
*
* @param {string[]} collectedAvatars basenames of the user's collected avatars
*/
function moveCollectedAvatars(collectedAvatars) {
const sections = document.querySelectorAll('#avatars > *');
// Create a set to track which collected avatars are found on the page
const foundAvatars = new Set();
sections.forEach((section) => {
const foundGrid = section.querySelector('details .avatar-grid');
if (!foundGrid) return;
const cards = section.querySelectorAll(':scope > .avatar-grid > .avatar-card');
cards.forEach((card) => {
const img = card.querySelector('img');
if (!img) return; // site theme cards currently lack images
const avatarName = basename(img.src);
if (collectedAvatars.includes(avatarName)) {
card.classList.add('check');
foundGrid.appendChild(card);
foundAvatars.add(avatarName);
}
});
});
// Log any collected avatars that weren't found on the page
collectedAvatars.forEach(avatar => {
if (!foundAvatars.has(avatar)) {
console.log(`Collected avatar not found on page: ${avatar}`);
}
});
}
/**
* Move collected site theme cards into the themes section's <details> element.
*
* The site themes section has a <details> element containing an empty `.avatar-grid`.
* All site themes from the site_theme select element should be appended to that grid.
*
* @param {string[]} collectedThemes names of all available site themes
*/
function moveCollectedSiteThemes(collectedThemes) {
const themesSection = document.querySelector('#themes');
if (!themesSection) return;
const foundGrid = themesSection.querySelector('details .avatar-grid');
if (!foundGrid) return;
// Create a set to track which collected themes are found on the page
const foundThemes = new Set();
const cards = themesSection.querySelectorAll(':scope > .avatar-grid > .avatar-card');
cards.forEach((card) => {
const nameElement = card.querySelector('.avatar-name');
if (!nameElement) return;
// Get the theme name directly from the card
const themeName = nameElement.textContent.trim();
// Check if this theme is in the collected themes list
if (collectedThemes.includes(themeName)) {
card.classList.add('done');
foundGrid.appendChild(card);
foundThemes.add(themeName);
} else {
if (themeName === "Tyrannia" && collectedThemes.includes("Tyrannian Night")) {
card.classList.add('done');
foundGrid.appendChild(card);
foundThemes.add(themeName);
}
}
});
// Log any collected themes that weren't found on the page
collectedThemes.forEach(theme => {
if (!foundThemes.has(theme)) {
console.log(`Collected site theme not found on page: ${theme}`);
}
});
}
/**
* Move logged relic cards into their section's <details> element and track unlogged relics.
*
* The relics section has a <details> element containing an empty `.avatar-grid`.
* Logged relics should be appended to that grid and marked with the "redeemed" class.
* This function also tracks which unlogged relics are found on the page.
*
* @param {string[]} loggedRelics names of logged relics
* @param {string[]} unloggedRelics names of unlogged relics
*/
function moveLoggedRelics(loggedRelics, unloggedRelics = []) {
const relicsSection = document.querySelector('#relics');
if (!relicsSection) {
console.log('Could not find #relics section');
return;
}
// Find all relic sections (rdailies, rgames, etc.)
const sections = relicsSection.querySelectorAll('[id^="r"]');
// Create a map of section IDs to their details grid elements
const sectionGrids = new Map();
// Find the details grid in each section
sections.forEach(section => {
const sectionId = section.id;
const details = section.querySelector('details');
if (details) {
const grid = details.querySelector('.avatar-grid');
if (grid) {
sectionGrids.set(sectionId, grid);
}
}
});
if (sectionGrids.size === 0) {
console.log('Could not find any details .avatar-grid in any relic section');
return;
}
// Create sets to track which relics are found on the page
const foundLoggedRelics = new Set();
const foundUnloggedRelics = new Set();
// Process each section separately
sections.forEach(section => {
const sectionId = section.id;
const detailsGrid = sectionGrids.get(sectionId);
// Skip sections without a details grid
if (!detailsGrid) return;
// Find all relic cards in this section
const cards = section.querySelectorAll('.avatar-grid > .avatar-card');
cards.forEach((card) => {
const nameElement = card.querySelector('.avatar-name');
if (!nameElement) return;
// Get the relic name directly from the card and normalize it
const relicName = normalizeText(nameElement.textContent);
// Check if this relic is in the logged relics list using direct comparison
const loggedMatchIndex = loggedRelics.findIndex((relic) =>
normalizeText(relic) === normalizeText(relicName)
);
if (loggedMatchIndex !== -1) {
const originalRelicName = loggedRelics[loggedMatchIndex];
card.classList.add('redeemed');
detailsGrid.appendChild(card);
foundLoggedRelics.add(originalRelicName);
}
// Check if this relic is in the unlogged relics list using direct comparison
const unloggedMatchIndex = unloggedRelics.findIndex((relic) =>
normalizeText(relic) === normalizeText(relicName)
);
if (unloggedMatchIndex !== -1) {
const originalRelicName = unloggedRelics[unloggedMatchIndex];
foundUnloggedRelics.add(originalRelicName);
}
});
});
// Log any logged relics that weren't found on the page
loggedRelics.forEach(relic => {
if (!foundLoggedRelics.has(relic)) {
console.log(`Logged relic not found on page: ${relic}`);
}
});
// Log any unlogged relics that weren't found on the page
unloggedRelics.forEach(relic => {
if (!foundUnloggedRelics.has(relic)) {
console.log(`Unlogged relic not found on page: ${relic}`);
}
});
}
// Fetch avatar, site theme, relic, and game trophy data and move the collected cards
Promise.all([
getCollectedAvatarsAsync().then(moveCollectedAvatars),
getAllSiteThemesAsync().then(moveCollectedSiteThemes),
// Fetch both logged and unlogged relics and pass them to moveLoggedRelics
Promise.all([
getLoggedRelicsAsync(),
getUnloggedRelicsAsync()
]).then(([loggedRelics, unloggedRelics]) => {
moveLoggedRelics(loggedRelics, unloggedRelics);
}),
// Fetch game trophies from user lookup and move matching trophy cards
getCollectedGameTrophiesAsync().then(moveCollectedTrophies)
]);