From dc0fc6a88eab1f16298cead0a91c64ef045e91cb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9E=AB=E8=B0=B7=E5=89=91=E4=BB=99?= <mapaler@163.com>
Date: Tue, 14 Feb 2023 22:38:25 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8A=A0=E5=85=A5=E5=8F=AF=E4=BB=A5=E8=87=AA?=
 =?UTF-8?q?=E8=A1=8C=E9=80=89=E6=8B=A9=E9=A2=84=E8=A7=88=E5=A4=B4=E5=83=8F?=
 =?UTF-8?q?=E7=9A=84=E5=B0=8F=E5=BD=A9=E8=9B=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 languages/en.css    |  8 +-------
 languages/ja.css    |  8 +-------
 languages/ko.css    |  8 +-------
 languages/zh-TW.css |  8 +-------
 multi.html          |  6 +++---
 script.js           | 14 ++++++++++++--
 solo.html           |  6 +++---
 style.css           | 15 ++++++++++-----
 triple.html         |  6 +++---
 9 files changed, 35 insertions(+), 44 deletions(-)

diff --git a/languages/en.css b/languages/en.css
index c882fb6f..c3c1822d 100644
--- a/languages/en.css
+++ b/languages/en.css
@@ -323,14 +323,8 @@ label[for="default-level"]::after
 .search-box::before{
 	content: "Search Cards";
 }
