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={{

src/components/GenericAllStats.tsx

@@ -17,7 +17,7 @@ export default function GenericAllStats({
         ['Winrate', `${(100 * (stats.wins / stats.battles)).toFixed(2)}%`],
         [
           'WN8',
-          supplementaryStats?.WN8.toFixed(0) ?? -Infinity,
+          supplementaryStats?.WN8.toFixed(0),
           supplementaryStats
             ? getWN8Percentile(supplementaryStats.WN8)
             : undefined,
@@ -31,7 +31,7 @@ export default function GenericAllStats({
         ['Wins', stats.wins],
         ['Losses', stats.losses],
         ['Average damage', (stats.damage_dealt / stats.battles).toFixed(0)],
-        ['Average tier', supplementaryStats?.tier.toFixed(2) ?? -Infinity],
+        ['Average tier', supplementaryStats?.tier.toFixed(2)],
         ['Average XP', (stats.xp / stats.battles).toFixed(0)],
         ['Average shots', (stats.shots / stats.battles).toFixed(2)],
         ['Average hits', (stats.hits / stats.battles).toFixed(2)],

src/components/GenericStats/components/GenericStatsRow.tsx

@@ -31,7 +31,7 @@ export default function GenericStatsRow({ stat }: GenericStatsRowProps) {
           gap: 4,
         }}
       >
-        {stat[2] && <PercentileIndicator percentile={stat[2]} />}
+        {stat[2] !== undefined && <PercentileIndicator percentile={stat[2]} />}
         {stat[1]}
       </span>
     </div>

src/components/GenericStats/index.tsx

@@ -2,8 +2,8 @@ import { Percentile } from '../../constants/percentiles.js';
 import GenericStatsColumn from './components/GenericStatsColumn.js';
 
 export type Stat =
-  | [string, string | number]
-  | [string, string | number, Percentile | undefined];
+  | [string, string | number | undefined]
+  | [string, string | number | undefined, Percentile | undefined];
 
 export interface GenericStatsProps {
   stats: Stat[];
@@ -14,9 +14,7 @@ export default function GenericStats({
   stats,
   columnCount = 2,
 }: GenericStatsProps) {
-  const filteredStats = stats.filter(
-    ([, value]) => `${value}` !== `${-Infinity}`,
-  );
+  const filteredStats = stats.filter(([, value]) => value !== undefined);
   const itemsPerRow = Math.ceil(filteredStats.length / columnCount);
   const columns: Stat[][] = [];
 

src/components/Wrapper.tsx

@@ -1,11 +1,25 @@
 import { ReactNode } from 'react';
 import { theme } from '../stitches.config.js';
 
-export interface WrapperProps {
-  children: ReactNode;
+export enum WrapperSize {
+  Regular,
+  Roomy,
 }
 
-export default function Wrapper({ children }: WrapperProps) {
+export interface WrapperProps {
+  children: ReactNode;
+  size?: WrapperSize;
+}
+
+export const WRAPPER_SIZE_WIDTHS: Record<WrapperSize, number> = {
+  [WrapperSize.Regular]: 640,
+  [WrapperSize.Roomy]: 800,
+};
+
+export default function Wrapper({
+  children,
+  size = WrapperSize.Regular,
+}: WrapperProps) {
   return (
     <div
       style={{
@@ -13,7 +27,7 @@ export default function Wrapper({ children }: WrapperProps) {
         flexDirection: 'column',
         padding: 16,
         gap: 32,
-        width: 640,
+        width: WRAPPER_SIZE_WIDTHS[size],
         background: 'url(https://i.imgur.com/PhS06NJ.png)',
         color: theme.colors.textHighContrast,
       }}