增加排序功能

languages/en.css

@@ -269,6 +269,15 @@
 .search-box .include-super-awoken-label::after{
 	content: "Including Super Awoken";
 }
+.search-box .sort-div::before{
+	content: "Sort by:";
+}
+.search-box .sort-reverse-label::after{
+	content: "Same";
+}
+.search-box #sort-reverse:checked+ .sort-reverse-label::after{
+	content: "Reverse";
+}
 .attrs .attr-all::before{
 	content: "All";
 }

languages/en.js

@@ -1,3 +1,12 @@
-document.title = `P&D ${teamsCount}P Formation Maker`;
+const localTranslating = {
-document.body.querySelector(".formation-box .title-box .title").placeholder = "Input Formation Title";
+    webpage_title: `P&D ${teamsCount}P Formation Maker`,
-document.body.querySelector(".formation-box .detail-box .detail").placeholder = "Input Detail";
+    title_blank: "Input Formation Title",
+    detail_blank: "Input Detail",
+    sort_name:{
+        sort_none: "Nope",
+        sort_id: "Cards Id",
+        sort_evoRootId: "Cards Evolution Root",
+    },
+}
+
+localisation(localTranslating);

languages/ja.css

@@ -262,6 +262,15 @@
 .search-box .include-super-awoken-label::after{
 	content: "超覚醒を含む";
 }
+.search-box .sort-div::before{
+	content: "並べ替え:";
+}
+.search-box .sort-reverse-label::after{
+	content: "正序";
+}
+.search-box #sort-reverse:checked+ .sort-reverse-label::after{
+	content: "逆序";
+}
 .attrs .attr-all::before{
 	content: "無制限";
 }

languages/ja.js

@@ -1,3 +1,12 @@
-document.title = `パズル＆ドラゴンズ${teamsCount}人のチーム図作成ツール`;
+const localTranslating = {
-document.body.querySelector(".formation-box .title-box .title").placeholder = "入力タイトル";
+    webpage_title: `パズル＆ドラゴンズ${teamsCount}人のチーム図作成ツール`,
-document.body.querySelector(".formation-box .detail-box .detail").placeholder = "入力詳細";
+    title_blank: "入力タイトル",
+    detail_blank: "入力詳細",
+    sort_name:{
+        sort_none: "Nope",
+        sort_id: "Cards Id",
+        sort_evoRootId: "Cards Evolution Root",
+    },
+}
+
+localisation(localTranslating);

languages/ko.css

@@ -262,6 +262,15 @@
 .search-box .include-super-awoken-label::after{
 	content: "슈퍼 각성 포함";
 }
+.search-box .sort-div::before{
+	content: "정렬:";
+}
+.search-box .sort-reverse-label::after{
+	content: "양의";
+}
+.search-box #sort-reverse:checked+ .sort-reverse-label::after{
+	content: "역순";
+}
 .attrs .attr-all::before{
 	content: "무제한";
 }

languages/ko.js

@@ -1,3 +1,12 @@
-document.title = `퍼즐앤드래곤 ${teamsCount} 명의 팀 다이어그램 작성 도구`;
+const localTranslating = {
-document.body.querySelector(".formation-box .title-box .title").placeholder = "입력 제목";
+    webpage_title: `퍼즐앤드래곤 ${teamsCount} 명의 팀 다이어그램 작성 도구`,
-document.body.querySelector(".formation-box .detail-box .detail").placeholder = "입력 내용";
+    title_blank: "입력 제목",
+    detail_blank: "입력 내용",
+    sort_name:{
+        sort_none: "Nope",
+        sort_id: "Cards Id",
+        sort_evoRootId: "Cards Evolution Root",
+    },
+}
+
+localisation(localTranslating);

languages/zh-CN.js

@@ -1789,7 +1789,7 @@ function parseBigNumber(number)
 
 
 	const searchBox = editBox.querySelector(".search-box");
