feat: artifact set display

global.d.ts

@@ -3,6 +3,11 @@ declare module "*.woff2" {
   export default file;
 }
 
+declare module "*.woff" {
+  const file: string;
+  export default file;
+}
+
 declare module "*.svg" {
   const file: string;
   export default file;

src/v1/card.tsx

@@ -18,6 +18,7 @@ import { featherImage } from "@/assets/feather";
 import { EnkaIcon } from "@/assets/icons";
 import { library } from "@/assets/icons-library";
 import shadeSvg from "@/assets/shade.svg" with { type: "file" };
+import iconFontFile from "@/assets/shicon.woff" with { type: "file" };
 import fontFile from "@/assets/shinshin.woff2" with { type: "file" };
 import { star } from "@/assets/stars";
 import { TalentSvg } from "@/assets/talent";
@@ -35,6 +36,7 @@ const cache = new TTLCache();
 const deduper = new Deduplicator();
 
 const font = file(fontFile);
+const iconFont = file(iconFontFile);
 const shade = file(shadeSvg);
 
 queueMicrotask(async () => {
@@ -520,8 +522,8 @@ export function card(app: App) {
                       </div>
                     </div>
                     {/* stats table */}
-                    <div tw="text-white flex flex-col pt-[1.5em] pr-[3%] grow text-[.95em] justify-between">
+                    <div tw="text-white flex flex-col pt-[2em] pr-[3%] grow text-[.95em] justify-between">
-                      <div /> {/* justify spacer */}
+                      {/* <div /> justify spacer */}
                       {statRows.map((r, i) => (
                         <div tw="flex items-center whitespace-nowrap">
                           <EnkaIcon
@@ -556,6 +558,29 @@ export function card(app: App) {
                           )}
                         </div>
                       ))}
+                      <div
+                        tw="flex w-full pt-[.5em] gap-[.5em]"
+                        style={{
+                          textShadow:
+                            "0 .08em .1em rgba(0,0,0,.4),0 .1em .3em rgba(0,0,0,.4)",
+                        }}
+                      >
+                        <div tw="w-[2em] h-[2em] shrink-0 text-[1.15em] bg-[#00000030] flex justify-center items-center font-[shicon] leading-[2.3em] rounded-[.2em]">
+                          
+                        </div>
+                        <div tw="flex flex-col grow justify-center gap-[.1em]">
+                          {artifactSets.map((s) => (
+                            <div tw="flex text-[.9em]">
+                              <div tw="grow flex justify-center items-center leading-none text-[#90ee90] whitespace-nowrap overflow-ellipsis overflow-hidden px-[.3em]">
+                                {s.set}
+                              </div>
+                              <div tw="bg-[#00000030] rounded-[.2em] justify-center items-center w-[2em] ml-[.5em] shrink-0">
+                                {s.count}
+                              </div>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
                     </div>
                   </div>
                   {/* right section */}
@@ -629,7 +654,10 @@ export function card(app: App) {
                   </div>
                 </div>,
                 {
-                  fonts: [await font.arrayBuffer()],
+                  fonts: [
+                    await font.arrayBuffer(),
+                    await iconFont.arrayBuffer(),
+                  ],
                   height,
                   persistentImages: [
                     { data: await shade.arrayBuffer(), src: "shade" },