图鉴模式下启用粘性定位

multi.html

@@ -838,7 +838,7 @@ var formation = new Formation(teamsCount,5);
 			<div class="awoken-div"><!--觉醒-->
 				<div class="awoken-option"><!--觉醒搜索选项开关-->
 					<input type="checkbox" name="consider-equivalent-awoken" id="consider-equivalent-awoken" checked><label class="config-checkbox-lbl consider-equivalent-awoken-label" for="consider-equivalent-awoken"></label>
-					<input type="checkbox" class="config-checkbox-ipt" name="include-super-awoken" id="include-super-awoken" checked><label class="config-checkbox-lbl include-super-awoken-label" for="include-super-awoken"><div class="config-checkbox-lbl-cicle"></div></label>
+					<input type="checkbox" class="config-checkbox-ipt" name="include-super-awoken" id="include-super-awoken"><label class="config-checkbox-lbl include-super-awoken-label" for="include-super-awoken"><div class="config-checkbox-lbl-cicle"></div></label>
 					<input type="checkbox" class="config-checkbox-ipt" name="show-official-awoken-sorting" id="show-official-awoken-sorting"><label class="config-checkbox-lbl show-official-awoken-sorting-label" for="show-official-awoken-sorting"><div class="config-checkbox-lbl-cicle"></div></label>
 				</div>
 				<div class="selected-awokens-div"><!--选中的觉醒列表-->
@@ -1096,8 +1096,8 @@ var formation = new Formation(teamsCount,5);
 					<div class="search-list-length"></div>
 				</div>
 			</div>
-			<ul class="search-mon-list"></ul><!--搜索结果的显示列表-->
 		</div>
+		<ul class="search-mon-list"></ul><!--搜索结果的显示列表-->
 		<div class="monsterinfo-box">
 			<div class="monster-head">
 				<a class="monster null" target="_blank">
@@ -1105,47 +1105,48 @@ var formation = new Formation(teamsCount,5);
 					<div class="subproperty"></div>
 				</a>
 			</div>
-			<div class="monsterinfo-line">
+			<div class="monsterinfo-line line1">
 				<div class="monster-id"></div><div class="monster-rare"></div><div class="monster-mp"></div>
 			</div>
-			<div class="monsterinfo-line">
+			<div class="monsterinfo-line line2">
 				<div class="monster-name"></div>
 			</div>
-			<div class="monsterinfo-line">
+			<div class="monsterinfo-line line3">
 				<ul class="monster-type">
 					<li class="type-name"><span class="type-icon"></span></li><li class="type-name"><span class="type-icon"></span></li><li class="type-name"><span class="type-icon"></span></li>
 				</ul>
-				<div class="monsterinfo-cell">
-					<div class="monster-seriesId"></div>
-					<div class="monster-collabId"></div>
-					<div class="monster-altName"></div>
-				</div>
 			</div>
-			<div class="monsterinfo-line row-awoken-sawoken">
+			<div class="monsterinfo-line line4 row-awoken-sawoken">
 				<div class="row-mon-awoken">
 					<!--怪物觉醒-->
 					<div class="awoken-ul">
