feat: crew

scripts/buildAssets/definitions.ts

@@ -358,7 +358,7 @@ export async function definitions(production: boolean) {
             stringsCache[tank.userString],
           name_full: strings[tank.userString] ?? stringsCache[tank.userString],
           nation,
-          tree_type: (tank.sellPrice ? 'gold' in tank.sellPrice : false)
+          tree_type: tankTags.includes('collectible')
             ? 'collector'
             : (typeof tank.price === 'number' ? false : 'gold' in tank.price)
               ? 'premium'

src/app/tools/tankopedia/[id]/components/Configure/components/Camouflage.tsx

@@ -1,15 +1,16 @@
-import { Flex, Heading } from '@radix-ui/themes';
+import { Heading } from '@radix-ui/themes';
 import { ModuleButton } from '../../../../../../../components/ModuleButton';
 import {
   mutateTankopediaTemporary,
   useTankopediaTemporary,
 } from '../../../../../../../stores/tankopedia';
+import { ConfigurationChildWrapper } from './ConfigurationChildWrapper';
 
 export function Camouflage() {
   const camouflage = useTankopediaTemporary((state) => state.camouflage);
 
   return (
-    <Flex gap="2" direction="column">
+    <ConfigurationChildWrapper>
       <Heading size="4">Camouflage</Heading>
 
       <ModuleButton
@@ -23,6 +24,6 @@ export function Camouflage() {
           });
         }}
       />
-    </Flex>
+    </ConfigurationChildWrapper>
   );
 }

src/app/tools/tankopedia/[id]/components/Configure/components/ConfigurationChildWrapper.tsx

@@ -0,0 +1,16 @@
+import { Flex } from '@radix-ui/themes';
+import { ReactNode } from 'react';
+
+interface ConfigurationChildWrapperProps {
+  children: ReactNode;
+}
+
+export function ConfigurationChildWrapper({
+  children,
+}: ConfigurationChildWrapperProps) {
+  return (
+    <Flex direction="column" gap="2">
+      {children}
+    </Flex>
+  );
+}

src/app/tools/tankopedia/[id]/components/Configure/components/Consumables.tsx

@@ -8,6 +8,7 @@ import {
   mutateTankopediaTemporary,
   useTankopediaTemporary,
 } from '../../../../../../../stores/tankopedia';
+import { ConfigurationChildWrapper } from './ConfigurationChildWrapper';
 
 export function Consumables() {
   const protagonist = useDuel((state) => state.protagonist!);
@@ -23,7 +24,7 @@ export function Consumables() {
   );
 
   return (
-    <Flex gap="2" direction="column">
+    <ConfigurationChildWrapper>
       <Heading size="4">
         Consumables{' '}
         <Text color="gray">(max {protagonist.tank.consumables})</Text>
@@ -59,6 +60,6 @@ export function Consumables() {
           );
         })}
       </Flex>
-    </Flex>
+    </ConfigurationChildWrapper>
   );
 }

src/app/tools/tankopedia/[id]/components/Configure/components/Crew.tsx

@@ -0,0 +1,29 @@
+import { Flex, Heading, Slider, TextField } from '@radix-ui/themes';
+import { ConfigurationChildWrapper } from './ConfigurationChildWrapper';
+
+export function Crew() {
+  return (
+    <ConfigurationChildWrapper>
+      <Heading size="4">Crew</Heading>
+
+      <Flex
+        align="center"
+        gap="4"
+        style={{
+          width: '100%',
+        }}
+      >
+        <TextField.Root style={{ width: 64 }}>
+          <TextField.Input defaultValue={100} />
+          <TextField.Slot>%</TextField.Slot>
+        </TextField.Root>
+        <Slider
+          min={50}
+          max={100}
+          defaultValue={[100]}
+          style={{ flex: 1, maxWidth: 208 }}
+        />
+      </Flex>
+    </ConfigurationChildWrapper>
+  );
+}

src/app/tools/tankopedia/[id]/components/Configure/components/Equipments.tsx

