Compare commits
No commits in common. "092b6d10225ee79aa3fdeefbca2651f140a47dca" and "c0353dc2c0a05a5a4ac22d4a826e200132da8edc" have entirely different histories.
092b6d1022
...
c0353dc2c0
@ -2,6 +2,7 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
|
<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>FaB Cards</title>
|
<title>FaB Cards</title>
|
||||||
<link rel="stylesheet" href="./src/index.css" />
|
<link rel="stylesheet" href="./src/index.css" />
|
||||||
@ -9,47 +10,7 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h2>Card Printings</h2>
|
<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">
|
<div class="cards-list">
|
||||||
<fab-card-printing
|
<fab-card-printing
|
||||||
setId="ROS152"
|
setId="ROS152"
|
||||||
@ -79,82 +40,11 @@
|
|||||||
rarity="R"
|
rarity="R"
|
||||||
></fab-card-printing>
|
></fab-card-printing>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Foiling</h3>
|
|
||||||
<div class="cards-list">
|
|
||||||
<fab-card-printing
|
|
||||||
setId="HNT076"
|
|
||||||
name="Art of the Dragon: Scale"
|
|
||||||
color="Red"
|
|
||||||
rarity="R"
|
|
||||||
foiling="R"
|
|
||||||
></fab-card-printing>
|
|
||||||
<fab-card-printing
|
|
||||||
setId="HNT076"
|
|
||||||
name="Art of the Dragon: Scale"
|
|
||||||
color="Red"
|
|
||||||
rarity="R"
|
|
||||||
foiling="C"
|
|
||||||
></fab-card-printing>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h3>Multiple Copies of a Card</h3>
|
|
||||||
<div class="cards-list">
|
|
||||||
<fab-card-printing-multiplied
|
|
||||||
num="3"
|
|
||||||
setId="ROS152"
|
|
||||||
name="Arcane Cussing"
|
|
||||||
color="Red"
|
|
||||||
rarity="C"
|
|
||||||
></fab-card-printing-multiplied>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h3>Card not Available</h3>
|
|
||||||
<div class="cards-list">
|
|
||||||
<fab-card-printing
|
|
||||||
setId="ROS155"
|
|
||||||
name="Deadwood Dirge"
|
|
||||||
color="Red"
|
|
||||||
rarity="C"
|
|
||||||
available=0
|
|
||||||
></fab-card-printing>
|
|
||||||
<fab-card-printing
|
|
||||||
setId="ROS155"
|
|
||||||
name="Deadwood Dirge"
|
|
||||||
color="Red"
|
|
||||||
rarity="C"
|
|
||||||
num=3
|
|
||||||
available=1
|
|
||||||
></fab-card-printing>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h3>Dual Printings</h3>
|
<h3>Dual Printings</h3>
|
||||||
<div class="cards-list"></div>
|
<div class="cards-list"></div>
|
||||||
|
|
||||||
<h2>Cards Unique Visually</h2>
|
<h2>Cards Unique Visually</h2>
|
||||||
|
|
||||||
<p>Basic images</p>
|
|
||||||
<div class="cards-list">
|
<div class="cards-list">
|
||||||
<fab-card-image-block setId="ROS152" name="Arcane Cussing"></fab-card-image-block>
|
<fab-card-image setId="ROS152" name="Arcane Cussing"></fab-card-image>
|
||||||
<fab-card-image-block setId="ROS153" name="Arcane Cussing"></fab-card-image-block>
|
|
||||||
<fab-card-image-block setId="ROS154" name="Arcane Cussing"></fab-card-image-block>
|
|
||||||
<fab-card-image-block setId="HNT076" name="Art of the Dragon: Scale"></fab-card-image-block>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>Multiplied</p>
|
|
||||||
<div class="cards-list">
|
|
||||||
<fab-card-image-block setId="ROS152" name="Arcane Cussing" num="3"></fab-card-image-block>
|
|
||||||
<fab-card-image-block setId="ROS153" name="Arcane Cussing" num="2"></fab-card-image-block>
|
|
||||||
<fab-card-image-block setId="ROS154" name="Arcane Cussing" num="5"></fab-card-image-block>
|
|
||||||
<fab-card-image-block setId="HNT076" name="Art of the Dragon: Scale"></fab-card-image-block>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p>Marvels and Alternate Arts</p>
|
|
||||||
<div class="cards-list">
|
|
||||||
</div>
|
|
||||||
<h3>Macro Puzzle Grid</h3>
|
|
||||||
<fab-puzzle-grid></fab-puzzle-grid>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
1
fab-ui/public/vite.svg
Normal file
1
fab-ui/public/vite.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
@ -1,21 +0,0 @@
|
|||||||
|
|
||||||
export const FabCardColor = {
|
|
||||||
RED: "Red",
|
|
||||||
YELLOW: "Yellow",
|
|
||||||
BLUE: "Blue",
|
|
||||||
} as const;
|
|
||||||
|
|
||||||
export function colorToNumber(color: typeof FabCardColor[keyof typeof FabCardColor]): number {
|
|
||||||
switch (color) {
|
|
||||||
case FabCardColor.RED:
|
|
||||||
return 1;
|
|
||||||
case FabCardColor.YELLOW:
|
|
||||||
return 2;
|
|
||||||
case FabCardColor.BLUE:
|
|
||||||
return 3;
|
|
||||||
default:
|
|
||||||
return 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// export type FabCardColor = typeof FabCardColor[keyof typeof FabCardColor];
|
|
||||||
@ -1,111 +0,0 @@
|
|||||||
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 = '';
|
|
||||||
@property({ type: String })
|
|
||||||
is_available = "true";
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return html`
|
|
||||||
<div class="fab-card-image ${this.is_available == "true" ? '' : 'not-available'}">
|
|
||||||
<img
|
|
||||||
class="single-card-img"
|
|
||||||
src="http://localhost:8000/p/${this.setId}/w400"
|
|
||||||
alt="${this.name}"
|
|
||||||
title="${this.name}"
|
|
||||||
></div>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
static styles = css`
|
|
||||||
.fab-card-image {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
padding-bottom: 140%;
|
|
||||||
}
|
|
||||||
.fab-card-image img {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 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;
|
|
||||||
}
|
|
||||||
.fab-card-image.not-available img {
|
|
||||||
filter: grayscale(90%) opacity(100%);
|
|
||||||
}
|
|
||||||
.fab-card-image img.single-card-img {
|
|
||||||
width: 100%;
|
|
||||||
left: 0;
|
|
||||||
position: absolute;
|
|
||||||
transform: none;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
@customElement('fab-card-image-multiplied')
|
|
||||||
export class FabCardImageMultiplied extends FabCardImage {
|
|
||||||
@property({ type: String })
|
|
||||||
setId = '';
|
|
||||||
@property({ type: String })
|
|
||||||
name = '';
|
|
||||||
@property({ type: Number })
|
|
||||||
num = 1;
|
|
||||||
@property({ type: Number })
|
|
||||||
available = 100;
|
|
||||||
|
|
||||||
render() {
|
|
||||||
let cardImages = [];
|
|
||||||
|
|
||||||
for (let i = 0; i < this.num; i++) {
|
|
||||||
// Just to ensure reactivity
|
|
||||||
cardImages.push(html`
|
|
||||||
<fab-card-image
|
|
||||||
setId="${this.setId}"
|
|
||||||
name="${this.name}"
|
|
||||||
is_available="${i < this.available}"
|
|
||||||
style="display: flex; box-sizing: border-box; margin: ${i == 0 ? 0 : -124}% 0px 0px;"
|
|
||||||
></fab-card-image>
|
|
||||||
`);
|
|
||||||
}
|
|
||||||
|
|
||||||
return html`
|
|
||||||
<div class="fab-card-image-multiplied" style="box-sizing: border-box;">
|
|
||||||
${cardImages}
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@customElement('fab-card-image-block')
|
|
||||||
export class FabCardImageBlock extends LitElement {
|
|
||||||
@property({ type: String })
|
|
||||||
setId = '';
|
|
||||||
@property({ type: String })
|
|
||||||
name = '';
|
|
||||||
@property({ type: Number })
|
|
||||||
num = 1;
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return html`
|
|
||||||
<div class="fab-card-image-block">
|
|
||||||
<fab-card-image-multiplied setId="${this.setId}" name="${this.name}" num="${this.num}"></fab-card-image>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
static styles = css`
|
|
||||||
.fab-card-image-block {
|
|
||||||
width: 220px;
|
|
||||||
border-radius: 10px;
|
|
||||||
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
|
|
||||||
}
|
|
||||||
`
|
|
||||||
}
|
|
||||||
@ -1,168 +0,0 @@
|
|||||||
import { LitElement, css, html } from 'lit'
|
|
||||||
import { customElement, property } from 'lit/decorators.js'
|
|
||||||
import { FabCardColor, colorToNumber } from './enums';
|
|
||||||
|
|
||||||
@customElement("fab-pitch-circles")
|
|
||||||
export class FabPitchCircles extends LitElement {
|
|
||||||
static SYMBOL = '●️';
|
|
||||||
|
|
||||||
@property({ type: FabCardColor })
|
|
||||||
color = null;
|
|
||||||
|
|
||||||
render() {
|
|
||||||
let num: number;
|
|
||||||
if (this.color !== null) {
|
|
||||||
num = colorToNumber(this.color);
|
|
||||||
} else {
|
|
||||||
num = 0;
|
|
||||||
}
|
|
||||||
return html`
|
|
||||||
<span class="pitch-circles pitch-circles-${this.color ? String(this.color).toLowerCase() : 'none'}">
|
|
||||||
${FabPitchCircles.SYMBOL.repeat(num)}
|
|
||||||
</span>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
static styles = css`
|
|
||||||
.pitch-circles {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
.pitch-circles-red {
|
|
||||||
color: red;
|
|
||||||
}
|
|
||||||
.pitch-circles-yellow {
|
|
||||||
color: #FFD600;
|
|
||||||
}
|
|
||||||
.pitch-circles-blue {
|
|
||||||
color: blue;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
@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-printing-id')
|
|
||||||
export class FabPrintingId extends LitElement {
|
|
||||||
@property({ type: String })
|
|
||||||
setId = '';
|
|
||||||
@property({ type: Number })
|
|
||||||
number = 0;
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return html`
|
|
||||||
<span class="printing-id">
|
|
||||||
<span class="set-id">${this.setId}</span><span class="set-number">${String(this.number).padStart(3, '0')}</span></span>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
static styles = css`
|
|
||||||
.printing-id {
|
|
||||||
font-family: "Geist Mono", monospace;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
@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 ${this.foiling != 'S' ? (this.foiling == 'R' ? 'rainbow-foiling' : 'cold-foiling') : ''}">
|
|
||||||
<fab-rarity-symbol rarity="${this.rarity}"></fab-rarity-symbol>
|
|
||||||
<fab-printing-id setId="${this.setId.slice(0, 3)}" number="${this.setId.slice(3)}"></fab-printing-id>
|
|
||||||
<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>
|
|
||||||
<fab-pitch-circles color="${this.color}"></fab-pitch-circles>
|
|
||||||
<!--<span class="comment">${this.comment}</span>-->
|
|
||||||
</span>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
static styles = css`
|
|
||||||
.rainbow-foiling .card-name {
|
|
||||||
background: linear-gradient(90deg, #ffb347, #ffcc33, #b4ffb3, #b3d1ff, #e0b3ff, #ffb3d1, #ffb347);
|
|
||||||
background-size: 200% 200%;
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
text-shadow: 0 1px 2px rgba(0,0,0,0.08);
|
|
||||||
animation: rainbow-move 3s linear infinite alternate;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
@keyframes rainbow-move {
|
|
||||||
0% { background-position: 0% 50%; }
|
|
||||||
100% { background-position: 100% 50%; }
|
|
||||||
}
|
|
||||||
.cold-foiling .card-name {
|
|
||||||
background: linear-gradient(90deg, #b3e0ff, #e6e6e6, #b3e0ff, #e6e6e6, #b3e0ff);
|
|
||||||
background-size: 200% 200%;
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
text-shadow: 0 1px 2px rgba(0,0,0,0.08);
|
|
||||||
animation: cold-move 2.5s linear infinite alternate;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
@keyframes cold-move {
|
|
||||||
0% { background-position: 0% 50%; }
|
|
||||||
100% { background-position: 100% 50%; }
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
@ -1,5 +1,52 @@
|
|||||||
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")
|
||||||
|
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-printing')
|
@customElement('fab-card-printing')
|
||||||
export class FabCardPrinting extends LitElement {
|
export class FabCardPrinting extends LitElement {
|
||||||
@ -15,24 +62,18 @@ export class FabCardPrinting extends LitElement {
|
|||||||
comment = '';
|
comment = '';
|
||||||
@property({ type: String })
|
@property({ type: String })
|
||||||
foiling = 'S';
|
foiling = 'S';
|
||||||
@property({ type: Number })
|
|
||||||
num = 1;
|
|
||||||
@property({ type: Number })
|
|
||||||
available = 100;
|
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return html`
|
return html`
|
||||||
<div class="card ${this.available ? '' : 'not-available'} ${this.foiling != 'S' ? (this.foiling == 'R' ? 'rainbow-foiling' : 'cold-foiling') : ''}">
|
<div class="card ${this.foiling != 'S' ? (this.foiling == 'R' ? 'rainbow-foiling' : 'cold-foiling') : ''}">
|
||||||
<fab-card-image-multiplied setId="${this.setId}" name="${this.name}" num="${this.num}" available="${this.available}"></fab-card-image-multiplied>
|
<fab-card-image setId="${this.setId}" name="${this.name}"></fab-card-image>
|
||||||
<div class="card-details">
|
<div class="card-details">
|
||||||
<fab-card-title
|
<fab-rarity-symbol rarity="${this.rarity}"></fab-rarity-symbol>
|
||||||
setId="${this.setId}"
|
<span class="printing-id">${this.setId}</span>
|
||||||
name="${this.name}"
|
<span class="card-name">${this.name}</span>
|
||||||
color="${this.color}"
|
<span class="card-color color-${this.color.toLowerCase()}">(${this.color})</span>
|
||||||
rarity="${this.rarity}"
|
<span class="card-foiling">${this.foiling == "S" ? '' : this.foiling }</span>
|
||||||
foiling="${this.foiling}"
|
<!--<span class="comment">${this.comment}</span>-->
|
||||||
comment="${this.comment}"
|
|
||||||
></fab-card-title>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
@ -48,41 +89,36 @@ export class FabCardPrinting extends LitElement {
|
|||||||
padding: 10px;
|
padding: 10px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
`;
|
.printing-id {
|
||||||
}
|
font-family: "Geist Mono", monospace;
|
||||||
|
font-weight: bold;
|
||||||
@customElement('fab-card-printing-multiplied')
|
color: #666;
|
||||||
export class FabCardPrintingMultiplied 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';
|
|
||||||
@property({ type: Number })
|
|
||||||
num = 1;
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return html`
|
|
||||||
<div class="card ${this.foiling != 'S' ? (this.foiling == 'R' ? 'rainbow-foiling' : 'cold-foiling') : ''}">
|
|
||||||
<fab-card-image-multiplied setId="${this.setId}" name="${this.name}" num="${this.num}"></fab-card-image-multiplied>
|
|
||||||
<div class="card-details">
|
|
||||||
<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>
|
|
||||||
`;
|
|
||||||
}
|
}
|
||||||
|
.rainbow-foiling .card-name {
|
||||||
|
background: linear-gradient(90deg, #ffb347, #ffcc33, #b4ffb3, #b3d1ff, #e0b3ff, #ffb3d1, #ffb347);
|
||||||
|
background-size: 200% 200%;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
text-shadow: 0 1px 2px rgba(0,0,0,0.08);
|
||||||
|
animation: rainbow-move 3s linear infinite alternate;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
@keyframes rainbow-move {
|
||||||
|
0% { background-position: 0% 50%; }
|
||||||
|
100% { background-position: 100% 50%; }
|
||||||
|
}
|
||||||
|
.cold-foiling .card-name {
|
||||||
|
background: linear-gradient(90deg, #b3e0ff, #e6e6e6, #b3e0ff, #e6e6e6, #b3e0ff);
|
||||||
|
background-size: 200% 200%;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
text-shadow: 0 1px 2px rgba(0,0,0,0.08);
|
||||||
|
animation: cold-move 2.5s linear infinite alternate;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
@keyframes cold-move {
|
||||||
|
0% { background-position: 0% 50%; }
|
||||||
|
100% { background-position: 100% 50%; }
|
||||||
|
}
|
||||||
|
`;
|
||||||
}
|
}
|
||||||
43
fab-ui/src/fab-image.ts
Normal file
43
fab-ui/src/fab-image.ts
Normal 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;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
}
|
||||||
@ -1,4 +1,3 @@
|
|||||||
// Main entry for Vite. Import all custom elements here.
|
// Main entry for Vite. Import all custom elements here.
|
||||||
import './fab-card.ts';
|
import './fab-card.ts';
|
||||||
import './fab-card-image.ts'
|
import './fab-image.ts'
|
||||||
import './fab-card-title.ts'
|
|
||||||
Loading…
Reference in New Issue
Block a user