用户:Staf Irity/JavaScript/ProjectDivide HydraCardShow.js

注意：在发布之后，您可能需要清除浏览器缓存才能看到所作出的更改的影响。

• Firefox或Safari：按住Shift的同时单击刷新，或按Ctrl-F5或Ctrl-R（Mac为⌘-R）
• Google Chrome：按Ctrl-Shift-R（Mac为⌘-Shift-R）
• Edge：按住Ctrl的同时单击刷新，或按Ctrl-F5。

/**
 * 原始文件改自llwiki.org/zh/User:Bhsd/widget/listen.js，以CC BY-NC-SA 4.0知识共享协议分发。
 * @Function: demo
 * @Author: SST, [LLwiki]
 */
"use strict";
/* global mw, $ */

class Card {
    ID = "Dummy ID";
    pack;
    isWhims;
    name;
    kb;
    rarity;
    skill;
    information;
    rawHTML;
    type;
    constructor(name) {
        this.name = name;
    }
    setRarity(txt){
        if (txt.indexOf("S") !== -1){this.rarity = "S";}
        else if (txt.indexOf("A") !== -1){this.rarity = "A";}
        else if (txt.indexOf("B") !== -1){this.rarity = "B";}
        else if (txt.indexOf("C") !== -1){this.rarity = "C";}
        else {this.rarity = "Undefined";}
    }
    getDisplay(){return "";}
}
class CharacterCard extends Card {
    EP;
    BP;
    type = "C";
    supports = [];
    attibutes = [];
}
class PlaceCard extends Card {
    EP;
    canMove;
    maxDamage;
    attibutes = [];
    type = "P";
}
class ActionCard extends Card {
    type = "A";
}
class counTerCard extends Card {
    type = "T";
}

var DataCard = [];
var DataSelector = {
    Rarity: {
        type: "equal",
        list: ["S","A","B","C"],
        target: "rarity"
    },
    Pack: {
        type: "equal",
        list: [],
        target: "pack"
    },
    Type: {
        type: "equal",
        hasI18n: true,
        list: ["C", "P", "A", "T"],
        listI18n: ["角色卡", "置物卡", "行动卡", "反击卡"],
        target: "type"
    },
    IsWhims: {
        type: "equal",
        hasI18n: true,
        list: [true,false],
        listI18n: ["是", "否"],
        target: "isWhims"
    },
};

function initCurrentSelector(){
    for (var key in DataSelector) {
        var value = DataSelector[key];
        value.currentList = [];
        var SelectorButtons = document.getElementById("HydraSelector_" + key).childNodes[1].childNodes;
        for(var i=0;i<SelectorButtons.length;i++){
            var isEnabled = SelectorButtons[i].classList.contains("enabled");
            if(isEnabled){value.currentList.push(value.list[i]);}
        }
    }
}
function isCardSelected(card){
    for (var key in DataSelector) {
        var value = DataSelector[key];
        if(value.currentList.length <= 0){}
        else if(value.type == "equal"){
            var compared = card[value.target];
            var selected = false;
            for (var i = 0;i < value.currentList.length;i++){
                var item = value.currentList[i];
                if(compared == item){selected = true;}
            }
            if(!selected){return false;}
        }
        else{console.log("!!! wtf is the type? " + value.type);}
    }
    return true;
}

var cardPackName = "";
function getAttitubeListFromHTML(html) {//把文本转换为属性列表，晚点记得重写。
    return [html];
}

function getNodeFromTBody(tbody,x,y){
    var X = 0;
    var trs = tbody.childNodes;
    for(var i = 0;i < trs.length;i++) {
        var node = trs[i];
        if(node.nodeName == "TR"){
            if(X == x){
                var Y = 0;
                var tds = node.childNodes;
                for(var j = 0;j < tds.length;j++) {
                    var node2 = tds[j];
                    if(node2.nodeName == "TD" || node2.nodeName == "TH"){
                        if(Y == y){return node2;}
                        Y++;
                    }
                }
            }
            X++;
        }  
    }
    return tbody.childNodes[x].childNodes[y];
}

