feat: remove units and make ranks softer

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/Crew.tsx

@@ -68,7 +68,6 @@ export function Crew({ stats }: StatsAcceptorProps) {
                   ? ` ${literals(strings.common.units.x, [`${member.count}`])}`
                   : ''
               }`}
-              unit="%"
               decimals={0}
               noRanking
               value={() =>
@@ -83,7 +82,6 @@ export function Crew({ stats }: StatsAcceptorProps) {
                 stats={stats}
                 key={`${member.type}-substitute`}
                 decimals={0}
-                unit="%"
                 indent
                 name={
                   <>

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/Firepower.tsx

@@ -106,15 +106,9 @@ export function Firepower({ stats }: StatsAcceptorProps) {
       >
         {strings.common.gun_types[gun.gun_type!.$case]}
       </Info>
-      <InfoWithDelta stats={stats} decimals={0} unit="hp / min" value="dpm" />
+      <InfoWithDelta stats={stats} decimals={0} value="dpm" />
       {gun.gun_type!.$case === 'auto_reloader' && (
-        <InfoWithDelta
+        <InfoWithDelta stats={stats} decimals={0} indent value="dpmEffective" />
-          stats={stats}
-          decimals={0}
-          indent
-          unit="hp / min"
-          value="dpmEffective"
-        />
       )}
       {gun.gun_type!.$case !== 'regular' && (
         <InfoWithDelta stats={stats} value="shells" />
@@ -135,7 +129,6 @@ export function Firepower({ stats }: StatsAcceptorProps) {
               strings.website.tools.tankopedia.characteristics.values
                 .shellReloads
             }
-            unit="s"
           />
           {stats.shellReloads!.map((reload, index) => (
             <InfoWithDelta
@@ -158,7 +151,6 @@ export function Firepower({ stats }: StatsAcceptorProps) {
         <InfoWithDelta
           stats={stats}
           decimals={2}
-          unit="s"
           deltaType="lowerIsBetter"
           value="shellReload"
         />
@@ -169,12 +161,11 @@ export function Firepower({ stats }: StatsAcceptorProps) {
           stats={stats}
           indent
           decimals={2}
-          unit="s"
           deltaType="lowerIsBetter"
           value="intraClip"
         />
       )}
-      <InfoWithDelta stats={stats} decimals={0} unit="mm" value="penetration" />
+      <InfoWithDelta stats={stats} decimals={0} value="penetration" />
       {typeof shell.penetration !== 'number' && (
         <>
           <InfoWithDelta
@@ -242,33 +233,26 @@ export function Firepower({ stats }: StatsAcceptorProps) {
           </Flex>
         </>
       )}
-      <InfoWithDelta stats={stats} unit="hp" decimals={0} value="damage" />
+      <InfoWithDelta stats={stats} decimals={0} value="damage" />
       {gun.gun_type!.$case !== 'regular' && (
         <InfoWithDelta stats={stats} indent decimals={0} value="clipDamage" />
       )}
-      <InfoWithDelta
+      <InfoWithDelta stats={stats} decimals={0} value="moduleDamage" />
-        stats={stats}
-        unit="hp"
-        decimals={0}
-        value="moduleDamage"
-      />
       {isExplosive(shell.type) && (
         <InfoWithDelta
           stats={stats}
-          unit="m"
           noRanking
           decimals={0}
           value="explosionRadius"
         />
       )}
-      <InfoWithDelta stats={stats} decimals={0} unit="mm" value="caliber" />
+      <InfoWithDelta stats={stats} decimals={0} value="caliber" />
 
       {!isExplosive(shell.type) && (
         <>
           <InfoWithDelta
             stats={stats}
             decimals={0}
-            unit="°"
             noRanking
             value="shellNormalization"
           />
@@ -277,24 +261,17 @@ export function Firepower({ stats }: StatsAcceptorProps) {
             noRanking
             decimals={0}
             deltaType="lowerIsBetter"
-            unit="°"
             value="shellRicochet"
           />
           <RicochetVisualizer stats={stats} />
         </>
       )}
-      <InfoWithDelta
+      <InfoWithDelta stats={stats} decimals={0} value="shellVelocity" />
-        stats={stats}
+      <InfoWithDelta stats={stats} decimals={0} value="shellRange" />
-        unit="m/s"
-        decimals={0}
-        value="shellVelocity"
-      />
-      <InfoWithDelta stats={stats} unit="m" decimals={0} value="shellRange" />
       <InfoWithDelta stats={stats} decimals={0} value="shellCapacity" />
       <InfoWithDelta
         stats={stats}
         decimals={2}
-        unit="s"
         deltaType="lowerIsBetter"
         value="aimTime"
       />
@@ -309,7 +286,6 @@ export function Firepower({ stats }: StatsAcceptorProps) {
         stats={stats}
         decimals={3}
         indent
-        unit="m"
         deltaType="lowerIsBetter"
         value="dispersion"
       />
@@ -358,7 +334,6 @@ export function Firepower({ stats }: StatsAcceptorProps) {
           strings.website.tools.tankopedia.characteristics.values
             .gun_flexibility
         }
-        unit="°"
       />
       <InfoWithDelta value="gunDepression" stats={stats} decimals={1} indent />
       <InfoWithDelta stats={stats} decimals={1} indent value="gunElevation" />

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/Info.tsx

@@ -5,7 +5,6 @@ import type { ReactNode } from 'react';
 export interface InfoProps {
   name: ReactNode;
   children?: ReactNode;
-  unit?: string;
   indent?: boolean;
   delta?: number;
   decimals?: number;
@@ -16,7 +15,6 @@ export interface InfoProps {
 export function Info({
   name,
   children,
-  unit,
   indent = false,
   delta,
   decimals,
@@ -25,17 +23,7 @@ export function Info({
 }: InfoProps) {
   return (
     <Flex align="center" pl={indent ? '2' : '0'} width="100%" gap="4">
-      <Text color="gray">
+      <Text color="gray">{name}</Text>
-        {name}
-        {unit != undefined && (
-          <>
-            {' '}
-            <Text color="gray" size="1">
-              {unit}
-            </Text>
-          </>
-        )}
-      </Text>
 
       <Box flexGrow="1" />
 
@@ -65,8 +53,14 @@ export function Info({
               </Text>
             </>
           )}
+
           <Text>
-            {prefix}
+            {prefix !== undefined && (
+              <Text color="gray" size="1">
+                {prefix}
+              </Text>
+            )}
+
             {decimals !== undefined && typeof children === 'number'
               ? children.toFixed(decimals)
               : children}

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/InfoWithDelta.tsx

@@ -1,5 +1,6 @@
 import { createDefaultSkills } from '@blitzkit/core';
 import { Flex, Progress, Text } from '@radix-ui/themes';
+import { clamp } from 'lodash-es';
 import { useMemo, type ComponentProps, type ReactNode } from 'react';
 import { awaitableEquipmentDefinitions } from '../../../../../../core/awaitables/equipmentDefinitions';
 import { awaitableModelDefinitions } from '../../../../../../core/awaitables/modelDefinitions';
@@ -166,10 +167,11 @@ export function InfoWithDelta({
             size="1"
             value={goodness * 100}
             color={color}
-            style={{ height: '0.125rem' }}
+            style={{ height: '0.125rem', opacity: 0.5 }}
           />
+
           <Text color="gray" size="1">
-            {betterTanks.length + 1} / {others.length}
+            {clamp(betterTanks.length + 1, 1, others.length)} / {others.length}
           </Text>
         </Flex>
       )}

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/Maneuverability.tsx

@@ -18,7 +18,6 @@ export function Maneuverability({ stats }: StatsAcceptorProps) {
       </Heading>
       <Info
         name={strings.website.tools.tankopedia.characteristics.values.speed}
-        unit="kph"
       />
       <InfoWithDelta value="speedForwards" stats={stats} decimals={0} indent />
       <InfoWithDelta value="speedBackwards" stats={stats} decimals={0} indent />
@@ -26,7 +25,6 @@ export function Maneuverability({ stats }: StatsAcceptorProps) {
       <InfoWithDelta
         stats={stats}
         decimals={1}
-        unit="tn"
         deltaType="lowerIsBetter"
         value="weight"
       />
@@ -40,13 +38,11 @@ export function Maneuverability({ stats }: StatsAcceptorProps) {
         value="hardTerrainCoefficient"
         stats={stats}
         decimals={0}
-        unit="%"
         indent
       />
       <InfoWithDelta
         stats={stats}
         decimals={0}
-        unit="%"
         indent
         value="mediumTerrainCoefficient"
       />
@@ -54,7 +50,6 @@ export function Maneuverability({ stats }: StatsAcceptorProps) {
         value="softTerrainCoefficient"
         stats={stats}
         decimals={0}
-        unit="%"
         indent
       />
       <Info
@@ -68,14 +63,12 @@ export function Maneuverability({ stats }: StatsAcceptorProps) {
         value="hardTerrainCoefficientRaw"
         stats={stats}
         decimals={2}
-        unit="%"
         indent
         deltaType="lowerIsBetter"
       />
       <InfoWithDelta
         stats={stats}
         decimals={2}
-        unit="%"
         indent
         deltaType="lowerIsBetter"
         value="mediumTerrainCoefficientRaw"
@@ -83,7 +76,6 @@ export function Maneuverability({ stats }: StatsAcceptorProps) {
       <InfoWithDelta
         stats={stats}
         decimals={2}
-        unit="%"
         indent
         deltaType="lowerIsBetter"
         value="softTerrainCoefficientRaw"
@@ -93,7 +85,6 @@ export function Maneuverability({ stats }: StatsAcceptorProps) {
           strings.website.tools.tankopedia.characteristics.values
             .power_to_weight_ratio
         }
-        unit="hp/tn"
       />
       <InfoWithDelta
         stats={stats}
@@ -113,18 +104,12 @@ export function Maneuverability({ stats }: StatsAcceptorProps) {
         indent
         value="powerToWeightRatioSoftTerrain"
       />
-      <InfoWithDelta
+      <InfoWithDelta stats={stats} decimals={1} value="turretTraverseSpeed" />
-        stats={stats}
-        unit="°/s"
-        decimals={1}
-        value="turretTraverseSpeed"
-      />
       <Info
         name={
           strings.website.tools.tankopedia.characteristics.values
             .hull_traverse_speed
         }
-        unit="°/s"
       />
       <InfoWithDelta
         stats={stats}

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/Survivability.tsx

@@ -14,24 +14,22 @@ export function Survivability({ stats }: StatsAcceptorProps) {
       <Heading size="5">
         {strings.website.tools.tankopedia.survivability.title}
       </Heading>
-      <InfoWithDelta value="health" stats={stats} unit="hp" decimals={0} />
+      <InfoWithDelta value="health" stats={stats} decimals={0} />
       <InfoWithDelta
         stats={stats}
         name={
           strings.website.tools.tankopedia.characteristics.values.fireChance
         }
-        unit="%"
         deltaType="lowerIsBetter"
         decimals={0}
         value={(stats) => stats.fireChance * 100}
       />
-      <InfoWithDelta value="viewRange" stats={stats} unit="m" decimals={0} />
+      <InfoWithDelta value="viewRange" stats={stats} decimals={0} />
       <ViewRangeVisualizer stats={stats} />
       <Info
         name={
           strings.website.tools.tankopedia.characteristics.values.camouflage
         }
-        unit="%"
       />
       <InfoWithDelta
         value={(stats) => stats.camouflageStill * 100}
@@ -84,28 +82,24 @@ export function Survivability({ stats }: StatsAcceptorProps) {
         value={(stats) => stats.camouflageCaughtOnFire * 100}
       />
       <InfoWithDelta
-        unit="m"
         decimals={0}
         deltaType="lowerIsBetter"
         stats={stats}
         value="width"
       />
       <InfoWithDelta
-        unit="m"
         decimals={0}
         deltaType="lowerIsBetter"
         stats={stats}
         value="height"
       />
       <InfoWithDelta
-        unit="m"
         decimals={0}
         deltaType="lowerIsBetter"
         stats={stats}
         value="length"
       />
       <InfoWithDelta
-        unit="m"
         decimals={0}
         deltaType="lowerIsBetter"
         stats={stats}