feat: rough implementation of stats table

src/v1/card.tsx

@@ -25,6 +25,7 @@ import { WeaponGlazeSvg } from "@/assets/weapon-glaze";
 import { AssetManager, getEnkaStores } from "@/lib/assets";
 import { Deduplicator } from "@/lib/dedupe";
 import { mockData } from "@/lib/mock";
+import { buildDisplayRows } from "@/lib/rows";
 import { PercentageFightProp } from "@/type/fightPropMap";
 
 const assets = new AssetManager();
@@ -184,6 +185,10 @@ export function card(app: App) {
               const charLvlMax =
                 promoteMaxLevelMap[char.propMap?.[1002].val ?? 1];
 
+              const statRows = buildDisplayRows(char, locs);
+
+              console.log(statRows);
+
               const res = new ImageResponse(
                 <div tw="relative text-[32.25px] text-white rounded-xl overflow-hidden">
                   <div tw="aspect-[1218/508] h-full">
@@ -388,6 +393,44 @@ export function card(app: App) {
                         </div>
                       </div>
                     </div>
+                    {/* stats table */}
+                    <div tw="text-white flex flex-col pt-[1.5em] pr-[3%] grow text-[.95em] justify-between">
+                      <div /> {/* justify spacer */}
+                      {statRows.map((r, i) => (
+                        <div tw="flex items-center whitespace-nowrap">
+                          <EnkaIcon
+                            icon={
+                              (
+                                {
+                                  FIGHT_PROP_MAX_HP: "FIGHT_PROP_HP",
+                                  FIGHT_PROP_CUR_ATTACK: "FIGHT_PROP_ATTACK",
+                                  FIGHT_PROP_CUR_DEFENSE: "FIGHT_PROP_DEFENSE",
+                                } satisfies Record<string, keyof typeof library>
+                              )[r.key] || (r.key as keyof typeof library)
+                            }
+                            tw="h-[1em] mr-[.8em] -mt-[.05em]"
+                          />
+                          <div tw="flex grow justify-between">
+                            <div>{r.name}</div>
+                            <div tw={i < 3 ? "-top-[.3em]" : ""}>
+                              {r.formatted}
+                            </div>
+                          </div>
+                          {i < 3 && (
+                            <div tw="text-[.8em] opacity-70 absolute w-full -bottom-[.75em]">
+                              <div tw="flex grow justify-end">
+                                <div>
+                                  {Math.round(r.base)}
+                                  <div tw="text-[#82ff9a]">
+                                    +{Math.round(r.delta)}
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          )}
+                        </div>
+                      ))}
+                    </div>
                   </div>
                   {/* right section */}
                   <div tw="absolute top-0 bottom-0 right-0 w-[23.1em] p-[.7em]"></div>