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

add card title component

Browse Source
This commit is contained in:
Alexandr Andreyev 2025-08-15 16:11:30 +03:00
parent 3de3c42427
commit ab02c3b8c4
4 changed files with 131 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
fab-ui/index.html
View File

@ -9,7 +9,46 @@
</head>
<body>
<h2>Card Printings</h2>
<h3>Standard Printings</h3>
<h3>Simple list</h3>
<ul>
<li>
<fab-card-title
setId="ROS152"
name="Arcane Cussing"
color="Red"
rarity="C">
</fab-card-title>
</li>
<li>
<fab-card-title
setId="ROS153"
name="Arcane Cussing"
color="Yellow"
foiling="R"
rarity="C"
></fab-card-title>
</li>
<li>
<fab-card-title
setId="ROS154"
name="Arcane Cussing"
color="Blue"
foiling="C"
rarity="C"
></fab-card-title>
</li>
<li>
<fab-card-title
setId="HNT076"
name="Art of the Dragon: Scale"
comment="Longer name"
color="Red"
rarity="R"
></fab-card-title>
</li>
</ul>
<h3>Standard Printings: Cards view</h3>
<div class="cards-list">
<fab-card-printing
setId="ROS152"

80
fab-ui/src/fab-card-title.ts Normal file
View File

@ -0,0 +1,80 @@
import { LitElement, css, html } from 'lit'
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-title')
export class FabCardTitle 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';
render() {
return html`
<span class="card-title">
<fab-rarity-symbol rarity="${this.rarity}"></fab-rarity-symbol>
<span class="printing-id">${this.setId}</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="comment">${this.comment}</span>-->
</span>
`;
}
static styles = css`
`;
}

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

@ -1,52 +1,7 @@
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 {
@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;
}
`;
}
import { FabCardTitle } from './fab-card-title';
@customElement('fab-card-printing')
export class FabCardPrinting extends LitElement {
@ -68,12 +23,14 @@ export class FabCardPrinting extends LitElement {
<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>
<div class="card-details">
<fab-rarity-symbol rarity="${this.rarity}"></fab-rarity-symbol>
<span class="printing-id">${this.setId}</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="comment">${this.comment}</span>-->
<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>
`;

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

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