-						<label for="awoken-number-0" class="awoken-count-num" title="0"></label><input type="radio" name="awoken-number" class="awoken-number" value="0" id="awoken-number-0" /><!--
-						--><label for="awoken-number-1" class="awoken-icon" title="1"></label><input type="radio" name="awoken-number" class="awoken-number" value="1" id="awoken-number-1" /><!--
-						--><label for="awoken-number-2" class="awoken-icon" title="2"></label><input type="radio" name="awoken-number" class="awoken-number" value="2" id="awoken-number-2" /><!--
-						--><label for="awoken-number-3" class="awoken-icon" title="3"></label><input type="radio" name="awoken-number" class="awoken-number" value="3" id="awoken-number-3" /><!--
-						--><label for="awoken-number-4" class="awoken-icon" title="4"></label><input type="radio" name="awoken-number" class="awoken-number" value="4" id="awoken-number-4" /><!--
-						--><label for="awoken-number-5" class="awoken-icon" title="5"></label><input type="radio" name="awoken-number" class="awoken-number" value="5" id="awoken-number-5" /><!--
-						--><label for="awoken-number-6" class="awoken-icon" title="6"></label><input type="radio" name="awoken-number" class="awoken-number" value="6" id="awoken-number-6" /><!--
-						--><label for="awoken-number-7" class="awoken-icon" title="7"></label><input type="radio" name="awoken-number" class="awoken-number" value="7" id="awoken-number-7" /><!--
-						--><label for="awoken-number-8" class="awoken-icon" title="8"></label><input type="radio" name="awoken-number" class="awoken-number" value="8" id="awoken-number-8" /><!--
-						--><label for="awoken-number-9" class="awoken-icon" title="9"></label><input type="radio" name="awoken-number" class="awoken-number" value="9" id="awoken-number-9" />
+						<label for="awoken-number-0" class="awoken-count-num" title="0"></label><input type="radio" name="awoken-number" class="awoken-number" value="0" id="awoken-number-0" />
+						<label for="awoken-number-1" class="awoken-icon" title="1"></label><input type="radio" name="awoken-number" class="awoken-number" value="1" id="awoken-number-1" />
+						<label for="awoken-number-2" class="awoken-icon" title="2"></label><input type="radio" name="awoken-number" class="awoken-number" value="2" id="awoken-number-2" />
+						<label for="awoken-number-3" class="awoken-icon" title="3"></label><input type="radio" name="awoken-number" class="awoken-number" value="3" id="awoken-number-3" />
+						<label for="awoken-number-4" class="awoken-icon" title="4"></label><input type="radio" name="awoken-number" class="awoken-number" value="4" id="awoken-number-4" />
+						<label for="awoken-number-5" class="awoken-icon" title="5"></label><input type="radio" name="awoken-number" class="awoken-number" value="5" id="awoken-number-5" />
+						<label for="awoken-number-6" class="awoken-icon" title="6"></label><input type="radio" name="awoken-number" class="awoken-number" value="6" id="awoken-number-6" />
+						<label for="awoken-number-7" class="awoken-icon" title="7"></label><input type="radio" name="awoken-number" class="awoken-number" value="7" id="awoken-number-7" />
+						<label for="awoken-number-8" class="awoken-icon" title="8"></label><input type="radio" name="awoken-number" class="awoken-number" value="8" id="awoken-number-8" />
+						<label for="awoken-number-9" class="awoken-icon" title="9"></label><input type="radio" name="awoken-number" class="awoken-number" value="9" id="awoken-number-9" />
 					</div>
 				</div>
+				<div class="current-super-awoken">
+					<!--怪物当前超觉醒-->
+					<button id="current-super-awoken-icon" class="awoken-icon"></button>
+				</div>
 				<div class="row-mon-super-awoken">
-					<!--怪物超觉醒-->
-					<input type="radio" name="sawoken-choice" class="sawoken-choice" value="0" id="sawoken-choice-nosawoken" />
-					<div class="awoken-ul">
-						<input type="radio" name="sawoken-choice" class="sawoken-choice" id="sawoken-choice-1" /><label for="sawoken-choice-1" class="awoken-icon"></label>
-					</div>
-					<template id="sawoken-option-icon"><input type="radio" name="sawoken-choice" class="sawoken-choice" /><label class="awoken-icon"></label></template>
+					<!--怪物超觉醒选择列表-->
+					<div class="awoken-ul"></div>
 				</div>
 			</div>
+			<div class="monsterinfo-groupId">
+				<div class="monster-seriesId"></div>
+				<div class="monster-collabId"></div>
+				<div class="monster-gachaId"></div>
+				<div class="monster-altName"></div>
+			</div>
 		</div>
 		<div class="setting-box">
 			<div class="setting-row row-mon-id">
@@ -1389,6 +1390,9 @@ var formation = new Formation(teamsCount,5);
 			<ul class="collab-list">
 				<li><label for="dungeon-collab-id"></label><input id="dungeon-collab-id" type="text" /></li>
 			</ul>
+			<ul class="gacha-list display-none">
+				<li><label for="dungeon-gacha-id"></label><input id="dungeon-gacha-id" type="text" /></li>
+			</ul>
 			<ul class="stats-list">
 				<li><label for="dungeon-hp"></label><input id="dungeon-hp" type="number" min=0 step=1 value=1 /></li>
 				<li><label for="dungeon-atk"></label><input id="dungeon-atk" type="number" min=0 step=1 value=1 /></li>

script.js

