mapaler
/
PADDashFormation
1
0
Fork 1
Code Issues Pull Requests Projects Releases Wiki Activity

增加自定义HTML元素，PAD图标

This commit is contained in:
枫谷剑仙 2022-07-29 20:24:36 +08:00
parent 294a066510
commit 6ee46d556b
12 changed files with 230 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
style-card.css → css/card-avatar.css
View File

10
css/svg-icon.css Normal file
View File

@ -0,0 +1,10 @@
@charset "utf-8";
:host { /*控制 shadow DOM 的根元素*/
display: inline-block;
width: 32px;
height: 32px;
}
svg {
width: 100%;
height: 100%;
}

3
images/project file/build symble svgs.bat
View File

@ -1,4 +1,5 @@
@ECHO off
title 开始更新 SVG 图标
powershell -File "./build symble svgs.ps1"
::powershell -File "./build symble svgs.ps1"
node "build symble svgs.js"
PAUSE

17
images/project file/build symble svgs.js
View File

@ -3,6 +3,7 @@ const path = require('path');
const mime = require('mime'); //需要安装
const sizeOf = require('image-size'); //需要安装
const { DOMImplementation, XMLSerializer } = require('@xmldom/xmldom'); //需要安装
const xmlFormatter = require('xml-formatter');
const directory = './awokens';
const files = fs.readdirSync(directory);
@ -29,7 +30,8 @@ for (const file of files)
}
iconArr.sort((a,b)=>{
function nameNum(fileName){return parseInt(/^\d+/.exec(fileName)[0])}
return nameNum(a.fileName) - nameNum(b.fileName);
return (nameNum(a.fileName) - nameNum(b.fileName)) || //先判断数字
(a.fileName.length - b.fileName.length); //然后判断文件名长度
});
const svgNS = 'http://www.w3.org/2000/svg';
@ -41,7 +43,10 @@ for (const icon of iconArr)
{
console.log('正在处理 %s', icon.fileName);
const symbol = svg.createElement('symbol');
symbol.setAttribute('id', `awoken-${parseInt(path.parse(icon.fileName).name)}`);
const parseName = path.parse(icon.fileName);
const regRes = /^(\d+)(.*)$/ig.exec(parseName.name);
let aid = regRes ? `${parseInt(regRes[1])}${regRes[2]}` : parseName.name;
symbol.setAttribute('id', `awoken-${aid}`);
symbol.setAttribute('viewBox', `0 0 32 32`);
svg.documentElement.appendChild(symbol);
const image = svg.createElement('image');
@ -51,4 +56,10 @@ for (const icon of iconArr)
symbol.appendChild(image);
}
const serialized = new XMLSerializer().serializeToString(svg);
fs.writeFileSync('../icon-awoken.svg', serialized);
const formattedXml = xmlFormatter(serialized, {
indentation: '\t',
filter: (node) => node.type !== 'Comment',
collapseContent: true,
lineSeparator: '\n'
});
fs.writeFileSync('../icon-awoken.svg', formattedXml);

2
monsters-info/official-API/en-card.json
View File

File diff suppressed because one or more lines are too long

2
monsters-info/official-API/en-skill.json
View File

File diff suppressed because one or more lines are too long

2
monsters-info/official-API/ko-card.json
View File

File diff suppressed because one or more lines are too long

2
monsters-info/official-API/ko-skill.json
View File

File diff suppressed because one or more lines are too long

3
package.json
View File

@ -3,6 +3,7 @@
"@xmldom/xmldom": "^0.8.2",
"image-size": "^1.0.2",
"mime": "^3.0.0",
"opencc-js": "^1.0.4"
"opencc-js": "^1.0.4",
"xml-formatter": "^2.6.1"
}
}

188
script-custom_elements.js Normal file
View File

