sync

fab-ui/index.html

@@ -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>

fab-ui/src/fab-card-image.ts

@@ -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">
+            <div class="fab-card-image">
-                <img class="single-card-img" src="http://localhost:8000/p/${this.setId}/w400" alt="${this.name}">
+                <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;
@@ -40,4 +40,26 @@ export class FabCardImage extends LitElement {
         z-index: 2;
     }
     `;
+}
+
+@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;
+    }
+    `
 }

fab-ui/src/fab-card-title.ts

@@ -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%; }
+    }
     `;
 }

fab-ui/src/fab-card.ts

@@ -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%; }
-    }
     `;
 }

fab-ui/src/main.ts

@@ -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'