From 0e6b79dcbee532aad365ec8b42f33b722bb6326a Mon Sep 17 00:00:00 2001
From: tresabhi <43380238+tresabhi@users.noreply.github.com>
Date: Sat, 9 Nov 2024 19:49:13 -0600
Subject: [PATCH] feat: start of custom shell

---
 .../HeroSection/components/Options/index.tsx  | 31 ++++++++++++++++---
 1 file changed, 27 insertions(+), 4 deletions(-)

diff --git a/packages/website/src/components/Tankopedia/HeroSection/components/Options/index.tsx b/packages/website/src/components/Tankopedia/HeroSection/components/Options/index.tsx
index 9d27a26c4..4aa7749c9 100644
--- a/packages/website/src/components/Tankopedia/HeroSection/components/Options/index.tsx
+++ b/packages/website/src/components/Tankopedia/HeroSection/components/Options/index.tsx
@@ -194,9 +194,6 @@ export function Options({ thicknessRange, canvas }: OptionsProps) {
                   key={thisShell.id}
                   size={{ initial: '2', sm: '3' }}
                   radius="none"
-                  style={{
-                    marginTop: shellIndex === 0 ? 0 : -1,
-                  }}
                   onClick={() => {
                     invalidate();
                     mutateDuel((draft) => {
@@ -218,6 +215,33 @@ export function Options({ thicknessRange, canvas }: OptionsProps) {
                 </IconButton>
               ),
             )}
+
+            <IconButton
+              // color={
+              //   thisShell.id === antagonistShell.id ? undefined : 'gray'
+              // }
+              variant="soft"
+              size={{ initial: '2', sm: '3' }}
+              radius="none"
+              onClick={() => {
+                invalidate();
+                // mutateDuel((draft) => {
+                //   draft.antagonist.shell = thisShell;
+                // });
+                mutateTankopediaEphemeral((draft) => {
+                  draft.shot = undefined;
+                });
+              }}
+            >
+              <img
+                alt="custom shell"
+                src={imgur('j2CoXak')}
+                style={{
+                  width: '50%',
+                  height: '50%',
+                }}
+              />
+            </IconButton>
           </Flex>
 
           <Flex
@@ -258,7 +282,6 @@ export function Options({ thicknessRange, canvas }: OptionsProps) {
               color={hasEnhancedArmor ? undefined : 'gray'}
               variant="soft"
               size={{ initial: '2', sm: '3' }}
-              style={{ marginTop: -1 }}
               radius="none"
               onClick={() => {
                 invalidate();