-	const controlDiv = searchBox.querySelector(".control-div");
+	const controlDiv = searchBox.querySelector(".sawoken-div");
 	let fragment = document.createDocumentFragment();
 	const specialSearch = fragment.appendChild(document.createElement("select"));
 	specialSearchFunctions.forEach((sfunc,idx)=>{

languages/zh-TW.css

@@ -268,6 +268,15 @@
 .search-box .include-super-awoken-label::after{
 	content: "包括超覺醒";
 }
+.search-box .sort-div::before{
+	content: "排序：";
+}
+.search-box .sort-reverse-label::after{
+	content: "順序";
+}
+.search-box #sort-reverse:checked+ .sort-reverse-label::after{
+	content: "逆序";
+}
 .attrs .attr-all::before{
 	content: "不限";
 }

languages/zh-TW.js

@@ -1,3 +1,12 @@
-document.title = `龍族拼圖${teamsCount}人隊伍圖製作工具`;
+const localTranslating = {
-document.body.querySelector(".formation-box .title-box .title").placeholder = "輸入隊伍標題";
+    webpage_title: `龍族拼圖${teamsCount}人隊伍圖製作工具`,
-document.body.querySelector(".formation-box .detail-box .detail").placeholder = "輸入說明";
+    title_blank: "輸入隊伍標題",
+    detail_blank: "輸入說明",
+    sort_name:{
+        sort_none: "Nope",
+        sort_id: "Cards Id",
+        sort_evoRootId: "Cards Evolution Root",
+    },
+}
+
+localisation(localTranslating);

languages/zh.css

@@ -268,6 +268,15 @@
 .search-box .include-super-awoken-label::after{
 	content: "包括超觉醒";
 }
+.search-box .sort-div::before{
+	content: "排序：";
+}
+.search-box .sort-reverse-label::after{
+	content: "顺序";
+}
+.search-box #sort-reverse:checked+ .sort-reverse-label::after{
+	content: "逆序";
+}
 .attrs .attr-all::before{
 	content: "不限";
 }

script.js

@@ -791,6 +791,7 @@ function initialize()
 		cli.appendChild(cdom);
 		changeid({id:id},cdom);
 		cdom.onclick = clickHeadToNewMon;
+		cli.card = Cards[id];
 		return cli;
 	};
 
@@ -884,9 +885,10 @@ function initialize()
 		});
 	};
 
