增加稀有度的搜索,并解觉图鉴模式不能得到能力值的问题

This commit is contained in:
枫谷剑仙 2020-11-16 03:47:57 +08:00
parent f19fa62873
commit d36b67e8f9
11 changed files with 179 additions and 31 deletions

View File

@ -342,6 +342,9 @@
.search-box .types-div::before{
content: "Type:";
}
.search-box .rare-div::before{
content: "Rarity (OR):";
}
.search-box .awoken-div::before{
content: "▼Awoken (AND) (Tips: Click on number to reduce value)";
}

View File

@ -334,6 +334,9 @@
.search-box .types-div::before{
content: "タイプ:";
}
.search-box .rare-div::before{
content: "希少性OR";
}
.search-box .awoken-div::before{
content: "▼覚醒ANDしえ:数値をクリックすると数値が減少します)";
}

View File

@ -331,6 +331,9 @@
.search-box .types-div::before{
content: "형식:";
}
.search-box .rare-div::before{
content: "희귀OR";
}
.search-box .awoken-div::before{
content: "▼각성AND번째:숫자를 누르면 숫자가 낮아집니다)";
}

View File

@ -337,6 +337,9 @@
.search-box .types-div::before{
content: "類型:";
}
.search-box .rare-div::before{
content: "稀有OR";
}
.search-box .awoken-div::before{
content: "▼覺醒AND提示點擊數字可減少數值";
}

View File

@ -337,6 +337,9 @@
.search-box .types-div::before{
content: "类型:";
}
.search-box .rare-div::before{
content: "稀有OR";
}
.search-box .awoken-div::before{
content: "▼觉醒AND提示点击数字可减少数值";
}

View File

@ -498,6 +498,20 @@ var formation = new Formation(teamsCount,5);
<li class="latent-icon" data-latent-icon="27"></li><!--回复杀-->
</ul>
</div>
<div class="rare-div"><!--稀有星级-->
<ul class="rare-list">
<li><input type="checkbox" class="rare-check" name="rare" value="1" id="search-rare-1" /><label class="rare-icon" data-rare-icon="1" for="search-rare-1"></label></li>
<li><input type="checkbox" class="rare-check" name="rare" value="2" id="search-rare-2" /><label class="rare-icon" data-rare-icon="2" for="search-rare-2"></label></li>
<li><input type="checkbox" class="rare-check" name="rare" value="3" id="search-rare-3" /><label class="rare-icon" data-rare-icon="3" for="search-rare-3"></label></li>
<li><input type="checkbox" class="rare-check" name="rare" value="4" id="search-rare-4" /><label class="rare-icon" data-rare-icon="4" for="search-rare-4"></label></li>
<li><input type="checkbox" class="rare-check" name="rare" value="5" id="search-rare-5" /><label class="rare-icon" data-rare-icon="5" for="search-rare-5"></label></li>
<li><input type="checkbox" class="rare-check" name="rare" value="6" id="search-rare-6" /><label class="rare-icon" data-rare-icon="6" for="search-rare-6"></label></li>
<li><input type="checkbox" class="rare-check" name="rare" value="7" id="search-rare-7" /><label class="rare-icon" data-rare-icon="7" for="search-rare-7"></label></li>
<li><input type="checkbox" class="rare-check" name="rare" value="8" id="search-rare-8" /><label class="rare-icon" data-rare-icon="8" for="search-rare-8"></label></li>
<li><input type="checkbox" class="rare-check" name="rare" value="9" id="search-rare-9" /><label class="rare-icon" data-rare-icon="9" for="search-rare-9"></label></li>
<li><input type="checkbox" class="rare-check" name="rare" value="10" id="search-rare-10" /><label class="rare-icon" data-rare-icon="10" for="search-rare-10"></label></li>
</ul>
</div>
<div class="awoken-div"><!--觉醒-->
<button class="awoken-clear"></button>
<div class="awoken-option">

View File

