Item Overview

[Soap-0020]

Is your feature request related to a problem? Please describe. Not Related To A problem.

Describe the solution you'd like I would like an api endpoint that returns all items descriptions, raps, exists, images etc in 1 api call all together

Describe alternatives you've considered Possibly add images for rainbow/shiny pets on the collection api

Additional context N/A

[chickenputty]

Regarding Item Overview

You can do this by pairing multiple API endpoints together.

For example, on the Discord bot, when I fetch data I attach the RAP and exists to it.

async function fetchData(collectionNames, byName, fetchRap, fetchExists) {
    const itemsPromises = collectionNames.map(async (collectionName) => {
        return await getCollectionByName(collectionName);
    });
    let items = (await Promise.all(itemsPromises)).flat();

    // If searching for one item, find just that item
    if (byName) {
        items = items.filter(item => {
            const displayName = (item.configData?.DisplayName || item.configData?.Title || item.configData?.ZoneName || item.configData?.name || item.configData?.Name)?.toLowerCase();
            return displayName === byName.toLowerCase()
        });
    }

    // Inject rap and exists into the item
    if (fetchRap || fetchExists) {
        let rap = fetchRap ? await getRap() : null;
        let exists = fetchExists ? await getExists() : null;

        items.forEach(item => {
            let configName = item.configName.includes(' | ') ? item.configName.split(' | ')[1] : item.configName;
            let collection = remapCollectionToRapCategory(item.collection) || item.collection;

            if (fetchRap) {
                const rapItem = rap.find((rapItem) => {
                    const configDataKeys = Object.keys(rapItem.configData);
                    return configDataKeys.length === 1 && configDataKeys[0] === 'id' && // grab normal only (variants need custom lookups - pet, potion, enchant, charm)
                        (!collection || rapItem.category === collection) && // compare category, if it exists
                        rapItem.configData.id === configName // compare name
                });
                item.rap = (rapItem && rapItem.value) || 0;
            }

            if (fetchExists) {
                const existsItem = exists.find((existsItem) => {
                    const configDataKeys = Object.keys(existsItem.configData);
                    return configDataKeys.length === 1 && configDataKeys[0] === 'id' && // grab normal only (variants need custom lookups - pet, potion, enchant, charm)
                        (!collection || existsItem.category === collection) && // compare category, if it exists
                        existsItem.configData.id === configName && // compare name
                        !hideExistsItems.includes(existsItem.configData.id); // exclude if is in hideExistsItems
                });
                item.exists = (existsItem && existsItem.value) || 0;
            }
        });
    }

    return byName ? items[0] : items;
}

Regarding Pet Icons

There are not icons for rainbow and shiny.

• Rainbow pets use the gold icon with hue changes
• Shiny pets use the regular (or gold) icon with a shiny overlay

[Soap-0020]

could you provide an api for images using the overlays etc :eyes:

thanks for responding

[chickenputty]

Sorry, this is out of scope for the API. Here is how I would approach it -

You can achieve a rainbow effect in CSS:

.image-container img {
    animation: rainbow 1s infinite alternate;
}

@keyframes rainbow {
    from {
        filter: hue-rotate(0deg);
    }
    to {
        filter: hue-rotate(360deg);
    }
}

You can achieve shiny by overlaying an image on another:

    <div class="image-container">
        <img src="your-image.jpg" alt="Your Image">
        <img class="overlay-image" src="border-image.png" alt="Overlay Image">
    </div>

.image-container {
    position: relative;
    width: 300px;
    height: 300px;
    overflow: hidden;
}

.image-container img {
    width: 100%;
    height: 100%;
}

.overlay-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.5;
}

The shiny image we use in-game is:

We stretch and shrink this over the icon, along with a swiping gradient that happens randomly.

[Soap-0020]

Appreciate it!