完善觉醒统计图标的程序
This commit is contained in:
parent
606c537763
commit
6b29ced6c8
|
|
@ -27,10 +27,25 @@ svg {
|
|||
--back-color: white;
|
||||
--front-color: #096E11;
|
||||
}
|
||||
[type="awoken-count"] text {
|
||||
fill: yellow;
|
||||
stroke:black;
|
||||
filter: url(../images/icon-awoken-count.svg#text-shadow);
|
||||
}
|
||||
[type="awoken-count"][icon-type="latent"] use {
|
||||
--front-color: #378DE8;
|
||||
}
|
||||
[type="awoken-count"][special][full]:not([icon-type="latent"]) use {
|
||||
[type="awoken-count"][icon-type="latent"][flags~="8-latent"] text {
|
||||
fill: #19F897;
|
||||
}
|
||||
[type="awoken-count"][flags~="can-assist"][flags~="full"]:not([icon-type="latent"]) use {
|
||||
--back-color: #FFFFD4;
|
||||
--front-color: #F3DC69;
|
||||
--front-color: url(../images/icon-awoken-count.svg#full-awoken-assist-front);
|
||||
}
|
||||
[type="awoken-count"][flags~="full"][flags~="can-assist"]:not([icon-type="latent"]) text,
|
||||
[type="awoken-count"][flags~="full"][flags~="8-latent"][icon-type="latent"] text
|
||||
{
|
||||
stroke: none;
|
||||
fill: url(../images/icon-awoken-count.svg#full-awoken-star);
|
||||
filter: url(../images/icon-awoken-count.svg#out-shadow);
|
||||
}
|
||||
|
|
@ -1,24 +1,24 @@
|
|||
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 123 75" icon-type="latent">
|
||||
<style>
|
||||
.back {
|
||||
fill: white;
|
||||
}
|
||||
.front {
|
||||
fill: #096E11;
|
||||
}
|
||||
[icon-type="latent"] .front {
|
||||
fill: red;
|
||||
}
|
||||
#bg-enable-be-assist .front {
|
||||
fill: #F3DC69;
|
||||
}
|
||||
#bg-enable-be-assist .back {
|
||||
fill: #FFFFD4;
|
||||
}
|
||||
#bg-latent .front {
|
||||
fill: #378DE8;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.back {
|
||||
fill: white;
|
||||
}
|
||||
.front {
|
||||
fill: #096E11;
|
||||
}
|
||||
[icon-type="latent"] .front {
|
||||
fill: url(#full-awoken);
|
||||
}
|
||||
#bg-enable-be-assist .front {
|
||||
fill: #F3DC69;
|
||||
}
|
||||
#bg-enable-be-assist .back {
|
||||
fill: #FFFFD4;
|
||||
}
|
||||
#bg-latent .front {
|
||||
fill: #378DE8;
|
||||
}
|
||||
</style>
|
||||
<defs>
|
||||
<filter id="inset-shadow" x="-50%" y="-50%" width="200%" height="200%" name="inset-shadow">
|
||||
<feComponentTransfer in="SourceAlpha">
|
||||
|
|
@ -51,6 +51,27 @@
|
|||
<feMergeNode in="offsetblur"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
<filter id="text-shadow" x="-50%" y="-50%" width="200%" height="200%" name="inset-shadow">
|
||||
<feComponentTransfer in="SourceAlpha">
|
||||
<feFuncA tableValues="0 1" type="table"/>
|
||||
</feComponentTransfer>
|
||||
<feGaussianBlur stdDeviation="1" result="blur"/>
|
||||
<feOffset dx="0" dy="1"/>
|
||||
<feComposite in2="SourceAlpha" operator="out" result="offsetblur"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
<feMergeNode in="offsetblur"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
<linearGradient id="full-awoken-assist-front" gradientTransform="rotate(90)">
|
||||
<stop offset="0%" style="stop-color:#AF8625;stop-opacity:1" />
|
||||
<stop offset="50%" style="stop-color:#F3DC69;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
<linearGradient id="full-awoken-star" gradientTransform="rotate(90)">
|
||||
<stop offset="50%" style="stop-color:white;stop-opacity:1" />
|
||||
<stop offset="70%" style="stop-color:#FCB234;stop-opacity:1" />
|
||||
<stop offset="80%" style="stop-color:#FFDB5D;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<symbol id="awoken-count-bg" viewBox="0 0 36 40">
|
||||
<g>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 3.8 KiB |
|
|
@ -1,19 +1,9 @@
|
|||
/*
|
||||
* Detail: 仿照 DOMTokenList 功能实现的自定义 CustomTokenList
|
||||
* Reference: https://gist.github.com/dimitarnestorov/48b69a918288e9098db1aab904a2722a
|
||||
* Use:
|
||||
let span = document.querySelector("span");
|
||||
let _ctl = new CustomTokenList(span, "custom-token");
|
||||
span.customTokenList = _ctl;
|
||||
span.customTokenList.add("token1","token2");
|
||||
console.log(span.getAttribute("custom-token"));
|
||||
// token1 token2
|
||||
await span.setAttribute("custom-token", "token-a token-b token-c");
|
||||
console.log(span.customTokenList.value);
|
||||
// token-a token-b token-c
|
||||
*/
|
||||
|
||||
class CustomTokenList extends Array {
|
||||
//Reference: https://stackoverflow.com/questions/49349195/using-splice-method-in-subclass-of-array-in-javascript/56181665#56181665 让splice能够用
|
||||
static get [Symbol.species]() { return Array; }
|
||||
static #illegalTokenRegRex = /\s/;
|
||||
#node = null;
|
||||
#attributeName = null;
|
||||
|
|
@ -102,7 +92,7 @@ class CustomTokenList extends Array {
|
|||
|
||||
tokens.forEach(token => {
|
||||
const index = this.indexOf(token);
|
||||
if (index>=0) this.splice(index,1);
|
||||
if (index>=0) this.valueOf().splice(index,1);
|
||||
});
|
||||
|
||||
if (this.#refreshAttribute) {
|
||||
|
|
@ -156,7 +146,7 @@ class CustomTokenList extends Array {
|
|||
throw CustomTokenList.#InvalidCharacterError('replace');
|
||||
const index = this.indexOf(oldToken);
|
||||
if (index>=0) {
|
||||
this.splice(index,1, newToken);
|
||||
this.splice(index,1, this.contains(newToken) ? undefined : newToken);
|
||||
if (this.#refreshAttribute) {
|
||||
this.#observer.disconnect(); //解除绑定
|
||||
this.#attribute.value = this.value;
|
||||
|
|
@ -301,6 +291,7 @@ class PadIcon extends HTMLElement {
|
|||
'flags', //各种选项开关，类似className
|
||||
];
|
||||
}
|
||||
#svg = document.createElementNS(svgNS,'svg');
|
||||
#flags = null;
|
||||
get flagsList() { return this.#flags; }
|
||||
#number = 0;
|
||||
|
|
@ -343,10 +334,10 @@ class PadIcon extends HTMLElement {
|
|||
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);
|
||||
const svg = this.#svg;
|
||||
const use = document.createElementNS(svgNS, 'use');
|
||||
svg.appendChild(use);
|
||||
shadow.appendChild(svg);
|
||||
}
|
||||
connectedCallback() { //自定义标签添加到页面
|
||||
this.update();
|
||||
|
|
@ -375,37 +366,53 @@ class PadIcon extends HTMLElement {
|
|||
update() {
|
||||
const number = this.#number;
|
||||
const lang = this.getAttribute('lang') || currentLanguage.i18n;
|
||||
const shadow = this.shadowRoot;
|
||||
const svg = shadow.querySelector('svg');
|
||||
svg.setAttribute("type", this.#type);
|
||||
this.#iconType ? svg.setAttribute("icon-type", this.#iconType) : svg.removeAttribute("icon-type");
|
||||
const use = svg.querySelector('use');
|
||||
//const shadow = this.shadowRoot;
|
||||
const svg = this.#svg;
|
||||
//svg.setAttribute("type", this.#type);
|
||||
//this.#iconType ? svg.setAttribute("icon-type", this.#iconType) : svg.removeAttribute("icon-type");
|
||||
const use = svg.querySelector(':scope>use');
|
||||
svg.setAttribute("viewBox", "0 0 32 32");
|
||||
switch (this.#type) {
|
||||
case 'awoken': {
|
||||
if (/^(?:en|ko)/.test(lang) && [40,46,47,48].includes(number)) number += '-en'; //英文不一样的觉醒
|
||||
if (/^(?:zh)/.test(lang) && [46,47].includes(number)) number += '-zh'; //中文不一样的觉醒
|
||||
use.setAttribute("href",`images/icon-awoken.svg#awoken-${number}`);
|
||||
use.href.baseVal = `images/icon-awoken.svg#awoken-${number}`;
|
||||
break;
|
||||
}
|
||||
case 'type': {
|
||||
if (/^(?:en|ko)/.test(lang) && [9,12].includes(number)) number += '-en'; //英文不一样的类型
|
||||
use.setAttribute("href",`images/icon-type.svg#type-${number}`);
|
||||
use.href.baseVal = `images/icon-type.svg#type-${number}`;
|
||||
break;
|
||||
}
|
||||
case 'awoken-count': {
|
||||
svg.setAttribute("viewBox", "0 0 34 38");
|
||||
use.setAttribute("href",`images/icon-awoken-count.svg#awoken-count-bg`);
|
||||
const full = this.flagsList.contains("full");
|
||||
const weapon = this.flagsList.contains("weapon");
|
||||
const canAssist = this.flagsList.contains("can-assist");
|
||||
//svg.setAttribute("viewBox", "0 0 34 38");
|
||||
svg.viewBox.baseVal.width = 34;
|
||||
svg.viewBox.baseVal.height = 38;
|
||||
if (full && weapon && canAssist) {
|
||||
use.href.baseVal = `images/icon-awoken.svg#awoken-49`;
|
||||
svg.querySelector('text')?.remove();
|
||||
break;
|
||||
}
|
||||
use.href.baseVal = `images/icon-awoken-count.svg#awoken-count-bg`;
|
||||
const text = svg.querySelector('text') || svg.appendChild(document.createElementNS(svgNS, 'text'));
|
||||
//awoken,latent,8-latent
|
||||
//full,enable-assist-full,latent-full,8-latent,8-latent-full
|
||||
const full = this.getAttribute('full') != null;
|
||||
const special = this.getAttribute('special') != null;
|
||||
const style = svg.querySelector('style') || svg.appendChild(document.createElementNS(svgNS, 'style'));
|
||||
text.textContent = full ? '★' : number;
|
||||
text.setAttribute("x", "50%");
|
||||
text.setAttribute("y", "47%");
|
||||
text.setAttribute("class", "number");
|
||||
//text.setAttribute("x", "50%");
|
||||
const lengthX = svg.createSVGLength();
|
||||
lengthX.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 50);
|
||||
text.x.baseVal.initialize(lengthX);
|
||||
//text.setAttribute("y", "47%");
|
||||
const lengthY = svg.createSVGLength();
|
||||
lengthY.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 47);
|
||||
text.y.baseVal.initialize(lengthY);
|
||||
text.classList.add("number");
|
||||
|
||||
text.textLength.baseVal.newValueSpecifiedUnits(
|
||||
full ? SVGLength.SVG_LENGTHTYPE_EMS : SVGLength.SVG_LENGTHTYPE_PERCENTAGE,
|
||||
full ? 0.9 : 100);
|
||||
text.lengthAdjust.baseVal = full ? SVGTextElement.LENGTHADJUST_SPACINGANDGLYPHS : SVGTextElement.LENGTHADJUST_SPACING;
|
||||
break;
|
||||
}
|
||||
case 'latent':
|
||||
|
|
|
|||
Loading…
Reference in New Issue