mapaler
/
PADDashFormation
1
0
Fork 1
Code Issues Pull Requests Projects Releases Wiki Activity

第一阶段，让标题和说明变成dom

This commit is contained in:
枫谷剑仙 2021-12-16 17:47:05 +08:00
parent 683c361d8e
commit c8994daa45
6 changed files with 103 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
multi.html
View File

@ -1167,13 +1167,7 @@ var formation = new Formation(teamsCount,5);
</div>
<template id="template-card-a">
<a class="monster" target="_blank" data-cardid="" data-cards-pic-idx="" data-cards-pic-x="" data-cards-pic-y="" title="">
<div class="property" data-property=""></div>
<div class="subproperty" data-property=""></div>
<div class="id"></div>
<div class="awoken-count-num"></div>
<div class="count-in-box"><span class="same-id"></span><span class="evo-tree"></span></div>
</a>
<a class="monster" target="_blank" data-cardid="" data-cards-pic-idx="" data-cards-pic-x="" data-cards-pic-y="" title=""><div class="property" data-property=""></div><div class="subproperty" data-property=""></div><div class="id"></div><div class="awoken-count-num"></div><div class="count-in-box"><span class="same-id"></span><span class="evo-tree"></span></div></a>
</template>
</div>
<svg id="interchange-line" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" height="100%" width="100%" style="display:none;">

2
script-skill-parser.js
View File

@ -1447,7 +1447,7 @@ Array.prototype.nodeJoin = function(separator)
const frg = document.createDocumentFragment();
this.forEach((item, idx, arr)=>{
frg.ap(item);
if (idx < (arr.length - 1) && separator != null)
if (idx < (arr.length - 1) && separator !== undefined)
frg.ap(separator instanceof Node ? separator.cloneNode(true) : separator);
});
return frg;

92
script-universal_function.js
View File

