实现怪物信息的侧栏模式

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);
 		}
 	}
 }

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);
-
-		if ((dataTo[0] !== dataFrom[0]) ||
-			(dataTo[1] !== dataFrom[1]) ||
-			(dataTo[2] !== dataFrom[2])) { //必须有所不同才继续交换
-			interchangeCard(dataFrom, dataTo, event.ctrlKey);
+		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);
+			}
 		}
-		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;
 			}

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;
 }

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;