@@ -7,6 +7,7 @@ import {
   mutateTankopediaTemporary,
   useTankopediaTemporary,
 } from '../../../../../../../stores/tankopedia';
+import { ConfigurationChildWrapper } from './ConfigurationChildWrapper';
 
 export function Equipments() {
   const protagonist = useDuel((state) => state.protagonist!);
@@ -18,7 +19,7 @@ export function Equipments() {
   );
 
   return (
-    <Flex gap="2" direction="column">
+    <ConfigurationChildWrapper>
       <Heading size="4">Equipments</Heading>
 
       <Flex direction="column" gap="2">
@@ -63,6 +64,6 @@ export function Equipments() {
           </Flex>
         ))}
       </Flex>
-    </Flex>
+    </ConfigurationChildWrapper>
   );
 }

src/app/tools/tankopedia/[id]/components/Configure/components/Modules.tsx

@@ -2,12 +2,13 @@ import { Flex, Heading } from '@radix-ui/themes';
 import { ModuleButton } from '../../../../../../../components/ModuleButton';
 import { TIER_ROMAN_NUMERALS } from '../../../../../../../core/blitzkrieg/tankDefinitions';
 import { mutateDuel, useDuel } from '../../../../../../../stores/duel';
+import { ConfigurationChildWrapper } from './ConfigurationChildWrapper';
 
 export function Modules() {
   const protagonist = useDuel((state) => state.protagonist!);
 
   return (
-    <Flex gap="2" direction="column">
+    <ConfigurationChildWrapper>
       <Heading size="4">Modules</Heading>
 
       <Flex gap="2">
@@ -59,6 +60,6 @@ export function Modules() {
           })}
         </Flex>
       </Flex>
-    </Flex>
+    </ConfigurationChildWrapper>
   );
 }

src/app/tools/tankopedia/[id]/components/Configure/components/Provisions.tsx

@@ -8,6 +8,7 @@ import {
   mutateTankopediaTemporary,
   useTankopediaTemporary,
 } from '../../../../../../../stores/tankopedia';
+import { ConfigurationChildWrapper } from './ConfigurationChildWrapper';
 
 export function Provisions() {
   const protagonist = useDuel((state) => state.protagonist!);
@@ -23,7 +24,7 @@ export function Provisions() {
   );
 
   return (
-    <Flex gap="2" direction="column">
+    <ConfigurationChildWrapper>
       <Heading size="4">
         Provisions <Text color="gray">(max {protagonist.tank.provisions})</Text>
       </Heading>
@@ -58,6 +59,6 @@ export function Provisions() {
           );
         })}
       </Flex>
-    </Flex>
+    </ConfigurationChildWrapper>
   );
 }

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

@@ -1,6 +1,7 @@
 import { Flex, Heading } from '@radix-ui/themes';
 import { Camouflage } from './components/Camouflage';
 import { Consumables } from './components/Consumables';
+import { Crew } from './components/Crew';
 import { Equipments } from './components/Equipments';
 import { Modules } from './components/Modules';
 import { Provisions } from './components/Provisions';
@@ -10,12 +11,13 @@ export function Configure() {
     <Flex gap="4" direction="column">
       <Heading>Configure</Heading>
 
-      <Flex gap="4" direction="column" wrap="wrap">
+      <Flex wrap="wrap" direction="column" gap="4">
         <Modules />
-        <Equipments />
-        <Consumables />
+        <Crew />
         <Camouflage />
         <Provisions />
+        <Consumables />
+        <Equipments />
       </Flex>
     </Flex>
   );

src/app/tools/tankopedia/page.css.ts

@@ -55,3 +55,20 @@ export const alignTopRight = style({
     },
   },
 });
+
+export const configure = style({
+  display: 'grid',
+  gridTemplateColumns: '1fr 1fr',
+  gap: 16,
+});
+
+export const configureRight = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 8,
+});
+export const configureLeft = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 8,
+});