diff --git a/fab-ui/src/fab-card-title.ts b/fab-ui/src/fab-card-title.ts
index 9253dc3..e94bf09 100644
--- a/fab-ui/src/fab-card-title.ts
+++ b/fab-ui/src/fab-card-title.ts
@@ -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`
+
+ ${this.setId}${String(this.number).padStart(3, '0')}
+
+ `;
+ }
+
+ 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`
- ${this.setId}
+
${this.name}
(${this.color})
${this.foiling == "S" ? '' : this.foiling }
diff --git a/fab-ui/src/fab-card.ts b/fab-ui/src/fab-card.ts
index 16970af..dcb75b3 100644
--- a/fab-ui/src/fab-card.ts
+++ b/fab-ui/src/fab-card.ts
@@ -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%;