@ -0,0 +1,188 @@
const svgNS = "http://www.w3.org/2000/svg"; //svg用的命名空间
// Create a class for the element
class CardAvatar extends HTMLElement {
// Specify observed attributes so that
// attributeChangedCallback will work
static get observedAttributes() {
return ['iid'];
}
#iid = 0;
get iid() { this.#iid; }
/**
* @param {string | number} x
*/
set iid(x) {
//this.#iid = x; //在属性改变的内容里已经写入了
this.setAttribute('iid', x);
}
//#member = new Member();
/**
* @param {Member} m
*/
/*get member() {
return this.#member;
}*/
/**
* @param {Member} m
*/
/*set member(m) {
this.#member = m;
console.log("设定新的Member",m);
this.setAttribute('id', m.id);
}*/
constructor() {
// Always call super first in constructor
super();
// Create a shadow root
const shadow = this.attachShadow({mode: 'open'});
// Create some CSS to apply to the shadow dom
const linkElem = shadow.appendChild(document.createElement('link'));
linkElem.setAttribute('rel', 'stylesheet');
linkElem.setAttribute('href', 'css/card-avatar.css');
// Create spans
const wrapper = shadow.appendChild(document.createElement('a'));
wrapper.className = 'wrapper';
wrapper.target = '_blank';
const dAttr1 = wrapper.appendChild(document.createElement('div'));
dAttr1.className = 'attribute attribute-main';
const dAttr2 = wrapper.appendChild(document.createElement('div'));
dAttr2.className = 'attribute attribute-sub';
const dLeftTop = wrapper.appendChild(document.createElement('div'));
dLeftTop.className = "flex-box flex-left-top";
const dLeftBottom = wrapper.appendChild(document.createElement('div'));
dLeftBottom.className = "flex-box flex-left-bottom";
const dRightTop = wrapper.appendChild(document.createElement('div'));
dRightTop.className = "flex-box flex-right-top";
const dRightBottom = wrapper.appendChild(document.createElement('div'));
dRightBottom.className = "flex-box flex-right-bottom";
const dId = dLeftBottom.appendChild(document.createElement('div'));
dId.className = 'card-id';
const dLevel = dLeftBottom.appendChild(document.createElement('div'));
dLevel.className = 'level';
dLevel.textContent = "110";
const dEnhancement = dLeftTop.appendChild(document.createElement('div'));
dEnhancement.className = 'enhancement';
dEnhancement.textContent = "297";
const dActiveSkillCD = dRightBottom.appendChild(document.createElement('div'));
dActiveSkillCD.className = 'active-skill-cd';
dActiveSkillCD.textContent = "99";
}
connectedCallback() {
console.log('自定义标签添加到页面');
this.update();
}
attributeChangedCallback(name, oldValue, newValue) {
console.log('自定义标签属性改变', name, oldValue, newValue);
//if (name == 'id') this.#id = parseInt(this.getAttribute('id'));
if (name == 'iid') this.#iid = parseInt(newValue);
this.update();
}
update() {
//得到怪物ID
const id = this.#iid || 0;
this.iid = id;
const card = Cards[id] || Cards[0];
const dataSource = this.getAttribute('source') || currentDataSource.code;
const shadow = this.shadowRoot;
const wrapper = shadow.querySelector('.wrapper');
wrapper.href = currentLanguage.guideURL(id, card.name);
wrapper.style.backgroundImage = `url(images/cards_${dataSource.toLowerCase()}/CARDS_${Math.ceil(id / 100).toString().padStart(3,"0")}.PNG)`;
const idxInPage = (id - 1) % 100; //获取当前页面内的序号
wrapper.setAttribute("data-cards-pic-x", idxInPage % 10); //添加X方向序号
wrapper.setAttribute("data-cards-pic-y", Math.floor(idxInPage / 10)); //添加Y方向序号
const dAttr1 = wrapper.querySelector('.attribute-main');
dAttr1.setAttribute('data-attr', card.attrs[0]);
const dAttr2 = wrapper.querySelector('.attribute-sub');
dAttr2.setAttribute('data-attr', card.attrs[1]);
const dId = wrapper.querySelector('.card-id');
dId.setAttribute('data-id', id);
}
}
// Define the new element
customElements.define('card-avatar', CardAvatar);
class PadIcon extends HTMLElement {
// Specify observed attributes so that
// attributeChangedCallback will work
static get observedAttributes() {
return ['iid','type','lang'];
}
#iid = 0;
#type = "awoken";
get iid() { this.#iid; }
/**
* @param {string | number} x
*/
set iid(x) {
this.setAttribute('iid', x);
this.#iid = x;
}
get type() { this.#type; }
/**
* @param {string} x
*/
set type(x) {
this.setAttribute('type', x);
this.#type = x;
}
constructor() {
// Always call super first in constructor
super();
// Create a shadow root
const shadow = this.attachShadow({mode: 'open'});
// Create some CSS to apply to the shadow dom
const linkElem = shadow.appendChild(document.createElement('link'));
linkElem.setAttribute('rel', 'stylesheet');
linkElem.setAttribute('href', 'css/svg-icon.css');
const svg = document.implementation.createDocument(svgNS,'svg');
const use = svg.createElementNS(svgNS, 'use');
svg.documentElement.appendChild(use);
shadow.appendChild(svg.documentElement);
}
connectedCallback() { //自定义标签添加到页面
this.update();
}
attributeChangedCallback(name, oldValue, newValue) { //自定义标签属性改变
if (name == 'iid') this.#iid = parseInt(newValue);
if (name == 'type') this.#type = newValue;
this.update();
}
update() {
let iid = this.#iid || 0;
const type = this.#type;
const lang = this.getAttribute('lang') || currentLanguage.i18n;
const shadow = this.shadowRoot;
const use = shadow.querySelector('use');
switch (type) {
case 'awoken': {
if (/^(?:en|ko)/.test(lang) && [40,46,47,48].includes(iid)) iid += '-en'; //英文不一样的觉醒
if (/^(?:zh)/.test(lang) && [46,47].includes(iid)) iid += '-zh'; //中文不一样的觉醒
use.setAttribute("href",`images/icon-awoken.svg#awoken-${iid}`);
break;
}
case 'type':
case 'latent':
case 'badge':
case 'attr':
case 'orb':
case 'common':
case 'skill':
default:
break;
}
}
}
// Define the new element
customElements.define('pad-icon', PadIcon);

115
script-universal_function.js
View File

@ -120,121 +120,6 @@ Math.randomInteger = function(max, min = 0) {
return this.floor(this.random() * (max - min + 1) + min);
}
// Create a class for the element
class CardAvatar extends HTMLElement {
// Specify observed attributes so that
// attributeChangedCallback will work
static get observedAttributes() {
return ['id'];
}
/*#id = 0;
get id() {
return this.#id;
}*/
id = 0;
/**
* @param {string | number} x
*/
set id(x) {
this.setAttribute('id', x);
//this.#id = x; //在属性改变的内容里已经写入了
}
//#member = new Member();
/**
* @param {Member} m
*/
/*get member() {
return this.#member;
}*/
/**
* @param {Member} m
*/
/*set member(m) {
this.#member = m;
console.log("设定新的Member",m);
this.setAttribute('id', m.id);
}*/
constructor() {
// Always call super first in constructor
super();
// Create a shadow root
const shadow = this.attachShadow({mode: 'open'});
// Create some CSS to apply to the shadow dom
const linkElem = shadow.appendChild(document.createElement('link'));
linkElem.setAttribute('rel', 'stylesheet');
linkElem.setAttribute('href', 'style-card.css');
// Create spans
const wrapper = shadow.appendChild(document.createElement('a'));
wrapper.className = 'wrapper';
wrapper.target = '_blank';
const dAttr1 = wrapper.appendChild(document.createElement('div'));
dAttr1.className = 'attribute attribute-main';
const dAttr2 = wrapper.appendChild(document.createElement('div'));
dAttr2.className = 'attribute attribute-sub';
const dLeftTop = wrapper.appendChild(document.createElement('div'));
dLeftTop.className = "flex-box flex-left-top";
const dLeftBottom = wrapper.appendChild(document.createElement('div'));
dLeftBottom.className = "flex-box flex-left-bottom";
const dRightTop = wrapper.appendChild(document.createElement('div'));
dRightTop.className = "flex-box flex-right-top";
const dRightBottom = wrapper.appendChild(document.createElement('div'));
dRightBottom.className = "flex-box flex-right-bottom";
const dId = dLeftBottom.appendChild(document.createElement('div'));
dId.className = 'card-id';
const dLevel = dLeftBottom.appendChild(document.createElement('div'));
dLevel.className = 'level';
dLevel.textContent = "110";
const dEnhancement = dLeftTop.appendChild(document.createElement('div'));
dEnhancement.className = 'enhancement';
dEnhancement.textContent = "297";
const dActiveSkillCD = dRightBottom.appendChild(document.createElement('div'));
dActiveSkillCD.className = 'active-skill-cd';
dActiveSkillCD.textContent = "99";
}
connectedCallback() {
console.log('自定义标签添加到页面');
this.update();
}
attributeChangedCallback(name, oldValue, newValue) {
console.log('自定义标签属性改变', name, oldValue, newValue);
//if (name == 'id') this.#id = parseInt(this.getAttribute('id'));
if (name == 'id') this.id = parseInt(this.getAttribute('id'));
this.update();
}
update() {
//得到怪物ID
//const id = this.#id || 0;
const id = this.id || 0;
const card = Cards[id] || Cards[0];
const dataSource = this.getAttribute('source') || currentDataSource.code;
const shadow = this.shadowRoot;
const wrapper = shadow.querySelector('.wrapper');
wrapper.href = currentLanguage.guideURL(id, card.name);
wrapper.style.backgroundImage = `url(images/cards_${dataSource.toLowerCase()}/CARDS_${Math.ceil(id / 100).toString().padStart(3,"0")}.PNG)`;
const idxInPage = (id - 1) % 100; //获取当前页面内的序号
wrapper.setAttribute("data-cards-pic-x", idxInPage % 10); //添加X方向序号
wrapper.setAttribute("data-cards-pic-y", Math.floor(idxInPage / 10)); //添加Y方向序号
const dAttr1 = wrapper.querySelector('.attribute-main');
dAttr1.setAttribute('data-attr', card.attrs[0]);
const dAttr2 = wrapper.querySelector('.attribute-sub');
dAttr2.setAttribute('data-attr', card.attrs[1]);
const dId = wrapper.querySelector('.card-id');
dId.setAttribute('data-id', id);
}
}
// Define the new element
customElements.define('card-avatar', CardAvatar);
//将二进制flag转为数组
function flags(num) {
const arr = [];

20
service-worker.js
View File

@ -5973,6 +5973,10 @@ const cachesMap = new Map([
"multi.html",
"4bb9b2201ab111b6fc2d6e56541d3caf"
],
[
"script-custom_elements.js",
"9f83ca0833393e610c2c2b80845f1b7b"
],
[
"script-json_data.js",
"b5a0df3160f45cc7475dcf20d7743246"
@ -5983,19 +5987,19 @@ const cachesMap = new Map([
],
[
"script-universal_function.js",
"806b92aa6434b14e683751229c451cfa"
"af8d4bb7ff8e2dac0094d7fdaa238285"
],
[
"script.js",
"bcab71ce2bed3dd36c841f2cdbd86edf"
],
[
"solo.html",
"21886651aba645c0ad137db701968d5a"
"solo-dev.html",
"bece1a34ce268532972ad158ea02a76f"
],
[
"style-card.css",
"a3ecc88c3845113f867aaabe1d483645"
"solo.html",
"21886651aba645c0ad137db701968d5a"
],
[
"style-monsterimages.css",
@ -6115,7 +6119,7 @@ const cachesMap = new Map([
],
[
"images/icon-awoken.svg",
"9a12779052569346857f560e3160dd75"
"6dae8b28664c595e4cffaaa8af2f6e24"
],
[
"images/icon-bind.png",
@ -6229,10 +6233,6 @@ const cachesMap = new Map([
"monsters-info/mon_ko.json",
"b31b36910476d0370804fe1e4ef6bcd5"
],
[
"monsters-info/package.json",
"7921537900d05033acc01807f89d46e4"
],
[
"monsters-info/skill_en.json",
"ec7457a8a630e7df6f1340ab4e382451"