☰

[GC] Missing Instruments

List items with links and images if they don't match class "instrument-name" in a collapsible, two-column box with centered title and arrow indicator.

当前为 2024-10-20 提交的版本，查看 最新版本。

// ==UserScript==
// @name         [GC] Missing Instruments
// @namespace    https://www.grundos.cafe/
// @version      1.7
// @description  List items with links and images if they don't match class "instrument-name" in a collapsible, two-column box with centered title and arrow indicator.
// @match        https://www.grundos.cafe/instruments/?pet_name=*
// @grant        none
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    // List of items
    const items = [
        "Accordion", "Air Faerie Guitar", "Baby Drum", "Baby Whistle", "Bagpipes",
        "Bass Guitar", "Blueberry Jelly Bass", "Blue Kazoo", "Blue Moehawk Guitar",
        "Bongo Drums", "Bruce Maracas", "Castanets", "Cello", "Clarinet",
        "Colourful Xylophone", "Earth Faerie Recorder", "Faerie Saxophone",
        "Fire Violin", "Flower Bass", "Flower Cello", "Flower Trumpet", "Flute",
        "French Horn", "Ghostkerchief Banjo", "Gloomy Drums", "Gloomy Harp",
        "Grand Piano", "Grape Jelly Bongos", "Gruundo Guitar", "Harmonica", "Harp",
        "Heart Drums", "Ice Accordion", "Ice Harp", "Jelly Triangle", "Jelly Xylophone",
        "Kau Bell", "Light Faerie Harp", "Mandolin", "Mystic Guitar", "Oboe",
        "Orange Jelly Guitar", "Piano", "Pink Ukulele", "Pink Violin", "Plushie Banjo",
        "Plushie Drum", "Plushie Trumpet", "Rainbow Guitar", "Recorder",
        "Red Moehawk Guitar", "Saxophone", "Stone Trumpet", "Trombone", "Trumpet",
        "Violin", "Wadjet Saxophone", "Wock Til You Drop Guitar", "Wooden Washboard"
    ];

    // Function to check if an item exists on the page
    function itemExists(itemName) {
        const instrumentNames = document.querySelectorAll('.instrument-name');
        return Array.from(instrumentNames).some(instrument => instrument.textContent.trim() === itemName);
    }

    // Filter out items that already exist on the page
    const missingItems = items.filter(item => !itemExists(item));

    // If there are missing items, create a list and append to the page
    if (missingItems.length > 0) {
        const listContainer = document.createElement('div');
        listContainer.style.marginTop = '20px';
        listContainer.style.padding = '10px';
        listContainer.style.border = '1px solid #ccc';
        listContainer.style.backgroundColor = '#f9f9f9';
        listContainer.style.color = 'black'; // Set font color to black
        listContainer.style.maxWidth = '600px'; // Limit width for better layout
        listContainer.style.textAlign = 'center'; // Center the title and content

        // Create a collapsible title with an arrow indicator
        const titleContainer = document.createElement('div');
        titleContainer.style.display = 'flex';
        titleContainer.style.justifyContent = 'center'; // Center the title
        titleContainer.style.alignItems = 'center';

        const title = document.createElement('h3');
        title.textContent = 'Missing Instruments ';
        title.style.cursor = 'pointer';
        title.style.fontSize = '16px';
        title.style.display = 'inline-block'; // Title centered

        // Arrow indicator
        const arrow = document.createElement('span');
        arrow.textContent = '▼'; // Initially pointing down
        arrow.style.marginLeft = '10px';
        arrow.style.fontSize = '16px'; // Match the size with title
        title.appendChild(arrow);

        titleContainer.appendChild(title);
        listContainer.appendChild(titleContainer);

        // Create a container for the collapsible content
        const collapsibleContent = document.createElement('div');
        collapsibleContent.style.display = 'none'; // Initially hidden
        collapsibleContent.style.columnCount = '2'; // Two-column layout
        collapsibleContent.style.columnGap = '20px'; // Add some space between columns
        collapsibleContent.style.verticalAlign = 'top'; // Align to the top

        // Add event listener for collapsible functionality with arrow toggle
        title.addEventListener('click', function() {
            if (collapsibleContent.style.display === 'none') {
                collapsibleContent.style.display = 'block';
                arrow.textContent = '▲'; // Arrow pointing up when expanded
            } else {
                collapsibleContent.style.display = 'none';
                arrow.textContent = '▼'; // Arrow pointing down when collapsed
            }
        });

        const itemList = document.createElement('ul');
        itemList.style.listStyleType = 'none'; // Remove bullet points

        missingItems.forEach(item => {
            const listItem = document.createElement('li');
            listItem.style.marginBottom = '10px';

            // Create a span for the item name and make it bold
            const itemName = document.createElement('span');
            itemName.textContent = item + ' ';
            itemName.style.fontWeight = 'bold'; // Make font bold
            listItem.appendChild(itemName);

            // Create the link icons for each item, with 20px x 20px size
            const swLink = document.createElement('a');
            swLink.href = `/market/wizard/?query=${item}`;
            swLink.title = "Search the Shop Wizard";
            swLink.innerHTML = `<img title="Search the Shop Wizard" alt="Shop Wizard Search" class="search-helper-sw" src="https://grundoscafe.b-cdn.net/searchicons/darkmode/wiz.png" style="width:20px; height:20px;">`;
            swLink.setAttribute('onclick', `submitSWSearch(event, '${item}');`);
            swLink.setAttribute('onauxclick', `submitSWSearch(event, '${item}');`);
            listItem.appendChild(swLink);

            const sdbLink = document.createElement('a');
            sdbLink.href = `/safetydeposit/?page=1&query=${item}&exact=1`;
            sdbLink.target = "_blank";
            sdbLink.innerHTML = `<img class="search-helper-sdb" title="Search Safety Deposit Box" src="https://grundoscafe.b-cdn.net/searchicons/darkmode/sdb.png" style="width:20px; height:20px;">`;
            listItem.appendChild(sdbLink);

            const tpLink = document.createElement('a');
            tpLink.href = `/island/tradingpost/browse/?query=${item}`;
            tpLink.target = "_blank";
            tpLink.title = "Search Trading Post";
            tpLink.innerHTML = `<img class="search-helper-trading-post" src="https://grundoscafe.b-cdn.net/searchicons/darkmode/trade.png" style="width:20px; height:20px;">`;
            listItem.appendChild(tpLink);

            itemList.appendChild(listItem);
        });

        collapsibleContent.appendChild(itemList);
        listContainer.appendChild(collapsibleContent);

        // Find the element with the class "instruments-grid" and insert the list after it
        const instrumentsGrid = document.querySelector('.instruments-grid');
        if (instrumentsGrid) {
            instrumentsGrid.parentNode.insertBefore(listContainer, instrumentsGrid.nextSibling);
        } else {
            // If "instruments-grid" is not found, append to the body as a fallback
            document.body.appendChild(listContainer);
        }
    }
})();