开发了一点自定义元素

script-universal_function.js

@@ -120,6 +120,78 @@ 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;
+	}
+	set id(x) {
+		this.setAttribute('id', x);
+		//this.#id = 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', '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 dId = wrapper.appendChild(document.createElement('div'));
+		dId.className = 'card-id';
+	}
+	connectedCallback() {
+		console.log('自定义标签添加到页面');
+		this.update();
+	}
+	attributeChangedCallback(name, oldValue, newValue) {
+		console.log('自定义标签属性改变', name, oldValue, newValue);
+		if (name == 'id') this.#id = parseInt(this.getAttribute('id'));
+		this.update();
+	}
+	update() {
+		//得到怪物ID
+		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) {

style-card.css

@@ -0,0 +1,85 @@
+@charset "utf-8";
+
+
+.wrapper{
+
+	display: inline-block;
+	position: relative;
+	width: 100px;
+	height: 100px;
+}
+
+/*怪物边框*/
+.attribute { /*主属性*/
+	position:absolute;
+	left:0;top:0;
+	width: 100px;height: 100px;
+	background-repeat: no-repeat;
+	background-image: url(images/CARDFRAME2.PNG);
+}
+.attribute-sub { /*副属性*/
+	background-position-y: -104px;
+}
+.attribute[data-attr='-1'] {
+	background: none; /*无*/
+}
+.attribute[data-attr='0'] {
+	background-position-x: calc(-102px * 0); /*火*/
+}
+.attribute[data-attr='1'] {
+	background-position-x: calc(-102px * 1); /*水*/
+}
+.attribute[data-attr='2'] {
+	background-position-x: calc(-102px * 2); /*木*/
+}
+.attribute[data-attr='3'] {
+	background-position-x: calc(-102px * 3); /*光*/
+}
+.attribute[data-attr='4'] {
+	background-position-x: calc(-102px * 4); /*暗*/
+}
+.attribute-main[data-attr='6']
+{
+	background-image: url(images/CARDFRAMEW.PNG);
+	background-position: 0 0;
+}
+/*宠物在图中编号对应的坐标*/
+.wrapper[data-cards-pic-x='0']{background-position-x:calc(-102px * 0);}
+.wrapper[data-cards-pic-x='1']{background-position-x:calc(-102px * 1);}
+.wrapper[data-cards-pic-x='2']{background-position-x:calc(-102px * 2);}
+.wrapper[data-cards-pic-x='3']{background-position-x:calc(-102px * 3);}
+.wrapper[data-cards-pic-x='4']{background-position-x:calc(-102px * 4);}
+.wrapper[data-cards-pic-x='5']{background-position-x:calc(-102px * 5);}
+.wrapper[data-cards-pic-x='6']{background-position-x:calc(-102px * 6);}
+.wrapper[data-cards-pic-x='7']{background-position-x:calc(-102px * 7);}
+.wrapper[data-cards-pic-x='8']{background-position-x:calc(-102px * 8);}
+.wrapper[data-cards-pic-x='9']{background-position-x:calc(-102px * 9);}
+.wrapper[data-cards-pic-y='0']{background-position-y:calc(-102px * 0);}
+.wrapper[data-cards-pic-y='1']{background-position-y:calc(-102px * 1);}
+.wrapper[data-cards-pic-y='2']{background-position-y:calc(-102px * 2);}
+.wrapper[data-cards-pic-y='3']{background-position-y:calc(-102px * 3);}
+.wrapper[data-cards-pic-y='4']{background-position-y:calc(-102px * 4);}
+.wrapper[data-cards-pic-y='5']{background-position-y:calc(-102px * 5);}
+.wrapper[data-cards-pic-y='6']{background-position-y:calc(-102px * 6);}
+.wrapper[data-cards-pic-y='7']{background-position-y:calc(-102px * 7);}
+.wrapper[data-cards-pic-y='8']{background-position-y:calc(-102px * 8);}
+.wrapper[data-cards-pic-y='9']{background-position-y:calc(-102px * 9);}
+
+.card-id {
+	color: white;
+	/*font-family: var(--game-font-family);*/
+	font-size: 15px;
+	/*text-shadow: black 0px 0px 2px,black -1px -1px 1px,black 1px 1px 1px,black 1px -1px 1px,black -1px 1px 1px;*/
+	text-shadow: black 0px 0px 2px,black 1px 1px 1px;
+	position: absolute;
+	left: 5px;
+	bottom: 15px;
+}
+.card-id::before {
+	content: "No.";
+	font-size: 0.7em; /*火狐*/
+	zoom: 0.7; /*Chrome*/
+}
+.card-id::after {
+	content: attr(data-id);
+}