-	const searchStart = searchBox.querySelector(".control-div .search-start");
+	const s_controlDiv = searchBox.querySelector(".control-div");
-	const searchClose = searchBox.querySelector(".control-div .search-close");
+	const searchStart = s_controlDiv.querySelector(".search-start");
-	const searchClear = searchBox.querySelector(".control-div .search-clear");
+	const searchClose = s_controlDiv.querySelector(".search-close");
+	const searchClear = s_controlDiv.querySelector(".search-clear");
 	function returnCheckedInput(ipt)
 	{
 		return ipt.checked == true;
@@ -910,6 +912,14 @@ function initialize()
 		if (searchArr.length>0)
 		{
 			let fragment = document.createDocumentFragment(); //创建节点用的临时空间
+			
+			const sortIndex = parseInt(s_sortList.value,10);
+			const reverse = s_sortReverse.checked;
+			searchArr.sort((card_a,card_b)=>{
+				let sortNumber = sort_function_list[sortIndex].function(card_a,card_b);
+				if (reverse) sortNumber *= -1;
+				return sortNumber;
+			});
 			searchArr.forEach(function(card){
 				const cli = createCardHead(card.id);
 				fragment.appendChild(cli);
@@ -993,9 +1003,38 @@ function initialize()
 		s_sawokens.forEach(t=>{
 			t.checked = false;
 		});
+
 		searchMonList.innerHTML = "";
 	};
 
+	const s_sortList = s_controlDiv.querySelector(".sort-list");
+	const s_sortReverse = s_controlDiv.querySelector("#sort-reverse");
+	//对搜索到的Cards重新排序
+	function reSortCards()
+	{
+		const sortIndex = parseInt(s_sortList.value,10);
+		const reverse = s_sortReverse.checked;
+
+		searchMonList.classList.add("display-none");
+		let fragment = document.createDocumentFragment(); //创建节点用的临时空间
+		let headsArray = Array.prototype.slice.call(searchMonList.children);
+		headsArray.sort((head_a,head_b)=>{
+			let sortNumber = sort_function_list[sortIndex].function(head_a.card,head_b.card);
+			if (reverse) sortNumber *= -1;
+			return sortNumber;
+		});
+		headsArray.forEach(h=>fragment.appendChild(h));
+		searchMonList.appendChild(fragment);
+		searchMonList.classList.remove("display-none");
+	}
+	s_sortList.onchange = reSortCards;
+	s_sortReverse.onchange = reSortCards;
+	sort_function_list.forEach((sfunc,idx)=>{
+		const newOpt = new Option(sfunc.name,idx);
+		newOpt.setAttribute("data-tag",sfunc.tag);
+		s_sortList.options.add(newOpt);
+	});
+
 	//id搜索
 	const monstersID = settingBox.querySelector(".row-mon-id .m-id");
 	monstersID.onchange = function(){
@@ -2342,3 +2381,21 @@ function refreshMemberSkillCD(teamDom,team,idx){
 		assistSkillCdDom.classList.add("max-skill");
 	}
 }
+function localisation($tra)
+{
+	if (!$tra) return;
+    document.title = $tra.webpage_title;
+    formationBox.querySelector(".title-box .title").placeholder = $tra.title_blank;
+    formationBox.querySelector(".detail-box .detail").placeholder = $tra.detail_blank;
+
+    const s_sortList = editBox.querySelector(".search-box .sort-div .sort-list");
+    const sortOptions = Array.prototype.slice.call(s_sortList.options);
+    sortOptions.forEach(opt=>{
+        const tag = opt.getAttribute("data-tag");
+        const trans = $tra.sort_name[tag];
+        if (trans)
+        {
+            opt.text = trans;
+        }
+    })
+}

solo.html

@@ -9,6 +9,7 @@
 <link href="style-monsterimages.css" rel="stylesheet" type="text/css">
 <link id="language-css" href="languages/en.css" rel="stylesheet" type="text/css">
 <script type="text/javascript" src="languages/language-list.js"></script>
+<script type="text/javascript" src="json_data.js"></script>
 <script type="text/javascript" src="universal_function.js"></script>
 <script type="text/javascript" src="script.js"></script>
 <script type="text/javascript" src="library/localforage.min.js"></script>
@@ -584,11 +585,15 @@ var formation = new Formation(teamsCount,6);
 					<li class="awoken-count"><input type="checkbox" name="types" class="sawoken-check" value="72" id="search-awoken-72" /><label class="awoken-icon awoken-72" for="search-awoken-72"></label></li><!--掉毒-->
 				</ul>
 			</div>
-			<div class="control-div"><!--控制栏，排序方式暂时不做-->
+			<div class="control-div"><!--控制栏-->
 				<button class="search-start"><!--开始搜索--></button>
 				<button class="search-close"><!--关闭搜索--></button>
 				<button class="search-clear"><!--清空搜索条件--></button>
 				<input type="checkbox" name="can-assist" class="config-checkbox-ipt" id="can-assist"><label class="config-checkbox-lbl can-assist-label" for="can-assist"><div class="config-checkbox-lbl-cicle"></div></label>
+				<div class="sort-div">
+					<select class="sort-list"></select>
+					<input type="checkbox" name="sort-reverse" class="config-checkbox-ipt" id="sort-reverse"><label class="config-checkbox-lbl sort-reverse-label" for="sort-reverse"><div class="config-checkbox-lbl-cicle"></div></label>
+				</div><!--排序栏-->
 			</div>
 			<ul class="search-mon-list"></ul><!--搜索结果的显示列表-->
 		</div>

universal_function.js

@@ -1,29 +1,4 @@
-//类型允许的潜觉杀，前面的数字是官方数据的类型编号，后面的杀是自己做的图片中的潜觉序号
+//仿GM_xmlhttpRequest函数v1.3
-const type_allowable_latent = {
-	"0":[], //0进化
-	"12":[], //12觉醒
-	"14":[], //14强化
-	"15":[], //15卖钱
-	"9":[],//特殊保护
-	"1":[17,18,19,20,21,22,23,24], //1平衡
-	"2":[20,24],//2体力
-	"3":[18,22],//3回复
-	"4":[20,24],//4龙
-	"5":[19],//5神
-	"6":[19,23],//6攻击
-	"7":[17],//7恶魔
-	"8":[17,20,21,24],//8机械
-};
-//等效觉醒列表
-const equivalent_awoken = [
-	{small:10,big:52,times:2}, //防封
-	{small:11,big:68,times:5}, //防暗
-	{small:12,big:69,times:5}, //防废
-	{small:13,big:70,times:5}, //防毒
-	{small:19,big:53,times:2}, //手指
-	{small:21,big:56,times:2}, //SB
-];
-//仿GM_xmlhttpRequest函数v1.3
 const GM_xmlhttpRequest = function(GM_param) {
 	const xhr = new XMLHttpRequest(); //创建XMLHttpRequest对象
 	xhr.open(GM_param.method, GM_param.url, true);