更新信息统计的显示方式

This commit is contained in:
枫谷剑仙 2020-12-23 20:56:34 +08:00
parent 5d39969705
commit d65a476e7f
18 changed files with 189 additions and 91 deletions

BIN
images/icon-HP.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
images/icon-awoken-bind.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
images/icon-bind.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 619 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
images/icon-reduce.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 49 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB

View File

@ -269,20 +269,10 @@
content:"Change \"Swap\" to \"Copy\" when dragging";
}
.team-total-info .tIf-total-hp::before{
content: "Team HP (No Awoken): ";
}
.team-total-info .tIf-total-move::before{
content: "Team Move Time: ";
}
.team-total-info .tIf-total-move::after{
content: attr(data-general) "s (Awoken bind " attr(data-no-awoken) "s)";
}
.team-total-info .tIf-total-move.fixed-move-time::after{
content: attr(data-general) "s (Fiexd)";
}
.formation-total-info .tIf-total-hp::before{
content: "Total HP (No Awoken): ";
.tIf-total-move .general::after,
.tIf-total-move .awoken-bind::after
{
content: " sec";
}
.setting-box .row-mon-id .open-search::before{

View File

@ -19,4 +19,13 @@
.badge[data-badge-icon='2']::before
{
background-position-x: -36px;
}
.tIf-total-hp .awoken-bind::before,
.tIf-total-move .awoken-bind::before
{
background-position-x: -16px;
}
.tIf-total-hp .reduce::before{
background-position-x: -16px;
}

View File

@ -261,20 +261,10 @@
content:"ドラッグ時に「スワップ」を「コピー」に変更";
}
.team-total-info .tIf-total-hp::before{
content: "チームHP (覚醒無効):";
}
.team-total-info .tIf-total-move::before{
content: "操作時間:";
}
.team-total-info .tIf-total-move::after{
content: attr(data-general) " 秒 (覚醒無効な場合 " attr(data-no-awoken) " 秒)";
}
.team-total-info .tIf-total-move.fixed-move-time::after{
content: attr(data-general) " 秒 (固定)";
}
.formation-total-info .tIf-total-hp::before{
content: "総HP (覚醒無効):";
.tIf-total-move .general::after,
.tIf-total-move .awoken-bind::after
{
content: " 秒";
}
.setting-box .row-mon-id .open-search::before{

View File

@ -258,20 +258,10 @@
content:"드래그할 때 \"바꾸기\"를 \"복사\"로 변경";
}
.team-total-info .tIf-total-hp::before{
content: "팀 HP (각성은 없습니다):";
}
.team-total-info .tIf-total-move::before{
content: "팀 운영 시간입니다:";
}
.team-total-info .tIf-total-move::after{
content: attr(data-general) " 초 (각성 무효 " attr(data-no-awoken) " 초)";
}
.team-total-info .tIf-total-move.fixed-move-time::after{
content: attr(data-general) " 초 (고정합니다)";
}
.formation-total-info .tIf-total-hp::before{
content: "총 HP (각성은 없습니다)";
.tIf-total-move .general::after,
.tIf-total-move .awoken-bind::after
{
content: " 초";
}
.setting-box .row-mon-id .open-search::before{

View File

@ -264,20 +264,10 @@
content:"拖拽時使用“複製”而不是“替換”";
}
.team-total-info .tIf-total-hp::before{
content: "隊伍HP (無覺醒)";
}
.team-total-info .tIf-total-move::before{
content: "操作時間:";
}
.team-total-info .tIf-total-move::after{
content: attr(data-general) " 秒 (封覺醒時 " attr(data-no-awoken) " 秒)";
}
.team-total-info .tIf-total-move.fixed-move-time::after{
content: attr(data-general) " 秒 (固定)";
}
.formation-total-info .tIf-total-hp::before{
content: "總HP (無覺醒)";
.tIf-total-move .general::after,
.tIf-total-move .awoken-bind::after
{
content: " 秒";
}
.setting-box .row-mon-id .open-search::before{

View File

@ -264,20 +264,10 @@
content:"拖拽时使用“复制”而不是“替换”";
}
.team-total-info .tIf-total-hp::before{
content: "队伍HP ";
}
.team-total-info .tIf-total-move::before{
content: "操作时间:";
}
.team-total-info .tIf-total-move::after{
content: attr(data-general) " 秒 (封觉醒时 " attr(data-no-awoken) " 秒)";
}
.team-total-info .tIf-total-move.fixed-move-time::after{
content: attr(data-general) " 秒 (固定)";
}
.formation-total-info .tIf-total-hp::before{
content: "总HP (无觉醒)";
.tIf-total-move .general::after,
.tIf-total-move .awoken-bind::after
{
content: " 秒";
}
.setting-box .row-mon-id .open-search::before{

View File

@ -73,11 +73,21 @@ var formation = new Formation(teamsCount,5);
</div>
<div class="formation-box">
<div class="title-box edit"><input type="text" class="title" placeholder="输入队伍标题" /><h1 class="title-display"></h1></div>
<div class="formation-total-info"><div class="tIf-total-hp"></div></div>
<div class="formation-total-info">
<div class="tIf-total-hp">
<span class="general"></span>
<span class="reduce"></span>
<span class="max-equal"></span>
<span class="awoken-bind"></span>
</div>
</div>
<ul class="teams">
<li class="team-bigbox team-1 show-team-name-right">
<div class="team-total-info">
<div class="tIf-total-move"></div>
<div class="tIf-total-move">
<span class="general"></span>
<span class="awoken-bind"></span>
</div>
<div class="team-awoken">
<!--怪物觉醒-->
<ul class="awoken-ul">
@ -459,7 +469,10 @@ var formation = new Formation(teamsCount,5);
</div>
</div>
<div class="team-total-info">
<div class="tIf-total-move"></div>
<div class="tIf-total-move">
<span class="general"></span>
<span class="awoken-bind"></span>
</div>
<div class="team-awoken">
<!--怪物觉醒-->
<ul class="awoken-ul">

View File

@ -2918,6 +2918,15 @@ function refreshAbility(abilityDom, team, idx) {
}
});
}
function setTextContentAndAttribute(dom,str)
{
if (!dom) return;
const attrName = "data-value";
dom.textContent = str;
dom.setAttribute(attrName, str);
}
//刷新队伍能力值合计
function refreshTeamTotalHP(totalDom, team, teamIdx) {
//计算总的生命值
@ -2958,25 +2967,34 @@ function refreshTeamTotalHP(totalDom, team, teamIdx) {
const tReduceHP = tHP / (1 - reduceScale1) / (1 - reduceScale2); //队伍正常满血加上盾能承受的最大伤害
tHpDom.textContent = tHP +
` (${tHPNoAwoken}) >> Max ${Math.round(tReduceHP)}(-${(totalReduce * 100).toFixed(2)}%)`;
const tHpDom_general = tHpDom.querySelector(".general");
const tHpDom_noAwoken = tHpDom.querySelector(".awoken-bind");
const tHpDom_maxEqual = tHpDom.querySelector(".max-equal");
const tHpDom_reduce = tHpDom.querySelector(".reduce");
setTextContentAndAttribute(tHpDom_general, tHP);
setTextContentAndAttribute(tHpDom_noAwoken, tHPNoAwoken);
setTextContentAndAttribute(tHpDom_reduce, (totalReduce * 100).toFixed(2));
tHpDom_reduce.setAttribute("data-max-equal", tReduceHP);
setTextContentAndAttribute(tHpDom_maxEqual, tReduceHP);
}
if (tMoveDom) {
const moveTime = countMoveTime(team, leader1id, leader2id, teamIdx);
//tMoveDom.textContent = moveTime.duration;
const tMoveDom_general = tMoveDom.querySelector(".general");
const tMoveDom_noAwoken = tMoveDom.querySelector(".awoken-bind");
if (moveTime.fixed) //固定时间的
{
tMoveDom.classList.add("fixed-move-time");
tMoveDom.setAttribute("data-no-awoken",moveTime.duration.leader);
tMoveDom.setAttribute("data-general",moveTime.duration.leader);
setTextContentAndAttribute(tMoveDom_general, moveTime.duration.leader);
setTextContentAndAttribute(tMoveDom_noAwoken, moveTime.duration.leader);
} else
{
tMoveDom.classList.remove("fixed-move-time");
tMoveDom.setAttribute("data-no-awoken",moveTime.duration.default + moveTime.duration.leader + moveTime.duration.badge);
tMoveDom.setAttribute("data-general",moveTime.duration.default + moveTime.duration.leader + moveTime.duration.badge + moveTime.duration.awoken);
setTextContentAndAttribute(tMoveDom_general, moveTime.duration.default + moveTime.duration.leader + moveTime.duration.badge + moveTime.duration.awoken);
setTextContentAndAttribute(tMoveDom_noAwoken, moveTime.duration.default + moveTime.duration.leader + moveTime.duration.badge);
}
}
}
//刷新所有队伍能力值合计
@ -3015,8 +3033,16 @@ function refreshFormationTotalHP(totalDom, teams) {
const tReduceHP = tHP / (1 - reduceScale1) / (1 - reduceScale2); //队伍正常满血加上盾能承受的最大伤害
tHpDom.textContent = tHP.toString() +
` (${tHPNoAwoken}) >> Max ${Math.round(tReduceHP)}(-${(totalReduce * 100).toFixed(2)}%)`;
const tHpDom_general = tHpDom.querySelector(".general");
const tHpDom_noAwoken = tHpDom.querySelector(".awoken-bind");
const tHpDom_maxEqual = tHpDom.querySelector(".max-equal");
const tHpDom_reduce = tHpDom.querySelector(".reduce");
setTextContentAndAttribute(tHpDom_general, tHP);
setTextContentAndAttribute(tHpDom_noAwoken, tHPNoAwoken);
setTextContentAndAttribute(tHpDom_reduce, (totalReduce * 100).toFixed(2));
tHpDom_reduce.setAttribute("data-max-equal", tReduceHP);
setTextContentAndAttribute(tHpDom_maxEqual, tReduceHP);
}
}
//刷新单人技能CD

View File

@ -74,7 +74,18 @@ var formation = new Formation(teamsCount,6);
<li><input type="radio" name="team-1-badge" class="badge-radio" value="16" id="team-1-badge-16"><label class="badge" data-badge-icon="16" for="team-1-badge-16"></label></li>
<li><input type="radio" name="team-1-badge" class="badge-radio" value="17" id="team-1-badge-17"><label class="badge" data-badge-icon="17" for="team-1-badge-17"></label></li>
<li><input type="radio" name="team-1-badge" class="badge-radio" value="18" id="team-1-badge-18"><label class="badge" data-badge-icon="18" for="team-1-badge-18"></label></li>
<div class="team-total-info"><div class="tIf-total-hp"></div><div class="tIf-total-move"></div></div>
<div class="team-total-info">
<div class="tIf-total-hp">
<span class="general"></span>
<span class="reduce"></span>
<span class="max-equal"></span>
<span class="awoken-bind"></span>
</div>
<div class="tIf-total-move">
<span class="general"></span>
<span class="awoken-bind"></span>
</div>
</div>
</ul>
<div class="team-box-name">
<div class="team-box">

View File

@ -558,11 +558,67 @@ ul{
{
display: inline-block;
}
/*
.team-info .tIf-total-hp,.team-info .tIf-total-rcv{
display:inline-block;
/*各种信息统计的图标*/
.tIf-total-hp::before,
.tIf-total-move::before,
.tIf-total-hp .awoken-bind::before,
.tIf-total-move .awoken-bind::before,
.tIf-total-move.fixed-move-time::after,
.tIf-total-hp .reduce::before
{
content: " ";
background-size: cover;
display: inline-block;
width: 16px;
height: 16px;
}
*/
.tIf-total-hp .awoken-bind::before,
.tIf-total-move .awoken-bind::before
{
background-image: url(images/icon-awoken-bind.png);
}
.tIf-total-hp::before{
background-image: url(images/icon-HP.png);
}
.tIf-total-hp .reduce::before{
background-image: url(images/icon-reduce.png);
}
.tIf-total-hp .reduce::after{
content: "%";
}
.tIf-total-hp .max-equal::before{
content: "⇔";
}
.tIf-total-move::before{
background-image: url(images/icon-orb-move-time.png);
}
/*固定手指的情况*/
.tIf-total-move.fixed-move-time .awoken-bind
{
display: none;
}
.tIf-total-move.fixed-move-time{
position: relative;
}
@keyframes hidden-visible-animate{
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.tIf-total-move.fixed-move-time::after{
background-image: url(images/icon-bind.png);
position: absolute;
left:0;
top:2px;
animation: hidden-visible-animate 0.5s infinite linear alternate;
}
/*队伍的潜觉*/
.team-latents .latents{
width: var(--head-block-width);

View File

@ -89,7 +89,18 @@ var formation = new Formation(teamsCount,6);
<li><input type="radio" name="team-1-badge" class="badge-radio" value="16" id="team-1-badge-16"><label class="badge" data-badge-icon="16" for="team-1-badge-16"></label></li>
<li><input type="radio" name="team-1-badge" class="badge-radio" value="17" id="team-1-badge-17"><label class="badge" data-badge-icon="17" for="team-1-badge-17"></label></li>
<li><input type="radio" name="team-1-badge" class="badge-radio" value="18" id="team-1-badge-18"><label class="badge" data-badge-icon="18" for="team-1-badge-18"></label></li>
<div class="team-total-info"><div class="tIf-total-hp"></div><div class="tIf-total-move"></div></div>
<div class="team-total-info">
<div class="tIf-total-hp">
<span class="general"></span>
<span class="reduce"></span>
<span class="max-equal"></span>
<span class="awoken-bind"></span>
</div>
<div class="tIf-total-move">
<span class="general"></span>
<span class="awoken-bind"></span>
</div>
</div>
</ul>
<div class="team-box-name">
<div class="team-box">
@ -435,7 +446,18 @@ var formation = new Formation(teamsCount,6);
<li><input type="radio" name="team-2-badge" class="badge-radio" value="16" id="team-2-badge-16"><label class="badge" data-badge-icon="16" for="team-2-badge-16"></label></li>
<li><input type="radio" name="team-2-badge" class="badge-radio" value="17" id="team-2-badge-17"><label class="badge" data-badge-icon="17" for="team-2-badge-17"></label></li>
<li><input type="radio" name="team-2-badge" class="badge-radio" value="18" id="team-2-badge-18"><label class="badge" data-badge-icon="18" for="team-2-badge-18"></label></li>
<div class="team-total-info"><div class="tIf-total-hp"></div><div class="tIf-total-move"></div></div>
<div class="team-total-info">
<div class="tIf-total-hp">
<span class="general"></span>
<span class="reduce"></span>
<span class="max-equal"></span>
<span class="awoken-bind"></span>
</div>
<div class="tIf-total-move">
<span class="general"></span>
<span class="awoken-bind"></span>
</div>
</div>
</ul>
<div class="team-box-name">
<div class="team-box">
@ -781,7 +803,18 @@ var formation = new Formation(teamsCount,6);
<li><input type="radio" name="team-3-badge" class="badge-radio" value="16" id="team-3-badge-16"><label class="badge" data-badge-icon="16" for="team-3-badge-16"></label></li>
<li><input type="radio" name="team-3-badge" class="badge-radio" value="17" id="team-3-badge-17"><label class="badge" data-badge-icon="17" for="team-3-badge-17"></label></li>
<li><input type="radio" name="team-3-badge" class="badge-radio" value="18" id="team-3-badge-18"><label class="badge" data-badge-icon="18" for="team-3-badge-18"></label></li>
<div class="team-total-info"><div class="tIf-total-hp"></div><div class="tIf-total-move"></div></div>
<div class="team-total-info">
<div class="tIf-total-hp">
<span class="general"></span>
<span class="reduce"></span>
<span class="max-equal"></span>
<span class="awoken-bind"></span>
</div>
<div class="tIf-total-move">
<span class="general"></span>
<span class="awoken-bind"></span>
</div>
</div>
</ul>
<div class="team-box-name">
<div class="team-box">