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

6
multi.html
View File

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

713
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;
}
//返回可用的怪物名称
function returnMonsterNameArr(card, lsList, defaultCode) {
function returnMonsterNameArr(card, lsList = currentLanguage.searchlist, defaultCode = currentDataSource.code) {
const monNameArr = lsList.map(lc => { //取出每种语言
if (lc == defaultCode)
return card.name;

183
script.js
View File

@ -4716,18 +4716,20 @@ function initialize() {
const s_specialDiv = searchBox.querySelector(".special-div");
const specialAdd = s_specialDiv.querySelector(".special-add");
const specialClear = s_specialDiv.querySelector(".special-clear");
const specialStar = s_specialDiv.querySelector(".special-star");
const specialFilterUl = s_specialDiv.querySelector(".special-filter-list");
const specialFilterFirstLi = specialFilterUl.querySelector("li");
const specialFirstSelect = specialFilterFirstLi.querySelector(".special-filter");
const specialFirstKind = specialFilterFirstLi.querySelector(".filter-kind");
function filterCopy() {
const target = this.parentElement;
const newFilter = target.cloneNode(true);
const newSelect = newFilter.querySelector(".special-filter");
newSelect.selectedIndex = target.querySelector(".special-filter").selectedIndex;
const newSelects = newFilter.querySelectorAll("select");
const oldSelects = target.querySelectorAll("select");
for (let i = 0; i < oldSelects.length; i++) {
newSelects[i].selectedIndex = oldSelects[i].selectedIndex;
}
filterBindOnclick(newFilter);
target.insertAdjacentElement('afterend', newFilter);
return newSelect;
return newFilter;
}
function filterShiftUp() {
const parent = this.parentElement;
@ -4755,14 +4757,6 @@ function initialize() {
}
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"));
if (Array.isArray(strMakedConfig)) {
@ -4778,81 +4772,81 @@ function initialize() {
}
});
}
specialFirstSelect.refreshList = function() {
const _this = specialFirstSelect;
function addNewOption(sfunc, groudIndex){
if (sfunc.group)
function newSpecialSearchOption(func, indexs)
{
const groupName = returnMonsterNameArr(sfunc, currentLanguage.searchlist, currentDataSource.code)[0];
const optgroup = _this.appendChild(document.createElement("optgroup"));
let funcName = returnMonsterNameArr(func)[0];
//是组的，显示箭头
if (Array.isArray(func.functions)) funcName += " " + localTranslating.has_sub_filter;
//有附加显示的，名称增加一个附加显示图标
if (func.addition) funcName += " " + localTranslating.addition_display;
return new Option(
funcName,
indexs.join("|") //值为 组序号|组内序号
);
}
function addNewOption(sfunc, indexs){
if (!Array.isArray(indexs)) indexs = [indexs];
if (Array.isArray(sfunc.functions)) {
//增加组
const groupName = returnMonsterNameArr(sfunc)[0];
const optgroup = this.appendChild(document.createElement("optgroup"));
optgroup.label = groupName;
if (sfunc.functions)
{
sfunc.functions.forEach((_sfunc, filterIndex)=>{
optgroup.appendChild(newSpecialSearchOption(_sfunc, groudIndex, filterIndex));
});
}
}else
{
_this.options.add(newSpecialSearchOption(sfunc, groudIndex));
}
}
_this.innerHTML = '';
addNewOption(specialSearchFunctions[0], 0);
if (markedFilter.length > 0) {
const groupName = "=====★=====";
const optgroup = _this.appendChild(document.createElement("optgroup"));
optgroup.label = groupName;
markedFilter.forEach(([groudIndex, filterIndex])=>{
const funcObj = filterIndex !== undefined ? specialSearchFunctions[groudIndex].functions[filterIndex] : specialSearchFunctions[groudIndex];
optgroup.appendChild(newSpecialSearchOption(funcObj, groudIndex, filterIndex));
});
}
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");
const newOptions = sfunc.functions.map((_sfunc, filterIndex)=>
newSpecialSearchOption(_sfunc, indexs.concat(filterIndex))
);
optgroup.append(...newOptions);
} 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) {
const specialFilterLi = specialFilterFirstLi.cloneNode(true);
const specialFilterSelection = specialFilterLi.querySelector(".special-filter");
specialFilterUl.appendChild(specialFilterLi);
return specialFilterSelection;
const newFilterLi = specialFilterFirstLi.cloneNode(true);
filterBindOnclick(newFilterLi);
const kindSelect = newFilterLi.querySelector(".filter-kind");
kindSelect.onchange = specialFilterRefreshSubFilters;
kindSelect.onchange();
specialFilterUl.appendChild(newFilterLi);
return newFilterLi;
}
specialClear.onclick = function() {
searchMonList.customAddition = null;
specialFilterUl.innerHTML = "";
specialFilterUl.appendChild(specialFilterFirstLi);
specialFirstSelect.selectedIndex = 0;
}
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));
specialFirstKind.selectedIndex = 0;
specialFirstKind.onchange();
}
const s_controlDiv = searchBox.querySelector(".control-div");
@ -5018,16 +5012,25 @@ function initialize() {
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++) {
specialFilterSelections.push(specialAdd.onclick.onclick());
for (let i = specialFilterLis.length; i < specialFilters.length; i++) {
specialFilterLis.push(specialAdd.onclick());
}
//将每一个搜索都设置好
for (let i = 0; i < specialFilters.length; i++) {
const filterSelection = specialFilterSelections[i];
const filter = specialFilters[i];
filterSelection.value = filter.join("|");
const indexs = specialFilters[i];
const filterLi = specialFilterLis[i];
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"))
.map(select=>select.value.split("|").map(Number)) //将字符串"1|2"转换成数组[1,2]
.filter(([f1, f2])=>!(f1===0&&f2===undefined)); //去掉0号筛选
const specialFilters = [...specialFilterUl.querySelectorAll("li")].map(li=>{
const values = [...li.querySelectorAll("select")].map(select=>select.value.split("|").map(Number));
values.sort((a,b)=>b.length-a.length); //长的在前
return values[0];
});
const options = {
attrs,
@ -5081,12 +5086,10 @@ function initialize() {
let searchResult = searchCards(Cards, options);
//进行特殊附加搜索
const specialFilters = options.specialFilters.map(([name1, name2])=>
name2 !== undefined ? specialSearchFunctions[name1].functions[name2] : specialSearchFunctions[name1]
);
searchResult = specialFilters.reduce((pre,funcObj)=>
const specialFilters = options.specialFilters.map(getSpecialSearchFunctionsFromIndex);
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); //如果有附加显示，则添加到列表
return funcObj.function(pre); //结果进一步筛选
}, searchResult);

6
solo.html
View File

@ -984,10 +984,10 @@ const teamsCount = 1;
<div class="button-div">
<button class="special-add brown-button"></button>
<button class="special-clear brown-button"></button>
<button class="special-star brown-button"></button>
</div>
<ul class="special-filter-list">
<li>
<select class="filter-kind"></select>
<select class="special-filter"></select>
<button class="copy-filter brown-button"></button>
<button class="shift-up-filter brown-button"></button>
@ -1506,7 +1506,11 @@ const teamsCount = 1;
<div class="dialog-title"></div>
<form method="dialog">
<div class="dialog-content">
<ul>
<li>
<input type="text" class="string-value" readonly /><button class="string-copy" type="button"></button>
</li>
</ul>
</div>
<div class="dialog-control"><button class="dialog-close brown-button" value="cancel" formmethod="dialog"></button></div>
</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 {
width: 100%;
}
#dialog-show-any-string .dialog-content ul li {
display: grid;
gap: 5px;
grid-template-columns: auto 45px;
}
#dialog-search-string
{
width: 350px;
@ -2325,7 +2330,9 @@ input[disabled]+.awoken-icon:active,
.special-filter-list button {
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 {
padding: 0 5px;
}
@ -2348,7 +2355,7 @@ input[disabled]+.awoken-icon:active,
margin-right: 3px;
display: grid;
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) {
font-size: 1.25em;

6
triple.html
View File

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