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

unavailable cards

Browse Source
This commit is contained in:
Alexandr Andreyev 2025-08-23 23:38:37 +03:00
parent 6406c8072b
commit 092b6d1022
3 changed files with 33 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
fab-ui/index.html
View File

@ -109,6 +109,25 @@
></fab-card-printing-multiplied> ></fab-card-printing-multiplied>
</div> </div>
<h3>Card not Available</h3>
<div class="cards-list">
<fab-card-printing
setId="ROS155"
name="Deadwood Dirge"
color="Red"
rarity="C"
available=0
></fab-card-printing>
<fab-card-printing
setId="ROS155"
name="Deadwood Dirge"
color="Red"
rarity="C"
num=3
available=1
></fab-card-printing>
</div>
<h3>Dual Printings</h3> <h3>Dual Printings</h3>
<div class="cards-list"></div> <div class="cards-list"></div>

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

@ -7,10 +7,12 @@ export class FabCardImage extends LitElement {
setId = ''; setId = '';
@property({ type: String }) @property({ type: String })
name = ''; name = '';
@property({ type: String })
is_available = "true";
render() { render() {
return html` return html`
<div class="fab-card-image"> <div class="fab-card-image ${this.is_available == "true" ? '' : 'not-available'}">
<img <img
class="single-card-img" class="single-card-img"
src="http://localhost:8000/p/${this.setId}/w400" src="http://localhost:8000/p/${this.setId}/w400"
@ -35,6 +37,9 @@ export class FabCardImage extends LitElement {
box-shadow: rgba(0,0,0,0.18) 0px 2px 8px; box-shadow: rgba(0,0,0,0.18) 0px 2px 8px;
transition: box-shadow 0.2s, z-index 0.2s, opacity 0.2s; transition: box-shadow 0.2s, z-index 0.2s, opacity 0.2s;
} }
.fab-card-image.not-available img {
filter: grayscale(90%) opacity(100%);
}
.fab-card-image img.single-card-img { .fab-card-image img.single-card-img {
width: 100%; width: 100%;
left: 0; left: 0;
@ -53,6 +58,8 @@ export class FabCardImageMultiplied extends FabCardImage {
name = ''; name = '';
@property({ type: Number }) @property({ type: Number })
num = 1; num = 1;
@property({ type: Number })
available = 100;
render() { render() {
let cardImages = []; let cardImages = [];
@ -63,6 +70,7 @@ export class FabCardImageMultiplied extends FabCardImage {
<fab-card-image <fab-card-image
setId="${this.setId}" setId="${this.setId}"
name="${this.name}" name="${this.name}"
is_available="${i < this.available}"
style="display: flex; box-sizing: border-box; margin: ${i == 0 ? 0 : -124}% 0px 0px;" style="display: flex; box-sizing: border-box; margin: ${i == 0 ? 0 : -124}% 0px 0px;"
></fab-card-image> ></fab-card-image>
`); `);

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

@ -17,11 +17,13 @@ export class FabCardPrinting extends LitElement {
foiling = 'S'; foiling = 'S';
@property({ type: Number }) @property({ type: Number })
num = 1; num = 1;
@property({ type: Number })
available = 100;
render() { render() {
return html` return html`
<div class="card ${this.foiling != 'S' ? (this.foiling == 'R' ? 'rainbow-foiling' : 'cold-foiling') : ''}"> <div class="card ${this.available ? '' : 'not-available'} ${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> <fab-card-image-multiplied setId="${this.setId}" name="${this.name}" num="${this.num}" available="${this.available}"></fab-card-image-multiplied>
<div class="card-details"> <div class="card-details">
<fab-card-title <fab-card-title
setId="${this.setId}" setId="${this.setId}"
@ -83,16 +85,4 @@ export class FabCardPrintingMultiplied extends LitElement {
</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;
}
`;
} }