加入第3属性的搜索

This commit is contained in:
枫谷剑仙 2023-02-14 22:17:37 +08:00
parent ce08afd111
commit b8c6f8d417
11 changed files with 151 additions and 63 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 672 B

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
images/avatar.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 62 KiB

View File

@ -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: "同时搜索等效觉醒";

View File

@ -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">

View File

@ -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;
});
}
}

View File

@ -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;
});

View File

@ -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">

View File

@ -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);}

View File

@ -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: "类型";
}*/

View File

@ -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">