zodiacs-list-fragments.js

// ==UserScript==
// @name         Zodiacs Count Fragments
// @namespace    https://gist.github.com/diego-mi/f210deef9bd642971edb6c42c610cb4e
// @downloadUrl  https://gist.githubusercontent.com/diego-mi/f210deef9bd642971edb6c42c610cb4e/raw/b0d143f1e6fee5f816e92e22db97014d8a4eea78/frag-list.js
// @version      0.3
// @description  Zodiacs Count Fragments
// @author       DiegoMi
// @match        https://v2.zodiacs.me
// @grant        none
// @run-at       document-start
// ==/UserScript==

(function() {
    'use strict';
    // Variaveis para guardar informacoes dos carros
    let fragmentListItemsElements = null;

    // Variaveis para encontrar elementos no html
    const QuerySelector_FragmentItem = `.fragment-image .ant-image-img`;

    const startCount = { '1': 0, '2': 0, '3': 0, '4': 0, '5': 0, '6': 0};

    let fragments = {
        'monkey': { ...startCount},
        'snake': { ...startCount},
        'mouse': { ...startCount},
        'rabbit': { ...startCount},
        'pig': { ...startCount},
        'buffalo': { ...startCount},
        'tiger': { ...startCount},
        'goat': { ...startCount},
        'dragon': { ...startCount},
        'horse': { ...startCount},
        'dog': { ...startCount},
        'chicken': { ...startCount},
    };

    console.log("Match url Fragment");

    /**
     * HELPERS
     */
    async function WaitForElement(selector) {
        while (document.querySelector(selector) === null) {
            await new Promise( resolve => requestAnimationFrame(resolve) )
        }
        await new Promise(resolve => setTimeout(resolve, 1000));
        return document.querySelector(selector);
    }

    /**
     * END HELPERS
     */

    async function GetFragments () {
        await WaitForElement(QuerySelector_FragmentItem);
        fragmentListItemsElements = document.querySelectorAll(QuerySelector_FragmentItem);

        if (fragmentListItemsElements.length === 0) return console.log("Fragment Items not found");

        return console.log(`Fragment Items found: ${fragmentListItemsElements.length}`);
    }

    async function GetFragmentTypes() {
        const regexPattern = /([^/]+)/g;

        for(let fragIndex = 0; fragIndex < fragmentListItemsElements.length; fragIndex++) {

            const image = fragmentListItemsElements[fragIndex].src.split(regexPattern);
            const number = image[11].split('.');
            fragments[image[9]][number[0]]++;
        }
    }

    async function addHtml() {
        const row = document.createElement('div');
        row.classList.add('ant-row');

        const rowTitle = document.createElement('h2');
        rowTitle.classList.add('text-orange','ant-col', 'ant-col-24');
        rowTitle.textContent = `Your Fragments (${fragmentListItemsElements.length})`;

        row.appendChild(rowTitle);

        Object.getOwnPropertyNames(fragments).forEach(async (item) => {
            row.appendChild(await addCard(item, fragments[item]));
        })

        document.querySelector('.main-content').prepend(row);
    }

    async function addCard(fragName, values) {
        const div1 = document.createElement('div');
        div1.classList.add('ant-col','ant-col-6','p-3');

        const div2 = document.createElement('div');
        div2.classList.add('ant-card','ant-card-bordered','my-car','text-center');

        const div3 = document.createElement('div');
        div3.classList.add('ant-card-body');

        const div4 = document.createElement('div');
        div4.classList.add('user-car','text-center');

        const div5 = document.createElement('div');
        div5.classList.add('content','attrs','mt-3','shadowed');

        const fragNameHeader = document.createElement('h4');
        fragNameHeader.textContent = fragName;

        div4.appendChild(fragNameHeader);

        Object.entries(values).forEach(async (item, index) => {
            console.log("item", item);
            div5.appendChild(await addText(`Frag${item[0]} count:`, `${item[1]}`));
        })

        const fragCombine = document.createElement('h5');
        fragCombine.classList.add('text-center');

        const canCombine = Object.values(values).every((item) => item > 0);

        if (canCombine) {
            fragCombine.classList.add('text-green');
            fragCombine.textContent = 'Can combine: Yeap!';
        } else {
            fragCombine.classList.add('text-red');
            fragCombine.textContent = 'Can combine: Not today';
        }

        div4.appendChild(fragCombine);

        div4.appendChild(div5);
        div3.appendChild(div4);
        div2.appendChild(div3);
        div1.appendChild(div2);

        return div1;
    }

    async function addText(title, text) {
        const divContent = document.createElement('div');
        divContent.classList.add('d-flex','justify-content-between');

        const spanTitle = document.createElement('span');
        spanTitle.innerHTML = title;

        const spanText = document.createElement('span');
        spanText.textContent = text ;

        divContent.appendChild(spanTitle);
        divContent.appendChild(spanText);

        return divContent;
    }

    /**
     * INICIALIZACAO
     */
    async function Init() {
        await GetFragments();
        await GetFragmentTypes();
        await addHtml();
    }

    Init();
})();