添加进化树的显示
This commit is contained in:
parent
e929304bee
commit
f26d728a0b
|
|
@ -7,3 +7,4 @@
|
|||
/monsters-info/official-API/*-mdatadl.json
|
||||
/monsters-info/official-API/*-shop_item.json
|
||||
/sound/voice/variables.txt
|
||||
/fonts/.font-spider
|
||||
|
|
|
|||
|
|
@ -100,4 +100,6 @@ Please refer to existing files.
|
|||
# 使用开源软件 | Open source software used
|
||||
* [pad-rikuu](//github.com/kiootic/pad-rikuu) //Parse data
|
||||
* [html2canvas](//github.com/niklasvh/html2canvas) //Capture Image
|
||||
* [aaa](//github.com/jy4340132/aaa) //Play voice(ADPCM wav)
|
||||
* [aaa](//github.com/jy4340132/aaa) //Play voice(ADPCM wav)
|
||||
* [Zpix (最像素)](//github.com/SolidZORO/zpix-pixel-font) //Pixel Font
|
||||
* [font-spider](//github.com/aui/font-spider) //Compression Font file
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 107 KiB After Width: | Height: | Size: 56 KiB |
|
|
@ -0,0 +1,2 @@
|
|||
:: font-spider : https://github.com/aui/font-spider
|
||||
cmd /K font-spider font-spider.html
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style type="text/css">
|
||||
/*声明 WebFont*/
|
||||
@font-face {
|
||||
font-family: 'source';
|
||||
src: url(zpix.eot);
|
||||
src:
|
||||
url(zpix.eot?#font-spider) format('embedded-opentype'),
|
||||
url(zpix.woff2) format('woff2'),
|
||||
url(zpix.woff) format('woff'),
|
||||
url(zpix.ttf) format('truetype'),
|
||||
url(zpix.svg) format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/*使用指定字体*/
|
||||
body {
|
||||
font-family: 'source';
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
像素进化
|
||||
像素進化
|
||||
Pixel Evo
|
||||
ドット進化
|
||||
도트 진화
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.9 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
4
help.md
4
help.md
|
|
@ -9,8 +9,8 @@ Use back to undo the last edit.
|
|||
* 拖拽怪物头像即可快速交换位置或复制怪物，也支持手机触屏。
|
||||
Drag monster avatars to quickly swap positions or copy monster, also supports mobile touch screen.
|
||||
|
||||
* 可以在编辑界面的怪物ID输入**怪物名称**或**标签**来搜索怪物。
|
||||
You can search for monsters by entering the **Monster Name** or **Tags** in the monster ID of the editing interface.
|
||||
* 可以在编辑界面的怪物ID输入**怪物名称**或**标签**来搜索怪物。（键入回车以执行）
|
||||
You can search for monsters by entering the **Monster Name** or **Tags** in the monster ID of the editing interface.(Type Enter to execute)
|
||||
|
||||
点击**系列ID**或**标签**，可搜索该系列
|
||||
Clisk the **Series ID** or **Tags** to search for series.
|
||||
|
|
|
|||
|
|
@ -370,11 +370,87 @@
|
|||
{
|
||||
content: "Search By Tags";
|
||||
}
|
||||
.dialog-close::before
|
||||
.dialog-close::before,
|
||||
.mask-close::before
|
||||
{
|
||||
content: "Close";
|
||||
}
|
||||
.dialog .dialog-content .additional-string::before
|
||||
{
|
||||
content: "Other Languages";
|
||||
}
|
||||
.open-evolutionary-tree::before
|
||||
{
|
||||
content: "⛓️Evo Search";
|
||||
}
|
||||
.base .evo-type::before,
|
||||
.base .evo-type::after
|
||||
{
|
||||
content: "Base";
|
||||
}
|
||||
.evolution .evo-type::before,
|
||||
.evolution .evo-type::after
|
||||
{
|
||||
content: "Evolution";
|
||||
}
|
||||
.ult-evo .evo-type::before,
|
||||
.ult-evo .evo-type::after
|
||||
{
|
||||
content: "Ult Evo";
|
||||
}
|
||||
.reincarnation .evo-type::before,
|
||||
.reincarnation .evo-type::after
|
||||
{
|
||||
content: "Reincarnation";
|
||||
}
|
||||
.pixel-evo .evo-type::before,
|
||||
.pixel-evo .evo-type::after
|
||||
{
|
||||
content: "Pixel Evo";
|
||||
}
|
||||
.assist-evo .evo-type::before,
|
||||
.assist-evo .evo-type::after
|
||||
{
|
||||
content: "Assist Evo";
|
||||
}
|
||||
.super-reincarnation .evo-type::before,
|
||||
.super-reincarnation .evo-type::after
|
||||
{
|
||||
content: "Super Reincarnation";
|
||||
}
|
||||
.super-ult-evo .evo-type::before,
|
||||
.super-ult-evo .evo-type::after
|
||||
{
|
||||
content: "Super Ult Evo";
|
||||
}
|
||||
|
||||
.evolution .evo-type
|
||||
{
|
||||
transform: scaleX(0.90);
|
||||
margin: calc(-100px * (1 - 0.90) / 2);
|
||||
}
|
||||
.pixel-evo .evo-type
|
||||
{
|
||||
transform: scaleX(0.95);
|
||||
margin: calc(-100px * (1 - 0.95) / 2);
|
||||
}
|
||||
.super-ult-evo .evo-type
|
||||
{
|
||||
transform: scaleX(0.65);
|
||||
margin: calc(-100px * (1 - 0.63) / 2);
|
||||
}
|
||||
.reincarnation .evo-type
|
||||
{
|
||||
transform: scaleX(0.60);
|
||||
margin: calc(-100px * (1 - 0.55) / 2);
|
||||
}
|
||||
.assist-evo .evo-type
|
||||
{
|
||||
transform: scaleX(0.85);
|
||||
margin: calc(-100px * (1 - 0.85) / 2);
|
||||
}
|
||||
.super-reincarnation .evo-type
|
||||
{
|
||||
transform: scaleX(0.43);
|
||||
margin: calc(-100px * 1 / 2);
|
||||
}
|
||||
|
|
@ -362,11 +362,66 @@
|
|||
{
|
||||
content: "タグで検索";
|
||||
}
|
||||
.dialog-close::before
|
||||
.dialog-close::before,
|
||||
.mask-close::before
|
||||
{
|
||||
content: "閉じる";
|
||||
}
|
||||
.dialog .dialog-content .additional-string::before
|
||||
{
|
||||
content: "他の言語";
|
||||
}
|
||||
.open-evolutionary-tree::before
|
||||
{
|
||||
content: "⛓️進化サーチ";
|
||||
}
|
||||
.base .evo-type::before,
|
||||
.base .evo-type::after
|
||||
{
|
||||
content: "ベース";
|
||||
}
|
||||
.evolution .evo-type::before,
|
||||
.evolution .evo-type::after
|
||||
{
|
||||
content: "進化";
|
||||
}
|
||||
.ult-evo .evo-type::before,
|
||||
.ult-evo .evo-type::after
|
||||
{
|
||||
content: "究極進化";
|
||||
}
|
||||
.reincarnation .evo-type::before,
|
||||
.reincarnation .evo-type::after
|
||||
{
|
||||
content: "転生進化";
|
||||
}
|
||||
.pixel-evo .evo-type::before,
|
||||
.pixel-evo .evo-type::after
|
||||
{
|
||||
content: "ドット進化";
|
||||
}
|
||||
.assist-evo .evo-type::before,
|
||||
.assist-evo .evo-type::after
|
||||
{
|
||||
content: "アシスト進化";
|
||||
}
|
||||
.super-reincarnation .evo-type::before,
|
||||
.super-reincarnation .evo-type::after
|
||||
{
|
||||
content: "超転生進化";
|
||||
}
|
||||
.super-ult-evo .evo-type::before,
|
||||
.super-ult-evo .evo-type::after
|
||||
{
|
||||
content: "超究極進化";
|
||||
}
|
||||
.pixel-evo .evo-type
|
||||
{
|
||||
transform: scaleX(0.90);
|
||||
margin: calc(-100px * (1 - 0.90) / 2);
|
||||
}
|
||||
.assist-evo .evo-type
|
||||
{
|
||||
transform: scaleX(0.80);
|
||||
margin: calc(-100px * (1 - 0.80) / 2);
|
||||
}
|
||||
|
|
@ -359,11 +359,60 @@
|
|||
{
|
||||
content: "태그로 검색";
|
||||
}
|
||||
.dialog-close::before
|
||||
.dialog-close::before,
|
||||
.mask-close::before
|
||||
{
|
||||
content: "가까이";
|
||||
}
|
||||
.dialog .dialog-content .additional-string::before
|
||||
{
|
||||
content: "다른 언어";
|
||||
}
|
||||
.open-evolutionary-tree::before
|
||||
{
|
||||
content: "⛓️진화 계통";
|
||||
}
|
||||
.base .evo-type::before,
|
||||
.base .evo-type::after
|
||||
{
|
||||
content: "베이스";
|
||||
}
|
||||
.evolution .evo-type::before,
|
||||
.evolution .evo-type::after
|
||||
{
|
||||
content: "진 화";
|
||||
}
|
||||
.ult-evo .evo-type::before,
|
||||
.ult-evo .evo-type::after
|
||||
{
|
||||
content: "궁극진화";
|
||||
}
|
||||
.reincarnation .evo-type::before,
|
||||
.reincarnation .evo-type::after
|
||||
{
|
||||
content: "환생 진와";
|
||||
}
|
||||
.pixel-evo .evo-type::before,
|
||||
.pixel-evo .evo-type::after
|
||||
{
|
||||
content: "도트 진화";
|
||||
}
|
||||
.assist-evo .evo-type::before,
|
||||
.assist-evo .evo-type::after
|
||||
{
|
||||
content: "어시스트 진화";
|
||||
}
|
||||
.super-reincarnation .evo-type::before,
|
||||
.super-reincarnation .evo-type::after
|
||||
{
|
||||
content: "초 환색진화";
|
||||
}
|
||||
.super-ult-evo .evo-type::before,
|
||||
.super-ult-evo .evo-type::after
|
||||
{
|
||||
content: "초 궁극진화";
|
||||
}
|
||||
.evo-type
|
||||
{
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
@ -1,7 +1,8 @@
|
|||
@charset "utf-8";
|
||||
@import "zh.css";
|
||||
.edit-box .monsterinfo-box .monster-name,
|
||||
.edit-box .skill-box .skill-datail
|
||||
.edit-box .skill-box .skill-datail,
|
||||
.evo-panel-right .monster-name
|
||||
{
|
||||
font-family: "Microsoft Yahei","Source Han Sans",Arial, Helvetica, sans-serif;
|
||||
font-weight: bold;
|
||||
|
|
|
|||
|
|
@ -365,11 +365,56 @@
|
|||
{
|
||||
content: "以標簽搜索";
|
||||
}
|
||||
.dialog-close::before
|
||||
.dialog-close::before,
|
||||
.mask-close::before
|
||||
{
|
||||
content: "關閉";
|
||||
}
|
||||
.dialog .dialog-content .additional-string::before
|
||||
{
|
||||
content: "其他語言";
|
||||
}
|
||||
.open-evolutionary-tree::before
|
||||
{
|
||||
content: "⛓️進化鏈";
|
||||
}
|
||||
.base .evo-type::before,
|
||||
.base .evo-type::after
|
||||
{
|
||||
content: "基礎";
|
||||
}
|
||||
.evolution .evo-type::before,
|
||||
.evolution .evo-type::after
|
||||
{
|
||||
content: "進化";
|
||||
}
|
||||
.ult-evo .evo-type::before,
|
||||
.ult-evo .evo-type::after
|
||||
{
|
||||
content: "究極進化";
|
||||
}
|
||||
.reincarnation .evo-type::before,
|
||||
.reincarnation .evo-type::after
|
||||
{
|
||||
content: "轉生進化";
|
||||
}
|
||||
.pixel-evo .evo-type::before,
|
||||
.pixel-evo .evo-type::after
|
||||
{
|
||||
content: "像素進化";
|
||||
}
|
||||
.assist-evo .evo-type::before,
|
||||
.assist-evo .evo-type::after
|
||||
{
|
||||
content: "輔助進化";
|
||||
}
|
||||
.super-reincarnation .evo-type::before,
|
||||
.super-reincarnation .evo-type::after
|
||||
{
|
||||
content: "超轉生進化";
|
||||
}
|
||||
.super-ult-evo .evo-type::before,
|
||||
.super-ult-evo .evo-type::after
|
||||
{
|
||||
content: "超究極進化";
|
||||
}
|
||||
|
|
@ -365,11 +365,56 @@
|
|||
{
|
||||
content: "以標簽搜索";
|
||||
}
|
||||
.dialog-close::before
|
||||
.dialog-close::before,
|
||||
.mask-close::before
|
||||
{
|
||||
content: "关闭";
|
||||
}
|
||||
.dialog .dialog-content .additional-string::before
|
||||
{
|
||||
content: "其他語言";
|
||||
}
|
||||
.open-evolutionary-tree::before
|
||||
{
|
||||
content: "⛓️进化链";
|
||||
}
|
||||
.base .evo-type::before,
|
||||
.base .evo-type::after
|
||||
{
|
||||
content: "基礎";
|
||||
}
|
||||
.evolution .evo-type::before,
|
||||
.evolution .evo-type::after
|
||||
{
|
||||
content: "進化";
|
||||
}
|
||||
.ult-evo .evo-type::before,
|
||||
.ult-evo .evo-type::after
|
||||
{
|
||||
content: "究極進化";
|
||||
}
|
||||
.reincarnation .evo-type::before,
|
||||
.reincarnation .evo-type::after
|
||||
{
|
||||
content: "轉生進化";
|
||||
}
|
||||
.pixel-evo .evo-type::before,
|
||||
.pixel-evo .evo-type::after
|
||||
{
|
||||
content: "像素進化";
|
||||
}
|
||||
.assist-evo .evo-type::before,
|
||||
.assist-evo .evo-type::after
|
||||
{
|
||||
content: "輔助進化";
|
||||
}
|
||||
.super-reincarnation .evo-type::before,
|
||||
.super-reincarnation .evo-type::after
|
||||
{
|
||||
content: "超轉生進化";
|
||||
}
|
||||
.super-ult-evo .evo-type::before,
|
||||
.super-ult-evo .evo-type::after
|
||||
{
|
||||
content: "超究極進化";
|
||||
}
|
||||
|
|
@ -721,7 +721,7 @@ var formation = new Formation(teamsCount,5);
|
|||
<div class="setting-row row-mon-id">
|
||||
<button class="open-evolutionary-tree"></button>
|
||||
<button class="open-search"></button><!--搜索怪物按钮-->
|
||||
<input type="search" class="m-id" list="monsters-name-list"/><button class="search-by-string"></button>
|
||||
<input type="search" class="m-id" list="monsters-name-list"/>
|
||||
<datalist id="monsters-name-list"></datalist>
|
||||
<ul class="evo-card-list"></ul>
|
||||
</div>
|
||||
|
|
@ -871,11 +871,11 @@ var formation = new Formation(teamsCount,5);
|
|||
<div class="dialog dialog-search-string display-none">
|
||||
<div class="dialog-title"></div>
|
||||
<div class="dialog-content"></div>
|
||||
<div class="dialog-control"><button class="dialog-close"></button></div>
|
||||
<div class="dialog-control"><button class="dialog-close brown-button"></button></div>
|
||||
</div>
|
||||
<div class="mask mask-evolutionary-tree display-none">
|
||||
<button class="mask-close brown-button"></button>
|
||||
<div class="mask-content"></div>
|
||||
<button class="mask-close"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button-box">
|
||||
|
|
|
|||
|
|
@ -396,7 +396,7 @@ function calculateAbility_max(id,solo, teamsCount)
|
|||
//搜索卡片用
|
||||
function searchCards(cards,attr1,attr2,fixMainColor,types,typeAndOr,rares,awokens,sawokens,equalAk,incSawoken)
|
||||
{
|
||||
let cardsRange = cards.concat(); //这里需要复制一份原来的数组，不然若无筛选，后面的排序会改变初始Cards
|
||||
let cardsRange = cards.slice(1); //这里需要复制一份原来的数组，不然若无筛选，后面的排序会改变初始Cards
|
||||
//属性
|
||||
if (attr1 != null && attr1 === attr2 || //主副属性一致并不为空
|
||||
(attr1 === 6 && attr2 === -1)) //主副属性都为“无”
|
||||
|
|
|
|||
128
script.js
128
script.js
|
|
@ -121,6 +121,7 @@ DBOpenRequest.onupgradeneeded = function(event) {
|
|||
|
||||
}
|
||||
}*/
|
||||
|
||||
//队员基本的留空
|
||||
var Member = function() {
|
||||
this.id = 0;
|
||||
|
|
@ -307,6 +308,97 @@ Formation.prototype.loadObj = function(f) {
|
|||
if (f.b)
|
||||
this.teams[0][2] = f.b; //原来模式的徽章
|
||||
};
|
||||
|
||||
//进化树
|
||||
class EvoTree
|
||||
{
|
||||
constructor(mid, parent = null)
|
||||
{
|
||||
const _this = this;
|
||||
if (parent == null)
|
||||
{
|
||||
mid = Cards[mid].evoRootId;
|
||||
}
|
||||
const card = Cards[mid];
|
||||
|
||||
this.id = mid;
|
||||
this.card = card;
|
||||
if (parent == null)
|
||||
{
|
||||
this.evoType = "Base";
|
||||
}else
|
||||
{
|
||||
if (card.evoMaterials.includes(3826)) //像素进化
|
||||
{
|
||||
this.evoType = "Pixel Evo";
|
||||
}else if (card.awakenings.includes(49)) //武器
|
||||
{
|
||||
this.evoType = "Assist Evo";
|
||||
}else if (card.isUltEvo) //究进
|
||||
{
|
||||
if (parent.card.isUltEvo) //超究进
|
||||
{
|
||||
this.evoType = "Super Ult Evo";
|
||||
}else
|
||||
{
|
||||
this.evoType = "Ult Evo";
|
||||
}
|
||||
}else
|
||||
{
|
||||
if (parent.card.isUltEvo) //转生
|
||||
{
|
||||
this.evoType = "Reincarnation";
|
||||
}else if(parent.evoType == "Reincarnation")
|
||||
{
|
||||
this.evoType = "Super Reincarnation";
|
||||
}else
|
||||
{
|
||||
this.evoType = "Evolution";
|
||||
}
|
||||
}
|
||||
}
|
||||
this.children = Cards.filter(scard=>scard.evoBaseId == mid && scard.id != mid).map(scard=>new EvoTree(scard.id,_this));
|
||||
};
|
||||
toListNode()
|
||||
{
|
||||
const createCardHead = editBox.createCardHead;
|
||||
const tBox = document.createElement("div");
|
||||
tBox.className = "evo-box";
|
||||
const evoPanel = tBox.appendChild(document.createElement("div"));
|
||||
evoPanel.className = "evo-panel " + this.evoType.toLowerCase().replace(/\s/g,"-");
|
||||
const evotPanel_L = evoPanel.appendChild(document.createElement("div"));
|
||||
evotPanel_L.className = "evo-panel-left";
|
||||
const evotPanel_R = evoPanel.appendChild(document.createElement("div"));
|
||||
evotPanel_R.className = "evo-panel-right";
|
||||
|
||||
const evoTypeDiv = evotPanel_L.appendChild(document.createElement("div"));
|
||||
evoTypeDiv.className = "evo-type-div";
|
||||
const evoType = evoTypeDiv.appendChild(document.createElement("span"));
|
||||
evoType.className = "evo-type";
|
||||
const monHead = evotPanel_L.appendChild(createCardHead(this.id));
|
||||
monHead.className = "monster-head";
|
||||
|
||||
const monName = evotPanel_R.appendChild(document.createElement("div"));
|
||||
monName.className = "monster-name";
|
||||
monName.textContent = returnMonsterNameArr(this.card, currentLanguage.searchlist, currentDataSource.code)[0];
|
||||
|
||||
const evotMaterials = evotPanel_R.appendChild(document.createElement("ul"));
|
||||
evotMaterials.className = "evo-materials";
|
||||
this.card.evoMaterials.forEach(mid=>{
|
||||
//const li = evotMaterials.appendChild(document.createElement("li"));
|
||||
evotMaterials.appendChild(createCardHead(mid));
|
||||
});
|
||||
|
||||
const evoSubEvo = tBox.appendChild(document.createElement("ul"));
|
||||
evoSubEvo.className = "evo-subevo";
|
||||
this.children.forEach(subEvo=>{
|
||||
const li = evoSubEvo.appendChild(document.createElement("li"));
|
||||
li.appendChild(subEvo.toListNode());
|
||||
});
|
||||
return tBox;
|
||||
};
|
||||
}
|
||||
|
||||
//切换通用的切换className显示的函数
|
||||
function toggleDomClassName(checkBox, className, checkedAdd = true, dom = document.body) {
|
||||
if (!checkBox) return;
|
||||
|
|
@ -1156,6 +1248,29 @@ function initialize() {
|
|||
return cli;
|
||||
};
|
||||
|
||||
//显示进化树
|
||||
const evolutionaryTreeMask = settingBox.querySelector(".mask-evolutionary-tree");
|
||||
|
||||
evolutionaryTreeMask.show = function(monid)
|
||||
{
|
||||
const maskContent = this.querySelector(".mask-content");
|
||||
const fragment = document.createDocumentFragment();
|
||||
const evoTree = new EvoTree(monid);
|
||||
|
||||
fragment.appendChild(evoTree.toListNode());
|
||||
maskContent.innerHTML = "";
|
||||
maskContent.appendChild(fragment);
|
||||
this.classList.remove(className_displayNone);
|
||||
}
|
||||
evolutionaryTreeMask.close = function()
|
||||
{
|
||||
this.classList.add(className_displayNone);
|
||||
}
|
||||
const evolutionaryTreeMask_Close = evolutionaryTreeMask.querySelector(".mask-close");
|
||||
evolutionaryTreeMask_Close.onclick = function(){evolutionaryTreeMask.close();};
|
||||
const openEvolutionaryTree = settingBox.querySelector(".row-mon-id .open-evolutionary-tree");
|
||||
openEvolutionaryTree.onclick = function() {evolutionaryTreeMask.show(editBox.mid)};
|
||||
|
||||
const searchOpen = settingBox.querySelector(".row-mon-id .open-search");
|
||||
searchOpen.onclick = function() {
|
||||
s_includeSuperAwoken.onchange();
|
||||
|
|
@ -1525,7 +1640,6 @@ function initialize() {
|
|||
|
||||
//id搜索
|
||||
const monstersID = settingBox.querySelector(".row-mon-id .m-id");
|
||||
const btnSearchByString = settingBox.querySelector(".row-mon-id .search-by-string");
|
||||
monstersID.onchange = function(e)
|
||||
{
|
||||
if (/^\d+$/.test(this.value)) {
|
||||
|
|
@ -1559,18 +1673,16 @@ function initialize() {
|
|||
}
|
||||
monstersID.oninput = monstersID.onchange;
|
||||
monstersID.onkeydown = function(e) {
|
||||
//如果键入回车，则执行字符串搜索
|
||||
if (e.key == "Enter")
|
||||
{
|
||||
if (!/^\d+$/.test(this.value) && this.value.length > 0) //如果不是数字，且字符串长度大于0，则进行字符串搜索
|
||||
{
|
||||
btnSearchByString.onclick();
|
||||
searchByString(monstersID.value);
|
||||
}
|
||||
}
|
||||
}
|
||||
//字符串搜索
|
||||
btnSearchByString.onclick = function() {
|
||||
searchByString(monstersID.value);
|
||||
};
|
||||
|
||||
//觉醒
|
||||
const monEditAwokensRow = settingBox.querySelector(".row-mon-awoken");
|
||||
const awokenCountLabel = monEditAwokensRow.querySelector(".awoken-count");
|
||||
|
|
@ -2371,7 +2483,7 @@ function editBoxChangeMonId(id) {
|
|||
}
|
||||
|
||||
const evoCardUl = settingBox.querySelector(".row-mon-id .evo-card-list");
|
||||
evoCardUl.style.display = "none";
|
||||
evoCardUl.classList.add(className_displayNone);
|
||||
evoCardUl.innerHTML = ""; //据说直接清空HTML性能更好
|
||||
|
||||
const evoLinkCardsIdArray = Cards.filter(m=>m.evoRootId == card.evoRootId).map(m=>m.id); //筛选出相同进化链的
|
||||
|
|
@ -2388,7 +2500,7 @@ function editBoxChangeMonId(id) {
|
|||
fragment.appendChild(cli);
|
||||
});
|
||||
evoCardUl.appendChild(fragment);
|
||||
evoCardUl.style.display = "block";
|
||||
evoCardUl.classList.remove(className_displayNone);
|
||||
openEvolutionaryTree.classList.remove(className_displayNone);
|
||||
}else
|
||||
{
|
||||
|
|
|
|||
|
|
@ -671,7 +671,7 @@ var formation = new Formation(teamsCount,6);
|
|||
<div class="setting-row row-mon-id">
|
||||
<button class="open-evolutionary-tree"></button>
|
||||
<button class="open-search"></button><!--搜索怪物按钮-->
|
||||
<input type="search" class="m-id" list="monsters-name-list"/><button class="search-by-string"></button>
|
||||
<input type="search" class="m-id" list="monsters-name-list"/>
|
||||
<datalist id="monsters-name-list"></datalist>
|
||||
<ul class="evo-card-list"></ul>
|
||||
</div>
|
||||
|
|
@ -821,11 +821,11 @@ var formation = new Formation(teamsCount,6);
|
|||
<div class="dialog dialog-search-string display-none">
|
||||
<div class="dialog-title"></div>
|
||||
<div class="dialog-content"></div>
|
||||
<div class="dialog-control"><button class="dialog-close"></button></div>
|
||||
<div class="dialog-control"><button class="dialog-close brown-button"></button></div>
|
||||
</div>
|
||||
<div class="mask mask-evolutionary-tree display-none">
|
||||
<button class="mask-close brown-button"></button>
|
||||
<div class="mask-content"></div>
|
||||
<button class="mask-close"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button-box">
|
||||
|
|
|
|||
386
style.css
386
style.css
|
|
@ -9,6 +9,17 @@
|
|||
url("fonts/FOT-KurokaneStd-EB.eot") format('embedded-opentype'),
|
||||
url("fonts/FOT-KurokaneStd-EB.svg") format('svg');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'zpix';
|
||||
src:
|
||||
url("fonts/zpix.woff2") format('woff2'),
|
||||
url("fonts/zpix.woff") format('woff'),
|
||||
url("fonts/zpix.ttf") format('truetype'),
|
||||
url("fonts/zpix.eot?#font-spider") format('embedded-opentype'),
|
||||
url("fonts/zpix.svg") format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@keyframes loading-animate{
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
|
|
@ -764,7 +775,6 @@ ul{
|
|||
color: white;
|
||||
text-shadow: black 2px 2px 0;
|
||||
min-height: 100px;
|
||||
margin: 5px 0;
|
||||
background-image: linear-gradient(#798421,#394914);
|
||||
border-top: #B1BB39 solid 4px;
|
||||
border-bottom: #72941D ridge 7px;
|
||||
|
|
@ -773,7 +783,7 @@ ul{
|
|||
}
|
||||
.edit-box .search-box,
|
||||
.edit-box .setting-box{
|
||||
padding: 0 10px;
|
||||
padding: 10px;
|
||||
position: relative;
|
||||
}
|
||||
/*.edit-box .setting-box .row-mon-id::before{
|
||||
|
|
@ -783,18 +793,8 @@ ul{
|
|||
box-sizing: border-box;
|
||||
font-size: 25px;
|
||||
height: 40px;
|
||||
width: calc(100% - 50px);
|
||||
}
|
||||
.edit-box .setting-box .row-mon-id .search-by-string{
|
||||
box-sizing: border-box;
|
||||
font-size: 25px;
|
||||
height: 40px;
|
||||
width: 45px;
|
||||
margin-left: 5px;
|
||||
padding: 0;
|
||||
}
|
||||
.edit-box .setting-box .row-mon-id .search-by-string::before{
|
||||
content: "🔍";
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
.edit-box .setting-box .row-mon-id .unable-monster{
|
||||
pointer-events: none;
|
||||
|
|
@ -827,7 +827,8 @@ ul{
|
|||
}
|
||||
.edit-box .setting-box .row-mon-id .evo-card-list .monster,
|
||||
.edit-box .search-box .search-mon-list .monster,
|
||||
.detail-mon .monster
|
||||
.detail-mon .monster,
|
||||
.mask-evolutionary-tree .evo-panel-left>.monster-head>.monster
|
||||
{
|
||||
float: none;
|
||||
transform: scale(0.75);
|
||||
|
|
@ -1883,7 +1884,6 @@ ul{
|
|||
.edit-box .button-box{
|
||||
border-top: black solid 3px;
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
margin-top: 10px;
|
||||
padding: 5px;
|
||||
height: 50px;
|
||||
}
|
||||
|
|
@ -2115,15 +2115,6 @@ ul{
|
|||
text-align: center;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.dialog button
|
||||
{
|
||||
cursor: pointer;
|
||||
transition: transform 0.1s;
|
||||
}
|
||||
.dialog button:active
|
||||
{
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.dialog .dialog-content .additional-string
|
||||
{
|
||||
border-top: 2px solid white;
|
||||
|
|
@ -2138,14 +2129,20 @@ ul{
|
|||
text-align: center;
|
||||
margin-top:10px;
|
||||
}
|
||||
.dialog .dialog-control button
|
||||
.brown-button
|
||||
{
|
||||
background-image: linear-gradient(to bottom,#C38E5F,#2F2008);
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
padding: 2px;
|
||||
cursor: pointer;
|
||||
transition: transform 0.1s;
|
||||
}
|
||||
.dialog .dialog-control button::before
|
||||
.brown-button:active
|
||||
{
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.brown-button::before
|
||||
{
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -2203,10 +2200,337 @@ ul{
|
|||
box-sizing: border-box;
|
||||
width: calc(100% - 50px * 1);
|
||||
}
|
||||
.open-evolutionary-tree
|
||||
{
|
||||
}
|
||||
.open-evolutionary-tree::before
|
||||
|
||||
/*.open-evolutionary-tree::before
|
||||
{
|
||||
content: "⛓️进化链";
|
||||
}*/
|
||||
|
||||
.mask-evolutionary-tree
|
||||
{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: rgba(0,0,0,0.8);
|
||||
}
|
||||
.mask-content
|
||||
{
|
||||
text-align: center;
|
||||
}
|
||||
.evo-box
|
||||
{
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
}
|
||||
.evo-panel,
|
||||
.evo-panel-left,
|
||||
.evo-panel-right
|
||||
{
|
||||
display: inline-block;
|
||||
}
|
||||
.mask-evolutionary-tree .evo-panel-left>.monster-head
|
||||
{
|
||||
display: inline-block;
|
||||
}
|
||||
.evo-materials>li
|
||||
{
|
||||
display: inline-block;
|
||||
}
|
||||
.mask-evolutionary-tree .evo-materials .monster
|
||||
{
|
||||
transform: scale(0.60);
|
||||
margin: calc(-100px * (1 - 0.60) / 2);
|
||||
}
|
||||
.mask-evolutionary-tree .evo-panel-left>.monster-head>.monster .id
|
||||
{
|
||||
bottom: 5px;
|
||||
font-size: 20px;
|
||||
}
|
||||
.mask-evolutionary-tree .evo-materials .monster .id
|
||||
{
|
||||
bottom: 5px;
|
||||
font-size: 22px;
|
||||
}
|
||||
.evo-panel
|
||||
{
|
||||
border:black 2px solid;
|
||||
border-radius: 7px;
|
||||
}
|
||||
.evo-panel-left,
|
||||
.evo-panel-right
|
||||
{
|
||||
border:#D19635 2px solid;
|
||||
border-radius: 4px;
|
||||
height: 100px;
|
||||
vertical-align: top;
|
||||
}
|
||||
.evo-panel-left
|
||||
{
|
||||
border-top-right-radius: unset;
|
||||
border-bottom-right-radius: unset;
|
||||
border-right: none;
|
||||
background-image: linear-gradient(#A16928, #5F3D16);
|
||||
padding: 0 2px;
|
||||
text-align: center;
|
||||
}
|
||||
.evo-panel-right
|
||||
{
|
||||
border-top-left-radius: unset;
|
||||
border-bottom-left-radius: unset;
|
||||
border-left: none;
|
||||
background-image: url(images/slate.svg);
|
||||
}
|
||||
.evo-panel-right .monster-name
|
||||
{
|
||||
font-family: var(--game-font-family);
|
||||
font-size: 15px;
|
||||
line-height: 15px;
|
||||
background: #42341F;
|
||||
border: 2px inset #F4F18E;
|
||||
border-radius: 5px;
|
||||
margin: 4px;
|
||||
padding: 5px;
|
||||
}
|
||||
.evo-materials
|
||||
{
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
.evo-materials .null .monster
|
||||
{
|
||||
opacity: 0.5;
|
||||
}
|
||||
.evo-materials>li
|
||||
{
|
||||
margin: 1px;
|
||||
}
|
||||
.evo-subevo
|
||||
{
|
||||
padding-left: 35px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
.evo-subevo>li
|
||||
{
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.evo-subevo>li::before
|
||||
{
|
||||
content:' ';
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:-20px;
|
||||
width:15px;
|
||||
height:100%;
|
||||
border-left:3px solid #E88230;
|
||||
}
|
||||
.evo-subevo>li::after
|
||||
{
|
||||
content:' ';
|
||||
position:absolute;
|
||||
top:43px;
|
||||
left:-10px;
|
||||
width:0;
|
||||
height:0;
|
||||
border-top: 8px solid transparent;
|
||||
border-left: 10px solid #FFEE71;
|
||||
border-bottom: 8px solid transparent;
|
||||
}
|
||||
.evo-subevo>li:last-child::before
|
||||
{
|
||||
border-bottom: 3px solid #F3B750;
|
||||
border-bottom-left-radius: 8px;
|
||||
height:50px;
|
||||
}
|
||||
.evo-subevo>li:last-child>.evo-box::before
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
.evo-subevo>li>.evo-box::before
|
||||
{
|
||||
content:' ';
|
||||
position:absolute;
|
||||
top:50px;
|
||||
left:-20px;
|
||||
width:18px;
|
||||
border:none;
|
||||
border-top:3px solid #E88230;
|
||||
|
||||
}
|
||||
|
||||
.evo-panel-left .evo-type
|
||||
{
|
||||
font-family: var(--game-font-family);
|
||||
font-size: 15px;
|
||||
line-height: 15px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
.evo-panel-left .evo-type::before,
|
||||
.evo-panel-left .evo-type::after
|
||||
{
|
||||
}
|
||||
.evo-panel-left .evo-type::after
|
||||
{
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
font-family: var(--game-font-family);
|
||||
font-size: 15px;
|
||||
line-height: 15px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
.evo-panel-left .evo-type::before
|
||||
{
|
||||
/*text-shadow: black 1px 1px 0,black -1px 1px 0,black 1px -1px 0,black -1px -1px 0;*/
|
||||
-webkit-text-stroke: 3px black;
|
||||
text-stroke: 3px black;
|
||||
}
|
||||
|
||||
/*.base .evo-type::before,
|
||||
.base .evo-type::after
|
||||
{
|
||||
content: "基礎";
|
||||
}
|
||||
.evolution .evo-type::before,
|
||||
.evolution .evo-type::after
|
||||
{
|
||||
content: "進化";
|
||||
}
|
||||
.ult-evo .evo-type::before,
|
||||
.ult-evo .evo-type::after
|
||||
{
|
||||
content: "究極進化";
|
||||
}
|
||||
.reincarnation .evo-type::before,
|
||||
.reincarnation .evo-type::after
|
||||
{
|
||||
content: "轉生進化";
|
||||
}
|
||||
.pixel-evo .evo-type::before,
|
||||
.pixel-evo .evo-type::after
|
||||
{
|
||||
content: "像素進化";
|
||||
font-family: "zpix";
|
||||
font-weight: bold;
|
||||
}
|
||||
.assist-evo .evo-type::before,
|
||||
.assist-evo .evo-type::after
|
||||
{
|
||||
content: "輔助進化";
|
||||
}
|
||||
.super-reincarnation .evo-type::before,
|
||||
.super-reincarnation .evo-type::after
|
||||
{
|
||||
content: "超轉生進化";
|
||||
}
|
||||
.super-ult-evo .evo-type::before,
|
||||
.super-ult-evo .evo-type::after
|
||||
{
|
||||
content: "超究極進化";
|
||||
}*/
|
||||
.pixel-evo .evo-type::before,
|
||||
.pixel-evo .evo-type::after
|
||||
{
|
||||
font-family: "zpix";
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.base .evo-type::after
|
||||
{ /*基礎*/
|
||||
background-image: linear-gradient(#FFFFBB, #FFFF88);
|
||||
}
|
||||
.base
|
||||
{
|
||||
background-color: #DCB476;
|
||||
}
|
||||
.base .evo-panel-right
|
||||
{
|
||||
border-color: #FDC686;
|
||||
}
|
||||
.evolution .evo-type::after
|
||||
{ /*進化*/
|
||||
background-image: linear-gradient(#CCFF33, #88EE22);
|
||||
}
|
||||
.evolution
|
||||
{
|
||||
background-color: #C49669;
|
||||
}
|
||||
.evolution .evo-panel-right
|
||||
{
|
||||
border-color: #DEAA76;
|
||||
}
|
||||
.ult-evo .evo-type::after
|
||||
{ /*究極進化*/
|
||||
background-image: linear-gradient(#FFFFAA 20%,#BB8800, #FFFFAA 80%);
|
||||
}
|
||||
.ult-evo
|
||||
{
|
||||
background-color: #DDD844;
|
||||
}
|
||||
.ult-evo .evo-panel-right
|
||||
{
|
||||
border-color: #FEF84F;
|
||||
}
|
||||
.reincarnation .evo-type::after
|
||||
{ /*轉生進化*/
|
||||
background-image: linear-gradient(#00CCCC, #EEFFFF 50%,#AA8800 51%,#FFFFAA);
|
||||
}
|
||||
.reincarnation
|
||||
{
|
||||
background-color: #579889;
|
||||
}
|
||||
.reincarnation .evo-panel-right
|
||||
{
|
||||
border-color: #78B89A;
|
||||
}
|
||||
.pixel-evo .evo-type::after
|
||||
{ /*像素進化*/
|
||||
background-image: linear-gradient(#FFDD77 33%, #EEBB33 34%, #EEBB33 66%, #BB7700 67%);
|
||||
}
|
||||
.pixel-evo
|
||||
{
|
||||
background-color: #B1AB94;
|
||||
}
|
||||
.pixel-evo .evo-panel-right
|
||||
{
|
||||
border-color: #CBC4AA;
|
||||
}
|
||||
.assist-evo .evo-type::after
|
||||
{ /*輔助進化*/
|
||||
background-image: linear-gradient(#AAFF66, #557700);
|
||||
}
|
||||
.assist-evo
|
||||
{
|
||||
background-color: #607F38;
|
||||
}
|
||||
.assist-evo .evo-panel-right
|
||||
{
|
||||
border-color: #6F9241;
|
||||
}
|
||||
.super-reincarnation .evo-type::after
|
||||
{ /*超轉生進化*/
|
||||
background-image: linear-gradient(#EE7700 ,#FFFF88 40%, #1155AA);
|
||||
}
|
||||
.super-reincarnation
|
||||
{
|
||||
background-color: #C15644;
|
||||
}
|
||||
.super-reincarnation .evo-panel-right
|
||||
{
|
||||
border-color: #DE634F;
|
||||
}
|
||||
.super-ult-evo .evo-type::after
|
||||
{ /*超究極進化*/
|
||||
background-image: linear-gradient(#553300,#FFCC00 45%, #FFFF99 55%, #771100);
|
||||
}
|
||||
.super-ult-evo
|
||||
{
|
||||
background-image: linear-gradient(#C1D515,#DD7003);
|
||||
}
|
||||
.super-ult-evo .evo-panel-right
|
||||
{
|
||||
border-color: #DBE721;
|
||||
}
|
||||
|
|
@ -1366,7 +1366,7 @@ var formation = new Formation(teamsCount,6);
|
|||
<div class="setting-row row-mon-id">
|
||||
<button class="open-evolutionary-tree"></button>
|
||||
<button class="open-search"></button><!--搜索怪物按钮-->
|
||||
<input type="search" class="m-id" list="monsters-name-list"/><button class="search-by-string"></button>
|
||||
<input type="search" class="m-id" list="monsters-name-list"/>
|
||||
<datalist id="monsters-name-list"></datalist>
|
||||
<ul class="evo-card-list"></ul>
|
||||
</div>
|
||||
|
|
@ -1516,11 +1516,11 @@ var formation = new Formation(teamsCount,6);
|
|||
<div class="dialog dialog-search-string display-none">
|
||||
<div class="dialog-title"></div>
|
||||
<div class="dialog-content"></div>
|
||||
<div class="dialog-control"><button class="dialog-close"></button></div>
|
||||
<div class="dialog-control"><button class="dialog-close brown-button"></button></div>
|
||||
</div>
|
||||
<div class="mask mask-evolutionary-tree display-none">
|
||||
<button class="mask-close brown-button"></button>
|
||||
<div class="mask-content"></div>
|
||||
<button class="mask-close"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button-box">
|
||||
|
|
|
|||
Loading…
Reference in New Issue