更改进化链按钮位置,移动id搜索到锚定区域

This commit is contained in:
枫谷剑仙 2024-03-28 21:52:50 +08:00
parent 2f168da503
commit eae7706177
10 changed files with 69 additions and 78 deletions

View File

@ -42,9 +42,6 @@
.edit-box .edit-box-title.edit-box-title-assist::before{ .edit-box .edit-box-title.edit-box-title-assist::before{
content: "Edit Assist"; content: "Edit Assist";
} }
.edit-box .setting-box .row-mon-id::before{
content: "▼ID and Search";
}
.monsterinfo-box .monster-id::before{ .monsterinfo-box .monster-id::before{
content: "No."; content: "No.";
} }

View File

@ -44,9 +44,6 @@ label[for="languages"]::after{
.edit-box .edit-box-title.edit-box-title-assist::before{ .edit-box .edit-box-title.edit-box-title-assist::before{
content: "変更継承"; content: "変更継承";
} }
.edit-box .setting-box .row-mon-id::before{
content: "▼ID と検索";
}
.monsterinfo-box .monster-id::before{ .monsterinfo-box .monster-id::before{
content: "No."; content: "No.";
} }

View File

@ -44,9 +44,6 @@ label[for="languages"]::after{
.edit-box .edit-box-title.edit-box-title-assist::before{ .edit-box .edit-box-title.edit-box-title-assist::before{
content: "보조 수정"; content: "보조 수정";
} }
.edit-box .setting-box .row-mon-id::before{
content: "▼ID 및 검색";
}
.monsterinfo-box .monster-id::before{ .monsterinfo-box .monster-id::before{
content: "No."; content: "No.";
} }

View File

@ -50,9 +50,6 @@ label[for="languages"]::after{
.edit-box .edit-box-title.edit-box-title-assist::before{ .edit-box .edit-box-title.edit-box-title-assist::before{
content: "修改辅助"; content: "修改辅助";
} }
.edit-box .setting-box .row-mon-id::before{
content: "▼ID 和 搜索";
}
.monsterinfo-box .monster-id::before{ .monsterinfo-box .monster-id::before{
content: "No."; content: "No.";
} }

View File

@ -50,9 +50,6 @@ label[for="languages"]::after{
.edit-box .edit-box-title.edit-box-title-assist::before{ .edit-box .edit-box-title.edit-box-title-assist::before{
content: "修改輔助"; content: "修改輔助";
} }
.edit-box .setting-box .row-mon-id::before{
content: "▼ID 和 搜索";
}
.monsterinfo-box .monster-id::before{ .monsterinfo-box .monster-id::before{
content: "No."; content: "No.";
} }

View File

@ -1275,21 +1275,19 @@ const teamsCount = 2;
<div class="monster-altName"></div> <div class="monster-altName"></div>
</div> </div>
</div> </div>
<div class="id-string-search">
<form id="form-id-search">
<input type="number" step="1" min="0" max="99999" id="card-id" name="card-id"/>
</form>
<form id="form-string-search">
<input type="search" id="search-string" name="search-string" placeholder="🔍" /><button type="sumbit" id="search-by-string"></button>
</form>
</div>
</div> </div>
<div class="setting-box"> <div class="setting-box">
<div class="setting-row row-mon-id"> <div class="setting-row row-mon-id">
<input type="checkbox" class="switch-ipt" name="real-time-change-card" id="real-time-change-card"><label class="switch-lbl" for="real-time-change-card"><circle></circle></label>
<button class="open-evolutionary-tree display-none"></button>
<button class="search-evolution-by-this display-none"><icon class="type-icon" data-type-icon="0"></icon></button>
<div class="id-string-search">
<form id="form-id-search">
<input type="number" step="1" min="0" max="99999" id="card-id" name="card-id"/>
</form>
<form id="form-string-search">
<input type="search" id="search-string" name="search-string" /><button type="sumbit" id="search-by-string"></button>
</form>
</div>
<ul class="evo-card-list"></ul> <ul class="evo-card-list"></ul>
<button class="search-evolution-by-this display-none"><icon class="type-icon" data-type-icon="0"></icon></button>
</div> </div>
<div class="setting-row row-mon-latent"> <div class="setting-row row-mon-latent">
<!--潜在觉醒--> <!--潜在觉醒-->

View File

@ -4643,14 +4643,6 @@ function initialize() {
maskContent.innerHTML = ""; maskContent.innerHTML = "";
maskContent.appendChild(fragment); maskContent.appendChild(fragment);
} }
const openEvolutionaryTree = settingBox.querySelector(".row-mon-id .open-evolutionary-tree");
openEvolutionaryTree.onclick = function(event) {
if (event.ctrlKey) { //显示进化需求树不是常用功能就不做额外的按钮了所以按住Ctrl点击生效
evolutionaryTreeMask.showRequirementTree(editBox.mid);
} else {
evolutionaryTreeMask.show(editBox.mid);
}
};
//显示进化需求树 //显示进化需求树
evolutionaryTreeMask.showRequirementTree = function(monid) evolutionaryTreeMask.showRequirementTree = function(monid)
{ {
@ -5355,15 +5347,6 @@ function initialize() {
const monstersID = document.getElementById("card-id"); const monstersID = document.getElementById("card-id");
// const txtSearchString = document.getElementById("search-string"); // const txtSearchString = document.getElementById("search-string");
// const btnSearchByString = document.getElementById("search-by-string"); // const btnSearchByString = document.getElementById("search-by-string");
//输入id数字即时更新的开关
const realTimeClassName = 'real-time-change-card';
const s_realTimeChangeCard = document.getElementById(realTimeClassName);
s_realTimeChangeCard.onchange = function(e) {
monstersID.oninput = this.checked ? ()=>{formIdSearch.onsubmit();} : null;
if (e) localStorage.setItem(cfgPrefix + realTimeClassName, Number(this.checked));
}
s_realTimeChangeCard.checked = Boolean(Number(localStorage.getItem(cfgPrefix + realTimeClassName)));
s_realTimeChangeCard.onchange(false);
//觉醒 //觉醒
const monEditOuterAwokensRow = editBox.querySelector(".row-awoken-sawoken"); const monEditOuterAwokensRow = editBox.querySelector(".row-awoken-sawoken");
@ -6228,11 +6211,22 @@ function editBoxChangeMonId(id) {
const createCardHead = editBox.createCardHead; const createCardHead = editBox.createCardHead;
const evoCardUl = settingBox.querySelector(".row-mon-id .evo-card-list"); const evoCardUl = settingBox.querySelector(".row-mon-id .evo-card-list");
//进化树
const evolutionaryTreeMask = settingBox.querySelector(".mask-evolutionary-tree");
const openEvolutionaryTreeClick = function(event) {
if (event.ctrlKey) { //显示进化需求树不是常用功能就不做额外的按钮了所以按住Ctrl点击生效
evolutionaryTreeMask.showRequirementTree(editBox.mid);
} else {
evolutionaryTreeMask.show(editBox.mid);
}
};
evoCardUl.classList.add(className_displayNone); evoCardUl.classList.add(className_displayNone);
evoCardUl.innerHTML = ""; //据说直接清空HTML性能更好 evoCardUl.innerHTML = ""; //据说直接清空HTML性能更好
const openEvolutionaryTree = settingBox.querySelector(".row-mon-id .open-evolutionary-tree"); //const openEvolutionaryTree = settingBox.querySelector(".row-mon-id .open-evolutionary-tree");
if (evoLinkCardsIdArray.length > 1) { if (evoLinkCardsIdArray.length > 1) {
let fragment = document.createDocumentFragment(); //创建节点用的临时空间 const fragment = document.createDocumentFragment(); //创建节点用的临时空间
evoLinkCardsIdArray.forEach(function(mid) { evoLinkCardsIdArray.forEach(function(mid) {
const cli = createCardHead(mid, {noTreeCount: true}); const cli = createCardHead(mid, {noTreeCount: true});
if (mid == id) { if (mid == id) {
@ -6240,12 +6234,16 @@ function editBoxChangeMonId(id) {
} }
fragment.appendChild(cli); fragment.appendChild(cli);
}); });
const li = fragment.appendChild(document.createElement("li"));
const openEvolutionaryTree = li.appendChild(document.createElement("button"));
openEvolutionaryTree.classList = "open-evolutionary-tree";
openEvolutionaryTree.onclick = openEvolutionaryTreeClick;
evoCardUl.appendChild(fragment); evoCardUl.appendChild(fragment);
evoCardUl.classList.remove(className_displayNone); evoCardUl.classList.remove(className_displayNone);
openEvolutionaryTree.classList.remove(className_displayNone); //显示进化树按钮 //openEvolutionaryTree.classList.remove(className_displayNone); //显示进化树按钮
}else }else
{ {
openEvolutionaryTree.classList.add(className_displayNone); //隐藏进化树按钮 //openEvolutionaryTree.classList.add(className_displayNone); //隐藏进化树按钮
} }
const searchEvolutionByThis = settingBox.querySelector(".row-mon-id .search-evolution-by-this"); const searchEvolutionByThis = settingBox.querySelector(".row-mon-id .search-evolution-by-this");
//对于进化型才显示 //对于进化型才显示

View File

@ -1013,21 +1013,19 @@ const teamsCount = 1;
<div class="monster-altName"></div> <div class="monster-altName"></div>
</div> </div>
</div> </div>
<div class="id-string-search">
<form id="form-id-search">
<input type="number" step="1" min="0" max="99999" id="card-id" name="card-id"/>
</form>
<form id="form-string-search">
<input type="search" id="search-string" name="search-string" placeholder="🔍" /><button type="sumbit" id="search-by-string"></button>
</form>
</div>
</div> </div>
<div class="setting-box"> <div class="setting-box">
<div class="setting-row row-mon-id"> <div class="setting-row row-mon-id">
<input type="checkbox" class="switch-ipt" name="real-time-change-card" id="real-time-change-card"><label class="switch-lbl" for="real-time-change-card"><circle></circle></label>
<button class="open-evolutionary-tree display-none"></button>
<button class="search-evolution-by-this display-none"><icon class="type-icon" data-type-icon="0"></icon></button>
<div class="id-string-search">
<form id="form-id-search">
<input type="number" step="1" min="0" max="99999" id="card-id" name="card-id"/>
</form>
<form id="form-string-search">
<input type="search" id="search-string" name="search-string" /><button type="sumbit" id="search-by-string"></button>
</form>
</div>
<ul class="evo-card-list"></ul> <ul class="evo-card-list"></ul>
<button class="search-evolution-by-this display-none"><icon class="type-icon" data-type-icon="0"></icon></button>
</div> </div>
<div class="setting-row row-mon-latent"> <div class="setting-row row-mon-latent">
<!--潜在觉醒--> <!--潜在觉醒-->

View File

@ -1415,25 +1415,29 @@ body:not(.solo) .awoken-icon[data-awoken-icon="64"]::after
/*.edit-box .setting-box .row-mon-id::before{ /*.edit-box .setting-box .row-mon-id::before{
content: "▼怪物ID"; content: "▼怪物ID";
}*/ }*/
.row-mon-id .id-string-search { .id-string-search {
display: flex; display: flex;
gap: 20px; gap: 20px;
align-items: baseline; margin-top: 5px;
} }
.row-mon-id .id-string-search :where( .id-string-search,
.id-string-search :where(
input, input,
button button
) { ) {
font-size: 25px; font-size: 25px;
line-height: 25px; line-height: 25px;
height: 100%;
} }
#form-id-search { #form-id-search,
flex: 1 1 auto;
display: flex;
}
#form-string-search { #form-string-search {
flex: 1 1 auto; flex: 1 1 auto;
display: flex; display: flex;
align-items: baseline;
}
#form-id-search::before {
content: "ID:";
text-shadow: 3px 3px 0 black;
} }
#card-id{ #card-id{
box-sizing: border-box; box-sizing: border-box;
@ -1446,7 +1450,7 @@ body:not(.solo) .awoken-icon[data-awoken-icon="64"]::after
#search-by-string{ #search-by-string{
flex: 0 0 50px; flex: 0 0 50px;
} }
.edit-box .setting-box .row-mon-id #search-by-string::before{ #search-by-string::before{
content: "🔍"; content: "🔍";
} }
.edit-box .setting-box .row-mon-id .unable-monster{ .edit-box .setting-box .row-mon-id .unable-monster{
@ -1467,7 +1471,13 @@ body:not(.solo) .awoken-icon[data-awoken-icon="64"]::after
height: 40px; height: 40px;
font-size: 25px; font-size: 25px;
} }
.edit-box .setting-box .row-mon-id .evo-card-list>li, .evo-card-list {
display: inline-flex;
flex-wrap: wrap;
gap: 3px;
margin-top: 5px;
}
.edit-box .search-mon-list>li .edit-box .search-mon-list>li
{ {
display: inline-block; display: inline-block;
@ -3302,6 +3312,10 @@ table .orb-icon
{ {
content: "⛓️进化链"; content: "⛓️进化链";
}*/ }*/
.open-evolutionary-tree {
height: 100%;
box-sizing: border-box;
}
.search-evolution-by-this icon .search-evolution-by-this icon
{ {
transform: scale(50%); transform: scale(50%);

View File

@ -1957,21 +1957,19 @@ const teamsCount = 3;
<div class="monster-altName"></div> <div class="monster-altName"></div>
</div> </div>
</div> </div>
<div class="id-string-search">
<form id="form-id-search">
<input type="number" step="1" min="0" max="99999" id="card-id" name="card-id"/>
</form>
<form id="form-string-search">
<input type="search" id="search-string" name="search-string" placeholder="🔍" /><button type="sumbit" id="search-by-string"></button>
</form>
</div>
</div> </div>
<div class="setting-box"> <div class="setting-box">
<div class="setting-row row-mon-id"> <div class="setting-row row-mon-id">
<input type="checkbox" class="switch-ipt" name="real-time-change-card" id="real-time-change-card"><label class="switch-lbl" for="real-time-change-card"><circle></circle></label>
<button class="open-evolutionary-tree display-none"></button>
<button class="search-evolution-by-this display-none"><icon class="type-icon" data-type-icon="0"></icon></button>
<div class="id-string-search">
<form id="form-id-search">
<input type="number" step="1" min="0" max="99999" id="card-id" name="card-id"/>
</form>
<form id="form-string-search">
<input type="search" id="search-string" name="search-string" /><button type="sumbit" id="search-by-string"></button>
</form>
</div>
<ul class="evo-card-list"></ul> <ul class="evo-card-list"></ul>
<button class="search-evolution-by-this display-none"><icon class="type-icon" data-type-icon="0"></icon></button>
</div> </div>
<div class="setting-row row-mon-latent"> <div class="setting-row row-mon-latent">
<!--潜在觉醒--> <!--潜在觉醒-->