From f159bc22564cdd0d2d5b7bb7aef7e08d83966bd4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9E=AB=E8=B0=B7=E5=89=91=E4=BB=99?= Date: Mon, 29 Jul 2024 04:11:53 +0800 Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=96=B0=E4=BF=AE=E8=AE=A2=E5=AD=97?= =?UTF-8?q?=E7=AC=A6=E4=B8=B2=E6=90=9C=E7=B4=A2=E4=B8=BA=E7=A9=BA=E6=A0=BC?= =?UTF-8?q?=E5=88=86=E9=9A=94=E7=AC=A6=EF=BC=8C=E5=BF=85=E9=A1=BB=E5=90=8C?= =?UTF-8?q?=E6=97=B6=E5=8C=B9=E9=85=8D=E5=A4=9A=E4=B8=AA=E5=85=B3=E9=94=AE?= =?UTF-8?q?=E5=AD=97=EF=BC=8C=E5=8D=8A=E8=A7=92=E5=8F=8C=E5=BC=95=E5=8F=B7?= =?UTF-8?q?=E5=8F=AF=E4=BD=BF=E5=85=B3=E9=94=AE=E5=AD=97=E5=8C=85=E5=90=AB?= =?UTF-8?q?=E7=A9=BA=E6=A0=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- multi.html | 10 +++-- script.js | 110 +++++++++++++++++++++++----------------------- service-worker.js | 10 ++--- solo.html | 10 +++-- style.css | 63 ++++++++++++++------------ triple.html | 10 +++-- 6 files changed, 111 insertions(+), 102 deletions(-) diff --git a/multi.html b/multi.html index bebcc540..da43199c 100644 --- a/multi.html +++ b/multi.html @@ -1241,10 +1241,12 @@ const teamsCount = 2;
- - - - +
+ + + + +
diff --git a/script.js b/script.js index ea07a56c..c3e0d7ec 100644 --- a/script.js +++ b/script.js @@ -4168,33 +4168,26 @@ function initialize() { }; //以字符串搜索窗口 const stringSearchDialog = document.getElementById("dialog-search-string"); - function searchByString(str) + //将输入的字符串变为参数数组 + function parseArgumentsString(str) { + const matches = [...str.matchAll(/\"(?[^\"]*)\"|(?\S+)/ig)]; + return matches.map(match=>match?.groups?.arg); + } + function searchByString(str, onlyInTag = false) { // 考虑了一下onlyInTag被废弃了，因为和游戏内搜索不符 - str = str.trim(); - if (str.length == 0) { //如果搜索0，则打开最新的50个 - return Cards.filter(card=>card.enabled).slice(-50); - } else if (str.length>0) - { - return Cards.filter(card => - { - const names = [card.name]; - if (card.otLangName) - { - names.push(...Object.values(card.otLangName)); - } - const tags = card.altName.concat(); - if (card.otTags) - { - tags.push(...card.otTags); - } - return tags.some(astr=>astr.toLowerCase().includes(str.toLowerCase())) || - names.some(astr=>astr.toLowerCase().includes(str.toLowerCase())); - } - ); - }else - { - return []; - } + if (typeof str !== "string") return; + const args = parseArgumentsString(str).map(str=>str.toLowerCase()); + if (args.length === 0) return; + return Cards.filter(card => { + let cardTags = card.altName.concat(card?.otTags ?? []); //加入Tag + if (!onlyInTag) { //如果不是仅搜索Tag，则加入怪物名称 + cardTags.push(card.name); + card.otLangName && cardTags.push(...Object.values(card.otLangName)); + } + cardTags = cardTags.map(str=>str.toLowerCase()); //先转小写 + //每一个参数都需要在搜索内容里 + return args.every(arg=>cardTags.some(str=>str.includes(arg))); + }); } function copyString(input) { @@ -4202,48 +4195,52 @@ function initialize() { input.select(); //选择全部 if (navigator?.clipboard?.writeText) { //优先使用新API navigator.clipboard.writeText(input.value); - } else if (document.execCommand('copy')) { + } else { document.execCommand('copy'); } //input.blur(); //取消焦点 } stringSearchDialog.initialing = function(originalStrArr = [], additionalStrArr = []) { + //清除空字符串 + originalStrArr = originalStrArr.filter(Boolean); + additionalStrArr = additionalStrArr.filter(Boolean); const stringSearchContent = this.querySelector(".dialog-content"); const fragment = document.createDocumentFragment(); - originalStrArr = originalStrArr.filter(Boolean) - additionalStrArr = additionalStrArr.filter(Boolean) - if (originalStrArr.length) { - const ul_original = document.createElement("ul"); - ul_original.className = "original-string"; - originalStrArr.forEach(str=>{ - const li = ul_original.appendChild(document.createElement("li")); - const ipt = li.appendChild(document.createElement("input")); - ipt.className = "string-value"; - ipt.value = str; - ipt.readOnly = true; + function copyLeft() { + copyString(this.parentElement.querySelector(".string-value")); + } + function searchLeft() { + const oStr = this.parentElement.querySelector(".string-value")?.value; + if (!oStr) return; + //把Tag内容加上两侧的双引号，避免被区分成不同的参数 + const str = `"${oStr}"`; + str && showSearch(searchByString(str, true)); + } + function stringLine(str, copy = false) { + const li = document.createElement("li"); + const ipt = li.appendChild(document.createElement("input")); + ipt.className = "string-value"; + ipt.value = str; + ipt.readOnly = true; + if (copy) { const copyBtn = li.appendChild(document.createElement("button")); copyBtn.className = "string-copy"; - copyBtn.onclick = function(){copyString(ipt)}; - const searchBtn = li.appendChild(document.createElement("button")); - searchBtn.className = "string-search"; - searchBtn.onclick = function(){showSearch(searchByString(ipt.value))}; - }); - fragment.appendChild(ul_original); + copyBtn.onclick = copyLeft; + } + const searchBtn = li.appendChild(document.createElement("button")); + searchBtn.className = "string-search"; + searchBtn.onclick = searchLeft; + return li; + } + if (originalStrArr.length) { + const ul_original = fragment.appendChild(document.createElement("ul")); + ul_original.className = "original-string"; + ul_original.append(...originalStrArr.map(str=>stringLine(str, true))); } if (additionalStrArr.length) { - const ul_additional = document.createElement("ul"); + const ul_additional = fragment.appendChild(document.createElement("ul")); ul_additional.className = "additional-string"; - additionalStrArr.forEach(str=>{ - const li = ul_additional.appendChild(document.createElement("li")); - const ipt = li.appendChild(document.createElement("input")); - ipt.className = "string-value"; - ipt.value = str; - ipt.readOnly = true; - const searchBtn = li.appendChild(document.createElement("button")); - searchBtn.className = "string-search"; - searchBtn.onclick = function(){showSearch(searchByString(ipt.value))}; - }); - fragment.appendChild(ul_additional); + ul_additional.append(...additionalStrArr.map(str=>stringLine(str, false))); } stringSearchContent.innerHTML = ""; stringSearchContent.appendChild(fragment); @@ -4902,6 +4899,7 @@ function initialize() { //history.pushState(state, null, location); } searchResultCount.setAttribute("data-search-result-count", searchArr.length); + searchResultCount.textContent = searchArr.length; searchMonList.classList.remove(className_displayNone); }; //对已经搜索到的Cards重新附加显示 diff --git a/service-worker.js b/service-worker.js index c5bfbc0b..d20e91ae 100644 --- a/service-worker.js +++ b/service-worker.js @@ -32311,7 +32311,7 @@ const cachesMap = new Map([ ], [ "multi.html", - "a116c5ab3d074c4b0449529cbd9d7821" + "20f7503e67106e457882ddd5848e422f" ], [ "script-custom_elements.js", @@ -32331,11 +32331,11 @@ const cachesMap = new Map([ ], [ "script.js", - "1c55a5bfbb0ba639c39f5d5be92d5861" + "4f423034d218b6443b52cd4ad053aa3e" ], [ "solo.html", - "5ff05c2ae803d469d388438c3c7c615f" + "4973f9f1a8169d2660cf06205e1f814b" ], [ "style-monsterimages.css", @@ -32343,7 +32343,7 @@ const cachesMap = new Map([ ], [ "style.css", - "4b8d86472d70a8666ee2759342425a0e" + "2074baa0c03382beb5858ae76469b4df" ], [ "temp.js", @@ -32351,7 +32351,7 @@ const cachesMap = new Map([ ], [ "triple.html", - "64a369f4dbfe99ccf9f909e954fa6f46" + "57ff5938b64613dc98dc842cc182c10f" ], [ "languages/en.css", diff --git a/solo.html b/solo.html index 209fc702..2e131226 100644 --- a/solo.html +++ b/solo.html @@ -978,10 +978,12 @@ const teamsCount = 1;
- - - - +
+ + + + +
diff --git a/style.css b/style.css index c1f9774d..733e134c 100644 --- a/style.css +++ b/style.css @@ -361,11 +361,6 @@ ul{ text-align: center; margin-bottom: 5px; } -.dialog .dialog-content .additional-string -{ - border-top: 2px solid white; - margin-top: 5px; -} /*.dialog .dialog-content .additional-string::before { content: "其他語言"; @@ -416,16 +411,30 @@ ul{ } #dialog-search-string { - width: 260px; - top: 100px; + width: 350px; + top: 0; z-index: 2; } +.dialog .dialog-content :where(.original-string, .additional-string) li { + display: grid; + gap: 5px; + margin-bottom: 5px; +} +.dialog .dialog-content .original-string li { + grid-template-columns: auto 45px 45px; +} +.dialog .dialog-content .additional-string li { + grid-template-columns: auto 45px; +} +.dialog .dialog-content .additional-string +{ + border-top: 2px solid white; + margin-top: 5px; +} .dialog .string-copy, .dialog .string-search { box-sizing: border-box; - width: 45px; - margin-left: 5px; cursor: pointer; background-color: #994433; border: 2px solid #FFCC88; @@ -433,22 +442,18 @@ ul{ border-radius: 5px; padding: 0; } -.dialog .string-copy::before -{ +.dialog .string-copy::before { content: "📋"; } -.dialog .string-search::before -{ +.dialog .string-search::before { content: "🔍"; } .dialog .string-value { box-sizing: border-box; - width: calc(100% - 50px * 1); } #dialog-search-string .original-string .string-value { - width: calc(100% - 50px * 2); } /*单个怪物*/ @@ -2227,7 +2232,7 @@ input[disabled]+.awoken-icon:active, margin-right: 3px; } .special-filter-list select{ - font-size: 20px; + font-size: 1.25em; max-width: 100%; box-sizing: border-box; } @@ -2235,9 +2240,13 @@ input[disabled]+.awoken-icon:active, .control-div button{ font-size: 20px; } -.control-div .search-start{ - float: right; - margin-left: 5px; +.search-box .control-div .button-div { + display: grid; + gap: 5px; + grid-template-columns: max-content max-content max-content auto max-content; +} +.control-div .search-start { + grid-column: 5 / 6; } /*.control-div .search-start::before{ content: "开始搜索"; @@ -2264,17 +2273,13 @@ input[disabled]+.awoken-icon:active, .search-mon-list:empty { display: none; } -.search-box .search-list-length -{ - float: right; -} -.search-box .search-list-length[data-search-result-count="0"] -{ - display: none; +.search-box .control-div .sort-div { + display: grid; + gap: 5px; + grid-template-columns: max-content max-content max-content auto max-content; } -.search-box .search-list-length:not([data-search-result-count="0"])::after -{ - content: attr(data-search-result-count); +.search-box .search-list-length { + grid-column: 5 / 6; } /*图鉴模式使用粘性定位*/ .guide-mod .sticky-box { diff --git a/triple.html b/triple.html index 20dbeb7e..38913649 100644 --- a/triple.html +++ b/triple.html @@ -1924,10 +1924,12 @@ const teamsCount = 3;
- - - - +
+ + + + +