Filter Pets on Quick Ref

Allows you to filter visible pets by their settings.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey, Greasemonkey of Violentmonkey.

Voor het installeren van scripts heb je een extensie nodig, zoals {tampermonkey_link:Tampermonkey}.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey of Violentmonkey.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey of Userscripts.

Voor het installeren van scripts heb je een extensie nodig, zoals {tampermonkey_link:Tampermonkey}.

Voor het installeren van scripts heb je een gebruikersscriptbeheerder nodig.

(Ik heb al een user script manager, laat me het downloaden!)

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

(Ik heb al een beheerder - laat me doorgaan met de installatie!)

// ==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);