增加替代名称的拆分搜索功能

languages/en.css

@@ -365,4 +365,12 @@
 }
 .control-div .search-close::before{
 	content: "Close Search Panel";
+}
+.dialog-search-string .dialog-title::before
+{
+	content: "Search By String";
+}
+.dialog-close::before
+{
+	content: "Close";
 }

languages/ja.css

@@ -357,4 +357,12 @@
 }
 .control-div .search-close::before{
 	content: "検索を閉じる";
+}
+.dialog-search-string .dialog-title::before
+{
+	content: "文字列で検索します";
+}
+.dialog-close::before
+{
+	content: "閉じる";
 }

languages/ko.css

@@ -354,4 +354,12 @@
 }
 .control-div .search-close::before{
 	content: "찾기 닫기";
+}
+.dialog-search-string .dialog-title::before
+{
+	content: "문자열로 검색합니다";
+}
+.dialog-close::before
+{
+	content: "가까이";
 }

languages/zh-TW.css

@@ -360,4 +360,12 @@
 }
 .control-div .search-close::before{
 	content: "關閉搜索";
+}
+.dialog-search-string .dialog-title::before
+{
+	content: "以字符串搜索";
+}
+.dialog-close::before
+{
+	content: "關閉";
 }

languages/zh.css

@@ -360,4 +360,12 @@
 }
 .control-div .search-close::before{
 	content: "关闭搜索";
+}
+.dialog-search-string .dialog-title::before
+{
+	content: "以字符串搜索";
+}
+.dialog-close::before
+{
+	content: "关闭";
 }

multi.html

@@ -714,8 +714,8 @@ var formation = new Formation(teamsCount,5);
 					<div class="monster-altName"></div>
 				</div>
 			</div>
-				<div class="monsterinfo-cell">
-				</div>
+			<div class="monsterinfo-cell">
+			</div>
 		</div>
 		<div class="setting-box">
 			<div class="setting-row row-mon-id">
@@ -867,6 +867,11 @@ var formation = new Formation(teamsCount,5);
 					<div class="skill-datail"></div>
 				</div>
 			</div>
+			<div class="dialog dialog-search-string display-none">
+				<div class="dialog-title"></div>
+				<div class="dialog-content"></div>
+				<div class="dialog-control"><button class="dialog-close"></button></div>
+			</div>
 		</div>
 		<div class="button-box">
 			<button class="button-null"><!--留空格子--></button>

script.js

@@ -951,6 +951,9 @@ function initialize() {
 	};
 
 	const smonsterinfoBox = editBox.querySelector(".monsterinfo-box");
+	const searchBox = editBox.querySelector(".search-box");
+	const settingBox = editBox.querySelector(".setting-box");
+
 	const mSeriesId = smonsterinfoBox.querySelector(".monster-seriesId");
 	mSeriesId.onclick = function() { //搜索系列
 		const seriesId = parseInt(this.getAttribute('data-seriesId'), 10);
@@ -965,18 +968,76 @@ function initialize() {
 			showSearch(Cards.filter(card => card.collabId == collabId));
 		}
 	};
+	//以字符串搜索窗口
+	const stringSearchDialog = settingBox.querySelector(".dialog-search-string");
+	function searchByString(str)
+	{
+		showSearch(Cards.filter(card =>
+			{
+				const altNames = card.altName.split("|");
+				const names = [card.name];
+				if (card.otLangName)
+				{
+					names.push(...Object.values(card.otLangName));
+				}
+				return altNames.some(astr=>astr.includes(str)) || names.some(astr=>astr.includes(str));
+			}
+		));
+	}
+	function copyString(input)
+	{
+		input.focus(); //设input为焦点
+		input.select(); //选择全部
+		if (document.execCommand('copy')) {
+			document.execCommand('copy');
+		}
+		//input.blur(); //取消焦点
+	}
+	stringSearchDialog.show = function(strArr)
+	{
+		const stringSearchContent = this.querySelector(".dialog-content");
+		const ul = document.createElement("ul");
+		if (strArr.length > 0 && strArr[0].length > 0)
+		{
+			strArr.forEach(str=>{
+				const li = ul.appendChild(document.createElement("li"));
+				const ipt = li.appendChild(document.createElement("input"));
+				ipt.className = "string-value";
+				ipt.value = str;
+				ipt.readOnly = true;
+				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(){searchByString(ipt.value)};
+			});
+		}
+		stringSearchContent.innerHTML = "";
+		stringSearchContent.appendChild(ul);
+		this.classList.remove(className_displayNone);
+	}
+	stringSearchDialog.close = function()
+	{
+		this.classList.add(className_displayNone);
+	}
+	const stringSearchDialog_Close = stringSearchDialog.querySelector(".dialog-close");
+	stringSearchDialog_Close.onclick = function(){stringSearchDialog.close();};
+
 	const mAltName = smonsterinfoBox.querySelector(".monster-altName");
 	mAltName.onclick = function() { //搜索合作
 		const altName = this.getAttribute('data-altName');
 		if (altName.length > 0)
 		{
-			const splitAltName = altName.split("|");
+			stringSearchDialog.show(altName.split("|"));
+			/*
 			showSearch(Cards.filter(card =>
 				splitAltName.some(alt =>
 					alt.length > 0 &&
 					(card.altName.includes(alt) || card.name.includes(alt))
 				)
 			));
+			*/
 		}
 	};
 	//创建一个新的怪物头像
@@ -1079,8 +1140,6 @@ function initialize() {
 		return cli;
 	};
 
