显示原理

GGGGS的显示原理很简单。

---

一、数据库存储关键信息

// .\js\database.js
class Character {
    name;//角色识别名（不是英文名）
    star;//角色星数
    pfile;//Charaicon对应文件路径
    signature;//角色称号
    element;//角色元素
    nameChs;//角色简体中文名
    /**
     * 
     * @param {String} name 
     * @param {Number} star 
     * @param {String} signature
     */
    constructor(name, star, signature, element, nameChs) {
        this.name = name;
        this.star = star;
        this.pfile = '.\\img\\p_' + this.name + '.png';
        this.signature = signature;
        this.element = element;
        this.nameChs = nameChs;
    }
}

构造函数能方便的登录一个角色的所有信息。在这之后，数组CHARACTER_LIST利用new Character(...)构造了所有角色对象。

二、利用识别名寻找角色对象

// .\js\database.js
var characterMap = {};
for (var i = 0; i < CHARACTER_LIST.length; i++) {
    var character = CHARACTER_LIST[i];
    characterMap[character.name] = character;
}

// .\js\core.js
/**
 * 通过角色识别名获取角色对象。
 * @param {String} characterName 
 * @returns 角色(Character)类型的值，若未找到则返回false。
 */
function findCharacter(characterName) {
    var _chara = characterMap[characterName];
    return _chara;
}

由此，识别名与数组CHARACTER_LIST建立了密切联系。外部代码可通过函数findCharacter()找到对应的角色，从而获取该角色的一切信息。

三、卡片样式与角色信息建立联系

利用CSS的类选择器，对卡片进行分类，并对每一个类分别设置样式。
根据元素分成7类，根据星级分成2类。

/* .\css\card.css */
.cryo {
}

.dendro {
}

.hydro {
}

.electro {
}

.geo {
}

.pyro {
}

.anemo {
}

.starR {
}

.starS {
}

四、利用角色对象构建卡片

利用函数findCharacter()找到对应角色，然后查询该角色的信息，并将角色信息、卡片div的class属性与.\css\card.css三者对应，最终构建出卡片。

// .\js\card.js
/**
 * 制造单个卡片
 * @param {Character} character 【角色类对象】角色
 * @param {Element} destination 【元素类对象】放置目的地
 * @returns 
 */
function initializeCard(character, destination) {
    var _chara = character;
    var _card = document.createElement("div");
    _card.classList.add("card");
    _card.classList.add(extractValue(_chara.element, ELEMENT_NUMBER, ELEMENT_NAME));
    _card.classList.add("star" + extractValue(_chara.star, STAR_NUMBER, STAR_NAME));
    var _charaicon = document.createElement("img");
    _charaicon.src = _chara.pfile;
    _card.appendChild(_charaicon);
    var _title = document.createElement("p");
    _title.innerHTML = _chara.nameChs;
    _card.appendChild(_title);
    var elementChs = extractValue(_chara.element, ELEMENT_NUMBER, ELEMENT_NAMECHS);
    _card.title = _chara.star + "星【" + elementChs + "】 “" + _chara.signature + "” " + _chara.nameChs;
    _card.id = "card_" + _chara.name;
    _card.onclick = function () {
        moveCard(this);
    };
    var parentNode = destination;
    parentNode.appendChild(_card);
}