From 092b6d10225ee79aa3fdeefbca2651f140a47dca Mon Sep 17 00:00:00 2001
From: Alexandr Andreyev <an.alexander.mail@gmail.com>
Date: Sat, 23 Aug 2025 23:38:37 +0300
Subject: [PATCH] unavailable cards

---
 fab-ui/index.html            | 21 ++++++++++++++++++++-
 fab-ui/src/fab-card-image.ts | 10 +++++++++-
 fab-ui/src/fab-card.ts       | 18 ++++--------------
 3 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/fab-ui/index.html b/fab-ui/index.html
index acf4d35..d173c86 100644
--- a/fab-ui/index.html
+++ b/fab-ui/index.html
@@ -108,7 +108,26 @@
         rarity="C"
       ></fab-card-printing-multiplied>
     </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>
     <div class="cards-list"></div>
   
diff --git a/fab-ui/src/fab-card-image.ts b/fab-ui/src/fab-card-image.ts
index e6f0db2..af72ad7 100644
--- a/fab-ui/src/fab-card-image.ts
+++ b/fab-ui/src/fab-card-image.ts
@@ -7,10 +7,12 @@ export class FabCardImage extends LitElement {
     setId = '';
     @property({ type: String })
     name = '';
+    @property({ type: String })
+    is_available = "true";
 
     render() {
         return html`
-            <div class="fab-card-image">
+            <div class="fab-card-image ${this.is_available == "true" ? '' : 'not-available'}">
                 <img
                  class="single-card-img"
                  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;
         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 {
         width: 100%;
         left: 0;
@@ -53,6 +58,8 @@ export class FabCardImageMultiplied extends FabCardImage {
     name = '';
     @property({ type: Number })
     num = 1;
+    @property({ type: Number })
+    available = 100;
 
     render() {
         let cardImages = [];
@@ -63,6 +70,7 @@ export class FabCardImageMultiplied extends FabCardImage {
                 <fab-card-image
                     setId="${this.setId}"
                     name="${this.name}"
+                    is_available="${i < this.available}"
                     style="display: flex; box-sizing: border-box; margin: ${i == 0 ? 0 : -124}% 0px 0px;"
                 ></fab-card-image>
             `);
diff --git a/fab-ui/src/fab-card.ts b/fab-ui/src/fab-card.ts
index 485c132..b66339e 100644
--- a/fab-ui/src/fab-card.ts
+++ b/fab-ui/src/fab-card.ts
@@ -17,11 +17,13 @@ export class FabCardPrinting extends LitElement {
     foiling = 'S';
     @property({ type: Number })
     num = 1;
+    @property({ type: Number })
+    available = 100;
 
     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 ${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}" available="${this.available}"></fab-card-image-multiplied>
         <div class="card-details">
             <fab-card-title
                 setId="${this.setId}"
@@ -83,16 +85,4 @@ export class FabCardPrintingMultiplied extends LitElement {
     </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;
-    }
-    `;
 }
\ No newline at end of file