做起来真是困难啊

languages/en.js

@@ -1,28 +1,32 @@
 const localTranslating = {
     webpage_title: `P&D ${teamsCount}P Formation Maker`,
-    title_blank: "Input Formation Title",
-    detail_blank: "Input Detail",
+    title_blank: `Input Formation Title`,
+    detail_blank: `Input Detail`,
     sort_name: {
-        sort_none: "Nope",
-        sort_id: "Cards Id",
-        sort_attrs : "Attribute",
-        sort_evoRootId: "Cards Evolution Root",
-        sort_evoRoot_Attrs : "Cards Evolution Root's Attribute",
-        sort_rarity: "Rarity",
-        sort_cost: "Cost",
-        sort_skillLv1: "Maximum Skill Turn",
-        sort_skillLvMax: "Minimum Skill Turn",
-        sort_hpMax110: "Max HP",
-        sort_atkMax110: "Max ATK",
-        sort_rcvMax110: "Max RCV",
-        sort_hpMax110_awoken: "Max HP (+Awoken)",
-        sort_atkMax110_awoken: "Max ATK (+Awoken)",
-        sort_rcvMax110_awoken: "Max RCV (+Awoken)",
-        sort_abilityIndex_awoken: "Maximum Weighted Ability Index (+Awakening)",
+        sort_none: `Nope`,
+        sort_id: `Cards Id`,
+        sort_attrs : `Attribute`,
+        sort_evoRootId: `Cards Evolution Root`,
+        sort_evoRoot_Attrs : `Cards Evolution Root's Attribute`,
+        sort_rarity: `Rarity`,
+        sort_cost: `Cost`,
+        sort_skillLv1: `Maximum Skill Turn`,
+        sort_skillLvMax: `Minimum Skill Turn`,
+        sort_hpMax110: `Max HP`,
+        sort_atkMax110: `Max ATK`,
+        sort_rcvMax110: `Max RCV`,
+        sort_hpMax110_awoken: `Max HP (+Awoken)`,
+        sort_atkMax110_awoken: `Max ATK (+Awoken)`,
+        sort_rcvMax110_awoken: `Max RCV (+Awoken)`,
+        sort_abilityIndex_awoken: `Maximum Weighted Ability Index (+Awakening)`,
     },
-    force_reload_data: "Force refresh data",
+    force_reload_data: `Force refresh data`,
     skill_parse: {
-        Unknown: "unknown skill",
+        unknown_skill_type: ()=>`Unknown skill type.`,
+		active_turns: (turns, element)=> [element,`, in ${turns} turns.`],
+        random_skills: (element)=>[`Activates these random skills:`, element],
+        delay: ()=> `Delays enemies' next move`,
+		mass_attack: ()=> `plus Mass Attack`,
     },
 }
 

languages/zh-CN.js

@@ -1,4 +1,13 @@
 document.title = `智龙迷城${teamsCount}人队伍图制作工具`;
+const localTranslating = {
+    skill_parse: {
+		unknown_skill_type: ()=>`未知的技能类型`,
+		active_turns: (turns, element)=>[`${turns}回合内，`, element],
+		random_skills: (element)=>[`随机执行以下技能：`, element],
+		delay: ()=> `将敌人的攻击延迟`,
+		mass_attack: ()=> `所有攻击变为全体攻击`,
+    },
+}
 
 //大数字缩短长度
 Number.prototype.bigNumberToString = function()

script-skill-parser.js

@@ -126,6 +126,23 @@ function skillParser(skillId)
 	return skills;
 }
 