@ -771,6 +771,15 @@ function cardN(id) {
changeid({ id: id }, monDom);
return monOuterDom;
}
//返回文字说明内怪物Card的纯HTML
function cardNClick() {
const id = parseInt(this.getAttribute("data-cardid"), 10);
editBox.show();
editBox.mid = id;
editBoxChangeMonId(id);
//showSearch([id]);
return false;
}
//技能介绍里的头像的切换
function changeToIdInSkillDetail(event) {
const settingBox = editBox.querySelector(".setting-box");
@ -790,18 +799,89 @@ function searchCollab(event) {
//将怪物的文字介绍解析为HTML
function descriptionToHTML(str)
{
function formatParse(arr, reg, subMatchCount, returnFunc){
//const subMatchCount = returnFunc.length;
return arr.flatMap(item=>{
if (typeof item == "string") {
const subArr = item.split(new RegExp(reg));
const newArr = [];
for (let i = 0; i < subArr.length; i += (subMatchCount+1)) {
newArr.push(subArr[i]);
if (subArr[i+subMatchCount] !== undefined) {
newArr.push(returnFunc(...[subArr.slice(i + 1, i + subMatchCount + 1)]));
}
}
return newArr;
} else {
return item;
}
});
}
let nodeArr = [str];
nodeArr = formatParse(nodeArr, /\^([a-fA-F0-9]+?)\^([^\^]+?)\^p/igm, 2,
(color, content)=>{
const sp = document.createElement("span");
sp.style.color = `#${color}`;
sp.textContent = content;
return sp;
});
nodeArr = formatParse(nodeArr, /\%\{m([0-9]{1,4})\}/g, 1,
(id)=>{
const avatar = cardN(parseInt(id,10));
avatar.monDom.onclick = cardNClick;
return avatar;
});
/* arr = arr.flatMap(item=>{
if (typeof item == "string") {
const subArr = item.split(/\^([a-fA-F0-9]+?)\^([^\^]+?)\^p/igm);
const newArr = [];
for (let i = 0; i < subArr.length; i += 3) {
newArr.push(subArr[i]);
if (subArr[i+2] !== undefined) {
const sp = document.createElement("span");
sp.style.color = `#${subArr[i+1]}`;
sp.textContent = subArr[i+2];
newArr.push(sp);
}
}
return newArr;
} else {
return item;
}
});
arr = arr.flatMap(item=>{
if (typeof item == "string") {
const subArr = item.split(/\%\{m([0-9]{1,4})\}/g);
const newArr = [];
for (let i = 0; i < subArr.length; i += 2) {
newArr.push(subArr[i]);
if (subArr[i+1] !== undefined) {
const avatar = cardN(parseInt(subArr[i+1],10));
avatar.monDom.onclick = cardNClick;
newArr.push(avatar);
}
}
return newArr;
} else {
return item;
}
});*/
//str = str.replace(/\n/ig,"<br>"); //换行
//str = str.replace(/ /ig,"&nbsp;"); //换行
str = str.replace(/\^([a-fA-F0-9]+?)\^([^\^]+?)\^p/igm,'<span style="color:#$1;">$2</span>'); //文字颜色
str = str.replace(/\%\{m([0-9]{1,4})\}/g,function (str, p1, offset, s){return cardN(parseInt(p1,10)).outerHTML;}); //怪物头像
return str;
//str = str.replace(/\^([a-fA-F0-9]+?)\^([^\^]+?)\^p/igm,'<span style="color:#$1;">$2</span>'); //文字颜色
//str = str.replace(/\%\{m([0-9]{1,4})\}/g,function (str, p1, offset, s){return cardN(parseInt(p1,10)).outerHTML;}); //怪物头像
return nodeArr.nodeJoin();
}
//默认的技能解释的显示行为
function parseSkillDescription(skill) {
const span = document.createElement("span");
span.innerHTML = descriptionToHTML(skill.description);
return span;
//const span = document.createElement("span");
//span.innerHTML = descriptionToHTML(skill.description);
return descriptionToHTML(skill.description);
}
//大数字缩短长度，默认返回本地定义字符串
function parseBigNumber(number) {

18
script.js
View File

@ -1973,7 +1973,9 @@ function initialize(event) {
const txtDetailDisplay = detailBox.querySelector(".detail-display");
txtTitle.onchange = function() {
formation.title = this.value;
txtTitleDisplay.innerHTML = descriptionToHTML(this.value);
//txtTitleDisplay.innerHTML = descriptionToHTML(this.value);
txtTitleDisplay.innerHTML = '';
txtTitleDisplay.appendChild(descriptionToHTML(this.value));
let titleStr = txtTitleDisplay.textContent.trim();
document.title = titleStr.length > 0 ? `${titleStr.trim()} - ${localTranslating.webpage_title}` : localTranslating.webpage_title;
creatNewUrl();
@ -1984,7 +1986,9 @@ function initialize(event) {
};
txtDetail.onchange = function() {
formation.detail = this.value;
txtDetailDisplay.innerHTML = descriptionToHTML(this.value);
//txtDetailDisplay.innerHTML = descriptionToHTML(this.value);
txtDetailDisplay.innerHTML = '';
txtDetailDisplay.appendChild(descriptionToHTML(this.value));
creatNewUrl();
};
txtDetail.onblur = function() {
@ -3165,7 +3169,7 @@ function initialize(event) {
const monEditAwokens = Array.from(monEditAwokensRow.querySelectorAll(".awoken-ul input[name='awoken-number']"));
function checkAwoken() {
const card = Cards[editBox.mid];
const card = Cards[editBox.mid ?? 0];
const value = parseInt(this.value, 10);
awokenCountLabel.setAttribute(dataAttrName, value);
toggleDomClassName(value > 0 && value == card.awakenings.length, "full-awoken", awokenCountLabel);
@ -4152,10 +4156,14 @@ function refreshAll(formationData) {
txtDetail.value = formationData.detail || "";
const txtTitleDisplay = titleBox.querySelector(".title-display");
const txtDetailDisplay = detailBox.querySelector(".detail-display");
txtTitleDisplay.innerHTML = descriptionToHTML(txtTitle.value);
//txtTitleDisplay.innerHTML = descriptionToHTML(txtTitle.value);
txtTitleDisplay.innerHTML = '';
txtTitleDisplay.appendChild(descriptionToHTML(txtTitle.value));
let titleStr = txtTitleDisplay.textContent.trim();
document.title = titleStr.length > 0 ? `${titleStr.trim()} - ${localTranslating.webpage_title}` : localTranslating.webpage_title;
txtDetailDisplay.innerHTML = descriptionToHTML(txtDetail.value);
//txtDetailDisplay.innerHTML = descriptionToHTML(txtDetail.value);
txtDetailDisplay.innerHTML = '';
txtDetailDisplay.appendChild(descriptionToHTML(txtDetail.value));
toggleDomClassName(!txtTitle.value.length, "edit", titleBox);
toggleDomClassName(!txtDetail.value.length, "edit", detailBox);

8
solo.html
View File

@ -1025,13 +1025,7 @@ var formation = new Formation(teamsCount,6);
</div>
<template id="template-card-a">
<a class="monster" target="_blank" data-cardid="" data-cards-pic-idx="" data-cards-pic-x="" data-cards-pic-y="" title="">
<div class="property" data-property=""></div>
<div class="subproperty" data-property=""></div>
<div class="id"></div>
<div class="awoken-count-num"></div>
<div class="count-in-box"><span class="same-id"></span><span class="evo-tree"></span></div>
</a>
<a class="monster" target="_blank" data-cardid="" data-cards-pic-idx="" data-cards-pic-x="" data-cards-pic-y="" title=""><div class="property" data-property=""></div><div class="subproperty" data-property=""></div><div class="id"></div><div class="awoken-count-num"></div><div class="count-in-box"><span class="same-id"></span><span class="evo-tree"></span></div></a>
</template>
</div>
<svg id="interchange-line" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" height="100%" width="100%" style="display:none;">

8
triple.html
View File

@ -1966,13 +1966,7 @@ var formation = new Formation(teamsCount,6);
</div>
<template id="template-card-a">
<a class="monster" target="_blank" data-cardid="" data-cards-pic-idx="" data-cards-pic-x="" data-cards-pic-y="" title="">
<div class="property" data-property=""></div>
<div class="subproperty" data-property=""></div>
<div class="id"></div>
<div class="awoken-count-num"></div>
<div class="count-in-box"><span class="same-id"></span><span class="evo-tree"></span></div>
</a>
<a class="monster" target="_blank" data-cardid="" data-cards-pic-idx="" data-cards-pic-x="" data-cards-pic-y="" title=""><div class="property" data-property=""></div><div class="subproperty" data-property=""></div><div class="id"></div><div class="awoken-count-num"></div><div class="count-in-box"><span class="same-id"></span><span class="evo-tree"></span></div></a>
</template>
</div>
<svg id="interchange-line" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" height="100%" width="100%" style="display:none;">