feat: new maps

.vscode/settings.json

@@ -54,6 +54,7 @@
     "dbid",
     "Ddpf",
     "Ddsd",
+    "deadrail",
     "debugflags",
     "deburr",
     "decalmask",

packages/i18n/strings/en.json

@@ -881,8 +881,8 @@
           "view_range": {
             "camo": "Camo",
             "percentage": "%s1%",
-            "desert_sands": "Desert Sands",
-            "new_bay": "New Bay"
+            "ghost_factory": "Ghost Factory",
+            "dead_rail": "Dead Rail"
           }
         },
 

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/Crew.tsx

@@ -28,7 +28,7 @@ export function Crew({ stats }: StatsAcceptorProps) {
   const commanderMastery = 1 + provisionCrewBonus;
 
   return (
-    <Flex direction="column" gap="2">
+    <Flex direction="column" gap="2" width="16rem">
       <Flex gap="2" align="center">
         <Heading size="5">
           {strings.website.tools.tankopedia.crew.title}

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/Firepower.tsx

@@ -57,7 +57,7 @@ export function Firepower({ stats }: StatsAcceptorProps) {
   }, [penetrationDistance]);
 
   return (
-    <Flex direction="column" gap="2">
+    <Flex direction="column" gap="2" width="16rem">
       <Flex align="center" gap="4">
         <Heading size="5">
           {strings.website.tools.tankopedia.firepower.title}

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/Maneuverability.tsx

@@ -11,7 +11,7 @@ export function Maneuverability({ stats }: StatsAcceptorProps) {
   const { strings } = useLocale();
 
   return (
-    <Flex direction="column" gap="2">
+    <Flex direction="column" gap="2" width="16rem">
       <Heading size="5">
         {strings.website.tools.tankopedia.maneuverability.title}
       </Heading>

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/RicochetVisualizer.tsx

@@ -13,7 +13,7 @@ export function RicochetVisualizer({ stats }: StatsAcceptorProps) {
   const container = useRef<HTMLDivElement>(null);
   const normalization = degToRad(stats.shellNormalization);
   const ricochet = degToRad(stats.shellRicochet ?? 90);
-  const [angle, setAngle] = useState(degToRad(45));
+  const [angle, setAngle] = useState(degToRad(-25));
   const doesRicochet = Math.abs(angle) >= ricochet;
   const effectiveAngle = doesRicochet
     ? -angle + Math.PI
@@ -226,7 +226,7 @@ export function RicochetVisualizer({ stats }: StatsAcceptorProps) {
             {doesRicochet
               ? '-'
               : literals(strings.common.units.percentage, [
-                  (100 / Math.cos(effectiveAngle)).toFixed(2),
+                  (100 / Math.cos(effectiveAngle)).toFixed(0),
                 ])}
           </Code>
         </Flex>

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/Survivability.tsx

@@ -9,7 +9,7 @@ export function Survivability({ stats }: StatsAcceptorProps) {
   const { strings } = useLocale();
 
   return (
-    <Flex direction="column" gap="2">
+    <Flex direction="column" gap="2" width="16rem">
       <Heading size="5">
         {strings.website.tools.tankopedia.survivability.title}
       </Heading>

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/ViewRangeVisualizer.tsx

@@ -8,13 +8,13 @@ import type { StatsAcceptorProps } from './HullTraverseVisualizer';
 
 const maps = [
   {
-    id: 'new-bay',
-    string: 'new_bay',
+    id: 'ghost-factory',
+    string: 'ghost_factory',
     size: 512,
   },
   {
-    id: 'desert-sands',
-    string: 'desert_sands',
+    id: 'dead-rail',
+    string: 'dead_rail',
     size: 512,
   },
 ] as const;
@@ -48,11 +48,22 @@ export function ViewRangeVisualizer({ stats }: StatsAcceptorProps) {
         width="100%"
         height="100%"
         style={{
-          backgroundImage: `url(/assets/images/tankopedia/visualizers/range/${map.id}.webp)`,
+          backgroundImage: `url(/assets/images/tankopedia/visualizers/range/${map.id}.png)`,
           backgroundSize: 'cover',
           backgroundPosition: 'center',
         }}
       >
+        <Box
+          position="absolute"
+          top="0"
+          left="0"
+          width="100%"
+          height="100%"
+          style={{
+            background: Var('black-a5'),
+          }}
+        />
+
         <Flex
           ref={range}
           position="absolute"
@@ -87,7 +98,7 @@ export function ViewRangeVisualizer({ stats }: StatsAcceptorProps) {
         gap="3"
         align="center"
         style={{
-          backgroundColor: Var('black-a8'),
+          backgroundColor: Var('black-a5'),
           backdropFilter: 'blur(4rem)',
         }}
       >

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/index.tsx

@@ -87,17 +87,15 @@ export function Characteristics() {
       gap="8"
       direction={{
         initial: 'column',
-        md: 'row',
+        lg: 'row',
       }}
     >
-      <Flex direction="column" gap="8" style={{ flex: 1 }}>
-        <Firepower stats={stats} />
-        <Crew stats={stats} />
-      </Flex>
+      <Firepower stats={stats} />
+      <Maneuverability stats={stats} />
 
-      <Flex direction="column" gap="8" style={{ flex: 1 }}>
-        <Maneuverability stats={stats} />
+      <Flex direction="column" gap="8">
         <Survivability stats={stats} />
+        <Crew stats={stats} />
       </Flex>
     </Flex>
   );

packages/website/src/components/Tankopedia/CharacteristicsSection/index.tsx

@@ -37,7 +37,7 @@ export function CharacteristicsSection() {
 
           <Flex
             flexGrow="1"
-            maxWidth={{ initial: '20rem', md: '40rem' }}
+            maxWidth={{ initial: '20rem', md: '54rem' }}
             direction="column"
             gap="6"
             width="100%"