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

separate fab-image component

Browse Source
This commit is contained in:
Alexandr Andreyev 2025-08-15 15:18:17 +03:00
parent d9122be951
commit c0353dc2c0
4 changed files with 53 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
fab-ui/index.html
View File

@ -6,10 +6,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>FaB Cards</title> <title>FaB Cards</title>
<link rel="stylesheet" href="./src/index.css" /> <link rel="stylesheet" href="./src/index.css" />
<script type="module" src="/src/fab-card.ts"></script> <script type="module" defer src="/src/main.ts"></script>
</head> </head>
<body> <body>
<h2>Card Printings</h2> <h2>Card Printings</h2>
<h3>Standard Printings</h3>
<div class="cards-list"> <div class="cards-list">
<fab-card-printing <fab-card-printing
setId="ROS152" setId="ROS152"
@ -39,9 +40,11 @@
rarity="R" rarity="R"
></fab-card-printing> ></fab-card-printing>
</div> </div>
<h3>Dual Printings</h3>
<div class="cards-list"></div>
<h2>Cards Unique Visually</h2> <h2>Cards Unique Visually</h2>
<div class="cards-list"> <div class="cards-list">
<fab-card-image setId="ROS152" name="Arcane Cussing"></fab-card-image>
</div> </div>
</body> </body>
</html> </html>

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

@ -1,5 +1,6 @@
import { LitElement, css, html } from 'lit' import { LitElement, css, html } from 'lit'
import { customElement, property } from 'lit/decorators.js' import { customElement, property } from 'lit/decorators.js'
import { FabCardImage } from './fab-image';
@customElement("fab-rarity-symbol") @customElement("fab-rarity-symbol")
export class FabRaritySymbol extends LitElement { export class FabRaritySymbol extends LitElement {
@ -65,9 +66,7 @@ export class FabCardPrinting extends LitElement {
render() { render() {
return html` return html`
<div class="card ${this.foiling != 'S' ? (this.foiling == 'R' ? 'rainbow-foiling' : 'cold-foiling') : ''}"> <div class="card ${this.foiling != 'S' ? (this.foiling == 'R' ? 'rainbow-foiling' : 'cold-foiling') : ''}">
<div class="card-img"> <fab-card-image setId="${this.setId}" name="${this.name}"></fab-card-image>
<img class="single-card-img" src="http://localhost:8000/p/${this.setId}/w400" alt="${this.name}">
</div>
<div class="card-details"> <div class="card-details">
<fab-rarity-symbol rarity="${this.rarity}"></fab-rarity-symbol> <fab-rarity-symbol rarity="${this.rarity}"></fab-rarity-symbol>
<span class="printing-id">${this.setId}</span> <span class="printing-id">${this.setId}</span>
@ -86,38 +85,15 @@ export class FabCardPrinting extends LitElement {
border-radius: 10px; border-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
} }
.card-img {
position: relative;
width: 100%;
height: 0;
padding-bottom: 140%;
}
.card-details { .card-details {
padding: 10px; padding: 10px;
font-size: 12px; 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 { .printing-id {
font-family: "Geist Mono", monospace; font-family: "Geist Mono", monospace;
font-weight: bold; font-weight: bold;
color: #666; color: #666;
} }
.rainbow-foiling .card-name { .rainbow-foiling .card-name {
background: linear-gradient(90deg, #ffb347, #ffcc33, #b4ffb3, #b3d1ff, #e0b3ff, #ffb3d1, #ffb347); background: linear-gradient(90deg, #ffb347, #ffcc33, #b4ffb3, #b3d1ff, #e0b3ff, #ffb3d1, #ffb347);
background-size: 200% 200%; background-size: 200% 200%;

43
fab-ui/src/fab-image.ts Normal file
View File

@ -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`
<div class="card-img">
<img class="single-card-img" src="http://localhost:8000/p/${this.setId}/w400" alt="${this.name}">
</div>
`;
}
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;
}
`;
}

3
fab-ui/src/main.ts Normal file
View File

@ -0,0 +1,3 @@
// Main entry for Vite. Import all custom elements here.
import './fab-card.ts';
import './fab-image.ts'