加上觉醒的动画

languages/en.css

@@ -341,6 +341,11 @@
 .search-box .awoken-option::before{
 	content: "▼Awoken (AND)";
 }
+.search-box .awoken-clear::before,
+.search-box .sawoken-clear::before
+{
+	content: "Clear";
+}
 .search-box .awoken-div::before{
 	content: "▼Add Awoken";
 }

languages/ja.css

@@ -333,6 +333,11 @@
 .search-box .awoken-option::before{
 	content: "▼觉醒（AND）";
 }
+.search-box .awoken-clear::before,
+.search-box .sawoken-clear::before
+{
+	content: "クリア";
+}
 .search-box .awoken-div::before{
 	content: "▼追加覚醒";
 }

languages/ko.css

@@ -330,6 +330,11 @@
 .search-box .awoken-option::before{
 	content: "▼각성（AND）";
 }
+.search-box .awoken-clear::before,
+.search-box .sawoken-clear::before
+{
+	content: "명확한";
+}
 .search-box .awoken-div::before{
 	content: "▼각성 추가";
 }

languages/zh-TW.css

@@ -336,6 +336,11 @@
 .search-box .awoken-option::before{
 	content: "▼觉醒（AND）";
 }
+.search-box .awoken-clear::before,
+.search-box .sawoken-clear::before
+{
+	content: "清除";
+}
 .search-box .awoken-div::before{
 	content: "▼添加覺醒";
 }

languages/zh.css

@@ -336,6 +336,11 @@
 .search-box .awoken-option::before{
 	content: "▼觉醒（AND）";
 }
+.search-box .awoken-clear::before,
+.search-box .sawoken-clear::before
+{
+	content: "清除";
+}
 .search-box .awoken-div::before{
 	content: "▼添加觉醒";
 }

multi.html

@@ -568,9 +568,9 @@ var formation = new Formation(teamsCount,5);
 				<input type="checkbox" class="config-checkbox-ipt" name="show-official-awoken-sorting" id="show-official-awoken-sorting"><label class="config-checkbox-lbl show-official-awoken-sorting-label" for="show-official-awoken-sorting"><div class="config-checkbox-lbl-cicle"></div></label>
 				<ul class="awoken-ul selected-awokens">
 				</ul>
+				<button class="awoken-clear brown-button"></button>
 			</div>
 			<div class="awoken-div"><!--觉醒-->
-				<button class="awoken-clear"></button>
 				<ul class="awoken-ul all-awokens">
 					<li class="awoken-count"><button class="awoken-icon" data-awoken-icon="43"></button><!--7c--></li>
 					<li class="awoken-count"><button class="awoken-icon" data-awoken-icon="61"></button><!--10c--></li>
@@ -652,7 +652,7 @@ var formation = new Formation(teamsCount,5);
 				</ul>
 			</div>
 			<div class="sawoken-div"><!--超觉醒-->
-				<button class="sawoken-clear" ></button>
+				<button class="sawoken-clear brown-button" ></button>
 				<ul class="sawoken-ul">
 					<li class="awoken-count"><input type="checkbox" class="sawoken-check" name="types" value="43" id="search-awoken-43" /><label class="awoken-icon" data-awoken-icon="43" for="search-awoken-43"></label><!--7c--></li>
 					<li class="awoken-count"><input type="checkbox" class="sawoken-check" name="types" value="61" id="search-awoken-61" /><label class="awoken-icon" data-awoken-icon="61" for="search-awoken-61"></label><!--10c--></li>

script.js

@@ -1232,20 +1232,20 @@ function initialize() {
 				abilitiesPreview.classList.add("abilities-with-awoken-preview");
 			}
 		}
-		//产生一个觉醒列表
-		function creatAwokenList(awokens) {
-			const ul = document.createElement("ul");
-			ul.className = "awoken-ul";
-			awokens.forEach(ak=>{
-				const li = ul.appendChild(document.createElement("li"));
-				const icon = li.appendChild(document.createElement("icon"));
-				icon.className = "awoken-icon";
-				icon.setAttribute("data-awoken-icon",ak);
-			});
-			return ul;
-		}
 		if (options.showAwoken)
 		{
+			//产生一个觉醒列表
+			function creatAwokenList(awokens) {
+				const ul = document.createElement("ul");
+				ul.className = "awoken-ul";
+				awokens.forEach(ak=>{
+					const li = ul.appendChild(document.createElement("li"));
+					const icon = li.appendChild(document.createElement("icon"));
+					icon.className = "awoken-icon";
+					icon.setAttribute("data-awoken-icon",ak);
+				});
+				return ul;
+			}
 			const awokenPreview = cli.appendChild(document.createElement("div"));
 			awokenPreview.className = "awoken-preview";
 			if (card.awakenings.length)
@@ -1259,6 +1259,16 @@ function initialize() {
 				sakUl.classList.add("awoken-preview-superAwakenings");
 			}
 		}
