mapaler
/
PADDashFormation
1
0
Fork 1
Code Issues Pull Requests Projects Releases Wiki Activity

特殊搜索改造为两列，解决太长的问题

This commit is contained in:
枫谷剑仙 2024-07-29 20:42:07 +08:00
parent f61851e3e5
commit 4cf14d05e0
8 changed files with 2790 additions and 2671 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
multi.html
View File

@ -1246,10 +1246,10 @@ const teamsCount = 2;
<div class="button-div"> <div class="button-div">
<button class="special-add brown-button"></button> <button class="special-add brown-button"></button>
<button class="special-clear brown-button"></button> <button class="special-clear brown-button"></button>
<button class="special-star brown-button"></button>
</div> </div>
<ul class="special-filter-list"> <ul class="special-filter-list">
<li> <li>
<select class="filter-kind"></select>
<select class="special-filter"></select> <select class="special-filter"></select>
<button class="copy-filter brown-button"></button> <button class="copy-filter brown-button"></button>
<button class="shift-up-filter brown-button"></button> <button class="shift-up-filter brown-button"></button>
@ -1768,7 +1768,11 @@ const teamsCount = 2;
<div class="dialog-title"></div> <div class="dialog-title"></div>
<form method="dialog"> <form method="dialog">
<div class="dialog-content"> <div class="dialog-content">
<input type="text" class="string-value" readonly /><button class="string-copy" type="button"></button> <ul>
<li>
<input type="text" class="string-value" readonly /><button class="string-copy" type="button"></button>
</li>
</ul>
</div> </div>
<div class="dialog-control"><button class="dialog-close brown-button" value="cancel" formmethod="dialog"></button></div> <div class="dialog-control"><button class="dialog-close brown-button" value="cancel" formmethod="dialog"></button></div>
</form> </form>

5189
script-json_data.js
View File

File diff suppressed because it is too large Load Diff

2
script-universal_function.js
View File