+//返回flag里值为true的数组，如[1,4,7]
+function flags(num){
+	/*
+	return Array.from(new Array(32),(i,n)=>n).filter(n => num & (1 << n)); //性能太差
+	return new Array(32).fill(null).map((i,n)=>n).filter(n => num & (1 << n)); //性能比上者好，但还是不够快
+	*/
+	const arr = [];
+	for (let i = 0; i<32;i++)
+	{
+		if (num & (1<<i))
+		{
+			arr.push(i);
+		}
+	}
+	return arr;
+}
+
 const v = {
     percent: function(value) {
         return { kind: SkillValueKind.Percent, value: (value / 100) || 1 };
@@ -215,16 +232,16 @@ const p = {
         };
     },
     scaleAttrs: function (attrs, min, max, baseMul, bonusMul) {
-        return { kind: SkillPowerUpKind.ScaleAttributes, attrs: attrs ,...scale(min, max, baseMul, bonusMul) };
+        return { kind: SkillPowerUpKind.ScaleAttributes, attrs: attrs ,...this.scale(min, max, baseMul, bonusMul) };
     },
     scaleCombos: function (min, max, baseMul, bonusMul) {
-        return { kind: SkillPowerUpKind.ScaleCombos ,...scale(min, max, baseMul, bonusMul) };
+        return { kind: SkillPowerUpKind.ScaleCombos ,...this.scale(min, max, baseMul, bonusMul) };
     },
     scaleMatchLength: function (attrs, min, max, baseMul, bonusMul) {
-        return { kind: SkillPowerUpKind.ScaleMatchLength, attrs: attrs ,...scale(min, max, baseMul, bonusMul) };
+        return { kind: SkillPowerUpKind.ScaleMatchLength, attrs: attrs ,...this.scale(min, max, baseMul, bonusMul) };
     },
     scaleMatchAttrs: function (matches, min, max, baseMul, bonusMul) {
-        return { kind: SkillPowerUpKind.ScaleMatchAttrs, matches: matches ,...scale(min, max, baseMul, bonusMul) };
+        return { kind: SkillPowerUpKind.ScaleMatchAttrs, matches: matches ,...this.scale(min, max, baseMul, bonusMul) };
     },
     scaleCross: function (crosses) {
         return { kind: SkillPowerUpKind.ScaleCross, crosses: crosses.map(cross => ({ ...cross, mul: (cross.mul / 100) || 1 })) };
@@ -614,49 +631,71 @@ const parsers = {
 	},
 };
 
+function renderSkills(skills)
+{
+	const ul = document.createElement("ul");
+	ul.className = "card-skill-list";
+	skills.forEach(skill=>{
+		const li = ul.appendChild(document.createElement("li"));
+		li.className = skill.kind;
+		li.appendChild(renderSkill(skill));
+	});
+	return ul;
+}
 function renderSkill(skill)
 {
+	function appendToFragment(arg){
+		if (Array.isArray(arg))
+		{
+			arg.forEach(element=>appendToFragment(element));
+		}
+		else if (typeof arg == "string")
+		{
+			return fragment.appendChild(document.createTextNode(arg));
+		}
+		else
+		{
+			console.log("看看这是啥",arg);
+			return fragment.appendChild(arg);
+		}
+	}
 	const fragment = document.createDocumentFragment();
-	const txt = str=>fragment.appendChild(document.createTextNode(str));
 	if (typeof localTranslating == "undefined") return fragment;
 	const tsp = localTranslating.skill_parse;
 	switch (skill.kind) {
 		case SkillKinds.Unknown: {
-			txt(tsp.Unknown);
+			appendToFragment(tsp.unknown_skill_type());
+			break;
 		}
-		/*
 		case SkillKinds.ActiveTurns: {
-			const { turns, skill: actionSkill } = skill as Skill.ActiveTurns;
-			return <span className="CardSkill-skill">{renderSkill(skillactionSkill)} &times; {turns} turns</span>;
+			appendToFragment(tsp.active_turns(skill.turns, renderSkill(skill.skill)));
+			break;
 		}
 		case SkillKinds.RandomSkills: {
-			const { skills } = skill as Skill.RandomSkills;
-			return (
-				<>
-				<span className="CardSkill-skill">random skills:</span>
-				<ul className="CardSkill-item-list">
-					{skills.map((data, i) => <li key={i}>
-					<div className="CardSkill-skill-list">{data.map(renderSkillEntry)}</div>
-					</li>)}
-				</ul>
-				</>
-			);
+			const ul = document.createElement("ul");
+			ul.className = "random-active-skill";
+			skill.skills.forEach(subSkills=>{
+				const li = ul.appendChild(document.createElement("li"));
+				li.appendChild(renderSkills(subSkills));
+			});
+			appendToFragment(tsp.random_skills(ul));
+			break;
 		}
-
 		case SkillKinds.Delay: {
-		return (
-			<span className="CardSkill-skill">
-			<Asset assetId="status-delay" className="CardSkill-icon" title="Delay" />
-			</span>
-		);
+			const idoc = document.createElement("icon");
+			idoc.className = "icon-delay";
+			appendToFragment(idoc);
+			appendToFragment(tsp.delay());
+			break;
 		}
 		case SkillKinds.MassAttack: {
-		return (
-			<span className="CardSkill-skill">
-			<Asset assetId="status-mass-attack" className="CardSkill-icon" title="Mass attack" />
-			</span>
-		);
+			const idoc = document.createElement("icon");
+			idoc.className = "icon-mass-attack";
+			appendToFragment(idoc);
+			appendToFragment(tsp.mass_attack());
+			break;
 		}
+		/*
 		case SkillKinds.LeaderChange: {
 		return (
 			<span className="CardSkill-skill">
@@ -1051,10 +1090,10 @@ function renderSkill(skill)
 			</span>
 		);
 		}
-	*/
+		*/
 		default: {
-			console.log(skill, skill.kind);
-			txt(skill.kind);
+			console.log(skill.kind, skill);
+			appendToFragment(skill.kind);
 		}
 	}
 	return fragment;

script-universal_function.js

@@ -524,8 +524,9 @@ function cardN(id){
 //将怪物的文字介绍解析为HTML
 function descriptionToHTML(str)
 {
-	str = str.replace(/\n/ig,"<br>"); //换行
+	//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;

script.js

@@ -2716,14 +2716,13 @@ function editBoxChangeMonId(id) {
 	fragment = document.createDocumentFragment(); //创建节点用的临时空间
 	fragment.appendChild(skillBox);
 
-	skillTitle.innerHTML = descriptionToHTML(activeskill.name);
+	skillTitle.textContent = activeskill.name;
 	skillTitle.setAttribute("data-skillid", activeskill.id);
 	skillDetailOriginal.innerHTML = "";
 	skillDetailOriginal.appendChild(parseSkillDescription(activeskill));
 	skillDetailParsed.innerHTML = "";
-	skillParser(card.activeSkillId)
-		.map(parsedSkill => renderSkill(parsedSkill))
-		.forEach(node => skillDetailParsed.appendChild(node));
+	skillDetailParsed.appendChild(renderSkills(skillParser(card.activeSkillId)));
+
 	const t_maxLevel = card.overlay || card.types.includes(15) ? 1 : activeskill.maxLevel; //遇到不能升技的，最大等级强制为1
 	skillLevel.max = t_maxLevel;
 	skillLevel.value = t_maxLevel;
@@ -2743,14 +2742,12 @@ function editBoxChangeMonId(id) {
 	fragment = document.createDocumentFragment(); //创建节点用的临时空间
 	fragment.appendChild(lskillBox);
 
-	lskillTitle.innerHTML = descriptionToHTML(leaderSkill.name);
+	lskillTitle.textContent = leaderSkill.name;
 	lskillTitle.setAttribute("data-skillid", leaderSkill.id);
 	lskillDetailOriginal.innerHTML = "";
 	lskillDetailOriginal.appendChild(parseSkillDescription(leaderSkill));
 	lskillDetailParsed.innerHTML = "";
-	skillParser(card.leaderSkillId)
-		.map(parsedSkill => renderSkill(parsedSkill))
-		.forEach(node => lskillDetailParsed.appendChild(node));
+	lskillDetailParsed.appendChild(renderSkills(skillParser(card.leaderSkillId)));
 
 	rowLederSkill.appendChild(fragment);
 

style.css

@@ -79,7 +79,7 @@ body{
 	box-sizing: border-box;
 	padding: 1px;
 	margin: 0;
-	white-space: pre-wrap;
+	white-space: break-spaces;
 }
 
 .guide-mod .control-box>div.status
@@ -2039,6 +2039,11 @@ body:not(.solo) .awoken-icon[data-awoken-icon="64"]::after
 	color: black;
 	padding: 0 8px 6px 8px;
 	line-height: 25px;
+	white-space: break-spaces;
+}
+.skill-datail-original
+{
+	border-bottom: #9C743E solid 2px;
 }
 .skill-datail .spColor{
 	color: #ff3600;
@@ -2050,10 +2055,10 @@ body:not(.solo) .awoken-icon[data-awoken-icon="64"]::after
 .skill-datail .detail-search::before{
 	content: "🔍";
 }
-.skill-datail .random-active-skill{
+.random-active-skill{
 	padding-left: 1em;
 }
-.skill-datail .random-active-skill>.active-skill-li{
+.random-active-skill>li{
 	list-style: decimal;
 }