Filter Pets on Quick Ref

Greasy Fork is available in English.
Filter Pets on Quick Ref

Allows you to filter visible pets by their settings.
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name         Filter Pets on Quick Ref
// @namespace    https://greasyfork.org/en/users/1175371/
// @version      0.2
// @author       sanjix
// @description  Allows you to filter visible pets by their settings.
// @match        https://www.grundos.cafe/quickref/adjustposition/
// @icon         https://www.google.com/s2/favicons?sz=64&domain=grundos.cafe
// @grant        none
// @license      MIT
// ==/UserScript==

var sort = document.querySelector('main div.center');

var battler = document.querySelectorAll('div#transferPet div label:nth-of-type(1) input[checked]');
var sidebar = document.querySelectorAll('div#transferPet div label:nth-of-type(2) input[checked]');
var tradeable = document.querySelectorAll('div#transferPet div label:nth-of-type(3) input:not([checked])');
var labbie = document.querySelectorAll('div#transferPet div label:nth-of-type(4) input:not([checked])');
var lodgeAlerts = document.querySelectorAll('div#transferPet div label:nth-of-type(5) input[checked]');
var twoPBattle = document.querySelectorAll('div#transferPet div label:nth-of-type(6) input[checked]');
var traitsVisible = document.querySelectorAll('div#transferPet div label:nth-of-type(7) input:not([checked])');

var battlerToggle = document.createElement('button');
var sidebarToggle = document.createElement('button');
var tradeableToggle = document.createElement('button');
var labbieToggle = document.createElement('button');
var lodgeAlertsToggle = document.createElement('button');
var twoPBattleToggle = document.createElement('button');
var traitsVisibleToggle = document.createElement('button');

battlerToggle.textContent = 'Toggle Battlers';
sidebarToggle.textContent = 'Toggle Sidebar Pets';
tradeableToggle.textContent = 'Toggle Tradeable Pets';
labbieToggle.textContent = 'Toggle Labbies';
lodgeAlertsToggle.textContent = 'Toggle Lodge Alert Pets';
twoPBattleToggle.textContent = 'Toggle 2P BD Pets';
traitsVisibleToggle.textContent = 'Toggle Traits Visible Pets';

function addClasstoPetDiv(child, name) {
	child.forEach(input => {
		input.parentElement.parentElement.classList.add(name);
	});
}

function toggle(type) {
	let els = document.querySelectorAll(type);
	let other = document.querySelectorAll('div#transferPet > div:not(type)');

	other.forEach((el) => {
		if (el.style.display == '' || el.style.display == 'flex') {
		el.style.display = 'none';
		} else {
			el.style.display = 'flex';
		}
	});
	
	els.forEach((el) => {
		if (el.style.display == '' || el.style.display == 'flex') {
		el.style.display = 'none';
		} else {
			el.style.display = 'flex';
		}
	});
	
}

addClasstoPetDiv(battler, 'battler');
addClasstoPetDiv(sidebar, 'sidebar');
addClasstoPetDiv(tradeable, 'tradeable');
addClasstoPetDiv(labbie, 'labbie');
addClasstoPetDiv(lodgeAlerts, 'lodgeAlerts');
addClasstoPetDiv(twoPBattle, 'twoPBattle');
addClasstoPetDiv(traitsVisible, 'traitsVisible');

battlerToggle.addEventListener('click', () => {
	toggle('.battler');
});
sidebarToggle.addEventListener('click', () => {
	toggle('.sidebar');
}); 
tradeableToggle.addEventListener('click', () => {
	toggle('.tradeable');
}); 
labbieToggle.addEventListener('click', () => {
	toggle('.labbie');
}); 
lodgeAlertsToggle.addEventListener('click', () => {
	toggle('.lodgeAlerts');
}); 
twoPBattleToggle.addEventListener('click', () => {
	toggle('.twoPBattle');
}); 
traitsVisibleToggle.addEventListener('click', () => {
	toggle('.traitsVisible');
}); 

var container = document.createElement('div');
container.style.display = 'flex';
sort.after(container);
container.append(battlerToggle);
container.append(sidebarToggle);
container.append(tradeableToggle);
container.append(labbieToggle);
container.append(lodgeAlertsToggle);
container.append(twoPBattleToggle);
container.append(traitsVisibleToggle);