@ -704,7 +704,7 @@ function awokenCountInTeam(team, awokenIndex, solo, teamsCount) {
return teamAwokenCount; return teamAwokenCount;
} }
//返回可用的怪物名称 //返回可用的怪物名称
function returnMonsterNameArr(card, lsList, defaultCode) { function returnMonsterNameArr(card, lsList = currentLanguage.searchlist, defaultCode = currentDataSource.code) {
const monNameArr = lsList.map(lc => { //取出每种语言 const monNameArr = lsList.map(lc => { //取出每种语言
if (lc == defaultCode) if (lc == defaultCode)
return card.name; return card.name;

185
script.js
View File

@ -4716,18 +4716,20 @@ function initialize() {
const s_specialDiv = searchBox.querySelector(".special-div"); const s_specialDiv = searchBox.querySelector(".special-div");
const specialAdd = s_specialDiv.querySelector(".special-add"); const specialAdd = s_specialDiv.querySelector(".special-add");
const specialClear = s_specialDiv.querySelector(".special-clear"); const specialClear = s_specialDiv.querySelector(".special-clear");
const specialStar = s_specialDiv.querySelector(".special-star");
const specialFilterUl = s_specialDiv.querySelector(".special-filter-list"); const specialFilterUl = s_specialDiv.querySelector(".special-filter-list");
const specialFilterFirstLi = specialFilterUl.querySelector("li"); const specialFilterFirstLi = specialFilterUl.querySelector("li");
const specialFirstSelect = specialFilterFirstLi.querySelector(".special-filter"); const specialFirstKind = specialFilterFirstLi.querySelector(".filter-kind");
function filterCopy() { function filterCopy() {
const target = this.parentElement; const target = this.parentElement;
const newFilter = target.cloneNode(true); const newFilter = target.cloneNode(true);
const newSelect = newFilter.querySelector(".special-filter"); const newSelects = newFilter.querySelectorAll("select");
newSelect.selectedIndex = target.querySelector(".special-filter").selectedIndex; const oldSelects = target.querySelectorAll("select");
for (let i = 0; i < oldSelects.length; i++) {
newSelects[i].selectedIndex = oldSelects[i].selectedIndex;
}
filterBindOnclick(newFilter); filterBindOnclick(newFilter);
target.insertAdjacentElement('afterend', newFilter); target.insertAdjacentElement('afterend', newFilter);
return newSelect; return newFilter;
} }
function filterShiftUp() { function filterShiftUp() {
const parent = this.parentElement; const parent = this.parentElement;
@ -4755,14 +4757,6 @@ function initialize() {
} }
filterBindOnclick(specialFilterFirstLi); filterBindOnclick(specialFilterFirstLi);
function newSpecialSearchOption(func, idx1, idx2)
{
const funcName = returnMonsterNameArr(func, currentLanguage.searchlist, currentDataSource.code)[0];
return new Option(
funcName + (func.addition ? " " + localTranslating.addition_display : ""), //有附加显示的，名称增加一个附加显示图标
idx1 + (idx2 != null ? "|" + idx2 : "") //值为 组序号|组内序号
);
}
//读取储存的筛选收藏列表 //读取储存的筛选收藏列表
const strMakedConfig = JSON.parse(localStorage.getItem(cfgPrefix + "marked-filter")); const strMakedConfig = JSON.parse(localStorage.getItem(cfgPrefix + "marked-filter"));
if (Array.isArray(strMakedConfig)) { if (Array.isArray(strMakedConfig)) {
@ -4778,81 +4772,81 @@ function initialize() {
} }
}); });
} }
specialFirstSelect.refreshList = function() {
const _this = specialFirstSelect; function newSpecialSearchOption(func, indexs)
function addNewOption(sfunc, groudIndex){ {
if (sfunc.group) let funcName = returnMonsterNameArr(func)[0];
{ //是组的，显示箭头
const groupName = returnMonsterNameArr(sfunc, currentLanguage.searchlist, currentDataSource.code)[0]; if (Array.isArray(func.functions)) funcName += " " + localTranslating.has_sub_filter;
const optgroup = _this.appendChild(document.createElement("optgroup")); //有附加显示的，名称增加一个附加显示图标
optgroup.label = groupName; if (func.addition) funcName += " " + localTranslating.addition_display;
if (sfunc.functions) return new Option(
{ funcName,
sfunc.functions.forEach((_sfunc, filterIndex)=>{ indexs.join("|") //值为 组序号|组内序号
optgroup.appendChild(newSpecialSearchOption(_sfunc, groudIndex, filterIndex)); );
}); }
} function addNewOption(sfunc, indexs){
}else if (!Array.isArray(indexs)) indexs = [indexs];
{ if (Array.isArray(sfunc.functions)) {
_this.options.add(newSpecialSearchOption(sfunc, groudIndex)); //增加组
} const groupName = returnMonsterNameArr(sfunc)[0];
} const optgroup = this.appendChild(document.createElement("optgroup"));
_this.innerHTML = '';
addNewOption(specialSearchFunctions[0], 0);
if (markedFilter.length > 0) {
const groupName = "=====★=====";
const optgroup = _this.appendChild(document.createElement("optgroup"));
optgroup.label = groupName; optgroup.label = groupName;
markedFilter.forEach(([groudIndex, filterIndex])=>{ const newOptions = sfunc.functions.map((_sfunc, filterIndex)=>
const funcObj = filterIndex !== undefined ? specialSearchFunctions[groudIndex].functions[filterIndex] : specialSearchFunctions[groudIndex]; newSpecialSearchOption(_sfunc, indexs.concat(filterIndex))
optgroup.appendChild(newSpecialSearchOption(funcObj, groudIndex, filterIndex)); );
}); optgroup.append(...newOptions);
}
for (let idx = 1; idx < specialSearchFunctions.length; idx++) {
addNewOption(specialSearchFunctions[idx], idx);
}
}
specialFirstSelect.onchange = function() {
const [selectGroudIndex, selectFilterIndex] = specialFirstSelect.value.split("|").map(Number);
let markIdx = markedFilter.findIndex(([groudIndex, filterIndex])=>groudIndex === selectGroudIndex && filterIndex === selectFilterIndex);
if (markIdx >= 0) {//已经存在的收藏
specialStar.classList.add("marked");
} else { } else {
specialStar.classList.remove("marked"); //增加单条
this.options.add(newSpecialSearchOption(sfunc, indexs));
} }
} }
function specialFilterRefreshKind() {
const kindSelect = this.querySelector(".filter-kind");
kindSelect.innerHTML = '';
kindSelect.onchange = specialFilterRefreshSubFilters;
for (let idx = 0; idx < specialSearchFunctions.functions.length; idx++) {
addNewOption.call(kindSelect, specialSearchFunctions.functions[idx], idx);
}
kindSelect.onchange();
}
specialFilterRefreshKind.call(specialFilterFirstLi);
function getSpecialSearchFunctionsFromIndex(indexs) {
return indexs.reduce((p,v)=>p.functions[v],specialSearchFunctions);
}
function specialFilterRefreshSubFilters() {
const filterSelect = this.parentElement.querySelector(".special-filter");
filterSelect.innerHTML = '';
const indexs = this.value.split("|").map(Number);
const group = getSpecialSearchFunctionsFromIndex(indexs);
if (Array.isArray(group.functions)) {
for (let idx = 0; idx < group.functions.length; idx++) {
addNewOption.call(filterSelect, group.functions[idx], indexs.concat(idx));
}
filterSelect.disabled = false;
} else {
filterSelect.disabled = true;
}
}
//只添加第一个列表，后面的全部通过克隆的方式复现 //只添加第一个列表，后面的全部通过克隆的方式复现
specialFirstSelect.refreshList(); //specialFirstSelect.refreshList();
specialAdd.onclick = function(event) { specialAdd.onclick = function(event) {
const specialFilterLi = specialFilterFirstLi.cloneNode(true); const newFilterLi = specialFilterFirstLi.cloneNode(true);
const specialFilterSelection = specialFilterLi.querySelector(".special-filter"); filterBindOnclick(newFilterLi);
specialFilterUl.appendChild(specialFilterLi); const kindSelect = newFilterLi.querySelector(".filter-kind");
return specialFilterSelection; kindSelect.onchange = specialFilterRefreshSubFilters;
kindSelect.onchange();
specialFilterUl.appendChild(newFilterLi);
return newFilterLi;
} }
specialClear.onclick = function() { specialClear.onclick = function() {
searchMonList.customAddition = null; searchMonList.customAddition = null;
specialFilterUl.innerHTML = ""; specialFilterUl.innerHTML = "";
specialFilterUl.appendChild(specialFilterFirstLi); specialFilterUl.appendChild(specialFilterFirstLi);
specialFirstSelect.selectedIndex = 0; specialFirstKind.selectedIndex = 0;
} specialFirstKind.onchange();
specialStar.onclick = function() {
const indexs = specialFirstSelect.value.split("|").map(Number);
if (indexs[0] === 0 && indexs.length === 1) return;
let markIdx = markedFilter.findIndex(arr=>arr[0] === indexs[0] && arr[1] === indexs[1]);
if (markIdx >= 0) {//已经存在的收藏
markedFilter.splice(markIdx,1);
} else {
markedFilter.push(indexs);
}
specialFirstSelect.refreshList(); //刷新列表
specialStar.classList.remove("marked"); //去掉自身的收藏标记
//储存设置
let strMakedConfig = markedFilter.map(indexs=>{
let arr = [specialSearchFunctions[indexs[0]].name];
if (indexs.length > 1) arr.push(specialSearchFunctions[indexs[0]].functions[indexs[1]].name);
return arr;})
localStorage.setItem(cfgPrefix + "marked-filter", JSON.stringify(strMakedConfig));
} }
const s_controlDiv = searchBox.querySelector(".control-div"); const s_controlDiv = searchBox.querySelector(".control-div");
@ -5018,16 +5012,25 @@ function initialize() {
s_notWeapon.checked = notWeapon; s_notWeapon.checked = notWeapon;
//保留之前的特殊搜索，不需要完全新增 //保留之前的特殊搜索，不需要完全新增
const specialFilterSelections = Array.from(specialFilterUl.querySelectorAll(".special-filter")); const specialFilterLis = [...specialFilterUl.querySelectorAll("li")];
//将筛选个数增加到需要的个数 //将筛选个数增加到需要的个数
for (let i = specialFilterSelections.length; i < specialFilters.length; i++) { for (let i = specialFilterLis.length; i < specialFilters.length; i++) {
specialFilterSelections.push(specialAdd.onclick.onclick()); specialFilterLis.push(specialAdd.onclick());
} }
//将每一个搜索都设置好 //将每一个搜索都设置好
for (let i = 0; i < specialFilters.length; i++) { for (let i = 0; i < specialFilters.length; i++) {
const filterSelection = specialFilterSelections[i]; const indexs = specialFilters[i];
const filter = specialFilters[i]; const filterLi = specialFilterLis[i];
filterSelection.value = filter.join("|"); const filterSelects = [...filterLi.querySelectorAll("select")];
for (let j = 0; j * 2 < indexs.length; j++) {
const indexs_ = indexs.slice(0, (j+1)*2);
const filterSelect = filterSelects[j];
if (!filterSelect) continue;
filterSelect.value = indexs_.join("|");
filterSelect.onchange && filterSelect.onchange();
}
} }
} }
//导出当前的搜索状态 //导出当前的搜索状态
@ -5051,9 +5054,11 @@ function initialize() {
}; };
}); });
//储存设置用于页面刷新的状态恢复 //储存设置用于页面刷新的状态恢复
const specialFilters = Array.from(specialFilterUl.querySelectorAll(".special-filter")) const specialFilters = [...specialFilterUl.querySelectorAll("li")].map(li=>{
.map(select=>select.value.split("|").map(Number)) //将字符串"1|2"转换成数组[1,2] const values = [...li.querySelectorAll("select")].map(select=>select.value.split("|").map(Number));
.filter(([f1, f2])=>!(f1===0&&f2===undefined)); //去掉0号筛选 values.sort((a,b)=>b.length-a.length); //长的在前
return values[0];
});
const options = { const options = {
attrs, attrs,
@ -5081,12 +5086,10 @@ function initialize() {
let searchResult = searchCards(Cards, options); let searchResult = searchCards(Cards, options);
//进行特殊附加搜索 //进行特殊附加搜索
const specialFilters = options.specialFilters.map(([name1, name2])=> const specialFilters = options.specialFilters.map(getSpecialSearchFunctionsFromIndex);
name2 !== undefined ? specialSearchFunctions[name1].functions[name2] : specialSearchFunctions[name1] searchResult = specialFilters.reduce((pre, funcObj)=>
);
searchResult = specialFilters.reduce((pre,funcObj)=>
{ {
if (!funcObj) return pre; if (!funcObj.function) return pre;
if (funcObj.addition && !customAdditionalFunction.includes(funcObj.addition)) customAdditionalFunction.push(funcObj.addition); //如果有附加显示，则添加到列表 if (funcObj.addition && !customAdditionalFunction.includes(funcObj.addition)) customAdditionalFunction.push(funcObj.addition); //如果有附加显示，则添加到列表
return funcObj.function(pre); //结果进一步筛选 return funcObj.function(pre); //结果进一步筛选
}, searchResult); }, searchResult);

8
solo.html
View File

@ -984,10 +984,10 @@ const teamsCount = 1;
<div class="button-div"> <div class="button-div">
<button class="special-add brown-button"></button> <button class="special-add brown-button"></button>
<button class="special-clear brown-button"></button> <button class="special-clear brown-button"></button>
<button class="special-star brown-button"></button>
</div> </div>
<ul class="special-filter-list"> <ul class="special-filter-list">
<li> <li>
<select class="filter-kind"></select>
<select class="special-filter"></select> <select class="special-filter"></select>
<button class="copy-filter brown-button"></button> <button class="copy-filter brown-button"></button>
<button class="shift-up-filter brown-button"></button> <button class="shift-up-filter brown-button"></button>
@ -1506,7 +1506,11 @@ const teamsCount = 1;
<div class="dialog-title"></div> <div class="dialog-title"></div>
<form method="dialog"> <form method="dialog">
<div class="dialog-content"> <div class="dialog-content">
<input type="text" class="string-value" readonly /><button class="string-copy" type="button"></button> <ul>
<li>
<input type="text" class="string-value" readonly /><button class="string-copy" type="button"></button>
</li>
</ul>
</div> </div>
<div class="dialog-control"><button class="dialog-close brown-button" value="cancel" formmethod="dialog"></button></div> <div class="dialog-control"><button class="dialog-close brown-button" value="cancel" formmethod="dialog"></button></div>
</form> </form>

18
style-fix-html2canvas.css Normal file
View File

@ -0,0 +1,18 @@
@charset "utf-8";
.team-awoken-effect>ul>li {
display: flex;
gap: 3px;
}
.awoken-ul .awoken-count {
display: flex;
}
.member-types .types-ul>li {
display: flex;
}
.member-awoken .awoken-ul>li {
display: flex;
}
.team-total-info-count>ul>li {
display: flex;
flex-direction: row;
}

11
style.css
View File

@ -490,6 +490,11 @@ ul{
#dialog-show-any-string { #dialog-show-any-string {
width: 100%; width: 100%;
} }
#dialog-show-any-string .dialog-content ul li {
display: grid;
gap: 5px;
grid-template-columns: auto 45px;
}
#dialog-search-string #dialog-search-string
{ {
width: 350px; width: 350px;
@ -2325,7 +2330,9 @@ input[disabled]+.awoken-icon:active,
.special-filter-list button { .special-filter-list button {
font-family: var(--icon-font-family); font-family: var(--icon-font-family);
} }
.special-div .button-div .brown-button, .special-div .button-div .brown-button{
padding: 0 15px;
}
.special-filter-list .brown-button { .special-filter-list .brown-button {
padding: 0 5px; padding: 0 5px;
} }
@ -2348,7 +2355,7 @@ input[disabled]+.awoken-icon:active,
margin-right: 3px; margin-right: 3px;
display: grid; display: grid;
gap: 2px; gap: 2px;
grid-template-columns: auto max-content max-content max-content max-content; grid-template-columns: max-content auto max-content max-content max-content max-content;
} }
.special-filter-list :where(select, button) { .special-filter-list :where(select, button) {
font-size: 1.25em; font-size: 1.25em;

8
triple.html
View File

@ -1929,10 +1929,10 @@ const teamsCount = 3;
<div class="button-div"> <div class="button-div">
<button class="special-add brown-button"></button> <button class="special-add brown-button"></button>
<button class="special-clear brown-button"></button> <button class="special-clear brown-button"></button>
<button class="special-star brown-button"></button>
</div> </div>
<ul class="special-filter-list"> <ul class="special-filter-list">
<li> <li>
<select class="filter-kind"></select>
<select class="special-filter"></select> <select class="special-filter"></select>
<button class="copy-filter brown-button"></button> <button class="copy-filter brown-button"></button>
<button class="shift-up-filter brown-button"></button> <button class="shift-up-filter brown-button"></button>
@ -2451,7 +2451,11 @@ const teamsCount = 3;
<div class="dialog-title"></div> <div class="dialog-title"></div>
<form method="dialog"> <form method="dialog">
<div class="dialog-content"> <div class="dialog-content">
<input type="text" class="string-value" readonly /><button class="string-copy" type="button"></button> <ul>
<li>
<input type="text" class="string-value" readonly /><button class="string-copy" type="button"></button>
</li>
</ul>
</div> </div>
<div class="dialog-control"><button class="dialog-close brown-button" value="cancel" formmethod="dialog"></button></div> <div class="dialog-control"><button class="dialog-close brown-button" value="cancel" formmethod="dialog"></button></div>
</form> </form>