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

display multiple copies of a card in one components

Browse Source
This commit is contained in:
Alexandr Andreyev 2025-08-23 23:04:50 +03:00
parent 8108dbc2e4
commit 2fc102aaf2
3 changed files with 112 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
fab-ui/index.html
View File

@ -100,12 +100,20 @@
<h3>Multiple Copies of a Card</h3>
<div class="cards-list">
<fab-card-printing-multiplied
num="3"
setId="ROS152"
name="Arcane Cussing"
color="Red"
rarity="C"
></fab-card-printing-multiplied>
</div>
<h3>Dual Printings</h3>
<div class="cards-list"></div>
<h2>Cards Unique Visually</h2>
<p>Basic images</p>
<div class="cards-list">
<fab-card-image-block setId="ROS152" name="Arcane Cussing"></fab-card-image-block>
@ -113,6 +121,17 @@
<fab-card-image-block setId="ROS154" name="Arcane Cussing"></fab-card-image-block>
<fab-card-image-block setId="HNT076" name="Art of the Dragon: Scale"></fab-card-image-block>
</div>
<p>Multiplied</p>
<div class="cards-list">
<fab-card-image-block setId="ROS152" name="Arcane Cussing" num="3"></fab-card-image-block>
<fab-card-image-block setId="ROS153" name="Arcane Cussing" num="2"></fab-card-image-block>
<fab-card-image-block setId="ROS154" name="Arcane Cussing" num="5"></fab-card-image-block>
<fab-card-image-block setId="HNT076" name="Art of the Dragon: Scale"></fab-card-image-block>
</div>
</div>
<p>Marvels and Alternate Arts</p>
<div class="cards-list">
</div>

46
fab-ui/src/fab-card-image.ts
View File

@ -11,8 +11,12 @@ export class FabCardImage extends LitElement {
render() {
return html`
<div class="fab-card-image">
<img class="single-card-img" src="http://localhost:8000/p/${this.setId}/w400" alt="${this.name}" title="${this.name}">
</div>
<img
class="single-card-img"
src="http://localhost:8000/p/${this.setId}/w400"
alt="${this.name}"
title="${this.name}"
></div>
`;
}
@ -25,8 +29,8 @@ export class FabCardImage extends LitElement {
}
.fab-card-image img {
position: absolute;
top: 0;
left: 0;
top: 0;
border-radius: 8px;
box-shadow: rgba(0,0,0,0.18) 0px 2px 8px;
transition: box-shadow 0.2s, z-index 0.2s, opacity 0.2s;
@ -34,7 +38,6 @@ export class FabCardImage extends LitElement {
.fab-card-image img.single-card-img {
width: 100%;
left: 0;
top: 0;
position: absolute;
transform: none;
z-index: 2;
@ -42,17 +45,50 @@ export class FabCardImage extends LitElement {
`;
}
@customElement('fab-card-image-multiplied')
export class FabCardImageMultiplied extends FabCardImage {
@property({ type: String })
setId = '';
@property({ type: String })
name = '';
@property({ type: Number })
num = 1;
render() {
let cardImages = [];
for (let i = 0; i < this.num; i++) {
// Just to ensure reactivity
cardImages.push(html`
<fab-card-image
setId="${this.setId}"
name="${this.name}"
style="display: flex; box-sizing: border-box; margin: ${i == 0 ? 0 : -124}% 0px 0px;"
></fab-card-image>
`);
}
return html`
<div class="fab-card-image-multiplied" style="box-sizing: border-box;">
${cardImages}
</div>
`;
}
}
@customElement('fab-card-image-block')
export class FabCardImageBlock extends LitElement {
@property({ type: String })
setId = '';
@property({ type: String })
name = '';
@property({ type: Number })
num = 1;
render() {
return html`
<div class="fab-card-image-block">
<fab-card-image setId="${this.setId}" name="${this.name}"></fab-card-image>
<fab-card-image-multiplied setId="${this.setId}" name="${this.name}" num="${this.num}"></fab-card-image>
</div>
`;
}

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

@ -17,11 +17,61 @@ export class FabCardPrinting extends LitElement {
comment = '';
@property({ type: String })
foiling = 'S';
@property({ type: Number })
num = 1;
render() {
return html`
<div class="card ${this.foiling != 'S' ? (this.foiling == 'R' ? 'rainbow-foiling' : 'cold-foiling') : ''}">
<fab-card-image setId="${this.setId}" name="${this.name}"></fab-card-image>
<fab-card-image-multiplied setId="${this.setId}" name="${this.name}" num="${this.num}"></fab-card-image-multiplied>
<div class="card-details">
<fab-card-title
setId="${this.setId}"
name="${this.name}"
color="${this.color}"
rarity="${this.rarity}"
foiling="${this.foiling}"
comment="${this.comment}"
></fab-card-title>
</div>
</div>
`;
}
static styles = css`
.card {
width: 220px;
border-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.card-details {
padding: 10px;
font-size: 12px;
}
`;
}
@customElement('fab-card-printing-multiplied')
export class FabCardPrintingMultiplied extends LitElement {
@property({ type: String })
setId = '';
@property({ type: String })
name = '';
@property({ type: String })
color = '';
@property({ type: String })
rarity = '';
@property({ type: String })
comment = '';
@property({ type: String })
foiling = 'S';
@property({ type: Number })
num = 1;
render() {
return html`
<div class="card ${this.foiling != 'S' ? (this.foiling == 'R' ? 'rainbow-foiling' : 'cold-foiling') : ''}">
<fab-card-image-multiplied setId="${this.setId}" name="${this.name}" num="${this.num}"></fab-card-image-multiplied>
<div class="card-details">
<fab-card-title
setId="${this.setId}"