feat: added WN8 to /today

src/components/Breakdown/components/Row.tsx

@@ -1,3 +1,4 @@
+import getWN8Percentile from '../../../core/blitz/getWN8Percentile.js';
 import { RowDiscriminator } from './RowDiscriminator.js';
 import { RowStat } from './RowStat.js';
 
@@ -22,8 +23,8 @@ export function Row({
   careerWinrate,
   WN8,
   careerWN8,
-  damage: averageDamage,
-  careerDamage: careerAverageDamage,
+  damage,
+  careerDamage,
   survival,
   careerSurvival,
   battles,
@@ -39,11 +40,17 @@ export function Row({
         career={`${(careerWinrate * 100).toFixed(2)}%`}
         delta={winrate - careerWinrate}
       />
+      <RowStat
+        name="WN8"
+        value={WN8.toFixed(0)}
+        career={careerWN8.toFixed(0)}
+        percentile={getWN8Percentile(WN8)}
+      />
       <RowStat
         name="Damage"
-        value={averageDamage.toFixed(2)}
-        career={careerAverageDamage.toFixed(2)}
-        delta={averageDamage - careerAverageDamage}
+        value={damage.toFixed(2)}
+        career={careerDamage.toFixed(2)}
+        delta={damage - careerDamage}
       />
       <RowStat
         name="Survival"

src/components/Breakdown/components/RowStat.tsx

@@ -1,13 +1,22 @@
+import { Percentile } from '../../../constants/percentiles.js';
 import { theme } from '../../../stitches.config.js';
+import PercentileIndicator from '../../PercentileIndicator.js';
 
 export interface RowStatProps {
   name: string;
   value: string;
   career: string;
   delta?: number;
+  percentile?: Percentile;
 }
 
-export function RowStat({ name, value, career, delta }: RowStatProps) {
+export function RowStat({
+  name,
+  value,
+  career,
+  delta,
+  percentile,
+}: RowStatProps) {
   return (
     <div
       style={{
@@ -31,7 +40,7 @@ export function RowStat({ name, value, career, delta }: RowStatProps) {
           justifyContent: 'center',
         }}
       >
-        {delta !== undefined && delta !== 0 && (
+        {percentile === undefined && delta !== undefined && delta !== 0 && (
           <img
             src={
               (delta ?? 0) > 0
@@ -41,6 +50,9 @@ export function RowStat({ name, value, career, delta }: RowStatProps) {
             style={{ width: 12, height: 12 }}
           />
         )}
+        {percentile !== undefined && (
+          <PercentileIndicator percentile={percentile} />
+        )}
 
         <span
           style={{