display multiple copies of a card in one components

fab-ui/index.html

@@ -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>

fab-ui/src/fab-card-image.ts

@@ -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}">
+                <img
-            </div>
+                 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>
         `;
     }

fab-ui/src/fab-card.ts

@@ -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}"