先暂时不用私有域，太麻烦了
This commit is contained in:
parent
2be55678f3
commit
e2d633dcc4
|
|
@ -3,7 +3,7 @@
|
|||
{name: "Optional chaining (?.) / 可选链操作符(?.)", url: "https://caniuse.com/mdn-javascript_operators_optional_chaining", test: ()=>!Boolean(eval("undefined?.undefined || true"))},
|
||||
{name: "Nullish coalescing operator (??) / 空值合并操作符(??)", url: "https://caniuse.com/mdn-javascript_operators_nullish_coalescing", test: ()=>!Boolean(eval("undefined ?? true"))},
|
||||
{name: "BigInt value (1n) / BigInt 数据类型(1n)", url: "https://caniuse.com/bigint", test: ()=>!Boolean(eval("1n"))},
|
||||
{name: "Private class fields (#name) / 类私有域(#name)", url: "https://caniuse.com/mdn-javascript_classes_private_class_fields", test: ()=>!Boolean(eval("class test {#v = 0;}; true;"))},
|
||||
//{name: "Private class fields (#name) / 类私有域(#name)", url: "https://caniuse.com/mdn-javascript_classes_private_class_fields", test: ()=>!Boolean(eval("class test {#v = 0;}; true;"))},
|
||||
]
|
||||
return features.filter(feature=>{
|
||||
try {
|
||||
|
|
|
|||
|
|
@ -120,6 +120,7 @@ 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
|
||||
|
|
@ -127,14 +128,33 @@ class CardAvatar extends HTMLElement {
|
|||
static get observedAttributes() {
|
||||
return ['id'];
|
||||
}
|
||||
#id = 0;
|
||||
/*#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
|
||||
|
|
@ -156,8 +176,28 @@ class CardAvatar extends HTMLElement {
|
|||
const dAttr2 = wrapper.appendChild(document.createElement('div'));
|
||||
dAttr2.className = 'attribute attribute-sub';
|
||||
|
||||
const dId = wrapper.appendChild(document.createElement('div'));
|
||||
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('自定义标签添加到页面');
|
||||
|
|
@ -165,12 +205,14 @@ class CardAvatar extends HTMLElement {
|
|||
}
|
||||
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'));
|
||||
if (name == 'id') this.id = parseInt(this.getAttribute('id'));
|
||||
this.update();
|
||||
}
|
||||
update() {
|
||||
//得到怪物ID
|
||||
const id = this.#id || 0;
|
||||
//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;
|
||||
|
|
|
|||
|
|
@ -5963,7 +5963,7 @@ const cachesMap = new Map([
|
|||
],
|
||||
[
|
||||
"browser-compatibility.js",
|
||||
"b32e4fcaf3a203d77f1febf9bcc59859"
|
||||
"91b2a026dff2d78dc9bc27d6b37c0e88"
|
||||
],
|
||||
[
|
||||
"index.html",
|
||||
|
|
@ -5983,7 +5983,7 @@ const cachesMap = new Map([
|
|||
],
|
||||
[
|
||||
"script-universal_function.js",
|
||||
"a33e51e967e2f43d4681dd151ba354d1"
|
||||
"10eabc7ba4b17d6be72ec997f8ddb682"
|
||||
],
|
||||
[
|
||||
"script.js",
|
||||
|
|
@ -5995,7 +5995,7 @@ const cachesMap = new Map([
|
|||
],
|
||||
[
|
||||
"style-card.css",
|
||||
"6e18c2ab05a264530b6af07a6d181368"
|
||||
"a3ecc88c3845113f867aaabe1d483645"
|
||||
],
|
||||
[
|
||||
"style-monsterimages.css",
|
||||
|
|
|
|||
|
|
@ -2,12 +2,37 @@
|
|||
|
||||
|
||||
.wrapper{
|
||||
|
||||
color: white;
|
||||
font-family: var(--game-font-family);
|
||||
font-size: 15px;
|
||||
line-height: 15px;
|
||||
text-shadow: black 0 0 2px, black 2px 2px 0;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
/*宠物在图中编号对应的坐标*/
|
||||
.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);}
|
||||
|
||||
/*怪物边框*/
|
||||
.attribute { /*主属性*/
|
||||
|
|
@ -43,37 +68,30 @@
|
|||
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);}
|
||||
|
||||
.flex-box {
|
||||
display: block flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position:absolute;
|
||||
left:0;top:0;
|
||||
flex-direction: column; /* 内容纵向排列 */
|
||||
}
|
||||
.flex-left-top {
|
||||
}
|
||||
.flex-left-bottom {
|
||||
justify-content: flex-end; /*从下往上*/
|
||||
}
|
||||
.flex-right-top {
|
||||
align-items: flex-end; /*靠右*/
|
||||
}
|
||||
.flex-right-bottom {
|
||||
justify-content: flex-end; /*从下往上*/
|
||||
align-items: flex-end; /*靠右*/
|
||||
}
|
||||
|
||||
.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;
|
||||
font-family: var(--font-family);
|
||||
}
|
||||
.card-id::before {
|
||||
content: "No.";
|
||||
|
|
@ -82,4 +100,25 @@
|
|||
}
|
||||
.card-id::after {
|
||||
content: attr(data-id);
|
||||
}
|
||||
.level {
|
||||
}
|
||||
.level::before {
|
||||
content: "Lv.";
|
||||
font-size: 0.7em; /*火狐*/
|
||||
zoom: 0.7; /*Chrome*/
|
||||
}
|
||||
.enhancement { /*加点*/
|
||||
color: yellow;
|
||||
}
|
||||
.enhancement::before {
|
||||
content: "+";
|
||||
}
|
||||
.active-skill-cd {
|
||||
font-size: 13px;
|
||||
}
|
||||
.active-skill-cd::before {
|
||||
content: "CD";
|
||||
font-size: 0.7em; /*火狐*/
|
||||
zoom: 0.7; /*Chrome*/
|
||||
}
|
||||
Loading…
Reference in New Issue