From e9c39530854d7713283e8b754b629918ea3c144c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Thu, 1 Feb 2024 12:06:13 -0600
Subject: [PATCH] feat: stats organization

---
 .../Characteristics/components/Info.tsx       |  26 +++--
 .../[id]/components/Characteristics/index.tsx | 100 ++++++++----------
 2 files changed, 62 insertions(+), 64 deletions(-)

diff --git a/src/app/tools/tankopedia/[id]/components/Characteristics/components/Info.tsx b/src/app/tools/tankopedia/[id]/components/Characteristics/components/Info.tsx
index 5e991ef7f..d749faa78 100644
--- a/src/app/tools/tankopedia/[id]/components/Characteristics/components/Info.tsx
+++ b/src/app/tools/tankopedia/[id]/components/Characteristics/components/Info.tsx
@@ -4,7 +4,7 @@ import { theme } from '../../../../../../../stitches.config';
 
 interface InfoProps {
   name: string;
-  children: ReactNode;
+  children?: ReactNode;
   unit?: string;
   indent?: boolean;
   highlight?: boolean;
@@ -35,17 +35,21 @@ export function Info({
         )}
       </Text>
 
-      <div
-        style={{
-          flex: 1,
-          height: 1,
-          backgroundColor: highlight
-            ? theme.colors.componentCallToActionInteractive_amberAlpha
-            : theme.colors.componentCallToActionInteractive_alpha,
-        }}
-      />
+      {children !== undefined && (
+        <div
+          style={{
+            flex: 1,
+            height: 1,
+            backgroundColor: highlight
+              ? theme.colors.componentCallToActionInteractive_amberAlpha
+              : theme.colors.componentCallToActionInteractive_alpha,
+          }}
+        />
+      )}
 
-      <Text color={highlight ? 'amber' : undefined}>{children}</Text>
+      {children !== undefined && (
+        <Text color={highlight ? 'amber' : undefined}>{children}</Text>
+      )}
     </Flex>
   );
 }
