feat: key based tankopedia

packages/website/src/components/Compare/CompareRow.tsx

@@ -13,8 +13,8 @@ import { StickyRowHeaderCell } from '../StickyRowHeaderCell';
 interface CompareRowProps {
   name: string;
   value:
-    | keyof Awaited<TankCharacteristics>
+    | keyof TankCharacteristics
-    | ((member: Awaited<TankCharacteristics>) => number | undefined);
+    | ((member: TankCharacteristics) => number | undefined);
   display?: (
     member: Awaited<TankCharacteristics>,
   ) => number | string | undefined;
@@ -38,7 +38,6 @@ export function CompareRow({
   const mutateCompareEphemeral = CompareEphemeral.useMutation();
   const sorting = CompareEphemeral.use((state) => state.sorting);
   const deltaMode = ComparePersistent.use((state) => state.deltaMode);
-
   const values = stats.map((stat) =>
     typeof value === 'function' ? value(stat)! : (stat[value] as number),
   );

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

@@ -1,16 +1,20 @@
+import type { TankCharacteristics } from '../../../../../../core/blitzkit/tankCharacteristics';
 import { useDelta } from '../../../../../../hooks/useDelta';
 import { type InfoProps, Info } from './Info';
 
 interface InfoWithDeltaProps extends InfoProps {
-  children: number;
+  stats: TankCharacteristics;
+  value: keyof TankCharacteristics | (() => number | undefined);
 }
 
-export function InfoWithDelta({ children, ...props }: InfoWithDeltaProps) {
+export function InfoWithDelta({ value, stats, ...props }: InfoWithDeltaProps) {
-  const delta = useDelta(children);
+  const uhWhatDoICallThisVariable =
+    typeof value === 'function' ? value()! : (stats[value] as number);
+  const delta = useDelta(uhWhatDoICallThisVariable);
 
   return (
     <Info {...props} delta={delta}>
-      {children}
+      {uhWhatDoICallThisVariable}
     </Info>
   );
 }

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

@@ -181,21 +181,25 @@ export function Characteristics() {
             </Flex>
           </Flex>
           <Info name="Gun type">{GUN_TYPE_NAMES[gun.gun_type!.$case]}</Info>
-          <InfoWithDelta name="DPM" decimals={0} unit="hp / min">
+          <InfoWithDelta
-            {stats.dpm}
+            stats={stats}
-          </InfoWithDelta>
+            name="DPM"
+            decimals={0}
+            unit="hp / min"
+            value="dpm"
+          />
           {gun.gun_type!.$case === 'auto_reloader' && (
             <InfoWithDelta
+              stats={stats}
               decimals={0}
               indent
               name="Effective at 60s"
               unit="hp / min"
-            >
+              value="dpmEffective"
-              {stats.dpmEffective!}
+            />
-            </InfoWithDelta>
           )}
           {gun.gun_type!.$case !== 'regular' && (
-            <InfoWithDelta name="Shells">{stats.shells}</InfoWithDelta>
+            <InfoWithDelta stats={stats} name="Shells" value="shells" />
           )}
           {gun.gun_type!.$case === 'auto_reloader' ? (
             <>
@@ -205,56 +209,62 @@ export function Characteristics() {
               <Info name="Shell reloads" unit="s" />
               {stats.shellReloads!.map((reload, index) => (
                 <InfoWithDelta
+                  stats={stats}
                   key={index}
                   indent
                   name={`Shell ${index + 1}`}
                   decimals={2}
                   deltaType="lowerIsBetter"
-                >
+                  value={() => reload}
-                  {reload}
+                />
-                </InfoWithDelta>
               ))}
             </>
           ) : (
             <InfoWithDelta
+              stats={stats}
               decimals={2}
               name="Reload"
               unit="s"
               deltaType="lowerIsBetter"
-            >
+              value="shellReload"
-              {stats.shellReload!}
+            />
-            </InfoWithDelta>
           )}
           {(gun.gun_type!.$case === 'auto_loader' ||
             gun.gun_type!.$case === 'auto_reloader') && (
             <InfoWithDelta
+              stats={stats}
               indent
               decimals={2}
               name="Intra-clip"
               unit="s"
               deltaType="lowerIsBetter"
-            >
+              value="intraClip"
-              {stats.intraClip!}
+            />
-            </InfoWithDelta>
           )}
-          <InfoWithDelta decimals={0} name="Penetration" unit="mm">
+          <InfoWithDelta
-            {stats.penetration}
+            stats={stats}
-          </InfoWithDelta>
+            decimals={0}
+            name="Penetration"
+            unit="mm"
+            value="penetration"
+          />
           {typeof shell.penetration !== 'number' && (
             <>
               <InfoWithDelta
+                stats={stats}
                 indent
                 decimals={0}
                 name={`At ${penetrationDistance}m`}
-              >
+                value={() =>
-                {lerp(
+                  lerp(
-                  shell.penetration.near,
+                    shell.penetration.near,
-                  shell.penetration.far,
+                    shell.penetration.far,
-                  (penetrationDistance *
+                    (penetrationDistance *
-                    penetrationLossOverDistanceCoefficient) /
+                      penetrationLossOverDistanceCoefficient) /
-                    500,
+                      500,
-                ) * penetrationCoefficient}
+                  ) * penetrationCoefficient
-              </InfoWithDelta>
+                }
+              />
               <Flex align="center" gap="2" style={{ paddingLeft: 24 }}>
                 <Text color="gray">Distance</Text>
                 <Slider
@@ -294,146 +304,213 @@ export function Characteristics() {
               </Flex>
             </>
           )}
-          <InfoWithDelta name="Damage" unit="hp" decimals={0}>
+          <InfoWithDelta
-            {stats.damage}
+            stats={stats}
-          </InfoWithDelta>
+            name="Damage"
+            unit="hp"
+            decimals={0}
+            value="damage"
+          />
           {gun.gun_type!.$case !== 'regular' && (
-            <InfoWithDelta name="Clipping potential" indent>
+            <InfoWithDelta
-              {stats.clipDamage!}
+              stats={stats}
-            </InfoWithDelta>
+              name="Clipping potential"
+              indent
+              value="clipDamage"
+            />
           )}
-          <InfoWithDelta name="Module damage" unit="hp" decimals={0}>
+          <InfoWithDelta
-            {stats.moduleDamage}
+            stats={stats}
-          </InfoWithDelta>
+            name="Module damage"
+            unit="hp"
+            decimals={0}
+            value="moduleDamage"
+          />
           {isExplosive(shell.type) && (
-            <InfoWithDelta name="Splash radius" unit="m" decimals={0}>
+            <InfoWithDelta
-              {stats.explosionRadius!}
+              stats={stats}
-            </InfoWithDelta>
+              name="Splash radius"
+              unit="m"
+              decimals={0}
+              value="explosionRadius"
+            />
           )}
-          <InfoWithDelta name="Caliber" decimals={0} unit="mm">
+          <InfoWithDelta
-            {stats.caliber}
+            stats={stats}
-          </InfoWithDelta>
+            name="Caliber"
-          <InfoWithDelta name="Normalization" decimals={0} unit="°">
+            decimals={0}
-            {stats.shellNormalization}
+            unit="mm"
-          </InfoWithDelta>
+            value="caliber"
+          />
+          <InfoWithDelta
+            stats={stats}
+            name="Normalization"
+            decimals={0}
+            unit="°"
+            value="shellNormalization"
+          />
           {!isExplosive(shell.type) && (
             <InfoWithDelta
+              stats={stats}
               name="Ricochet"
               decimals={0}
               deltaType="lowerIsBetter"
               unit="°"
-            >
+              value="shellRicochet"
-              {stats.shellRicochet!}
+            />
-            </InfoWithDelta>
           )}
-          <InfoWithDelta name="Shell velocity" unit="m/s" decimals={0}>
-            {stats.shellVelocity}
-          </InfoWithDelta>
-          <InfoWithDelta name="Shell range" unit="m/s" decimals={0}>
-            {stats.shellRange}
-          </InfoWithDelta>
-          <InfoWithDelta name="Shell capacity" unit="m/s" decimals={0}>
-            {stats.shellCapacity}
-          </InfoWithDelta>
           <InfoWithDelta
+            stats={stats}
+            name="Shell velocity"
+            unit="m/s"
+            decimals={0}
+            value="shellVelocity"
+          />
+          <InfoWithDelta
+            stats={stats}
+            name="Shell range"
+            unit="m/s"
+            decimals={0}
+            value="shellRange"
+          />
+          <InfoWithDelta
+            stats={stats}
+            name="Shell capacity"
+            unit="m/s"
+            decimals={0}
+            value="shellCapacity"
+          />
+          <InfoWithDelta
+            stats={stats}
             decimals={2}
             name="Aim time"
             unit="s"
             deltaType="lowerIsBetter"
-          >
+            value="aimTime"
-            {stats.aimTime}
+          />
-          </InfoWithDelta>
           <Info name="Dispersion at 100m" />
           <InfoWithDelta
+            stats={stats}
             decimals={3}
             indent
             name="Still"
             unit="m"
             deltaType="lowerIsBetter"
-          >
+            value="dispersion"
-            {stats.dispersion}
+          />
-          </InfoWithDelta>
           <InfoWithDelta
+            stats={stats}
             prefix="+"
             decimals={3}
             indent
             name="Moving"
             deltaType="lowerIsBetter"
-          >
+            value="dispersionMoving"
-            {stats.dispersionMoving}
+          />
-          </InfoWithDelta>
           <InfoWithDelta
+            stats={stats}
             decimals={3}
             prefix="+"
             indent
             name="Hull traversing"
             deltaType="lowerIsBetter"
-          >
+            value="dispersionHullTraversing"
-            {stats.dispersionHullTraversing}
+          />
-          </InfoWithDelta>
           <InfoWithDelta
+            stats={stats}
             decimals={3}
             prefix="+"
             indent
             name="Turret traversing"
             deltaType="lowerIsBetter"
-          >
+            value="dispersionTurretTraversing"
-            {stats.dispersionTurretTraversing}
+          />
-          </InfoWithDelta>
           <InfoWithDelta
+            stats={stats}
             decimals={3}
             prefix="+"
             indent
             name="After shooting"
             deltaType="lowerIsBetter"
-          >
+            value="dispersionShooting"
-            {stats.dispersionShooting}
+          />
-          </InfoWithDelta>
           <InfoWithDelta
+            stats={stats}
             decimals={1}
             prefix="x "
             indent
             name="Gun damaged"
             unit="scalar"
             deltaType="lowerIsBetter"
-          >
+            value="dispersionGunDamaged"
-            {stats.dispersionGunDamaged}
+          />
-          </InfoWithDelta>
           <Info name="Gun flexibility" unit="°" />
-          <InfoWithDelta decimals={1} indent name="Depression">
+          <InfoWithDelta
-            {stats.gunDepression}
+            value="gunDepression"
-          </InfoWithDelta>
+            stats={stats}
-          <InfoWithDelta decimals={1} indent name="Elevation">
+            decimals={1}
-            {stats.gunElevation}
+            indent
-          </InfoWithDelta>
+            name="Depression"
+          />
+          <InfoWithDelta
+            stats={stats}
+            decimals={1}
+            indent
+            name="Elevation"
+            value="gunElevation"
+          />
           {gunModelDefinition.pitch.front && (
             <>
-              <InfoWithDelta decimals={1} indent name="Frontal depression">
+              <InfoWithDelta
-                {stats.gunFrontalDepression!}
+                stats={stats}
-              </InfoWithDelta>
+                decimals={1}
-              <InfoWithDelta decimals={1} indent name="Frontal elevation">
+                indent
-                {stats.gunFrontalElevation!}
+                name="Frontal depression"
-              </InfoWithDelta>
+                value="gunFrontalDepression"
+              />
+              <InfoWithDelta
+                stats={stats}
+                decimals={1}
+                indent
+                name="Frontal elevation"
+                value="gunFrontalElevation"
+              />
             </>
           )}
           {gunModelDefinition.pitch.back && (
             <>
-              <InfoWithDelta decimals={1} indent name="Rear depression">
+              <InfoWithDelta
-                {stats.gunRearDepression!}
+                stats={stats}
-              </InfoWithDelta>
+                decimals={1}
-              <InfoWithDelta decimals={1} indent name="Rear elevation">
+                indent
-                {stats.gunRearElevation!}
+                name="Rear depression"
-              </InfoWithDelta>
+                value="gunRearDepression"
+              />
+              <InfoWithDelta
+                stats={stats}
+                decimals={1}
+                indent
+                name="Rear elevation"
+                value="gunRearElevation"
+              />
             </>
           )}
           {turretModelDefinition.yaw && (
             <>
-              <InfoWithDelta decimals={1} indent name="Azimuth left">
+              <InfoWithDelta
-                {stats.azimuthLeft!}
+                stats={stats}
-              </InfoWithDelta>
+                decimals={1}
-              <InfoWithDelta decimals={1} indent name="Azimuth right">
+                indent
-                {stats.azimuthRight!}
+                name="Azimuth left"
-              </InfoWithDelta>
+                value="azimuthLeft"
+              />
+              <InfoWithDelta
+                stats={stats}
+                decimals={1}
+                indent
+                name="Azimuth right"
+                value="azimuthRight"
+              />
             </>
           )}
         </Flex>
@@ -459,28 +536,34 @@ export function Characteristics() {
             </Popover.Root>
           </Flex>
 
-          <InfoWithDelta name="Crew count" decimals={0}>
+          <InfoWithDelta
-            {stats.crewCount}
+            value="crewCount"
-          </InfoWithDelta>
+            stats={stats}
+            name="Crew count"
+            decimals={0}
+          />
 
           {tank.crew.map((member) => {
             return (
               <Fragment key={member.type}>
                 <InfoWithDelta
+                  stats={stats}
                   key={`${member.type}-root`}
                   name={`${CREW_MEMBER_NAMES[member.type]}${
                     member.count > 1 ? ` x ${member.count}` : ''
                   }`}
                   unit="%"
                   decimals={0}
-                >
+                  value={() =>
-                  {(member.type === CrewType.COMMANDER
+                    (member.type === CrewType.COMMANDER
-                    ? commanderMastery
+                      ? commanderMastery
-                    : commanderMastery * 1.1) * 100}
+                      : commanderMastery * 1.1) * 100
-                </InfoWithDelta>
+                  }
+                />
 
                 {member.substitute.length > 0 && (
                   <InfoWithDelta
+                    stats={stats}
                     key={`${member.type}-substitute`}
                     decimals={0}
                     unit="%"
@@ -497,9 +580,8 @@ export function Characteristics() {
                         </Flex>
                       </>
                     }
-                  >
+                    value={() => commanderMastery * 1.05 * 100}
-                    {commanderMastery * 1.05 * 100}
+                  />
-                  </InfoWithDelta>
                 )}
               </Fragment>
             );
@@ -511,123 +593,231 @@ export function Characteristics() {
         <Flex direction="column" gap="2">
           <Heading size="5">Maneuverability</Heading>
           <Info name="Speed" unit="kph" />
-          <InfoWithDelta decimals={0} indent name="Forwards">
-            {stats.speedForwards}
-          </InfoWithDelta>
-          <InfoWithDelta decimals={0} indent name="Backwards">
-            {stats.speedBackwards}
-          </InfoWithDelta>
-          <InfoWithDelta decimals={0} name="Engine power" unit="hp">
-            {stats.enginePower}
-          </InfoWithDelta>
           <InfoWithDelta
+            value="speedForwards"
+            stats={stats}
+            decimals={0}
+            indent
+            name="Forwards"
+          />
+          <InfoWithDelta
+            value="speedBackwards"
+            stats={stats}
+            decimals={0}
+            indent
+            name="Backwards"
+          />
+          <InfoWithDelta
+            stats={stats}
+            decimals={0}
+            name="Engine power"
+            unit="hp"
+            value="enginePower"
+          />
+          <InfoWithDelta
+            stats={stats}
             decimals={1}
             name="Weight"
             unit="tn"
             deltaType="lowerIsBetter"
-          >
+            value="weight"
-            {stats.weight}
+          />
-          </InfoWithDelta>
           <Info name="Terrain coefficients" />
-          <InfoWithDelta decimals={0} unit="%" indent name="Hard">
-            {stats.hardTerrainCoefficient}
-          </InfoWithDelta>
-          <InfoWithDelta decimals={0} unit="%" indent name="Medium">
-            {stats.mediumTerrainCoefficient}
-          </InfoWithDelta>
-          <InfoWithDelta decimals={0} unit="%" indent name="Soft">
-            {stats.softTerrainCoefficient}
-          </InfoWithDelta>
-          <Info name="Raw terrain coefficients" deltaType="lowerIsBetter" />
-          <InfoWithDelta decimals={2} unit="%" indent name="Hard">
-            {stats.hardTerrainCoefficientRaw}
-          </InfoWithDelta>
           <InfoWithDelta
+            value="hardTerrainCoefficient"
+            stats={stats}
+            decimals={0}
+            unit="%"
+            indent
+            name="Hard"
+          />
+          <InfoWithDelta
+            stats={stats}
+            decimals={0}
+            unit="%"
+            indent
+            name="Medium"
+            value="mediumTerrainCoefficient"
+          />
+          <InfoWithDelta
+            value="softTerrainCoefficient"
+            stats={stats}
+            decimals={0}
+            unit="%"
+            indent
+            name="Soft"
+          />
+          <Info name="Raw terrain coefficients" deltaType="lowerIsBetter" />
+          <InfoWithDelta
+            value="hardTerrainCoefficientRaw"
+            stats={stats}
+            decimals={2}
+            unit="%"
+            indent
+            name="Hard"
+          />
+          <InfoWithDelta
+            stats={stats}
             decimals={2}
             unit="%"
             indent
             name="Medium"
             deltaType="lowerIsBetter"
-          >
+            value="mediumTerrainCoefficientRaw"
-            {stats.mediumTerrainCoefficientRaw}
+          />
-          </InfoWithDelta>
           <InfoWithDelta
+            stats={stats}
             decimals={2}
             unit="%"
             indent
             name="Soft"
             deltaType="lowerIsBetter"
-          >
+            value="softTerrainCoefficientRaw"
-            {stats.softTerrainCoefficientRaw}
+          />
-          </InfoWithDelta>
           <Info name="Power to weight ratio" unit="hp/tn" />
-          <InfoWithDelta decimals={1} indent name="On hard terrain">
+          <InfoWithDelta
-            {stats.powerToWeightRatioHardTerrain}
+            stats={stats}
-          </InfoWithDelta>
+            decimals={1}
-          <InfoWithDelta decimals={1} indent name="On medium terrain">
+            indent
-            {stats.powerToWeightRatioMediumTerrain}
+            name="On hard terrain"
-          </InfoWithDelta>
+            value="powerToWeightRatioHardTerrain"
-          <InfoWithDelta decimals={1} indent name="On soft terrain">
+          />
-            {stats.powerToWeightRatioSoftTerrain}
+          <InfoWithDelta
-          </InfoWithDelta>
+            stats={stats}
-          <InfoWithDelta name="Turret traverse speed" unit="°/s" decimals={1}>
+            decimals={1}
-            {stats.turretTraverseSpeed}
+            indent
-          </InfoWithDelta>
+            name="On medium terrain"
+            value="powerToWeightRatioMediumTerrain"
+          />
+          <InfoWithDelta
+            stats={stats}
+            decimals={1}
+            indent
+            name="On soft terrain"
+            value="powerToWeightRatioSoftTerrain"
+          />
+          <InfoWithDelta
+            stats={stats}
+            name="Turret traverse speed"
+            unit="°/s"
+            decimals={1}
+            value="turretTraverseSpeed"
+          />
           <Info name="Hull traverse speed" unit="°/s" />
-          <InfoWithDelta decimals={1} indent name="On hard terrain">
+          <InfoWithDelta
-            {stats.hullTraverseHardTerrain}
+            stats={stats}
-          </InfoWithDelta>
+            decimals={1}
-          <InfoWithDelta decimals={1} indent name="On medium terrain">
+            indent
-            {stats.hullTraverseMediumTerrain}
+            name="On hard terrain"
-          </InfoWithDelta>
+            value="hullTraverseHardTerrain"
-          <InfoWithDelta decimals={1} indent name="On soft terrain">
+          />
-            {stats.hullTraverseSoftTerrain}
+          <InfoWithDelta
-          </InfoWithDelta>
+            stats={stats}
+            decimals={1}
+            indent
+            name="On medium terrain"
+            value="hullTraverseMediumTerrain"
+          />
+          <InfoWithDelta
+            stats={stats}
+            decimals={1}
+            indent
+            name="On soft terrain"
+            value="hullTraverseSoftTerrain"
+          />
         </Flex>
         <Flex direction="column" gap="2">
           <Heading size="5">Survivability</Heading>
-          <InfoWithDelta name="Health" unit="hp" decimals={0}>
-            {stats.health}
-          </InfoWithDelta>
           <InfoWithDelta
+            value="health"
+            stats={stats}
+            name="Health"
+            unit="hp"
+            decimals={0}
+          />
+          <InfoWithDelta
+            stats={stats}
             name="Fire chance"
             unit="%"
             deltaType="lowerIsBetter"
             decimals={0}
-          >
+            value={() => stats.fireChance * 100}
-            {stats.fireChance * 100}
+          />
-          </InfoWithDelta>
+          <InfoWithDelta
-          <InfoWithDelta name="View range" unit="m" decimals={0}>
+            value="viewRange"
-            {stats.viewRange}
+            stats={stats}
-          </InfoWithDelta>
+            name="View range"
+            unit="m"
+            decimals={0}
+          />
           <Info name="Camouflage" unit="%" />
-          <InfoWithDelta indent name="Still" decimals={2}>
+          <InfoWithDelta
-            {stats.camouflageStill * 100}
+            value={() => stats.camouflageStill * 100}
-          </InfoWithDelta>
+            stats={stats}
-          <InfoWithDelta indent name="Moving" decimals={2}>
+            indent
-            {stats.camouflageMoving * 100}
+            name="Still"
-          </InfoWithDelta>
+            decimals={2}
-          <InfoWithDelta indent name="Shooting still" decimals={2}>
+          />
-            {stats.camouflageShootingStill * 100}
+          <InfoWithDelta
-          </InfoWithDelta>
+            value={() => stats.camouflageMoving * 100}
-          <InfoWithDelta indent name="Shooting moving" decimals={2}>
+            stats={stats}
-            {stats.camouflageShootingMoving * 100}
+            indent
-          </InfoWithDelta>
+            name="Moving"
-          <InfoWithDelta indent name="Caught on fire" decimals={2}>
+            decimals={2}
-            {stats.camouflageCaughtOnFire * 100}
+          />
-          </InfoWithDelta>
+          <InfoWithDelta
-          <Info name="Width" unit="m" decimals={0} deltaType="lowerIsBetter">
+            stats={stats}
-            {stats.width}
+            indent
-          </Info>
+            name="Shooting still"
-          <Info name="Height" unit="m" decimals={0} deltaType="lowerIsBetter">
+            decimals={2}
-            {stats.height}
+            value={() => stats.camouflageShootingStill * 100}
-          </Info>
+          />
-          <Info name="Length" unit="m" decimals={0} deltaType="lowerIsBetter">
+          <InfoWithDelta
-            {stats.length}
+            stats={stats}
-          </Info>
+            indent
-          <Info name="Volume" unit="m" decimals={0} deltaType="lowerIsBetter">
+            name="Shooting moving"
-            {stats.volume}
+            decimals={2}
-          </Info>
+            value={() => stats.camouflageShootingMoving * 100}
+          />
+          <InfoWithDelta
+            stats={stats}
+            indent
+            name="Caught on fire"
+            decimals={2}
+            value={() => stats.camouflageCaughtOnFire * 100}
+          />
+          <InfoWithDelta
+            name="Width"
+            unit="m"
+            decimals={0}
+            deltaType="lowerIsBetter"
+            stats={stats}
+            value="width"
+          />
+          <InfoWithDelta
+            name="Height"
+            unit="m"
+            decimals={0}
+            deltaType="lowerIsBetter"
+            stats={stats}
+            value="height"
+          />
+          <InfoWithDelta
+            name="Length"
+            unit="m"
+            decimals={0}
+            deltaType="lowerIsBetter"
+            stats={stats}
+            value="length"
+          />
+          <InfoWithDelta
+            name="Volume"
+            unit="m"
+            decimals={0}
+            deltaType="lowerIsBetter"
+            stats={stats}
+            value="volume"
+          />
         </Flex>
       </Flex>
     </Flex>