mapaler
/
PADDashFormation
Not watched
1
0
Fork 0
Code
Releases 163 Wiki evaluate Activity
Issues 0 Pull Requests 0 Datasets Model Cloudbrain HPC
Browse Source

重新制作了潜觉的排列

tags/v25.0
枫谷剑仙 3 years ago
parent
ef2e77d75b
commit
fd69ab5ff5
6 changed files with 169 additions and 316 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +24
    -24
      multi.html
  2. +16
    -23
      script.js
  3. +16
    -16
      solo.html
  4. +11
    -191
      style-monsterimages.css
  5. +62
    -22
      style.css
  6. +40
    -40
      triple.html

+ 24
- 24
multi.html View File

@@ -272,8 +272,8 @@ var formation = new Formation(teamsCount,5);
<li class="latent-icon"></li>
<li class="latent-icon"></li>
<li class="latent-icon"></li>
<li class="latent-icon latent-lock"></li>
<li class="latent-icon latent-lock"></li>
<li class="latent-icon"></li>
<li class="latent-icon"></li>
</ul>
</li>
<li class="latents latents-2">
@@ -284,8 +284,8 @@ var formation = new Formation(teamsCount,5);
<li class="latent-icon"></li>
<li class="latent-icon"></li>
<li class="latent-icon"></li>
<li class="latent-icon latent-lock"></li>
<li class="latent-icon latent-lock"></li>
<li class="latent-icon"></li>
<li class="latent-icon"></li>
</ul>
</li>
<li class="latents latents-3">
@@ -296,8 +296,8 @@ var formation = new Formation(teamsCount,5);
<li class="latent-icon"></li>
<li class="latent-icon"></li>
<li class="latent-icon"></li>
<li class="latent-icon latent-lock"></li>
<li class="latent-icon latent-lock"></li>
<li class="latent-icon"></li>
<li class="latent-icon"></li>
</ul>
</li>
<li class="latents latents-4">
@@ -308,8 +308,8 @@ var formation = new Formation(teamsCount,5);
<li class="latent-icon"></li>
<li class="latent-icon"></li>
<li class="latent-icon"></li>
<li class="latent-icon latent-lock"></li>
<li class="latent-icon latent-lock"></li>
<li class="latent-icon"></li>
<li class="latent-icon"></li>
</ul>
</li>
<li class="latents latents-5">
@@ -320,8 +320,8 @@ var formation = new Formation(teamsCount,5);
<li class="latent-icon"></li>
<li class="latent-icon"></li>
<li class="latent-icon"></li>
<li class="latent-icon latent-lock"></li>
<li class="latent-icon latent-lock"></li>
<li class="latent-icon"></li>
<li class="latent-icon"></li>
</ul>
</li>
</ul>
@@ -474,8 +474,8 @@ var formation = new Formation(teamsCount,5);
<li class="latent-icon"></li>
<li class="latent-icon"></li>
<li class="latent-icon"></li>
<li class="latent-icon latent-lock"></li>
<li class="latent-icon latent-lock"></li>
<li class="latent-icon"></li>
<li class="latent-icon"></li>
</ul>
</li>
<li class="latents latents-3">
@@ -486,8 +486,8 @@ var formation = new Formation(teamsCount,5);
<li class="latent-icon"></li>
<li class="latent-icon"></li>
<li class="latent-icon"></li>
<li class="latent-icon latent-lock"></li>
<li class="latent-icon latent-lock"></li>
<li class="latent-icon"></li>
<li class="latent-icon"></li>
</ul>
</li>
<li class="latents latents-4">
@@ -498,8 +498,8 @@ var formation = new Formation(teamsCount,5);
<li class="latent-icon"></li>
<li class="latent-icon"></li>
<li class="latent-icon"></li>
<li class="latent-icon latent-lock"></li>
<li class="latent-icon latent-lock"></li>
<li class="latent-icon"></li>
<li class="latent-icon"></li>
</ul>
</li>
<li class="latents latents-5">
@@ -510,8 +510,8 @@ var formation = new Formation(teamsCount,5);
<li class="latent-icon"></li>
<li class="latent-icon"></li>
<li class="latent-icon"></li>
<li class="latent-icon latent-lock"></li>
<li class="latent-icon latent-lock"></li>
<li class="latent-icon"></li>
<li class="latent-icon"></li>
</ul>
</li>
<li class="latents latents-1">
@@ -522,8 +522,8 @@ var formation = new Formation(teamsCount,5);
<li class="latent-icon"></li>
<li class="latent-icon"></li>
<li class="latent-icon"></li>
<li class="latent-icon latent-lock"></li>
<li class="latent-icon latent-lock"></li>
<li class="latent-icon"></li>
<li class="latent-icon"></li>
</ul>
</li>
</ul>
@@ -1126,16 +1126,16 @@ var formation = new Formation(teamsCount,5);
</div>
<div class="setting-row row-mon-latent">
<!--潜在觉醒-->
<div class="m-latent-ul-div">
<ul class="m-latent-ul">
<div class="latent-ul-div">
<ul class="latent-ul">
<li class="latent-icon" value="0"></li>
<li class="latent-icon" value="1"></li>
<li class="latent-icon" value="2"></li>
<li class="latent-icon" value="3"></li>
<li class="latent-icon" value="4"></li>
<li class="latent-icon" value="5"></li>
<li class="latent-icon latent-lock" value="6"></li>
<li class="latent-icon latent-lock" value="7"></li>
<li class="latent-icon" value="6"></li>
<li class="latent-icon" value="7"></li>
</ul>
</div>
<details>


