feat: prettier

packages/i18n/strings/en.json

@@ -887,6 +887,10 @@
         "tank_seo_description": "%s1 armor, statistics, equipment, provisions, and more. %s2 DPM, %s3hp alpha, %s4mm penetration, %s5kph top speed, %s6hp health.",
 
         "visualizers": {
+          "assault": {
+            "title": "Assault shells"
+          },
+
           "rotator": {
             "hull": "Hull",
             "turret": "Turret",

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

@@ -1,15 +1,33 @@
 import type { AssaultRanges } from '@blitzkit/core';
+import { literals } from '@blitzkit/i18n';
 import { Box, Card, Flex, Text } from '@radix-ui/themes';
 import { clamp } from 'three/src/math/MathUtils.js';
+import type { TankCharacteristics } from '../../../../../../../core/blitzkit/tankCharacteristics';
 import { Var } from '../../../../../../../core/radix/var';
+import { useLocale } from '../../../../../../../hooks/useLocale';
 
 interface Props {
   ranges: AssaultRanges;
+  stats: TankCharacteristics;
 }
 
-export function AssaultRangesVisualizer({ ranges }: Props) {
+export function AssaultRangesVisualizer({ ranges: _ranges, stats }: Props) {
+  const maxDistance = Math.max(
+    ..._ranges.ranges.map((range) => range.distance),
+  );
+  const ranges = _ranges.ranges.map((range) => ({
+    factor: range.factor,
+    distance: range.distance,
+    fakeDistance: (2 / Math.PI) * Math.atan((4 * range.distance) / maxDistance),
+  }));
+  const sumFakeDistances = ranges.reduce(
+    (total, range) => total + range.fakeDistance,
+    0,
+  );
+  const { strings } = useLocale();
+
   return (
-    <Card variant="classic" style={{ aspectRatio: '1 / 1' }}>
+    <Card mb="6" variant="classic" style={{ aspectRatio: '1 / 1' }}>
       <Flex
         position="absolute"
         top="0"
@@ -19,7 +37,7 @@ export function AssaultRangesVisualizer({ ranges }: Props) {
         direction="column"
       >
         <Text m="3" size="2" color="gray">
-          Assault shell damage
+          {strings.website.tools.tankopedia.visualizers.assault.title}
         </Text>
 
         <Flex
@@ -31,8 +49,8 @@ export function AssaultRangesVisualizer({ ranges }: Props) {
           flexGrow="1"
         >
           <Flex flexGrow="1">
-            <Box position="relative" width={Var('space-7')}>
-              {ranges.ranges.map((range) => (
+            <Box position="relative" width={Var('space-8')}>
+              {ranges.map((range) => (
                 <Text
                   style={{
                     position: 'absolute',
@@ -44,30 +62,32 @@ export function AssaultRangesVisualizer({ ranges }: Props) {
                   size="1"
                   wrap="nowrap"
                 >
-                  {Math.round(range.factor * 100)}%
+                  {literals(strings.common.units.hp, [
+                    `${Math.round(stats.damageWithoutAssault * range.factor)}`,
+                  ])}
                 </Text>
               ))}
             </Box>
 
             <Flex flexGrow="1" align="end" position="relative">
-              {ranges.ranges.map((range, index) => {
+              {ranges.map((range, index) => {
                 const mix = clamp(1.5 * (range.factor - 1) + 1, 0, 1) * 100;
                 const color0 = `color-mix(in hsl, ${Var('tomato-9')}, ${Var('jade-9')} ${mix}%)`;
                 const color1 = `color-mix(in hsl, ${Var('tomato-7')}, ${Var('jade-7')} ${mix}%)`;
 
                 return (
                   <Box
+                    width={`${(range.fakeDistance / sumFakeDistances) * 100}%`}
+                    height={`${range.factor * 100}%`}
                     style={{
-                      height: `${range.factor * 100}%`,
                       background: `linear-gradient(45deg, ${color1}, ${color0})`,
                     }}
-                    flexGrow={`${range.distance}`}
                     key={index}
                   />
                 );
               })}
 
-              {ranges.ranges.map((range, index) => (
+              {ranges.map((range, index) => (
                 <Box
                   key={index}
                   position="absolute"
@@ -84,13 +104,13 @@ export function AssaultRangesVisualizer({ ranges }: Props) {
             </Flex>
           </Flex>
 
-          <Flex ml="7" height={Var('space-7')}>
-            {ranges.ranges.map((range, index) => (
+          <Flex ml="8" height={Var('space-7')}>
+            {ranges.map((range, index) => (
               <Box
                 position="relative"
                 key={index}
+                width={`${(range.fakeDistance / sumFakeDistances) * 100}%`}
                 height="100%"
-                flexGrow={`${range.distance}`}
               >
                 <Text
                   size="1"
@@ -103,7 +123,9 @@ export function AssaultRangesVisualizer({ ranges }: Props) {
                     writingMode: 'vertical-rl',
                   }}
                 >
-                  {range.distance}m
+                  {literals(strings.common.units.m, [
+                    `${Math.round(range.distance)}`,
+                  ])}
                 </Text>
               </Box>
             ))}

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

@@ -122,6 +122,7 @@ export function Firepower({ stats }: StatsAcceptorProps) {
 
       {gun.gun_type!.value.base.assault_ranges && (
         <AssaultRangesVisualizer
+          stats={stats}
           ranges={gun.gun_type!.value.base.assault_ranges}
         />
       )}

packages/website/src/core/blitzkit/tankCharacteristics.ts

@@ -336,7 +336,9 @@ export function tankCharacteristics(
     stockTurret.weight +
     stockGun.gun_type!.value.base.weight;
   const resolvedEnginePower = engine.power * enginePowerCoefficient;
-  const damageCoefficient = armorDamageCoefficient * assaultDamageCoefficient;
+  const damageCoefficientWithoutAssault = armorDamageCoefficient;
+  const damageCoefficient =
+    damageCoefficientWithoutAssault * assaultDamageCoefficient;
   const dpm = resolveDpm(
     gun,
     shell,
@@ -363,6 +365,8 @@ export function tankCharacteristics(
           return current;
         }, null)!.index
       : undefined;
+  const damageWithoutAssault =
+    shell.armor_damage * damageCoefficientWithoutAssault;
   const damage = shell.armor_damage * damageCoefficient;
   const dpmEffective =
     gun.gun_type!.$case === 'auto_reloader'
@@ -544,6 +548,7 @@ export function tankCharacteristics(
     caliber,
     penetration,
     damage,
+    damageWithoutAssault,
     clipDamage,
     moduleDamage,
     explosionRadius,