From 8d2ec5f5b4fdcc1947da840479eb1de96a542cda Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Fri, 28 Jun 2024 20:32:19 -0500
Subject: [PATCH] feat: antagonist penetration preview

---
 .../components/Model/components/Options.tsx    | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/app/tools/tankopedia/[id]/components/Model/components/Options.tsx b/src/app/tools/tankopedia/[id]/components/Model/components/Options.tsx
index fe3606d10..210ad08e8 100644
--- a/src/app/tools/tankopedia/[id]/components/Model/components/Options.tsx
+++ b/src/app/tools/tankopedia/[id]/components/Model/components/Options.tsx
@@ -22,6 +22,7 @@ import { useState } from 'react';
 import { ModuleButton } from '../../../../../../../components/ModuleButtons/ModuleButton';
 import { SmallTankIcon } from '../../../../../../../components/SmallTankIcon';
 import { resolveNearPenetration } from '../../../../../../../core/blitz/resolveNearPenetration';
+import { resolvePenetrationCoefficient } from '../../../../../../../core/blitz/resolvePenetrationCoefficient';
 import { asset } from '../../../../../../../core/blitzkit/asset';
 import { Pose, poseEvent } from '../../../../../../../core/blitzkit/pose';
 import {
@@ -113,7 +114,23 @@ export function Options() {
             top: '50%',
             transform: 'translateY(-50%)',
           }}
+          align="end"
         >
+          <Text
+            color="gray"
+            size={{
+              initial: '1',
+              sm: '2',
+            }}
+          >
+            {(
+              resolvePenetrationCoefficient(
+                hasCalibratedShells,
+                antagonistShell.type,
+              ) * resolveNearPenetration(antagonistShell.penetration)
+            ).toFixed(0)}
+            mm
+          </Text>
           <Flex direction="column">
             {antagonistGun.shells.map((thisShell, shellIndex) => (
               <IconButton
@@ -157,7 +174,6 @@ export function Options() {
               </IconButton>
             ))}
           </Flex>
-
           <Flex direction="column" style={{ pointerEvents: 'auto' }}>
             <IconButton
               color={hasCalibratedShells ? undefined : 'gray'}