已经可以分享内容了

index.html

@@ -16,7 +16,7 @@
 		<div class="formation-A-bigbox">
 			<div class="formation-A-box">
 				<ul class="formation-assist">
-					<li class="member member-1">
+					<li class="member member-1 null">
 						<a class="monster" target="_blank" onclick="editMon(0,1,0);return false;">
 							<div class="property"></div>
 							<div class="subproperty"></div>
@@ -25,7 +25,7 @@
 							<div class="level"></div>
 						</a>
 					</li>
-					<li class="member member-2">
+					<li class="member member-2 null">
 						<a class="monster" target="_blank" onclick="editMon(0,1,1);return false;">
 							<div class="property"></div>
 							<div class="subproperty"></div>
@@ -34,7 +34,7 @@
 							<div class="level"></div>
 						</a>
 					</li>
-					<li class="member member-3">
+					<li class="member member-3 null">
 						<a class="monster" target="_blank" onclick="editMon(0,1,2);return false;">
 							<div class="property"></div>
 							<div class="subproperty"></div>
@@ -43,7 +43,7 @@
 							<div class="level"></div>
 						</a>
 					</li>
-					<li class="member member-4">
+					<li class="member member-4 null">
 						<a class="monster" target="_blank" onclick="editMon(0,1,3);return false;">
 							<div class="property"></div>
 							<div class="subproperty"></div>
@@ -52,7 +52,7 @@
 							<div class="level"></div>
 						</a>
 					</li>
-					<li class="member member-5">
+					<li class="member member-5 null">
 						<a class="monster" target="_blank" onclick="editMon(0,1,4);return false;">
 							<div class="property"></div>
 							<div class="subproperty"></div>
@@ -64,7 +64,7 @@
 				</ul>
 				<ul class="formation-latents">
 					<li class="latents latents-1">
-						<ul class="latent-ul">
+						<ul class="latent-ul display-none">
 							<li class="latent-icon"></li>
 							<li class="latent-icon"></li>
 							<li class="latent-icon"></li>
@@ -74,7 +74,7 @@
 						</ul>
 					</li>
 					<li class="latents latents-2">
-						<ul class="latent-ul">
+						<ul class="latent-ul display-none">
 							<li class="latent-icon"></li>
 							<li class="latent-icon"></li>
 							<li class="latent-icon"></li>
@@ -84,7 +84,7 @@
 						</ul>
 					</li>
 					<li class="latents latents-3">
-						<ul class="latent-ul">
+						<ul class="latent-ul display-none">
 							<li class="latent-icon"></li>
 							<li class="latent-icon"></li>
 							<li class="latent-icon"></li>
@@ -94,7 +94,7 @@
 						</ul>
 					</li>
 					<li class="latents latents-4">
-						<ul class="latent-ul">
+						<ul class="latent-ul display-none">
 							<li class="latent-icon"></li>
 							<li class="latent-icon"></li>
 							<li class="latent-icon"></li>
@@ -104,7 +104,7 @@
 						</ul>
 					</li>
 					<li class="latents latents-5">
-						<ul class="latent-ul">
+						<ul class="latent-ul display-none">
 							<li class="latent-icon"></li>
 							<li class="latent-icon"></li>
 							<li class="latent-icon"></li>
@@ -115,7 +115,7 @@
 					</li>
 				</ul>
 				<ul class="formation-team">
-					<li class="member member-1">
+					<li class="member member-1 team-leader null">
 						<a class="monster" target="_blank" onclick="editMon(0,0,0);return false;">
 							<div class="property"></div>
 							<div class="subproperty"></div>
@@ -124,7 +124,7 @@
 							<div class="level"></div>
 						</a>
 					</li>
-					<li class="member member-2">
+					<li class="member member-2 null">
 						<a class="monster" target="_blank" onclick="editMon(0,0,1);return false;">
 							<div class="property"></div>
 							<div class="subproperty"></div>
@@ -133,7 +133,7 @@
 							<div class="level"></div>
 						</a>
 					</li>
-					<li class="member member-3">
+					<li class="member member-3 null">
 						<a class="monster" target="_blank" onclick="editMon(0,0,2);return false;">
 							<div class="property"></div>
 							<div class="subproperty"></div>
