// ==UserScript==
// @name         Humble Choice Get Key
// @namespace    http://tampermonkey.net/
// @version      0.01
// @description  Humble Bundle Choice Page Get Key
// @author       ku mi
// @match        https://www.humblebundle.com/subscription/*
// @grant        GM_addStyle
// @downloadURL none
// ==/UserScript==

(function() {
    const el = document.querySelectorAll('.js-content-choices .choice-image-container')
    if(!el.length) return
    const h2 = document.querySelector('.subhub-section-header') || document.querySelector('.content-titles')
    if(!h2) return
    el.forEach((item, index) => {
        let div = document.createElement('div')
        div.setAttribute('class','_game_num_')
        div.innerText = index + 1
          item.appendChild(div)
      })
    const el2 = document.querySelectorAll('.js-content-choices .choice-image-container')
    const ulTop = document.createElement('ul')
    const ulBox = document.createElement('ul')
    const textarea = document.createElement('textarea')
    const classNameArr = ['_get_all_', '_select_box_', '_get_keys_']
    const textArr = ['刮开部分（高亮选中）', '提取key', '清空选中', '清空key','显示数字', '刮开所有(慎用)']
    const [getSomeKey, getKeyText, clearSelect, clearKey, setNumber, getAllKey] = [...Array(6)].map((item, index) => {
        item = document.createElement('li')
        item.innerText = textArr[index]
        ulTop.appendChild(item)
        return item
    })
    const childs = [...Array(el.length)].map((item, i) => {
        item = document.createElement('li')
        item.innerText = i + 1
        ulBox.appendChild(item)
        return item
    })
    ;[ulTop, ulBox, textarea ].forEach((item, index) => {
        item.setAttribute('class', classNameArr[index])
        h2.appendChild(item)
    })
    ulTop.onselectstart = () => false
    ulBox.onselectstart = () => false
    ulBox.addEventListener('click', (e) => {
        if (e.target.nodeName === 'LI') e.target.classList.toggle('current')
    })
    clearKey.addEventListener('click',() => {
        textarea.value = ''
    })
    clearSelect.addEventListener('click',(e) => {
        childs.forEach(item => item.classList.remove('current'))
    })
    setNumber.addEventListener('click',() => {
        let len = document.querySelectorAll('._game_num_').length
        if(len) return
        const newEl = document.querySelectorAll('.js-content-choices .choice-image-container')
        newEl.forEach((item, index) => {
        let div = document.createElement('div')
        div.setAttribute('class','_game_num_')
        div.innerText = index + 1
          item.appendChild(div)
      })
    })
    function getArr(payload) {
        const ref = document.querySelectorAll('.js-content-choices .claimed-badge.js-claimed-badge.visible')
        if(ref.length >= 10) return []
        const el = document.querySelectorAll('.js-content-choices .choice-image-container')
        if (!payload && !ref.length) return [...el].slice(0, 10)
        const claimed = document.querySelectorAll('.js-content-choices .js-claimed-badge-container')
        const arr = []
        claimed.forEach((item, index) => {
            if(item.innerText.length || (arr.length + ref.length >= 10)) return
            if (!payload) arr.push(el[index])
            else if(payload.some(ite => ite === index)) arr.push(el[index])
        })
        return arr
    }
    getAllKey.addEventListener('click', () => {
        clearSelect.click()
        const arr = getArr()
        if(arr.length) start(arr)
    })
    getKeyText.addEventListener('click',() => {
        clearKey.click()
        const arr = document.querySelectorAll('.js-content-choices .claimed-badge.js-claimed-badge.visible')
        if(arr.length) start(arr, true)
    })
    getSomeKey.addEventListener('click', () => {
        let arr = childs.filter(item => item.classList.contains('current')).map(item => item.innerText - 1)
        if(!arr.length) return
        arr = getArr(arr)
        if(arr.length) start(arr)
        clearSelect.click()
     })
    function start(arr, flag) {
        arr.forEach((item, index) => {
            item.click()
            const w = document.querySelectorAll('.humblemodal-wrapper.humblemodal-flex')[index]
            const k = document.querySelectorAll('.keyfield-value')[index]
            const t = document.querySelectorAll('.js-choice-details h2.title')[index];
            w.style.display = 'none'
            if(k)k.click();
            if(flag) {
                 textarea.value += `${t.innerText}: ${k.innerText}\n`
            }
            if(arr.length - 1 === index) {
                document.querySelector('.js-close-modal.close-modal').click()
                if(arr.length > 1 ) history.go(-index)
            }
        })
    }

GM_addStyle(`
._game_num_ {
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
          z-index: 1;
           background-color: rgba(0, 0, 0, .3);
           text-align: center;
          font-size: 100px;
}


._get_keys_ {
            width: 800px;
            height: 200px;
            resize: none;
            font-size: 18px;
            color: #fff;
            margin-top: 20px;
            outline: none;
            background-color: #454c5e;
            border: none;

}
._select_box_, ._get_all_ {
            display: flex;
            list-style: none;
            margin: 0;
            padding: 0;
        }
._get_all_ {
            height: 50px;
            line-height: 50px;
            margin-bottom: 20px;}
._get_all_ li:last-child{
           background-color: #c93756;
        }
._get_all_ > li {
            height: 50px;
            line-height: 50px;
            background-color: rgb(22, 159, 227);
            margin-right: 20px;
            border-radius: 3px;
            text-align: center;
            padding: 0 20px;
            color: #fff;
            font-size: 16px;
            cursor: pointer;
}
._select_box_>li {
            width: 40px;
            height: 40px;
            background-color: #454C5E;
            margin-right: 20px;
            font-size: 16px;
            border-radius: 3px;
            color: #fff;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
        }
._select_box_ .current {
            background-color: rgb(22, 159, 227);
        }
`);

})();