加入第3属性的搜索

languages/zh.css

@@ -319,14 +319,8 @@ label[for="default-level"]::after
 .search-box::before{
 	content: "搜索怪物";
 }
-.search-box .attrs-div .attr-list-1::before{
-	content: "属性 1：";
-}
-.search-box .attrs-div .attr-list-2::before{
-	content: "属性 2：";
-}
 .search-box .attrs-div .fix-main-color-label::after{
-	content: "限制属性 1 为主属性，属性 2 为副属性";
+	content: "强制属性顺序与选择顺序一致";
 }
 .search-box .consider-equivalent-awoken-label::after{
 	content: "同时搜索等效觉醒";

multi.html

@@ -793,6 +793,15 @@ var formation = new Formation(teamsCount,5);
 		<div class="edit-box-title"><!--修改怪物--></div>
 		<div class="search-box display-none">
 			<div class="attrs-div"><!--属性-->
+				<div class="monster">
+					<input type="file" id="avatar-select" />
+					<div class="custom-avatar"></div>
+					<div class="attrs">
+						<div class="attr"></div>
+						<div class="attr"></div>
+						<div class="attr"></div>
+					</div>
+				</div>
 				<ul class="attr-list attr-list-1">
 					<li><input type="radio" name="attr-1" class="attr-radio" value="1111111" id="search-attr-1-any" checked/><label for="search-attr-1-any"><span class="attr" data-attr-icon="any"></span></label></li><!--任意-->
 					<li><input type="radio" name="attr-1" class="attr-radio" value="0000001" id="search-attr-1-0" /><label for="search-attr-1-0"><span class="attr" data-attr-icon="0"></span></label></li><!--火-->
@@ -811,7 +820,16 @@ var formation = new Formation(teamsCount,5);
 					<li><input type="radio" name="attr-2" class="attr-radio" value="0010000" id="search-attr-2-4" /><label for="search-attr-2-4"><span class="attr" data-attr-icon="4"></span></label></li><!--暗-->
 					<li><input type="radio" name="attr-2" class="attr-radio" value="1000000" id="search-attr-2-6" /><label for="search-attr-2-6"><span class="attr" data-attr-icon="6"></span></label></li><!--无副属性-->
 				</ul>
-				<input type="checkbox" name="fix-main-color" id="fix-main-color" checked><label class="config-checkbox-lbl fix-main-color-label" for="fix-main-color"></label>
+				<ul class="attr-list attr-list-3">
+					<li><input type="radio" name="attr-3" class="attr-radio" value="1111111" id="search-attr-3-any" checked/><label for="search-attr-3-any"><span class="attr" data-attr-icon="any"></span></label></li><!--任意-->
+					<li><input type="radio" name="attr-3" class="attr-radio" value="0000001" id="search-attr-3-0" /><label for="search-attr-3-0"><span class="attr" data-attr-icon="0"></span></label></li><!--火-->
+					<li><input type="radio" name="attr-3" class="attr-radio" value="0000010" id="search-attr-3-1" /><label for="search-attr-3-1"><span class="attr" data-attr-icon="1"></span></label></li><!--水-->
+					<li><input type="radio" name="attr-3" class="attr-radio" value="0000100" id="search-attr-3-2" /><label for="search-attr-3-2"><span class="attr" data-attr-icon="2"></span></label></li><!--木-->
+					<li><input type="radio" name="attr-3" class="attr-radio" value="0001000" id="search-attr-3-3" /><label for="search-attr-3-3"><span class="attr" data-attr-icon="3"></span></label></li><!--光-->
+					<li><input type="radio" name="attr-3" class="attr-radio" value="0010000" id="search-attr-3-4" /><label for="search-attr-3-4"><span class="attr" data-attr-icon="4"></span></label></li><!--暗-->
+					<li><input type="radio" name="attr-3" class="attr-radio" value="1000000" id="search-attr-3-6" /><label for="search-attr-3-6"><span class="attr" data-attr-icon="6"></span></label></li><!--无副属性-->
+				</ul>
+				<div class="options"><input type="checkbox" name="fix-main-color" id="fix-main-color" checked><label class="config-checkbox-lbl fix-main-color-label" for="fix-main-color"></label></div>
 			</div>
 			<div class="types-div"><!--类型-->
 				<ul class="type-list">

script-universal_function.js

@@ -679,38 +679,38 @@ function calculateAbility_max(id, solo, teamsCount, maxLevel = 110) {
 	}
 }
 //搜索卡片用