@@ -142,7 +142,7 @@
 							<div class="level"></div>
 						</a>
 					</li>
-					<li class="member member-4">
+					<li class="member member-4 null">
 						<a class="monster" target="_blank" onclick="editMon(0,0,3);return false;">
 							<div class="property"></div>
 							<div class="subproperty"></div>
@@ -151,7 +151,7 @@
 							<div class="level"></div>
 						</a>
 					</li>
-					<li class="member member-5">
+					<li class="member member-5 null">
 						<a class="monster" target="_blank" onclick="editMon(0,0,4);return false;">
 							<div class="property"></div>
 							<div class="subproperty"></div>
@@ -166,7 +166,7 @@
 		<div class="formation-B-bigbox">
 			<div class="formation-B-box">
 				<ul class="formation-team">
-					<li class="member member-1">
+					<li class="member member-1 null">
 						<a class="monster" target="_blank" onclick="editMon(1,0,0);return false;">
 							<div class="property"></div>
 							<div class="subproperty"></div>
@@ -175,7 +175,7 @@
 							<div class="level"></div>
 						</a>
 					</li>
-					<li class="member member-2">
+					<li class="member member-2 null">
 						<a class="monster" target="_blank" onclick="editMon(1,0,1);return false;">
 							<div class="property"></div>
 							<div class="subproperty"></div>
@@ -184,7 +184,7 @@
 							<div class="level"></div>
 						</a>
 					</li>
-					<li class="member member-3">
+					<li class="member member-3 null">
 						<a class="monster" target="_blank" onclick="editMon(1,0,2);return false;">
 							<div class="property"></div>
 							<div class="subproperty"></div>
@@ -193,7 +193,7 @@
 							<div class="level"></div>
 						</a>
 					</li>
-					<li class="member member-4">
+					<li class="member member-4 null">
 						<a class="monster" target="_blank" onclick="editMon(1,0,3);return false;">
 							<div class="property"></div>
 							<div class="subproperty"></div>
@@ -202,7 +202,7 @@
 							<div class="level"></div>
 						</a>
 					</li>
-					<li class="member member-5">
+					<li class="member member-5 team-leader null">
 						<a class="monster" target="_blank" onclick="editMon(1,0,4);return false;">
 							<div class="property"></div>
 							<div class="subproperty"></div>
@@ -214,7 +214,7 @@
 				</ul>
 				<ul class="formation-latents">
 					<li class="latents latents-1">
-						<ul class="latent-ul">
+						<ul class="latent-ul display-none">
 							<li class="latent-icon"></li>
 							<li class="latent-icon"></li>
 							<li class="latent-icon"></li>
@@ -224,7 +224,7 @@
 						</ul>
 					</li>
 					<li class="latents latents-2">
-						<ul class="latent-ul">
+						<ul class="latent-ul display-none">
 							<li class="latent-icon"></li>
 							<li class="latent-icon"></li>
 							<li class="latent-icon"></li>
@@ -234,7 +234,7 @@
 						</ul>
 					</li>
 					<li class="latents latents-3">
-						<ul class="latent-ul">
+						<ul class="latent-ul display-none">
 							<li class="latent-icon"></li>
 							<li class="latent-icon"></li>
 							<li class="latent-icon"></li>
@@ -244,7 +244,7 @@
 						</ul>
 					</li>
 					<li class="latents latents-4">
-						<ul class="latent-ul">
+						<ul class="latent-ul display-none">
 							<li class="latent-icon"></li>
 							<li class="latent-icon"></li>
 							<li class="latent-icon"></li>
@@ -254,7 +254,7 @@
 						</ul>
 					</li>
 					<li class="latents latents-5">
-						<ul class="latent-ul">
+						<ul class="latent-ul display-none">
 							<li class="latent-icon"></li>
 							<li class="latent-icon"></li>
 							<li class="latent-icon"></li>
@@ -265,7 +265,7 @@
 					</li>
 				</ul>
 				<ul class="formation-assist">
