diff --git a/fab-ui/index.html b/fab-ui/index.html index a3f431f..52892ab 100644 --- a/fab-ui/index.html +++ b/fab-ui/index.html @@ -9,7 +9,46 @@

Card Printings

-

Standard Printings

+

Simple list

+ + +

Standard Printings: Cards view

${this.rarity} + `; + } + + 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` + + + ${this.setId} + ${this.name} + (${this.color}) + ${this.foiling == "S" ? '' : this.foiling } + + + `; + } + + static styles = css` + `; +} \ No newline at end of file diff --git a/fab-ui/src/fab-card.ts b/fab-ui/src/fab-card.ts index ef48d76..16970af 100644 --- a/fab-ui/src/fab-card.ts +++ b/fab-ui/src/fab-card.ts @@ -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` - ${this.rarity} - `; - } - - 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 {
- - ${this.setId} - ${this.name} - (${this.color}) - ${this.foiling == "S" ? '' : this.foiling } - +
`; diff --git a/fab-ui/src/main.ts b/fab-ui/src/main.ts index 343d34b..bbae67f 100644 --- a/fab-ui/src/main.ts +++ b/fab-ui/src/main.ts @@ -1,3 +1,4 @@ // Main entry for Vite. Import all custom elements here. import './fab-card.ts'; -import './fab-image.ts' \ No newline at end of file +import './fab-image.ts' +import './fab-card-title.ts' \ No newline at end of file