ASUS-ROG-Elite-QOL.user.js

// ==UserScript==
// @name        ASUS ROG Elite QOL
// @description Toggle wallpapers and Unavailable (Complete, Sold Out, Locked) cards
// @author      Lone Destroyer
// @license     MIT
// @match       https://rog.asus.com/*/elite*
// @match       https://rog.asus.com/elite*
// @icon        https://rog.asus.com/rog/nuxtStatic/img/favicon.ico
// @version     1.0.7
// @namespace   https://github.com/LoneDestroyer
// @downloadURL https://github.com/LoneDestroyer/ASUS-ROG-Elite-QOL/raw/refs/heads/main/ASUS-ROG-Elite-QOL.user.js
// @updateURL   https://github.com/LoneDestroyer/ASUS-ROG-Elite-QOL/raw/refs/heads/main/ASUS-ROG-Elite-QOL.user.js
// ==/UserScript==

(function() {
    'use strict';
    const STORAGE_KEY = 'asusRogEliteQOLState';

    const defaultPreferences = {
        hideWallpapers: true,
        showUnavailable: true,
        showCompleted: true,
        showSoldOut: true,
        showLocked: true,
    };

    // Load preferences from localStorage, fallback to defaults
    const userPreferences = Object.assign({}, defaultPreferences, JSON.parse(localStorage.getItem(STORAGE_KEY) || 'null'));
    const savePreferences = () => localStorage.setItem(STORAGE_KEY, JSON.stringify(userPreferences));

    // Toggles for settings panel
    const toggleOptions = [
        { key: 'hideWallpapers', label: 'Wallpapers' },
        {
            key: 'showUnavailable', label: 'Unavailable', children: [
                { key: 'showCompleted', label: 'Completed' },
                { key: 'showSoldOut', label: 'Sold Out' },
                { key: 'showLocked', label: 'Locked' }
            ]
        }
    ];

    // Creates settings panel with checkboxes
    function createSettingsPanel() {
        if (!document.getElementById('asus-rog-qol-styles')) {
            const style = document.createElement('style');
            style.id = 'asus-rog-qol-styles';
            style.textContent = `
                .elite-qol-panel {position:fixed;top:10px;left:10px;z-index:9999;background:#181a1b;border-radius:12px;box-shadow:0 2px 6px rgba(0,0,0,0.2);font-family:roboto,sans-serif;font-size:15px;display:flex;flex-direction:column;width:150px;}
                .elite-qol-header-btn {position:relative;overflow:hidden;border-radius:8px 8px 0 0;background:#e30017;font-family:tradegothicltpro,sans-serif;padding-top:5px;display:flex;align-items:center;justify-content:center;}
                .elite-qol-header-hover {position:absolute;top:0;left:0;width:100%;height:100%;background:#c20013;opacity:0;cursor:pointer;transition:opacity 0.2s;z-index:1;}
                .elite-qol-header-btn:hover .elite-qol-header-hover,.elite-qol-header-btn:focus .elite-qol-header-hover {opacity:1;}
                .elite-qol-header-btn span {font-weight:bold;font-size:16px;color:#fff;letter-spacing:1.5px;z-index:2;position:relative;}
                .elite-qol-content {padding:10px;display:flex;flex-direction:column;;}
                .elite-qol-label {display:flex;align-items:center;gap:4px;}
                .elite-qol-label-group {display:flex;flex-direction:column;margin-left:24px;}`;
            document.head.appendChild(style);
        }
        const panel = document.createElement('div');
        panel.className = 'elite-qol-panel';

        // Header button
        const headerBtn = document.createElement('div');
        headerBtn.setAttribute('role', 'button');
        headerBtn.setAttribute('tabindex', '0');
        headerBtn.className = 'elite-qol-header-btn';
        headerBtn.setAttribute('aria-expanded', 'true');

        const headerSpan = document.createElement('span');
        headerSpan.textContent = 'HIDE';
        headerBtn.appendChild(headerSpan);

        // Add hover effect div
        const hoverDiv = document.createElement('div');
        hoverDiv.className = 'elite-qol-header-hover';
        headerBtn.appendChild(hoverDiv);

        // Panel Content container
        const content = document.createElement('div');
        content.className = 'elite-qol-content';

        // Store refs for checkboxes incase of page updates
        const refs = {};
        let expanded = true;

        toggleOptions.forEach(({ key, label, children }) => {
            addCheckbox(content, key, label, refs, children);
            if (children) {
                // Indent child checkboxes visually
                const subCheckboxGroup = document.createElement('div');
                subCheckboxGroup.className = 'elite-qol-label-group';
                children.forEach(childOption => addCheckbox(subCheckboxGroup, childOption.key, childOption.label, refs));
                content.appendChild(subCheckboxGroup);
            }
        });

        headerBtn.onclick = () => {
            expanded = !expanded;
            content.style.display = expanded ? 'flex' : 'none';
            headerBtn.setAttribute('aria-expanded', expanded ? 'true' : 'false');
            headerBtn.blur(); // Remove focus from button after click to hide hover effect
        };
        headerBtn.onkeydown = (e) => {
            if (e.key === 'Enter' || e.key === ' ') {
                headerBtn.onclick();
                e.preventDefault();
            }
        };
        panel.appendChild(headerBtn);
        panel.appendChild(content);
        document.body.appendChild(panel);

        // Create checkbox + label
        function addCheckbox(parent, key, label, refs, children) {
            const checkbox = document.createElement('input');
            checkbox.type = 'checkbox';
            checkbox.checked = userPreferences[key];
            refs[key] = checkbox;

            // Descriptions on hover
            let description = '';
            switch (key) {
                case 'hideWallpapers':
                    description = 'Hides Wallpaper Rewards';
                    break;
                case 'showUnavailable':
                    description = 'Hides anything containing a cover, this will include Completed, Sold Out and Locked cards';
                    break;
                case 'showCompleted':
                    description = 'Hides Completed Activities - some do not get marked as complete by ASUS :(';
                    break;
                case 'showSoldOut':
                    description = 'Hides Sold Out Rewards';
                    break;
                case 'showLocked':
                    description = 'Hides Locked Rewards';
                    break;
                default:
                    description = label;
            }
            checkbox.title = description;

            const checkboxLabel = document.createElement('label');
            checkboxLabel.className = 'elite-qol-label';
            checkboxLabel.append(checkbox, document.createTextNode(label));
            checkboxLabel.title = description;
            parent.appendChild(checkboxLabel);

            // Changes "Unavailable" & childs checkboxes when toggled
            checkbox.onchange = () => {
                userPreferences[key] = checkbox.checked;
                // If parent is toggled, update children
                if (key === 'showUnavailable' && children) {
                    children.forEach(c => {
                        userPreferences[c.key] = checkbox.checked;
                        refs[c.key].checked = checkbox.checked;
                    });
                }
                // If child is untoggled, untoggle parent
                if (['showCompleted', 'showSoldOut', 'showLocked'].includes(key)) {
                    if (![userPreferences.showCompleted, userPreferences.showSoldOut, userPreferences.showLocked].every(Boolean)) {
                        userPreferences.showUnavailable = false;
                        refs.showUnavailable.checked = false;
                    }
                }
                savePreferences();
                hideCards();
            };
        }
    }

    // Compact term lists and matcher
    const MH_MONSTERS=['zinogre','deviljho','cologne'],
          WALLPAPER_TERMS=['wallpaper','rog x evangelion｜eva-02｜3840x2160'],
          STATUS_MAP=[[ 'showCompleted',['complete','finish','zakończ'] ],[ 'showSoldOut',['sold out','wyprzedane'] ],[ 'showLocked',['locked','blocked','zablokowano'] ]];

    const matchAny=(s,terms)=>terms.some(t=>new RegExp(`\\b${t.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}(?![a-zA-Z])`,'i').test(s));

    // Returns true if a card should be hidden - based on preferences and card content
    function shouldHideCard(cardTitle, cardStatus, userPreferences){
        return (
            userPreferences.hideWallpapers &&
            (matchAny(cardTitle,WALLPAPER_TERMS) || (cardTitle.includes('monster hunter now') && matchAny(cardTitle,MH_MONSTERS)))
        ) || STATUS_MAP.some(([pref,terms])=>userPreferences[pref] && matchAny(cardStatus,terms));
    }

    // Hides / Shows cards based on user preference
    function hideCards() {
        document.querySelectorAll('.PassPortCard__passPortCard__2N9Fz').forEach(card => {
            const cardTitle = card.querySelector('.PassPortCard__title__2Izls')?.textContent.toLowerCase() || '';
            const cardStatus = card.querySelector('.PassPortCard__cover__1C8of .PassPortCard__status__1r8Ov p.PassPortCard__text__1De4n')?.textContent.toLowerCase() || '';
            if (shouldHideCard(cardTitle, cardStatus, userPreferences)) {
                card.style.display = 'none';
            } else {
                card.style.display = '';
            }
        });
    }

    // Observer
    new MutationObserver(hideCards).observe(document.body, { childList: true, subtree: true });

    // Initialize panel and hide cards
    createSettingsPanel();
    hideCards();
})();