将徽章选择更改为模态框
This commit is contained in:
parent
6dede26912
commit
517379e1b1
|
|
@ -20,7 +20,7 @@
|
|||
{name: "CSS selector: :not() / CSS选择器: :not()", version:{firefox:84,chrome:88,safari:9}, url: "https://caniuse.com/css-not-sel-list", test: ()=>supportsPseudoClass(":not(html)")},
|
||||
//{name: "CSS selector: :has() / CSS选择器: :has()", version:{firefox:121,chrome:105,safari:15.4}, url: "https://caniuse.com/css-has", test: ()=>supportsPseudoClass(":has(html)")},
|
||||
{name: "Private class fields (#name) / 类私有域(#name)", version:{firefox:90,chrome:74,safari:14.5}, url: "https://caniuse.com/mdn-javascript_classes_private_class_fields", test: ()=>Boolean(runCodeWithFunction("class test {#v = 0;}, true"))},
|
||||
// {name: "Dialog element / Dialog 元素", version:{firefox:98,chrome:37,safari:15.4}, url: "https://caniuse.com/dialog", test: ()=>Boolean(eval("HTMLDialogElement"))},
|
||||
{name: "Dialog element / Dialog 元素", version:{firefox:98,chrome:37,safari:15.4}, url: "https://caniuse.com/dialog", test: ()=>Boolean(eval("HTMLDialogElement"))},
|
||||
// {name: "Class static initialization blocks / 静态初始化块", version:{firefox:93,chrome:94,safari:16.4}, url: "https://caniuse.com/mdn-javascript_classes_static_initialization_blocks", test: ()=>supportsPseudoClass(":not(html)")},
|
||||
]
|
||||
return features.filter(feature=>{
|
||||
|
|
|
|||
BIN
images/badge.png
BIN
images/badge.png
Binary file not shown.
|
Before Width: | Height: | Size: 60 KiB After Width: | Height: | Size: 60 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 222 KiB After Width: | Height: | Size: 225 KiB |
|
|
@ -446,7 +446,7 @@ label[for="box-have"]::after
|
|||
.dialog-close::after,
|
||||
.mask-close::after
|
||||
{
|
||||
content: "关闭";
|
||||
content: "取消";
|
||||
}
|
||||
.dialog .dialog-content .additional-string::before
|
||||
{
|
||||
|
|
|
|||
|
|
@ -542,6 +542,14 @@ const equivalent_awoken = [
|
|||
{small:77,big:125,times:2},//暗串
|
||||
];
|
||||
|
||||
const PAD_PASS_BADGE = 1<<7 | 1; //本程序的月卡徽章编号，129
|
||||
//官方的徽章排列顺序
|
||||
const official_badge_sorting = [
|
||||
1, PAD_PASS_BADGE,
|
||||
22, 23, 2, 3, 4, 5, 6,
|
||||
7, 8, 9, 11, 17, 18, 19, 20,
|
||||
21, 10, 12, 13, 14, 24, 25,
|
||||
]
|
||||
//官方的觉醒排列顺序
|
||||
const official_awoken_sorting = [
|
||||
21, 43, 61, 10, 54, 11, 12, 13, 49,
|
||||
|
|
@ -560,7 +568,6 @@ const official_awoken_sorting = [
|
|||
84, 83, 85, 86, 87, 88, 89, 90, 64,
|
||||
63,128,129,130
|
||||
];
|
||||
const PAD_PASS_BADGE = 1<<7 | 1; //本程序的月卡徽章编号，129
|
||||
|
||||
//排序程序列表
|
||||
const sort_function_list = [
|
||||
|
|
@ -4206,7 +4213,15 @@ const specialSearchFunctions = (function() {
|
|||
},
|
||||
{name:"Will get Team Badge",otLangName:{chs:"能获得队伍徽章",cht:"能獲得隊伍徽章"},
|
||||
function:cards=>cards.filter(({badgeId})=>badgeId),
|
||||
addition:({badgeId})=>`ID.${badgeId}`
|
||||
addition:({badgeId})=>{
|
||||
const fragment = document.createDocumentFragment();
|
||||
fragment.append(`ID.${badgeId}`);
|
||||
const icon = document.createElement("icon");
|
||||
icon.className = "badge";
|
||||
icon.setAttribute("data-badge-icon", badgeId);
|
||||
fragment.append(icon);
|
||||
return fragment;
|
||||
}
|
||||
},
|
||||
{name:"Hava banner when use skill",otLangName:{chs:"使用技能时有横幅",cht:"使用技能時有橫幅"},
|
||||
function:cards=>cards.filter(card=>card.skillBanner)
|
||||
|
|
|
|||
97
script.js
97
script.js
|
|
@ -4117,28 +4117,36 @@ function initialize() {
|
|||
});
|
||||
|
||||
//添加徽章
|
||||
const className_ChoseBadges = "show-all-badges";
|
||||
const badgeDialog = document.getElementById("badge-choose");
|
||||
const teamBadgeUl = badgeDialog.querySelector(".team-badges");
|
||||
official_badge_sorting.forEach(bgId=>{
|
||||
const li = document.createElement("li");
|
||||
const button = li.appendChild(document.createElement("button"));
|
||||
button.className = "badge";
|
||||
button.value = bgId;
|
||||
button.setAttribute("data-badge-icon", bgId);
|
||||
teamBadgeUl.appendChild(li);
|
||||
});
|
||||
|
||||
teamBigBoxs.forEach((teamBigBox, teamIdx) => {
|
||||
//徽章
|
||||
const teamBadge = teamBigBox.querySelector(".team-badge");
|
||||
if (!teamBadge) return;
|
||||
const badges = Array.from(teamBadge.querySelectorAll(".badge-radio"));
|
||||
|
||||
function setBadge() {
|
||||
if (teamBadge.classList.contains(className_ChoseBadges)) {
|
||||
const team = formation.teams[teamIdx];
|
||||
teamBadge.classList.remove(className_ChoseBadges);
|
||||
team[2] = parseInt(this.value, 10);
|
||||
const teamTotalInfoDom = teamBigBox.querySelector(".team-total-info"); //队伍能力值合计
|
||||
if (teamTotalInfoDom) refreshTeamTotalHP(teamTotalInfoDom, team, teamIdx);
|
||||
const teamAwokenEffectDom = teamBigBox.querySelector(".team-awoken-effect"); //队伍觉醒效果计算
|
||||
if (teamAwokenEffectDom) refreshTeamAwokenEfeect(teamAwokenEffectDom, team, teamIdx);
|
||||
createNewUrl();
|
||||
} else {
|
||||
teamBadge.classList.add(className_ChoseBadges);
|
||||
}
|
||||
}
|
||||
badges.forEach(badge => badge.onclick = setBadge);
|
||||
const returnFunc = function(event){
|
||||
const returnValue = event.target.returnValue;
|
||||
if (returnValue === "cancel") return;
|
||||
_badgeThis.setAttribute("data-badge-icon", returnValue);
|
||||
_badgeThis.value = returnValue;
|
||||
const team = formation.teams[teamIdx];
|
||||
team[2] = parseInt(returnValue, 10);
|
||||
refreshAll(formation);
|
||||
//badgeDialog.removeEventListener("close", returnFunc);
|
||||
};
|
||||
teamBadge.onclick = function(){
|
||||
_badgeThis = this;
|
||||
//_badgeThis.value
|
||||
badgeDialog.addEventListener("close", returnFunc, {once: true});
|
||||
badgeDialog.showModal();
|
||||
};
|
||||
});
|
||||
|
||||
//显示HP的详细值
|
||||
|
|
@ -5678,6 +5686,9 @@ function initialize() {
|
|||
} else {
|
||||
const teamTotalInfoDom = teamBigBox.querySelector(".team-total-info"); //队伍能力值合计
|
||||
if (teamTotalInfoDom) refreshTeamTotalHP(teamTotalInfoDom, teamData, editBox.memberIdx[0]);
|
||||
|
||||
const teamTotalInfoCountDom = teamBigBox.querySelector(".team-total-info-count"); //队伍星级、属性、类型合计
|
||||
if (teamTotalInfoCountDom) refreshTeamTotalCount(teamTotalInfoCountDom, teamData, teamNum);
|
||||
|
||||
const formationTotalInfoDom = formationBox.querySelector(".formation-total-info"); //所有队伍能力值合计
|
||||
if (formationTotalInfoDom) refreshFormationTotalHP(formationTotalInfoDom, formation.teams);
|
||||
|
|
@ -5759,6 +5770,10 @@ function initialize() {
|
|||
|
||||
const teamTotalInfoDom = teamBigBox.querySelector(".team-total-info"); //队伍能力值合计
|
||||
if (teamTotalInfoDom) refreshTeamTotalHP(teamTotalInfoDom, teamData, editBox.memberIdx[0]);
|
||||
|
||||
const teamTotalInfoCountDom = teamBigBox.querySelector(".team-total-info-count"); //队伍星级、属性、类型合计
|
||||
if (teamTotalInfoCountDom) refreshTeamTotalCount(teamTotalInfoCountDom, teamData, teamNum);
|
||||
|
||||
const formationTotalInfoDom = formationBox.querySelector(".formation-total-info"); //所有队伍能力值合计
|
||||
if (formationTotalInfoDom) refreshFormationTotalHP(formationTotalInfoDom, formation.teams);
|
||||
|
||||
|
|
@ -6618,6 +6633,9 @@ function refreshAll(formationData) {
|
|||
const teamTotalInfoDom = teamBigBox.querySelector(".team-total-info"); //队伍能力值合计
|
||||
if (teamTotalInfoDom) refreshTeamTotalHP(teamTotalInfoDom, teamData, teamNum);
|
||||
|
||||
const teamTotalInfoCountDom = teamBigBox.querySelector(".team-total-info-count"); //队伍星级、属性、类型合计
|
||||
if (teamTotalInfoCountDom) refreshTeamTotalCount(teamTotalInfoCountDom, teamData, teamNum);
|
||||
|
||||
const teamAwokenDom = teamBigBox.querySelector(".team-awoken"); //队伍觉醒合计
|
||||
if (teamAwokenDom) refreshTeamAwokenCount(teamAwokenDom, teamData);
|
||||
|
||||
|
|
@ -7386,9 +7404,35 @@ function refreshTeamTotalHP(totalDom, team, teamIdx) {
|
|||
}
|
||||
}
|
||||
|
||||
const tRarityDom = totalDom.querySelector(".tIf-rarity");
|
||||
const tAttrsDom = totalDom.querySelector(".tIf-attrs");
|
||||
const tTypesDom = totalDom.querySelector(".tIf-types");
|
||||
if (tEffectDom) {
|
||||
//76版队长技能不被换队长所影响
|
||||
const leader1id_original = members[0].id;
|
||||
const leader2id_original = teamsCount===2 ? (teamIdx === 1 ? teamsA_members[0].id : teamsB_members[0].id) : members[5].id;
|
||||
let effect = tIf_Effect(leader1id,leader2id, leader1id_original,leader2id_original);
|
||||
if (badge == 22) effect.poisonNoEffect = true;
|
||||
refreshEffectDom(tEffectDom, effect);
|
||||
}
|
||||
}
|
||||
//刷新队伍能力值合计
|
||||
function refreshTeamTotalCount(totalCountDom, team, teamIdx) {
|
||||
//计算总的生命值
|
||||
if (!totalCountDom) return;
|
||||
|
||||
const [members, assists, badge, swapId] = team;
|
||||
|
||||
const teams = formation.teams;
|
||||
const [teamsA=[], teamsB=[], teamsC=[]] = teams;
|
||||
const [teamsA_members, teamsA_assists, teamsA_badge] = teamsA;
|
||||
const [teamsB_members, teamsB_assists, teamsB_badge] = teamsB;
|
||||
|
||||
//计算当前队伍，2P时则是需要特殊处理
|
||||
const team_2p = teamsCount===2 ? members.concat((teamIdx === 1 ? teamsA_members[0] : teamsB_members[0])) : members;
|
||||
const assistTeam_2p = teamsCount===2 ? assists.concat((teamIdx === 1 ? teamsA_assists[0] : teamsB_assists[0])) : assists;
|
||||
|
||||
|
||||
const tRarityDom = totalCountDom.querySelector(".tIf-rarity");
|
||||
const tAttrsDom = totalCountDom.querySelector(".tIf-attrs");
|
||||
const tTypesDom = totalCountDom.querySelector(".tIf-types");
|
||||
//统计队伍稀有度总数
|
||||
if (tRarityDom)
|
||||
{
|
||||
|
|
@ -7419,15 +7463,6 @@ function refreshTeamTotalHP(totalDom, team, teamIdx) {
|
|||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (tEffectDom) {
|
||||
//76版队长技能不被换队长所影响
|
||||
const leader1id_original = members[0].id;
|
||||
const leader2id_original = teamsCount===2 ? (teamIdx === 1 ? teamsA_members[0].id : teamsB_members[0].id) : members[5].id;
|
||||
let effect = tIf_Effect(leader1id,leader2id, leader1id_original,leader2id_original);
|
||||
if (badge == 22) effect.poisonNoEffect = true;
|
||||
refreshEffectDom(tEffectDom, effect);
|
||||
}
|
||||
}
|
||||
function refreshEffectDom(tEffectDom, effect) {
|
||||
const _76board = tEffectDom.querySelector(".icon-skill[data-icon-type='board-size-change']");
|
||||
|
|
|
|||
104
solo.html
104
solo.html
|
|
@ -76,59 +76,34 @@ const teamsCount = 1;
|
|||
<div class="dungeon-enchance"></div>
|
||||
<ul class="teams">
|
||||
<li class="team-bigbox team-1">
|
||||
<ul class="team-badge">
|
||||
<li><input type="radio" name="team-1-badge" class="badge-radio" value="1" id="team-1-badge-1" checked><label class="badge" data-badge-icon="1" for="team-1-badge-1"></label></li>
|
||||
<li><input type="radio" name="team-1-badge" class="badge-radio" value="129" id="team-1-badge-129"><label class="badge" data-badge-icon="129" for="team-1-badge-129"></label></li>
|
||||
<li><input type="radio" name="team-1-badge" class="badge-radio" value="22" id="team-1-badge-22"><label class="badge" data-badge-icon="22" for="team-1-badge-22"></label></li>
|
||||
<li><input type="radio" name="team-1-badge" class="badge-radio" value="23" id="team-1-badge-23"><label class="badge" data-badge-icon="23" for="team-1-badge-23"></label></li>
|
||||
<li><input type="radio" name="team-1-badge" class="badge-radio" value="2" id="team-1-badge-2"><label class="badge" data-badge-icon="2" for="team-1-badge-2"></label></li>
|
||||
<li><input type="radio" name="team-1-badge" class="badge-radio" value="3" id="team-1-badge-3"><label class="badge" data-badge-icon="3" for="team-1-badge-3"></label></li>
|
||||
<li><input type="radio" name="team-1-badge" class="badge-radio" value="4" id="team-1-badge-4"><label class="badge" data-badge-icon="4" for="team-1-badge-4"></label></li>
|
||||
<li><input type="radio" name="team-1-badge" class="badge-radio" value="5" id="team-1-badge-5"><label class="badge" data-badge-icon="5" for="team-1-badge-5"></label></li>
|
||||
<li><input type="radio" name="team-1-badge" class="badge-radio" value="6" id="team-1-badge-6"><label class="badge" data-badge-icon="6" for="team-1-badge-6"></label></li>
|
||||
<li><input type="radio" name="team-1-badge" class="badge-radio" value="7" id="team-1-badge-7"><label class="badge" data-badge-icon="7" for="team-1-badge-7"></label></li>
|
||||
<li><input type="radio" name="team-1-badge" class="badge-radio" value="8" id="team-1-badge-8"><label class="badge" data-badge-icon="8" for="team-1-badge-8"></label></li>
|
||||
<li><input type="radio" name="team-1-badge" class="badge-radio" value="9" id="team-1-badge-9"><label class="badge" data-badge-icon="9" for="team-1-badge-9"></label></li>
|
||||
<li><input type="radio" name="team-1-badge" class="badge-radio" value="11" id="team-1-badge-11"><label class="badge" data-badge-icon="11" for="team-1-badge-11"></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>
|
||||
<li><input type="radio" name="team-1-badge" class="badge-radio" value="19" id="team-1-badge-19"><label class="badge" data-badge-icon="19" for="team-1-badge-19"></label></li>
|
||||
<li><input type="radio" name="team-1-badge" class="badge-radio" value="20" id="team-1-badge-20"><label class="badge" data-badge-icon="20" for="team-1-badge-20"></label></li>
|
||||
<li><input type="radio" name="team-1-badge" class="badge-radio" value="21" id="team-1-badge-21"><label class="badge" data-badge-icon="21" for="team-1-badge-21"></label></li>
|
||||
<li><input type="radio" name="team-1-badge" class="badge-radio" value="10" id="team-1-badge-10"><label class="badge" data-badge-icon="10" for="team-1-badge-10"></label></li>
|
||||
<li><input type="radio" name="team-1-badge" class="badge-radio" value="12" id="team-1-badge-12"><label class="badge" data-badge-icon="12" for="team-1-badge-12"></label></li>
|
||||
<li><input type="radio" name="team-1-badge" class="badge-radio" value="13" id="team-1-badge-13"><label class="badge" data-badge-icon="13" for="team-1-badge-13"></label></li>
|
||||
<li><input type="radio" name="team-1-badge" class="badge-radio" value="14" id="team-1-badge-14"><label class="badge" data-badge-icon="14" for="team-1-badge-14"></label></li>
|
||||
<li><input type="radio" name="team-1-badge" class="badge-radio" value="24" id="team-1-badge-24"><label class="badge" data-badge-icon="24" for="team-1-badge-24"></label></li>
|
||||
<li><input type="radio" name="team-1-badge" class="badge-radio" value="25" id="team-1-badge-25"><label class="badge" data-badge-icon="25" for="team-1-badge-25"></label></li>
|
||||
</ul>
|
||||
<div class="team-total-info-count">
|
||||
<ul class="tIf-rarity">
|
||||
<li><icon class="rarity" data-value="0"><!--稀有度--></icon></li>
|
||||
</ul>
|
||||
<ul class="tIf-attrs">
|
||||
<li><icon class="attr" data-attr-icon="0"><!--火--></icon></li>
|
||||
<li><icon class="attr" data-attr-icon="1"><!--水--></icon></li>
|
||||
<li><icon class="attr" data-attr-icon="2"><!--木--></icon></li>
|
||||
<li><icon class="attr" data-attr-icon="3"><!--光--></icon></li>
|
||||
<li><icon class="attr" data-attr-icon="4"><!--暗--></icon></li>
|
||||
</ul>
|
||||
<ul class="tIf-types">
|
||||
<li><icon class="type-icon" data-type-icon="5"><!--神--></icon></li>
|
||||
<li><icon class="type-icon" data-type-icon="4"><!--龍--></icon></li>
|
||||
<li><icon class="type-icon" data-type-icon="7"><!--惡魔--></icon></li>
|
||||
<li><icon class="type-icon" data-type-icon="8"><!--机械--></icon></li>
|
||||
<li><icon class="type-icon" data-type-icon="1"><!--平衡--></icon></li>
|
||||
<li><icon class="type-icon" data-type-icon="6"><!--攻撃--></icon></li>
|
||||
<li><icon class="type-icon" data-type-icon="2"><!--体力--></icon></li>
|
||||
<li><icon class="type-icon" data-type-icon="3"><!--回復--></icon></li>
|
||||
<li><icon class="type-icon" data-type-icon="0"><!--進化用--></icon></li>
|
||||
<li><icon class="type-icon" data-type-icon="12"><!--能力覺醒用--></icon></li>
|
||||
<li><icon class="type-icon" data-type-icon="14"><!--強化合成用--></icon></li>
|
||||
<li><icon class="type-icon" data-type-icon="15"><!--販賣用--></icon></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="team-total-info">
|
||||
<div class="tIf-addition-info">
|
||||
<ul class="tIf-rarity">
|
||||
<li><icon class="rarity" data-value="0"><!--稀有度--></icon></li>
|
||||
</ul>
|
||||
<ul class="tIf-attrs">
|
||||
<li><icon class="attr" data-attr-icon="0"><!--火--></icon></li>
|
||||
<li><icon class="attr" data-attr-icon="1"><!--水--></icon></li>
|
||||
<li><icon class="attr" data-attr-icon="2"><!--木--></icon></li>
|
||||
<li><icon class="attr" data-attr-icon="3"><!--光--></icon></li>
|
||||
<li><icon class="attr" data-attr-icon="4"><!--暗--></icon></li>
|
||||
</ul>
|
||||
<ul class="tIf-types">
|
||||
<li><icon class="type-icon" data-type-icon="5"><!--神--></icon></li>
|
||||
<li><icon class="type-icon" data-type-icon="4"><!--龍--></icon></li>
|
||||
<li><icon class="type-icon" data-type-icon="7"><!--惡魔--></icon></li>
|
||||
<li><icon class="type-icon" data-type-icon="8"><!--机械--></icon></li>
|
||||
<li><icon class="type-icon" data-type-icon="1"><!--平衡--></icon></li>
|
||||
<li><icon class="type-icon" data-type-icon="6"><!--攻撃--></icon></li>
|
||||
<li><icon class="type-icon" data-type-icon="2"><!--体力--></icon></li>
|
||||
<li><icon class="type-icon" data-type-icon="3"><!--回復--></icon></li>
|
||||
<li><icon class="type-icon" data-type-icon="0"><!--進化用--></icon></li>
|
||||
<li><icon class="type-icon" data-type-icon="12"><!--能力覺醒用--></icon></li>
|
||||
<li><icon class="type-icon" data-type-icon="14"><!--強化合成用--></icon></li>
|
||||
<li><icon class="type-icon" data-type-icon="15"><!--販賣用--></icon></li>
|
||||
</ul>
|
||||
</div>
|
||||
<button class="badge team-badge" data-badge-icon="1"></button>
|
||||
<div class="tIf-total-hp">
|
||||
<span class="general"></span>
|
||||
<span class="awoken-bind"></span>
|
||||
|
|
@ -139,14 +114,14 @@ const teamsCount = 1;
|
|||
<canvas height="20" width="50" class="reduce-details display-none"></canvas>
|
||||
</span>
|
||||
</div>
|
||||
<div class="tIf-total-skill-boost">
|
||||
<span class="general"></span>
|
||||
</div>
|
||||
<div class="tIf-total-move">
|
||||
<span class="general"></span>
|
||||
<span class="awoken-bind"></span>
|
||||
</div>
|
||||
<div class="tIf-effect">
|
||||
<div class="tIf-total-skill-boost">
|
||||
<span class="general"></span>
|
||||
</div>
|
||||
<div class="tIf-total-move">
|
||||
<span class="general"></span>
|
||||
<span class="awoken-bind"></span>
|
||||
</div>
|
||||
<icon class="icon-skill display-none" data-icon-type="board-size-change"></icon>
|
||||
<icon class="icon-skill display-none" data-icon-type="no-skyfall"></icon>
|
||||
<icon class="orb poison-no-effect display-none" data-orb-icon="7"></icon>
|
||||
|
|
@ -1273,6 +1248,7 @@ const teamsCount = 1;
|
|||
</div>
|
||||
<a id="external-support" class="brown-button fa" href="doc/index.html#data-exchange-with-paddb"></a>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="dialog dialog-dungeon-enchance display-none">
|
||||
<div class="dialog-title"></div>
|
||||
|
|
@ -1333,7 +1309,7 @@ const teamsCount = 1;
|
|||
</div>
|
||||
<div class="dialog-control"><button class="dialog-clear brown-button"></button><button class="dialog-close brown-button"></button><button class="dialog-confirm brown-button"></button></div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="player-data-frame" class="mask display-none">
|
||||
<div class="player-box-title fa"><!--玩家数据子--></div>
|
||||
<div class="control-button-box">
|
||||
|
|
@ -1463,5 +1439,13 @@ const teamsCount = 1;
|
|||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<dialog id="badge-choose" class="dialog">
|
||||
<form method="dialog">
|
||||
<ul class="team-badges">
|
||||
</ul>
|
||||
<div class="dialog-control"><button class="dialog-close brown-button" value="cancel"></button></div>
|
||||
</form>
|
||||
</dialog>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1408,14 +1408,19 @@
|
|||
background-image: url(images/badge-bg.png);
|
||||
width: 53px;
|
||||
height: 41px;
|
||||
line-height: 41px;
|
||||
text-align: center;
|
||||
margin-right: 5px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
button.badge {
|
||||
border: none;
|
||||
background-color: unset;
|
||||
cursor: pointer;
|
||||
}
|
||||
.badge::before{
|
||||
content: "";
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
content: "";
|
||||
background-repeat: no-repeat;
|
||||
background-image: url(images/badge.png);
|
||||
width: 36px; height: 30px;
|
||||
|
|
|
|||
73
style.css
73
style.css
|
|
@ -340,19 +340,19 @@ ul{
|
|||
.dialog
|
||||
{
|
||||
color: white;
|
||||
position: absolute;
|
||||
padding: 5px;
|
||||
border: 2px ridge #D1D398;
|
||||
top: 0;
|
||||
background-image: linear-gradient(to bottom,#788321f0,#3E4D14f0);
|
||||
border-radius: 6px;
|
||||
box-shadow: black 2px 0px 1px,black 0px 2px 1px,black -2px 0px 1px,black 0px -2px 1px;
|
||||
margin-left: calc(50% - 200px);
|
||||
margin-top: 30px;
|
||||
font-family: var(--game-font-family);
|
||||
text-shadow: black 2px 2px 0;
|
||||
z-index: 2;
|
||||
|
||||
background-image: linear-gradient(to bottom,#788321d0,#3E4D14d0);
|
||||
background-color: unset;
|
||||
box-shadow: black 2px 0px 1px,black 0px 2px 1px,black -2px 0px 1px,black 0px -2px 1px;
|
||||
border: 2px ridge #D1D398;
|
||||
border-radius: 6px;
|
||||
}
|
||||
/*模态框背景*/
|
||||
.dialog::backdrop {
|
||||
background-color: rgba(0,0,0,0.8);
|
||||
backdrop-filter: blur(3px);
|
||||
}
|
||||
.dialog .dialog-title
|
||||
|
|
@ -728,7 +728,7 @@ body:not(.show-member-ability) .team-ability, /*队员三维*/
|
|||
body:not(.show-member-types) .team-member-types, /*武器觉醒、队员觉醒、队员类型*/
|
||||
body:not(.show-member-awoken) :where(.team-assist-awoken , .team-member-awoken), /*武器觉醒、队员觉醒、队员类型*/
|
||||
body:not(.show-team-awoken-count) .team-awoken, /*队伍觉醒统计*/
|
||||
body:not(.show-team-attrtype-count) .tIf-addition-info, /*稀有度、属性与类型计数*/
|
||||
body:not(.show-team-attrtype-count) .team-total-info-count, /*稀有度、属性与类型计数*/
|
||||
body:not(.show-team-awoken-effect) .team-awoken-effect, /*队伍觉醒效果统计*/
|
||||
body:not(.show-rich-text-tools) #rich-text-tools /*队伍觉醒效果统计*/
|
||||
{
|
||||
|
|
@ -813,28 +813,19 @@ body:not(.show-team-total-info):not(.solo) .formation-box .team-badge
|
|||
.formation-box .monster{
|
||||
margin: 4px; /*留给队长边框的*/
|
||||
}
|
||||
.team-assist, .team-members,.team-badge{
|
||||
.team-assist, .team-members{
|
||||
display: inline-block;
|
||||
}
|
||||
/* 徽章，平时都隐藏 */
|
||||
.team-badge li{
|
||||
display: inline-block;
|
||||
}
|
||||
.badge-radio{
|
||||
display: none;
|
||||
}
|
||||
.badge{
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
/* 显示所有徽章时则打开 */
|
||||
.show-all-badges .badge{
|
||||
display: inline-block;
|
||||
}
|
||||
/* 选中的徽章平时也打开 */
|
||||
.team-badge .badge-radio:checked+.badge{
|
||||
display: inline-block;
|
||||
|
||||
/* 徽章选择窗口列表 */
|
||||
#badge-choose .team-badges {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(8, 53px);
|
||||
grid-template-rows: repeat(auto-fill, 41px);
|
||||
grid-gap: 15px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
/*队伍的背景色*/
|
||||
.teams {
|
||||
counter-reset: team;
|
||||
|
|
@ -915,12 +906,20 @@ body:not(.show-team-total-info):not(.solo) .formation-box .team-badge
|
|||
.formation-box .team-total-info
|
||||
{
|
||||
font-size: 15px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
.formation-box .team-total-info
|
||||
{
|
||||
display: inline-block;
|
||||
max-width: calc(100% - 60px);
|
||||
display: grid;
|
||||
grid-auto-rows: min-content;
|
||||
grid-template-columns: 53px auto;
|
||||
align-items: end;
|
||||
}
|
||||
.formation-box .team-badge {
|
||||
grid-row: 1 / 3;
|
||||
}
|
||||
.formation-box .tIf-effect {
|
||||
display: flex;
|
||||
gap: 3px;
|
||||
}
|
||||
/*各种信息统计的图标*/
|
||||
.tIf-total-skill-boost,
|
||||
|
|
@ -1126,14 +1125,8 @@ body:not(.solo) .awoken-icon[data-awoken-icon="64"]::after
|
|||
.tIf-attrs,
|
||||
.tIf-types
|
||||
{
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
.tIf-rarity>li,
|
||||
.tIf-attrs>li,
|
||||
.tIf-types>li
|
||||
{
|
||||
display: inline-block;
|
||||
display: inline-flex;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
.tIf-attrs icon.attr,
|
||||
.tIf-types icon.type-icon
|
||||
|
|
|
|||
34
triple.html
34
triple.html
|
|
@ -87,32 +87,6 @@ const teamsCount = 3;
|
|||
<div class="dungeon-enchance"></div>
|
||||
<ul class="teams">
|
||||
<li class="team-bigbox team-1 show-team-name-right">
|
||||
<ul class="team-badge">
|
||||
<li><input type="radio" name="team-1-badge" class="badge-radio" value="1" id="team-1-badge-1" checked><label class="badge" data-badge-icon="1" for="team-1-badge-1"></label></li>
|
||||
<li><input type="radio" name="team-1-badge" class="badge-radio" value="129" id="team-1-badge-129"><label class="badge" data-badge-icon="129" for="team-1-badge-129"></label></li>
|
||||
<li><input type="radio" name="team-1-badge" class="badge-radio" value="22" id="team-1-badge-22"><label class="badge" data-badge-icon="22" for="team-1-badge-22"></label></li>
|
||||
<li><input type="radio" name="team-1-badge" class="badge-radio" value="23" id="team-1-badge-23"><label class="badge" data-badge-icon="23" for="team-1-badge-23"></label></li>
|
||||
<li><input type="radio" name="team-1-badge" class="badge-radio" value="2" id="team-1-badge-2"><label class="badge" data-badge-icon="2" for="team-1-badge-2"></label></li>
|
||||
<li><input type="radio" name="team-1-badge" class="badge-radio" value="3" id="team-1-badge-3"><label class="badge" data-badge-icon="3" for="team-1-badge-3"></label></li>
|
||||
<li><input type="radio" name="team-1-badge" class="badge-radio" value="4" id="team-1-badge-4"><label class="badge" data-badge-icon="4" for="team-1-badge-4"></label></li>
|
||||
<li><input type="radio" name="team-1-badge" class="badge-radio" value="5" id="team-1-badge-5"><label class="badge" data-badge-icon="5" for="team-1-badge-5"></label></li>
|
||||
<li><input type="radio" name="team-1-badge" class="badge-radio" value="6" id="team-1-badge-6"><label class="badge" data-badge-icon="6" for="team-1-badge-6"></label></li>
|
||||
<li><input type="radio" name="team-1-badge" class="badge-radio" value="7" id="team-1-badge-7"><label class="badge" data-badge-icon="7" for="team-1-badge-7"></label></li>
|
||||
<li><input type="radio" name="team-1-badge" class="badge-radio" value="8" id="team-1-badge-8"><label class="badge" data-badge-icon="8" for="team-1-badge-8"></label></li>
|
||||
<li><input type="radio" name="team-1-badge" class="badge-radio" value="9" id="team-1-badge-9"><label class="badge" data-badge-icon="9" for="team-1-badge-9"></label></li>
|
||||
<li><input type="radio" name="team-1-badge" class="badge-radio" value="11" id="team-1-badge-11"><label class="badge" data-badge-icon="11" for="team-1-badge-11"></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>
|
||||
<li><input type="radio" name="team-1-badge" class="badge-radio" value="19" id="team-1-badge-19"><label class="badge" data-badge-icon="19" for="team-1-badge-19"></label></li>
|
||||
<li><input type="radio" name="team-1-badge" class="badge-radio" value="20" id="team-1-badge-20"><label class="badge" data-badge-icon="20" for="team-1-badge-20"></label></li>
|
||||
<li><input type="radio" name="team-1-badge" class="badge-radio" value="21" id="team-1-badge-21"><label class="badge" data-badge-icon="21" for="team-1-badge-21"></label></li>
|
||||
<li><input type="radio" name="team-1-badge" class="badge-radio" value="10" id="team-1-badge-10"><label class="badge" data-badge-icon="10" for="team-1-badge-10"></label></li>
|
||||
<li><input type="radio" name="team-1-badge" class="badge-radio" value="12" id="team-1-badge-12"><label class="badge" data-badge-icon="12" for="team-1-badge-12"></label></li>
|
||||
<li><input type="radio" name="team-1-badge" class="badge-radio" value="13" id="team-1-badge-13"><label class="badge" data-badge-icon="13" for="team-1-badge-13"></label></li>
|
||||
<li><input type="radio" name="team-1-badge" class="badge-radio" value="14" id="team-1-badge-14"><label class="badge" data-badge-icon="14" for="team-1-badge-14"></label></li>
|
||||
<li><input type="radio" name="team-1-badge" class="badge-radio" value="24" id="team-1-badge-24"><label class="badge" data-badge-icon="24" for="team-1-badge-24"></label></li>
|
||||
<li><input type="radio" name="team-1-badge" class="badge-radio" value="25" id="team-1-badge-25"><label class="badge" data-badge-icon="25" for="team-1-badge-25"></label></li>
|
||||
</ul>
|
||||
<div class="team-total-info">
|
||||
<div class="tIf-addition-info">
|
||||
<ul class="tIf-rarity">
|
||||
|
|
@ -2457,5 +2431,13 @@ const teamsCount = 3;
|
|||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<dialog id="badge-choose" class="dialog">
|
||||
<form method="dialog">
|
||||
<ul class="team-badge">
|
||||
</ul>
|
||||
<div class="dialog-control"><button class="dialog-close brown-button" value="cancel"></button></div>
|
||||
</form>
|
||||
</dialog>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue