feat: updated /today with figma

src/components/Breakdown/components/Row.tsx

@@ -1,6 +1,7 @@
 import getWN8Percentile from '../../../core/blitz/getWN8Percentile';
+import { TankType } from '../../../core/blitz/tankopedia';
 import { theme } from '../../../stitches.config';
-import { RowDiscriminator } from './RowDiscriminator';
+import { TREE_TYPE_ICONS, TreeTypeEnum } from '../../Tanks';
 import { RowStat } from './RowStat';
 
 export interface RowProps {
@@ -13,14 +14,14 @@ export interface RowProps {
   careerDamage: number;
   battles: number;
   careerBattles: number;
-  icon?: string;
   minimized: boolean;
-  isListing: boolean;
+  isTank: boolean;
-  naked?: boolean;
+  treeType?: TreeTypeEnum;
+  tankType?: TankType;
 }
 
 export function Row({
-  isListing,
+  isTank,
   minimized,
   name,
   winrate,
@@ -31,45 +32,85 @@ export function Row({
   careerDamage,
   battles,
   careerBattles,
-  icon,
+  treeType,
-  naked,
+  tankType,
 }: RowProps) {
   return (
     <div
       style={{
         display: 'flex',
+        flexDirection: 'column',
         borderRadius: 4,
-        backgroundColor: isListing
+        backgroundColor: theme.colors.appBackground2,
-          ? theme.colors.componentInteractive
+        overflow: 'hidden',
-          : theme.colors.appBackground2,
-        padding: 8,
       }}
     >
-      <RowDiscriminator minimized={minimized} name={name} icon={icon} />
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: 8,
+          gap: 4,
+          backgroundColor: theme.colors.componentInteractive,
+        }}
+      >
+        {isTank && treeType !== undefined && tankType !== undefined && (
+          <img
+            src={TREE_TYPE_ICONS[treeType][tankType]}
+            style={{ width: 16, height: 16 }}
+          />
+        )}
+        <span
+          style={{
+            color: isTank
+              ? treeType === TreeTypeEnum.Collector
+                ? theme.colors.textLowContrast_blue
+                : treeType === TreeTypeEnum.Premium
+                ? theme.colors.textLowContrast_amber
+                : theme.colors.textHighContrast
+              : theme.colors.textLowContrast,
+            fontWeight: 900,
+            fontSize: 16,
+          }}
+        >
+          {name}
+        </span>
+      </div>
 
-      <RowStat
+      <div
-        minimized={minimized}
+        style={{
-        name={`Winrate • ${(careerWinrate * 100).toFixed(2)}%`}
+          display: 'flex',
-        value={`${(winrate * 100).toFixed(2)}%`}
+          paddingTop: 8,
-        delta={winrate - careerWinrate}
+          paddingBottom: 8,
-      />
+        }}
-      <RowStat
+      >
-        minimized={minimized}
+        <RowStat
-        name={`WN8 • ${careerWN8 === undefined ? '--' : careerWN8.toFixed(0)}`}
+          minimized={minimized}
-        value={WN8 === undefined ? '--' : WN8.toFixed(0)}
+          name={`Battles • ${careerBattles.toFixed(0)}`}
-        percentile={WN8 === undefined ? undefined : getWN8Percentile(WN8)}
+          value={battles.toFixed(0)}
-      />
+        />
-      <RowStat
+        <RowStat
-        minimized={minimized}
+          minimized={minimized}
-        name={`Damage • ${careerDamage.toFixed(0)}`}
+          name={`Winrate • ${(careerWinrate * 100).toFixed(2)}%`}
-        value={damage.toFixed(0)}
+          value={`${(winrate * 100).toFixed(2)}%`}
-        delta={damage - careerDamage}
+          delta={winrate - careerWinrate}
-      />
+        />
-      <RowStat
+        <RowStat
-        minimized={minimized}
+          minimized={minimized}
-        name={`Battles • ${careerBattles.toFixed(0)}`}
+          name={`WN8 • ${
-        value={battles.toFixed(0)}
+            careerWN8 === undefined ? '--' : careerWN8.toFixed(0)
-      />
+          }`}
+          value={WN8 === undefined ? '--' : WN8.toFixed(0)}
+          percentile={WN8 === undefined ? undefined : getWN8Percentile(WN8)}
+        />
+        <RowStat
+          minimized={minimized}
+          name={`Damage • ${careerDamage.toFixed(0)}`}
+          value={damage.toFixed(0)}
+          delta={damage - careerDamage}
+        />
+      </div>
     </div>
   );
 }

src/components/Breakdown/components/RowDiscriminator.tsx

@@ -1,51 +0,0 @@
-import { theme } from '../../../stitches.config';
-
-export interface RowDiscriminatorProps {
-  name: string;
-  icon?: string;
-  minimized: boolean;
-}
-
-export function RowDiscriminator({
-  name,
-  icon,
-  minimized,
-}: RowDiscriminatorProps) {
-  return (
-    <div
-      style={{
-        flex: 1,
-        display: 'flex',
-        flexDirection: 'column',
-        height: '100%',
-        boxSizing: 'border-box',
-        width: 0,
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}
-    >
-      {!minimized && icon && (
-        <img
-          src={icon}
-          height={0}
-          style={{ flex: 1, width: '100%', objectFit: 'contain' }}
-        />
-      )}
-
-      <span
-        style={{
-          color: theme.colors.textLowContrast,
-          fontSize: 16,
-          textAlign: 'center',
-          display: 'block',
-          whiteSpace: 'nowrap',
-          overflow: 'hidden',
-          textOverflow: 'clip',
-          maxWidth: '100%',
-        }}
-      >
-        {name}
-      </span>
-    </div>
-  );
-}

src/components/Breakdown/components/RowStat.tsx

@@ -53,6 +53,7 @@ export function RowStat({
         <span
           style={{
             color: theme.colors.textHighContrast,
+            fontWeight: 'bold',
             fontSize: 16,
           }}
         >

src/components/Breakdown/index.ts

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

src/components/Tanks/components/Item.tsx

@@ -2,6 +2,7 @@ import {
   TANK_ICONS,
   TANK_ICONS_COLLECTOR,
   TANK_ICONS_PREMIUM,
+  TankType,
 } from '../../../core/blitz/tankopedia';
 import { theme } from '../../../stitches.config';
 
@@ -15,7 +16,7 @@ export type TreeTypeString = 'techtree' | 'premium' | 'collector';
 
 export interface ItemProps {
   image?: string;
-  tankType?: string;
+  tankType?: TankType;
   name: string;
   treeType: TreeTypeEnum;
 }
@@ -26,7 +27,7 @@ const TREE_TYPE_COLOR = {
   [TreeTypeEnum.Collector]: '_blue',
 } as const;
 
-const TREE_TYPE_ICONS = {
+export const TREE_TYPE_ICONS = {
   [TreeTypeEnum.TechTree]: TANK_ICONS,
   [TreeTypeEnum.Premium]: TANK_ICONS_PREMIUM,
   [TreeTypeEnum.Collector]: TANK_ICONS_COLLECTOR,

src/core/blitz/tankopedia.ts

@@ -1,6 +1,8 @@
 import { secrets } from '../node/secrets';
 import getWargamingResponse from './getWargamingResponse';
 
+export type TankType = 'AT-SPG' | 'lightTank' | 'mediumTank' | 'heavyTank';
+
 export interface TankopediaEntry {
   name: string;
   nation: string;
@@ -10,7 +12,7 @@ export interface TankopediaEntry {
   cost: { price_credit: number; price_gold: number };
   images: { preview: string; normal: string };
   tank_id: number;
-  type: string;
+  type: TankType;
   description: string;
 }
 
@@ -51,21 +53,21 @@ export const tankopediaInfo = getWargamingResponse<TankopediaInfo>(
 );
 console.log('Cached tankopedia info');
 
-export const TANK_ICONS: Record<string, string> = {
+export const TANK_ICONS: Record<TankType, string> = {
   'AT-SPG': 'https://i.imgur.com/BIHSEH0.png',
   lightTank: 'https://i.imgur.com/CSNha5V.png',
   mediumTank: 'https://i.imgur.com/wvf3ltm.png',
   heavyTank: 'https://i.imgur.com/ECeqlZa.png',
 };
 
-export const TANK_ICONS_PREMIUM: Record<string, string> = {
+export const TANK_ICONS_PREMIUM: Record<TankType, string> = {
   'AT-SPG': 'https://i.imgur.com/TCu3EdR.png',
   lightTank: 'https://i.imgur.com/zdkpTRb.png',
   mediumTank: 'https://i.imgur.com/3z7eHX6.png',
   heavyTank: 'https://i.imgur.com/P3vbmyA.png',
 };
 
-export const TANK_ICONS_COLLECTOR: Record<string, string> = {
+export const TANK_ICONS_COLLECTOR: Record<TankType, string> = {
   'AT-SPG': 'https://i.imgur.com/WTjeirB.png',
   lightTank: 'https://i.imgur.com/EwhtKkU.png',
   mediumTank: 'https://i.imgur.com/u8YDMBh.png',

src/renderers/today.tsx

@@ -5,6 +5,7 @@ import TitleBar from '../components/TitleBar';
 import Wrapper from '../components/Wrapper';
 import calculateWN8 from '../core/blitz/calculateWN8';
 import getTankStats from '../core/blitz/getTankStats';
+import getTreeType from '../core/blitz/getTreeType';
 import getWargamingResponse from '../core/blitz/getWargamingResponse';
 import resolveTankName from '../core/blitz/resolveTankName';
 import sumStats from '../core/blitz/sumStats';
@@ -117,28 +118,27 @@ export default async function today(
       // this code unreadable on god will forget tomorrow no cap
       ...(order.length === 0 ? [] : [0]),
       ...(isFinite(limit) ? order.slice(0, limit) : order),
-    ].map(async (tankId, index) => {
+    ].map(async (id, index) => {
-      const tankStats = diffed[tankId];
+      const tankStats = diffed[id];
-      const career = careerStats[tankId];
+      const career = careerStats[id];
+      const tankopediaEntry = (await tankopedia)[id];
 
       return (
         <Breakdown.Row
-          naked={naked}
+          isTank={id !== 0}
-          isListing={tankId !== 0}
+          tankType={tankopediaEntry?.type}
+          treeType={tankopediaEntry ? await getTreeType(id) : undefined}
           minimized={index > 4}
-          key={tankId}
+          key={id}
-          name={tankId === 0 ? 'Total' : await resolveTankName(tankId)}
+          name={id === 0 ? 'Total' : await resolveTankName(id)}
           winrate={tankStats.wins / tankStats.battles}
           careerWinrate={career.wins / career.battles}
-          WN8={isNaN(todayWN8s[tankId]) ? undefined : todayWN8s[tankId]}
+          WN8={isNaN(todayWN8s[id]) ? undefined : todayWN8s[id]}
-          careerWN8={isNaN(careerWN8s[tankId]) ? undefined : careerWN8s[tankId]}
+          careerWN8={isNaN(careerWN8s[id]) ? undefined : careerWN8s[id]}
           damage={tankStats.damage_dealt / tankStats.battles}
           careerDamage={career.damage_dealt / career.battles}
           battles={tankStats.battles}
           careerBattles={career.battles}
-          icon={
-            tankId === 0 ? undefined : (await tankopedia)[tankId]?.images.normal
-          }
         />
       );
     }),
@@ -146,7 +146,7 @@ export default async function today(
 
   return naked ? (
     <Wrapper naked>
-      <Breakdown.Root>{rows.slice(1)}</Breakdown.Root>
+      <Breakdown.Root>{rows}</Breakdown.Root>
     </Wrapper>
   ) : (
     <Wrapper>