增加说明高级代码

languages/en.css

@@ -1,9 +1,12 @@
 @charset "utf-8";
 .status.loading-mon-info .text::before{
-	content: "Please wait while the monster data is being loaded.";
+	content: "Loading monster data, please wait...";
 }
 .status.loading-skill-info .text::before{
-	content: "Please wait while the skills data is being loaded.";
+	content: "Loading skill data, please wait...";
+}
+.status.prepare-cauture .text::before{
+	content: "Preparing a screenshot, please wait...";
 }
 .delay .monster::before{
 	content: "Prevent\A Delay";
@@ -196,6 +199,9 @@
 .control-box .btn-clear-data::before{
 	content: "🗑️Clear data";
 }
+.control-box .btn-capture::before{
+	content: "📷Screenshot";
+}
 .control-box .btn-swap-AB-team::before{
 	content: "🔄Swap AB Team";
 }

languages/ja.css

@@ -5,6 +5,9 @@
 .status.loading-skill-info .text::before{
 	content: "スキル データを読み込んでいます。";
 }
+.status.prepare-cauture .text::before{
+	content: "スクリーンショットを準備しています。";
+}
 .delay .monster::before{
 	content: "遅 延\A対 策";
 }
@@ -189,6 +192,9 @@
 .control-box .btn-clear-data::before{
 	content: "🗑️データの消去";
 }
+.control-box .btn-capture::before{
+	content: "📷スクリーンショット";
+}
 .control-box .btn-swap-AB-team::before{
 	content: "🔄交換ABチーム";
 }

languages/ko.css

@@ -5,6 +5,9 @@
 .status.loading-skill-info .text::before{
 	content: "기술 데이터를 로드 하 고 있습니다.";
 }
+.status.prepare-cauture .text::before{
+	content: "스크린 샷을 준비 하 고 있습니다.";
+}
 .delay .monster::before{
 	content: "지 연\A방 지";
 }
@@ -189,6 +192,9 @@
 .control-box .btn-clear-data::before{
 	content: "🗑️데이터 지우기";
 }
+.control-box .btn-capture::before{
+	content: "📷스크린샷";
+}
 .control-box .btn-swap-AB-team::before{
 	content: "🔄교환 AB 팀";
 }

languages/zh-CN.js

@@ -33,22 +33,6 @@ function parseSkillDescription(skill)
 	function typeN(i){return typeName[i || 0] || ("未知类型" + i);}
 	//返回觉醒名
 	function awokenN(i){return awokenName[(i || 0)-1] || ("未知觉醒" + i);}
-	//返回怪物名
-	function cardN(id){
-		let card = Cards[id || 0];
-		if (!card)
-		{
-			return "没有该宠物 " + id;
-		}else
-		{
-			const monOuterDom = document.createElement("span");
-			monOuterDom.className = "detail-mon";
-			const monDom = createCardA(id);
-			monOuterDom.appendChild(monDom);
-			changeid({id:id},monDom);
-			return monOuterDom.outerHTML;
-		}
-	}
 	//从二进制的数字中获得布尔值数组
 	function getBooleanFromBinary(num,reverse=true)
 	{	/*num是输入的数字，2的N次方在2进制下表示1后面跟着N个0。

languages/zh-TW.css

@@ -1,9 +1,12 @@
 @charset "utf-8";
 .status.loading-mon-info .text::before{
-	content: "正在載入怪物數據，請稍候。";
+	content: "正在載入怪物數據，請稍候……";
 }
 .status.loading-skill-info .text::before{
-	content: "正在載入技能数据，请稍候。";
+	content: "正在載入技能数据，请稍候……";
+}
+.status.prepare-cauture .text::before{
+	content: "正在准備截圖，請稍後……";
 }
 .help-link::before{
 	content: "幫助和提示";
@@ -195,6 +198,9 @@
 .control-box .btn-clear-data::before{
 	content: "🗑️清除數據";
 }
+.control-box .btn-capture::before{
+	content: "📷截圖";
+}
 .control-box .btn-swap-AB-team::before{
 	content: "🔄交換AB隊";
 }

multi.html

@@ -39,7 +39,7 @@ var formation = new Formation(teamsCount,5);
 		<div class="status"><span class="icon"></span><span class="text"></span></div>
 	</div>
 	<div class="formation-box">
-		<div class="title-box"><input type="text" class="title" placeholder="输入队伍标题" /></div>
+		<div class="title-box"><input type="text" class="title" placeholder="输入队伍标题" /><h1 class="title-display"></h1></div>
 		<div class="formation-total-info"><div class="tIf-total-hp"></div></div>
 		<ul class="teams">
 			<li class="team-bigbox team-1 show-team-name-right">
@@ -429,7 +429,7 @@ var formation = new Formation(teamsCount,5);
 				<li class="awoken-count display-none"><span class="awoken-icon awoken-55"></span><span class="count"></span></li><!--防封条-->
 			</ul>
 		</div>
-		<div class="detail-box"><textarea class="detail" placeholder="输入说明"></textarea></div>
+		<div class="detail-box"><textarea class="detail" placeholder="输入说明"></textarea><div class="detail-display"></div></div>
 	</div>
 	<div class="edit-box display-none">
 		<div class="edit-box-title"><!--修改怪物--></div>

script.js

@@ -497,19 +497,45 @@ function initialize()
 	monstersList.appendChild(fragment);
 
 	//标题和介绍文本框
-	const txtTitle = formationBox.querySelector(".title-box .title");
-	const txtDetail = formationBox.querySelector(".detail-box .detail");
+	const titleBox = formationBox.querySelector(".title-box");
+	const detailBox = formationBox.querySelector(".detail-box");
+	const txtTitle = titleBox.querySelector(".title");
+	const txtDetail = detailBox.querySelector(".detail");
+	const txtTitleDisplay = titleBox.querySelector(".title-display");
+	const txtDetailDisplay = detailBox.querySelector(".detail-display");
 	txtTitle.onchange = function(){
 		formation.title = this.value;
+		//txtTitleDisplay.innerHTML = "";
+		//txtTitleDisplay.appendChild(document.createTextNode(this.value));
+		txtTitleDisplay.innerHTML = descriptionToHTML(this.value);
 		creatNewUrl();
 	};
+	txtTitle.onblur = function(){
+		titleBox.classList.remove("edit");
+	};
 	txtDetail.onchange = function(){
 		formation.detail = this.value;
+		/*txtDetailDisplay.innerHTML = "";
+		const txtDetailLines = this.value.split("\n");
+		txtDetailLines.forEach((line,idx)=>{
+			if (idx>0) txtDetailDisplay.appendChild(document.createElement("br"));
+			txtDetailDisplay.appendChild(document.createTextNode(line));
+		});*/
+		txtDetailDisplay.innerHTML = descriptionToHTML(this.value);
 		creatNewUrl();
 	};
 	txtDetail.onblur = function(){
-		this.style.height=this.scrollHeight+"px";
+		detailBox.classList.remove("edit");
+		this.style.height = txtDetailDisplay.scrollHeight+"px";
 	};
+	txtTitleDisplay.onclick = function(){
+		titleBox.classList.add("edit");
+		txtTitle.focus();
+	}
+	txtDetailDisplay.onclick = function(){
+		detailBox.classList.add("edit");
+		txtDetail.focus();
+	}
 
 	for (let ti=0,ti_len=formationBox.querySelectorAll(".team-bigbox").length;ti<ti_len;ti++)
 	{
@@ -1794,6 +1820,18 @@ function refreshAll(formationData){
 	const txtDetail = detailBox.querySelector(".detail");
 	txtTitle.value = formationData.title || "";
 	txtDetail.value = formationData.detail || "";
+	const txtTitleDisplay = titleBox.querySelector(".title-display");
+	const txtDetailDisplay = detailBox.querySelector(".detail-display");
+	txtTitleDisplay.innerHTML = descriptionToHTML(txtTitle.value);
+	txtDetailDisplay.innerHTML = descriptionToHTML(txtDetail.value);
+	/*txtTitleDisplay.innerHTML = "";
+	txtTitleDisplay.appendChild(document.createTextNode(txtTitle.value));
+	txtDetailDisplay.innerHTML = "";
+	const txtDetailLines = txtDetail.value.split("\n");
+	txtDetailLines.forEach((line,idx)=>{
+		if (idx>0) txtDetailDisplay.appendChild(document.createElement("br"));
+		txtDetailDisplay.appendChild(document.createTextNode(line));
+	});*/
 	
 	teamBigBoxs.forEach((teamBigBox,teamNum)=>{
 		const teamBox = teamBigBox.querySelector(".team-box");

solo.html

@@ -38,7 +38,7 @@ var formation = new Formation(teamsCount,6);
 		<div class="status"><span class="icon"></span><span class="text"></span></div>
 	</div>
 	<div class="formation-box">
-		<div class="title-box"><input type="text" class="title" placeholder="输入队伍标题" /></div>
+		<div class="title-box"><input type="text" class="title" placeholder="输入队伍标题" /><h1 class="title-display"></h1></div>
 		<ul class="teams">
 			<li class="team-bigbox team-1">
 				<ul class="team-badge">
@@ -377,7 +377,7 @@ var formation = new Formation(teamsCount,6);
 				</div>
 			</li>
 		</ul>
-		<div class="detail-box"><textarea class="detail" placeholder="输入说明"></textarea></div>
+		<div class="detail-box"><textarea class="detail" placeholder="输入说明"></textarea><div class="detail-display"></div></div>
 	</div>
 	<div class="edit-box display-none">
 		<div class="edit-box-title"><!--修改怪物--></div>

style.css

@@ -40,27 +40,51 @@ body{
 .help-link::before{
 	content: "Help & Tips";
 }
-.title{
+.title,
+.title-display
+{
 	font-size: 2em;
 	font-weight: bold;
 }
-.detail{
+.detail,
+.detail-display
+{
 	min-height: 100px;
 	font-size: 1.5em;
-	font-family: "Microsoft Yahei","Source Han Sans",Arial, Helvetica, sans-serif, "Malgun Gothic", "맑은 고딕", "Gulim", AppleGothic;
 }
-.title,.detail{
+.title,
+.detail,
+.title-display,
+.detail-display
+{
+	font-family: "Microsoft Yahei","Source Han Sans",Arial, Helvetica, sans-serif, "Malgun Gothic", "맑은 고딕", "Gulim", AppleGothic;
 	width:100%;
 	border: none;
 	background: none;
 	box-sizing: border-box;
 	padding: 1px;
+	margin: 0;
 }
 .title:focus,.detail:focus{
 	border: black solid 1px;;
 	background-color: #eee;
 	padding: 0;
 }
+.title,
+.detail
+{
+	display: none;
+}
+.edit .title,
+.edit .detail
+{
+	display: block;
+}
+.edit .title-display,
+.edit .detail-display
+{
+	display: none;
+}
 .status{
 	line-height: 16px;
 }
@@ -609,28 +633,43 @@ ul{
 }
 .edit-box .setting-box .row-mon-id .evo-card-list li,
 .edit-box .search-box .search-mon-list li,
-.edit-box .setting-box .skill-box .detail-mon{
+.detail-mon{
 	display: inline-block;
 	vertical-align: top; 
 	top: 0;
-	width: 78px;
-	height: 80px;
+	width: 80px;
+	height: 78px;
 }
-.edit-box .setting-box .skill-box .detail-mon{
+.detail-mon{
 	vertical-align: bottom;
 }
 .edit-box .setting-box .row-mon-id .evo-card-list .monster,
 .edit-box .search-box .search-mon-list .monster,
-.edit-box .setting-box .skill-box .detail-mon .monster{
+.detail-mon .monster{
 	float: none;
-	transform: scale(0.75) translate(-13px,-13px);
+	transform: scale(0.75) translate(-16px,-16px);
 }
 .edit-box .setting-box .row-mon-id .evo-card-list .monster .id,
 .edit-box .search-box .search-mon-list .monster .id,
-.edit-box .setting-box .skill-box .detail-mon .monster .id{
+.detail-mon .monster .id{
 	bottom: 5px;
 	font-size: 20px;
 }
+
+.detail-box .detail-mon{
+	width: 50px;
+	height: 50px;
+}
+.detail-box .detail-mon .monster{
+	transform: scale(0.5) translate(-58px,-58px);
+}
+.detail-box .detail-mon .monster .id{
+	font-weight: bold;
+	font-size: 23px;
+}
+.detail-box .detail-mon .monster .id::before {
+    font-size: 15px;
+}
 /*.setting-box .row-mon-id .open-search::before{
 	content: "搜索怪物";
 }

triple.html

@@ -22,6 +22,12 @@ var formation = new Formation(teamsCount,6);
 	width: 756px;
 	min-width: 756px;
 }
+.team-bigbox{
+	border-top: 1px solid gray;
+}
+.team-bigbox:first-of-type{
+	border-top: none;
+}
 </style>
 </head>
 
@@ -45,7 +51,7 @@ var formation = new Formation(teamsCount,6);
 		<div class="status"><span class="icon"></span><span class="text"></span></div>
 	</div>
 	<div class="formation-box">
-		<div class="title-box"><input type="text" class="title" placeholder="输入队伍标题" /></div>
+		<div class="title-box"><input type="text" class="title" placeholder="输入队伍标题" /><h1 class="title-display"></h1></div>
 		<ul class="teams">
 			<li class="team-bigbox team-1 show-team-name-left">
 				<div class="team-total-info"><div class="tIf-total-hp"></div><div class="tIf-total-rcv"></div></div>
@@ -1008,7 +1014,7 @@ var formation = new Formation(teamsCount,6);
 				</div>
 			</li>
 		</ul>
-		<div class="detail-box"><textarea class="detail" placeholder="输入说明"></textarea></div>
+		<div class="detail-box"><textarea class="detail" placeholder="输入说明"></textarea><div class="detail-display"></div></div>
 	</div>
 	<div class="edit-box display-none">
 		<div class="edit-box-title"><!--修改怪物--></div>

universal_function.js

@@ -336,10 +336,33 @@ function createCardA(id)
 //将怪物的文字介绍解析为HTML
 function descriptionToHTML(str)
 {
-	str = str.replace("\n","<br>");
-	str = str.replace(/\^(\w+)\^(.+)\^p/igm,'<span style="color:#$1;">$2</span>');
+	str = str.replace(/\n/igm,"<br>");
+	str = str.replace(/\^([a-fA-F0-9]{6})\^([^\^]+)\^p/igm,'<span style="color:#$1;">$2</span>');
+	let monReg = /\%\{m([0-9]{1,4})\}/igm;
+	let monRegRes;
+
+	while((monRegRes = monReg.exec(str))!=null) {
+		str = str.replace(monRegRes[0],cardN(parseInt(monRegRes[1])));
+	}
+	//str = str.replace(/\%\{m([0-9]{1,4})\}/igm,cardN(`$1`));
 	return str;
 }
+//返回怪物名
+function cardN(id){
+	let card = Cards[id || 0];
+	if (!card)
+	{
+		return "没有该宠物 " + id;
+	}else
+	{
+		const monOuterDom = document.createElement("span");
+		monOuterDom.className = "detail-mon";
+		const monDom = createCardA(id);
+		monOuterDom.appendChild(monDom);
+		changeid({id:id},monDom);
+		return monOuterDom.outerHTML;
+	}
+}
 //默认的技能解释的显示行为
 function parseSkillDescription(skill)
 {