feat: satori and resvg for rendering

src/components/Breakdown/components/Root.tsx

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+
+export interface RootProps {
+  children: ReactNode;
+}
+
+export function Root({ children }: RootProps) {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      {children}
+    </div>
+  );
+}

src/components/Breakdown/components/Row.tsx

@@ -0,0 +1,61 @@
+import { RowDiscriminator } from './RowDiscriminator.js';
+import { RowStat } from './RowStat.js';
+
+export interface RowProps {
+  name: string;
+  winrate: number;
+  careerWinrate: number;
+  WN8: number;
+  careerWN8: number;
+  damage: number;
+  careerDamage: number;
+  survival: number;
+  careerSurvival: number;
+  battles: number;
+  careerBattles: number;
+  icon?: string;
+}
+
+export function Row({
+  name,
+  winrate,
+  careerWinrate,
+  WN8,
+  careerWN8,
+  damage: averageDamage,
+  careerDamage: careerAverageDamage,
+  survival,
+  careerSurvival,
+  battles,
+  careerBattles,
+  icon,
+}: RowProps) {
+  return (
+    <div style={{ display: 'flex', gap: 16 }}>
+      <RowDiscriminator name={name} icon={icon} />
+      <RowStat
+        name="Winrate"
+        value={`${(winrate * 100).toFixed(2)}%`}
+        career={`${(careerWinrate * 100).toFixed(2)}%`}
+        delta={winrate - careerWinrate}
+      />
+      <RowStat
+        name="Damage"
+        value={averageDamage.toFixed(2)}
+        career={careerAverageDamage.toFixed(2)}
+        delta={averageDamage - careerAverageDamage}
+      />
+      <RowStat
+        name="Survival"
+        value={`${(survival * 100).toFixed(2)}%`}
+        career={`${(careerSurvival * 100).toFixed(2)}%`}
+        delta={survival - careerSurvival}
+      />
+      <RowStat
+        name="Battles"
+        value={battles.toFixed(0)}
+        career={careerBattles.toFixed(0)}
+      />
+    </div>
+  );
+}

src/components/Breakdown/components/RowDiscriminator.tsx

@@ -0,0 +1,42 @@
+export interface RowDiscriminatorProps {
+  name: string;
+  icon?: string;
+}
+
+export function RowDiscriminator({ name, icon }: RowDiscriminatorProps) {
+  return (
+    <div
+      style={{
+        flex: 1,
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%',
+        boxSizing: 'border-box',
+        width: 0,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      {icon && (
+        <img
+          src={icon}
+          style={{ width: '100%', flex: 1, objectFit: 'cover' }}
+        />
+      )}
+      <span
+        style={{
+          color: '#A0A0A0',
+          fontSize: 16,
+          textAlign: 'center',
+          display: 'block',
+          whiteSpace: 'nowrap',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          maxWidth: '100%',
+        }}
+      >
+        {name}
+      </span>
+    </div>
+  );
+}

src/components/Breakdown/components/RowStat.tsx

@@ -0,0 +1,49 @@
+export interface RowStatProps {
+  name: string;
+  value: string;
+  career: string;
+  delta?: number;
+}
+
+export function RowStat({ name, value, career, delta }: RowStatProps) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 4,
+        alignItems: 'center',
+        justifyContent: 'center',
+        flex: 1,
+      }}
+    >
+      <span style={{ color: '#A0A0A0', fontSize: 12 }}>{career}</span>
+
+      <div
+        style={{
+          display: 'flex',
+          gap: 4,
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        {delta && (
+          <img
+            src={
+              (delta ?? 0) > 0
+                ? 'https://i.imgur.com/qbjiXa1.png'
+                : 'https://i.imgur.com/3uyNhun.png'
+            }
+            style={{ width: 12, height: 12 }}
+          />
+        )}
+
+        <span style={{ color: 'white', fontSize: 16, fontWeight: 'bold' }}>
+          {value}
+        </span>
+      </div>
+
+      <span style={{ color: '#A0A0A0', fontSize: 12 }}>{name}</span>
+    </div>
+  );
+}

src/components/Breakdown/index.ts

@@ -0,0 +1,4 @@
+export * from './components/Root.js';
+export * from './components/Row.js';
+export * from './components/RowDiscriminator.js';
+export * from './components/RowStat.js';