-function searchCards(cards, {attrs:[attr1, attr2], fixMainColor, types, typeAndOr, rares:[rareLow, rareHigh], awokens, sawokens, equalAk, incSawoken, canAssist, canLv110, is8Latent}) {
+function searchCards(cards, {attrs: sAttrs, fixMainColor, types, typeAndOr, rares:[rareLow, rareHigh], awokens, sawokens, equalAk, incSawoken, canAssist, canLv110, is8Latent}) {
 	let cardsRange = cards.concat(); //这里需要复制一份原来的数组，不然若无筛选，后面的排序会改变初始Cards
 	if (canAssist) cardsRange = cardsRange.filter(card=>card.canAssist);
 	if (canLv110) cardsRange = cardsRange.filter(card=>card.limitBreakIncr>0);
 	if (is8Latent) cardsRange = cardsRange.filter(card=>card.is8Latent);
 	//属性
-	const anyAttr = 0b1111101;
-	const anyA1 = attr1 === 0 || (attr1 & anyAttr) == anyAttr, anyA2 = attr2 === 0 || (attr2 & anyAttr) == anyAttr;
-	if (!anyA1 || !anyA2) { //当a1、a2任一不为所有颜色时才需要筛选属性
-		const attr1s = flags(attr1), attr2s = flags(attr2);
-		const nullAttrArr = [undefined,-1,6];
-		if (fixMainColor) //如果固定了顺序
-		{
-			cardsRange = cardsRange.filter(({attrs:[cAttr1, cAttr2]}) =>
-				(anyA2 ? cAttr1 === 6 && attr1s.includes(cAttr2) : false) || //当A2为随机，只有属性1时，也专门搜只有副属性=属性1的怪物
-				(anyA1 ? true : attr1s.includes(cAttr1)) && //当A1不为随机，保证有1
-				(anyA2 ? true : attr2s.includes(cAttr2) || //当A2不为随机，保证有2
-					attr2s.includes(6) && nullAttrArr.includes(cAttr2)) //当A2有6时，副属性3种没有的数值都算
-			);
+	const anyAttrsFlag = 0b1111101;
+	const anyAttrs = sAttrs.map(attr=>attr === 0 || (attr & anyAttrsFlag) == anyAttrsFlag);
+	if (anyAttrs.some(any=>!any)) { //当任一属性不为任意颜色时才需要筛选属性
+		const attrNums = sAttrs.filter(attr=>fixMainColor || attr > 0 && (attr & anyAttrsFlag) !== anyAttrsFlag) //如果固定顺序就全部返回，否则只返回不为任意色的不考虑顺序 
+			.map(attr=>{
+				let attrNum = flags(attr);
+				if (attrNum.includes(6)) attrNum.push(undefined,-1); //如果是包含6的，就添加-1和undefined的值
+				return attrNum;
+			});
+		if (fixMainColor) {//如果固定了顺序
+			cardsRange = cardsRange.filter(({attrs:cAttrs}) => {
+				//默认逻辑为，只要不是any，就判断这个颜色是否包含了对应的颜色
+				//只选第一属性的时候，且第一属性为无主属性的时候，也显示副属性等于主属性的
+				return (anyAttrs[0] || attrNums[0].includes(cAttrs[0]) || anyAttrs[1] && cAttrs[0] === 6 && attrNums[0].includes(cAttrs[1])) &&
+					   (anyAttrs[1] || attrNums[1].includes(cAttrs[1])) &&
+					   (anyAttrs[2] || attrNums[2].includes(cAttrs[2]));
+			});
 		}
-		else //不限定顺序时
-		{
-			cardsRange = cardsRange.filter(({attrs:[cAttr1, cAttr2]}) => {
-				let hasA1 = anyA1 || attr1s.includes(cAttr1); //如果任意A1或者有A1
-				if (hasA1) { //直接判断A2即可
-					return (anyA2 ? true : attr2s.includes(cAttr2) || //当A2不为随机，保证有2
-						attr2s.includes(6) && nullAttrArr.includes(cAttr2)); //当2有6时，副属性3种没有的数值都算
-				} else if (attr1s.includes(cAttr2) || attr1s.includes(6) && nullAttrArr.includes(cAttr2)) { //如果是A1有2
-					return anyA2 ? true : attr2s.includes(cAttr1); //当A2不为随机，保证有1
-				} else {
-					return false;
-				}
+		else {//不限定顺序时
+			cardsRange = cardsRange.filter(({attrs:cAttrs}) => {
+				let remainAttrNum = cAttrs.reduce((pre, attr)=>{
+					let findIndex = pre.findIndex(attrNum=>attrNum.includes(attr)); //每找到一组属性就去掉一个
+					if (findIndex >= 0) return pre.slice(0,findIndex).concat(pre.slice(findIndex+1));
+					else return pre;
+				}, attrNums);
+				return remainAttrNum.length === 0;
 			});
 		}
 	}

script.js

@@ -3488,9 +3488,7 @@ function initialize() {
 	}
 	const searchEvolutionByThis = settingBox.querySelector(".row-mon-id .search-evolution-by-this");
 	searchEvolutionByThis.onclick = function() {showSearch(Cards.filter(card=>card.evoMaterials.includes(editBox.mid)))};
-
-	const s_attr1s = Array.from(searchBox.querySelectorAll(".attrs-div .attr-list-1 [name=\"attr-1\"]"));
-	const s_attr2s = Array.from(searchBox.querySelectorAll(".attrs-div .attr-list-2 [name=\"attr-2\"]"));
+	const s_attr_lists = Array.from(searchBox.querySelectorAll(".attrs-div .attr-list")).map(list=>Array.from(list.querySelectorAll("input[type=\"radio\"]")));
 	const s_fixMainColor = searchBox.querySelector("#fix-main-color");
 	const s_typesDiv = searchBox.querySelector(".types-div");
 	const s_typeAndOr = s_typesDiv.querySelector("#type-and-or");
@@ -3498,6 +3496,16 @@ function initialize() {
 	const s_typesLi = Array.from(s_typesUl.querySelectorAll("li"));
 	const s_types = s_typesLi.map(li=>li.querySelector(".type-check")); //checkbox集合
 
+	const s_attr_preview_attrs = Array.from(searchBox.querySelectorAll(".attrs-div .monster .attrs .attr"));
+	function s_attr_onclick(){
+		const attrIdx = parseInt(this.name[this.name.length-1],10) - 1;
+		const valueFlag = parseInt(this.value, 2);
+		const values = flags(valueFlag);
+		let attr = values.length === 1 ? values[0] : 'any';
+		if (attrIdx>0 && attr === 6) attr = -1;
+		s_attr_preview_attrs[attrIdx].dataset.attr = attr;
+	}
+	s_attr_lists.forEach(s_attr_list=>s_attr_list.forEach(s_attr=>s_attr.onclick = s_attr_onclick));
 	function s_types_onchange(){
 		const newClassName = `type-killer-${this.value}`;
 		s_typesUl.classList.toggle(newClassName, this.checked && s_typeAndOr.checked);
@@ -3909,10 +3917,14 @@ function initialize() {
 	s_add_show_abilities_with_awoken.onchange = reShowSearch;
 
 	//恢复搜索状态
-	searchBox.recoverySearchStatus = function({attrs:[attr1, attr2], fixMainColor, types, typeAndOr, rares:[rareLow, rareHigh], awokens, sawokens, equalAk, incSawoken, canAssist, canLv110, is8Latent, specialFilters}) {
+	searchBox.recoverySearchStatus = function({attrs, fixMainColor, types, typeAndOr, rares:[rareLow, rareHigh], awokens, sawokens, equalAk, incSawoken, canAssist, canLv110, is8Latent, specialFilters}) {
 		//属性这里是用的2进制写
-		(s_attr1s.find(opt=>parseInt(opt.value,2) == attr1) || s_attr1s[0]).checked = true;
-		(s_attr2s.find(opt=>parseInt(opt.value,2) == attr2) || s_attr2s[0]).checked = true;
+		attrs.forEach((attr, ai)=>{
+			const attr_list = s_attr_lists[ai];
+			let ipt = attr_list.find(opt=>parseInt(opt.value,2) == attr) || attr_list[0];
+			//ipt.checked = true;
+			ipt.click();
+		});
 		s_fixMainColor.checked = fixMainColor;
 		s_types.filter(opt=>types.includes(parseInt(opt.value,10))).forEach(opt=>opt.checked = true);
 		s_typeAndOr.checked = typeAndOr;
@@ -3951,10 +3963,7 @@ function initialize() {
 	}
 	//导出当前的搜索状态
 	searchBox.getSearchOptions = function(){
-		const attrs = [
-			parseInt(returnRadiosValue(s_attr1s), 2) || 0,
-			parseInt(returnRadiosValue(s_attr2s), 2) || 0
-		];
+		const attrs = s_attr_lists.map(list=>parseInt(returnRadiosValue(list), 2) || 0);
 		const types = returnCheckBoxsValues(s_types).map(Str2Int);
 		const rares = [
 			parseInt(returnRadiosValue(s_rareLows), 10),
@@ -4026,8 +4035,7 @@ function initialize() {
 		searchMonList.classList.add(className_displayNone);
 	};
 	searchClear.onclick = function() { //清空搜索选项
-		s_attr1s[0].checked = true;
-		s_attr2s[0].checked = true;
+		s_attr_lists.forEach(list=>list[0].checked = true);
 		s_types.forEach(t => {
 			t.checked = false;
 		});

solo.html

@@ -628,6 +628,15 @@ var formation = new Formation(teamsCount,6);
 		<div class="edit-box-title"><!--修改怪物--></div>
 		<div class="search-box display-none">
 			<div class="attrs-div"><!--属性-->
+				<div class="monster">
+					<input type="file" id="avatar-select" />
+					<div class="custom-avatar"></div>
+					<div class="attrs">
+						<div class="attr"></div>
+						<div class="attr"></div>
+						<div class="attr"></div>
+					</div>
+				</div>
 				<ul class="attr-list attr-list-1">
 					<li><input type="radio" name="attr-1" class="attr-radio" value="1111111" id="search-attr-1-any" checked/><label for="search-attr-1-any"><span class="attr" data-attr-icon="any"></span></label></li><!--任意-->
 					<li><input type="radio" name="attr-1" class="attr-radio" value="0000001" id="search-attr-1-0" /><label for="search-attr-1-0"><span class="attr" data-attr-icon="0"></span></label></li><!--火-->
@@ -646,7 +655,16 @@ var formation = new Formation(teamsCount,6);
 					<li><input type="radio" name="attr-2" class="attr-radio" value="0010000" id="search-attr-2-4" /><label for="search-attr-2-4"><span class="attr" data-attr-icon="4"></span></label></li><!--暗-->
 					<li><input type="radio" name="attr-2" class="attr-radio" value="1000000" id="search-attr-2-6" /><label for="search-attr-2-6"><span class="attr" data-attr-icon="6"></span></label></li><!--无副属性-->
 				</ul>
-				<input type="checkbox" name="fix-main-color" id="fix-main-color" checked><label class="config-checkbox-lbl fix-main-color-label" for="fix-main-color"></label>
+				<ul class="attr-list attr-list-3">
+					<li><input type="radio" name="attr-3" class="attr-radio" value="1111111" id="search-attr-3-any" checked/><label for="search-attr-3-any"><span class="attr" data-attr-icon="any"></span></label></li><!--任意-->
+					<li><input type="radio" name="attr-3" class="attr-radio" value="0000001" id="search-attr-3-0" /><label for="search-attr-3-0"><span class="attr" data-attr-icon="0"></span></label></li><!--火-->
+					<li><input type="radio" name="attr-3" class="attr-radio" value="0000010" id="search-attr-3-1" /><label for="search-attr-3-1"><span class="attr" data-attr-icon="1"></span></label></li><!--水-->
+					<li><input type="radio" name="attr-3" class="attr-radio" value="0000100" id="search-attr-3-2" /><label for="search-attr-3-2"><span class="attr" data-attr-icon="2"></span></label></li><!--木-->
+					<li><input type="radio" name="attr-3" class="attr-radio" value="0001000" id="search-attr-3-3" /><label for="search-attr-3-3"><span class="attr" data-attr-icon="3"></span></label></li><!--光-->
+					<li><input type="radio" name="attr-3" class="attr-radio" value="0010000" id="search-attr-3-4" /><label for="search-attr-3-4"><span class="attr" data-attr-icon="4"></span></label></li><!--暗-->
+					<li><input type="radio" name="attr-3" class="attr-radio" value="1000000" id="search-attr-3-6" /><label for="search-attr-3-6"><span class="attr" data-attr-icon="6"></span></label></li><!--无副属性-->
+				</ul>
+				<div class="options"><input type="checkbox" name="fix-main-color" id="fix-main-color" checked><label class="config-checkbox-lbl fix-main-color-label" for="fix-main-color"></label></div>
 			</div>
 			<div class="types-div"><!--类型-->
 				<ul class="type-list">

style-monsterimages.css

@@ -28,10 +28,26 @@
 .monster .attrs .attr[data-attr='4'] {
 	background-position-x: calc(-102px * 4); /*暗*/
 }
-.monster .attrs .attr[data-attr='6'] { /*无主属性*/
+.monster .attrs .attr:nth-of-type(1):where([data-attr='6'],[data-attr='any']) { /*无主属性和任意属性*/
 	background-image: url(images/CARDFRAMEW.PNG);
 	background-position: 0 0;
 }
+.monster .attrs .attr:nth-of-type(1)[data-attr='6'] { /*无主属性*/
+	background-position: 0 0;
+}
+.monster .attrs .attr:nth-of-type(1)[data-attr='any'] { /*任意主属性*/
+	background-position: -100px 0;
+}
+/*
+.monster .attrs .attr:nth-of-type(2)[data-attr='any']{
+	transform: rotate(180deg);
+	display: none;
+}
+.monster .attrs .attr:nth-of-type(3)[data-attr='any']{
+	transform: rotate(270deg);
+	display: none;
+}
+*/
 /*宠物头像所用的图片*/
 .monster[data-cards-pic-idx='1']{background-image: url(images/cards_ja/CARDS_001.PNG);}
 .monster[data-cards-pic-idx='2']{background-image: url(images/cards_ja/CARDS_002.PNG);}

style.css

@@ -1614,8 +1614,36 @@ icon.inflicts::after
 	text-align: center;
 }
 
-.attrs-div .attr-list-1::before,
-.attrs-div .attr-list-2::before,
+.attrs-div {
+	display: grid;
+	grid-auto-rows: min-content;
+	grid-template-columns: 100px auto;
+	grid-gap: 3px;
+}
+.attrs-div .monster {
+	grid-row: 1 / 4;
+	background-image: url(images/avatar.webp);
+	background-repeat: no-repeat;
+	background-position: 2px 2px;
+}
+.attrs-div .monster #avatar-select {
+	display: none;
+}
+.attrs-div .monster .custom-avatar {
+	width: 100%;
+	height: 100%;
+}
+.attrs-div .options {
+	grid-column: 1 / 3;
+}
+.attr-list {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, 55px);
+}
+.attr-list label {
+	width: 100%;
+	height: 100%;
+}
 .types-div::before,
 .awoken-div::before,
 .sawoken-div::before{
@@ -1642,9 +1670,6 @@ icon.inflicts::after
 {
 	display: none;
 }
-.attrs-div .attr-list{
-	font-size:0;
-}
 .attrs-div .attr-list>li,
 .qr-data-type-ul>li
 {
@@ -1670,11 +1695,6 @@ icon.inflicts::after
 {
 	border-radius: 0 8px 8px 0;
 }
-.attrs-div .attr-list>li>label
-{
-	width: 55px;
-	text-align: center;
-}
 .attrs-div .attr-list input:checked+label,
 .qr-data-type-ul>li input:checked+label
 {
@@ -1682,10 +1702,6 @@ icon.inflicts::after
 	box-shadow: inset black 0 0 5px;
 	cursor: auto;
 }
-
-.attr-list-1{
-	margin-bottom: 5px;
-}
 /*.search-box .types-div::before{
 	content: "类型";
 }*/

triple.html

@@ -1714,6 +1714,15 @@ var formation = new Formation(teamsCount,6);
 		<div class="edit-box-title"><!--修改怪物--></div>
 		<div class="search-box display-none">
 			<div class="attrs-div"><!--属性-->
+				<div class="monster">
+					<input type="file" id="avatar-select" />
+					<div class="custom-avatar"></div>
+					<div class="attrs">
+						<div class="attr"></div>
+						<div class="attr"></div>
+						<div class="attr"></div>
+					</div>
+				</div>
 				<ul class="attr-list attr-list-1">
 					<li><input type="radio" name="attr-1" class="attr-radio" value="1111111" id="search-attr-1-any" checked/><label for="search-attr-1-any"><span class="attr" data-attr-icon="any"></span></label></li><!--任意-->
 					<li><input type="radio" name="attr-1" class="attr-radio" value="0000001" id="search-attr-1-0" /><label for="search-attr-1-0"><span class="attr" data-attr-icon="0"></span></label></li><!--火-->
@@ -1732,7 +1741,16 @@ var formation = new Formation(teamsCount,6);
 					<li><input type="radio" name="attr-2" class="attr-radio" value="0010000" id="search-attr-2-4" /><label for="search-attr-2-4"><span class="attr" data-attr-icon="4"></span></label></li><!--暗-->
 					<li><input type="radio" name="attr-2" class="attr-radio" value="1000000" id="search-attr-2-6" /><label for="search-attr-2-6"><span class="attr" data-attr-icon="6"></span></label></li><!--无副属性-->
 				</ul>
-				<input type="checkbox" name="fix-main-color" id="fix-main-color" checked><label class="config-checkbox-lbl fix-main-color-label" for="fix-main-color"></label>
+				<ul class="attr-list attr-list-3">
+					<li><input type="radio" name="attr-3" class="attr-radio" value="1111111" id="search-attr-3-any" checked/><label for="search-attr-3-any"><span class="attr" data-attr-icon="any"></span></label></li><!--任意-->
+					<li><input type="radio" name="attr-3" class="attr-radio" value="0000001" id="search-attr-3-0" /><label for="search-attr-3-0"><span class="attr" data-attr-icon="0"></span></label></li><!--火-->
+					<li><input type="radio" name="attr-3" class="attr-radio" value="0000010" id="search-attr-3-1" /><label for="search-attr-3-1"><span class="attr" data-attr-icon="1"></span></label></li><!--水-->
+					<li><input type="radio" name="attr-3" class="attr-radio" value="0000100" id="search-attr-3-2" /><label for="search-attr-3-2"><span class="attr" data-attr-icon="2"></span></label></li><!--木-->
+					<li><input type="radio" name="attr-3" class="attr-radio" value="0001000" id="search-attr-3-3" /><label for="search-attr-3-3"><span class="attr" data-attr-icon="3"></span></label></li><!--光-->
+					<li><input type="radio" name="attr-3" class="attr-radio" value="0010000" id="search-attr-3-4" /><label for="search-attr-3-4"><span class="attr" data-attr-icon="4"></span></label></li><!--暗-->
+					<li><input type="radio" name="attr-3" class="attr-radio" value="1000000" id="search-attr-3-6" /><label for="search-attr-3-6"><span class="attr" data-attr-icon="6"></span></label></li><!--无副属性-->
+				</ul>
+				<div class="options"><input type="checkbox" name="fix-main-color" id="fix-main-color" checked><label class="config-checkbox-lbl fix-main-color-label" for="fix-main-color"></label></div>
 			</div>
 			<div class="types-div"><!--类型-->
 				<ul class="type-list">