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

works

Browse Source
This commit is contained in:
Alexandr Andreyev 2025-08-15 09:53:27 +03:00
parent bf00a968a8
commit 729e234c4f
3 changed files with 127 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
fab-ui/index.html
View File

@ -4,34 +4,38 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Lit + TS</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" src="/src/fab-card.ts"></script>
</head> </head>
<body> <body>
<div class="cards-list"> <div class="cards-list">
<fab-card <fab-card
cardSetId="ROS154" setId="ROS152"
cardName="Arcane Cussing" name="Arcane Cussing"
cardColor="Blue" color="Red"
cardImageSrc="http://localhost:8000/p/ROS154/w400" rarity="C"
cardComment="A comment about the card"
></fab-card> ></fab-card>
<fab-card <fab-card
cardSetId="ROS154" setId="ROS153"
cardName="Arcane Cussing" name="Arcane Cussing"
cardColor="Blue" color="Yellow"
cardImageSrc="http://localhost:8000/p/ROS154/w400"
cardComment="A comment about the card"
foiling="R" foiling="R"
rarity="C"
></fab-card> ></fab-card>
<fab-card <fab-card
cardSetId="ROS154" setId="ROS154"
cardName="Arcane Cussing" name="Arcane Cussing"
cardColor="Blue" color="Blue"
cardImageSrc="http://localhost:8000/p/ROS154/w400"
cardComment="A comment about the card"
foiling="C" foiling="C"
rarity="C"
></fab-card>
<fab-card
setId="HNT076"
name="Art of the Dragon: Scale"
comment="Longer name"
color="Red"
rarity="R"
></fab-card> ></fab-card>
</div> </div>
</body> </body>

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

@ -1,16 +1,64 @@
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'
@customElement("fab-rarity-symbol")
export class FabRaritySymbol extends LitElement {
@property({ type: String })
rarity = '';
render() {
return html`
<code class="fab-rarity-icon fab-rarity-${this.rarity.toLowerCase()}">${this.rarity}</code>
`;
}
static styles = css`
.fab-rarity-icon {
font-family: monospace;
display: inline-block;
width: 1.2em;
height: 1.2em;
line-height: 1.1em;
text-align: center;
border-radius: 50%;
color: #fff;
font-size: 0.7em;
}
.fab-rarity-icon.fab-rarity-m {
background-color: red;
}
.fab-rarity-icon.fab-rarity-r {
background-color: blue;
}
.fab-rarity-icon.fab-rarity-p {
background-color: green;
}
.fab-rarity-icon.fab-rarity-c {
background-color: gray;
}
.fab-rarity-icon.fab-rarity-l {
background-color: orange;
}
`;
}
@customElement('fab-card') @customElement('fab-card')
export class FabCard extends LitElement { export class FabCard extends LitElement {
@property({ type: String }) @property({ type: String })
cardSetId = ''; setId = '';
@property({ type: String }) @property({ type: String })
cardName = ''; name = '';
@property({ type: String }) @property({ type: String })
cardColor = ''; color = '';
@property({ type: String }) @property({ type: String })
cardComment = ''; rarity = '';
@property({ type: String })
comment = '';
@property({ type: String }) @property({ type: String })
foiling = 'S'; foiling = 'S';
@ -18,14 +66,15 @@ export class FabCard extends LitElement {
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"> <div class="card-img">
<img class="single-card-img" src="http://localhost:8000/p/${this.cardSetId}/w400" alt="${this.cardName}"> <img class="single-card-img" src="http://localhost:8000/p/${this.setId}/w400" alt="${this.name}">
</div> </div>
<div class="card-details"> <div class="card-details">
<span class="printing-id">${this.cardSetId}</span> <fab-rarity-symbol rarity="${this.rarity}"></fab-rarity-symbol>
<span class="card-name">${this.cardName}</span> <span class="printing-id">${this.setId}</span>
<span class="card-color color-${this.cardColor}">(${this.cardColor})</span> <span class="card-name">${this.name}</span>
<span class="card-color color-${this.color.toLowerCase()}">(${this.color})</span>
<span class="card-foiling">${this.foiling == "S" ? '' : this.foiling }</span> <span class="card-foiling">${this.foiling == "S" ? '' : this.foiling }</span>
<!--<span class="comment">${this.cardComment}</span>--> <!--<span class="comment">${this.comment}</span>-->
</div> </div>
</div> </div>
`; `;

49
index.html Normal file
View File

@ -0,0 +1,49 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lit Example</title>
<!-- Import Lit via CDN -->
<script type="module" src="https://cdn.jsdelivr.net/gh/lit/dist@3/core/lit-core.min.js"></script>
</head>
<body>
<script type="module">
import {LitElement, html} from 'https://cdn.jsdelivr.net/gh/lit/dist@3/core/lit-core.min.js';
class FabCard extends LitElement {
@property({type: String}) imgSrc = '';
@property({type: String}) printingId = '';
@property({type: String}) cardName = '';
@property({type: String}) cardColor = '';
@property({type: String}) comment = '';
render() {
return html`
<div class="card ">
<div class="card-img">
<img class="single-card-img" src="${this.imgSrc}" alt="${this.cardName}">
</div>
<div class="card-details">
<span class="printing-id">${this.printingId}</span>
<span class="card-name">${this.cardName}</span>
<span class="card-color color-blue">${this.cardColor}</span>
<span class="comment">${this.comment}</span>
</div>
</div>
`;
}
}
customElements.define('fab-card', FabCard);
</script>
<fab-card
imgSrc="http://localhost:8000/p/ROS154/w400"
printingId="ROS154"
cardName="Arcane Cussing"
cardColor="(Blue)"
comment=""
></fab-card>
</body>
</html>