alex/fab-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add fab-printing-id component

Browse Source
This commit is contained in:
Alexandr Andreyev 2025-08-15 16:45:37 +03:00
parent ab02c3b8c4
commit 9c72e20e94
2 changed files with 25 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
fab-ui/src/fab-card-title.ts
View File

@ -47,6 +47,30 @@ export class FabRaritySymbol extends LitElement {
`;
}
@customElement('fab-printing-id')
export class FabPrintingId extends LitElement {
@property({ type: String })
setId = '';
@property({ type: Number })
number = 0;
render() {
return html`
<span class="printing-id">
<span class="set-id">${this.setId}</span><span class="set-number">${String(this.number).padStart(3, '0')}</span>
</span>
`;
}
static styles = css`
.printing-id {
font-family: "Geist Mono", monospace;
font-weight: bold;
color: #666;
}
`;
}
@customElement('fab-card-title')
export class FabCardTitle extends LitElement {
@property({ type: String })
@ -66,7 +90,7 @@ export class FabCardTitle extends LitElement {
return html`
<span class="card-title">
<fab-rarity-symbol rarity="${this.rarity}"></fab-rarity-symbol>
<span class="printing-id">${this.setId}</span>
<fab-printing-id setId="${this.setId.slice(0, 3)}" number="${this.setId.slice(3)}"></fab-printing-id>
<span class="card-name">${this.name}</span>
<span class="card-color color-${this.color.toLowerCase()}">(${this.color})</span>
<span class="card-foiling">${this.foiling == "S" ? '' : this.foiling }</span>

5
fab-ui/src/fab-card.ts
View File

@ -46,11 +46,6 @@ export class FabCardPrinting extends LitElement {
padding: 10px;
font-size: 12px;
}
.printing-id {
font-family: "Geist Mono", monospace;
font-weight: bold;
color: #666;
}
.rainbow-foiling .card-name {
background: linear-gradient(90deg, #ffb347, #ffcc33, #b4ffb3, #b3d1ff, #e0b3ff, #ffb3d1, #ffb347);
background-size: 200% 200%;