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

简单优化富文本的相关代码

This commit is contained in:
枫谷剑仙 2023-06-30 19:52:42 +08:00
parent 3eb5a7c119
commit d4ffe43f9e
5 changed files with 81 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
multi.html
View File

@ -783,13 +783,13 @@ var formation = new Formation(teamsCount,5);
</div>
</div>
<div id="rich-text-tools">
<button id="set-font-color"></button><input id="color-chooser" type="color" />
<button id="insert-card-avatar"></button>
<button id="insert-awoken-icon"></button>
<button id="insert-latent-icon"></button>
<button id="insert-type-icon"></button>
<button id="insert-orb-icon"></button>
<input type="checkbox" class="config-checkbox-ipt" id="siwtch-code-mode"><label class="config-checkbox-lbl" for="siwtch-code-mode"><div class="config-checkbox-lbl-cicle"></div></label>
<button id="set-font-color" title="Set Font Color"></button><input id="color-chooser" type="color" title="Choose Font Color" />
<button id="insert-card-avatar" title="Insert Card Avatar"></button>
<button id="insert-awoken-icon" title="Insert Awoken Icon"></button>
<button id="insert-latent-icon" title="Insert Latent Icon"></button>
<button id="insert-type-icon" title="Insert Type Icon"></button>
<button id="insert-orb-icon" title="Insert Orb Icon"></button>
<input type="checkbox" class="config-checkbox-ipt" id="siwtch-code-mode"><label class="config-checkbox-lbl" for="siwtch-code-mode" title="Code Mode"><div class="config-checkbox-lbl-cicle"></div></label>
</div>
<div class="edit-box display-none">
<div class="edit-box-title"><!--修改怪物--></div>

74
script-universal_function.js
View File

