From df8cfb76cbf500e3a1f0d0cdd9414eeaef0bc6c2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9E=AB=E8=B0=B7=E5=89=91=E4=BB=99?= Date: Thu, 24 Dec 2020 17:50:41 +0800 Subject: [PATCH] =?UTF-8?q?=E8=BF=98=E6=98=AF=E6=9C=89=E5=87=8F=E6=8E=89?= =?UTF-8?q?=E6=8C=89=E9=92=AE=E6=9B=B4=E5=A5=BD=E7=82=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- script.js | 79 +++++++++++---------------- solo.html | 158 +++++++++++++++++++++++++++--------------------------- style.css | 97 ++++++++++++++++++++------------- 3 files changed, 172 insertions(+), 162 deletions(-) diff --git a/script.js b/script.js index f68d17dc..b6f978d5 100644 --- a/script.js +++ b/script.js @@ -1360,11 +1360,11 @@ function initialize() { //const s_rare = s_rareLi.map(li=>li.querySelector(".rare-check")); //checkbox集合 const s_awokensDiv = searchBox.querySelector(".awoken-div"); - const s_awokensUl = s_awokensDiv.querySelector(".awoken-ul"); + const s_awokensUl = s_awokensDiv.querySelector(".all-awokens"); const s_awokensLi = Array.from(s_awokensUl.querySelectorAll(".awoken-count")); const s_awokensIcons = s_awokensLi.map(li => li.querySelector(".awoken-icon")); - s_awokensUl.originalSorting = s_awokensIcons.map(icon => parseInt(icon.getAttribute("data-awoken-icon"), 10)); - const s_awokensCounts = s_awokensLi.map(li => li.querySelector(".count")); + const s_awokensSubs = s_awokensLi.map(li => li.querySelector(".awoken-sub1")); + s_awokensUl.originalSorting = s_awokensIcons.map(icon => parseInt(icon.getAttribute("data-awoken-icon"), 10)); //储存觉醒列表的原始排序 const searchMonList = searchBox.querySelector(".search-mon-list"); //搜索结果列表 searchMonList.originalHeads = null; //用于存放原始搜索结果 @@ -1419,32 +1419,28 @@ function initialize() { s_showOfficialAwokenSorting.checked = Boolean(parseInt(localStorage.getItem("PADDF-" + officialSortingClassName))); s_showOfficialAwokenSorting.onchange(); - function search_awokenAdd1() { - const countDom = this.parentNode.querySelector(".count"); - let count = parseInt(countDom.value, 10); + let count = parseInt(this.value || 0, 10); if (count < 9) { count++; - countDom.value = count; this.setAttribute("value", count); - //this.parentNode.classList.remove("zero"); } } function search_awokenClear() { this.setAttribute("value", 0); - const countDom = this.parentNode.querySelector(".count"); - countDom.value = 0; - //this.parentNode.classList.add("zero"); } - const longPressDuration = 1000; //1秒钟 + const longPressDuration = 700; //700毫秒 function search_awokenLongPressStart(e) { + console.log(e); let _this = this; this.longPress = setTimeout(function(){ search_awokenClear.apply(_this); }, longPressDuration); this.startTime = new Date(); //仅仅给自己设一个开始时间 + e.preventDefault(); } function search_awokenLongPressEnd(e) { + console.log(e); const endTime = new Date(); if ((endTime - this.startTime) < longPressDuration) { @@ -1453,39 +1449,36 @@ function initialize() { clearTimeout(this.longPress); this.startTime = null; } - function search_awokenLongPressBreak(e) { - const endTime = new Date(); + function search_awokenLongPressCancel(e) { + console.log(e); clearTimeout(this.longPress); this.startTime = null; } - s_awokensIcons.forEach((b, idx) => { //每种觉醒增加1 - //b.onclick = search_awokenAdd1; - b.onmousedown = search_awokenLongPressStart; - b.onmouseup = search_awokenLongPressEnd; - b.onmouseout = search_awokenLongPressBreak; + s_awokensIcons.forEach(b => { + //b.ontouchstart = search_awokenLongPressStart; + //b.ontouchend = search_awokenLongPressEnd; + //b.ontouchcancel = search_awokenLongPressCancel; + //b.onmousedown = search_awokenLongPressStart; + //b.onmouseup = search_awokenLongPressEnd; + //b.onmouseout = search_awokenLongPressCancel; + b.onclick = search_awokenAdd1; //每种觉醒增加1 }); function search_awokenSub1() { - let count = parseInt(this.value, 10); + const awokenIcon = this.previousElementSibling; + let count = parseInt(awokenIcon.value || 0, 10); if (count > 0) { count--; - this.value = count; - this.parentNode.parentNode.querySelector(".awoken-icon").setAttribute("value", count); - if (count === 0) { - //this.parentNode.parentNode.classList.add("zero"); - } + awokenIcon.setAttribute("value", count); } } - s_awokensCounts.forEach((b, idx) => { //每种觉醒减少1 - b.onclick = search_awokenSub1; + s_awokensSubs.forEach(b => { + b.onclick = search_awokenSub1; //每种觉醒减少1 }); const awokenClear = searchBox.querySelector(".awoken-div .awoken-clear"); const sawokenClear = searchBox.querySelector(".sawoken-div .sawoken-clear"); awokenClear.onclick = function() { //清空觉醒选项 - s_awokensCounts.forEach(t => { - t.value = 0; - }); s_awokensIcons.forEach(t => { t.setAttribute("value", 0); }); @@ -1595,9 +1588,12 @@ function initialize() { s_rareHighs.filter(returnCheckedInput).map(returnInputValue).map(Str2Int)[0], ]; const sawokensFilter = s_sawokens.filter(returnCheckedInput).map(returnInputValue).map(Str2Int); - const awokensFilter = s_awokensCounts.filter(btn => parseInt(btn.value, 10) > 0).map(btn => { - const awokenIndex = parseInt(btn.parentNode.parentNode.querySelector(".awoken-icon").getAttribute("data-awoken-icon"), 10); - return { id: awokenIndex, num: parseInt(btn.value, 10) }; + const awokensFilter = s_awokensIcons.filter(btn => parseInt(btn.value, 10) > 0).map(btn => { + const awokenIndex = parseInt(btn.getAttribute("data-awoken-icon"), 10); + return { + id: awokenIndex, + num: parseInt(btn.value, 10) + }; }); const searchResult = searchCards(cards, attr1, attr2, @@ -1626,23 +1622,12 @@ function initialize() { s_types.forEach(t => { t.checked = false; }); + s_typeAndOr.onchange(); s_rareLows[0].checked = true; s_rareHighs[9].checked = true; - s_typeAndOr.onchange(); - s_awokensCounts.forEach(t => { - t.value = 0; - }); - s_awokensLi.forEach(t => { - t.classList.add("zero"); - }); - // 这些觉醒的选项干脆都不清除 - //s_awokensEquivalent.checked = false; - //if (s_includeSuperAwoken.checked) s_includeSuperAwoken.click(); - - s_sawokens.forEach(t => { - t.checked = false; - }); + awokenClear.click(); + sawokenClear.click();; searchMonList.originalHeads = null; searchMonList.innerHTML = ""; diff --git a/solo.html b/solo.html index 298e4bb8..ea198de2 100644 --- a/solo.html +++ b/solo.html @@ -485,84 +485,86 @@ var formation = new Formation(teamsCount,6);
-
diff --git a/style.css b/style.css index 76ade163..ccb90b96 100644 --- a/style.css +++ b/style.css @@ -990,6 +990,8 @@ ul{ display: inline-block; vertical-align: top; font-size:16px; +} +.search-box .attr-list>li{ overflow: hidden; } .search-box>div>ul>li>label{ @@ -1194,38 +1196,6 @@ ul{ .sawoken-div{ display: inline-block; } -.awoken-div .awoken-icon{ - position: relative; - opacity: var(--search-icon-unchecked); -} -.awoken-div .awoken-icon:not([value="0"]){ - opacity: 1; -} -.awoken-div .awoken-icon~.count-symbol{ - opacity: var(--search-icon-unchecked); -} -.awoken-div .awoken-icon:not([value="0"])~.count-symbol{ - opacity: 1; -} - -.awoken-div .awoken-icon::before{ - display: none; -} -.awoken-div .awoken-icon:not([value="0"])::before{ - display: inline-block; - content: attr(value); - position: absolute; - line-height: 18px; - font-size: 18px; - right: 0; - bottom: 0; - -webkit-text-stroke: 1px black; - text-stroke: 1px black; - text-shadow: black 1px 1px 1px; -} -.count-symbol{ - display: none !important; -} .search-box .awoken-div .awoken-clear::before, .search-box .sawoken-div .sawoken-clear::before @@ -1239,7 +1209,7 @@ ul{ } .awoken-div .awoken-ul.official-awoken-sorting { - width: 350px; + width: 490px; } .awoken-ul .awoken-count { @@ -1258,14 +1228,13 @@ ul{ display: inline-block; vertical-align: middle; } -.awoken-ul .count::before, -.search-box .awoken-div .count-symbol::before +.awoken-ul .count::before { content: "×"; } -.search-box .awoken-ul button, -.search-box .awoken-ul input[type='button'] +.search-box .awoken-div .awoken-icon { + position: relative; border: none; background-color: unset; font-family: var(--game-font-family); @@ -1275,6 +1244,60 @@ ul{ padding: 0; text-align: left; } + +.search-box .awoken-div .awoken-icon:not([value]), +.search-box .awoken-div .awoken-icon[value="0"], +.search-box .awoken-div .awoken-icon:not([value])~.awoken-sub1, +.search-box .awoken-div .awoken-icon[value="0"]~.awoken-sub1 +{ + opacity: var(--search-icon-unchecked); +} +.awoken-div .awoken-icon:not([value="0"])::before +{ + display: inline-block; + content: attr(value); + position: absolute; + line-height: 18px; + font-size: 18px; + right: 0; + bottom: 0; + -webkit-text-stroke: 1px black; + text-stroke: 1px black; + text-shadow: black 1px 1px 1px; +} +.awoken-div .awoken-sub1 +{ + background-image: linear-gradient(to bottom,#C38E5F,#2F2008); + border: none; + border-radius: 5px; + padding: 2px; + cursor: pointer; + transition: transform 0.1s; + height: 32px; +} +.awoken-div .awoken-sub1::before +{ + line-height: unset; + display: inline-block; + box-sizing: border-box; + background-color: #956A42; + background-image: url(images/slate.svg); + background-size: 120px 120px; + border-radius: 2px; + vertical-align: middle; + color: white; + font-family: var(--game-font-family); + text-shadow: black 2px 2px 0; +} +.awoken-div .awoken-sub1::before +{ + content: "▼"; +} +.awoken-div .awoken-sub1:active +{ + transform: scale(1.1); +} + .search-box .awoken-ul .awoken-count.zero{ opacity: var(--search-icon-unchecked); }