feat: crew button and missing traverse stats

src/app/tools/compare/page.tsx

@@ -23,6 +23,7 @@ import { times } from 'lodash';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { use, useCallback, useEffect, useMemo, useState } from 'react';
 import { ConsumablesManager } from '../../../components/ConsumablesManager';
+import { CrewSkillManager } from '../../../components/CrewSkillManager';
 import { EquipmentManager } from '../../../components/EquipmentManager';
 import { ModuleManager } from '../../../components/ModuleManager';
 import PageWrapper from '../../../components/PageWrapper';
@@ -520,7 +521,14 @@ export default function Page() {
                       </Popover.Trigger>
 
                       <Popover.Content>
-                        <Heading>ඞ</Heading>
+                        <CrewSkillManager
+                          skillLevels={crewSkills}
+                          onChange={(skills) => {
+                            mutateCompareTemporary((draft) => {
+                              draft.crewSkills = skills;
+                            });
+                          }}
+                        />
                       </Popover.Content>
                     </Popover.Root>
                   </Flex>
@@ -1016,21 +1024,42 @@ export default function Page() {
               <Row name="Speed forwards" value="speedForwards" decimals={0} />
               <Row name="Speed backwards" value="speedBackwards" decimals={0} />
               <Row name="Engine power" value="enginePower" decimals={0} />
+              <Row name="Weight" value="weight" decimals={1} />
               <Row
-                name="Power to weight ratio hard terrain"
+                name="Power to weight ratio on hard terrain"
                 value="powerToWeightRatioHardTerrain"
                 decimals={1}
               />
               <Row
-                name="Power to weight ratio medium terrain"
+                name="Power to weight ratio on medium terrain"
                 value="powerToWeightRatioMediumTerrain"
                 decimals={1}
               />
               <Row
-                name="Power to weight ratio soft terrain"
+                name="Power to weight ratio on soft terrain"
                 value="powerToWeightRatioSoftTerrain"
                 decimals={1}
               />
+              <Row
+                name="Traverse speed"
+                value="turretTraverseSpeed"
+                decimals={1}
+              />
+              <Row
+                name="Traverse speed on hard terrain"
+                value="hullTraverseHardTerrain"
+                decimals={1}
+              />
+              <Row
+                name="Traverse speed on medium terrain"
+                value="hullTraverseMediumTerrain"
+                decimals={1}
+              />
+              <Row
+                name="Traverse speed on soft terrain"
+                value="hullTraverseSoftTerrain"
+                decimals={1}
+              />
             </Table.Body>
 
             <Title>Survivability</Title>

src/app/tools/tankopedia/[id]/components/Characteristics/components/Skills/index.tsx

@@ -9,18 +9,14 @@ import {
   Text,
 } from '@radix-ui/themes';
 import { use } from 'react';
-import { GenericTankComponentButton } from '../../../../../../../../components/ModuleButtons/GenericTankComponentButton';
+import { CrewSkillManager } from '../../../../../../../../components/CrewSkillManager';
-import { asset } from '../../../../../../../../core/blitzkrieg/asset';
 import { createDefaultSkills } from '../../../../../../../../core/blitzkrieg/createDefaultSkills';
 import { skillDefinitions } from '../../../../../../../../core/blitzkrieg/skillDefinitions';
-import { Tier } from '../../../../../../../../core/blitzkrieg/tankDefinitions';
-import { TIER_ROMAN_NUMERALS } from '../../../../../../../../core/blitzkrieg/tankDefinitions/constants';
 import {
   mutateTankopediaTemporary,
   useTankopediaTemporary,
 } from '../../../../../../../../stores/tankopedia';
 import { ConfigurationChildWrapper } from '../ConfigurationChildWrapper';
-import { permanentSkills } from './constants';
 
 export function Skills() {
   const awaitedSkillDefinitions = use(skillDefinitions);
@@ -89,43 +85,14 @@ export function Skills() {
         </Button>
       </Flex>
 
-      <Flex direction="column" gap="2">
+      <CrewSkillManager
-        {Object.entries(awaitedSkillDefinitions.classes).map(
+        skillLevels={skillLevels}
-          ([tankClass, skills]) => (
+        onChange={(skills) => {
-            <Flex gap="2" key={tankClass}>
+          mutateTankopediaTemporary((draft) => {
-              {skills.map((skill) => {
+            draft.skills = skills;
-                const level = skillLevels[skill];
+          });
-
+        }}
-                return (
+      />
-                  <GenericTankComponentButton
-                    special={!permanentSkills.includes(skill)}
-                    first
-                    last
-                    selected={level > 0}
-                    discriminator={
-                      level === 0
-                        ? undefined
-                        : TIER_ROMAN_NUMERALS[level as Tier]
-                    }
-                    icon={asset(`icons/skills/${skill}.webp`)}
-                    onClick={(event) => {
-                      mutateTankopediaTemporary((draft) => {
-                        if (event.shiftKey) {
-                          draft.skills[skill] =
-                            draft.skills[skill] === 0 ? 7 : 0;
-                        } else {
-                          draft.skills[skill] = level - 1;
-                          if (draft.skills[skill] < 0) draft.skills[skill] = 7;
-                        }
-                      });
-                    }}
-                  />
-                );
-              })}
-            </Flex>
-          ),
-        )}
-      </Flex>
     </ConfigurationChildWrapper>
   );
 }

src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx

@@ -411,6 +411,14 @@ export function Characteristics() {
         <InfoWithDelta decimals={0} name="Engine power" unit="hp">
           {stats.enginePower}
         </InfoWithDelta>
+        <InfoWithDelta
+          decimals={1}
+          name="Weight"
+          unit="tn"
+          deltaType="lowerIsBetter"
+        >
+          {stats.weight}
+        </InfoWithDelta>
         <Info name="Power to weight ratio" unit="hp/tn" />
         <InfoWithDelta decimals={1} indent name="On hard terrain">
           {stats.powerToWeightRatioHardTerrain}
@@ -421,18 +429,10 @@ export function Characteristics() {
         <InfoWithDelta decimals={1} indent name="On soft terrain">
           {stats.powerToWeightRatioSoftTerrain}
         </InfoWithDelta>
-        <InfoWithDelta
-          decimals={1}
-          name="Weight"
-          unit="tn"
-          deltaType="lowerIsBetter"
-        >
-          {stats.weight}
-        </InfoWithDelta>
         <InfoWithDelta name="Turret traverse speed" unit="°/s" decimals={0}>
           {stats.turretTraverseSpeed}
         </InfoWithDelta>
-        <Info name="Effective traverse speed" unit="°/s" />
+        <Info name="Hull traverse speed" unit="°/s" />
         <InfoWithDelta decimals={1} indent name="On hard terrain">
           {stats.hullTraverseHardTerrain}
         </InfoWithDelta>

src/components/CrewSkillManager.tsx

@@ -0,0 +1,61 @@
+import { Flex } from '@radix-ui/themes';
+import { use } from 'react';
+import { permanentSkills } from '../app/tools/tankopedia/[id]/components/Characteristics/components/Skills/constants';
+import { asset } from '../core/blitzkrieg/asset';
+import { skillDefinitions } from '../core/blitzkrieg/skillDefinitions';
+import { Tier } from '../core/blitzkrieg/tankDefinitions';
+import { TIER_ROMAN_NUMERALS } from '../core/blitzkrieg/tankDefinitions/constants';
+import { GenericTankComponentButton } from './ModuleButtons/GenericTankComponentButton';
+
+interface CrewSkillManagerProps {
+  skillLevels: Record<string, number>;
+  onChange?: (skillLevels: Record<string, number>) => void;
+}
+
+export function CrewSkillManager({
+  skillLevels,
+  onChange,
+}: CrewSkillManagerProps) {
+  const awaitedSkillDefinitions = use(skillDefinitions);
+
+  return (
+    <Flex direction="column" gap="2">
+      {Object.entries(awaitedSkillDefinitions.classes).map(
+        ([tankClass, skills]) => (
+          <Flex gap="2" key={tankClass}>
+            {skills.map((skill) => {
+              const level = skillLevels[skill];
+
+              return (
+                <GenericTankComponentButton
+                  special={!permanentSkills.includes(skill)}
+                  first
+                  last
+                  selected={level > 0}
+                  discriminator={
+                    level === 0 ? undefined : TIER_ROMAN_NUMERALS[level as Tier]
+                  }
+                  icon={asset(`icons/skills/${skill}.webp`)}
+                  onClick={(event) => {
+                    if (!onChange) return;
+
+                    const draft = { ...skillLevels };
+
+                    if (event.shiftKey) {
+                      draft[skill] = draft[skill] === 0 ? 7 : 0;
+                    } else {
+                      draft[skill] = level - 1;
+                      if (draft[skill] < 0) draft[skill] = 7;
+                    }
+
+                    onChange(draft);
+                  }}
+                />
+              );
+            })}
+          </Flex>
+        ),
+      )}
+    </Flex>
+  );
+}