-					<li class="member member-1">
+					<li class="member member-1 null">
 						<a class="monster" target="_blank" onclick="editMon(1,1,0);return false;">
 							<div class="property"></div>
 							<div class="subproperty"></div>
@@ -274,7 +274,7 @@
 							<div class="level"></div>
 						</a>
 					</li>
-					<li class="member member-2">
+					<li class="member member-2 null">
 						<a class="monster" target="_blank" onclick="editMon(1,1,1);return false;">
 							<div class="property"></div>
 							<div class="subproperty"></div>
@@ -283,7 +283,7 @@
 							<div class="level"></div>
 						</a>
 					</li>
-					<li class="member member-3">
+					<li class="member member-3 null">
 						<a class="monster" target="_blank" onclick="editMon(1,1,2);return false;">
 							<div class="property"></div>
 							<div class="subproperty"></div>
@@ -292,7 +292,7 @@
 							<div class="level"></div>
 						</a>
 					</li>
-					<li class="member member-4">
+					<li class="member member-4 null">
 						<a class="monster" target="_blank" onclick="editMon(1,1,3);return false;">
 							<div class="property"></div>
 							<div class="subproperty"></div>
@@ -301,7 +301,7 @@
 							<div class="level"></div>
 						</a>
 					</li>
-					<li class="member member-5">
+					<li class="member member-5 null">
 						<a class="monster" target="_blank" onclick="editMon(1,1,4);return false;">
 							<div class="property"></div>
 							<div class="subproperty"></div>
@@ -313,6 +313,7 @@
 				</ul>
 			</div>
 		</div>
+		<div class="detail-box"><textarea class="detail" placeholder="输入说明"></textarea></div>
 	</div>
 	<div class="edit-box display-none">
 		<div class="edit-box-title"><!--修改怪物--></div>
@@ -393,8 +394,8 @@
 			
 		</div>
 		<div class="button-box">
-			<button class="button-null" disabled="true"><!--留空格子--></button>
-			<button class="button-delay" disabled="true"><!--应对威吓--></button>
+			<button class="button-null"><!--留空格子--></button>
+			<button class="button-delay"><!--应对威吓--></button>
 			<button class="button-done"><!--确认修改--></button>
 			<button class="button-cancel"><!--取消修改--></button>
 		</div>

script.js

@@ -27,6 +27,7 @@ var teamObj = function(){
 }
 var formation = {
 	title:"",
+	detail:"",
 	team:[
 		new teamObj(),//队伍A
 		new teamObj(),//队伍B
@@ -40,13 +41,40 @@ window.onload = function()
 		onload: function(response) {
 			ms = JSON.parse(response.response);
 			initialize();//初始化
-			test(); //测试代码
+
+			try
+			{
+				var idataQer = getQueryString("data");
+				if (idataQer)
+				{
+					var idata = JSON.parse(decodeURIComponent(idataQer));
+					formation = idata;
+					refreshAll(formation);
+				}
+			}catch(e)
+			{
+				console.log("初始数据解码出错");
+			}
+			//test(); //测试代码
 		},
 		onerror: function(response) {
 			console.error("怪物数据获取错误",response);
 		}
 	});
 }
+//创建新的分享地址
+function creatNewUrl(){
+	if (!!(window.history && history.pushState)) {
+		// 支持History API
+		history.replaceState(null, null, '?data=' + encodeURIComponent(JSON.stringify(formation)));
+	}
+}
+//获取URL参数
+function getQueryString(name) {
+	var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
+	var r = window.location.search.substr(1).match(reg);
+	if (r != null) return unescape(r[2]); return null;
+}
 //初始化
 function initialize()
 {
@@ -57,6 +85,20 @@ function initialize()
 		opt.label = m.id + " | " +  m.name["ja"] + " | " + m.name["en"] + " | " + m.name["ko"];
 	});
 
+	//标题和介绍文本框
+	var txtTitle = document.querySelector(".title-box .title");
+	var txtDetail = document.querySelector(".detail-box .detail");
+	txtTitle.onchange = function(){
+		formation.title = this.value;
+		creatNewUrl();
+	}
+	txtTitle.oninput = txtTitle.onchange;
+	txtDetail.onchange = function(){
+		formation.detail = this.value;
+		creatNewUrl();
+	}
+	txtDetail.oninput = txtDetail.onchange;
+
 	//队伍框
 	var formationBox = document.querySelector(".formation-box");
 	formationBox.formationBox = formation;
