队伍觉醒效果处的白盾图标修改为CSS实现

This commit is contained in:
枫谷剑仙 2024-08-06 17:32:09 +08:00
parent 4fb0415132
commit faf8dc8da3
6 changed files with 61 additions and 31 deletions

View File

@ -1619,6 +1619,7 @@ const teamsCount = 2;
<li><label for="dungeon-atk"></label><input id="dungeon-atk" name="dungeon-atk" type="number" min=0 step=1 value=1 /></li>
<li><label for="dungeon-rcv"></label><input id="dungeon-rcv" name="dungeon-rcv" type="number" min=0 step=1 value=1 /></li>
</ul>
<hr>
<ul class="benefit-list"><!--阴阳加护-->
<li><input type="radio" class="benefit-check" name="dungeon-benefit" value="0" id="dungeon-benefit-0" checked /><label class="awoken-icon" data-awoken-icon="0" for="dungeon-benefit-0"></label></li><!---->
<li><input type="radio" class="benefit-check" name="dungeon-benefit" value="1" id="dungeon-benefit-1" /><label class="awoken-icon" data-awoken-icon="128" for="dungeon-benefit-1"></label></li><!---->

View File

@ -4177,13 +4177,16 @@ function initialize() {
editBox.memberIdx = []; //储存队伍数组下标
editBox.show = function() {
this.classList.remove(className_displayNone);
formationBox.classList.add("blur-bg");
controlBox.classList.add("blur-bg");
//解决SVG问题
const activeSkillTitle = skillBox.querySelector("#active-skill-title");
const evolvedSkillTitle = skillBox.querySelector("#evolved-skill-title");
const leaderSkillTitle = leaderSkillBox.querySelector("#leader-skill-title");
svgGradientTextLengthRestore(activeSkillTitle);
svgGradientTextLengthRestore(evolvedSkillTitle);
svgGradientTextLengthRestore(leaderSkillTitle);
};
editBox.hide = function() {
this.classList.add(className_displayNone);
formationBox.classList.remove("blur-bg");
controlBox.classList.remove("blur-bg");
// if (isGuideMod) {
// const url = new URL(location);
// url.searchParams.delete("guide");
@ -6343,13 +6346,6 @@ function editBoxChangeMonId(id) {
btnDone.disabled = card.onlyAssist;
}
//解决SVG问题
const activeSkillTitle = skillBox.querySelector("#active-skill-title");
const evolvedSkillTitle = skillBox.querySelector("#evolved-skill-title");
const leaderSkillTitle = lskillBox.querySelector("#leader-skill-title");
svgGradientTextLengthRestore(activeSkillTitle);
svgGradientTextLengthRestore(evolvedSkillTitle);
svgGradientTextLengthRestore(leaderSkillTitle);
//去除所有不能再打的潜觉
editBox.latent = editBox.latent.filter(lat => allowLatent.includes(lat));
@ -7044,8 +7040,11 @@ function refreshTeamAwokenEfeect(awokenEffectDom, team, ti) {
count += effectiveAwokens.filter(ak=>ak===45).length;
}
targetValue.setAttribute(dataAttrName, (count * 50_0000).bigNumberToString());
const percent = Math.min(count * 20, 100);
const sheildIcon = targetIcon.parentElement.querySelector("[data-icon-type=\"breaking-shield\"]");
sheildIcon.style.setProperty("--percent",`${percent}%`);
const targetValue2 = targetIcon.parentElement.querySelector(".count[data-postfix]");
targetValue2.setAttribute(dataAttrName, Math.min(count * 20, 100));
targetValue2.setAttribute(dataAttrName, percent);
}
//方心追
if (targetIcon = awokenEffectDom.querySelector(".awoken-icon[data-awoken-icon=\"50\"]")) {
@ -7058,8 +7057,11 @@ function refreshTeamAwokenEfeect(awokenEffectDom, team, ti) {
count += effectiveAwokens.filter(ak=>ak===50).length;
}
targetValue.setAttribute(dataAttrName, (count * 1000_0000).bigNumberToString());
const percent = Math.min(count * 50, 100);
const sheildIcon = targetIcon.parentElement.querySelector("[data-icon-type=\"breaking-shield\"]");
sheildIcon.style.setProperty("--percent",`${percent}%`);
const targetValue2 = targetIcon.parentElement.querySelector(".count[data-postfix]");
targetValue2.setAttribute(dataAttrName, Math.min(count * 50, 100));
targetValue2.setAttribute(dataAttrName, percent);
}
//L心
if (targetIcon = awokenEffectDom.querySelector(".awoken-icon[data-awoken-icon=\"59\"]")) {

View File

@ -32323,7 +32323,7 @@ const cachesMap = new Map([
],
[
"multi.html",
"1275122ce4b4287900394d699dd760f7"
"8e9d49f1a8c0e07016dc5ead62dd8317"
],
[
"script-custom_elements.js",
@ -32343,11 +32343,11 @@ const cachesMap = new Map([
],
[
"script.js",
"c3790ece064c661191493d0c4748b43e"
"0c3b4320ce5d074a165b2db153906b5b"
],
[
"solo.html",
"61328b2597511e132463331c12cf5c13"
"fc0bef8484b1f210fdcb96d16117c50c"
],
[
"style-fix-html2canvas.css",
@ -32359,7 +32359,7 @@ const cachesMap = new Map([
],
[
"style.css",
"ad66c4ba48593ffaeff08a4948aa4c5b"
"13d72e748820e5448840bef1679aa05f"
],
[
"temp.js",
@ -32367,7 +32367,7 @@ const cachesMap = new Map([
],
[
"triple.html",
"e8c4c7088fee60e1b05a204a730d9024"
"d1b8716ca989579acb89c695ce011082"
],
[
"languages/en.css",

View File

@ -588,12 +588,12 @@ const teamsCount = 1;
<!--竖心追破白盾-->
<li style="grid-column: span 2;">
<icon class="awoken-icon" data-awoken-icon="45"></icon><span class="count"></span>
<icon class="icon-skill" data-icon-type="breaking-shield"></icon><span class="count" data-postfix="%"></span>
<icon class="meter" data-icon-type="breaking-shield"></icon><span class="count" data-postfix="%"></span>
</li>
<!--方心追破白盾-->
<li style="grid-column: span 2;">
<icon class="awoken-icon" data-awoken-icon="50"></icon><span class="count"></span>
<icon class="icon-skill" data-icon-type="breaking-shield"></icon><span class="count" data-postfix="%"></span>
<icon class="meter" data-icon-type="breaking-shield"></icon><span class="count" data-postfix="%"></span>
</li>
<!--L心盾-->
<li><icon class="awoken-icon" data-awoken-icon="59"></icon><icon class="icon-skill" data-icon-type="reduce-damage"></icon><span class="count" data-postfix="%"></span></li>
@ -1389,6 +1389,7 @@ const teamsCount = 1;
<li><label for="dungeon-atk"></label><input id="dungeon-atk" name="dungeon-atk" type="number" min=0 step=1 value=1 /></li>
<li><label for="dungeon-rcv"></label><input id="dungeon-rcv" name="dungeon-rcv" type="number" min=0 step=1 value=1 /></li>
</ul>
<hr>
<ul class="benefit-list"><!--阴阳加护-->
<li><input type="radio" class="benefit-check" name="dungeon-benefit" value="0" id="dungeon-benefit-0" checked /><label class="awoken-icon" data-awoken-icon="0" for="dungeon-benefit-0"></label></li><!---->
<li><input type="radio" class="benefit-check" name="dungeon-benefit" value="1" id="dungeon-benefit-1" /><label class="awoken-icon" data-awoken-icon="128" for="dungeon-benefit-1"></label></li><!---->

View File

@ -3266,6 +3266,7 @@ a.series-search::before {
}
.team-awoken-effect>ul>li {
display: flex;
align-items: center;
}
.team-awoken-effect .team-flags {
display: inline-flex;
@ -3328,9 +3329,32 @@ a.series-search::before {
width: 32px;
vertical-align: middle;
}
.team-awoken-effect .icon-skill[data-icon-type="breaking-shield"] {
transform: scaleX(0.5);
margin: 0 -18px;
.team-awoken-effect .meter[data-icon-type="breaking-shield"] {
box-sizing: border-box;
width: 40px;
height: 14px;
border-color: #CCC;
border-style: solid;
border-width: 2px;
border-radius: 5px;
box-shadow: 0 1px 3px black, 0 0 2px #ddd inset;
background-color: #222;
outline-color: rgba(0,0,0,0.8);
outline-style: solid;
outline-width: 1px;
display: flex;
align-items: center;
padding: 1px 2px;
background-image: none;
}
.team-awoken-effect .meter[data-icon-type="breaking-shield"]::before {
box-sizing: border-box;
content: "";
display: block;
width: calc(100% - var(--percent));
height: 100%;
border: none;
background-image: linear-gradient(#BDF, white);
}
/*.team-awoken-effect .latent-icon::before{
opacity: 0.99;
@ -4922,8 +4946,9 @@ body.external-link-support #external-support{
{
background-position-y:calc(-36px * 38);
}
.row-mon-leader-skill .icon-skill[data-icon-type="maxhp-locked"] {
display:none;
.row-mon-leader-skill .icon-skill[data-icon-type="maxhp-locked"],
.dungeon-enchance .icon-skill[data-icon-type="maxhp-locked"] {
display: none;
}
.icon-skill[data-icon-type="remove-assist"]
{

View File

@ -595,12 +595,12 @@ const teamsCount = 3;
<!--竖心追破白盾-->
<li style="grid-column: span 2;">
<icon class="awoken-icon" data-awoken-icon="45"></icon><span class="count"></span>
<icon class="icon-skill" data-icon-type="breaking-shield"></icon><span class="count" data-postfix="%"></span>
<icon class="meter" data-icon-type="breaking-shield"></icon><span class="count" data-postfix="%"></span>
</li>
<!--方心追破白盾-->
<li style="grid-column: span 2;">
<icon class="awoken-icon" data-awoken-icon="50"></icon><span class="count"></span>
<icon class="icon-skill" data-icon-type="breaking-shield"></icon><span class="count" data-postfix="%"></span>
<icon class="meter" data-icon-type="breaking-shield"></icon><span class="count" data-postfix="%"></span>
</li>
<!--L心盾-->
<li><icon class="awoken-icon" data-awoken-icon="59"></icon><icon class="icon-skill" data-icon-type="reduce-damage"></icon><span class="count" data-postfix="%"></span></li>
@ -1094,12 +1094,12 @@ const teamsCount = 3;
<!--竖心追破白盾-->
<li style="grid-column: span 2;">
<icon class="awoken-icon" data-awoken-icon="45"></icon><span class="count"></span>
<icon class="icon-skill" data-icon-type="breaking-shield"></icon><span class="count" data-postfix="%"></span>
<icon class="meter" data-icon-type="breaking-shield"></icon><span class="count" data-postfix="%"></span>
</li>
<!--方心追破白盾-->
<li style="grid-column: span 2;">
<icon class="awoken-icon" data-awoken-icon="50"></icon><span class="count"></span>
<icon class="icon-skill" data-icon-type="breaking-shield"></icon><span class="count" data-postfix="%"></span>
<icon class="meter" data-icon-type="breaking-shield"></icon><span class="count" data-postfix="%"></span>
</li>
<!--L心盾-->
<li><icon class="awoken-icon" data-awoken-icon="59"></icon><icon class="icon-skill" data-icon-type="reduce-damage"></icon><span class="count" data-postfix="%"></span></li>
@ -1593,12 +1593,12 @@ const teamsCount = 3;
<!--竖心追破白盾-->
<li style="grid-column: span 2;">
<icon class="awoken-icon" data-awoken-icon="45"></icon><span class="count"></span>
<icon class="icon-skill" data-icon-type="breaking-shield"></icon><span class="count" data-postfix="%"></span>
<icon class="meter" data-icon-type="breaking-shield"></icon><span class="count" data-postfix="%"></span>
</li>
<!--方心追破白盾-->
<li style="grid-column: span 2;">
<icon class="awoken-icon" data-awoken-icon="50"></icon><span class="count"></span>
<icon class="icon-skill" data-icon-type="breaking-shield"></icon><span class="count" data-postfix="%"></span>
<icon class="meter" data-icon-type="breaking-shield"></icon><span class="count" data-postfix="%"></span>
</li>
<!--L心盾-->
<li><icon class="awoken-icon" data-awoken-icon="59"></icon><icon class="icon-skill" data-icon-type="reduce-damage"></icon><span class="count" data-postfix="%"></span></li>
@ -2394,6 +2394,7 @@ const teamsCount = 3;
<li><label for="dungeon-atk"></label><input id="dungeon-atk" name="dungeon-atk" type="number" min=0 step=1 value=1 /></li>
<li><label for="dungeon-rcv"></label><input id="dungeon-rcv" name="dungeon-rcv" type="number" min=0 step=1 value=1 /></li>
</ul>
<hr>
<ul class="benefit-list"><!--阴阳加护-->
<li><input type="radio" class="benefit-check" name="dungeon-benefit" value="0" id="dungeon-benefit-0" checked /><label class="awoken-icon" data-awoken-icon="0" for="dungeon-benefit-0"></label></li><!---->
<li><input type="radio" class="benefit-check" name="dungeon-benefit" value="1" id="dungeon-benefit-1" /><label class="awoken-icon" data-awoken-icon="128" for="dungeon-benefit-1"></label></li><!---->