// ==UserScript==
// @name         Keylol Chinaplay 2Game Table
// @namespace    https://greasyfork.org/users/34380
// @version      20231126
// @description  在购买心得 Chinaplay 板块的帖子一楼开始位置添加折扣表格，折后价和史低可排序。
// @supportURL   https://keylol.com/t920709-1-1
// @match        https://keylol.com/t*
// @match        https://keylol.com/forum.php?mod=viewthread&tid=*
// @resource     data https://raw.githubusercontent.com/mouse040429/Keylol-Chinaplay-Table/main/data.json
// @grant        GM_getResourceText
// @downloadURL none
// ==/UserScript==

(function () {
    'use strict';

    if (document.querySelector('.subforum_left_title_left_up').innerText.match(/Chinaplay/)) {
        document.querySelector('head').insertAdjacentHTML('beforeend', `<style> .td-wide-80 { width:80px; } .td-wide-50 { width:50px; } .hidden1,.hidden2,.hidden3,.hidden4 { display:none; }</style>`);

        const html_table = `<br><div class="sff_collapse"><div class="sff_collapse_b" onclick="var s = this.parentNode; while (!s.classList.contains('sff_collapse')) {s = s.parentNode;} if (s.classList.contains('sff_collapsed')) {s.classList.remove('sff_collapsed');} else {s.classList.add('sff_collapsed');}"><span class="sff_collapse_t">&gt;</span> 折扣表格</div><div class="sff_collapse_d">
            <span id="checkbox-rows"><label><input id="cb-tr-higher" type="checkbox" value="tr-higher"></input>高于史低</label><label><input id="cb-tr-old" type="checkbox" value="tr-old"></input>高于史低CP</label><label><input id="cb-tr-not-wish" type="checkbox" value="tr-not-wish"></input>非愿望单</label><label><input id="cb-tr-own" type="checkbox" value="tr-own"></input>已拥有</label></span>
            <table id="table-chinaplay" class="t_table"><thead><tr><td data-col="index" data-reverse="1">游戏名</td><td class="td-wide-80" data-col="coupon" data-reverse="-1">折后价</td><td class="td-wide-80" data-col="hist-cp" data-reverse="-1">史低CP</td><td class="td-wide-80" data-col="hist" data-reverse="-1">史低</td><td>区域</td><td class="td-wide-50">截止</td><td>折扣码</td><td class="td-wide-50">加购</td></tr></thead><tbody></tbody></table>
            <div><a href="javascript:;" onclick="var s = this.parentNode; while (!s.classList.contains('sff_collapse')) {s = s.parentNode;} s.scrollIntoView(true); if (s.classList.contains('sff_collapsed')) {s.classList.remove('sff_collapsed');} else {s.classList.add('sff_collapsed');}">点击隐藏</a></div></div></div>`;

        const floor1 = document.querySelector('.t_f');
        const anchor = floor1.querySelector('.t_f .pstatus') || floor1.querySelector('.original_text_style1');
        if (anchor) {
            anchor.insertAdjacentHTML('afterend', '' + html_table);
        } else {
            floor1.insertAdjacentHTML('afterbegin', html_table);
        }
        const cb_rows = floor1.querySelector('#checkbox-rows');
        const cb_row_checkeds = ['cb-tr-higher', 'cb-tr-old', 'cb-tr-not-wish', 'cb-tr-own'];
        cb_row_checkeds.forEach((v) => {
            cb_rows.querySelector("#" + v).checked = true;
        });

        const tbody = floor1.querySelector('#table-chinaplay > tbody');

        // table col > name discount hist region expire code cart steam
        let name;
        let discount = 0;
        let hist = 0;
        let region;
        let expire;
        let code = '';
        let steam;

        let trs = [];
        let i_start = 0;
        let i_end = 0;
        let is_hist_fill = true;
        const nodes = floor1.childNodes;
        nodes.forEach((node) => {
            readNode(node);
        });
        newTable();

        setTimeout(() => {
            tbody.querySelectorAll('tr > td:nth-child(1) > a').forEach((node) => {
                if (!node.classList.contains('steam-info-wish')) {
                    if (node.classList.contains('steam-info-own')) {
                        node.parentNode.parentNode.classList.add('tr-own', 'tr-not-wish');
                    } else {
                        node.parentNode.parentNode.classList.add('tr-not-wish');
                    }
                }
            });
        }, 5000);

        function newTable() {
            let html = '';
            trs.forEach((tds, i) => {
                // tds [name, parseFloat(discount), parseFloat(hist), region, expire, code, cart, steam];
                const is_lower = tds[1] <= tds[2];
                const data = JSON.parse(GM_getResourceText('data'));
                const cur = data[tds[6]];
                let td_html;
                let is_newlow = false;
                if (cur) {
                    const _low = cur.low;
                    is_newlow = tds[1] <= _low[0];
                    let tit = _low[0] + '   ' + _low[1] + '&#13;';
                    cur.hist.forEach((item) => {
                        tit = tit + '&#13;' + item[0] + '   ' + item[1];
                    });
                    td_html = `<td data-hist-cp="${_low[0]}" title="${tit}">${is_newlow ? '<span style="background-color:LightBlue">' + _low[0] + '</span>' : _low[0]}</td>`;
                } else {
                    td_html = `<td data-hist-cp="0">0</td>`;
                }
                html = html + `<tr class="${is_lower ? '' : 'tr-higher '}${is_newlow ? '' : 'tr-old'}"><td data-index="${i}"><a href="https://store.steampowered.com/${tds[7]}/" target="_blank">${tds[0]}</a></td><td data-coupon="${tds[1]}">${is_lower ? '<span style="background-color:Wheat">' + tds[1] + '</span>' : tds[1]}</td>${td_html}<td data-hist="${tds[2]}">${tds[2]}</td><td>${tds[3]}</td><td>${tds[4]}</td><td>${tds[5]}</td><td><a href="https://chinaplay.store/detail/${tds[6]}/" target="_blank">加购</a></td></tr>`;
            });
            tbody.innerHTML = html;
        }

        function readNode(node) {
            if (node.nodeName == 'SPAN' || node.nodeName == 'STRONG') {
                node.childNodes.forEach((_node) => {
                    readNode(_node);
                });
            } else if (node.nodeName == 'H1') {
                expire = '';
                region = '-';
                const matched1 = node.innerText.match(/((\d+\.\d+)?)(.*)（(.*)）/);
                if (matched1) {
                    expire = matched1[1];
                    region = matched1[4];
                    i_end = trs.length;
                    for (; i_start < i_end; i_start++) {
                        trs[i_start][5] = code;
                    }
                    const matched2 = matched1[3].match(/.*《(.*)》/);
                    if (matched2) {
                        name = matched2[1];
                    }
                    if (!is_hist_fill) {
                        trs[i_end - 1][2] = hist;
                    }
                }
            } else if (node.nodeName == 'A') {
                if (node.href.match(/https:\/\/store\.steampowered\.com\/(app|sub|bundle)\/\d+\//)) {
                    name = node.innerText;
                    steam = node.href.match(/https:\/\/store\.steampowered\.com\/((app|sub|bundle)\/\d+)\//)[1];
                } else if (node.href.match(/https:\/\/chinaplay\.store\/detail\/[\w-]+\/?/)) {
                    const cart = node.href.match(/https:\/\/chinaplay\.store\/detail\/([\w-]+)\/?/)[1];
                    if (!name) { name = cart.replace(/-/g, ' ').replace('   ', ' - '); }
                    trs.push([name, parseFloat(discount), parseFloat(hist), region, expire, code, cart, steam]);
                    name = null;
                    hist = 0;
                    is_hist_fill = true;
                }
            } else if (node.nodeName == '#text') {
                const content = node.textContent;
                if (content.match(/史低：?(\d+(\.\d+)?)/)) {
                    hist = content.match(/史低：?(\d+(\.\d+)?)/)[1];
                    is_hist_fill = false;
                } else if (content.match(/(\d+(\.\d+)?)元/)) {
                    discount = content.match(/(\d+(\.\d+)?)元/)[1];
                } else if (content.match(/折扣码：/)) {
                    code = node.parentNode.innerText.match(/折扣码：(\S+)/)[1];
                }
            }
        }

        cb_rows.addEventListener('click', (event) => {
            if (event.target.nodeName == 'INPUT') {
                const hidden = {
                    'tr-higher': 'hidden1',
                    'tr-old': 'hidden2',
                    'tr-not-wish': 'hidden3',
                    'tr-own': 'hidden4'
                }
                const value = event.target.value;
                tbody.querySelectorAll('.' + value).forEach((node) => { node.classList.toggle(hidden[value]); });
            }
        });

        floor1.querySelector('#table-chinaplay > thead > tr').addEventListener('click', function (event) {
            const target = event.target;
            if (target.nodeName == 'TD' && target.hasAttribute('data-reverse')) {
                const col = target.getAttribute('data-col');
                let reverse = target.getAttribute('data-reverse');
                let sorted;
                if (reverse == 0) {
                    sorted = Array.from(tbody.querySelectorAll('tr')).sort((a, b) => {
                        return b.querySelector('td[data-' + col + ']').getAttribute('data-' + col) - a.querySelector('td[data-' + col + ']').getAttribute('data-' + col);
                    });
                    const siblings = this.querySelectorAll('[data-reverse="1"]');
                    target.setAttribute('data-reverse', '1');
                    siblings.forEach((node) => { node.setAttribute('data-reverse', '0'); });
                } else {
                    sorted = Array.from(tbody.querySelectorAll('tr')).sort((a, b) => { return a.querySelector('td[data-' + col + ']').getAttribute('data-' + col) - b.querySelector('td[data-' + col + ']').getAttribute('data-' + col); });
                    const siblings = this.querySelectorAll('[data-reverse="0"]');
                    target.setAttribute('data-reverse', '0');
                    siblings.forEach((node) => { node.setAttribute('data-reverse', '1'); });
                }
                sorted.forEach((node) => {
                    tbody.insertAdjacentElement('beforeend', node);
                });
            }
        });
    } else if (document.querySelector('.subforum_left_title_left_up').innerText.match(/2Game/)) {
        document.querySelector('head').insertAdjacentHTML('beforeend', `<style> .td-wide-80 { width:80px; } .td-wide-50 { width:50px; } .hidden1,.hidden2,.hidden3,.hidden4 { display:none; }</style>`);

        const html_table = `<br><div class="sff_collapse"><div class="sff_collapse_b" onclick="var s = this.parentNode; while (!s.classList.contains('sff_collapse')) {s = s.parentNode;} if (s.classList.contains('sff_collapsed')) {s.classList.remove('sff_collapsed');} else {s.classList.add('sff_collapsed');}"><span class="sff_collapse_t">&gt;</span> 折扣表格</div><div class="sff_collapse_d">
            <span id="checkbox-rows"><label><input id="cb-tr-higher" type="checkbox" value="tr-higher"></input>高于史低</label><label><input id="cb-tr-old" type="checkbox" value="tr-old"></input>高于史低CP</label><label><input id="cb-tr-not-wish" type="checkbox" value="tr-not-wish"></input>非愿望单</label><label><input id="cb-tr-own" type="checkbox" value="tr-own"></input>已拥有</label></span>
            <table id="table-chinaplay" class="t_table" style="width:80%"><thead><tr><td data-col="index" data-reverse="1">游戏名</td><td class="td-wide-80" data-col="coupon" data-reverse="-1">折后价</td><td class="td-wide-80" data-col="hist-cp" data-reverse="-1">史低CP</td><td class="td-wide-50">加购</td></tr></thead><tbody></tbody></table>
            <div><a href="javascript:;" onclick="var s = this.parentNode; while (!s.classList.contains('sff_collapse')) {s = s.parentNode;} s.scrollIntoView(true); if (s.classList.contains('sff_collapsed')) {s.classList.remove('sff_collapsed');} else {s.classList.add('sff_collapsed');}">点击隐藏</a></div></div></div>`;

        const floor1 = document.querySelector('.t_f');
        const anchor = floor1.querySelector('.t_f .pstatus') || floor1.querySelector('.original_text_style1');
        if (anchor) {
            anchor.insertAdjacentHTML('afterend', '' + html_table);
        } else {
            floor1.insertAdjacentHTML('afterbegin', html_table);
        }
        const cb_rows = floor1.querySelector('#checkbox-rows');
        const cb_row_checkeds = ['cb-tr-higher', 'cb-tr-old', 'cb-tr-not-wish', 'cb-tr-own'];
        cb_row_checkeds.forEach((v) => {
            cb_rows.querySelector("#" + v).checked = true;
        });

        const tbody = floor1.querySelector('#table-chinaplay > tbody');

        // table col > name discount hist region expire code cart steam
        let name;
        let version;
        let discount = 0;
        let hist = 0;
        let region;
        let expire;
        let code = '';
        let steam;

        let trs = [];
        let i_start = 0;
        let i_end = 0;
        let is_hist_fill = true;
        const nodes = floor1.childNodes;
        nodes.forEach((node) => {
            readNode(node);
        });
        newTable();

        setTimeout(() => {
            tbody.querySelectorAll('tr > td:nth-child(1) > a').forEach((node) => {
                if (!node.classList.contains('steam-info-wish')) {
                    if (node.classList.contains('steam-info-own')) {
                        node.parentNode.parentNode.classList.add('tr-own', 'tr-not-wish');
                    } else {
                        node.parentNode.parentNode.classList.add('tr-not-wish');
                    }
                }
            });
        }, 5000);

        function newTable() {
            let html = '';
            trs.forEach((tds, i) => {
                // tds [name, parseFloat(discount), parseFloat(hist), region, expire, code, cart, steam];
                const is_lower = tds[1] <= tds[2];
                const data = JSON.parse(GM_getResourceText('data'));
                const cur = data[tds[6]];
                let td_html;
                let is_newlow = false;
                if (cur) {
                    const _low = cur.low;
                    is_newlow = tds[1] <= _low[0];
                    let tit = _low[0] + '   ' + _low[1] + '&#13;';
                    cur.hist.forEach((item) => {
                        tit = tit + '&#13;' + item[0] + '   ' + item[1];
                    });
                    td_html = `<td data-hist-cp="${_low[0]}" title="${tit}">${is_newlow ? '<span style="background-color:LightBlue">' + _low[0] + '</span>' : _low[0]}</td>`;
                } else {
                    td_html = `<td data-hist-cp="0">0</td>`;
                }
                html = html + `<tr class="${is_lower ? '' : 'tr-higher '}${is_newlow ? '' : 'tr-old'}"><td data-index="${i}"><a href="https://store.steampowered.com/${tds[3]}/" target="_blank">${tds[0]}</a></td><td data-coupon="${tds[1]}">${is_lower ? '<span style="background-color:Wheat">' + tds[1] + '</span>' : tds[1]}</td>${td_html}<td><a href="https://chinaplay.store/detail/${tds[2]}/" target="_blank">加购</a></td></tr>`;
            });
            tbody.innerHTML = html;
        }

        function readNode(node) {
            if (node.nodeName == 'SPAN' || node.nodeName == 'STRONG') {
                node.childNodes.forEach((_node) => {
                    readNode(_node);
                });
            } else if (node.nodeName == 'A') {
                if (node.href.match(/https?:\/\/store\.steampowered\.com\/(app|sub|bundle)\/\d+\//)) {
                    name = node.innerText;
                    steam = node.href.match(/https?:\/\/store\.steampowered\.com\/((app|sub|bundle)\/\d+)\//)[1];
                } else if (node.href.match(/https:\/\/2game\.hk\/cn\/[\w-]+\/?/)) {
                    const cart = node.href.match(/https:\/\/2game\.hk\/cn\/([\w-]+)/)[1];
                    trs.push([name + version, parseFloat(discount),  cart, steam]);
                    hist = 0;
                    is_hist_fill = true;
                }
            } else if (node.nodeName == '#text') {
                const content = node.textContent;
                if (content.match(/折扣码价格：/)) {
                    version = content.match(/(.*)叠加折扣码价格：/)[1];
                    discount = node.nextSibling.innerText;
                }

            }
        }

        cb_rows.addEventListener('click', (event) => {
            if (event.target.nodeName == 'INPUT') {
                const hidden = {
                    'tr-higher': 'hidden1',
                    'tr-old': 'hidden2',
                    'tr-not-wish': 'hidden3',
                    'tr-own': 'hidden4'
                }
                const value = event.target.value;
                tbody.querySelectorAll('.' + value).forEach((node) => { node.classList.toggle(hidden[value]); });
            }
        });

        floor1.querySelector('#table-chinaplay > thead > tr').addEventListener('click', function (event) {
            const target = event.target;
            if (target.nodeName == 'TD' && target.hasAttribute('data-reverse')) {
                const col = target.getAttribute('data-col');
                let reverse = target.getAttribute('data-reverse');
                let sorted;
                if (reverse == 0) {
                    sorted = Array.from(tbody.querySelectorAll('tr')).sort((a, b) => {
                        return b.querySelector('td[data-' + col + ']').getAttribute('data-' + col) - a.querySelector('td[data-' + col + ']').getAttribute('data-' + col);
                    });
                    const siblings = this.querySelectorAll('[data-reverse="1"]');
                    target.setAttribute('data-reverse', '1');
                    siblings.forEach((node) => { node.setAttribute('data-reverse', '0'); });
                } else {
                    sorted = Array.from(tbody.querySelectorAll('tr')).sort((a, b) => { return a.querySelector('td[data-' + col + ']').getAttribute('data-' + col) - b.querySelector('td[data-' + col + ']').getAttribute('data-' + col); });
                    const siblings = this.querySelectorAll('[data-reverse="0"]');
                    target.setAttribute('data-reverse', '0');
                    siblings.forEach((node) => { node.setAttribute('data-reverse', '1'); });
                }
                sorted.forEach((node) => {
                    tbody.insertAdjacentElement('beforeend', node);
                });
            }
        });
    }
})();