加入可以自行选择预览头像的小彩蛋

2023-02-14 22:38:25 +08:00 · 2023-02-14 22:38:25 +08:00 · dc0fc6a88e
parent b8c6f8d417
commit dc0fc6a88e
9 changed files with 36 additions and 45 deletions
--- 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";
--- 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: "同時に同等の覚醒を検索";
--- 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: "동시에 해당 경계를 각성";
--- 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: "同時搜索等效覺醒";
--- 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><!--火-->
--- 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);
--- 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><!--火-->
--- a/style.css
+++ b/style.css
@ -1622,16 +1622,21 @@ icon.inflicts::after
 }
 .attrs-div .monster {
 	grid-row: 1 / 4;
-	background-image: url(images/avatar.webp);
-	background-repeat: no-repeat;
-	background-position: 2px 2px;
-}
-.attrs-div .monster #avatar-select {
-	display: none;
 }
 .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: center;
+	background-clip: content-box;
+}
+.attrs-div .monster #avatar-select {
+	display: none;
 }
 .attrs-div .options {
 	grid-column: 1 / 3;
--- 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><!--火-->