feat: popover custom shell

packages/website/src/components/Tankopedia/HeroSection/components/Options/components/CustomShellButton.tsx

@@ -1,16 +1,15 @@
 import { imgur, ShellType } from '@blitzkit/core';
 import {
   Button,
-  Dialog,
   Flex,
   IconButton,
+  Popover,
   Select,
   Slider,
   Text,
   TextField,
 } from '@radix-ui/themes';
-import { invalidate } from '@react-three/fiber';
+import { type ChangeEvent } from 'react';
-import { useEffect, useState, type ChangeEvent } from 'react';
 import { Duel } from '../../../../../../stores/duel';
 import { TankopediaEphemeral } from '../../../../../../stores/tankopediaEphemeral';
 
@@ -18,17 +17,18 @@ export function CustomShellButton() {
   const customShell = TankopediaEphemeral.use((state) => state.customShell);
   const antagonistShell = Duel.use((state) => state.antagonist.shell);
   const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
-  const [customShellDraft, setCustomShellDraft] = useState(
-    customShell ?? antagonistShell,
-  );
-
-  useEffect(() => {
-    setCustomShellDraft(customShell ?? antagonistShell);
-  }, [antagonistShell, customShell]);
 
   return (
-    <Dialog.Root>
+    <Popover.Root
-      <Dialog.Trigger>
+      onOpenChange={(open) => {
+        if (!open) return;
+
+        mutateTankopediaEphemeral((draft) => {
+          draft.customShell = antagonistShell;
+        });
+      }}
+    >
+      <Popover.Trigger>
         <IconButton
           color={customShell ? undefined : 'gray'}
           variant="soft"
@@ -44,19 +44,21 @@ export function CustomShellButton() {
             }}
           />
         </IconButton>
-      </Dialog.Trigger>
+      </Popover.Trigger>
 
-      <Dialog.Content>
+      <Popover.Content>
-        <Dialog.Title>Custom shell</Dialog.Title>
+        {/* <Popover.Title>Custom shell</Popover.Title> */}
 
+        {customShell && (
+          <>
             <Flex direction="column" gap="2">
-          <Flex align="center" justify="between">
+              <Flex align="center" justify="between" gap="4">
                 <Text>Type</Text>
                 <Select.Root
-              value={`${customShellDraft.type}`}
+                  value={`${customShell.type}`}
                   onValueChange={(value) => {
                     const type = Number(value) as ShellType;
-                const modified = { ...customShellDraft, type };
+                    const modified = { ...customShell, type };
 
                     switch (type) {
                       case ShellType.AP: {
@@ -77,7 +79,9 @@ export function CustomShellButton() {
                       }
                     }
 
-                setCustomShellDraft(modified);
+                    mutateTankopediaEphemeral((draft) => {
+                      draft.customShell = modified;
+                    });
                   }}
                 >
                   <Select.Trigger />
@@ -91,16 +95,15 @@ export function CustomShellButton() {
                 </Select.Root>
               </Flex>
 
-          <Flex align="center" justify="between">
+              <Flex align="center" justify="between" gap="4">
                 <Text>Caliber</Text>
                 <TextField.Root
                   style={{ maxWidth: '6rem' }}
-              defaultValue={customShellDraft.caliber}
+                  defaultValue={customShell.caliber}
                   type="number"
-              onBlur={(event: ChangeEvent<HTMLInputElement>) => {
+                  onChange={(event) => {
-                setCustomShellDraft({
+                    mutateTankopediaEphemeral((draft) => {
-                  ...customShellDraft,
+                      draft.customShell!.caliber = event.target.valueAsNumber;
-                  caliber: event.target.valueAsNumber,
                     });
                   }}
                   onFocus={(event) => event.target.select()}
@@ -109,7 +112,7 @@ export function CustomShellButton() {
                       (event.target as HTMLInputElement).blur();
                     } else if (event.key === 'Escape') {
                       (event.target as HTMLInputElement).valueAsNumber =
-                    customShellDraft.caliber;
+                        customShell.caliber;
                       (event.target as HTMLInputElement).blur();
                     }
                   }}
@@ -118,19 +121,16 @@ export function CustomShellButton() {
                 </TextField.Root>
               </Flex>
 
-          <Flex align="center" justify="between">
+              <Flex align="center" justify="between" gap="4">
                 <Text>Penetration</Text>
                 <TextField.Root
                   style={{ maxWidth: '6rem' }}
-              defaultValue={customShellDraft.penetration.near}
+                  defaultValue={customShell.penetration.near}
                   type="number"
-              onBlur={(event: ChangeEvent<HTMLInputElement>) => {
+                  onChange={(event: ChangeEvent<HTMLInputElement>) => {
-                setCustomShellDraft({
+                    mutateTankopediaEphemeral((draft) => {
-                  ...customShellDraft,
+                      draft.customShell!.penetration.near =
-                  penetration: {
+                        event.target.valueAsNumber;
-                    near: event.target.valueAsNumber,
-                    far: event.target.valueAsNumber,
-                  },
                     });
                   }}
                   onFocus={(event) => event.target.select()}
@@ -139,7 +139,7 @@ export function CustomShellButton() {
                       (event.target as HTMLInputElement).blur();
                     } else if (event.key === 'Escape') {
                       (event.target as HTMLInputElement).valueAsNumber =
-                    customShellDraft.penetration.near;
+                        customShell.penetration.near;
                       (event.target as HTMLInputElement).blur();
                     }
                   }}
@@ -148,26 +148,25 @@ export function CustomShellButton() {
                 </TextField.Root>
               </Flex>
 
-          {(customShellDraft.type === ShellType.AP ||
+              {(customShell.type === ShellType.AP ||
-            customShellDraft.type === ShellType.APCR) && (
+                customShell.type === ShellType.APCR) && (
                 <>
                   <Flex align="center" justify="between" gap="4" py="1">
                     <Text>Normalization</Text>
 
                     <Flex align="center" gap="2" flexGrow="1" maxWidth="15rem">
                       <Text color="gray">
-                    {customShellDraft.normalization ?? 0}°
+                        {customShell.normalization ?? 0}°
                       </Text>
                       <Slider
                         min={0}
                         max={90}
-                    value={[customShellDraft.normalization ?? 0]}
+                        value={[customShell.normalization ?? 0]}
-                    onValueChange={([value]) =>
+                        onValueChange={([value]) => {
-                      setCustomShellDraft({
+                          mutateTankopediaEphemeral((draft) => {
-                        ...customShellDraft,
+                            draft.customShell!.normalization = value;
-                        normalization: value,
+                          });
-                      })
+                        }}
-                    }
                       />
                     </Flex>
                   </Flex>
@@ -176,17 +175,16 @@ export function CustomShellButton() {
                     <Text>Ricochet</Text>
 
                     <Flex align="center" gap="2" flexGrow="1" maxWidth="15rem">
-                  <Text color="gray">{customShellDraft.ricochet ?? 90}°</Text>
+                      <Text color="gray">{customShell.ricochet ?? 90}°</Text>
                       <Slider
                         min={0}
                         max={90}
-                    value={[customShellDraft.ricochet ?? 90]}
+                        value={[customShell.ricochet ?? 90]}
-                    onValueChange={([value]) =>
+                        onValueChange={([value]) => {
-                      setCustomShellDraft({
+                          mutateTankopediaEphemeral((draft) => {
-                        ...customShellDraft,
+                            draft.customShell!.ricochet = value;
-                        ricochet: value,
+                          });
-                      })
+                        }}
-                    }
                       />
                     </Flex>
                   </Flex>
@@ -195,34 +193,25 @@ export function CustomShellButton() {
             </Flex>
 
             <Flex justify="end" mt="6" gap="2">
-          <Dialog.Close>
+              <Popover.Close>
                 <Button color="red" variant="outline">
-              Cancel
+                  Exit
                 </Button>
-          </Dialog.Close>
+              </Popover.Close>
               <Button
                 color="red"
                 onClick={() => {
-              setCustomShellDraft(antagonistShell);
+                  mutateTankopediaEphemeral((draft) => {
+                    draft.customShell = antagonistShell;
+                  });
                 }}
               >
                 Reset
               </Button>
-          <Dialog.Close>
-            <Button
-              onClick={() => {
-                invalidate();
-                mutateTankopediaEphemeral((draft) => {
-                  draft.shot = undefined;
-                  draft.customShell = customShellDraft;
-                });
-              }}
-            >
-              Apply
-            </Button>
-          </Dialog.Close>
             </Flex>
-      </Dialog.Content>
+          </>
-    </Dialog.Root>
+        )}
+      </Popover.Content>
+    </Popover.Root>
   );
 }

packages/website/src/components/Tankopedia/HeroSection/components/Options/index.tsx

@@ -53,7 +53,9 @@ interface OptionsProps {
 }
 
 export function Options({ thicknessRange, canvas }: OptionsProps) {
-  const customShell = TankopediaEphemeral.use((state) => state.customShell);
+  const hasCustomShell = TankopediaEphemeral.use(
+    (state) => state.customShell !== undefined,
+  );
   const display = TankopediaPersistent.useDeferred(
     (state) => state.display,
     TankopediaDisplay.Model,
@@ -101,6 +103,7 @@ export function Options({ thicknessRange, canvas }: OptionsProps) {
           style={{ position: 'absolute', transform: 'translateY(-50%)' }}
           align="end"
         >
+          {!hasCustomShell && (
             <Text color="gray" size={{ initial: '1', sm: '2' }}>
               {(
                 resolvePenetrationCoefficient(
@@ -110,6 +113,7 @@ export function Options({ thicknessRange, canvas }: OptionsProps) {
               ).toFixed(0)}
               mm
             </Text>
+          )}
           {antagonistUniqueGuns.length > 1 && (
             <Popover.Root>
               <Popover.Trigger>
@@ -189,7 +193,7 @@ export function Options({ thicknessRange, canvas }: OptionsProps) {
             {antagonistGun.gun_type!.value.base.shells.map((thisShell) => (
               <IconButton
                 color={
-                  thisShell.id === antagonistShell.id && !customShell
+                  thisShell.id === antagonistShell.id && !hasCustomShell
                     ? undefined
                     : 'gray'
                 }