做好了潜觉的选择

index.html

@@ -85,7 +85,7 @@
 				</ul>
 				<ul class="formation-team">
 					<li class="team team-1 team-leader">
-						<ul class="acquisitus-awoken-ul">
+						<ul class="latent-ul">
 							<li></li>
 							<li></li>
 							<li></li>
@@ -96,7 +96,7 @@
 						<a class="monster" target="_blank">
 							<div class="property"></div>
 							<div class="subproperty"></div>
-							<div class="addition has297"><div class="hp">99</div><div class="atk">99</div><div class="def">99</div><div class="_297">297</div></div>
+							<div class="addition has297"><div class="hp">99</div><div class="atk">99</div><div class="rcv">99</div><div class="_297">297</div></div>
 							<div class="awoken-count display-none"></div>
 							<div class="level">99</div>
 						</a>
@@ -340,21 +340,33 @@
 				<ul>
 					<li class="m-add-hp-li"><input type="number" class="m-add-hp" min=0 max=99 /><button class="m-add-hp-btn-99" value="99">99</button></li>
 					<li class="m-add-atk-li"><input type="number" class="m-add-atk" min=0 max=99 /><button class="m-add-atk-btn-99" value="99">99</button></li>
-					<li class="m-add-def-li"><input type="number" class="m-add-def" min=0 max=99 /><button class="m-add-def-btn-99" value="99">99</button></li>
+					<li class="m-add-rcv-li"><input type="number" class="m-add-rcv" min=0 max=99 /><button class="m-add-rcv-btn-99" value="99">99</button></li>
 				</ul>
 			</div>
-			<div class="setting-row row-mon-a-awoken">
+			<div class="setting-row row-mon-latent">
 				<!--潜在觉醒-->
-				<ul class="m-a-awoken-ul">
-					<li></li>
-					<li></li>
-					<li></li>
-					<li></li>
-					<li></li>
-					<li></li>
+				<ul class="m-latent-ul">
+					<li class="latent-icon"></li>
+					<li class="latent-icon"></li>
+					<li class="latent-icon"></li>
+					<li class="latent-icon"></li>
+					<li class="latent-icon"></li>
+					<li class="latent-icon"></li>
 				</ul>
-				<ul class="m-a-awoken-list-ul">
-					<li></li>
+				<ul class="m-latent-allowable-ul">
+					<li class="latent-icon latent-icon-17" value="17"></li>
+					<li class="latent-icon latent-icon-18" value="18"></li>
+					<li class="latent-icon latent-icon-19" value="19"></li>
+					<li class="latent-icon latent-icon-20" value="20"></li>
+					<li class="latent-icon latent-icon-21" value="21"></li>
+					<li class="latent-icon latent-icon-22" value="22"></li>
+					<li class="latent-icon latent-icon-23" value="23"></li>
+					<li class="latent-icon latent-icon-24" value="24"></li>
+					<li class="latent-icon latent-icon-13" value="13"></li>
+					<li class="latent-icon latent-icon-14" value="14"></li>
+					<li class="latent-icon latent-icon-15" value="15"></li>
+					<li class="latent-icon latent-icon-16" value="16"></li>
+					<li class="latent-icon latent-icon-11" value="11"></li>
 				</ul>
 			</div>
 			

script.js

@@ -7,6 +7,7 @@ window.onload = function()
 		onload: function(response) {
 			ms = JSON.parse(response.response);
 			initialize();//初始化
+			test(); //测试代码
 		},
 		onerror: function(response) {
 			console.error("怪物数据获取错误",response);
@@ -26,6 +27,7 @@ function initialize()
 	//编辑框
 	var editBox = document.querySelector(".edit-box");
 	var settingBox = editBox.querySelector(".setting-box")
+	//id搜索
 	var monstersSearch = editBox.querySelector(".edit-box .m-id");
 	monstersSearch.onchange = function(){
 		if (/^\d+$/.test(this.value))
@@ -34,6 +36,7 @@ function initialize()
 		}
 	}
 	monstersSearch.oninput = monstersSearch.onchange;
