feat: new /stats

src/components/AllStatsOverview/index.tsx

@@ -0,0 +1,97 @@
+import { AllStats, SupplementaryStats } from '../../types/accountInfo.js';
+import { WN8Display } from './components/WN8Display/index.js';
+import {
+  WN8SurroundingStat,
+  WN8SurroundingStatAlign,
+} from './components/WN8SurroundingStat.js';
+
+export interface AllStatsOverviewProps {
+  stats: AllStats;
+  supplementaryStats: SupplementaryStats;
+}
+
+export default function AllStatsOverview({
+  stats,
+  supplementaryStats,
+}: AllStatsOverviewProps) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        gap: -64,
+        // alignItems: 'center',
+        // justifyContent: 'center',
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 8,
+          alignItems: 'flex-end',
+          flex: 1,
+        }}
+      >
+        <WN8SurroundingStat
+          label="Battles"
+          value={stats.battles.toLocaleString()}
+          align={WN8SurroundingStatAlign.Right}
+        />
+        <WN8SurroundingStat
+          label="Winrate"
+          value={`${(100 * (stats.wins / stats.battles)).toFixed(2)}%`}
+          align={WN8SurroundingStatAlign.Right}
+          padded
+        />
+        <WN8SurroundingStat
+          label="Damage"
+          value={Math.round(
+            stats.damage_dealt / stats.battles,
+          ).toLocaleString()}
+          align={WN8SurroundingStatAlign.Right}
+          padded
+        />
+        <WN8SurroundingStat
+          label="Dmg. ratio"
+          value={(stats.damage_dealt / stats.damage_received).toFixed(2)}
+          align={WN8SurroundingStatAlign.Right}
+        />
+      </div>
+
+      <WN8Display WN8={supplementaryStats.WN8} />
+
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 8,
+          flex: 1,
+        }}
+      >
+        <WN8SurroundingStat
+          label="Tier"
+          value={supplementaryStats.tier.toFixed(2)}
+        />
+        <WN8SurroundingStat
+          label="Survival"
+          value={`${(100 * (stats.survived_battles / stats.battles)).toFixed(
+            2,
+          )}%`}
+          padded
+        />
+        <WN8SurroundingStat
+          label="Accuracy"
+          value={`${(100 * (stats.hits / stats.shots)).toFixed(2)}%`}
+          padded
+        />
+        <WN8SurroundingStat
+          label="Kill ratio"
+          value={(
+            stats.frags /
+            (stats.battles - stats.survived_battles)
+          ).toFixed(2)}
+        />
+      </div>
+    </div>
+  );
+}