@ -867,27 +867,6 @@ function searchCollab(event) {
showSearch(Cards.filter(card => card.collabId == collabId));
return false;
}
function rgbToHex(str) { //RGB(A)颜色转换为HEX十六进制的颜色值
let res = /rgba?\((\d{1,3}),(\d{1,3}),(\d{1,3})(,([.\d]+))?\)/ig.exec(str.replace(/\s/g,''));
if (res) {
let [,r,g,b,a] = res;
let rgb = [r,g,b].map(s=>parseInt(s,10));
if (a) {
rgb.push(Math.round(Number(a) * 255));
}
return rgb.map(n=>n.toString(16).padStart(2,'0')).join('');
}
else if (res = /#([a-fA-F0-9]{6,8})/i.exec(str))
{
return res[1];
}
else if (str === "blue"){ //特殊翻译
return 'qs';
}
else {
return '000000';
}
}
//创建序号类图标
function createIndexedIcon(type, index) {
if (type == 'card') {//卡片头像
@ -927,58 +906,65 @@ function createIndexedIcon(type, index) {
//将怪物的文字介绍解析为HTML
function descriptionToHTML(str)
{
function formatParse(arr, reg, subMatchCount, returnFunc){
//const subMatchCount = returnFunc.length;
return arr.flatMap(item=>{
function formatParse(reg, subMatchCount, transFunc) {
//const subMatchCount = transFunc.length;
return function(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)));
newArr.push(transFunc(...subArr.slice(i + 1, i + subMatchCount + 1)));
}
}
return newArr;
} else {
return item;
}
});
};
}
let nodeArr = [str];
nodeArr = formatParse(nodeArr, /\^(\w+?)\^([^\^]+?)\^p/igm, 2,
(color, content)=>{
const sp = document.createElement("span");
sp.appendChild(descriptionToHTML(content))
if (/^[a-fA-F0-9]+$/g.test(color)) {
sp.style.color = `#${color}`;
} else if (/qs/i.test(color)) {
sp.style.color = `blue`;
}
return sp;
});
nodeArr = nodeArr.flatMap(formatParse(/\^(\w+?)\^([^\^]+?)\^p/igm, 2, fontcolorTrans)); //文字颜色
nodeArr = nodeArr.flatMap(formatParse(/\%\{([a-z]+)(\d+)\}/ig, 2, iconTrans)); //抛弃的老格式%{m1}
nodeArr = nodeArr.flatMap(formatParse(/\{(\w+)\.(\w+)\}/ig, 2, iconTrans)); //新格式{m.1}
function fontcolorTrans(color, content){
const sp = document.createElement("span");
sp.appendChild(descriptionToHTML(content))
if (/^[a-fA-F0-9]+$/g.test(color)) {
sp.style.color = `#${color}`;
} else if (/qs/i.test(color)) {
sp.style.color = `blue`;
} else {
sp.style.color = color;
}
return sp;
}
function iconTrans(type, id){
id = parseInt(id,10);
type = type.toLowerCase();
switch(type) {
case 'm':case 'M': { //卡片头像
case 'card':case 'm': { //卡片头像
return createIndexedIcon('card', id);
}
case 'a':case 'A': { //觉醒
case 'awoken':case 'a': { //觉醒
return createIndexedIcon('awoken', id);
}
case 't':case 'T': { //类型
case 'type':case 't': { //类型
return createIndexedIcon('type', id);
}
case 'o':case 'O': { //宝珠
case 'orb':case 'o': { //宝珠
return createIndexedIcon('orb', id);
}
case 'l':case 'L': { //潜觉
case 'latent':case 'l': { //潜觉
return createIndexedIcon('latent', id);
}
default: {
return `{${type}.${id}}`;
}
}
}
nodeArr = formatParse(nodeArr, /\%\{([a-z]+)(\d+)\}/ig, 2, iconTrans); //抛弃的老格式%{m1}
nodeArr = formatParse(nodeArr, /\{(\w+)\.(\w+)\}/ig, 2, iconTrans); //新格式{m.1}
return nodeArr.nodeJoin();
}
//默认的技能解释的显示行为

32
script.js
View File

@ -2502,7 +2502,14 @@ function initialize() {
//切换代码模式
siwtchCodeMode.onclick = function(){
if (this.checked) txtDetail.style.height = txtDetailDisplay.scrollHeight + "px";
if (this.checked) { //进入代码模式
txtDetail.style.height = txtDetailDisplay.scrollHeight + "px";
txtTitleDisplay.onblur();
txtDetailDisplay.onblur();
} else { //退出代码模式
txtTitle.onchange();
txtDetail.onchange();
}
formationBox.classList.toggle("edit-code", this.checked);
}
siwtchCodeMode.checked = false;
@ -2685,6 +2692,27 @@ function initialize() {
insertOrbIcon.onclick = showInsertIconList;
function richTextToCode(parentElement){
function rgbToHex(str) { //RGB(A)颜色转换为HEX十六进制的颜色值
let res = /rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*([.\d]+)\s*)?\)/ig.exec(str.replace(/\s/g,''));
if (res) {
let [,r,g,b,a] = res;
let rgb = [r,g,b].map(s=>parseInt(s,10));
if (a) { //将小数点的Alpha转成8位
rgb.push(Math.round(parseFloat(a) * 0xFF));
}
return rgb.map(n=>n.toString(16).padStart(2,'0')).join('');
}
else if (res = /#([a-fA-F0-9]{6,8})/i.exec(str))
{
return res[1];
}
else if (str === "blue"){ //特殊翻译
return 'qs';
}
else {
return str;
}
}
let code = [];
for (let node of parentElement.childNodes) {
if (node?.lastChild?.nodeName == "BR") node.lastChild.revome();
@ -2692,7 +2720,7 @@ function initialize() {
code.push(node.nodeValue);
continue;
} else if (node.nodeName == "FONT" && node.color || node.nodeName == "SPAN" && node.style.color) { //文字颜色
let colorStr = rgbToHex(node.color || node.style.color);
let colorStr = rgbToHex(node.nodeName == "FONT" && node.color || node.nodeName == "SPAN" && node.style.color);
code.push(`^${colorStr}^${richTextToCode(node)}^p`);
continue;
} else if (node.nodeName == "DIV") {

14
solo.html
View File

@ -619,13 +619,13 @@ var formation = new Formation(teamsCount,6);
</div>
</div>
<div id="rich-text-tools">
<button id="set-font-color"></button><input id="color-chooser" type="color" />
<button id="insert-card-avatar"></button>
<button id="insert-awoken-icon"></button>
<button id="insert-latent-icon"></button>
<button id="insert-type-icon"></button>
<button id="insert-orb-icon"></button>
<input type="checkbox" class="config-checkbox-ipt" id="siwtch-code-mode"><label class="config-checkbox-lbl" for="siwtch-code-mode"><div class="config-checkbox-lbl-cicle"></div></label>
<button id="set-font-color" title="Set Font Color"></button><input id="color-chooser" type="color" title="Choose Font Color" />
<button id="insert-card-avatar" title="Insert Card Avatar"></button>
<button id="insert-awoken-icon" title="Insert Awoken Icon"></button>
<button id="insert-latent-icon" title="Insert Latent Icon"></button>
<button id="insert-type-icon" title="Insert Type Icon"></button>
<button id="insert-orb-icon" title="Insert Orb Icon"></button>
<input type="checkbox" class="config-checkbox-ipt" id="siwtch-code-mode"><label class="config-checkbox-lbl" for="siwtch-code-mode" title="Code Mode"><div class="config-checkbox-lbl-cicle"></div></label>
</div>
<div class="edit-box display-none">
<div class="edit-box-title"><!--修改怪物--></div>

14
triple.html
View File

@ -1709,13 +1709,13 @@ var formation = new Formation(teamsCount,6);
</div>
</div>
<div id="rich-text-tools">
<button id="set-font-color"></button><input id="color-chooser" type="color" />
<button id="insert-card-avatar"></button>
<button id="insert-awoken-icon"></button>
<button id="insert-latent-icon"></button>
<button id="insert-type-icon"></button>
<button id="insert-orb-icon"></button>
<input type="checkbox" class="config-checkbox-ipt" id="siwtch-code-mode"><label class="config-checkbox-lbl" for="siwtch-code-mode"><div class="config-checkbox-lbl-cicle"></div></label>
<button id="set-font-color" title="Set Font Color"></button><input id="color-chooser" type="color" title="Choose Font Color" />
<button id="insert-card-avatar" title="Insert Card Avatar"></button>
<button id="insert-awoken-icon" title="Insert Awoken Icon"></button>
<button id="insert-latent-icon" title="Insert Latent Icon"></button>
<button id="insert-type-icon" title="Insert Type Icon"></button>
<button id="insert-orb-icon" title="Insert Orb Icon"></button>
<input type="checkbox" class="config-checkbox-ipt" id="siwtch-code-mode"><label class="config-checkbox-lbl" for="siwtch-code-mode" title="Code Mode"><div class="config-checkbox-lbl-cicle"></div></label>
</div>
<div class="edit-box display-none">
<div class="edit-box-title"><!--修改怪物--></div>