feat: crew skills ui

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

@@ -5,7 +5,7 @@ import { equipmentDefinitions } from '../../../../../../../core/blitzkrieg/equip
 import { mutateDuel, useDuel } from '../../../../../../../stores/duel';
 import { ConfigurationChildWrapper } from './ConfigurationChildWrapper';
 
-export function Equipments() {
+export function Equipment() {
   const protagonist = useDuel((state) => state.protagonist!);
   const awaitedEquipmentDefinitions = use(equipmentDefinitions);
   const equipmentRows =
@@ -14,7 +14,7 @@ export function Equipments() {
 
   return (
     <ConfigurationChildWrapper>
-      <Heading size="4">Equipments</Heading>
+      <Heading size="4">Equipment</Heading>
 
       <Flex direction="column" gap="2">
         {equipmentRows.map((equipmentRow, rowIndex) => (

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

@@ -0,0 +1,71 @@
+import { Flex, Heading } from '@radix-ui/themes';
+import { use } from 'react';
+import { GenericTankComponentButton } from '../../../../../../../components/ModuleButtons/GenericTankComponentButton';
+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 mutateTankopediaPersistent, {
+  useTankopediaPersistent,
+} from '../../../../../../../stores/tankopedia';
+import { ConfigurationChildWrapper } from './ConfigurationChildWrapper';
+
+export function Skills() {
+  const awaitedSkillDefinitions = use(skillDefinitions);
+  const skillLevels = useTankopediaPersistent((state) => state.skills);
+
+  if (Object.keys(skillLevels).length === 0) {
+    mutateTankopediaPersistent((draft) => {
+      Object.values(awaitedSkillDefinitions.classes).forEach((skills) => {
+        skills.forEach((skill) => {
+          draft.skills[skill] = 0;
+        });
+      });
+    });
+
+    return null;
+  }
+
+  return (
+    <ConfigurationChildWrapper>
+      <Heading size="4">Crew skills</Heading>
+
+      <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
+                    first
+                    last
+                    selected={level > 0}
+                    discriminator={
+                      level === 0
+                        ? undefined
+                        : TIER_ROMAN_NUMERALS[level as Tier]
+                    }
+                    icon={asset(`icons/skills/${skill}.webp`)}
+                    onClick={(event) => {
+                      mutateTankopediaPersistent((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]/page.tsx

@@ -10,10 +10,11 @@ import { mutateTankopediaTemporary } from '../../../../stores/tankopedia';
 import { AntagonistBar } from './components/AntagonistBar';
 import { Characteristics } from './components/Characteristics';
 import { Consumables } from './components/Characteristics/components/Consumables';
-import { Equipments } from './components/Characteristics/components/Equipments';
+import { Equipment } from './components/Characteristics/components/Equipment';
 import { Miscellaneous } from './components/Characteristics/components/Miscellaneous';
 import { Modules } from './components/Characteristics/components/Modules';
 import { Provisions } from './components/Characteristics/components/Provisions';
+import { Skills } from './components/Characteristics/components/Skills';
 import { TankSandbox } from './components/Model/TankSandbox';
 import { Title } from './components/Title';
 
@@ -63,8 +64,6 @@ export default function Page({ params }: { params: { id: string } }) {
     };
   }, [initialId, assigned]);
 
-
-
   return (
     <PageWrapper color="purple" size="double">
       {assigned && (
@@ -94,9 +93,10 @@ export default function Page({ params }: { params: { id: string } }) {
               <Flex direction="column" gap="4">
                 <Modules />
                 <Provisions />
-                <Equipments />
+                <Equipment />
                 <Miscellaneous />
                 <Consumables />
+                <Skills />
               </Flex>
             </Flex>
 

src/core/blitzkrieg/skillDefinitions.ts

@@ -7,5 +7,5 @@ export interface SkillDefinitions {
 }
 
 export const skillDefinitions = fetchCdonLz4<SkillDefinitions>(
-  asset('definitions/equipment.cdon.lz4'),
+  asset('definitions/skills.cdon.lz4'),
 );

src/stores/tankopedia.ts

@@ -38,6 +38,7 @@ export interface TankopediaPersistent {
     test: TankopediaTestTankDisplay;
     page: number;
   };
+  skills: Record<string, number>;
   mode: TankopediaMode;
 }
 
@@ -146,6 +147,7 @@ export const useTankopediaPersistent = create<TankopediaPersistent>()(
         test: 'include',
         page: 0,
       },
+      skills: {},
       mode: 'model',
     })),
     { name: 'tankopedia', merge: (a, b) => merge(b, a) },