From 3c79cdd3d02521687d88bc5359d3c969a8a4f1ed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9E=AB=E8=B0=B7=E5=89=91=E4=BB=99?= Date: Sat, 27 Apr 2024 06:52:25 +0800 Subject: [PATCH] =?UTF-8?q?1=E3=80=81=E6=94=B9=E5=8F=98ID=E5=92=8C?= =?UTF-8?q?=E6=96=87=E5=AD=97=E6=90=9C=E7=B4=A2=E5=A4=84=E7=9A=84UI?= =?UTF-8?q?=EF=BC=9B2=E3=80=81=E5=B0=86=E6=95=88=E6=9E=9C=E7=9A=84?= =?UTF-8?q?=E7=99=BE=E5=88=86=E6=AF=94=E6=94=B9=E4=B8=BA=E8=AE=A1=E9=87=8F?= =?UTF-8?q?=E6=9D=A1=E6=98=BE=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- languages/en.css | 3 ++ languages/ja.css | 3 ++ languages/ko.css | 3 ++ languages/zh-hans.css | 3 ++ languages/zh-hant.css | 3 ++ multi.html | 4 +- script.js | 51 ++++++++++++++++------ service-worker.js | 20 ++++----- solo.html | 22 ++++++---- style.css | 99 ++++++++++++++++++++++++++++--------------- triple.html | 52 ++++++++++++----------- 11 files changed, 171 insertions(+), 92 deletions(-) diff --git a/languages/en.css b/languages/en.css index 6df01818..3fcfcdef 100644 --- a/languages/en.css +++ b/languages/en.css @@ -267,6 +267,9 @@ label[for="show-team-awoken-count"]::after{ label[for="show-team-awoken-effect"]::after{ content:"Team's Awoken Effect Calculate"; } +label[for="show-meter"]::after{ + content:"Display as Meter bar"; +} label[for="show-team-attrtype-count"]::after{ content:"Team's Rarity, Attributes, Types Count"; } diff --git a/languages/ja.css b/languages/ja.css index 30e4b365..e890d624 100644 --- a/languages/ja.css +++ b/languages/ja.css @@ -261,6 +261,9 @@ label[for="show-team-awoken-count"]::after{ label[for="show-team-awoken-effect"]::after{ content:"チームの覚醒効果の計算"; } +label[for="show-meter"]::after{ + content:"測光バーとして表示"; +} label[for="show-team-attrtype-count"]::after{ content:"チームの希少性、属性、タイプの合計"; } diff --git a/languages/ko.css b/languages/ko.css index 76be7ded..abde11b8 100644 --- a/languages/ko.css +++ b/languages/ko.css @@ -256,6 +256,9 @@ label[for="show-team-awoken-count"]::after{ label[for="show-team-awoken-effect"]::after{ content:"팀의 각성 효과 계산"; } +label[for="show-meter"]::after{ + content:"측광 막대로 표시됨"; +} label[for="show-team-attrtype-count"]::after{ content:"팀의 희귀도, 속성, 유형 수"; } diff --git a/languages/zh-hans.css b/languages/zh-hans.css index 51307d20..b9da7297 100644 --- a/languages/zh-hans.css +++ b/languages/zh-hans.css @@ -262,6 +262,9 @@ label[for="show-team-awoken-count"]::after{ label[for="show-team-awoken-effect"]::after{ content:"队伍觉醒效果计算"; } +label[for="show-meter"]::after{ + content:"显示为计量条"; +} label[for="show-team-attrtype-count"]::after{ content:"队伍稀有度、属性与类型计数"; } diff --git a/languages/zh-hant.css b/languages/zh-hant.css index ef9cc7c6..d29504d8 100644 --- a/languages/zh-hant.css +++ b/languages/zh-hant.css @@ -263,6 +263,9 @@ label[for="show-team-awoken-count"]::after{ label[for="show-team-awoken-effect"]::after{ content:"隊伍覺醒效果計算"; } +label[for="show-meter"]::after{ + content:"顯示為計量條"; +} label[for="show-team-attrtype-count"]::after{ content:"隊伍稀有度、屬性與類型計數"; } diff --git a/multi.html b/multi.html index 0c94d7a3..999ef9ba 100644 --- a/multi.html +++ b/multi.html @@ -1280,7 +1280,9 @@ const teamsCount = 2; diff --git a/script.js b/script.js index 0e8b0861..e8ed99bd 100644 --- a/script.js +++ b/script.js @@ -6255,6 +6255,12 @@ function editBoxChangeMonId(id) { //const openEvolutionaryTree = settingBox.querySelector(".row-mon-id .open-evolutionary-tree"); if (evoLinkCardsIdArray.length > 1) { const fragment = document.createDocumentFragment(); //创建节点用的临时空间 + + const li = fragment.appendChild(document.createElement("li")); + const openEvolutionaryTree = li.appendChild(document.createElement("button")); + openEvolutionaryTree.classList = "open-evolutionary-tree brown-button"; + openEvolutionaryTree.onclick = openEvolutionaryTreeClick; + evoLinkCardsIdArray.forEach(function(mid) { const cli = createCardHead(mid, {noTreeCount: true}); if (mid == id) { @@ -6262,10 +6268,7 @@ function editBoxChangeMonId(id) { } fragment.appendChild(cli); }); - const li = fragment.appendChild(document.createElement("li")); - const openEvolutionaryTree = li.appendChild(document.createElement("button")); - openEvolutionaryTree.classList = "open-evolutionary-tree brown-button"; - openEvolutionaryTree.onclick = openEvolutionaryTreeClick; + evoCardUl.appendChild(fragment); evoCardUl.classList.remove(className_displayNone); //openEvolutionaryTree.classList.remove(className_displayNone); //显示进化树按钮 @@ -6836,6 +6839,7 @@ function refreshTeamAwokenEfeect(awokenEffectDom, team, ti) { //SX if (targetIcon = awokenEffectDom.querySelector(".awoken-icon[data-awoken-icon=\"28\"]")) { const targetValue = targetIcon.parentElement.querySelector(".prob"); + const targetMeter = targetIcon.parentElement.querySelector("meter"); const thisAwokenNum = awokenCountInTeam(team, 28, solo, teamsCount); let prob = thisAwokenNum / 5; switch (badge) { @@ -6846,11 +6850,14 @@ function refreshTeamAwokenEfeect(awokenEffectDom, team, ti) { prob += 1; break; } - targetValue.setAttribute(dataAttrName, Math.round(Math.min(prob,1)*100)); + const percentValue = Math.round(Math.min(prob,1)*100); + targetValue.setAttribute(dataAttrName, percentValue); + targetMeter.value = percentValue; } //暗 if (targetIcon = awokenEffectDom.querySelector(".awoken-icon[data-awoken-icon=\"68\"]")) { const targetValue = targetIcon.parentElement.querySelector(".prob"); + const targetMeter = targetIcon.parentElement.querySelector("meter"); const equivalentAwoken = equivalent_awoken.find(eak => eak.big === 68); const thisAwokenNum = awokenCountInTeam(team, equivalentAwoken.small, solo, teamsCount) + awokenCountInTeam(team, equivalentAwoken.big, solo, teamsCount) * equivalentAwoken.times; @@ -6863,11 +6870,14 @@ function refreshTeamAwokenEfeect(awokenEffectDom, team, ti) { prob += 1; break; } - targetValue.setAttribute(dataAttrName, Math.round(Math.min(prob,1)*100)); + const percentValue = Math.round(Math.min(prob,1)*100); + targetValue.setAttribute(dataAttrName, percentValue); + targetMeter.value = percentValue; } //废 if (targetIcon = awokenEffectDom.querySelector(".awoken-icon[data-awoken-icon=\"69\"]")) { const targetValue = targetIcon.parentElement.querySelector(".prob"); + const targetMeter = targetIcon.parentElement.querySelector("meter"); const equivalentAwoken = equivalent_awoken.find(eak => eak.big === 69); const thisAwokenNum = awokenCountInTeam(team, equivalentAwoken.small, solo, teamsCount) + awokenCountInTeam(team, equivalentAwoken.big, solo, teamsCount) * equivalentAwoken.times; @@ -6880,11 +6890,14 @@ function refreshTeamAwokenEfeect(awokenEffectDom, team, ti) { prob += 1; break; } - targetValue.setAttribute(dataAttrName, Math.round(Math.min(prob,1)*100)); + const percentValue = Math.round(Math.min(prob,1)*100); + targetValue.setAttribute(dataAttrName, percentValue); + targetMeter.value = percentValue; } //毒 if (targetIcon = awokenEffectDom.querySelector(".awoken-icon[data-awoken-icon=\"70\"]")) { const targetValue = targetIcon.parentElement.querySelector(".prob"); + const targetMeter = targetIcon.parentElement.querySelector("meter"); const equivalentAwoken = equivalent_awoken.find(eak => eak.big === 70); const thisAwokenNum = awokenCountInTeam(team, equivalentAwoken.small, solo, teamsCount) + awokenCountInTeam(team, equivalentAwoken.big, solo, teamsCount) * equivalentAwoken.times; @@ -6897,33 +6910,47 @@ function refreshTeamAwokenEfeect(awokenEffectDom, team, ti) { prob += 1; break; } - targetValue.setAttribute(dataAttrName, Math.round(Math.min(prob,1)*100)); + const percentValue = Math.round(Math.min(prob,1)*100); + targetValue.setAttribute(dataAttrName, percentValue); + targetMeter.value = percentValue; } //云 if (targetIcon = awokenEffectDom.querySelector(".awoken-icon[data-awoken-icon=\"54\"]")) { const targetValue = targetIcon.parentElement.querySelector(".prob"); + const targetMeter = targetIcon.parentElement.querySelector("meter"); const thisAwokenNum = awokenCountInTeam(team, 54, solo, teamsCount); let prob = thisAwokenNum / 1; - targetValue.setAttribute(dataAttrName, Math.round(Math.min(prob,1)*100)); + const percentValue = Math.round(Math.min(prob,1)*100); + targetValue.setAttribute(dataAttrName, percentValue); + targetMeter.value = percentValue; } //封条 if (targetIcon = awokenEffectDom.querySelector(".awoken-icon[data-awoken-icon=\"55\"]")) { const targetValue = targetIcon.parentElement.querySelector(".prob"); + const targetMeter = targetIcon.parentElement.querySelector("meter"); const thisAwokenNum = awokenCountInTeam(team, 55, solo, teamsCount); let prob = thisAwokenNum / 1; - targetValue.setAttribute(dataAttrName, Math.round(Math.min(prob,1)*100)); + const percentValue = Math.round(Math.min(prob,1)*100); + targetValue.setAttribute(dataAttrName, percentValue); + targetMeter.value = percentValue; } //掉废 if (targetIcon = awokenEffectDom.querySelector(".latent-icon[data-latent-icon=\"14\"]")) { const targetValue = targetIcon.parentElement.querySelector(".prob"); + const targetMeter = targetIcon.parentElement.querySelector("meter"); let prob = members.some(member=>member?.latent?.includes(14)) ? 1 : 0; - targetValue.setAttribute(dataAttrName, Math.round(Math.min(prob,1)*100)); + const percentValue = Math.round(Math.min(prob,1)*100); + targetValue.setAttribute(dataAttrName, percentValue); + targetMeter.value = percentValue; } //掉毒 if (targetIcon = awokenEffectDom.querySelector(".latent-icon[data-latent-icon=\"15\"]")) { const targetValue = targetIcon.parentElement.querySelector(".prob"); + const targetMeter = targetIcon.parentElement.querySelector("meter"); let prob = members.some(member=>member?.latent?.includes(15)) ? 1 : 0; - targetValue.setAttribute(dataAttrName, Math.round(Math.min(prob,1)*100)); + const percentValue = Math.round(Math.min(prob,1)*100); + targetValue.setAttribute(dataAttrName, percentValue); + targetMeter.value = percentValue; } //心横解转转 if (targetIcon = awokenEffectDom.querySelector(".latent-icon[data-latent-icon=\"40\"]")) { diff --git a/service-worker.js b/service-worker.js index 13a0fcb9..8c8a8217 100644 --- a/service-worker.js +++ b/service-worker.js @@ -26191,7 +26191,7 @@ const cachesMap = new Map([ ], [ "multi.html", - "f30df83eaac9f7df6dbb422b2df2d11f" + "5b452eea55769c3fee713f9e7a526a08" ], [ "script-custom_elements.js", @@ -26211,11 +26211,11 @@ const cachesMap = new Map([ ], [ "script.js", - "b88369cfd8d91ed68e57c8c2d5c5e9f8" + "f228089acd5a5362b376a5c13696a88b" ], [ "solo.html", - "19ece08cfb767949c4ec60f1621bb456" + "fa7ba118c169018a3ba161757a404cc3" ], [ "style-monsterimages.css", @@ -26223,7 +26223,7 @@ const cachesMap = new Map([ ], [ "style.css", - "c0797e33a91d1003e3f26b6740893461" + "c34c2e4307455d12036d8bb587a3d7d6" ], [ "temp.js", @@ -26231,11 +26231,11 @@ const cachesMap = new Map([ ], [ "triple.html", - "bcb2e5b2bec153ec15bc97e9f7c0488e" + "15e16a8db1bebdb59251e8e5026e5258" ], [ "languages/en.css", - "e5a21ebe0953c072015a9ffc89a32589" + "d70cb92c024d42de25bcb564dc78eb2b" ], [ "languages/en.js", @@ -26243,7 +26243,7 @@ const cachesMap = new Map([ ], [ "languages/ja.css", - "3f799231dc30a264b17fd0c56963bce7" + "d3b1f5d7cb66880833180650f38405db" ], [ "languages/ja.js", @@ -26251,7 +26251,7 @@ const cachesMap = new Map([ ], [ "languages/ko.css", - "530f343e7422816a3db9fbeb0b6c64ed" + "f8b6f1d4317a5fb942fec02d35be2fbe" ], [ "languages/ko.js", @@ -26263,7 +26263,7 @@ const cachesMap = new Map([ ], [ "languages/zh-hans.css", - "3ce8d2a490a532f4d5084bbe46c00cbd" + "c9c2c2056ecff32200beee8209f0652c" ], [ "languages/zh-hans.js", @@ -26271,7 +26271,7 @@ const cachesMap = new Map([ ], [ "languages/zh-hant.css", - "96920dbb7191e9e32c948165b820a3b7" + "21de0314dbf99b2201fc7f98d5939447" ], [ "languages/zh-hant.js", diff --git a/solo.html b/solo.html index d149c253..fee640a1 100644 --- a/solo.html +++ b/solo.html @@ -61,6 +61,7 @@ const teamsCount = 1; + @@ -488,19 +489,19 @@ const teamsCount = 1;
diff --git a/style.css b/style.css index 75d6c4af..5cd5e774 100644 --- a/style.css +++ b/style.css @@ -265,7 +265,7 @@ label[for="siwtch-code-mode"]::after { display: none; } -input+label{ +.switch-ipt+label{ margin-right: 3px; } input[type="checkbox"].switch-ipt { @@ -733,7 +733,9 @@ body:not(.show-team-awoken-count) .team-awoken, /*队伍觉醒统计*/ body:not(.show-team-total-info) :where(.tIf-total-hp, .tIf-effect), body:not(.show-team-attrtype-count) .team-total-info-count, /*稀有度、属性与类型计数*/ body:not(.show-team-awoken-effect) .team-awoken-effect, /*队伍觉醒效果统计*/ -body:not(.show-rich-text-tools) #rich-text-tools /*队伍觉醒效果统计*/ +body:not(.show-meter) meter, /*显示计量条*/ +body.show-meter meter+span, +body:not(.show-rich-text-tools) #rich-text-tools /*富文本框选择器*/ { display: none !important; } @@ -1433,10 +1435,11 @@ body:not(.solo) .awoken-icon[data-awoken-icon="64"]::after content: "▼怪物ID"; }*/ .id-string-search { - display: flex; + display: grid; + grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 5px; - padding: 0 5px; + padding: 0 10px; } .id-string-search, .id-string-search :where( @@ -1449,27 +1452,52 @@ body:not(.solo) .awoken-icon[data-awoken-icon="64"]::after } #form-id-search, #form-string-search { - flex: 1 1 auto; - display: flex; - align-items: baseline; + box-sizing: border-box; + border: #000000AA solid 1px; + background-color: white; + border-radius: 3px; + display: grid; + align-items: center; + color: black; } -#form-id-search::before { +#form-id-search { + grid-template-columns: min-content 1fr; +} +#form-string-search { + grid-template-columns: min-content 1fr min-content; +} +label[for="card-id"]::before { content: "ID:"; - text-shadow: 3px 3px 0 black; +} +label[for="search-string"]::before { + content: "\f002"; + padding: 0 3px; + font-family: var(--icon-font-family); } #card-id{ + background: none; + border: none; box-sizing: border-box; width: 100%; height: 100%; } #search-string{ - flex: 1 1 auto; + background: none; + border: none; + box-sizing: border-box; } #search-by-string{ - flex: 0 0 50px; + background: none; + border: none; + box-sizing: border-box; + height: 100%; +} +#search-by-string:hover { + background-color: #00000044; } #search-by-string::before{ - content: "🔍"; + content: "\f061"; + font-family: var(--icon-font-family); } .edit-box .setting-box .row-mon-id .unable-monster{ pointer-events: none; @@ -1505,27 +1533,30 @@ body:not(.solo) .awoken-icon[data-awoken-icon="64"]::after display: inline-block; vertical-align: bottom; } -.edit-box .setting-box .row-mon-id .evo-card-list .monster, .edit-box .search-mon-list .monster, -.detail-mon .monster, -.mask-evolutionary-tree .evo-panel-left>.monster-head>.monster +.mask-evolutionary-tree .evo-panel-left .monster { - float: none; transform: scale(0.75); margin: calc(-100px * (1 - 0.75) / 2); } -.edit-box .setting-box .row-mon-id .evo-card-list .monster .id, +.edit-box .evo-card-list .monster, +.edit-box .detail-mon .monster, +.mask-evolutionary-tree .evo-materials .monster +{ + transform: scale(0.6); + margin: calc(-100px * (1 - 0.6) / 2); +} +.rich-text .detail-mon .monster{ + transform: scale(0.5); + margin: calc(-100px * (1 - 0.5) / 2); +} +.evo-card-list .monster .id, .edit-box .search-mon-list .monster .id, .detail-mon .monster .id{ bottom: 5px; font-size: 20px; } -.edit-box .setting-box .row-mon-id .evo-card-list .monster -{ - transform: scale(0.6); - margin: calc(-100px * (1 - 0.6) / 2); -} -.edit-box .setting-box .row-mon-id .evo-card-list .monster .id +.evo-card-list .monster .id { font-size: 1.4em; font-weight: bold; @@ -1542,10 +1573,6 @@ body:not(.solo) .awoken-icon[data-awoken-icon="64"]::after width: 50px; height: 50px; } -.rich-text .detail-mon .monster{ - transform: scale(0.5); - margin: calc(-100px * (1 - 0.5) / 2); -} .rich-text .detail-mon .monster .id{ background-color: rgba(0,0,0,0.5); padding: 2px; @@ -2913,13 +2940,16 @@ a.series-search::before { height: 20px; } .team-awoken-effect .team-flags .team-member-icon[data-value="0"] { - background-color: red; + background-color: #E22850; + border-color: #810220; } .team-awoken-effect .team-flags .team-member-icon[data-value="50"] { - background-color: pink; + background-color: #FFBD4F; + border-color: #D2811E; } .team-awoken-effect .team-flags .team-member-icon[data-value="100"] { - background-color: lightgreen; + background-color: #00AB60; + border-color: #056139; } .team-awoken-effect .orb-list .orb { @@ -2930,6 +2960,10 @@ a.series-search::before { text-align: center; } +.team-awoken-effect meter{ + width: 70px; +} +.team-awoken-effect meter[value="100"], .team-awoken-effect .prob[data-value="100"] { color: #28c031; text-shadow: black 1px 1px 1px; @@ -3395,11 +3429,6 @@ table .orb-icon { display: inline-block; } -.mask-evolutionary-tree .evo-materials .monster -{ - transform: scale(0.60); - margin: calc(-100px * (1 - 0.60) / 2); -} .mask-evolutionary-tree .evo-panel-left>.monster-head>.monster .id { bottom: 5px; diff --git a/triple.html b/triple.html index 9eb84a36..3f30b413 100644 --- a/triple.html +++ b/triple.html @@ -500,19 +500,19 @@ const teamsCount = 3;
    -
    • -
    • -
    • -
    • -
    • -
    • +
    • +
    • +
    • +
    • +
    • +
    • -
    • -
    • +
    • +
    @@ -1432,19 +1432,19 @@ const teamsCount = 3;
    -
    • -
    • -
    • -
    • -
    • -
    • +
    • +
    • +
    • +
    • +
    • +
    • -
    • -
    • +
    • +
    @@ -1962,7 +1962,9 @@ const teamsCount = 3;