From 534a07e53d612cb067b4991ba6c6cbfec80ca1c4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9E=AB=E8=B0=B7=E5=89=91=E4=BB=99?= Date: Tue, 13 May 2025 20:33:26 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=9E=E7=8E=B0=E6=80=AA=E7=89=A9=E4=BF=A1?= =?UTF-8?q?=E6=81=AF=E7=9A=84=E4=BE=A7=E6=A0=8F=E6=A8=A1=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- script-universal_function.js | 21 +++++----- script.js | 51 ++++++++++++++++--------- style-monsterimages.css | 24 +----------- style.css | 74 +++++++++++++++++++++++++++++++----- 4 files changed, 110 insertions(+), 60 deletions(-) diff --git a/script-universal_function.js b/script-universal_function.js index 940e4641..26437054 100644 --- a/script-universal_function.js +++ b/script-universal_function.js @@ -1290,23 +1290,24 @@ function createTeamFlags(target, type) return ul; } -function showSearchBySeriesId(sId, sType) { +function searchBySeriesId(sId, sType) { switch (sType) { case "collab": {//合作 - if (!Number.isInteger(sId)) sId = parseInt(sId, 10); - showSearch(Cards.filter(card => card.collabId == sId)); - break; + if (!Number.isInteger(sId)) + sId = parseInt(sId, 10); + return Cards.filter(card => card.collabId == sId); } case "gacha": {//桶，是数组 - if (!sId.every(id=>Number.isInteger(id))) sId = sId,map(id=>parseInt(id, 10)); - showSearch(sId.flatMap(gachaId=>Cards.filter(card => card.gachaIds.includes(gachaId)))); - break; + if (!sId.every(id=>Number.isInteger(id))) + sId = sId.map(id=>parseInt(id, 10)); + return sId.flatMap(gachaId=> + Cards.filter(card => card.gachaIds.includes(gachaId))); } case "series": default: { //系列 - if (!Number.isInteger(sId)) sId = parseInt(sId, 10); - showSearch(Cards.filter(card => card.seriesId == sId)); - break; + if (!Number.isInteger(sId)) + sId = parseInt(sId, 10); + return Cards.filter(card => card.seriesId == sId); } } } diff --git a/script.js b/script.js index fdb345b4..ae3a01c0 100644 --- a/script.js +++ b/script.js @@ -3506,7 +3506,7 @@ function initialize() { } colorChooser.onchange(false); //添加头像图标 - insertCardAvatar.onclick = insertIconToText + insertCardAvatar.onclick = insertIconToText; //添加其他序号图标 function insertIconToText() { //如果并没有任何选择区，则返回 @@ -3750,7 +3750,7 @@ function initialize() { event.dataTransfer.dropEffect = isCopy ? 'copy' : 'move'; let newIcon; - let dataFormStr, cardId; + let dataFormStr, dataCardId; if (dataFormStr = event.dataTransfer.getData('from')) { //从队伍里拖下来的,需要重新创建怪物头像,强制复制 event.preventDefault(); const [teamNum, isAssist, indexInTeam] = JSON.parse(dataFormStr); @@ -3769,8 +3769,8 @@ function initialize() { const {type, index} = JSON.parse(indexed); newIcon = createIndexedIcon(type, index); } - } else if (cardId = event.dataTransfer.getData('card-id')) { - newIcon = createIndexedIcon("card", parseInt(cardId, 10)); + } else if (dataCardId = event.dataTransfer.getData('card-id')) { + newIcon = createIndexedIcon("card", parseInt(dataCardId, 10)); } // 重置引用 draggedNode = null; @@ -3843,6 +3843,8 @@ function initialize() { function clickMonHead(e) { const arr = getMemberArrayIndexFromMonHead(this); editBox.editMon(arr[0], arr[1], arr[2]); + allMembers.forEach(member=>member.classList.remove("hightlight")); + this.classList.add("hightlight"); return false; //没有false将会打开链接 } //编辑界面每个怪物的头像的拖动 @@ -3857,17 +3859,27 @@ function initialize() { } //编辑界面每个怪物的头像的放下 function dropMonHead(event) { - const formStr = event.dataTransfer.getData('from'); - if (!formStr) return false; - const dataFrom = JSON.parse(formStr); - const dataTo = getMemberArrayIndexFromMonHead(this); + event.preventDefault(); + let dataFormStr, dataCardId; + if (dataFormStr = event.dataTransfer.getData('from')) { + //从队伍里拖过来的，进行交换 + const dataFrom = JSON.parse(dataFormStr); + const dataTo = getMemberArrayIndexFromMonHead(this); - if ((dataTo[0] !== dataFrom[0]) || - (dataTo[1] !== dataFrom[1]) || - (dataTo[2] !== dataFrom[2])) { //必须有所不同才继续交换 - interchangeCard(dataFrom, dataTo, event.ctrlKey); + if ((dataTo[0] !== dataFrom[0]) || + (dataTo[1] !== dataFrom[1]) || + (dataTo[2] !== dataFrom[2])) { //必须有所不同才继续交换 + interchangeCard(dataFrom, dataTo, event.ctrlKey); + } } - return false; //没有false将会打开链接 + else if (dataCardId = event.dataTransfer.getData('card-id')) { + const cardId = parseInt(dataCardId, 10); + const arr = getMemberArrayIndexFromMonHead(this); + formation.teams[arr[0]][arr[1]][arr[2]].id = cardId; + createNewUrl(); //刷新URL + refreshAll(formation); + } + return false; } function noDefaultEvent(event) { @@ -4326,6 +4338,7 @@ function initialize() { editBox.memberIdx = []; //储存队伍数组下标 editBox.show = function() { this.classList.remove(className_displayNone); + document.body.classList.add("side-mode"); //解决SVG问题 // const activeSkillTitle = skillBox.querySelector("#active-skill-title"); // const evolvedSkillTitle = skillBox.querySelector("#evolved-skill-title"); @@ -4336,6 +4349,8 @@ function initialize() { }; editBox.hide = function() { this.classList.add(className_displayNone); + document.body.classList.remove("side-mode"); + allMembers.forEach(member=>member.classList.remove("hightlight")); // if (isGuideMod) { // const url = new URL(location); // url.searchParams.delete("guide"); @@ -4360,14 +4375,14 @@ function initialize() { mSeriesId.onclick = function() { //搜索系列 const sid = parseInt(this.getAttribute(dataAttrName), 10); if (sid > 0) { - showSearchBySeriesId(sid, "series"); + showSearch(searchBySeriesId(sid, "series")); } }; const mCollabId = monInfoBox.querySelector(".monster-collabId"); mCollabId.onclick = function() { //搜索合作 const sid = parseInt(this.getAttribute(dataAttrName), 10); if (sid > 0) { - showSearchBySeriesId(sid, "collab"); + showSearch(searchBySeriesId(sid, "collab")); } }; const mGachaId = monInfoBox.querySelector(".monster-gachaId"); @@ -4375,7 +4390,7 @@ function initialize() { const sids = this.getAttribute(dataAttrName).split(',') .filter(Boolean).map(n=>parseInt(n, 10)); if (sids.length) { - showSearchBySeriesId(sids, "gacha"); + showSearch(searchBySeriesId(sids, "gacha")); } }; //以字符串搜索窗口 @@ -6509,7 +6524,7 @@ function refreshAll(formationData) { function searchCollab(event) { event.preventDefault(); const collabId = parseInt(this.getAttribute(dataAttrName), 10); - showSearchBySeriesId(collabId, "collab"); + showSearch(searchBySeriesId(collabId, "collab")); return false; } const fragment = dge.collabs.map(id=>{ @@ -6530,7 +6545,7 @@ function refreshAll(formationData) { const sids = this.getAttribute(dataAttrName).split(',') .filter(Boolean).map(n=>parseInt(n, 10)); if (sids.length) { - showSearchBySeriesId(sids, "gacha"); + showSearch(searchBySeriesId(sids, "gacha")); } return false; } diff --git a/style-monsterimages.css b/style-monsterimages.css index f345e93b..0c7d89a6 100644 --- a/style-monsterimages.css +++ b/style-monsterimages.css @@ -716,29 +716,7 @@ .awoken-icon{ background-image: url(images/awoken.png); } -@keyframes hightlight-animate{ - from { - outline-offset: 0; - outline-color: red; - } - to { - outline-offset: 5px; - outline-color: yellow; - } -} -.awoken-icon.hightlight { - border-radius: 5px; - outline-style: solid; - outline-width: 5px; - outline-offset: 2px; - outline-color: yellow; - z-index: 2; - animation-name: hightlight-animate; - animation-duration: 0.2s; - animation-timing-function: linear; - animation-direction: alternate-reverse; - animation-iteration-count: infinite; -} + .awoken-icon[data-awoken-icon='0']{/*问号*/ --icon-y-index: 0; } diff --git a/style.css b/style.css index ccf5e683..2a060ff7 100644 --- a/style.css +++ b/style.css @@ -89,6 +89,29 @@ details>summary:hover { pointer-events: none; opacity: 0.5; } +@keyframes hightlight-animate{ + from { + outline-offset: 0; + outline-color: red; + } + to { + outline-offset: 5px; + outline-color: yellow; + } +} +.hightlight { + border-radius: 5px; + outline-style: solid; + outline-width: 5px; + outline-offset: 2px; + outline-color: yellow; + z-index: 2; + animation-name: hightlight-animate; + animation-duration: 0.2s; + animation-timing-function: linear; + animation-direction: alternate-reverse; + animation-iteration-count: infinite; +} /*控制框*/ .control-box :where( @@ -186,11 +209,14 @@ label[for="screenshot-transparent"] { padding: 5px; user-select: none; /*让内容不可选中*/ } + #rich-text-tools button { min-width: 50px; } - +#rich-text-tools #rich-text-tools-contents { + margin-bottom: 3px; +} #rich-text-tools button, #rich-text-tools input[type="color"] { @@ -435,11 +461,11 @@ body.block-width-7 .formation-box{ } /*电脑宽屏使用*/ @media (min-width: 1310px) { - .formation-box{ + body:not(.side-mode) .formation-box{ width: 100% !important; min-width: unset; } - .team-bigbox { + body:not(.side-mode) .team-bigbox { display: grid; column-fill: auto; column-count: 2; @@ -448,7 +474,7 @@ body.block-width-7 .formation-box{ grid-auto-flow: column dense; gap: 0 10px; } - .team-bigbox :where( + body:not(.side-mode) .team-bigbox :where( .team-total-info, .team-box-name, .team-member-types, @@ -458,22 +484,49 @@ body.block-width-7 .formation-box{ ) { grid-column: 1; } - .team-box-name { + body:not(.side-mode) .team-box-name { grid-row: span 3; } - .team-bigbox :where( + body:not(.side-mode) .team-bigbox :where( .team-total-info-count, .team-awoken-effect, .team-awoken, ) { grid-column: 2; } - .team-awoken-effect { + body:not(.side-mode) .team-awoken-effect { grid-row: span 3; } - .team-awoken { + body:not(.side-mode) .team-awoken { grid-row: span 3; } + + body.side-mode { + display: grid; + column-fill: auto; + column-count: 2; + grid-template-columns: min-content auto; + grid-auto-rows: min-content; + grid-auto-flow: column dense; + } + body.side-mode>*:not(.formation-box,.edit-box) { + grid-column: 1 / 3; + } + body.side-mode>.formation-box { + grid-column: 1; + } + body.side-mode>.edit-box { + position: inherit; + grid-column: 2; + background-color: rgb(102, 73, 50); + backdrop-filter: unset; + } + body.side-mode>.edit-box::backdrop{ + filter: unset; + } + body.side-mode #rich-text-tools { + z-index: 1; + } } @@ -1669,6 +1722,9 @@ body:not(.solo) .awoken-icon[data-awoken-icon="64"]::after background-color: rgb(102, 73, 50); backdrop-filter: unset; } +.guide-mod .edit-box::backdrop{ + filter: unset; +} .edit-box-title{ text-align: center; font-size: 2em; @@ -2556,7 +2612,7 @@ input[disabled]+.awoken-icon:active, z-index: 2; } /*图鉴模式默认高度为30%设备高度，可修改大小*/ -.guide-mod .search-mon-list{ +.search-mon-list{ overflow: auto; height: 30vh; resize: vertical;