From 56e3447345529accebcae01e7c82cee6edc968f4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9E=AB=E8=B0=B7=E5=89=91=E4=BB=99?= Date: Tue, 5 Jul 2022 20:32:31 +0800 Subject: [PATCH] =?UTF-8?q?=E5=BC=80=E5=8F=91=E4=BA=86=E4=B8=80=E7=82=B9?= =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E5=85=83=E7=B4=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- script-universal_function.js | 72 ++++++++++++++++++++++++++++++ style-card.css | 85 ++++++++++++++++++++++++++++++++++++ 2 files changed, 157 insertions(+) create mode 100644 style-card.css diff --git a/script-universal_function.js b/script-universal_function.js index 2a3236cb..6cc11523 100644 --- a/script-universal_function.js +++ b/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) { diff --git a/style-card.css b/style-card.css new file mode 100644 index 00000000..829af977 --- /dev/null +++ b/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); +} \ No newline at end of file