feat: new layout

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

@@ -5,7 +5,7 @@ import { theme } from '../../../../../../../stitches.config';
 interface InfoProps {
   name: string;
   children: ReactNode;
-  unit: string;
+  unit?: string;
   indent?: boolean;
   highlight?: boolean;
 }
@@ -24,10 +24,15 @@ export function Info({
       gap="4"
     >
       <Text color={highlight ? 'amber' : undefined}>
-        {name}{' '}
+        {name}
+        {unit != undefined && (
+          <>
+            {' '}
             <Text color="gray" size="1">
               {unit}
             </Text>
+          </>
+        )}
       </Text>
 
       <div

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

@@ -1,18 +1,15 @@
-import { Flex, Heading, Tabs } from '@radix-ui/themes';
+import { Flex, Heading } from '@radix-ui/themes';
 import { use } from 'react';
 import { resolveNearPenetration } from '../../../../../../core/blitz/resolveNearPenetration';
 import { modelDefinitions } from '../../../../../../core/blitzkrieg/modelDefinitions';
 import { normalizeBoundingBox } from '../../../../../../core/blitzkrieg/normalizeBoundingBox';
-import { SHELL_NAMES } from '../../../../../../core/blitzkrieg/tankDefinitions';
+import {
+  GUN_TYPE_NAMES,
+  SHELL_NAMES,
+} from '../../../../../../core/blitzkrieg/tankDefinitions';
 import { unionBoundingBox } from '../../../../../../core/blitzkrieg/unionBoundingBox';
 import { useDuel } from '../../../../../../stores/duel';
-import { Camouflage } from './components/Camouflage';
-import { Consumables } from './components/Consumables';
-import { Crew } from './components/Crew';
-import { Equipments } from './components/Equipments';
 import { Info } from './components/Info';
-import { Modules } from './components/Modules';
-import { Provisions } from './components/Provisions';
 
 export function Characteristics() {
   const awaitedModelDefinitions = use(modelDefinitions);
@@ -47,14 +44,6 @@ export function Characteristics() {
   }
 
   return (
-    <Tabs.Root defaultValue="configure" style={{ width: '100%' }}>
-      <Flex gap="4" direction="column">
-        <Tabs.List>
-          <Tabs.Trigger value="configure">Configure</Tabs.Trigger>
-          <Tabs.Trigger value="statistics">Statistics</Tabs.Trigger>
-        </Tabs.List>
-
-        <Tabs.Content value="statistics">
     <Flex direction="column" gap="4">
       <Flex direction="column" gap="2">
         <Heading size="5">Survivability</Heading>
@@ -89,6 +78,7 @@ 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>
@@ -106,9 +96,7 @@ export function Characteristics() {
           gun.reload.map((reload, index) => (
             <Info
               indent={index > 0}
-                    name={
+              name={index > 0 ? `Shell ${index + 1}` : 'Reload on shell 1'}
-                      index > 0 ? `Shell ${index + 1}` : 'Reload on shell 1'
-                    }
               unit="s"
             >
               {reload.toFixed(2)}
@@ -204,8 +192,7 @@ export function Characteristics() {
         )}
         {turretModelDefinition.yaw && (
           <Info indent name="Azimuth" unit="°">
-                  {-turretModelDefinition.yaw.min},{' '}
+            {-turretModelDefinition.yaw.min}, {turretModelDefinition.yaw.max}
-                  {turretModelDefinition.yaw.max}
           </Info>
         )}
       </Flex>
@@ -244,19 +231,5 @@ export function Characteristics() {
         </Info>
       </Flex>
     </Flex>
-        </Tabs.Content>
-
-        <Tabs.Content value="configure">
-          <Flex direction="column" gap="4">
-            <Modules />
-            <Equipments />
-            <Crew />
-            <Consumables />
-            <Provisions />
-            <Camouflage />
-          </Flex>
-        </Tabs.Content>
-      </Flex>
-    </Tabs.Root>
   );
 }

src/app/tools/tankopedia/[id]/page.tsx

@@ -8,6 +8,12 @@ import { mutateDuel, useDuel } from '../../../../stores/duel';
 import { mutateTankopediaTemporary } from '../../../../stores/tankopedia';
 import { AntagonistBar } from './components/AntagonistBar';
 import { Characteristics } from './components/Characteristics';
+import { Camouflage } from './components/Characteristics/components/Camouflage';
+import { Consumables } from './components/Characteristics/components/Consumables';
+import { Crew } from './components/Characteristics/components/Crew';
+import { Equipments } from './components/Characteristics/components/Equipments';
+import { Modules } from './components/Characteristics/components/Modules';
+import { Provisions } from './components/Characteristics/components/Provisions';
 import { TankSandbox } from './components/Model/TankSandbox';
 import { Title } from './components/Title';
 
@@ -92,13 +98,21 @@ export default function Page({ params }: { params: { id: string } }) {
               direction="column"
               style={{
                 flex: 1,
-                position: wideFormat ? 'sticky' : undefined,
                 width: '100%',
                 top: 64,
               }}
             >
               <TankSandbox />
               <AntagonistBar />
+
+              <Flex direction="column" gap="4">
+                <Modules />
+                <Equipments />
+                <Crew />
+                <Consumables />
+                <Provisions />
+                <Camouflage />
+              </Flex>
             </Flex>
 
             <Flex style={{ width: wideFormat ? 320 : '100%' }}>

src/core/blitzkrieg/eventManager.ts

@@ -5,7 +5,7 @@ export class EventManager<Type> {
     this.callbacks.add(callback);
   }
   off(callback: (data: Type) => void) {
-    this.callbacks.delete(callback);
+    return this.callbacks.delete(callback);
   }
 
   emit(data: Type) {

src/core/blitzkrieg/tankDefinitions.ts

@@ -91,6 +91,12 @@ export type ShellDefinition = {
   explosionRadius?: number;
 };
 
+export const GUN_TYPE_NAMES: Record<GunDefinition['type'], string> = {
+  regular: 'Regular',
+  auto_loader: 'Auto loader',
+  auto_reloader: 'Auto reloader',
+};
+
 export const tankDefinitions = fetch(asset('definitions/tanks.json'), {
   cache: 'no-cache',
 }).then(async (response) => response.json() as Promise<TankDefinitions>);