-	const searchBox = editBox.querySelector(".search-box");
-	const settingBox = editBox.querySelector(".setting-box");
 	const searchOpen = settingBox.querySelector(".row-mon-id .open-search");
 	searchOpen.onclick = function() {
 		s_includeSuperAwoken.onchange();
@@ -2267,6 +2326,7 @@ function editBoxChangeMonId(id) {
 	}
 	const mAltName = monInfoBox.querySelector(".monster-altName");
 	mAltName.textContent = card.altName;
+	
 	mAltName.setAttribute("data-altName", card.altName);
 
 	if (card.altName.length == 0) { //当没有合作名

solo.html

@@ -664,8 +664,8 @@ var formation = new Formation(teamsCount,6);
 					<div class="monster-altName"></div>
 				</div>
 			</div>
-				<div class="monsterinfo-cell">
-				</div>
+			<div class="monsterinfo-cell">
+			</div>
 		</div>
 		<div class="setting-box">
 			<div class="setting-row row-mon-id">
@@ -817,6 +817,11 @@ var formation = new Formation(teamsCount,6);
 					<div class="skill-datail"></div>
 				</div>
 			</div>
+			<div class="dialog dialog-search-string display-none">
+				<div class="dialog-title"></div>
+				<div class="dialog-content"></div>
+				<div class="dialog-control"><button class="dialog-close"></button></div>
+			</div>
 		</div>
 		<div class="button-box">
 			<button class="button-null"><!--留空格子--></button>

style.css

@@ -778,6 +778,7 @@ ul{
 .edit-box .search-box,
 .edit-box .setting-box{
 	padding: 0 10px;
+	position: relative;
 }
 /*.edit-box .setting-box .row-mon-id::before{
 	content: "▼怪物ID";
@@ -2082,4 +2083,106 @@ ul{
 .board-76 .board-cell5
 {
 	display: table-cell;
+}
+
+/*弹出窗口相关*/
+.dialog
+{
+	position: absolute;
+	padding: 5px;
+	border: 3px ridge #D1D398;
+	top: 0;
+	background-image: linear-gradient(to bottom,#788321,#3E4D14);
+	border-radius: 6px;
+	box-shadow: black 2px 0px 1px,black 0px 2px 1px,black -2px 0px 1px,black 0px -2px 1px;
+	width: 260px;
+	margin-left: calc(50% - 130px);
+	margin-top: 30px;
+	font-family: var(--game-font-family);
+	text-shadow: black 2px 2px 0;
+}
+.dialog .dialog-title
+{
+	font-size: 20px;
+	line-height: 20px;
+	text-align: center;
+	margin-bottom: 5px;
+}
+.dialog button
+{
+	cursor: pointer;
+	transition: transform 0.1s;
+}
+.dialog button:active
+{
+	transform: scale(1.1);
+}
+.dialog .dialog-content input
+{
+}
+.dialog .dialog-control
+{
+	text-align: center;
+	margin-top:10px;
+}
+.dialog .dialog-control button
+{
+	background-image: linear-gradient(to bottom,#C38E5F,#2F2008);
+	border: none;
+	border-radius: 5px;
+	padding: 3px;
+}
+.dialog .dialog-control button::before
+{
+	display: inline-block;
+	box-sizing: border-box;
+	width: 100px;
+	padding: 5px;
+	background-color: #956A42;
+	background-image: url(images/slate.svg);
+	background-size: 120px 120px;
+	border-radius: 2px;
+	font-size: 20px;
+	line-height: 20px;
+	vertical-align: middle;
+	color: white;
+	font-family: var(--game-font-family);
+	text-shadow: black 2px 2px 0;
+}
+/*
+.dialog-search-string .dialog-title::before
+{
+	content: "以字符串搜索";
+}
+.dialog-close::before
+{
+	content: "关闭";
+}
+*/
+.dialog-search-string .string-copy,
+.dialog-search-string .string-search
+{
+	box-sizing: border-box;
+	width: 45px;
+	margin-left: 5px;
+	cursor: pointer;
+	background-color: #994433;
+	border: 2px solid #FFCC88;
+	box-shadow: black 1px 0 1px,black -1px 0 1px,black 0 -1px 1px,black 0 3px 2px;
+	border-radius: 5px;
+}
+.dialog-search-string .string-copy::before
+{
+	content: "📋";
+	padding: 0 3px;
+}
+.dialog-search-string .string-search::before
+{
+	content: "🔍";
+	padding: 0 3px;
+}
+.dialog-search-string .string-value
+{
+	box-sizing: border-box;
+	width: calc(100% - 50px * 2);
 }

triple.html

@@ -1359,8 +1359,8 @@ var formation = new Formation(teamsCount,6);
 					<div class="monster-altName"></div>
 				</div>
 			</div>
-				<div class="monsterinfo-cell">
-				</div>
+			<div class="monsterinfo-cell">
+			</div>
 		</div>
 		<div class="setting-box">
 			<div class="setting-row row-mon-id">
@@ -1512,6 +1512,11 @@ var formation = new Formation(teamsCount,6);
 					<div class="skill-datail"></div>
 				</div>
 			</div>
+			<div class="dialog dialog-search-string display-none">
+				<div class="dialog-title"></div>
+				<div class="dialog-content"></div>
+				<div class="dialog-control"><button class="dialog-close"></button></div>
+			</div>
 		</div>
 		<div class="button-box">
 			<button class="button-null"><!--留空格子--></button>