@@ -67,7 +109,15 @@ function initialize()
 	editBox.assist = false; //储存是否为辅助宠物
 	editBox.monsterBox = null;
 	editBox.latentBox = null;
-	editBox.member = null;
+	editBox.memberIdx = []; //储存队伍数组下标
+	editBox.show = function(){
+		editBox.classList.remove("display-none");
+		formationBox.classList.add("blur-bg");
+	}
+	editBox.hide = function(){
+		editBox.classList.add("display-none");
+		formationBox.classList.remove("blur-bg");
+	}
 
 	var settingBox = editBox.querySelector(".setting-box")
 	//id搜索
@@ -173,15 +223,21 @@ function initialize()
 	
 	var btnCancel = editBox.querySelector(".button-cancel");
 	var btnDone = editBox.querySelector(".button-done");
+	var btnNull = editBox.querySelector(".button-null");
+	var btnDelay = editBox.querySelector(".button-delay");
 	btnCancel.onclick = function(){
 		btnDone.classList.remove("cant-assist");
 		btnDone.disabled = false;
-		editBox.member = null;
-		editBox.classList.add("display-none");
-		formationBox.classList.remove("blur-bg");
+		editBox.memberIdx = [];
+		editBox.hide();
 	}
 	btnDone.onclick = function(){
-		var mD = editBox.member;
+		if (parseInt(monEditLv.value) == 0)
+		{
+			btnNull.onclick();
+			return;
+		}
+		var mD = formation.team[editBox.memberIdx[0]][editBox.memberIdx[1]][editBox.memberIdx[2]] = editBox.assist?new memberAssistObj():new memberTeamObj();
 		mD.id = parseInt(monstersSearch.value);
 		mD.level = parseInt(monEditLv.value);
 		mD.awoken = monEditAwokens.filter(function(akDom){
@@ -196,8 +252,20 @@ function initialize()
 		}
 
 		changeid(mD,editBox.monsterBox,editBox.latentBox);
-		editBox.classList.add("display-none");
-		formationBox.classList.remove("blur-bg");
+		creatNewUrl();
+		editBox.hide();
+	}
+	btnNull.onclick = function(){
+		var mD = formation.team[editBox.memberIdx[0]][editBox.memberIdx[1]][editBox.memberIdx[2]] = {id:0};
+		changeid(mD,editBox.monsterBox,editBox.latentBox);
+		creatNewUrl();
+		editBox.hide();
+	}
+	btnDelay.onclick = function(){ //应对威吓
+		var mD = formation.team[editBox.memberIdx[0]][editBox.memberIdx[1]][editBox.memberIdx[2]] = {id:-1};
+		changeid(mD,editBox.monsterBox,editBox.latentBox);
+		creatNewUrl();
+		editBox.hide();
 	}
 }
 function usedHole(latent) //计算用了多少潜觉格子