function readData(tableNode){//格式和模板是一一对应的，改模板之前一定要记得改这个！！！
    var tbody = tableNode.childNodes[1];
    if (tableNode.classList.contains("CharacterCard")){
        //console.log(tbody.childNodes);
        var card = new CharacterCard(getNodeFromTBody(tbody,0,0).innerText);
        card.pack = cardPackName;
        card.ID = getNodeFromTBody(tbody,1,1).innerText;
        card.isWhims = (card.ID.indexOf("W") !== -1);//临时方案，记得改
        card.kb = getNodeFromTBody(tbody,1,3).innerText;
        card.attibutes = getAttitubeListFromHTML(getNodeFromTBody(tbody,2,1).innerHTML);
        card.setRarity(getNodeFromTBody(tbody,3,1).innerText);
        card.EP = getNodeFromTBody(tbody,3,3).innerHTML;
        card.BP = getNodeFromTBody(tbody,3,5).innerHTML;
        card.skill = getNodeFromTBody(tbody,5,0).innerHTML;
        card.supports = [getNodeFromTBody(tbody,5,1).innerHTML];
        card.information = getNodeFromTBody(tbody,6,0).innerHTML;

        card.rawHTML = tableNode.outerHTML;

        DataCard.push(card);
        //console.log(card);
    }
    else if (tableNode.classList.contains("PlaceCard")){
        var card = new PlaceCard(getNodeFromTBody(tbody,0,0).innerText);
        card.pack = cardPackName;
        card.ID = getNodeFromTBody(tbody,1,1).innerText;
        card.isWhims = (card.ID.indexOf("W") !== -1);//临时方案，记得改
        card.kb = getNodeFromTBody(tbody,1,3).innerText;

        card.attibutes = getAttitubeListFromHTML(getNodeFromTBody(tbody,2,1).innerHTML);
        card.canMove = getNodeFromTBody(tbody,2,3).innerHTML;

        card.setRarity(getNodeFromTBody(tbody,3,1).innerText);
        card.EP = getNodeFromTBody(tbody,3,3).innerHTML;
        card.maxDamage = getNodeFromTBody(tbody,3,5).innerHTML;

        card.skill = getNodeFromTBody(tbody,4,1).innerHTML;
        card.information = getNodeFromTBody(tbody,5,1).innerHTML;

        card.rawHTML = tableNode.outerHTML;

        DataCard.push(card);
    }
    else if (tableNode.classList.contains("ActionCard")){
        var card = new ActionCard(getNodeFromTBody(tbody,0,0).innerText);
        card.pack = cardPackName;
        card.ID = getNodeFromTBody(tbody,1,1).innerText;
        card.isWhims = (card.ID.indexOf("W") !== -1);//临时方案，记得改
        card.kb = getNodeFromTBody(tbody,1,3).innerText;
        card.setRarity(getNodeFromTBody(tbody,1,5).innerText);
        card.skill = getNodeFromTBody(tbody,2,1).innerHTML;
        card.information = getNodeFromTBody(tbody,3,1).innerHTML;

        card.rawHTML = tableNode.outerHTML;

        DataCard.push(card);
    }
    else if (tableNode.classList.contains("CounterCard")){
        var card = new counTerCard(getNodeFromTBody(tbody,0,0).innerText);
        card.pack = cardPackName;
        card.ID = getNodeFromTBody(tbody,1,1).innerText;
        card.isWhims = (card.ID.indexOf("W") !== -1);//临时方案，记得改
        card.kb = getNodeFromTBody(tbody,1,3).innerText;
        card.setRarity(getNodeFromTBody(tbody,1,5).innerText);
        card.skill = getNodeFromTBody(tbody,2,1).innerHTML;
        card.information = getNodeFromTBody(tbody,3,1).innerHTML;

        card.rawHTML = tableNode.outerHTML;

        DataCard.push(card);
    }
}