-.search-box .attrs-div .attr-list-1::before{
-	content: "Attribute 1:";
-}
-.search-box .attrs-div .attr-list-2::before{
-	content: "Attribute 2:";
-}
 .search-box .attrs-div .fix-main-color-label::after{
-	content: "Fix attr-1 for main-attr, attr-2 for sub-attr.";
+	content: "The order of the attributes is consistent with the order you selected";
 }
 .search-box .consider-equivalent-awoken-label::after{
 	content: "Search for Equivalent Awoken";
diff --git a/languages/ja.css b/languages/ja.css
index 82aaa5d9..02f4fb0f 100644
--- a/languages/ja.css
+++ b/languages/ja.css
@@ -315,14 +315,8 @@ label[for="default-level"]::after
 .search-box::before{
 	content: "モンスターの検索";
 }
-.search-box .attrs-div .attr-list-1::before{
-	content: "属性 1:";
-}
-.search-box .attrs-div .attr-list-2::before{
-	content: "属性 2:";
-}
 .search-box .attrs-div .fix-main-color-label::after{
-	content: "限定 属性 1->主属性，属性 2->副属性";
+	content: "属性の順序は、選択した順序と一致";
 }
 .search-box .consider-equivalent-awoken-label::after{
 	content: "同時に同等の覚醒を検索";
diff --git a/languages/ko.css b/languages/ko.css
index 734e00ec..14abab18 100644
--- a/languages/ko.css
+++ b/languages/ko.css
@@ -311,14 +311,8 @@ label[for="default-level"]::after
 .search-box::before{
 	content: "몬스터 검색";
 }
-.search-box .attrs-div .attr-list-1::before{
-	content: "속성 1:";
-}
-.search-box .attrs-div .attr-list-2::before{
-	content: "속성 1:";
-}
 .search-box .attrs-div .fix-main-color-label::after{
-	content: "제한 속성 1은 기본 속성 이며 속성 2 하위 속성입니다.";
+	content: "속성 순서는 선택한 순서와 일치합니다";
 }
 .search-box .consider-equivalent-awoken-label::after{
 	content: "동시에 해당 경계를 각성";
diff --git a/languages/zh-TW.css b/languages/zh-TW.css
index 227b0c3e..c8f2d9fe 100644
--- a/languages/zh-TW.css
+++ b/languages/zh-TW.css
@@ -321,14 +321,8 @@ label[for="default-level"]::after
 .search-box::before{
 	content: "搜索怪物";
 }
-.search-box .attrs-div .attr-list-1::before{
-	content: "屬性 1：";
-}
-.search-box .attrs-div .attr-list-2::before{
-	content: "屬性 2：";
-}
 .search-box .attrs-div .fix-main-color-label::after{
-	content: "限制屬性 1 爲主屬性，屬性 2 爲副屬性";
+	content: "強制屬性順序與選擇順序一致";
 }
 .search-box .consider-equivalent-awoken-label::after{
 	content: "同時搜索等效覺醒";
diff --git a/multi.html b/multi.html
index 41b38695..8dee57ef 100644
--- a/multi.html
+++ b/multi.html
@@ -793,15 +793,15 @@ var formation = new Formation(teamsCount,5);
 		<div class="edit-box-title"><!--修改怪物--></div>
 		<div class="search-box display-none">
 			<div class="attrs-div"><!--属性-->
-				<div class="monster">
-					<input type="file" id="avatar-select" />
+				<label class="monster">
+					<input type="file" accept="image/*" id="avatar-select" />
 					<div class="custom-avatar"></div>
 					<div class="attrs">
 						<div class="attr"></div>
 						<div class="attr"></div>
 						<div class="attr"></div>
 					</div>
-				</div>
+				</label>
 				<ul class="attr-list attr-list-1">
 					<li><input type="radio" name="attr-1" class="attr-radio" value="1111111" id="search-attr-1-any" checked/><label for="search-attr-1-any"><span class="attr" data-attr-icon="any"></span></label></li><!--任意-->
 					<li><input type="radio" name="attr-1" class="attr-radio" value="0000001" id="search-attr-1-0" /><label for="search-attr-1-0"><span class="attr" data-attr-icon="0"></span></label></li><!--火-->
diff --git a/script.js b/script.js
index afeb68e0..f2721a70 100644
--- a/script.js
+++ b/script.js
@@ -3495,8 +3495,10 @@ function initialize() {
 	const s_typesUl = s_typesDiv.querySelector(".type-list");
 	const s_typesLi = Array.from(s_typesUl.querySelectorAll("li"));
 	const s_types = s_typesLi.map(li=>li.querySelector(".type-check")); //checkbox集合
-
-	const s_attr_preview_attrs = Array.from(searchBox.querySelectorAll(".attrs-div .monster .attrs .attr"));
+	const attrPreview = searchBox.querySelector(".attrs-div .monster");
+	
+	//3种属性选择的预览
+	const s_attr_preview_attrs = Array.from(attrPreview.querySelectorAll(".attrs .attr"));
 	function s_attr_onclick(){
 		const attrIdx = parseInt(this.name[this.name.length-1],10) - 1;
 		const valueFlag = parseInt(this.value, 2);
@@ -3506,6 +3508,14 @@ function initialize() {
 		s_attr_preview_attrs[attrIdx].dataset.attr = attr;
 	}
 	s_attr_lists.forEach(s_attr_list=>s_attr_list.forEach(s_attr=>s_attr.onclick = s_attr_onclick));
+	//可以自行打开图片设定头像的彩蛋
+	const avatarSelect = attrPreview.querySelector("#avatar-select");
+	const customAvatar = attrPreview.querySelector(".custom-avatar");
+	avatarSelect.onchange = function(event){
+		let fileUrl = URL.createObjectURL(this.files[0]);
+		customAvatar.style.backgroundImage = `url(${fileUrl})`;
+	};
+
 	function s_types_onchange(){
 		const newClassName = `type-killer-${this.value}`;
 		s_typesUl.classList.toggle(newClassName, this.checked && s_typeAndOr.checked);
diff --git a/solo.html b/solo.html
index dae47441..4dda0942 100644
--- a/solo.html
+++ b/solo.html
@@ -628,15 +628,15 @@ var formation = new Formation(teamsCount,6);
 		<div class="edit-box-title"><!--修改怪物--></div>
 		<div class="search-box display-none">
 			<div class="attrs-div"><!--属性-->
-				<div class="monster">
-					<input type="file" id="avatar-select" />
+				<label class="monster" for="avatar-select">
+					<input type="file" accept="image/*" id="avatar-select" />
 					<div class="custom-avatar"></div>
 					<div class="attrs">
 						<div class="attr"></div>
 						<div class="attr"></div>
 						<div class="attr"></div>
 					</div>
-				</div>
+				</label>
 				<ul class="attr-list attr-list-1">
 					<li><input type="radio" name="attr-1" class="attr-radio" value="1111111" id="search-attr-1-any" checked/><label for="search-attr-1-any"><span class="attr" data-attr-icon="any"></span></label></li><!--任意-->
 					<li><input type="radio" name="attr-1" class="attr-radio" value="0000001" id="search-attr-1-0" /><label for="search-attr-1-0"><span class="attr" data-attr-icon="0"></span></label></li><!--火-->
diff --git a/style.css b/style.css
index 44e1abae..2784308a 100644
--- a/style.css
+++ b/style.css
@@ -1622,17 +1622,22 @@ icon.inflicts::after
 }
 .attrs-div .monster {
 	grid-row: 1 / 4;
+}
+.attrs-div .monster .custom-avatar {
+	width: 100%;
+	height: 100%;
+	box-sizing: border-box;
+	padding: 2px;
+	border-radius: 5px;
 	background-image: url(images/avatar.webp);
+	background-size: cover;
 	background-repeat: no-repeat;
-	background-position: 2px 2px;
+	background-position: center;
+	background-clip: content-box;
 }
 .attrs-div .monster #avatar-select {
 	display: none;
 }
-.attrs-div .monster .custom-avatar {
-	width: 100%;
-	height: 100%;
-}
 .attrs-div .options {
 	grid-column: 1 / 3;
 }
diff --git a/triple.html b/triple.html
index 36bc9d80..f0acb462 100644
--- a/triple.html
+++ b/triple.html
@@ -1714,15 +1714,15 @@ var formation = new Formation(teamsCount,6);
 		<div class="edit-box-title"><!--修改怪物--></div>
 		<div class="search-box display-none">
 			<div class="attrs-div"><!--属性-->
-				<div class="monster">
-					<input type="file" id="avatar-select" />
+				<label class="monster">
+					<input type="file" accept="image/*" id="avatar-select" />
 					<div class="custom-avatar"></div>
 					<div class="attrs">
 						<div class="attr"></div>
 						<div class="attr"></div>
 						<div class="attr"></div>
 					</div>
-				</div>
+				</label>
 				<ul class="attr-list attr-list-1">
 					<li><input type="radio" name="attr-1" class="attr-radio" value="1111111" id="search-attr-1-any" checked/><label for="search-attr-1-any"><span class="attr" data-attr-icon="any"></span></label></li><!--任意-->
 					<li><input type="radio" name="attr-1" class="attr-radio" value="0000001" id="search-attr-1-0" /><label for="search-attr-1-0"><span class="attr" data-attr-icon="0"></span></label></li><!--火-->