修改徽章的css模式，并修复以前的徽章不能保存的问题
This commit is contained in:
parent
f137dcef9e
commit
98c3939c83
|
|
@ -320,8 +320,8 @@
|
|||
{
|
||||
background-position-x: -76px;
|
||||
}
|
||||
.badge-0,
|
||||
.badge-2
|
||||
.badge[data-badge='0']::before,
|
||||
.badge[data-badge='2']::before
|
||||
{
|
||||
background-position-x: -36px;
|
||||
}
|
||||
|
|
@ -312,8 +312,8 @@
|
|||
{
|
||||
background-position-x: -76px;
|
||||
}
|
||||
.badge-0,
|
||||
.badge-2
|
||||
.badge[data-badge='0']::before,
|
||||
.badge[data-badge='2']::before
|
||||
{
|
||||
background-position-x: -36px;
|
||||
}
|
||||
|
|
@ -310,7 +310,8 @@
|
|||
{
|
||||
background-position-x: -64px;
|
||||
}
|
||||
.badge-0
|
||||
.badge[data-badge='0']::before,
|
||||
.badge[data-badge='17']::before
|
||||
{
|
||||
background-position-x: -72px;
|
||||
}
|
||||
|
|
@ -310,11 +310,8 @@
|
|||
{
|
||||
background-position-x: -64px;
|
||||
}
|
||||
.badge-0
|
||||
{
|
||||
background-position-x: -72px;
|
||||
}
|
||||
.badge-17
|
||||
.badge[data-badge='0']::before,
|
||||
.badge[data-badge='17']::before
|
||||
{
|
||||
background-position-x: -72px;
|
||||
}
|
||||
34
script.js
34
script.js
|
|
@ -717,25 +717,25 @@ function initialize()
|
|||
|
||||
//添加徽章
|
||||
const className_ChoseBadges = "show-all-badges";
|
||||
teamBigBoxs.forEach(tb=>{
|
||||
teamBigBoxs.forEach(teamBigBox=>{
|
||||
//徽章
|
||||
const teamBadge = tb.querySelector(".team-badge");
|
||||
const teamBadge = teamBigBox.querySelector(".team-badge");
|
||||
if (!teamBadge) return;
|
||||
const badges = Array.from(teamBadge.querySelectorAll(".badge-bg"));
|
||||
badges.forEach((badge,bidx) => {
|
||||
badge.onclick = function(){
|
||||
if (teamBadge.classList.contains(className_ChoseBadges))
|
||||
{
|
||||
teamBadge.classList.remove(className_ChoseBadges);
|
||||
formation.badge = bidx;
|
||||
refreshTotalHP(formation.teams[0]);
|
||||
creatNewUrl();
|
||||
}else
|
||||
{
|
||||
teamBadge.classList.add(className_ChoseBadges);
|
||||
}
|
||||
};
|
||||
});
|
||||
const badges = Array.from(teamBadge.querySelectorAll(".badge-radio"));
|
||||
function setBadge(){
|
||||
if (teamBadge.classList.contains(className_ChoseBadges))
|
||||
{
|
||||
teamBadge.classList.remove(className_ChoseBadges);
|
||||
formation.badge = parseInt(this.value,10); //如果将来改成每队有徽章，就修改这里的设定
|
||||
const teamTotalInfoDom = teamBigBox.querySelector(".team-total-info"); //队伍能力值合计
|
||||
refreshTeamTotalHP(teamTotalInfoDom, formation.teams[0]);
|
||||
creatNewUrl();
|
||||
}else
|
||||
{
|
||||
teamBadge.classList.add(className_ChoseBadges);
|
||||
}
|
||||
}
|
||||
badges.forEach(badge => badge.onclick = setBadge);
|
||||
});
|
||||
|
||||
//编辑框
|
||||
|
|
|
|||
36
solo.html
36
solo.html
|
|
@ -48,24 +48,24 @@ var formation = new Formation(teamsCount,6);
|
|||
<ul class="teams">
|
||||
<li class="team-bigbox team-1">
|
||||
<ul class="team-badge">
|
||||
<input type="radio" name="team-0-badge" class="badge-radio" value="0" id="team-0-badge-0" checked><label class="badge-bg" for="team-0-badge-0"><div class="badge badge-0"></div></label>
|
||||
<input type="radio" name="team-0-badge" class="badge-radio" value="1" id="team-0-badge-1"><label class="badge-bg" for="team-0-badge-1"><div class="badge badge-1"></div></label>
|
||||
<input type="radio" name="team-0-badge" class="badge-radio" value="2" id="team-0-badge-2"><label class="badge-bg" for="team-0-badge-2"><div class="badge badge-2"></div></label>
|
||||
<input type="radio" name="team-0-badge" class="badge-radio" value="3" id="team-0-badge-3"><label class="badge-bg" for="team-0-badge-3"><div class="badge badge-3"></div></label>
|
||||
<input type="radio" name="team-0-badge" class="badge-radio" value="4" id="team-0-badge-4"><label class="badge-bg" for="team-0-badge-4"><div class="badge badge-4"></div></label>
|
||||
<input type="radio" name="team-0-badge" class="badge-radio" value="5" id="team-0-badge-5"><label class="badge-bg" for="team-0-badge-5"><div class="badge badge-5"></div></label>
|
||||
<input type="radio" name="team-0-badge" class="badge-radio" value="6" id="team-0-badge-6"><label class="badge-bg" for="team-0-badge-6"><div class="badge badge-6"></div></label>
|
||||
<input type="radio" name="team-0-badge" class="badge-radio" value="7" id="team-0-badge-7"><label class="badge-bg" for="team-0-badge-7"><div class="badge badge-7"></div></label>
|
||||
<input type="radio" name="team-0-badge" class="badge-radio" value="8" id="team-0-badge-8"><label class="badge-bg" for="team-0-badge-8"><div class="badge badge-8"></div></label>
|
||||
<input type="radio" name="team-0-badge" class="badge-radio" value="9" id="team-0-badge-9"><label class="badge-bg" for="team-0-badge-9"><div class="badge badge-9"></div></label>
|
||||
<input type="radio" name="team-0-badge" class="badge-radio" value="10" id="team-0-badge-10"><label class="badge-bg" for="team-0-badge-10"><div class="badge badge-10"></div></label>
|
||||
<input type="radio" name="team-0-badge" class="badge-radio" value="11" id="team-0-badge-11"><label class="badge-bg" for="team-0-badge-11"><div class="badge badge-11"></div></label>
|
||||
<input type="radio" name="team-0-badge" class="badge-radio" value="12" id="team-0-badge-12"><label class="badge-bg" for="team-0-badge-12"><div class="badge badge-12"></div></label>
|
||||
<input type="radio" name="team-0-badge" class="badge-radio" value="13" id="team-0-badge-13"><label class="badge-bg" for="team-0-badge-13"><div class="badge badge-13"></div></label>
|
||||
<input type="radio" name="team-0-badge" class="badge-radio" value="14" id="team-0-badge-14"><label class="badge-bg" for="team-0-badge-14"><div class="badge badge-14"></div></label>
|
||||
<input type="radio" name="team-0-badge" class="badge-radio" value="15" id="team-0-badge-15"><label class="badge-bg" for="team-0-badge-15"><div class="badge badge-15"></div></label>
|
||||
<input type="radio" name="team-0-badge" class="badge-radio" value="16" id="team-0-badge-16"><label class="badge-bg" for="team-0-badge-16"><div class="badge badge-16"></div></label>
|
||||
<input type="radio" name="team-0-badge" class="badge-radio" value="17" id="team-0-badge-17"><label class="badge-bg" for="team-0-badge-17"><div class="badge badge-17"></div></label>
|
||||
<li><input type="radio" name="team-0-badge" class="badge-radio" value="0" id="team-0-badge-0" checked><label class="badge" data-badge="0" for="team-0-badge-0"></label></li>
|
||||
<li><input type="radio" name="team-0-badge" class="badge-radio" value="1" id="team-0-badge-1"><label class="badge" data-badge="1" for="team-0-badge-1"></label></li>
|
||||
<li><input type="radio" name="team-0-badge" class="badge-radio" value="2" id="team-0-badge-2"><label class="badge" data-badge="2" for="team-0-badge-2"></label></li>
|
||||
<li><input type="radio" name="team-0-badge" class="badge-radio" value="3" id="team-0-badge-3"><label class="badge" data-badge="3" for="team-0-badge-3"></label></li>
|
||||
<li><input type="radio" name="team-0-badge" class="badge-radio" value="4" id="team-0-badge-4"><label class="badge" data-badge="4" for="team-0-badge-4"></label></li>
|
||||
<li><input type="radio" name="team-0-badge" class="badge-radio" value="5" id="team-0-badge-5"><label class="badge" data-badge="5" for="team-0-badge-5"></label></li>
|
||||
<li><input type="radio" name="team-0-badge" class="badge-radio" value="6" id="team-0-badge-6"><label class="badge" data-badge="6" for="team-0-badge-6"></label></li>
|
||||
<li><input type="radio" name="team-0-badge" class="badge-radio" value="7" id="team-0-badge-7"><label class="badge" data-badge="7" for="team-0-badge-7"></label></li>
|
||||
<li><input type="radio" name="team-0-badge" class="badge-radio" value="8" id="team-0-badge-8"><label class="badge" data-badge="8" for="team-0-badge-8"></label></li>
|
||||
<li><input type="radio" name="team-0-badge" class="badge-radio" value="9" id="team-0-badge-9"><label class="badge" data-badge="9" for="team-0-badge-9"></label></li>
|
||||
<li><input type="radio" name="team-0-badge" class="badge-radio" value="10" id="team-0-badge-10"><label class="badge" data-badge="10" for="team-0-badge-10"></label></li>
|
||||
<li><input type="radio" name="team-0-badge" class="badge-radio" value="11" id="team-0-badge-11"><label class="badge" data-badge="11" for="team-0-badge-11"></label></li>
|
||||
<li><input type="radio" name="team-0-badge" class="badge-radio" value="12" id="team-0-badge-12"><label class="badge" data-badge="12" for="team-0-badge-12"></label></li>
|
||||
<li><input type="radio" name="team-0-badge" class="badge-radio" value="13" id="team-0-badge-13"><label class="badge" data-badge="13" for="team-0-badge-13"></label></li>
|
||||
<li><input type="radio" name="team-0-badge" class="badge-radio" value="14" id="team-0-badge-14"><label class="badge" data-badge="14" for="team-0-badge-14"></label></li>
|
||||
<li><input type="radio" name="team-0-badge" class="badge-radio" value="15" id="team-0-badge-15"><label class="badge" data-badge="15" for="team-0-badge-15"></label></li>
|
||||
<li><input type="radio" name="team-0-badge" class="badge-radio" value="16" id="team-0-badge-16"><label class="badge" data-badge="16" for="team-0-badge-16"></label></li>
|
||||
<li><input type="radio" name="team-0-badge" class="badge-radio" value="17" id="team-0-badge-17"><label class="badge" data-badge="17" for="team-0-badge-17"></label></li>
|
||||
<div class="team-total-info"><div class="tIf-total-hp"></div><div class="tIf-total-rcv"></div></div>
|
||||
</ul>
|
||||
<div class="team-box-name">
|
||||
|
|
|
|||
|
|
@ -807,7 +807,7 @@ var sawokens = [
|
|||
];
|
||||
*/
|
||||
/* 徽章背景 */
|
||||
.badge-bg{
|
||||
.badge{
|
||||
background-image: url(images/badge-bg.png);
|
||||
width: 53px;
|
||||
height: 41px;
|
||||
|
|
@ -815,7 +815,8 @@ var sawokens = [
|
|||
text-align: center;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.badge{
|
||||
.badge::before{
|
||||
content: "";
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
background-repeat: no-repeat;
|
||||
|
|
@ -823,58 +824,58 @@ var sawokens = [
|
|||
width: 36px; height: 30px;
|
||||
background-position-x: 0;
|
||||
}
|
||||
.badge-0{
|
||||
.badge[data-badge='0']::before{
|
||||
background-position-y: 0px;
|
||||
}
|
||||
.badge-1{
|
||||
.badge[data-badge='1']::before{
|
||||
background-position-y: -30px;
|
||||
}
|
||||
.badge-2{
|
||||
.badge[data-badge='2']::before{
|
||||
background-position-y: -60px;
|
||||
}
|
||||
.badge-3{
|
||||
.badge[data-badge='3']::before{
|
||||
background-position-y: -90px;
|
||||
}
|
||||
.badge-4{
|
||||
.badge[data-badge='4']::before{
|
||||
background-position-y: -120px;
|
||||
}
|
||||
.badge-5{
|
||||
.badge[data-badge='5']::before{
|
||||
background-position-y: -150px;
|
||||
}
|
||||
.badge-6{
|
||||
.badge[data-badge='6']::before{
|
||||
background-position-y: -180px;
|
||||
}
|
||||
.badge-7{
|
||||
.badge[data-badge='7']::before{
|
||||
background-position-y: -210px;
|
||||
}
|
||||
.badge-8{
|
||||
.badge[data-badge='8']::before{
|
||||
background-position-y: -240px;
|
||||
}
|
||||
.badge-9{
|
||||
.badge[data-badge='9']::before{
|
||||
background-position-y: -270px;
|
||||
}
|
||||
.badge-10{
|
||||
.badge[data-badge='10']::before{
|
||||
background-position-y: -300px;
|
||||
}
|
||||
.badge-11{
|
||||
.badge[data-badge='11']::before{
|
||||
background-position-y: -330px;
|
||||
}
|
||||
.badge-12{
|
||||
.badge[data-badge='12']::before{
|
||||
background-position-y: -360px;
|
||||
}
|
||||
.badge-13{
|
||||
.badge[data-badge='13']::before{
|
||||
background-position-y: -390px;
|
||||
}
|
||||
.badge-14{
|
||||
.badge[data-badge='14']::before{
|
||||
background-position-y: -420px;
|
||||
}
|
||||
.badge-15{
|
||||
.badge[data-badge='15']::before{
|
||||
background-position-y: -450px;
|
||||
}
|
||||
.badge-16{
|
||||
.badge[data-badge='16']::before{
|
||||
background-position-y: -480px;
|
||||
}
|
||||
.badge-17{
|
||||
.badge[data-badge='17']::before{
|
||||
background-position-y: -510px;
|
||||
}
|
||||
|
||||
|
|
|
|||
13
style.css
13
style.css
|
|
@ -375,19 +375,22 @@ ul{
|
|||
display: inline-block;
|
||||
}
|
||||
/* 徽章，平时都隐藏 */
|
||||
.badge-bg{
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
.team-badge li{
|
||||
display: inline-block;
|
||||
}
|
||||
.badge-radio{
|
||||
display: none;
|
||||
}
|
||||
.badge{
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
/* 显示所有徽章时则打开 */
|
||||
.show-all-badges .badge-bg{
|
||||
.show-all-badges .badge{
|
||||
display: inline-block;
|
||||
}
|
||||
/* 选中的徽章平时也打开 */
|
||||
.team-badge .badge-radio:checked+label{
|
||||
.team-badge .badge-radio:checked+.badge{
|
||||
display: inline-block;
|
||||
}
|
||||
/*队伍的背景色*/
|
||||
|
|
|
|||
Loading…
Reference in New Issue