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

css/svg-icon.css

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

images/project file/build symble svgs.bat

@@ -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

images/project file/build symble svgs.js

@@ -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);

package.json

@@ -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"
   }
 }

script-custom_elements.js

@@ -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);

script-universal_function.js

@@ -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 = [];

service-worker.js

@@ -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"