feat: updated /today with figma

src/commands/evolution.tsx

@@ -20,7 +20,7 @@ import { AccountInfo } from '../types/accountInfo.js';
 
 export const evolutionCommand: CommandRegistry = {
   inProduction: true,
-  inDevelopment: true,
+  inDevelopment: false,
   inPublic: true,
 
   command: addStatTypeSubCommandGroups(

src/commands/today.tsx

@@ -14,7 +14,7 @@ import { AccountInfo } from '../types/accountInfo.js';
 
 export const todayCommand: CommandRegistry = {
   inProduction: true,
-  inDevelopment: false,
+  inDevelopment: true,
   inPublic: true,
 
   command: new SlashCommandBuilder()

src/components/Breakdown/components/Root.tsx

@@ -6,7 +6,7 @@ export interface RootProps {
 
 export function Root({ children }: RootProps) {
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
       {children}
     </div>
   );

src/components/Breakdown/components/Row.tsx

@@ -1,4 +1,5 @@
 import getWN8Percentile from '../../../core/blitz/getWN8Percentile.js';
+import { theme } from '../../../stitches.config.js';
 import { RowDiscriminator } from './RowDiscriminator.js';
 import { RowStat } from './RowStat.js';
 
@@ -10,14 +11,16 @@ export interface RowProps {
   careerWN8?: number;
   damage: number;
   careerDamage: number;
-  survival: number;
-  careerSurvival: number;
   battles: number;
   careerBattles: number;
   icon?: string;
+  minimized: boolean;
+  isListing: boolean;
 }
 
 export function Row({
+  isListing,
+  minimized,
   name,
   winrate,
   careerWinrate,
@@ -25,44 +28,45 @@ export function Row({
   careerWN8,
   damage,
   careerDamage,
-  survival,
-  careerSurvival,
   battles,
   careerBattles,
   icon,
 }: RowProps) {
   return (
-    <div style={{ display: 'flex', gap: 16 }}>
+    <div
-      <RowDiscriminator name={name} icon={icon} />
+      style={{
+        display: 'flex',
+        borderRadius: 4,
+        backgroundColor: isListing
+          ? theme.colors.componentInteractive
+          : theme.colors.appBackground2,
+        padding: 8,
+      }}
+    >
+      <RowDiscriminator minimized={minimized} name={name} icon={icon} />
 
       <RowStat
-        name="Winrate"
+        minimized={minimized}
+        name={`Winrate • ${(careerWinrate * 100).toFixed(2)}%`}
         value={`${(winrate * 100).toFixed(2)}%`}
-        career={`${(careerWinrate * 100).toFixed(2)}%`}
         delta={winrate - careerWinrate}
       />
       <RowStat
-        name="WN8"
+        minimized={minimized}
+        name={`WN8 • ${careerWN8 === undefined ? '--' : careerWN8.toFixed(0)}`}
         value={WN8 === undefined ? '--' : WN8.toFixed(0)}
-        career={careerWN8 === undefined ? '--' : careerWN8.toFixed(0)}
         percentile={WN8 === undefined ? undefined : getWN8Percentile(WN8)}
       />
       <RowStat
-        name="Damage"
+        minimized={minimized}
-        value={damage.toFixed(2)}
+        name={`Damage • ${careerDamage.toFixed(0)}`}
-        career={careerDamage.toFixed(2)}
+        value={damage.toFixed(0)}
         delta={damage - careerDamage}
       />
       <RowStat
-        name="Survival"
+        minimized={minimized}
-        value={`${(survival * 100).toFixed(2)}%`}
+        name={`Battles • ${careerBattles.toFixed(0)}`}
-        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

@@ -3,9 +3,14 @@ import { theme } from '../../../stitches.config.js';
 export interface RowDiscriminatorProps {
   name: string;
   icon?: string;
+  minimized: boolean;
 }
 
-export function RowDiscriminator({ name, icon }: RowDiscriminatorProps) {
+export function RowDiscriminator({
+  name,
+  icon,
+  minimized,
+}: RowDiscriminatorProps) {
   return (
     <div
       style={{
@@ -19,7 +24,7 @@ export function RowDiscriminator({ name, icon }: RowDiscriminatorProps) {
         justifyContent: 'center',
       }}
     >
-      {icon && (
+      {!minimized && icon && (
         <img
           src={icon}
           height={0}

src/components/Breakdown/components/RowStat.tsx

@@ -4,18 +4,18 @@ import PercentileIndicator from '../../PercentileIndicator.js';
 
 export interface RowStatProps {
   name: string;
-  value: string;
+  value: string | number;
-  career: string;
   delta?: number;
   percentile?: Percentile;
+  minimized?: boolean;
 }
 
 export function RowStat({
   name,
   value,
-  career,
   delta,
   percentile,
+  minimized,
 }: RowStatProps) {
   return (
     <div
@@ -28,10 +28,6 @@ export function RowStat({
         flex: 1,
       }}
     >
-      <span style={{ color: theme.colors.textLowContrast, fontSize: 12 }}>
-        {career}
-      </span>
-
       <div
         style={{
           display: 'flex',
@@ -58,16 +54,17 @@ export function RowStat({
           style={{
             color: theme.colors.textHighContrast,
             fontSize: 16,
-            fontWeight: 'bold',
           }}
         >
           {value}
         </span>
       </div>
 
-      <span style={{ color: theme.colors.textLowContrast, fontSize: 12 }}>
+      {!minimized && (
-        {name}
+        <span style={{ color: theme.colors.textLowContrast, fontSize: 12 }}>
-      </span>
+          {name}
+        </span>
+      )}
     </div>
   );
 }

src/renderers/today.tsx

@@ -20,6 +20,7 @@ import { AccountInfo, AllStats } from '../types/accountInfo.js';
 import { PlayerClanData } from '../types/playerClanData.js';
 import { PossiblyPromise } from '../types/possiblyPromise.js';
 
+// TODO: sort tanks by last played
 export default async function today({ server, id }: ResolvedPlayer) {
   const tankStatsOverTime = await getTankStatsDiffed(
     server,
@@ -110,12 +111,14 @@ export default async function today({ server, id }: ResolvedPlayer) {
     );
 
   const rows = await Promise.all(
-    tankStatsOverTimeEntries.map(async ([tankIdString, tankStats]) => {
+    tankStatsOverTimeEntries.map(async ([tankIdString, tankStats], index) => {
-      const tankId = Number(tankIdString);
+      const tankId = parseInt(tankIdString);
       const career = careerStats[tankId];
 
       return (
         <Breakdown.Row
+          isListing={tankId !== 0}
+          minimized={index > 4}
           key={tankId}
           name={
             tankId === 0 ? 'Total' : await resolveTankName(Number(tankIdString))
@@ -126,8 +129,6 @@ export default async function today({ server, id }: ResolvedPlayer) {
           careerWN8={isNaN(careerWN8s[tankId]) ? undefined : careerWN8s[tankId]}
           damage={tankStats.damage_dealt / tankStats.battles}
           careerDamage={career.damage_dealt / career.battles}
-          survival={tankStats.survived_battles / tankStats.battles}
-          careerSurvival={career.survived_battles / career.battles}
           battles={tankStats.battles}
           careerBattles={career.battles}
           icon={