diff --git a/fab-ui/index.html b/fab-ui/index.html
index 17df916..acf4d35 100644
--- a/fab-ui/index.html
+++ b/fab-ui/index.html
@@ -100,12 +100,20 @@
Multiple Copies of a Card
-
+
Dual Printings
+
Cards Unique Visually
+
Basic images
@@ -113,6 +121,17 @@
+
+ Multiplied
+
+
+
+
+
+
+
+
+
Marvels and Alternate Arts
diff --git a/fab-ui/src/fab-card-image.ts b/fab-ui/src/fab-card-image.ts
index c41f9bf..69f067b 100644
--- a/fab-ui/src/fab-card-image.ts
+++ b/fab-ui/src/fab-card-image.ts
@@ -11,8 +11,12 @@ export class FabCardImage extends LitElement {
render() {
return html`
-

-
+
`;
}
@@ -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`
+
+ `);
+ }
+
+ return html`
+
+ ${cardImages}
+
+ `;
+ }
+}
+
@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`
-
+
`;
}
diff --git a/fab-ui/src/fab-card.ts b/fab-ui/src/fab-card.ts
index 5549c92..95d63f3 100644
--- a/fab-ui/src/fab-card.ts
+++ b/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`
+ `;
+ }
+
+ 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`
+