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

sync

Browse Source
This commit is contained in:
Alexandr Andreyev 2025-08-23 14:02:28 +03:00
parent 8c460a1819
commit ffa03b5a27
6 changed files with 81 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
fab-ui/fab-puzzle-grid.ts Normal file
View File

25
fab-ui/index.html
View File

@ -78,11 +78,34 @@
rarity="R"
></fab-card-printing>
</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>Dual Printings</h3>
<div class="cards-list"></div>
<h2>Cards Unique Visually</h2>
<p>Just images</p>
<div class="cards-list">
<fab-card-image setId="ROS152" name="Arcane Cussing"></fab-card-image>
<fab-card-image-block setId="ROS152" name="Arcane Cussing"></fab-card-image-block>
<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>
<h3>Macro Puzzle Grid</h3>
<fab-puzzle-grid></fab-puzzle-grid>
</body>
</html>

34
fab-ui/src/fab-image.ts → fab-ui/src/fab-card-image.ts
View File

@ -1,4 +1,4 @@
import { LitElement, css, html } from 'lit'
import { LitElement, css, html, type CSSResultGroup } from 'lit'
import { customElement, property } from 'lit/decorators.js'
@customElement('fab-card-image')
@ -10,20 +10,20 @@ export class FabCardImage extends LitElement {
render() {
return html`
<div class="card-img">
<img class="single-card-img" src="http://localhost:8000/p/${this.setId}/w400" alt="${this.name}">
<div class="fab-card-image">
<img class="single-card-img" src="http://localhost:8000/p/${this.setId}/w400" alt="${this.name}" title="${this.name}">
</div>
`;
}
static styles = css`
.card-img {
.fab-card-image {
position: relative;
width: 100%;
height: auto;
padding-bottom: 140%;
}
.card-img img {
.fab-card-image img {
position: absolute;
top: 0;
left: 0;
@ -31,7 +31,7 @@ export class FabCardImage extends LitElement {
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 {
.fab-card-image img.single-card-img {
width: 100%;
left: 0;
top: 0;
@ -41,3 +41,25 @@ export class FabCardImage extends LitElement {
}
`;
}
@customElement('fab-card-image-block')
export class FabCardImageBlock extends LitElement {
@property({ type: String })
setId = '';
@property({ type: String })
name = '';
render() {
return html`
<div class="fab-card-image-block">
<fab-card-image setId="${this.setId}" name="${this.name}"></fab-card-image>
</div>
`;
}
static styles = css`
.fab-card-image-block {
width: 220px;
}
`
}

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

@ -125,7 +125,7 @@ export class FabCardTitle extends LitElement {
render() {
return html`
<span class="card-title">
<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>
@ -138,5 +138,31 @@ export class FabCardTitle extends LitElement {
}
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%; }
}
`;
}

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

@ -1,6 +1,6 @@
import { LitElement, css, html } from 'lit'
import { customElement, property } from 'lit/decorators.js'
import { FabCardImage } from './fab-image';
import { FabCardImage } from './fab-card-image';
import { FabCardTitle } from './fab-card-title';
@customElement('fab-card-printing')
@ -46,31 +46,5 @@ export class FabCardPrinting extends LitElement {
padding: 10px;
font-size: 12px;
}
.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%; }
}
`;
}

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

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