+	//觉醒
 	var monEditAwokens = Array.prototype.slice.call(settingBox.querySelectorAll(".m-awoken-ul>.awoken-icon"));
 	monEditAwokens.forEach(function(akDom,idx,domArr){
 		akDom.onclick = function(){
@@ -44,12 +47,19 @@ function initialize()
 			for(var ai=1;ai<domArr.length;ai++)
 			{
 				if(ai<=idx)
-					domArr[ai].classList.remove("unselected-awoken");
+				{
+					if(domArr[ai].classList.contains("unselected-awoken"))
+						domArr[ai].classList.remove("unselected-awoken");
+				}
 				else
-					domArr[ai].classList.add("unselected-awoken");
+				{
+					if(!domArr[ai].classList.contains("unselected-awoken"))
+						domArr[ai].classList.add("unselected-awoken");
+				}
 			}
 		}
 	})
+	//等级
 	var monEditLv = settingBox.querySelector(".m-level");
 	var monEditLv99 = settingBox.querySelector(".m-level-btn-99");
 	var monEditLv110 = settingBox.querySelector(".m-level-btn-110");
@@ -57,20 +67,100 @@ function initialize()
 		monEditLv.value = this.value;
 	}
 	monEditLv110.onclick = monEditLv99.onclick;
-	
+	//加蛋
 	var monEditAddHp = settingBox.querySelector(".m-add-hp");
 	var monEditAddAtk = settingBox.querySelector(".m-add-atk");
-	var monEditAddDef = settingBox.querySelector(".m-add-def");
+	var monEditAddRcv = settingBox.querySelector(".m-add-rcv");
 	var monEditAddHp99 = settingBox.querySelector(".m-add-hp-btn-99");
 	monEditAddHp99.onclick = function(){monEditAddHp.value = this.value}
 	var monEditAddAtk99 = settingBox.querySelector(".m-add-atk-btn-99");
 	monEditAddAtk99.onclick = function(){monEditAddAtk.value = this.value}
-	var monEditAddDef99 = settingBox.querySelector(".m-add-def-btn-99");
-	monEditAddDef99.onclick = function(){monEditAddDef.value = this.value}
+	var monEditAddRcv99 = settingBox.querySelector(".m-add-rcv-btn-99");
+	monEditAddRcv99.onclick = function(){monEditAddRcv.value = this.value}
 	var monEditAdd297 = settingBox.querySelector(".m-add-btn-297");
-	monEditAdd297.onclick = function(){monEditAddHp.value = monEditAddAtk.value = monEditAddDef.value = 99}
-
-	test();
+	monEditAdd297.onclick = function(){monEditAddHp.value = monEditAddAtk.value = monEditAddRcv.value = 99}
+	//潜觉
+	var monEditLatentUl = settingBox.querySelector(".m-latent-ul");
+	var latent = editBox.latent = [];
+	var monEditLatents = Array.prototype.slice.call(monEditLatentUl.querySelectorAll("li"));
+	var monEditLatentAllowableUl = settingBox.querySelector(".m-latent-allowable-ul");
+	var monEditLatentsAllowable = Array.prototype.slice.call(monEditLatentAllowableUl.querySelectorAll("li"));
+	function usedHole(latent) //计算用了多少潜觉格子
+	{
+		return latent.reduce(function(previous,current){
+			return previous + (current>= 12?2:1);
+		},0);
+	}
+	function refreshLatent() //刷新潜觉
+	{
+		if (this.value<0) return;
+		var usedHoleN = usedHole(latent);
+		for (var ai=0;ai<6;ai++)
+		{
+			if (latent[ai])
+			{
+				monEditLatents[ai].className = "latent-icon latent-icon-" + latent[ai];
+				monEditLatents[ai].value = ai;
+			}
+			else if(ai<(6-usedHoleN+latent.length))
+			{
+				monEditLatents[ai].className = "latent-icon";
+				monEditLatents[ai].value = -1;
+			}
+			else
+			{
+				monEditLatents[ai].className = "display-none";
+				monEditLatents[ai].value = -1;
+			}
+		}
+	}
+	editBox.refreshLatent = refreshLatent;
+	//已有觉醒的去除
+	monEditLatents.forEach(function(l){
+		l.onclick = function(){
+			var aIdx = parseInt(this.value);
+			latent.splice(aIdx,1);
+			refreshLatent();
+		}
+	})
+	//可选觉醒的添加
+	monEditLatentsAllowable.forEach(function(la){
+		la.onclick = function(){
+			if (this.classList.contains("unselected-latent")) return;
+			var lIdx = parseInt(this.value);
+			var usedHoleN = usedHole(latent);
+			if (lIdx >= 12 && usedHoleN<=4)
+				latent.push(lIdx);
+			else if (lIdx < 12 && usedHoleN<=5)
+				latent.push(lIdx);
+			refreshLatent();
+			/*
+			var allowHole =  monEditLatents.filter(function(l){ //返回空余潜觉格子
+				return !l.classList.contains("display-none") && //没被隐藏的
+				Array.prototype.slice.call(l.classList).filter(function(c){ //存在觉醒图标className的
+					return /^latent\-icon\-\d+$/ig.test(c);
+				}).length<1;
+			})
+			var lIdx = parseInt(this.value);
+			if (lIdx >= 12)
+			{ //占两格
+				if (allowHole.length>=2)
+				{
+					allowHole[0].className = "latent-icon latent-icon-" + lIdx;
+					allowHole.value = lIdx;
+					allowHole[allowHole.length-1].className = "display-none";
+				}
+			}else
+			{ //占一格
+				if (allowHole.length>=1)
+				{
+					allowHole[0].className = "latent-icon latent-icon-" + lIdx;
+					allowHole.value = lIdx;
+				}
+			}
+			*/
+		}
+	})
 }
 function changeid(mon,monDom,awokenDom)
 {
@@ -118,7 +208,7 @@ function changeid(mon,monDom,awokenDom)
 	{
 		monDom.querySelector(".addition .hp").innerHTML = mon.addition[0];
 		monDom.querySelector(".addition .atk").innerHTML = mon.addition[1];
-		monDom.querySelector(".addition .def").innerHTML = mon.addition[2];
+		monDom.querySelector(".addition .rcv").innerHTML = mon.addition[2];
 		if (mon.addition[0]+mon.addition[1]+mon.addition[2] >= 297)
 		{
 			monDom.querySelector(".addition").classList.add("has297");
@@ -154,7 +244,8 @@ function editChangeMonId(id)
 		id = 0;
 		md = ms[0]
 	}
-	var monInfoBox = document.querySelector(".edit-box .monsterinfo-box");
+	var editBox = document.querySelector(".edit-box");
+	var monInfoBox = editBox.querySelector(".monsterinfo-box");
 	var me = monInfoBox.querySelector(".monster");
 	changeid({id:id,},me); //改变图像
 	var mId = monInfoBox.querySelector(".monster-id");
@@ -163,7 +254,7 @@ function editChangeMonId(id)
 	mRare.className = "monster-rare rare-" + md.rare;
 	var mName = monInfoBox.querySelector(".monster-name");
 	mName.innerHTML = md.name;
-	var mType = monInfoBox.querySelector(".monster-type").children;
+	var mType = monInfoBox.querySelectorAll(".monster-type li");
 	for (var ti=0;ti<mType.length;ti++)
 	{
 		if (md.type[ti])
@@ -176,8 +267,8 @@ function editChangeMonId(id)
 		}
 	}
 
-	var monSettingBox = document.querySelector(".edit-box .setting-box");
-	var mAwoken = monSettingBox.querySelector(".m-awoken-ul").children;
+	var monSettingBox = editBox.querySelector(".setting-box");
+	var mAwoken = monSettingBox.querySelectorAll(".m-awoken-ul li");
 	mAwoken[0].innerHTML = md.awoken.length?"★":"0";
 	for (var ai=1;ai<mAwoken.length;ai++)
 	{
@@ -189,4 +280,25 @@ function editChangeMonId(id)
 			mAwoken[ai].className = "display-none";
 		}
 	}