function readAllData(divNode){
    for(var i = 0;i < divNode.childNodes.length;i++) {
        var node = divNode.childNodes[i];
        //console.log(node);
        if(typeof node.classList === "undefined"){}//判断undefined
        else if(node.classList.contains("citizen-table-wrapper")){//Citizen皮肤（林百未实装）
            readData(node.childNodes[0]);
        }
        else if(node.classList.contains("content-table-wrapper")){//Timeless皮肤
            readData(node.childNodes[3].childNodes[0])
        }
        else if(node.nodeName == "TABLE"){//除了上述俩皮肤之外的其他皮肤
            readData(node);
        }
    }
}

function refresh(){
    var HydraShower = document.getElementById("HydraShower");
    var HydraTemp = document.getElementById("HydraTemp");
    var txt = ""
    initCurrentSelector();
    for(var i = 0;i < DataCard.length;i++){
        if(isCardSelected(DataCard[i])){txt += HydraTemp.childNodes[i].outerHTML;}
    }
    HydraShower.innerHTML = txt;
}

(RLQ=window.RLQ||[]).push(function(){
	mw.widget = mw.widget || {};
	if (mw.widget.HydraCardShow){return;}
	mw.widget.HydraCardShow = true;
	mw.loader.implement("lw.pagejs.pd.hcs",function (jQuery,$){
		$(document).ready(function(){
			console.log('HydraCardShow Loaded.');
            
            //Step 1.装载数据
            var HydraTarget = document.getElementById("HydraTarget");//首先获取原始的数据
            var nodeList = HydraTarget.childNodes;//然后再获得其子元素
            var current_status = false;//状态机，但是只有两种：true=已经找到了h3，在等接下来的PDBox；false=等下一个h3
            
            for(var i = 0;i < nodeList.length;i++) {
                var node = nodeList[i];
                //console.log(node);
                if(current_status) {
                    if((typeof node.classList !== "undefined") && node.classList.contains("PDBox")){
                        //console.log(i);
                        current_status = false;
                        DataSelector.Pack.list.push(cardPackName);
                        readAllData(node);//读数据，不用多解释吧
                    }
                }
                else {
                    if(node.nodeName == "H3"){//找到了h3
                        //console.log(i);
                        current_status = true;
                        //h3的架构在每个皮肤都是一样的：如果含有非ASCII字符，那么[0]是一个固定id的span，[1]是显示的文本；否则[0]是显示的文本。
                        cardPackName = node.childNodes[0].innerText == "" ? node.childNodes[1].innerText : node.childNodes[0].innerText;
                    }
                }
            }
            //Step 2.创建缓存
            var HydraTemp = document.getElementById("HydraTemp");
            for(var i = 0;i < DataCard.length;i++){
                var div = document.createElement('div');
                div.className = 'Card';
                div.innerHTML = DataCard[i].rawHTML;
                HydraTemp.appendChild(div);
            }

            //Step 3.创建选择器
            for (var key in DataSelector) {
                var value = DataSelector[key];
                value.currentList = [];//初始化
                var SelectorButton = document.getElementById("HydraSelector_" + key).childNodes[1];
                var list = (value.hasI18n === true) ? value.listI18n : value.list;
                for(var i = 0;i < value.list.length;i++){
                    var txt = list[i];
                    var button = document.createElement('span');
                    button.className = 'pd-button disabled';
                    button.innerHTML = txt;
                    SelectorButton.appendChild(button);
                }
                //if(value.type == "equal"){}
            }
            $("#HydraSelector .Buttons span.pd-button").click(function(){
                $(this).toggleClass("disabled");
                $(this).toggleClass("enabled");
                refresh();
            });

            //Step 4.刷新
            refresh();
		});
	});
});