Genshin Map Helper

genshin map helper (e.g. reecntly toggled, group toggled)

当前为 2021-09-10 提交的版本,查看 最新版本

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Greasemonkey 油猴子Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Userscripts ,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name         Genshin Map Helper
// @namespace    http://tampermonkey.net/
// @version      0.9
// @description  genshin map helper (e.g. reecntly toggled, group toggled)
// @author       The Insider Gamer
// @match        https://webstatic-sea.mihoyo.com/app/ys-map-sea/index.html*
// @icon         https://img-os-static.hoyolab.com/favicon.ico
// @grant        none
// ==/UserScript==


(function() {
    'use strict';

    const mruID = 'gs-mru-id';
    const mruClass = 'gs-mru-btn';
    let shortcutText = [
        "Common Chest",
        "Electroculus",
        "Electrogranum",
        "Electro Seelie",
        "Seelie",
        "Time Trial Challenge",
        "Sakura Bloom",
        "Naku Weed",
        "Crystal Marrow",
        "Amethyst Lump",
        "Mini Puzzle",
    ];
    let shortcutTextDisabled = [
        'Statue of The Seven',
        'Teleport Waypoint',
        'Domain',
        'Waverider Waypoint (Cannot Teleport)',
        'Frostbearing Tree',
        'Glimmering Beacon (Cannot Teleport)',
    ];

    function teleportsGroupToggle() {
        document.querySelector('[data-title="Statue of The Seven"]').click();
        document.querySelector('[data-title="Teleport Waypoint"]').click();
        document.querySelector('[data-title="Domain"]').click();
    }

    function chestsGroupToggle() {
        document.querySelector('[data-title="Common Chest"]').parentElement.parentElement.querySelector('[data-text=Collapse]').querySelector('span').click()
    }

    function quizzesGroupToggle() {
        document.querySelector("[data-title='Time Trial Challenge']").parentElement.parentElement.querySelector('[data-text=Collapse]').querySelector('span').click()
    }

    document.body.addEventListener('keydown', function(evt) {
        // Status of the Eleven, Teleport waypoint, domain toggle
        if(evt.ctrlKey && evt.altKey && evt.shiftKey && evt.key == 'T') {
            teleportsGroupToggle()
        }

        if(evt.ctrlKey && evt.key == 'Z') {
            // simulate click 'Hide Pin' when the item popup up is visible
            document.getElementsByClassName('map-popup__switch map-popup__switch--unmarked')[0].click();
        }

        if(evt.ctrlKey && evt.key == 'S') {
            document.querySelector('[data-title="Electroculus"]').click();
        }

        if(evt.ctrlKey && evt.key == 'E') {
            document.querySelector('[data-title="Electro Seelie"]').click();
        }

        if(evt.ctrlKey && evt.altKey && evt.key == 'W') {
            document.querySelector('[data-title="Statue of The Seven"]').parentElement.parentElement.querySelector('[data-text=Collapse]').querySelector('span').click()
        }


        if(evt.ctrlKey && evt.altKey && evt.key == 'c') {
            document.querySelector('[data-title="Common Chest"]').click()
        }


        // chest group select toggle
        if(evt.ctrlKey && evt.altKey && evt.shiftKey && evt.key == 'C') {
            chestsGroupToggle()
        }

        // puzzle group select toggle
        if(evt.ctrlKey && evt.altKey && evt.shiftKey && evt.key == 'Q') {
            quizzesGroupToggle()
        }
    })




    let isVisible = function(innerText) {
        if(!document.querySelector(`[data-title="${innerText}"]`)) return false
        return document.querySelector(`[data-title="${innerText}"]`).className.indexOf(innerText) ;
    }


    let createNewBtnToMru = function(mru, innerText) {
        let btn = document.createElement('button')
        btn.className = mruClass;
        btn.innerText = innerText;
        if (isVisible(innerText)) btn.classList.add('iw-visible');
        btn.onclick = function() {
            console.log(`innerText: ${this.innerText}`);
            this.classList.toggle('iw-visible');
            document.querySelector('[data-title="' + this.innerText + '"').click();
        }
        mru.append(btn);
    }

    let createNewBtnToElem = function(elem, theButton) {
        const btn = document.createElement('button')
        btn.className = mruClass;
        btn.innerText = theButton.label;
        btn.onclick = function() {
            console.log(`innerText: ${this.innerText}`);
            this.classList.toggle('iw-visible');
            theButton.callback()
        }
        elem.append(btn);

    }

    let addExistingItemToShortcut = function(mru, innerText) {
        if(shortcutText.indexOf(innerText) >= 0) return;
        if(shortcutTextDisabled.indexOf(innerText) >= 0) return;
        shortcutText.push(innerText);
        createNewBtnToMru(mru, innerText)
    }

    let addToShortcutIfVisible = function(mru, innerText, item) {
        if(item.className.indexOf('visible') >=0) addExistingItemToShortcut(mru, innerText);
    }

    let addListenerToExistingItems = function(mru) {
        let items = document.querySelectorAll('[data-title]')
        for(let i=0; i < items.length; i++) {
            const innerText = items[i].dataset.title
            items[i].addEventListener('click', function(ev) {
                addExistingItemToShortcut(mru, innerText);
            })
            addToShortcutIfVisible(mru, innerText, items[i]);
        }
    }


    const createShortcutGroupCtrl = function() {

        const panelElem = document.getElementsByClassName('layer-control__panel')[0]
        if(!panelElem) {
            setTimeout(() => createShortcutGroupCtrl(),1000);
            return;
        }
        const shortcutGroupBtn = [
            {
                label: 'Teleports Group',
                callback: teleportsGroupToggle
            },
            {
                label: 'Quizzes Group',
                callback: quizzesGroupToggle,
            },
            {
                label: 'Chests Group',
                callback: chestsGroupToggle,
            },

        ]


        const createGroupHTML = function() {
            const elemID = 'gn-group-layer-2205'
            const panelHtmlStr = `<li class="layer-control__group">
    <div data-text="Collapse" class="layer-control__group-title">
        <div class="layer-control__group-title-name">Shortcut Group</div>
    </div>
    <div id='${elemID}'>
    </div>
</li>`;



                const newLayerCtrl = document.createElement('li');
                newLayerCtrl.innerHTML = panelHtmlStr.trim();
                panelElem.prepend(newLayerCtrl);

                return {elemID}
            }

            const {elemID} = createGroupHTML()
            const groupElem = document.getElementById(elemID)

            for(let i=0; i<shortcutGroupBtn.length; i++){
                createNewBtnToElem(groupElem, shortcutGroupBtn[i]);
            }

            return {
                createGroupHTML,
                elemID,
            }

        }


        let createShortcutLayerCtrl = function(panelElem) {

            const panelHtmlStr = `<li class="layer-control__group">
    <div data-text="Collapse" class="layer-control__group-title">
        <div class="layer-control__group-title-name">Shortcut & Recently Toggled</div>
    </div>
    <div id='${mruID}'>
    </div>
</li>`;

        const newLayerCtrl = document.createElement('li');
        newLayerCtrl.innerHTML = panelHtmlStr.trim();
        panelElem.prepend(newLayerCtrl);
    }


    let addBtnToShortcutLayerCtrl = function() {
        const panelElem = document.getElementsByClassName('layer-control__panel')[0]
        if(!panelElem) {
            setTimeout(() => addBtnToShortcutLayerCtrl(),1000);
            return;
        }
        createShortcutLayerCtrl(panelElem);
        const mru = document.getElementById(mruID);

        addListenerToExistingItems(mru);

        for(let i=0; i<shortcutText.length; i++){
            createNewBtnToMru(mru, shortcutText[i]);
        }
    }

    let addMruBtnCssStyle = function() {
        document.styleSheets[0].insertRule('.iw-visible{ background: #cc3232; color: white; border: 1px solid #ce90909e;}');
        document.styleSheets[0].insertRule('.gs-mru-btn { border: 1px solid #cccccc9e; margin: 2px; padding: 5px 10px; border-radius: 14px; color: grey; cursor: pointer}');
    }

    addMruBtnCssStyle();
        addBtnToShortcutLayerCtrl()
        createShortcutGroupCtrl()

    })();