@ -389,7 +389,7 @@ function calculateAbility_max(id,solo, teamsCount)
}
}
//搜索卡片用
function searchCards(cards,attr1,attr2,fixMainColor,types,typeAndOr,awokens,sawokens,equalAk,incSawoken)
function searchCards(cards,attr1,attr2,fixMainColor,types,typeAndOr,rares,awokens,sawokens,equalAk,incSawoken)
{
let cardsRange = cards.concat(); //这里需要复制一份原来的数组不然若无筛选后面的排序会改变初始Cards
//属性
@ -425,6 +425,11 @@ function searchCards(cards,attr1,attr2,fixMainColor,types,typeAndOr,awokens,sawo
types.some(t=>c.types.includes(t)) //只需要满足一个type
);
}
//稀有度
if (rares.length>0)
{
cardsRange = cardsRange.filter(c=>rares.includes(c.rarity));
}
//觉醒
//等效觉醒时,事先去除大觉醒
if (equalAk)

View File

@ -1093,39 +1093,34 @@ function initialize() {
const s_attr2s = Array.from(searchBox.querySelectorAll(".attrs-div .attr-list-2 .attr-radio"));
const s_fixMainColor = searchBox.querySelector("#fix-main-color");
const s_typesDiv = searchBox.querySelector(".types-div");
const s_types = Array.from(s_typesDiv.querySelectorAll(".type-check"));
const s_typeAndOr = s_typesDiv.querySelector("#type-and-or");
const s_typesUl = s_typesDiv.querySelector(".type-list");
const s_typesLi = Array.from(s_typesUl.querySelectorAll("li"));
const s_typesCheckBox = s_typesLi.map(li=>li.querySelector(".type-check"));
s_typesCheckBox.forEach(checkBox=>
{
checkBox.onchange = function(){
const newClassName = `type-killer-${this.value}`;
if (this.checked && s_typeAndOr.checked) //and的时候才生效
s_typesUl.classList.add(newClassName);
else
s_typesUl.classList.remove(newClassName);
}
}
);
const s_types = s_typesLi.map(li=>li.querySelector(".type-check")); //checkbox集合
function s_types_onchange(){
const newClassName = `type-killer-${this.value}`;
if (this.checked && s_typeAndOr.checked) //and的时候才生效
s_typesUl.classList.add(newClassName);
else
s_typesUl.classList.remove(newClassName);
}
s_types.forEach(checkBox=>checkBox.onchange = s_types_onchange);
const s_types_latentUl = s_typesDiv.querySelector(".latent-list");
const s_types_latentli = Array.from(s_types_latentUl.querySelectorAll("li"));
s_types_latentli.forEach(latent=>
{
latent.onclick = function(){
const latenttype = parseInt(this.getAttribute("data-latent-icon"));
const killerTypes = typekiller_for_type.filter(o=>o.allowableLatent.includes(latenttype)).map(o=>o.type);
s_typesCheckBox.forEach(checkbox=>{
const type = parseInt(checkbox.value);
checkbox.checked = killerTypes.includes(type);
});
};
});
function s_types_latentli_onclick(){
const latenttype = parseInt(this.getAttribute("data-latent-icon"));
const killerTypes = typekiller_for_type.filter(o=>o.allowableLatent.includes(latenttype)).map(o=>o.type);
s_types.forEach(checkbox=>{
const type = parseInt(checkbox.value);
checkbox.checked = killerTypes.includes(type);
});
}
s_types_latentli.forEach(latent=>latent.onclick = s_types_latentli_onclick);
s_typeAndOr.onchange = function(){
s_typesCheckBox.forEach(checkBox=>checkBox.onchange());
s_types.forEach(checkBox=>checkBox.onchange());
if (this.checked)
s_types_latentUl.classList.add(className_displayNone);
else
@ -1133,6 +1128,12 @@ function initialize() {
};
s_typeAndOr.onchange();
//稀有度筛选
const s_rareDiv = searchBox.querySelector(".rare-div");
const s_rareUl = s_rareDiv.querySelector(".rare-list");
const s_rareLi = Array.from(s_rareUl.querySelectorAll("li"));
const s_rare = s_rareLi.map(li=>li.querySelector(".rare-check")); //checkbox集合
const s_awokensItems = Array.from(searchBox.querySelectorAll(".awoken-div .awoken-count"));
const s_awokensIcons = s_awokensItems.map(it => it.querySelector(".awoken-icon"));
const s_awokensCounts = s_awokensItems.map(it => it.querySelector(".count"));
@ -1288,6 +1289,7 @@ function initialize() {
}
}
const typesFilter = s_types.filter(returnCheckedInput).map(returnInputValue).map(Str2Int);
const rareFilter = s_rare.filter(returnCheckedInput).map(returnInputValue).map(Str2Int);
const sawokensFilter = s_sawokens.filter(returnCheckedInput).map(returnInputValue).map(Str2Int);
const awokensFilter = s_awokensCounts.filter(btn => parseInt(btn.value, 10) > 0).map(btn => {
const awokenIndex = parseInt(btn.parentNode.parentNode.querySelector(".awoken-icon").getAttribute("data-awoken-icon"), 10);
@ -1298,6 +1300,7 @@ function initialize() {
s_fixMainColor.checked,
typesFilter,
s_typeAndOr.checked,
rareFilter,
awokensFilter,
sawokensFilter,
s_awokensEquivalent.checked,
@ -1319,6 +1322,9 @@ function initialize() {
s_types.forEach(t => {
t.checked = false;
});
s_rare.forEach(t => {
t.checked = false;
});
s_typeAndOr.onchange();
s_awokensCounts.forEach(t => {
t.value = 0;
@ -1594,7 +1600,7 @@ function initialize() {
//编辑界面重新计算怪物的能力
function reCalculateAbility() {
const monid = parseInt(monstersID.value || 0, 10);
const monid = editBox.mid;
const level = parseInt(monEditLv.value || 0, 10);
const mAwokenNumIpt = monEditAwokensRow.querySelector("input[name='awoken-number']:checked");

View File

@ -448,6 +448,20 @@ var formation = new Formation(teamsCount,6);
<li class="latent-icon" data-latent-icon="27"></li><!--回复杀-->
</ul>
</div>
<div class="rare-div"><!--稀有星级-->
<ul class="rare-list">
<li><input type="checkbox" class="rare-check" name="rare" value="1" id="search-rare-1" /><label class="rare-icon" data-rare-icon="1" for="search-rare-1"></label></li>
<li><input type="checkbox" class="rare-check" name="rare" value="2" id="search-rare-2" /><label class="rare-icon" data-rare-icon="2" for="search-rare-2"></label></li>
<li><input type="checkbox" class="rare-check" name="rare" value="3" id="search-rare-3" /><label class="rare-icon" data-rare-icon="3" for="search-rare-3"></label></li>
<li><input type="checkbox" class="rare-check" name="rare" value="4" id="search-rare-4" /><label class="rare-icon" data-rare-icon="4" for="search-rare-4"></label></li>
<li><input type="checkbox" class="rare-check" name="rare" value="5" id="search-rare-5" /><label class="rare-icon" data-rare-icon="5" for="search-rare-5"></label></li>
<li><input type="checkbox" class="rare-check" name="rare" value="6" id="search-rare-6" /><label class="rare-icon" data-rare-icon="6" for="search-rare-6"></label></li>
<li><input type="checkbox" class="rare-check" name="rare" value="7" id="search-rare-7" /><label class="rare-icon" data-rare-icon="7" for="search-rare-7"></label></li>
<li><input type="checkbox" class="rare-check" name="rare" value="8" id="search-rare-8" /><label class="rare-icon" data-rare-icon="8" for="search-rare-8"></label></li>
<li><input type="checkbox" class="rare-check" name="rare" value="9" id="search-rare-9" /><label class="rare-icon" data-rare-icon="9" for="search-rare-9"></label></li>
<li><input type="checkbox" class="rare-check" name="rare" value="10" id="search-rare-10" /><label class="rare-icon" data-rare-icon="10" for="search-rare-10"></label></li>
</ul>
</div>
<div class="awoken-div"><!--觉醒-->
<button class="awoken-clear"></button>
<div class="awoken-option">

View File

@ -952,7 +952,11 @@ ul{
.search-box .attrs-div-div .fix-main-color-label::after{
content: "限制属性1为主属性属性2为副属性";
}*/
.attr-radio,.type-check,.sawoken-check{
.attr-radio,
.type-check,
.rare-check,
.sawoken-check
{
display: none;
}
.attrs-div .attr-list{
@ -993,14 +997,19 @@ ul{
/*.search-box .types-div::before{
content: "类型";
}*/
.types-div .type-list
.types-div .type-list,
.rare-div .rare-list
{
display: inline-block;
}
.types-div .type-list>li label{
.types-div .type-list input~label,
.rare-div .rare-list input~label
{
opacity: var(--search-icon-unchecked);
}
.types-div .type-list input:checked~label{
.types-div .type-list input:checked~label,
.rare-div .rare-list input:checked~label
{
opacity: 1;
}
.types-div .type-and-or-label{
@ -1021,6 +1030,7 @@ ul{
display: none;
pointer-events:none;
}
/*不同type允许的杀*/
.types-div .type-list.type-killer-5 li[data-type-icon="7"]:after,
.types-div .type-list.type-killer-4 li[data-type-icon="8"]:after,
.types-div .type-list.type-killer-4 li[data-type-icon="3"]:after,
@ -1056,6 +1066,76 @@ ul{
margin-top: -3px;
margin-bottom: -5px;
}
.rare-div .rare-icon
{
font-family: var(--game-font-family);
color: white;
width: 26px;
height: 26px;
box-sizing: border-box;
line-height: 26px;
position: relative;
}
.rare-div .rare-icon::before
{
content: "★";
color: gold;
text-shadow: goldenrod 0 0 2px;
position: absolute;
font-size: 26px;
left: 0;
top: 0;
}
.rare-div .rare-icon::after
{
color: white;
text-shadow: black 0 0 4px;
font-size: 18px;
position: relative;
left: 0;
top: 0;
}
.rare-icon[data-rare-icon="1"]::after
{
content: "1";
}
.rare-icon[data-rare-icon="2"]::after
{
content: "2";
}
.rare-icon[data-rare-icon="3"]::after
{
content: "3";
}
.rare-icon[data-rare-icon="4"]::after
{
content: "4";
}
.rare-icon[data-rare-icon="5"]::after
{
content: "5";
}
.rare-icon[data-rare-icon="6"]::after
{
content: "6";
}
.rare-icon[data-rare-icon="7"]::after
{
content: "7";
}
.rare-icon[data-rare-icon="8"]::after
{
content: "8";
}
.rare-icon[data-rare-icon="9"]::after
{
content: "9";
}
.rare-icon[data-rare-icon="10"]::after
{
content: "10";
}
/*.search-box .awoken-div::before{
content: "觉醒";
}*/

View File

@ -1143,6 +1143,20 @@ var formation = new Formation(teamsCount,6);
<li class="latent-icon" data-latent-icon="27"></li><!--回复杀-->
</ul>
</div>
<div class="rare-div"><!--稀有星级-->
<ul class="rare-list">
<li><input type="checkbox" class="rare-check" name="rare" value="1" id="search-rare-1" /><label class="rare-icon" data-rare-icon="1" for="search-rare-1"></label></li>
<li><input type="checkbox" class="rare-check" name="rare" value="2" id="search-rare-2" /><label class="rare-icon" data-rare-icon="2" for="search-rare-2"></label></li>
<li><input type="checkbox" class="rare-check" name="rare" value="3" id="search-rare-3" /><label class="rare-icon" data-rare-icon="3" for="search-rare-3"></label></li>
<li><input type="checkbox" class="rare-check" name="rare" value="4" id="search-rare-4" /><label class="rare-icon" data-rare-icon="4" for="search-rare-4"></label></li>
<li><input type="checkbox" class="rare-check" name="rare" value="5" id="search-rare-5" /><label class="rare-icon" data-rare-icon="5" for="search-rare-5"></label></li>
<li><input type="checkbox" class="rare-check" name="rare" value="6" id="search-rare-6" /><label class="rare-icon" data-rare-icon="6" for="search-rare-6"></label></li>
<li><input type="checkbox" class="rare-check" name="rare" value="7" id="search-rare-7" /><label class="rare-icon" data-rare-icon="7" for="search-rare-7"></label></li>
<li><input type="checkbox" class="rare-check" name="rare" value="8" id="search-rare-8" /><label class="rare-icon" data-rare-icon="8" for="search-rare-8"></label></li>
<li><input type="checkbox" class="rare-check" name="rare" value="9" id="search-rare-9" /><label class="rare-icon" data-rare-icon="9" for="search-rare-9"></label></li>
<li><input type="checkbox" class="rare-check" name="rare" value="10" id="search-rare-10" /><label class="rare-icon" data-rare-icon="10" for="search-rare-10"></label></li>
</ul>
</div>
<div class="awoken-div"><!--觉醒-->
<button class="awoken-clear"></button>
<div class="awoken-option">