重新优化产珠面板

This commit is contained in:
枫谷剑仙 2022-11-27 17:59:53 +08:00
parent 242a99f15c
commit e55e35f9ad
9 changed files with 157 additions and 140 deletions

View File

@ -1 +1 @@
[{"code":"ja","ckey":{"card":"c6cdc2db4e909d26c3fa2035aab6ed00","skill":"90ffe1f0455cb0d76e000eb7cb901d29"},"updateTime":1669410746308},{"code":"en","ckey":{"card":"211dbc809ef5f4c8445c8bdc42ce46c6","skill":"81090369eff7c516843c20d385d3543c"},"updateTime":1669410746308},{"code":"ko","ckey":{"card":"dd2cf25f57eb7b5aba69cd48cbb30b0b","skill":"29fdbded544c840684c6b19bf085372e"},"updateTime":1669410746308}]
[{"code":"ja","ckey":{"card":"57d9737ff6510747cb0d71e1081c2ad4","skill":"90ffe1f0455cb0d76e000eb7cb901d29"},"updateTime":1669543133962},{"code":"en","ckey":{"card":"211dbc809ef5f4c8445c8bdc42ce46c6","skill":"81090369eff7c516843c20d385d3543c"},"updateTime":1669410746308},{"code":"ko","ckey":{"card":"dd2cf25f57eb7b5aba69cd48cbb30b0b","skill":"29fdbded544c840684c6b19bf085372e"},"updateTime":1669410746308}]

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -124,26 +124,41 @@ class Block
class BoardSet
{
boards = [];
node = document.createElement("div");
boardsLabel = [];
node = (()=>{
const div = document.createElement("div");
div.className = "board-set";
return div;
})();
constructor(...boards) {
const boardSet = this;
const switchFunction = function(event){ //在65、76、54之间循环切换
if (event.ctrlKey) {
boardSet.boards.forEach(board=>board.tableNode.classList.remove(className_displayNone));
return;
}
let showIdx = boardSet.boards.findIndex(board=>!board.tableNode.classList.contains(className_displayNone));
if (showIdx < 0 || showIdx >= (boardSet.boards.length - 1)) showIdx = 0;
else showIdx++;
for (let i=0;i<boardSet.boards.length;i++) {
boardSet.boards[i].tableNode.classList.toggle(className_displayNone, i !== showIdx);
}
}
this.boards.push(...(boards.filter(board=>board instanceof Board)));
this.boards.forEach((board, idx)=>{
this.node.appendChild(board.tableNode);
if (idx > 0) board.tableNode.classList.add(className_displayNone);
const span = document.createElement("span");
span.dataset.columnCount = board.columnCount;
span.dataset.rowCount = board.rowCount;
span.onclick = switchFunction;
this.boardsLabel.push(span);
this.node.appendChild(span);
if (idx > 0) {
board.tableNode.classList.add(className_displayNone);
}
});
const _this = this;
this.node.onclick = function(event){ //在65、76、54之间循环切换
if (event.ctrlKey) { //如果按Ctrl全部取消隐藏
_this.boards.forEach(board=>board.tableNode.classList.remove(className_displayNone));
return;
}
let showIdx = _this.boards.findIndex(board=>!board.tableNode.classList.contains(className_displayNone));
if (showIdx < 0 || showIdx >= (_this.boards.length - 1)) showIdx = 0;
else showIdx++;
for (let i=0;i<_this.boards.length;i++) {
_this.boards[i].tableNode.classList.toggle(className_displayNone, i !== showIdx);
}
}
}
valueOf() {
return this.node;
@ -2642,7 +2657,7 @@ function renderTypes(types, option = {}) {
const tsp = localTranslating.skill_parse;
let contentFrg = types.map(type => {
const icon = document.createElement("icon");
icon.className = "type";
icon.className = "type-icon";
icon.setAttribute("data-type-icon",type);
return tsp.types?.[type]({icon: icon});
})

View File

@ -4806,7 +4806,7 @@ function refreshmemberTypes(memberTypesDom, team, idx) {
for (let i = 0;i < types.length; i++) {
const iconLi = document.createElement("li");
const icon = iconLi.appendChild(document.createElement("icon"))
icon.className = "type";
icon.className = "type-icon";
if (appendType && i == (types.length - 1)) icon.classList.add('append-type');
icon.setAttribute("data-type-icon", types[i]);
memberTypesUl.appendChild(iconLi);

View File

@ -6859,7 +6859,7 @@ const cachesMap = new Map([
],
[
"script-skill-parser.js",
"316b65c35786bf506eb958a4bcbbc7c9"
"3de96f6414c8428e4cc211cc9eddc728"
],
[
"script-universal_function.js",
@ -6867,7 +6867,7 @@ const cachesMap = new Map([
],
[
"script.js",
"867ffd4f5f8ae904b02309cbb007f72c"
"337d1ca9d001ae9aa32f3a678a0ea3fa"
],
[
"solo.html",
@ -6875,11 +6875,11 @@ const cachesMap = new Map([
],
[
"style-monsterimages.css",
"db2a118da5c9a43a71d6a92f2165360e"
"4ed903caecf58e157377f781341d47f0"
],
[
"style.css",
"f9abc99beb74f6ecc06fc7bb271f3429"
"7e73196e98955e5591f606e2560cc7a4"
],
[
"temp.js",
@ -7119,7 +7119,7 @@ const cachesMap = new Map([
],
[
"monsters-info/ckey.json",
"9b3aa24beedf9d78a14922fd84a74329"
"7dbe5b40d92c45b6f6cabef5dd125e0d"
],
[
"monsters-info/mon_en.json",
@ -7127,7 +7127,7 @@ const cachesMap = new Map([
],
[
"monsters-info/mon_ja.json",
"c6cdc2db4e909d26c3fa2035aab6ed00"
"57d9737ff6510747cb0d71e1081c2ad4"
],
[
"monsters-info/mon_ko.json",

View File

@ -3,44 +3,31 @@
.property{ /*主属性*/
background-position-y: 0;
}
.property[data-property='-1'],
.subproperty[data-property='-1']
{
background: none; /*无*/
}
.property[data-property='0'],
.subproperty[data-property='0']
{
background-position-x: calc(-102px * 0); /*火*/
}
.property[data-property='1'],
.subproperty[data-property='1']
{
background-position-x: calc(-102px * 1); /*水*/
}
.property[data-property='2'],
.subproperty[data-property='2']
{
background-position-x: calc(-102px * 2); /*木*/
}
.property[data-property='3'],
.subproperty[data-property='3']
{
background-position-x: calc(-102px * 3); /*光*/
}
.property[data-property='4'],
.subproperty[data-property='4']
{
background-position-x: calc(-102px * 4); /*暗*/
}
.property[data-property='6']
{
background-image: url(images/CARDFRAMEW.PNG);
background-position: 0 0;
}
.subproperty{ /*副属性*/
background-position-y: -104px;
}
:where(.property, .subproperty)[data-property='-1'] {
background: none; /*无*/
}
:where(.property, .subproperty)[data-property='0'] {
background-position-x: calc(-102px * 0); /*火*/
}
:where(.property, .subproperty)[data-property='1'] {
background-position-x: calc(-102px * 1); /*水*/
}
:where(.property, .subproperty)[data-property='2'] {
background-position-x: calc(-102px * 2); /*木*/
}
:where(.property, .subproperty)[data-property='3'] {
background-position-x: calc(-102px * 3); /*光*/
}
:where(.property, .subproperty)[data-property='4'] {
background-position-x: calc(-102px * 4); /*暗*/
}
.property[data-property='6'] {
background-image: url(images/CARDFRAMEW.PNG);
background-position: 0 0;
}
/*宠物头像所用的图片*/
.monster[data-cards-pic-idx='1']{background-image: url(images/cards_ja/CARDS_001.PNG);}
.monster[data-cards-pic-idx='2']{background-image: url(images/cards_ja/CARDS_002.PNG);}
@ -666,8 +653,7 @@
.monster[data-cards-pic-y='9']{background-position-y:calc(-102px * 9);}
/*觉醒、类型、潜觉*/
.awoken-icon,
.type-icon,
icon.type
.type-icon
{
display:inline-block;
width:32px;height:32px;
@ -995,75 +981,61 @@ icon.type
background-position-y:calc(-32px * 104);
}
/*类型*/
.type-icon,
icon.type
.type-icon
{
background-image: url(images/type.png);
background-position-x: 0;
background-position-y: 32px; /*默认不显示*/
}
.type-icon[data-type-icon='0'],
.type[data-type-icon='0']
.type-icon[data-type-icon='0']
{/*进化用*/
background-position-y:calc(-32px * 0);
}
.type-icon[data-type-icon='1'],
.type[data-type-icon='1']
.type-icon[data-type-icon='1']
{/*平衡*/
background-position-y:calc(-32px * 1);
}
.type-icon[data-type-icon='2'],
.type[data-type-icon='2']
.type-icon[data-type-icon='2']
{/*体力*/
background-position-y:calc(-32px * 2);
}
.type-icon[data-type-icon='3'],
.type[data-type-icon='3']
.type-icon[data-type-icon='3']
{/*回复*/
background-position-y:calc(-32px * 3);
}
.type-icon[data-type-icon='4'],
.type[data-type-icon='4']
.type-icon[data-type-icon='4']
{/*龙*/
background-position-y:calc(-32px * 4);
}
.type-icon[data-type-icon='5'],
.type[data-type-icon='5']
.type-icon[data-type-icon='5']
{/*神*/
background-position-y:calc(-32px * 5);
}
.type-icon[data-type-icon='6'],
.type[data-type-icon='6']
.type-icon[data-type-icon='6']
{/*攻击*/
background-position-y:calc(-32px * 6);
}
.type-icon[data-type-icon='7'],
.type[data-type-icon='7']
.type-icon[data-type-icon='7']
{/*恶魔*/
background-position-y:calc(-32px * 7);
}
.type-icon[data-type-icon='8'],
.type[data-type-icon='8']
.type-icon[data-type-icon='8']
{/*机械*/
background-position-y:calc(-32px * 8);
}
.type-icon[data-type-icon='9'],
.type[data-type-icon='9']
.type-icon[data-type-icon='9']
{/*特别保护*/
background-position-y:calc(-32px * 9);
}
.type-icon[data-type-icon='12'],
.type[data-type-icon='12']
.type-icon[data-type-icon='12']
{/*能力觉醒用*/
background-position-y:calc(-32px * 12);
}
.type-icon[data-type-icon='14'],
.type[data-type-icon='14']
.type-icon[data-type-icon='14']
{/*强化合成用*/
background-position-y:calc(-32px * 14);
}
.type-icon[data-type-icon='15'],
.type[data-type-icon='15']
.type-icon[data-type-icon='15']
{/*贩卖用*/
background-position-y:calc(-32px * 15);
}
@ -1080,7 +1052,7 @@ icon.type
align-items: center; /*靠右*/
}
.latent-icon::before,
.latent-icon::after /*目前x1.5暂时只有日服支持,美服支持后删除.ds-ja*/
.latent-icon::after
{
margin: -2px;
display: inline-block;
@ -1252,22 +1224,28 @@ icon.type
width: 76px;
background-position-x: -32px;
}
/* 潜觉编辑界面,多显示一个需求觉醒 */
.m-latent-allowable-ul .latent-icon[data-latent-icon='39'],
.m-latent-allowable-ul .latent-icon[data-latent-icon='40'],
.m-latent-allowable-ul .latent-icon[data-latent-icon='41'],
.m-latent-allowable-ul .latent-icon[data-latent-icon='46'],
.m-latent-allowable-ul .latent-icon[data-latent-icon='47']{
/* 潜觉编辑界面,这几个潜觉需要多显示一个需求的普通觉醒 */
.m-latent-allowable-ul .latent-icon:where(
[data-latent-icon='39'],
[data-latent-icon='40'],
[data-latent-icon='41'],
[data-latent-icon='46'],
[data-latent-icon='47'],
){ /*占两格*/
grid-column: span 2;
}
.m-latent-allowable-ul .latent-icon[data-latent-icon='39']::after,
.m-latent-allowable-ul .latent-icon[data-latent-icon='40']::after,
.m-latent-allowable-ul .latent-icon[data-latent-icon='41']::after,
.m-latent-allowable-ul .latent-icon[data-latent-icon='46']::after,
.m-latent-allowable-ul .latent-icon[data-latent-icon='47']::after{ /*C珠破吸*/
.m-latent-allowable-ul .latent-icon:where(
[data-latent-icon='39'],
[data-latent-icon='40'],
[data-latent-icon='41'],
[data-latent-icon='46'],
[data-latent-icon='47'],
)::after /*赋予他们的after觉醒图片*/
{
content: "";
background-image: url(images/awoken.png);
margin-left: 6px;
opacity: 0.5;
}
.m-latent-allowable-ul .latent-icon[data-latent-icon='39']::after{ /*C珠破吸*/
background-position-y: calc(-32px * 62);
@ -1286,19 +1264,22 @@ icon.type
}
/* 额外有 x1.5 的 6格觉醒 */
.level-super-break .latent-icon[data-latent-icon='13']::after,
.level-super-break .latent-icon[data-latent-icon='37']::after,
.level-super-break .latent-icon[data-latent-icon='38']::after,
.level-super-break .latent-icon[data-latent-icon='39']::after,
.level-super-break .latent-icon[data-latent-icon='40']::after,
.level-super-break .latent-icon[data-latent-icon='41']::after,
.level-super-break .latent-icon[data-latent-icon='46']::after,
.level-super-break .latent-icon[data-latent-icon='47']::after
.level-super-break .latent-icon:where(
[data-latent-icon='13'],
[data-latent-icon='37'],
[data-latent-icon='38'],
[data-latent-icon='39'],
[data-latent-icon='40'],
[data-latent-icon='41'],
[data-latent-icon='46'],
[data-latent-icon='47'],
)::after
{
content: "";
background-position-x: -32px;
background-position-y: calc(-32px * 42);
}
/* 徽章背景 */
.badge{
background-image: url(images/badge-bg.png);

View File

@ -390,7 +390,7 @@ ul{
display: block;
position: absolute;
}
.type.append-type {
.type-icon.append-type {
background-color: lightgreen;
box-shadow: 1px 1px 3px lightgreen,1px 1px 3px lightgreen,1px 1px 3px lightgreen;
}
@ -1206,7 +1206,7 @@ icon.inflicts::after
grid-template-columns: repeat(3, 25.6px);
}
.member-awoken .awoken-icon,
.member-types .type
.member-types .type-icon
{
filter: unset;
transform: scale(0.80);
@ -2742,19 +2742,55 @@ icon.inflicts::after
}
/*面板相关*/
.board
{
cursor: pointer;
.board {
display: inline-block;
vertical-align: bottom;
vertical-align: middle;
}
.board[data-column-count="7"] {
transform: scale(calc(5 / 6));
margin: calc(-140px * (1 - 5 / 6 ) / 2) calc(-168px * (1 - 5 / 6 ) / 2);
.board-set>span {
cursor: pointer;
margin: 0 3px;
}
.board[data-column-count="5"] {
transform: scale(calc(5 / 4));
margin: calc(140px * (5 / 4 - 1) / 2) calc(168px * (5 / 4 - 1) / 2);
.board-set>span::before {
content: attr(data-column-count)"×"attr(data-row-count)"🔁";
}
.board.display-none+span {
display: none;
}
/*因为比例不一样,为了保证高度一致,应该以高度来算而不是宽度来算*/
.skill-datail-parsed .board {
/* 缩小的基础倍率 */
--base-scale: 0.75;
/* 画面缩小的倍率 */
transform: scale(var(--scale));
/* 缩小后内缩的范围 */
margin: calc(-36px * var(--row) * (1 - var(--scale)) / 2) calc(-36px * var(--colum) * (1 - var(--scale)) / 2);
}
.skill-datail-parsed .board[data-row-count="5"] {
--scale: calc(var(--base-scale) * 4 / 5);
--colum: 6;
--row: 5;
}
.skill-datail-parsed .board[data-row-count="6"] {
--scale: calc(var(--base-scale) * 4 / 6);
--colum: 7;
--row: 6;
}
.skill-datail-parsed .board[data-row-count="4"] {
--scale: calc(var(--base-scale) * 4 / 4);
--colum: 5;
--row: 4;
}
.board .orb
{
transform: unset;
margin: unset;
}
.board .orb.enhanced::after,
.board .orb.locked::after,
.board .orb.bound::after
{
content: "";
transform: unset;
}
.board .block {
position: relative;
@ -3697,10 +3733,7 @@ table .orb-icon
}
.icon-skill,
.attrs-div .attr-list .attr,
.skill-datail-parsed icon.attr,
.skill-datail-parsed icon.orb,
.skill-datail-parsed icon.type,
.skill-datail-parsed icon.awoken-icon
.skill-datail-parsed icon:where(.attr,.orb,.type-icon,.awoken-icon)
{
vertical-align: bottom;
transform: scale(0.75);
@ -3732,18 +3765,6 @@ table .orb-icon
--board-light-color: unset;
--board-deep-color: rgba(0,0,0,0.4);
}
.board .orb
{
transform: unset;
margin: unset;
}
.board .orb.enhanced::after,
.board .orb.locked::after,
.board .orb.bound::after
{
content: "";
transform: unset;
}
.skill-datail-parsed .board td {
padding: 0;
}