+	var monLatentAllowUl = editBox.querySelector(".m-latent-allowable-ul");
+	//该宠Type允许的杀
+	var allowLatent = uniq(md.type.reduce(function (previous, t, index, array) {
+		return previous.concat(type_allowable_latent[t]);
+	},[]));
+	for(var li=17;li<=24;li++)
+	{
+		var latentDom = monLatentAllowUl.querySelector(".latent-icon-" + li);
+		if (allowLatent.indexOf(li)>=0)
+		{
+			if(latentDom.classList.contains("unselected-latent"))
+				latentDom.classList.remove("unselected-latent");
+		}else
+		{
+			if(!latentDom.classList.contains("unselected-latent"))
+				latentDom.classList.add("unselected-latent");
+		}
+	}
+
+	editBox.latent.length = 0;
+	editBox.refreshLatent();
 }

style-monsterimages.css

@@ -157,8 +157,8 @@
 .pet-cards-index-y-7{background-position-y:-714px;}
 .pet-cards-index-y-8{background-position-y:-816px;}
 .pet-cards-index-y-9{background-position-y:-918px;}
-/*觉醒和类型*/
-.awoken-icon,.type-icon{
+/*觉醒、类型、潜觉*/
+.awoken-icon,.type-icon,.latent-icon{
 	display:inline-block;
 	width:32px;height:32px;
     vertical-align: middle;
@@ -449,9 +449,60 @@
 .type-name-15::after{/*龙*/
 	content: "贩卖用";
 }
-.type-icon-9{/*特殊*/
-	background-position: 0px -384px;
+/*潜在觉醒*/
+.latent-icon{
+	background-image: url(images/latent.png);
+}
+.latent-icon-11{ /*防坐*/
+	background-position: 0px -352px;
+}
+.latent-icon-13{ /*进化杀*/
+	background-position: 0px -416px;
+}
+.latent-icon-14{ /*觉醒杀*/
+	background-position: 0px -448px;
+}
+.latent-icon-15{ /*强化杀*/
+	background-position: 0px -480px;
+}
+.latent-icon-16{ /*卖钱杀*/
+	background-position: 0px -512px;
+}
+.latent-icon-17{ /*神杀*/
+	background-position: 0px -544px;
+}
+.latent-icon-18{ /*龙杀*/
+	background-position: 0px -576px;
+}
+.latent-icon-19{ /*恶魔杀*/
+	background-position: 0px -608px;
+}
+.latent-icon-20{ /*机械杀*/
+	background-position: 0px -640px;
+}
+.latent-icon-21{ /*平衡杀*/
+	background-position: 0px -672px;
+}
+.latent-icon-22{ /*攻击杀*/
+	background-position: 0px -704px;
+}
+.latent-icon-23{ /*体力杀*/
+	background-position: 0px -736px;
+}
+.latent-icon-24{ /*回复杀*/
+	background-position: 0px -768px;
 }
-.type-name-9::after{
-	content: "特殊";
+.latent-icon-13,
+.latent-icon-14,
+.latent-icon-15,
+.latent-icon-16,
+.latent-icon-17,
+.latent-icon-18,
+.latent-icon-19,
+.latent-icon-20,
+.latent-icon-21,
+.latent-icon-22,
+.latent-icon-23,
+.latent-icon-24{
+	width: 76px;
 }

style.css

@@ -57,7 +57,7 @@ ul{
 }
 .monster .addition .hp::before,
 .monster .addition .atk::before,
-.monster .addition .def::before,
+.monster .addition .rcv::before,
 .monster .addition ._297::before{
 	content: "+";
 }
@@ -66,7 +66,7 @@ ul{
 }
 .monster .addition.has297 .hp,
 .monster .addition.has297 .atk,
-.monster .addition.has297 .def{ /*当是297时隐藏3维*/
+.monster .addition.has297 .rcv{ /*当是297时隐藏3维*/
 	display:none;
 }
 .monster .addition.has297 ._297{ /*当是297时显示297*/
@@ -335,27 +335,27 @@ ul{
 	content: "怪物加值";
 	display: block;
 }
-.setting-box .m-add-hp,.setting-box .m-add-atk,.setting-box .m-add-def{
+.setting-box .m-add-hp,.setting-box .m-add-atk,.setting-box .m-add-rcv{
 	font-size: 25px;
 	height: 40px;
 	width: calc(100% - 212px);
 	box-sizing: border-box;
 }
-.m-add-hp-li::before,.m-add-atk-li::before,.m-add-def-li::before{
+.m-add-hp-li::before,.m-add-atk-li::before,.m-add-rcv-li::before{
 	font-size: 25px;
 	width: 55px;
 	display: inline-block;
 }
 .m-add-hp-li::before{content: "HP";}
 .m-add-atk-li::before{content: "攻击";}
-.m-add-def-li::before{content: "回复";}
-.m-add-hp-btn-99,.m-add-atk-btn-99,.m-add-def-btn-99{
+.m-add-rcv-li::before{content: "回复";}
+.m-add-hp-btn-99,.m-add-atk-btn-99,.m-add-rcv-btn-99{
 	height: 40px;
 	width: 70px;
 	box-sizing: border-box;
 	font-size: 25px;
 }
-.m-add-hp-btn-99::before,.m-add-atk-btn-99::before,.m-add-def-btn-99::before,.m-add-btn-297::before{
+.m-add-hp-btn-99::before,.m-add-atk-btn-99::before,.m-add-rcv-btn-99::before,.m-add-btn-297::before{
 	content: "+";
 }
 .m-add-btn-297{
@@ -365,11 +365,44 @@ ul{
 	box-sizing: border-box;
 	font-size: 25px;
 }
-.edit-box .setting-box .row-mon-a-awoken::before{
+.edit-box .setting-box .row-mon-latent::before{
 	content: "潜在觉醒";
 }
-
-
+.m-latent-ul{
+	text-align: center;
+	font-size: 0;
+}
+.m-latent-ul .latent-icon{
+	margin-left: 12px;
+}
+.m-latent-ul .latent-icon:first-of-type{
+	margin-left: 0;
+}
+.m-latent-allowable-ul{
+	margin-top: 5px;
+}
+.m-latent-allowable-ul .latent-icon{
+	cursor: pointer;
+}
+.m-latent-allowable-ul .latent-icon.unselected-latent{
+	cursor: default;
+	opacity: 0.3;
+}
+.latent-icon-11,
+.latent-icon-13,
+.latent-icon-14,
+.latent-icon-15,
+.latent-icon-16,
+.latent-icon-17,
+.latent-icon-18,
+.latent-icon-19,
+.latent-icon-20,
+.latent-icon-21,
+.latent-icon-22,
+.latent-icon-23,
+.latent-icon-24{
+	cursor: pointer;
+}
 
 .edit-box .button-box .button-done::after{
 	content: "确认修改";

universal_function.js

@@ -1,4 +1,20 @@
-//仿GM_xmlhttpRequest函数v1.3
+
+//类型允许的潜觉杀，前面的数字是官方数据的类型编号，后面的杀是自己做的图片中的潜觉序号
+var type_allowable_latent = {
+    "0":[], //0进化
+    "12":[], //12觉醒
+    "14":[], //14强化
+    "15":[], //15卖钱
+    "1":[17,18,19,20,21,22,23,24], //1平衡
+    "2":[20,24],//2体力
+    "3":[18,22],//3回复
+    "4":[20,24],//4龙
+    "5":[19],//5神
+    "6":[19,23],//6攻击
+    "7":[17],//7恶魔
+    "8":[17,20,21,24],//8机械
+}
+//仿GM_xmlhttpRequest函数v1.3
 if (typeof(GM_xmlhttpRequest) == "undefined") {
     var GM_xmlhttpRequest = function(GM_param) {
 
@@ -24,6 +40,25 @@ if (typeof(GM_xmlhttpRequest) == "undefined") {
     }
 }
 //数字补0
-function PrefixInteger(num, length) {  
+function PrefixInteger(num, length)
+{  
 	return (Array(length).join('0') + num).slice(-length); 
+}
+//数组去重
+/* https://www.cnblogs.com/baiyangyuanzi/p/6726258.html
+* 实现思路：获取没重复的最右一值放入新数组。
+* （检测到有重复值时终止当前循环同时进入顶层循环的下一轮判断）*/
+function uniq(array){
+    var temp = [];
+    var l = array.length;
+    for(var i = 0; i < l; i++) {
+        for(var j = i + 1; j < l; j++){
+            if (array[i] === array[j]){
+                i++;
+                j = i;
+            }
+        }
+        temp.push(array[i]);
+    }
+    return temp;
 }