+		
+		if (options.customAddition)
+		{
+			options.customAddition.forEach(func=>{
+				const c_addition = cli.appendChild(document.createElement("div"));
+				c_addition.className = "custom-addition";
+				c_addition.appendChild(func(card));
+			});
+		}
+
 		cli.onclick = clickHeadToNewMon;
 		return cli;
 	};
@@ -1451,8 +1461,8 @@ function initialize() {
 		b.onclick = search_awokenAdd1; //每种觉醒增加1
 	});
 
-	const awokenClear = searchBox.querySelector(".awoken-div .awoken-clear");
-	const sawokenClear = searchBox.querySelector(".sawoken-div .sawoken-clear");
+	const awokenClear = searchBox.querySelector(".awoken-clear");
+	const sawokenClear = searchBox.querySelector(".sawoken-clear");
 	awokenClear.onclick = function() { //清空觉醒选项
 		s_awokensIcons.forEach(t => {
 			t.setAttribute("value", 0);
@@ -1487,10 +1497,18 @@ function initialize() {
 	const s_add_show_abilities = searchBox.querySelector("#add-show-abilities"); //是否显示三维
 	const s_add_show_abilities_with_awoken = searchBox.querySelector("#add-show-abilities-with-awoken"); //是否显示计算觉醒的三维
 	
-	showSearch = function(searchArr)
+	showSearch = function(searchArr, customAdditionalFunction)
 	{
-		editBox.show();
+		if (!(searchArr instanceof Array))
+		{ //如果不是数组就直接取消下一步
+			return;
+		}
+		if (searchArr.some(card=>typeof card == "number"))
+		{ //如果传入的是数字，就转成card对象
+			searchArr = searchArr.map(id=>typeof id == "object" ? id : Cards[id]);
+		}
 		searchBox.classList.remove(className_displayNone);
+		editBox.show();
 		const createCardHead = editBox.createCardHead;
 
 		searchMonList.classList.add(className_displayNone);
@@ -1512,6 +1530,9 @@ function initialize() {
 				showCD: s_add_show_CD.checked,
 				showAbilities: s_add_show_abilities.checked,
 				showAbilitiesWithAwoken: s_add_show_abilities_with_awoken.checked,
+				customAddition: typeof customAdditionalFunction == "function" ?
+				 [customAdditionalFunction] :
+				 (customAdditionalFunction instanceof Array ? customAdditionalFunction : null)
 			};
 			searchMonList.originalHeads = searchArr.map(card => createCardHead(card.id, additionalOption));
 			//对头像列表进行排序

solo.html

@@ -484,9 +484,9 @@ var formation = new Formation(teamsCount,6);
 				<input type="checkbox" class="config-checkbox-ipt" name="show-official-awoken-sorting" id="show-official-awoken-sorting"><label class="config-checkbox-lbl show-official-awoken-sorting-label" for="show-official-awoken-sorting"><div class="config-checkbox-lbl-cicle"></div></label>
 				<ul class="awoken-ul selected-awokens">
 				</ul>
+				<button class="awoken-clear brown-button"></button>
 			</div>
 			<div class="awoken-div"><!--觉醒-->
-				<button class="awoken-clear"></button>
 				<ul class="awoken-ul all-awokens">
 					<li class="awoken-count"><button class="awoken-icon" data-awoken-icon="43"></button><!--7c--></li>
 					<li class="awoken-count"><button class="awoken-icon" data-awoken-icon="61"></button><!--10c--></li>
@@ -568,7 +568,7 @@ var formation = new Formation(teamsCount,6);
 				</ul>
 			</div>
 			<div class="sawoken-div"><!--超觉醒-->
-				<button class="sawoken-clear" ></button>
+				<button class="sawoken-clear brown-button" ></button>
 				<ul class="sawoken-ul">
 					<li class="awoken-count"><input type="checkbox" class="sawoken-check" name="types" value="43" id="search-awoken-43" /><label class="awoken-icon" data-awoken-icon="43" for="search-awoken-43"></label><!--7c--></li>
 					<li class="awoken-count"><input type="checkbox" class="sawoken-check" name="types" value="61" id="search-awoken-61" /><label class="awoken-icon" data-awoken-icon="61" for="search-awoken-61"></label><!--10c--></li>

style.css

@@ -1189,12 +1189,15 @@ ul{
 }
 
 .search-box .awoken-option .selected-awokens{
-    min-height: 32px;
-    width: auto;
+	min-height: 32px;
+	box-sizing: border-box;
+    width: calc(100% - 90px);
     min-width: 320px;
     background-color: #00000044;
     border-radius: 6px;
-    box-shadow: inset black 0 0 3px;
+	box-shadow: inset black 0 0 3px;
+	display: inline-block;
+	vertical-align: top;
 }
 /*.search-box .awoken-div::before{
 	content: "觉醒";
@@ -1205,16 +1208,63 @@ ul{
 	display: inline-block;
 	vertical-align: top;
 }
-
-.search-box .awoken-div .awoken-clear::before,
-.search-box .sawoken-div .sawoken-clear::before
+.search-box .awoken-clear,
+.search-box .sawoken-clear
 {
-	content: "❌";
+	vertical-align: top;
 }
-.search-box .awoken-div .awoken-clear,
-.search-box .sawoken-div .sawoken-clear
+.search-box .awoken-clear::before,
+.search-box .sawoken-clear::before
 {
+	width: 80px;
+	background-size: 100px 100px;
+	background-position-y: 40px;
+	vertical-align: top;
+	font-size: 18px;
+	line-height: 28px;
 	padding: 0;
+	vertical-align: top;
+}
+.search-box .sawoken-clear::before
+{
+	width: 50px;
+	font-size: 14px;
+	line-height: 20px;
+}
+
+@keyframes awoken-appear {
+	0% {
+		transform: scale(0);
+	}
+	50% {
+		transform: scale(1.5);
+	}
+	100% {
+		transform: scale(1);
+	}
+}
+.selected-awokens .awoken-icon
+{
+	animation: awoken-appear 0.2s;
+}
+@keyframes icon-active {
+	0% {
+		transform: scale(1);
+	}
+	50% {
+		transform: scale(1.5);
+	}
+	100% {
+		transform: scale(1);
+	}
+}
+.types-div .type-icon:active,
+.rare-div .rare-icon:active,
+.selected-awokens .awoken-icon:active,
+.awoken-div .awoken-icon:active,
+.sawoken-div .awoken-icon:active
+{
+	animation: icon-active 0.2s;
 }
 .awoken-div .awoken-ul.official-awoken-sorting,
 .sawoken-div .sawoken-ul.official-awoken-sorting

triple.html

@@ -1211,9 +1211,9 @@ var formation = new Formation(teamsCount,6);
 				<input type="checkbox" class="config-checkbox-ipt" name="show-official-awoken-sorting" id="show-official-awoken-sorting"><label class="config-checkbox-lbl show-official-awoken-sorting-label" for="show-official-awoken-sorting"><div class="config-checkbox-lbl-cicle"></div></label>
 				<ul class="awoken-ul selected-awokens">
 				</ul>
+				<button class="awoken-clear brown-button"></button>
 			</div>
 			<div class="awoken-div"><!--觉醒-->
-				<button class="awoken-clear"></button>
 				<ul class="awoken-ul all-awokens">
 					<li class="awoken-count"><button class="awoken-icon" data-awoken-icon="43"></button><!--7c--></li>
 					<li class="awoken-count"><button class="awoken-icon" data-awoken-icon="61"></button><!--10c--></li>
@@ -1295,7 +1295,7 @@ var formation = new Formation(teamsCount,6);
 				</ul>
 			</div>
 			<div class="sawoken-div"><!--超觉醒-->
-				<button class="sawoken-clear" ></button>
+				<button class="sawoken-clear brown-button" ></button>
 				<ul class="sawoken-ul">
 					<li class="awoken-count"><input type="checkbox" class="sawoken-check" name="types" value="43" id="search-awoken-43" /><label class="awoken-icon" data-awoken-icon="43" for="search-awoken-43"></label><!--7c--></li>
 					<li class="awoken-count"><input type="checkbox" class="sawoken-check" name="types" value="61" id="search-awoken-61" /><label class="awoken-icon" data-awoken-icon="61" for="search-awoken-61"></label><!--10c--></li>