feat: dragging

packages/website/src/components/TankSearch/components/Card.tsx

@@ -0,0 +1,148 @@
+import {
+  fetchModelDefinitions,
+  normalizeBoundingBox,
+  resolveDpm,
+  unionBoundingBox,
+  type TankDefinition,
+} from '@blitzkit/core';
+import { useStore } from '@nanostores/react';
+import { useMemo } from 'react';
+import { resolveReload } from '../../../core/blitzkit/resolveReload';
+import { $tankopediaSort } from '../../../stores/tankopediaSort';
+import { TankCard } from '../../TankCard';
+
+interface TankSearchCardProps {
+  tank: TankDefinition;
+  onSelect?: (tank: TankDefinition) => void;
+}
+
+const modelDefinitions = await fetchModelDefinitions();
+
+export function TankSearchCard({ tank, onSelect }: TankSearchCardProps) {
+  const tankopediaSort = useStore($tankopediaSort);
+  const discriminator = useMemo(() => {
+    if (tankopediaSort.by.startsWith('meta')) return undefined;
+
+    const turret = tank.turrets.at(-1)!;
+    const gun = turret.guns.at(-1)!;
+    const shell0 = gun.gun_type!.value.base.shells[0];
+    const shell1 = gun.gun_type!.value.base.shells[1];
+    const tracks = tank.tracks.at(-1)!;
+    const engine = tank.engines.at(-1)!;
+    const tankModelDefinition = modelDefinitions.models[tank.id];
+    const turretModelDefinition = tankModelDefinition.turrets[turret.id];
+    const gunModelDefinition =
+      turretModelDefinition.guns[gun.gun_type!.value.base.id];
+
+    switch (tankopediaSort.by) {
+      case 'fire.aimTime':
+        return gun.gun_type!.value.base.aim_time.toFixed(2);
+      case 'fire.caliber':
+        return shell0.caliber.toFixed(0);
+      case 'fire.damage':
+        return shell0.armor_damage.toFixed(0);
+      case 'fire.moduleDamage':
+        return shell0.armor_damage.toFixed(0);
+      case 'fire.dispersionMoving':
+        return tracks.dispersion_move.toFixed(3);
+      case 'fire.dispersionStill':
+        return gun.gun_type!.value.base.dispersion_base.toFixed(3);
+      case 'fire.dpm':
+        return resolveDpm(gun, shell0).toFixed(0);
+      case 'fire.dpmPremium':
+        return shell1 ? resolveDpm(gun, shell1).toFixed(0) : '--';
+      case 'fire.reload':
+        return resolveReload(gun).toFixed(2);
+      case 'fire.standardPenetration':
+        return shell0.penetration.near.toFixed(0);
+      case 'fire.premiumPenetration':
+        return shell1 ? shell1.penetration.near.toFixed(0) : '--';
+      case 'fire.shellVelocity':
+        return shell0.velocity.toFixed(0);
+      case 'fire.shellCapacity':
+        return gun.gun_type!.value.base.shell_capacity.toFixed(0);
+      case 'fire.shellRange':
+        return shell0.range.toFixed(0);
+      case 'fire.gunDepression':
+        return (
+          gunModelDefinition.pitch.max +
+          (tankModelDefinition.initial_turret_rotation?.pitch ?? 0)
+        ).toFixed(1);
+      case 'fire.gunElevation':
+        return (
+          -gunModelDefinition.pitch.min -
+          (tankModelDefinition.initial_turret_rotation?.pitch ?? 0)
+        ).toFixed(1);
+      case 'maneuverability.forwardsSpeed':
+        return tank.speed_forwards.toFixed(0);
+      case 'maneuverability.backwardsSpeed':
+        return tank.speed_backwards.toFixed(0);
+      case 'maneuverability.power':
+        return engine.power.toFixed(0);
+      case 'maneuverability.powerToWeight':
+        return (
+          (1000 * engine.power) /
+          (tank.weight +
+            engine.weight +
+            tracks.weight +
+            turret.weight +
+            gun.gun_type!.value.base.weight)
+        ).toFixed(1);
+      case 'maneuverability.weight':
+        return (
+          (tank.weight +
+            engine.weight +
+            tracks.weight +
+            turret.weight +
+            gun.gun_type!.value.base.weight) /
+          1000
+        ).toFixed(1);
+      case 'maneuverability.traverseSpeed':
+        return tracks.traverse_speed.toFixed(1);
+      case 'survivability.health':
+        return (tank.health + turret.health).toFixed(0);
+      case 'survivability.viewRange':
+        return turret.view_range.toFixed(0);
+      case 'survivability.camouflageStill':
+        return (tank.camouflage_still * 100).toFixed(0);
+      case 'survivability.camouflageMoving':
+        return (tank.camouflage_moving * 100).toFixed(0);
+      case 'survivability.camouflageShooting':
+        return (
+          tank.camouflage_still *
+          gun.gun_type!.value.base.camouflage_loss *
+          100
+        ).toFixed(0);
+      case 'survivability.volume': {
+        const dimensions = normalizeBoundingBox(
+          unionBoundingBox(
+            tankModelDefinition.bounding_box,
+            turretModelDefinition.bounding_box,
+          ),
+        );
+
+        return (dimensions.x * dimensions.y * dimensions.z).toFixed(0);
+      }
+
+      case 'survivability.length': {
+        const bounds = normalizeBoundingBox(
+          unionBoundingBox(
+            tankModelDefinition.bounding_box,
+            turretModelDefinition.bounding_box,
+          ),
+        );
+
+        return Math.max(bounds.x, bounds.y, bounds.z).toFixed(0);
+      }
+    }
+  }, [tankopediaSort.by]);
+
+  return (
+    <TankCard
+      key={tank.id}
+      onTankSelect={onSelect}
+      tank={tank}
+      discriminator={discriminator}
+    />
+  );
+}

packages/website/src/components/TankSearch/index.tsx

@@ -24,7 +24,7 @@ import {
 } from '../../stores/tankopediaPersistent/constants';
 import { $tankopediaSort } from '../../stores/tankopediaSort';
 import { ExperimentIcon } from '../ExperimentIcon';
-import { TankCard } from '../TankCard';
+import { TankSearchCard } from './components/Card';
 import { FilterControl } from './components/FilterControl';
 import { NoResults } from './components/NoResults';
 import { RecentlyViewed } from './components/RecentlyViewed';
@@ -504,7 +504,11 @@ export const TankSearch = memo<TankSearchProps>(
             {tanks.length > 0 && (
               <TankCardWrapper>
                 {tanks.map((tank) => (
-                  <TankCard key={tank.id} onSelect={onSelect} tank={tank} />
+                  <TankSearchCard
+                    tank={tank}
+                    key={tank.id}
+                    onSelect={onSelect}
+                  />
                 ))}
 
                 {times(