feat: dynamic sizing

src/assets/stars.tsx

@@ -8,8 +8,8 @@ export const star = (key: number) => (
     style={{
       fill: "rgba(255,204,50)",
       filter: "drop-shadow(#e3721b 0px 0px 1px)",
-      height: 20,
+      height: ".7em",
-      width: 20,
+      width: ".7em",
     }}
   >
     <title>Star</title>

src/v1/card.tsx

@@ -92,10 +92,10 @@ export function card(app: App) {
           async ({
             params: { uid, char: charId },
             store: { start },
-            query: { debug },
+            query: { debug, h: height = 1024 },
           }) => {
             try {
-              // const data = mockData;
+              // #region Data fetching
               const [[avatarStore, weaponStore, relicStore, locs], data] =
                 await Promise.all([
                   deduper.acquire("stores", () =>
@@ -146,6 +146,7 @@ export function card(app: App) {
                 }
               }
 
+              // #region Assets loading
               const resources = await Promise.all([
                 assets
                   .load(
@@ -198,6 +199,7 @@ export function card(app: App) {
                 `${Date.now() - start}ms - Image resources loaded\n${resources.map((r) => `- ${r.src} ${(r.data.byteLength / 1000).toFixed(2)}Kb`).join("\n")}`,
               );
 
+              // #region Processing
               const charLvl = char.propMap?.[4001].val ?? 1;
               const ascension = char.propMap?.[1002].val ?? 1;
               const promoteMaxLevelMap = [20, 40, 50, 60, 70, 80, 90, 100];
@@ -208,6 +210,7 @@ export function card(app: App) {
                 (charLvl > 90 ? 10 : 0);
 
               const statRows = buildDisplayRows(char, locs);
+              const artifacts = char.equipList;
 
               if (debug) {
                 console.log(
@@ -234,8 +237,11 @@ export function card(app: App) {
                 );
               }
 
+              // #region Rendering
               const res = new ImageResponse(
-                <div tw="relative text-[32.25px] text-white rounded-xl overflow-hidden">
+                <div
+                  tw={`relative text-[${32.25 * (height / 1024)}px] text-white rounded-[.5em] overflow-hidden`}
+                >
                   <div tw="aspect-[1218/508] h-full">
                     <img
                       src={`/bg-${avatar.Element}`}
@@ -270,7 +276,7 @@ export function card(app: App) {
                           width="16"
                           height="16"
                           viewBox="0 0 100 100"
-                          tw="mt-[.2em]"
+                          tw="mt-[.2em] h-[.5em] w-[.5em]"
                         >
                           <title>doritos</title>
                           <polygon
@@ -501,7 +507,7 @@ export function card(app: App) {
                 </div>,
                 {
                   fonts: [await font.arrayBuffer()],
-                  height: 1024,
+                  height,
                   persistentImages: [
                     { data: await shade.arrayBuffer(), src: "shade" },
                   ],
@@ -558,6 +564,7 @@ export function card(app: App) {
             query: t.Object(
               {
                 debug: t.Optional(t.String()),
+                h: t.Optional(t.Number({ default: 1024 })),
               },
               { additionalProperties: true },
             ),