+ 16
- 23
script.js View File

@@ -3472,12 +3472,12 @@ function initialize(event) {
};

//潜觉
const monEditLatentUl = settingBox.querySelector(".m-latent-ul");
const monEditLatentUl = settingBox.querySelector(".row-mon-latent .latent-ul");
const monEditLatents = Array.from(monEditLatentUl.querySelectorAll("li"));
const monEditLatentAllowableUl = settingBox.querySelector(".m-latent-allowable-ul");
const monEditLatentsAllowable = Array.from(monEditLatentAllowableUl.querySelectorAll("li"));
editBox.refreshLatent = function(latent, monid) {//刷新潜觉
refreshLatent(latent, monid, monEditLatents);
refreshLatent(latent, monid, monEditLatentUl);
};

const rowSkill = settingBox.querySelector(".row-mon-skill");
@@ -3968,8 +3968,7 @@ function changeid(mon, monDom, latentDom, assist) {
if (latent.length < 1) {
latentDom.classList.add(className_displayNone);
} else {
const latentDoms = Array.from(latentDom.querySelectorAll("li"));
refreshLatent(latent, mon.id, latentDoms, {sort:true});
refreshLatent(latent, mon.id, latentDom, {sort:true});
latentDom.classList.remove(className_displayNone);
}
toggleDomClassName(level > 110, "level-super-break", latentDom); //切换潜觉为120级
@@ -4024,32 +4023,26 @@ function changeid(mon, monDom, latentDom, assist) {
parentNode.appendChild(fragment);
}
//刷新潜觉
function refreshLatent(latent, monid, iconArr, option) {
function refreshLatent(latents, monid, latentsNode, option) {
const maxLatentCount = getMaxLatentCount(monid); //最大潜觉数量
latent = latent.concat();
if (option?.sort) latent.sort((a, b) => latentUseHole(b) - latentUseHole(a));
const iconArr = latentsNode.querySelectorAll('.latent-icon');
latentsNode.classList.toggle("block-8", maxLatentCount>6);
latents = latents.concat();
if (option?.sort) latents.sort((a, b) => latentUseHole(b) - latentUseHole(a));
let latentIndex = 0,
usedHoleN = 0;
for (let ai = 0; ai < iconArr.length; ai++) {
const icon = iconArr[ai];
if (latent[latentIndex] != undefined && ai >= usedHoleN && ai < maxLatentCount) //有潜觉
const icon = iconArr[ai], latent = latents[latentIndex];
if (latent != undefined && ai >= usedHoleN && ai < maxLatentCount) //有潜觉
{
icon.setAttribute("data-latent-icon", latent[latentIndex]);
icon.classList.remove(className_displayNone);
usedHoleN += latentUseHole(latent[latentIndex]);
const thisHoleN = latentUseHole(latent);
icon.setAttribute("data-latent-icon", latent);
icon.setAttribute("data-latent-hole", thisHoleN);
usedHoleN += thisHoleN;
latentIndex++;
} else if (ai < usedHoleN) //多格潜觉后方隐藏
{
icon.classList.add(className_displayNone);
icon.removeAttribute("data-latent-icon");
} else if (ai < maxLatentCount) //没有使用的空格觉醒
{
icon.classList.remove(className_displayNone);
icon.removeAttribute("data-latent-icon");
} else //不需要显示的部分
{
icon.classList.add(className_displayNone);
} else {
icon.removeAttribute("data-latent-icon");
icon.removeAttribute("data-latent-hole");
}
}
};


+ 16
- 16
solo.html View File

@@ -235,8 +235,8 @@ var formation = new Formation(teamsCount,6);
<li class="latent-icon"></li>
<li class="latent-icon"></li>
<li class="latent-icon"></li>
<li class="latent-icon latent-lock"></li>
<li class="latent-icon latent-lock"></li>
<li class="latent-icon"></li>
<li class="latent-icon"></li>
</ul>
</li>
<li class="latents latents-2">
@@ -247,8 +247,8 @@ var formation = new Formation(teamsCount,6);
<li class="latent-icon"></li>
<li class="latent-icon"></li>
<li class="latent-icon"></li>
<li class="latent-icon latent-lock"></li>
<li class="latent-icon latent-lock"></li>
<li class="latent-icon"></li>
<li class="latent-icon"></li>
</ul>
</li>
<li class="latents latents-3">
@@ -259,8 +259,8 @@ var formation = new Formation(teamsCount,6);
<li class="latent-icon"></li>
<li class="latent-icon"></li>
<li class="latent-icon"></li>
<li class="latent-icon latent-lock"></li>
<li class="latent-icon latent-lock"></li>
<li class="latent-icon"></li>
<li class="latent-icon"></li>
</ul>
</li>
<li class="latents latents-4">
@@ -271,8 +271,8 @@ var formation = new Formation(teamsCount,6);
<li class="latent-icon"></li>
<li class="latent-icon"></li>
<li class="latent-icon"></li>
<li class="latent-icon latent-lock"></li>
<li class="latent-icon latent-lock"></li>
<li class="latent-icon"></li>
<li class="latent-icon"></li>
</ul>
</li>
<li class="latents latents-5">
@@ -283,8 +283,8 @@ var formation = new Formation(teamsCount,6);
<li class="latent-icon"></li>
<li class="latent-icon"></li>
<li class="latent-icon"></li>
<li class="latent-icon latent-lock"></li>
<li class="latent-icon latent-lock"></li>
<li class="latent-icon"></li>
<li class="latent-icon"></li>
</ul>
</li>
<li class="latents latents-6">
@@ -295,8 +295,8 @@ var formation = new Formation(teamsCount,6);
<li class="latent-icon"></li>
<li class="latent-icon"></li>
<li class="latent-icon"></li>
<li class="latent-icon latent-lock"></li>
<li class="latent-icon latent-lock"></li>
<li class="latent-icon"></li>
<li class="latent-icon"></li>
</ul>
</li>
</ul>
@@ -994,16 +994,16 @@ var formation = new Formation(teamsCount,6);
</div>
<div class="setting-row row-mon-latent">
<!--潜在觉醒-->
<div class="m-latent-ul-div">
<ul class="m-latent-ul">
<div class="latent-ul-div">
<ul class="latent-ul">
<li class="latent-icon" value="0"></li>
<li class="latent-icon" value="1"></li>
<li class="latent-icon" value="2"></li>
<li class="latent-icon" value="3"></li>
<li class="latent-icon" value="4"></li>
<li class="latent-icon" value="5"></li>
<li class="latent-icon latent-lock" value="6"></li>
<li class="latent-icon latent-lock" value="7"></li>
<li class="latent-icon" value="6"></li>
<li class="latent-icon" value="7"></li>
</ul>
</div>
<details>


+ 11
- 191
style-monsterimages.css View File

@@ -769,19 +769,21 @@ icon.type
}
/*潜在觉醒*/
.latent-icon{
display:inline-block;
text-align: center;
background: rgba(33,28,21,0.5);
border: 2px ridge rgba(82,82,60,0.5);
box-shadow:inset 0 2px 1px -1px rgba(0,0,0,0.5);
border-radius: 5px;
box-sizing: border-box;
box-shadow:inset 0 2px 1px -1px rgba(0,0,0,0.5);
display: flex;
flex-direction: row;
justify-content: center; /*从下往上*/
align-items: center; /*靠右*/
}
.latent-icon::before,
.latent-icon::after /*目前x1.5暂时只有日服支持，美服支持后删除.ds-ja*/
{
display: inline-block;
margin: -2px;
display: inline-block;
width: 32px;
height: 32px;
background-image: url(images/icon-latent.png);
@@ -790,67 +792,18 @@ icon.type
.latent-icon::before{
content: "";
}
.latent-icon.latent-lock::before{
/*7格开始没有id的，显示锁*/
.latent-ul>.latent-icon:nth-of-type(n+7):not([data-latent-icon]):before {
background-position-x: -32px;
}
.latent-icon[data-latent-icon]{
background: linear-gradient(#4499EE 33%, #2277EE 80%);
border-color: #CCEEFF;
box-shadow: black 1px 1px 1px;
box-shadow: black 1px 1px 1px,black 0px 1px 2px inset;
}
.latent-icon[data-latent-icon]::before{
background-position-x: 0;
}
/* 2格的 潜觉 */
.m-latent-ul .latent-icon[data-latent-icon='12'],
.m-latent-ul .latent-icon[data-latent-icon='16'],
.m-latent-ul .latent-icon[data-latent-icon='17'],
.m-latent-ul .latent-icon[data-latent-icon='18'],
.m-latent-ul .latent-icon[data-latent-icon='19'],
.m-latent-ul .latent-icon[data-latent-icon='20'],
.m-latent-ul .latent-icon[data-latent-icon='21'],
.m-latent-ul .latent-icon[data-latent-icon='22'],
.m-latent-ul .latent-icon[data-latent-icon='23'],
.m-latent-ul .latent-icon[data-latent-icon='24'],
.m-latent-ul .latent-icon[data-latent-icon='25'],
.m-latent-ul .latent-icon[data-latent-icon='26'],
.m-latent-ul .latent-icon[data-latent-icon='27'],
.m-latent-ul .latent-icon[data-latent-icon='28'],
.m-latent-ul .latent-icon[data-latent-icon='29'],
.m-latent-ul .latent-icon[data-latent-icon='30'],
.m-latent-ul .latent-icon[data-latent-icon='31'],
.m-latent-ul .latent-icon[data-latent-icon='32'],
.m-latent-ul .latent-icon[data-latent-icon='33'],
.m-latent-ul .latent-icon[data-latent-icon='34'],
.m-latent-ul .latent-icon[data-latent-icon='35'],
.m-latent-ul .latent-icon[data-latent-icon='36'],
.m-latent-ul .latent-icon[data-latent-icon='43'],
.m-latent-ul .latent-icon[data-latent-icon='44'],
.m-latent-ul .latent-icon[data-latent-icon='45']
{
width: 76px;
}
/* 特殊的 三维潜觉 */
.m-latent-ul .latent-icon[data-latent-icon='12']::before
{
width: 76px;
background-position-x: -32px;
}
/* 6格的 潜觉宽度 */
.m-latent-ul .latent-icon[data-latent-icon='13'],
.m-latent-ul .latent-icon[data-latent-icon='14'],
.m-latent-ul .latent-icon[data-latent-icon='15'],
.m-latent-ul .latent-icon[data-latent-icon='37'],
.m-latent-ul .latent-icon[data-latent-icon='38'],
.m-latent-ul .latent-icon[data-latent-icon='39'],
.m-latent-ul .latent-icon[data-latent-icon='40'],
.m-latent-ul .latent-icon[data-latent-icon='41'],
.m-latent-ul .latent-icon[data-latent-icon='42'],
.m-latent-ul .latent-icon[data-latent-icon='46'],
.m-latent-ul .latent-icon[data-latent-icon='47']
{
width: 252px;
}
.latent-icon[data-latent-icon='1']::before{ /*HP*/
background-position-y: calc(-32px * 1);
}
@@ -992,147 +945,14 @@ icon.type
.latent-icon[data-latent-icon='47']::before{ /*心L大SB*/
background-position-y: calc(-32px * 47);
}
/* 队伍界面2格的 潜觉 */
.team-latents .latent-ul .latent-icon[data-latent-icon='12'],
.team-latents .latent-ul .latent-icon[data-latent-icon='16'],
.team-latents .latent-ul .latent-icon[data-latent-icon='17'],
.team-latents .latent-ul .latent-icon[data-latent-icon='18'],
.team-latents .latent-ul .latent-icon[data-latent-icon='19'],
.team-latents .latent-ul .latent-icon[data-latent-icon='20'],
.team-latents .latent-ul .latent-icon[data-latent-icon='21'],
.team-latents .latent-ul .latent-icon[data-latent-icon='22'],
.team-latents .latent-ul .latent-icon[data-latent-icon='23'],
.team-latents .latent-ul .latent-icon[data-latent-icon='24'],
.team-latents .latent-ul .latent-icon[data-latent-icon='25'],
.team-latents .latent-ul .latent-icon[data-latent-icon='26'],
.team-latents .latent-ul .latent-icon[data-latent-icon='27'],
.team-latents .latent-ul .latent-icon[data-latent-icon='28'],
.team-latents .latent-ul .latent-icon[data-latent-icon='29'],
.team-latents .latent-ul .latent-icon[data-latent-icon='30'],
.team-latents .latent-ul .latent-icon[data-latent-icon='31'],
.team-latents .latent-ul .latent-icon[data-latent-icon='32'],
.team-latents .latent-ul .latent-icon[data-latent-icon='33'],
.team-latents .latent-ul .latent-icon[data-latent-icon='34'],
.team-latents .latent-ul .latent-icon[data-latent-icon='35'],
.team-latents .latent-ul .latent-icon[data-latent-icon='36'],
.team-latents .latent-ul .latent-icon[data-latent-icon='43'],
.team-latents .latent-ul .latent-icon[data-latent-icon='44'],
.team-latents .latent-ul .latent-icon[data-latent-icon='45']
{
width: 70px;
}
/* 队伍界面特殊的 三维潜觉 */
.team-latents .latent-ul .latent-icon[data-latent-icon='12']::before
.latent-ul-div .latent-ul .latent-icon[data-latent-icon='12']::before
{
transform: scale(0.9);
margin-left: -5px;
width: 76px;
background-position-x: -32px;
}
/* 队伍界面，6格的潜觉宽度 */
.team-latents .latent-ul .latent-icon[data-latent-icon='13'],
.team-latents .latent-ul .latent-icon[data-latent-icon='14'],
.team-latents .latent-ul .latent-icon[data-latent-icon='15'],
.team-latents .latent-ul .latent-icon[data-latent-icon='37'],
.team-latents .latent-ul .latent-icon[data-latent-icon='38'],
.team-latents .latent-ul .latent-icon[data-latent-icon='39'],
.team-latents .latent-ul .latent-icon[data-latent-icon='40'],
.team-latents .latent-ul .latent-icon[data-latent-icon='41'],
.team-latents .latent-ul .latent-icon[data-latent-icon='42'],
.team-latents .latent-ul .latent-icon[data-latent-icon='46'],
.team-latents .latent-ul .latent-icon[data-latent-icon='47']
{
width: 146px;
margin-left: 0px;
border-radius: 5px 5px 5px 0;
}
/*6格大觉醒，队伍界面显示行为改造*/
.team-latents .latent-ul .latent-icon[data-latent-icon='13']::before,
.team-latents .latent-ul .latent-icon[data-latent-icon='14']::before,
.team-latents .latent-ul .latent-icon[data-latent-icon='15']::before,
.team-latents .latent-ul .latent-icon[data-latent-icon='37']::before,
.team-latents .latent-ul .latent-icon[data-latent-icon='38']::before,
.team-latents .latent-ul .latent-icon[data-latent-icon='39']::before,
.team-latents .latent-ul .latent-icon[data-latent-icon='40']::before,
.team-latents .latent-ul .latent-icon[data-latent-icon='41']::before,
.team-latents .latent-ul .latent-icon[data-latent-icon='42']::before,
.team-latents .latent-ul .latent-icon[data-latent-icon='46']::before,
.team-latents .latent-ul .latent-icon[data-latent-icon='47']::before
{
background: none;
}
.team-latents .latent-icon[data-latent-icon='13']+.latent-icon,
.team-latents .latent-icon[data-latent-icon='14']+.latent-icon,
.team-latents .latent-icon[data-latent-icon='15']+.latent-icon,
.team-latents .latent-icon[data-latent-icon='37']+.latent-icon,
.team-latents .latent-icon[data-latent-icon='38']+.latent-icon,
.team-latents .latent-icon[data-latent-icon='39']+.latent-icon,
.team-latents .latent-icon[data-latent-icon='40']+.latent-icon,
.team-latents .latent-icon[data-latent-icon='41']+.latent-icon,
.team-latents .latent-icon[data-latent-icon='42']+.latent-icon,
.team-latents .latent-icon[data-latent-icon='46']+.latent-icon,
.team-latents .latent-icon[data-latent-icon='47']+.latent-icon
{
width: 70px;
height: 39px;
margin-left: 0;
margin-right: 6px;
margin-bottom: -9px;
display: inline-block !important;
background: linear-gradient(#2277EE , #1155AA 80%);
border-color: #CCEEFF;
box-shadow: black 1px 1px 1px;
border-radius: 0 0 5px 5px;
border-top: none;
transform: translatey(-9px);
}
.team-latents .latent-icon[data-latent-icon='13']+.latent-icon::before,
.team-latents .latent-icon[data-latent-icon='14']+.latent-icon::before,
.team-latents .latent-icon[data-latent-icon='15']+.latent-icon::before,
.team-latents .latent-icon[data-latent-icon='37']+.latent-icon::before,
.team-latents .latent-icon[data-latent-icon='38']+.latent-icon::before,
.team-latents .latent-icon[data-latent-icon='39']+.latent-icon::before,
.team-latents .latent-icon[data-latent-icon='40']+.latent-icon::before,
.team-latents .latent-icon[data-latent-icon='41']+.latent-icon::before,
.team-latents .latent-icon[data-latent-icon='42']+.latent-icon::before,
.team-latents .latent-icon[data-latent-icon='46']+.latent-icon::before,
.team-latents .latent-icon[data-latent-icon='47']+.latent-icon::before
{
transform: scale(1.54) translateY(-7px);
}
.team-latents .latent-icon[data-latent-icon='13']+.latent-icon::before{
background-position-y: calc(-32px * 13);
}
.team-latents .latent-icon[data-latent-icon='14']+.latent-icon::before{
background-position-y: calc(-32px * 14);
}
.team-latents .latent-icon[data-latent-icon='15']+.latent-icon::before{
background-position-y: calc(-32px * 15);
}
.team-latents .latent-icon[data-latent-icon='37']+.latent-icon::before{
background-position-y: calc(-32px * 37);
}
.team-latents .latent-icon[data-latent-icon='38']+.latent-icon::before{
background-position-y: calc(-32px * 38);
}
.team-latents .latent-icon[data-latent-icon='39']+.latent-icon::before{
background-position-y: calc(-32px * 39);
}
.team-latents .latent-icon[data-latent-icon='40']+.latent-icon::before{
background-position-y: calc(-32px * 40);
}
.team-latents .latent-icon[data-latent-icon='41']+.latent-icon::before{
background-position-y: calc(-32px * 41);
}
.team-latents .latent-icon[data-latent-icon='42']+.latent-icon::before{
background-position-y: calc(-32px * 42);
}
.team-latents .latent-icon[data-latent-icon='46']+.latent-icon::before{
background-position-y: calc(-32px * 46);
}
.team-latents .latent-icon[data-latent-icon='47']+.latent-icon::before{
background-position-y: calc(-32px * 47);
}
/* 额外有 x1.5 的 6格觉醒 */
.level-super-break .latent-icon[data-latent-icon='13']::after,
.level-super-break .latent-icon[data-latent-icon='37']::after,


+ 62
- 22
style.css View File

@@ -1067,7 +1067,6 @@ icon.inflicts::after
vertical-align: top;
}
.team-latents .latent-ul{
font-size: 0;
width: 152px;
transform: scale(0.65);
transform-origin: left top;
@@ -1076,11 +1075,28 @@ icon.inflicts::after
/*margin: calc(-64px * (1 - 0.63) / 2 + 3px) calc((108px - 152px) / 2);*/
/*-152 * (1 - 0.63) + 108 - 152 * 0.63，化简为108 - 152*/
min-height: 47px; /* 为了防止只有一层6格大潜觉的时候，被缩减太多的问题*/
/*潜在觉醒布局，使用 gird*/
display: inline-grid;
grid-template-columns: repeat(4, 32px);
grid-auto-rows: 32px;
grid-gap: 3px 6px;
}
.team-latents .latent-icon
.team-latents .latent-icon[data-latent-hole="1"] {
grid-column: span 1;
}
.team-latents .latent-icon[data-latent-hole="2"] {
grid-column: span 1;
grid-row: span 2;
}
.team-latents .latent-icon[data-latent-hole="6"] {
grid-column: span 3;
grid-row: span 2;
}
.team-latents .latent-icon[data-latent-hole="6"]::before,
.team-latents .latent-icon[data-latent-hole="6"]::after
{
margin-top: 3px;
margin-right: 6px;
transform: scale(1.54);
margin: calc(32px / 4);
}

/*队长的边框*/
@@ -2293,42 +2309,66 @@ icon.inflicts::after
}
/*.edit-box .setting-box .row-mon-latent::before{
content: "▼潜在觉醒";
}*/
.m-latent-ul-div{
}
*/
.row-mon-latent .latent-ul-div{
text-align: center;
}
.m-latent-ul{
font-size: 0;
display: inline-block;
.row-mon-latent .latent-ul{
background: rgba(88,75,56,154);
border: 2px ridge #94733f;
border-radius: 7px;
padding: 2px;
padding: 3px;
/*潜在觉醒布局，使用 gird*/
display: inline-grid;
grid-template-columns: repeat(6, 32px);
grid-auto-rows: 32px;
grid-gap: 12px;
}
.row-mon-latent .latent-ul.block-8 {
grid-template-columns: repeat(8, 32px);
}
/*没有block-8的，7格开始不显示*/
.latent-ul:not(.block-8)>.latent-icon:nth-of-type(n+7) {
display: none;
}
.m-latent-ul .latent-icon{
margin-left: 12px;
.row-mon-latent .latent-icon[data-latent-hole="1"] {
grid-column: span 1;
}
.m-latent-ul .latent-icon:first-of-type{
margin-left: 0;
.row-mon-latent .latent-icon[data-latent-hole="2"] {
grid-column: span 2;
}
.row-mon-latent .latent-icon[data-latent-hole="6"] {
grid-column: span 6;
}
.latent-icon[data-latent-hole="2"]+.latent-icon,
.latent-icon[data-latent-hole="6"]+.latent-icon,
.latent-icon[data-latent-hole="6"]+.latent-icon+.latent-icon,
.latent-icon[data-latent-hole="6"]+.latent-icon+.latent-icon+.latent-icon,
.latent-icon[data-latent-hole="6"]+.latent-icon+.latent-icon+.latent-icon+.latent-icon,
.latent-icon[data-latent-hole="6"]+.latent-icon+.latent-icon+.latent-icon+.latent-icon+.latent-icon
{
display: none;
}

.m-latent-allowable-ul{
margin-top: 5px;
font-size: 0;
margin-bottom: 5px;
display: grid;
grid-template-columns: repeat(auto-fill, 32px);
grid-auto-rows: 32px;
grid-gap: 4px;
}
.m-latent-allowable-ul .latent-icon{
margin-right: 4px;
margin-bottom: 4px;
grid-column: span 1;
grid-row: span 1;
}
.m-latent-allowable-ul .latent-icon:last-of-type{
margin-right: unset;
}

/*没有打觉醒的空格，没有手指*/
.m-latent-ul .latent-icon{
cursor: default;
}
.m-latent-allowable-ul .latent-icon,
.m-latent-ul .latent-icon[data-latent-icon]{
.latent-ul .latent-icon[data-latent-icon]{
cursor: pointer;
}
/*不允许使用的潜觉，不是手指，半透明，灰度*/


+ 40
- 40
triple.html View File

@@ -250,8 +250,8 @@ var formation = new Formation(teamsCount,6);
<li class="latent-icon"></li>
<li class="latent-icon"></li>
<li class="latent-icon"></li>
<li class="latent-icon latent-lock"></li>
<li class="latent-icon latent-lock"></li>
<li class="latent-icon"></li>
<li class="latent-icon"></li>
</ul>
</li>
<li class="latents latents-2">
@@ -262,8 +262,8 @@ var formation = new Formation(teamsCount,6);
<li class="latent-icon"></li>
<li class="latent-icon"></li>
<li class="latent-icon"></li>
<li class="latent-icon latent-lock"></li>
<li class="latent-icon latent-lock"></li>
<li class="latent-icon"></li>
<li class="latent-icon"></li>
</ul>
</li>
<li class="latents latents-3">
@@ -274,8 +274,8 @@ var formation = new Formation(teamsCount,6);
<li class="latent-icon"></li>
<li class="latent-icon"></li>
<li class="latent-icon"></li>
<li class="latent-icon latent-lock"></li>
<li class="latent-icon latent-lock"></li>
<li class="latent-icon"></li>
<li class="latent-icon"></li>
</ul>
</li>
<li class="latents latents-4">
@@ -286,8 +286,8 @@ var formation = new Formation(teamsCount,6);
<li class="latent-icon"></li>
<li class="latent-icon"></li>
<li class="latent-icon"></li>
<li class="latent-icon latent-lock"></li>
<li class="latent-icon latent-lock"></li>
<li class="latent-icon"></li>
<li class="latent-icon"></li>
</ul>
</li>
<li class="latents latents-5">
@@ -298,8 +298,8 @@ var formation = new Formation(teamsCount,6);
<li class="latent-icon"></li>
<li class="latent-icon"></li>
<li class="latent-icon"></li>
<li class="latent-icon latent-lock"></li>
<li class="latent-icon latent-lock"></li>
<li class="latent-icon"></li>
<li class="latent-icon"></li>
</ul>
</li>
<li class="latents latents-6">
@@ -310,8 +310,8 @@ var formation = new Formation(teamsCount,6);
<li class="latent-icon"></li>
<li class="latent-icon"></li>
<li class="latent-icon"></li>
<li class="latent-icon latent-lock"></li>
<li class="latent-icon latent-lock"></li>
<li class="latent-icon"></li>
<li class="latent-icon"></li>
</ul>
</li>
</ul>
@@ -729,8 +729,8 @@ var formation = new Formation(teamsCount,6);
<li class="latent-icon"></li>
<li class="latent-icon"></li>
<li class="latent-icon"></li>
<li class="latent-icon latent-lock"></li>
<li class="latent-icon latent-lock"></li>
<li class="latent-icon"></li>
<li class="latent-icon"></li>
</ul>
</li>
<li class="latents latents-2">
@@ -741,8 +741,8 @@ var formation = new Formation(teamsCount,6);
<li class="latent-icon"></li>
<li class="latent-icon"></li>
<li class="latent-icon"></li>
<li class="latent-icon latent-lock"></li>
<li class="latent-icon latent-lock"></li>
<li class="latent-icon"></li>
<li class="latent-icon"></li>
</ul>
</li>
<li class="latents latents-3">
@@ -753,8 +753,8 @@ var formation = new Formation(teamsCount,6);
<li class="latent-icon"></li>
<li class="latent-icon"></li>
<li class="latent-icon"></li>
<li class="latent-icon latent-lock"></li>
<li class="latent-icon latent-lock"></li>
<li class="latent-icon"></li>
<li class="latent-icon"></li>
</ul>
</li>
<li class="latents latents-4">
@@ -765,8 +765,8 @@ var formation = new Formation(teamsCount,6);
<li class="latent-icon"></li>
<li class="latent-icon"></li>
<li class="latent-icon"></li>
<li class="latent-icon latent-lock"></li>
<li class="latent-icon latent-lock"></li>
<li class="latent-icon"></li>
<li class="latent-icon"></li>
</ul>
</li>
<li class="latents latents-5">
@@ -777,8 +777,8 @@ var formation = new Formation(teamsCount,6);
<li class="latent-icon"></li>
<li class="latent-icon"></li>
<li class="latent-icon"></li>
<li class="latent-icon latent-lock"></li>
<li class="latent-icon latent-lock"></li>
<li class="latent-icon"></li>
<li class="latent-icon"></li>
</ul>
</li>
<li class="latents latents-6">
@@ -789,8 +789,8 @@ var formation = new Formation(teamsCount,6);
<li class="latent-icon"></li>
<li class="latent-icon"></li>
<li class="latent-icon"></li>
<li class="latent-icon latent-lock"></li>
<li class="latent-icon latent-lock"></li>
<li class="latent-icon"></li>
<li class="latent-icon"></li>
</ul>
</li>
</ul>
@@ -1208,8 +1208,8 @@ var formation = new Formation(teamsCount,6);
<li class="latent-icon"></li>
<li class="latent-icon"></li>
<li class="latent-icon"></li>
<li class="latent-icon latent-lock"></li>
<li class="latent-icon latent-lock"></li>
<li class="latent-icon"></li>
<li class="latent-icon"></li>
</ul>
</li>
<li class="latents latents-2">
@@ -1220,8 +1220,8 @@ var formation = new Formation(teamsCount,6);
<li class="latent-icon"></li>
<li class="latent-icon"></li>
<li class="latent-icon"></li>
<li class="latent-icon latent-lock"></li>
<li class="latent-icon latent-lock"></li>
<li class="latent-icon"></li>
<li class="latent-icon"></li>
</ul>
</li>
<li class="latents latents-3">
@@ -1232,8 +1232,8 @@ var formation = new Formation(teamsCount,6);
<li class="latent-icon"></li>
<li class="latent-icon"></li>
<li class="latent-icon"></li>
<li class="latent-icon latent-lock"></li>
<li class="latent-icon latent-lock"></li>
<li class="latent-icon"></li>
<li class="latent-icon"></li>
</ul>
</li>
<li class="latents latents-4">
@@ -1244,8 +1244,8 @@ var formation = new Formation(teamsCount,6);
<li class="latent-icon"></li>
<li class="latent-icon"></li>
<li class="latent-icon"></li>
<li class="latent-icon latent-lock"></li>
<li class="latent-icon latent-lock"></li>
<li class="latent-icon"></li>
<li class="latent-icon"></li>
</ul>
</li>
<li class="latents latents-5">
@@ -1256,8 +1256,8 @@ var formation = new Formation(teamsCount,6);
<li class="latent-icon"></li>
<li class="latent-icon"></li>
<li class="latent-icon"></li>
<li class="latent-icon latent-lock"></li>
<li class="latent-icon latent-lock"></li>
<li class="latent-icon"></li>
<li class="latent-icon"></li>
</ul>
</li>
<li class="latents latents-6">
@@ -1268,8 +1268,8 @@ var formation = new Formation(teamsCount,6);
<li class="latent-icon"></li>
<li class="latent-icon"></li>
<li class="latent-icon"></li>
<li class="latent-icon latent-lock"></li>
<li class="latent-icon latent-lock"></li>
<li class="latent-icon"></li>
<li class="latent-icon"></li>
</ul>
</li>
</ul>
@@ -1967,16 +1967,16 @@ var formation = new Formation(teamsCount,6);
</div>
<div class="setting-row row-mon-latent">
<!--潜在觉醒-->
<div class="m-latent-ul-div">
<ul class="m-latent-ul">
<div class="latent-ul-div">
<ul class="latent-ul">
<li class="latent-icon" value="0"></li>
<li class="latent-icon" value="1"></li>
<li class="latent-icon" value="2"></li>
<li class="latent-icon" value="3"></li>
<li class="latent-icon" value="4"></li>
<li class="latent-icon" value="5"></li>
<li class="latent-icon latent-lock" value="6"></li>
<li class="latent-icon latent-lock" value="7"></li>
<li class="latent-icon" value="6"></li>
<li class="latent-icon" value="7"></li>
</ul>
</div>
<details>


Write Preview
Loading…
Cancel
Save