@@ -210,8 +278,20 @@ function usedHole(latent) //计算用了多少潜觉格子
 function changeid(mon,monDom,latentDom)
 {
 	var md = ms[mon.id]; //怪物固定数据
-	if (mon.id>-1) //如果提供了id
+	if (mon.id<0) //如果是延迟
+	{
+		monDom.parentNode.classList.add("delay");
+		monDom.parentNode.classList.remove("null");
+		return;
+	}else if (mon.id==0) //如果是空
+	{
+		monDom.parentNode.classList.add("null");
+		monDom.parentNode.classList.remove("delay");
+		return;
+	}else (mon.id>-1) //如果提供了id
 	{
+		monDom.parentNode.classList.remove("null");
+		monDom.parentNode.classList.remove("delay");
 		monDom.className = "monster";
 		monDom.classList.add("pet-cards-" + Math.ceil(mon.id/100)); //添加图片编号
 		var idxInPage = (mon.id-1) % 100; //获取当前页面的总序号
@@ -276,6 +356,10 @@ function changeid(mon,monDom,latentDom)
 	if (latentDom && mon.latent) //如果提供了潜觉
 	{
 		var latent = mon.latent.sort(function(a,b){return b-a;});
+		if (latent.length < 1)
+			latentDom.classList.add("display-none");
+		else
+			latentDom.classList.remove("display-none");
 		var latentDoms = Array.prototype.slice.call(latentDom.querySelectorAll("li"));
 		var usedHoleN = usedHole(latent);
 		for (var ai=0;ai<6;ai++)
@@ -300,6 +384,7 @@ function editMon(AorB,isAssist,tempIdx)
 {
 	//数据
 	var mD = formation.team[AorB][isAssist][tempIdx];
+
 	//对应的Dom
 	var formationBox = AorB?document.querySelector(".formation-box .formation-B-box"):document.querySelector(".formation-box .formation-A-box");
 	
@@ -309,11 +394,11 @@ function editMon(AorB,isAssist,tempIdx)
 	var editBox = document.querySelector(".edit-box");
 	var monsterBox = memberBox.querySelector(".monster");
 
-	document.querySelector(".formation-box").classList.add("blur-bg");
-	editBox.classList.remove("display-none");
+	editBox.show();
+
 	editBox.assist = isAssist;
 	editBox.monsterBox = monsterBox;
-	editBox.member = mD;
+	editBox.memberIdx = [AorB,isAssist,tempIdx]; //储存队伍数组下标
 	editBox.assist = isAssist;
 	if (!isAssist)
 	{
@@ -328,17 +413,29 @@ function editMon(AorB,isAssist,tempIdx)
 	var monEditAwokens = settingBox.querySelectorAll(".m-awoken-ul .awoken-icon");
 	if (mD.awoken>0) monEditAwokens[mD.awoken].onclick();
 	var monEditLv = settingBox.querySelector(".m-level");
-	monEditLv.value = mD.level;
+	monEditLv.value = mD.level || 1;
 	var monEditAddHp = settingBox.querySelector(".m-plus-hp");
 	var monEditAddAtk = settingBox.querySelector(".m-plus-atk");
 	var monEditAddRcv = settingBox.querySelector(".m-plus-rcv");
-	monEditAddHp.value = mD.plus[0];
-	monEditAddAtk.value = mD.plus[1];
-	monEditAddRcv.value = mD.plus[2];
+	if (mD.plus)
+	{
+		monEditAddHp.value = mD.plus[0];
+		monEditAddAtk.value = mD.plus[1];
+		monEditAddRcv.value = mD.plus[2];
+	}
+	var btnDelay = editBox.querySelector(".button-delay");
 	if (!isAssist)
 	{
-		editBox.latent = mD.latent.concat();
+		editBox.latent = mD.latent || [];
 		editBox.refreshLatent(editBox.latent);
+		btnDelay.classList.add("display-none");
+		settingBox.querySelector(".row-mon-latent").classList.remove("display-none");
+		editBox.querySelector(".edit-box-title").classList.remove("edit-box-title-assist");
+	}else
+	{
+		btnDelay.classList.remove("display-none");
+		settingBox.querySelector(".row-mon-latent").classList.add("display-none");
+		editBox.querySelector(".edit-box-title").classList.add("edit-box-title-assist");
 	}
 }
 
@@ -427,8 +524,26 @@ function editBoxChangeMonId(id)
 	editBox.refreshLatent(editBox.latent);
 }
 
-
-
+function refreshAll(fmt){
+	document.querySelector(".title-box .title").value = fmt.title || "";
+	document.querySelector(".detail-box .detail").value = fmt.detail || "";
+	var formationA = document.querySelector(".formation-box .formation-A-box");
+	var formationB = document.querySelector(".formation-box .formation-B-box");
+	
+	var fATeam = formationA.querySelectorAll(".formation-team .monster");
+	var fALatents = formationA.querySelectorAll(".formation-latents .latent-ul");
+	var fAAssist = formationA.querySelectorAll(".formation-assist .monster");
+	var fBTeam = formationB.querySelectorAll(".formation-team .monster");
+	var fBLatents = formationB.querySelectorAll(".formation-latents .latent-ul");
+	var fBAssist = formationB.querySelectorAll(".formation-assist .monster");
+	for (var ti=0;ti<5;ti++)
+	{
+		changeid(fmt.team[0][0][ti],fATeam[ti],fALatents[ti]);
+		changeid(fmt.team[0][1][ti],fAAssist[ti]);
+		changeid(fmt.team[1][0][ti],fBTeam[ti],fBLatents[ti]);
+		changeid(fmt.team[1][1][ti],fBAssist[ti]);
+	}
+}
 
 function test()
 {

style.css

@@ -14,11 +14,22 @@
 	display:none;
 }
 .title{
+	width:100%;
 	border: none;
 	background: none;
 	font-size: 2em;
 	font-weight: bold;
 }
+.detail{
+	width:100%;
+	max-width:100%;
+	min-width:100%;
+	resize: vertical; 
+	border: none;
+	background: none;
+	font-size: 1.5em;
+	font-family: "Source Han Sans","Microsoft Yahei",Arial, Helvetica, sans-serif;
+}
 ul{
 	margin: 0;
 	padding: 0;
@@ -35,6 +46,7 @@ ul{
 /*队伍行*/
 .formation-team{
 }
+
 /*单个怪物*/
 .monster{
 	font-family: 'FOT-KurokaneStd-EB';
@@ -43,10 +55,44 @@ ul{
 	margin: 0;
 	display: block;
 	float: left;
-	background-image: url(images/001.png);
 	background-repeat: no-repeat;
 	position: relative;
 	cursor: pointer;
+	border-radius: 5px;
+}
+.null .monster,.delay .monster,
+.null .property,.delay .property,
+.null .subproperty,.delay .subproperty
+{
+	box-sizing: border-box;
+	background-image: none;
+}
+.null .monster{
+	background-color: rgba(100,100,100,0.5);
+	border: 3px grey dashed;
+}
+.edit-box .null .monster{
+	background-color: #653;
+	border: none;
+	box-shadow: inset black 0 0 7px;
+}
+.delay .monster{
+	background-color: yellow;
+	box-shadow: inset orange 0 0 7px;
+	border: 3px black solid;
+}
+.delay .monster::before{
+	display: block;
+	width: 94px;
+	height: 94px;
+	color: black;
+	font-size: 30px;
+	line-height: 47px;
+	text-align: center;
+	font-weight: bold;
+	content: "应 对\A威 吓";
+	white-space: pre-wrap;
+	display: inline-block;
 }
 /*怪物属性*/
 .property,.subproperty{
@@ -67,6 +113,12 @@ ul{
 	position: absolute;
 	left:0;
 }
+
+.null .plus,.delay .plus,
+.null .awoken-count,.delay .awoken-count,
+.null .level,.delay .level{
+	display:none;
+}
 .monster .plus .hp::before,
 .monster .plus .atk::before,
 .monster .plus .rcv::before,
@@ -142,9 +194,6 @@ ul{
 .formation-assist, .formation-team{
 	display: inline-block;
 }
-.formation-latents{
-	height:47px;
-}
 .formation-A-box .formation-team,.formation-A-box .formation-latents{
 	background-color:pink;
 }
@@ -205,8 +254,9 @@ ul{
 /*队伍的潜觉*/
 .formation-box .latents{
 	width: 108px;
-	height: 46px;
+	/*height: 46px;*/
 	float: left;
+	margin-bottom: -19px;
 }
 .formation-box .latent-ul{
 	font-size: 0;
@@ -236,6 +286,7 @@ ul{
 	border-radius: 10px;
 	border-width:4px;
 	border-style:solid;
+	box-sizing: initial;
 	margin: 0;
 }
 .formation-A-box .formation-team .team-leader .monster{
@@ -264,7 +315,10 @@ ul{
 	font-weight: bold;
 }
 .edit-box .edit-box-title::before{
-	content: "修改怪物";
+	content: "修改队员";
+}
+.edit-box .edit-box-title.edit-box-title-assist::before{
+	content: "修改辅助";
 }
 .edit-box .monsterinfo-box{
 	font-family: 'FOT-KurokaneStd-EB';