From c0353dc2c0a05a5a4ac22d4a826e200132da8edc Mon Sep 17 00:00:00 2001 From: Alexandr Andreyev Date: Fri, 15 Aug 2025 15:18:17 +0300 Subject: [PATCH] separate fab-image component --- fab-ui/index.html | 7 +++++-- fab-ui/src/fab-card.ts | 28 ++------------------------- fab-ui/src/fab-image.ts | 43 +++++++++++++++++++++++++++++++++++++++++ fab-ui/src/main.ts | 3 +++ 4 files changed, 53 insertions(+), 28 deletions(-) create mode 100644 fab-ui/src/fab-image.ts create mode 100644 fab-ui/src/main.ts diff --git a/fab-ui/index.html b/fab-ui/index.html index 72320b4..dd65d42 100644 --- a/fab-ui/index.html +++ b/fab-ui/index.html @@ -6,10 +6,11 @@ FaB Cards - +

Card Printings

+

Standard Printings

+

Dual Printings

+

Cards Unique Visually

- +
diff --git a/fab-ui/src/fab-card.ts b/fab-ui/src/fab-card.ts index 3009dda..ef48d76 100644 --- a/fab-ui/src/fab-card.ts +++ b/fab-ui/src/fab-card.ts @@ -1,5 +1,6 @@ import { LitElement, css, html } from 'lit' import { customElement, property } from 'lit/decorators.js' +import { FabCardImage } from './fab-image'; @customElement("fab-rarity-symbol") export class FabRaritySymbol extends LitElement { @@ -65,9 +66,7 @@ export class FabCardPrinting extends LitElement { render() { return html`
-
- ${this.name} -
+
${this.setId} @@ -86,38 +85,15 @@ export class FabCardPrinting extends LitElement { border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; } - .card-img { - position: relative; - width: 100%; - height: 0; - padding-bottom: 140%; - } .card-details { padding: 10px; font-size: 12px; } - .card-img img { - position: absolute; - top: 0; - left: 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; - } - .card-img img.single-card-img { - width: 100%; - left: 0; - top: 0; - position: absolute; - transform: none; - z-index: 2; - } .printing-id { font-family: "Geist Mono", monospace; font-weight: bold; color: #666; } - .rainbow-foiling .card-name { background: linear-gradient(90deg, #ffb347, #ffcc33, #b4ffb3, #b3d1ff, #e0b3ff, #ffb3d1, #ffb347); background-size: 200% 200%; diff --git a/fab-ui/src/fab-image.ts b/fab-ui/src/fab-image.ts new file mode 100644 index 0000000..f595c54 --- /dev/null +++ b/fab-ui/src/fab-image.ts @@ -0,0 +1,43 @@ +import { LitElement, css, html } from 'lit' +import { customElement, property } from 'lit/decorators.js' + +@customElement('fab-card-image') +export class FabCardImage extends LitElement { + @property({ type: String }) + setId = ''; + @property({ type: String }) + name = ''; + + render() { + return html` +
+ ${this.name} +
+ `; + } + + static styles = css` + .card-img { + position: relative; + width: 100%; + height: auto; + padding-bottom: 140%; + } + .card-img img { + position: absolute; + top: 0; + left: 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; + } + .card-img img.single-card-img { + width: 100%; + left: 0; + top: 0; + position: absolute; + transform: none; + z-index: 2; + } + `; +} \ No newline at end of file diff --git a/fab-ui/src/main.ts b/fab-ui/src/main.ts new file mode 100644 index 0000000..343d34b --- /dev/null +++ b/fab-ui/src/main.ts @@ -0,0 +1,3 @@ +// Main entry for Vite. Import all custom elements here. +import './fab-card.ts'; +import './fab-image.ts' \ No newline at end of file