@@ -2933,7 +2933,9 @@ function initialize() {
 	function searchByString(str)
 	{ // 考虑了一下onlyInTag被废弃了，因为和游戏内搜索不符
 		str = str.trim();
-		if (str.length>0)
+		if (str === '0') { //如果搜索0，则打开最新的50个
+			return Cards.filter(card=>card.enabled).slice(-50);
+		} else if (str.length>0)
 		{
 			return Cards.filter(card =>
 				{
@@ -3563,6 +3565,7 @@ function initialize() {
 		}
 
 		searchBox.classList.remove(className_displayNone);
+		searchMonList.classList.remove(className_displayNone);
 		editBox.show();
 		const createCardHead = editBox.createCardHead;
 
@@ -3735,6 +3738,7 @@ function initialize() {
 	};
 	searchClose.onclick = function() {
 		searchBox.classList.add(className_displayNone);
+		searchMonList.classList.add(className_displayNone);
 	};
 	searchClear.onclick = function() { //清空搜索选项
 		s_attr1s[0].checked = true;

style.css

@@ -2028,10 +2028,15 @@ icon.inflicts::after
 }*/
 
 .search-mon-list{
+	box-sizing: border-box;
 	border: 1px solid white;
 	border-radius: 5px;
 	background: grey;
+	display: grid;
 	width: 100%;
+	grid-template-columns: repeat(auto-fill, 75px);
+	grid-auto-rows: min-content;
+	grid-gap: 5px;
 }
 .search-box .search-list-length
 {
@@ -2046,8 +2051,14 @@ icon.inflicts::after
 	content: attr(data-search-result-count);
 }
 .guide-mod .search-mon-list{
-	max-height: 790px;
+	max-height: 30vh;
 	overflow: auto;
+	position: sticky;
+	top: 0;
+	z-index: 1;
+}
+.guide-mod .edit-box .monsterinfo-box{
+	top: 30vh;
 }
 
 .setting-box .row-mon-id .real-time-change-card-label
@@ -2063,7 +2074,6 @@ icon.inflicts::after
 {
 	margin-left: 5px;
 }
-
 .edit-box .setting-row{
 	width: 100%;
 }

triple.html

@@ -1992,8 +1992,8 @@ var formation = new Formation(teamsCount,6);
 					<div class="search-list-length"></div>
 				</div>
 			</div>
-			<ul class="search-mon-list"></ul><!--搜索结果的显示列表-->
 		</div>
+		<ul class="search-mon-list"></ul><!--搜索结果的显示列表-->
 		<div class="monsterinfo-box">
 			<div class="monster-head">
 				<a class="monster null" target="_blank">
@@ -2001,47 +2001,48 @@ var formation = new Formation(teamsCount,6);
 					<div class="subproperty"></div>
 				</a>
 			</div>
-			<div class="monsterinfo-line">
+			<div class="monsterinfo-line line1">
 				<div class="monster-id"></div><div class="monster-rare"></div><div class="monster-mp"></div>
 			</div>
-			<div class="monsterinfo-line">
+			<div class="monsterinfo-line line2">
 				<div class="monster-name"></div>
 			</div>
-			<div class="monsterinfo-line">
+			<div class="monsterinfo-line line3">
 				<ul class="monster-type">
 					<li class="type-name"><span class="type-icon"></span></li><li class="type-name"><span class="type-icon"></span></li><li class="type-name"><span class="type-icon"></span></li>
 				</ul>
-				<div class="monsterinfo-cell">
-					<div class="monster-seriesId"></div>
-					<div class="monster-collabId"></div>
-					<div class="monster-altName"></div>
-				</div>
 			</div>
-			<div class="monsterinfo-line row-awoken-sawoken">
+			<div class="monsterinfo-line line4 row-awoken-sawoken">
 				<div class="row-mon-awoken">
 					<!--怪物觉醒-->
 					<div class="awoken-ul">
-						<label for="awoken-number-0" class="awoken-count-num" title="0"></label><input type="radio" name="awoken-number" class="awoken-number" value="0" id="awoken-number-0" /><!--
-						--><label for="awoken-number-1" class="awoken-icon" title="1"></label><input type="radio" name="awoken-number" class="awoken-number" value="1" id="awoken-number-1" /><!--
-						--><label for="awoken-number-2" class="awoken-icon" title="2"></label><input type="radio" name="awoken-number" class="awoken-number" value="2" id="awoken-number-2" /><!--
-						--><label for="awoken-number-3" class="awoken-icon" title="3"></label><input type="radio" name="awoken-number" class="awoken-number" value="3" id="awoken-number-3" /><!--
-						--><label for="awoken-number-4" class="awoken-icon" title="4"></label><input type="radio" name="awoken-number" class="awoken-number" value="4" id="awoken-number-4" /><!--
-						--><label for="awoken-number-5" class="awoken-icon" title="5"></label><input type="radio" name="awoken-number" class="awoken-number" value="5" id="awoken-number-5" /><!--
-						--><label for="awoken-number-6" class="awoken-icon" title="6"></label><input type="radio" name="awoken-number" class="awoken-number" value="6" id="awoken-number-6" /><!--
-						--><label for="awoken-number-7" class="awoken-icon" title="7"></label><input type="radio" name="awoken-number" class="awoken-number" value="7" id="awoken-number-7" /><!--
-						--><label for="awoken-number-8" class="awoken-icon" title="8"></label><input type="radio" name="awoken-number" class="awoken-number" value="8" id="awoken-number-8" /><!--
-						--><label for="awoken-number-9" class="awoken-icon" title="9"></label><input type="radio" name="awoken-number" class="awoken-number" value="9" id="awoken-number-9" />
+						<label for="awoken-number-0" class="awoken-count-num" title="0"></label><input type="radio" name="awoken-number" class="awoken-number" value="0" id="awoken-number-0" />
+						<label for="awoken-number-1" class="awoken-icon" title="1"></label><input type="radio" name="awoken-number" class="awoken-number" value="1" id="awoken-number-1" />
+						<label for="awoken-number-2" class="awoken-icon" title="2"></label><input type="radio" name="awoken-number" class="awoken-number" value="2" id="awoken-number-2" />
+						<label for="awoken-number-3" class="awoken-icon" title="3"></label><input type="radio" name="awoken-number" class="awoken-number" value="3" id="awoken-number-3" />
+						<label for="awoken-number-4" class="awoken-icon" title="4"></label><input type="radio" name="awoken-number" class="awoken-number" value="4" id="awoken-number-4" />
+						<label for="awoken-number-5" class="awoken-icon" title="5"></label><input type="radio" name="awoken-number" class="awoken-number" value="5" id="awoken-number-5" />
+						<label for="awoken-number-6" class="awoken-icon" title="6"></label><input type="radio" name="awoken-number" class="awoken-number" value="6" id="awoken-number-6" />
+						<label for="awoken-number-7" class="awoken-icon" title="7"></label><input type="radio" name="awoken-number" class="awoken-number" value="7" id="awoken-number-7" />
+						<label for="awoken-number-8" class="awoken-icon" title="8"></label><input type="radio" name="awoken-number" class="awoken-number" value="8" id="awoken-number-8" />
+						<label for="awoken-number-9" class="awoken-icon" title="9"></label><input type="radio" name="awoken-number" class="awoken-number" value="9" id="awoken-number-9" />
 					</div>
 				</div>
+				<div class="current-super-awoken">
+					<!--怪物当前超觉醒-->
+					<button id="current-super-awoken-icon" class="awoken-icon"></button>
+				</div>
 				<div class="row-mon-super-awoken">
-					<!--怪物超觉醒-->
-					<input type="radio" name="sawoken-choice" class="sawoken-choice" value="0" id="sawoken-choice-nosawoken" />
-					<div class="awoken-ul">
-						<input type="radio" name="sawoken-choice" class="sawoken-choice" id="sawoken-choice-1" /><label for="sawoken-choice-1" class="awoken-icon"></label>
-					</div>
-					<template id="sawoken-option-icon"><input type="radio" name="sawoken-choice" class="sawoken-choice" /><label class="awoken-icon"></label></template>
+					<!--怪物超觉醒选择列表-->
+					<div class="awoken-ul"></div>
 				</div>
 			</div>
+			<div class="monsterinfo-groupId">
+				<div class="monster-seriesId"></div>
+				<div class="monster-collabId"></div>
+				<div class="monster-gachaId"></div>
+				<div class="monster-altName"></div>
+			</div>
 		</div>
 		<div class="setting-box">
 			<div class="setting-row row-mon-id">
@@ -2285,6 +2286,9 @@ var formation = new Formation(teamsCount,6);
 			<ul class="collab-list">
 				<li><label for="dungeon-collab-id"></label><input id="dungeon-collab-id" type="text" /></li>
 			</ul>
+			<ul class="gacha-list display-none">
+				<li><label for="dungeon-gacha-id"></label><input id="dungeon-gacha-id" type="text" /></li>
+			</ul>
 			<ul class="stats-list">
 				<li><label for="dungeon-hp"></label><input id="dungeon-hp" type="number" min=0 step=1 value=1 /></li>
 				<li><label for="dungeon-atk"></label><input id="dungeon-atk" type="number" min=0 step=1 value=1 /></li>