diff --git a/src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx b/src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx
index d60da564d..bb7315645 100644
--- a/src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx
+++ b/src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx
@@ -56,22 +56,23 @@ export function Characteristics() {
         <Info name="View range" unit="m">
           {turret.view_range}
         </Info>
-        <Info name="Camouflage when still" unit="%">
+        <Info name="Camouflage" unit="%" />
+        <Info indent name="Still">
           {(tank.camouflage.still * 100).toFixed(2)}
         </Info>
-        <Info indent name="Moving" unit="%">
+        <Info indent name="Moving">
           {(tank.camouflage.moving * 100).toFixed(2)}
         </Info>
-        <Info indent name="Shooting still" unit="%">
+        <Info indent name="Shooting still">
           {(tank.camouflage.still * gun.camouflageLoss * 100).toFixed(2)}
         </Info>
-        <Info indent name="Shooting on move" unit="%">
+        <Info indent name="Shooting on move">
           {(tank.camouflage.moving * gun.camouflageLoss * 100).toFixed(2)}
         </Info>
-        <Info indent name="On fire penalty" unit="%">
-          {(tank.camouflage.onFire * 100).toFixed(2)}
+        <Info indent name="On fire">
+          {(tank.camouflage.onFire * tank.camouflage.still * 100).toFixed(2)}
         </Info>
-        <Info indent name="Size" unit="m">
+        <Info name="Size" unit="m">
           {size.map((component) => component.toFixed(2)).join(' x ')}
         </Info>
       </Flex>
@@ -79,9 +80,6 @@ export function Characteristics() {
       <Flex direction="column" gap="2">
         <Heading size="5">Fire</Heading>
         <Info name="Gun type">{GUN_TYPE_NAMES[gun.type]}</Info>
-        <Info name="Damage per minute" unit="hp / min">
-          {dpm.toFixed(0)}
-        </Info>
         {gun.type === 'auto_reloader' && (
           <>
             <Info indent name="Maximum" unit="hp / min">
@@ -107,91 +105,84 @@ export function Characteristics() {
             {gun.reload.toFixed(2)}
           </Info>
         )}
+        <Info name="Damage per minute" unit="hp / min">
+          {dpm.toFixed(0)}
+        </Info>
         <Info name="Caliber" unit="mm">
           {shell.caliber}
         </Info>
-        {gun.shells.map((shell, index) => (
-          <Info
-            indent={index > 0}
-            name={`${SHELL_NAMES[shell.type]}${index === 0 ? ' penetration' : ''}`}
-            unit="mm"
-          >
+        <Info name="Penetration" unit="mm" />
+        {gun.shells.map((shell) => (
+          <Info indent name={SHELL_NAMES[shell.type]}>
             {resolveNearPenetration(shell.penetration)}
           </Info>
         ))}
-        {gun.shells.map((shell, index) => (
-          <Info
-            indent={index > 0}
-            name={`${SHELL_NAMES[shell.type]}${index === 0 ? ' damage' : ''}`}
-            unit="hp"
-          >
+        <Info name="Damage" unit="hp" />
+        {gun.shells.map((shell) => (
+          <Info indent name={SHELL_NAMES[shell.type]}>
             {shell.damage.armor}
           </Info>
         ))}
+        <Info name="Module damage" unit="hp" />
         {gun.shells.map((shell, index) => (
-          <Info
-            indent={index > 0}
-            name={`${SHELL_NAMES[shell.type]}${index === 0 ? ' module damage' : ''}`}
-            unit="hp"
-          >
+          <Info indent name={SHELL_NAMES[shell.type]}>
             {shell.damage.module}
           </Info>
         ))}
+        <Info name="Shell velocity" unit="m/s" />
         {gun.shells.map((shell, index) => (
-          <Info
-            indent={index > 0}
-            name={`${SHELL_NAMES[shell.type]}${index === 0 ? ' velocity' : ''}`}
-            unit="m/s"
-          >
+          <Info indent name={SHELL_NAMES[shell.type]}>
             {shell.speed}
           </Info>
         ))}
         <Info name="Aim time" unit="s">
           TODO
         </Info>
-        <Info name="Dispersion at 100m" unit="m">
+        <Info name="Dispersion at 100m" unit="m" />
+        <Info indent name="Still">
           TODO
         </Info>
-        <Info indent name="On move" unit="m">
+        <Info indent name="Moving">
           TODO
         </Info>
-        <Info indent name="On hull traverse" unit="m">
+        <Info indent name="Hull traversing">
           TODO
         </Info>
-        <Info indent name="On turret traverse" unit="m">
+        <Info indent name="Turret traversing">
           TODO
         </Info>
-        <Info indent name="On shoot" unit="m">
+        <Info indent name="After shooting">
           TODO
         </Info>
-        <Info name="Gun depression" unit="°">
+        <Info name="Gun flexibility" unit="°" />
+        <Info indent name="Depression">
           {gunModelDefinition.pitch.max}
         </Info>
-        <Info indent name="Elevation" unit="°">
+        <Info indent name="Elevation">
           {-gunModelDefinition.pitch.min}
         </Info>
         {gunModelDefinition.pitch.front && (
           <>
-            <Info indent name="Frontal depression" unit="°">
+            <Info indent name="Frontal depression">
               {gunModelDefinition.pitch.front.max}
             </Info>
-            <Info indent name="Frontal elevation" unit="°">
+            <Info indent name="Frontal elevation">
               {-gunModelDefinition.pitch.front.min}
             </Info>
           </>
         )}
         {gunModelDefinition.pitch.back && (
           <>
-            <Info indent name="Rear depression" unit="°">
+            <Info indent name="Rear depression">
               {gunModelDefinition.pitch.back.max}
             </Info>
-            <Info indent name="Rear elevation" unit="°">
+            <Info indent name="Rear elevation">
               {-gunModelDefinition.pitch.back.min}
             </Info>
           </>
         )}
         {turretModelDefinition.yaw && (
-          <Info indent name="Azimuth" unit="°">
+          <Info indent name="Azimuth">
             {-turretModelDefinition.yaw.min}, {turretModelDefinition.yaw.max}
           </Info>
         )}
@@ -199,34 +190,37 @@ export function Characteristics() {
 
       <Flex direction="column" gap="2">
         <Heading size="5">Maneuverability</Heading>
-        <Info name="Speed forwards" unit="km/s">
+        <Info name="Speed" unit="km/s" />
+        <Info indent name="Forwards">
           TODO
         </Info>
-        <Info indent name="Average" unit="km/s">
+        <Info indent name="Average">
           TODO
         </Info>
-        <Info indent name="Backwards" unit="km/s">
+        <Info indent name="Backwards">
           TODO
         </Info>
-        <Info name="Effective power on hard terrain" unit="hp/kg">
+        <Info name="Power to weight ratio" unit="hp/kg" />
+        <Info indent name="On hard terrain">
           TODO
         </Info>
-        <Info indent name="On medium terrain" unit="hp/kg">
+        <Info indent name="On medium terrain">
           TODO
         </Info>
-        <Info indent name="On soft terrain" unit="hp/kg">
+        <Info indent name="On soft terrain">
           TODO
         </Info>
         <Info name="Weight" unit="mt">
           TODO
         </Info>
-        <Info name="Traverse speed on hard terrain" unit="°/s">
+        <Info name="Traverse speed" unit="°/s" />
+        <Info indent name="On hard terrain">
           TODO
         </Info>
-        <Info indent name="On medium terrain" unit="°/s">
+        <Info indent name="On medium terrain">
           TODO
         </Info>
-        <Info indent name="On soft terrain" unit="°/s">
+        <Info indent name="On soft terrain">
           TODO
         </Info>
       </Flex>