mirror of
https://github.com/blitzkit/blitzkit.git
synced 2026-10-21 18:57:03 +02:00
feat: popover custom shell
This commit is contained in:
tresabhi committed
1 parent
dbc3d0df3a
commit
3e2bfc453a
2 files changed
+187
-194
No files matched your search
+172
-183
@@ -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 { useEffect, useState, type ChangeEvent } from 'react';
|
||||
import { 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>
|
||||
<Dialog.Trigger>
|
||||
<Popover.Root
|
||||
onOpenChange={(open) => {
|
||||
if (!open) return;
|
||||
|
||||
mutateTankopediaEphemeral((draft) => {
|
||||
draft.customShell = antagonistShell;
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Popover.Trigger>
|
||||
<IconButton
|
||||
color={customShell ? undefined : 'gray'}
|
||||
variant="soft"
|
||||
@@ -44,185 +44,174 @@ export function CustomShellButton() {
|
||||
}}
|
||||
/>
|
||||
</IconButton>
|
||||
</Dialog.Trigger>
|
||||
</Popover.Trigger>
|
||||
|
||||
<Dialog.Content>
|
||||
<Dialog.Title>Custom shell</Dialog.Title>
|
||||
<Popover.Content>
|
||||
{/* <Popover.Title>Custom shell</Popover.Title> */}
|
||||
|
||||
<Flex direction="column" gap="2">
|
||||
<Flex align="center" justify="between">
|
||||
<Text>Type</Text>
|
||||
<Select.Root
|
||||
value={`${customShellDraft.type}`}
|
||||
onValueChange={(value) => {
|
||||
const type = Number(value) as ShellType;
|
||||
const modified = { ...customShellDraft, type };
|
||||
{customShell && (
|
||||
<>
|
||||
<Flex direction="column" gap="2">
|
||||
<Flex align="center" justify="between" gap="4">
|
||||
<Text>Type</Text>
|
||||
<Select.Root
|
||||
value={`${customShell.type}`}
|
||||
onValueChange={(value) => {
|
||||
const type = Number(value) as ShellType;
|
||||
const modified = { ...customShell, type };
|
||||
|
||||
switch (type) {
|
||||
case ShellType.AP: {
|
||||
modified.normalization = 5;
|
||||
modified.ricochet = 70;
|
||||
break;
|
||||
}
|
||||
case ShellType.APCR: {
|
||||
modified.normalization = 2;
|
||||
modified.ricochet = 70;
|
||||
break;
|
||||
}
|
||||
case ShellType.HEAT:
|
||||
case ShellType.HE: {
|
||||
modified.normalization = undefined;
|
||||
modified.ricochet = undefined;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
setCustomShellDraft(modified);
|
||||
}}
|
||||
>
|
||||
<Select.Trigger />
|
||||
|
||||
<Select.Content>
|
||||
<Select.Item value={`${ShellType.AP}`}>AP</Select.Item>
|
||||
<Select.Item value={`${ShellType.APCR}`}>APCR</Select.Item>
|
||||
<Select.Item value={`${ShellType.HEAT}`}>HEAT</Select.Item>
|
||||
<Select.Item value={`${ShellType.HE}`}>HE</Select.Item>
|
||||
</Select.Content>
|
||||
</Select.Root>
|
||||
</Flex>
|
||||
|
||||
<Flex align="center" justify="between">
|
||||
<Text>Caliber</Text>
|
||||
<TextField.Root
|
||||
style={{ maxWidth: '6rem' }}
|
||||
defaultValue={customShellDraft.caliber}
|
||||
type="number"
|
||||
onBlur={(event: ChangeEvent<HTMLInputElement>) => {
|
||||
setCustomShellDraft({
|
||||
...customShellDraft,
|
||||
caliber: event.target.valueAsNumber,
|
||||
});
|
||||
}}
|
||||
onFocus={(event) => event.target.select()}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key === 'Enter') {
|
||||
(event.target as HTMLInputElement).blur();
|
||||
} else if (event.key === 'Escape') {
|
||||
(event.target as HTMLInputElement).valueAsNumber =
|
||||
customShellDraft.caliber;
|
||||
(event.target as HTMLInputElement).blur();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<TextField.Slot side="right">mm</TextField.Slot>
|
||||
</TextField.Root>
|
||||
</Flex>
|
||||
|
||||
<Flex align="center" justify="between">
|
||||
<Text>Penetration</Text>
|
||||
<TextField.Root
|
||||
style={{ maxWidth: '6rem' }}
|
||||
defaultValue={customShellDraft.penetration.near}
|
||||
type="number"
|
||||
onBlur={(event: ChangeEvent<HTMLInputElement>) => {
|
||||
setCustomShellDraft({
|
||||
...customShellDraft,
|
||||
penetration: {
|
||||
near: event.target.valueAsNumber,
|
||||
far: event.target.valueAsNumber,
|
||||
},
|
||||
});
|
||||
}}
|
||||
onFocus={(event) => event.target.select()}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key === 'Enter') {
|
||||
(event.target as HTMLInputElement).blur();
|
||||
} else if (event.key === 'Escape') {
|
||||
(event.target as HTMLInputElement).valueAsNumber =
|
||||
customShellDraft.penetration.near;
|
||||
(event.target as HTMLInputElement).blur();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<TextField.Slot side="right">mm</TextField.Slot>
|
||||
</TextField.Root>
|
||||
</Flex>
|
||||
|
||||
{(customShellDraft.type === ShellType.AP ||
|
||||
customShellDraft.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}°
|
||||
</Text>
|
||||
<Slider
|
||||
min={0}
|
||||
max={90}
|
||||
value={[customShellDraft.normalization ?? 0]}
|
||||
onValueChange={([value]) =>
|
||||
setCustomShellDraft({
|
||||
...customShellDraft,
|
||||
normalization: value,
|
||||
})
|
||||
switch (type) {
|
||||
case ShellType.AP: {
|
||||
modified.normalization = 5;
|
||||
modified.ricochet = 70;
|
||||
break;
|
||||
}
|
||||
case ShellType.APCR: {
|
||||
modified.normalization = 2;
|
||||
modified.ricochet = 70;
|
||||
break;
|
||||
}
|
||||
case ShellType.HEAT:
|
||||
case ShellType.HE: {
|
||||
modified.normalization = undefined;
|
||||
modified.ricochet = undefined;
|
||||
break;
|
||||
}
|
||||
}
|
||||
/>
|
||||
</Flex>
|
||||
|
||||
mutateTankopediaEphemeral((draft) => {
|
||||
draft.customShell = modified;
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Select.Trigger />
|
||||
|
||||
<Select.Content>
|
||||
<Select.Item value={`${ShellType.AP}`}>AP</Select.Item>
|
||||
<Select.Item value={`${ShellType.APCR}`}>APCR</Select.Item>
|
||||
<Select.Item value={`${ShellType.HEAT}`}>HEAT</Select.Item>
|
||||
<Select.Item value={`${ShellType.HE}`}>HE</Select.Item>
|
||||
</Select.Content>
|
||||
</Select.Root>
|
||||
</Flex>
|
||||
|
||||
<Flex align="center" justify="between" gap="4" py="1">
|
||||
<Text>Ricochet</Text>
|
||||
|
||||
<Flex align="center" gap="2" flexGrow="1" maxWidth="15rem">
|
||||
<Text color="gray">{customShellDraft.ricochet ?? 90}°</Text>
|
||||
<Slider
|
||||
min={0}
|
||||
max={90}
|
||||
value={[customShellDraft.ricochet ?? 90]}
|
||||
onValueChange={([value]) =>
|
||||
setCustomShellDraft({
|
||||
...customShellDraft,
|
||||
ricochet: value,
|
||||
})
|
||||
<Flex align="center" justify="between" gap="4">
|
||||
<Text>Caliber</Text>
|
||||
<TextField.Root
|
||||
style={{ maxWidth: '6rem' }}
|
||||
defaultValue={customShell.caliber}
|
||||
type="number"
|
||||
onChange={(event) => {
|
||||
mutateTankopediaEphemeral((draft) => {
|
||||
draft.customShell!.caliber = event.target.valueAsNumber;
|
||||
});
|
||||
}}
|
||||
onFocus={(event) => event.target.select()}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key === 'Enter') {
|
||||
(event.target as HTMLInputElement).blur();
|
||||
} else if (event.key === 'Escape') {
|
||||
(event.target as HTMLInputElement).valueAsNumber =
|
||||
customShell.caliber;
|
||||
(event.target as HTMLInputElement).blur();
|
||||
}
|
||||
/>
|
||||
</Flex>
|
||||
}}
|
||||
>
|
||||
<TextField.Slot side="right">mm</TextField.Slot>
|
||||
</TextField.Root>
|
||||
</Flex>
|
||||
</>
|
||||
)}
|
||||
</Flex>
|
||||
|
||||
<Flex justify="end" mt="6" gap="2">
|
||||
<Dialog.Close>
|
||||
<Button color="red" variant="outline">
|
||||
Cancel
|
||||
</Button>
|
||||
</Dialog.Close>
|
||||
<Button
|
||||
color="red"
|
||||
onClick={() => {
|
||||
setCustomShellDraft(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>
|
||||
<Flex align="center" justify="between" gap="4">
|
||||
<Text>Penetration</Text>
|
||||
<TextField.Root
|
||||
style={{ maxWidth: '6rem' }}
|
||||
defaultValue={customShell.penetration.near}
|
||||
type="number"
|
||||
onChange={(event: ChangeEvent<HTMLInputElement>) => {
|
||||
mutateTankopediaEphemeral((draft) => {
|
||||
draft.customShell!.penetration.near =
|
||||
event.target.valueAsNumber;
|
||||
});
|
||||
}}
|
||||
onFocus={(event) => event.target.select()}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key === 'Enter') {
|
||||
(event.target as HTMLInputElement).blur();
|
||||
} else if (event.key === 'Escape') {
|
||||
(event.target as HTMLInputElement).valueAsNumber =
|
||||
customShell.penetration.near;
|
||||
(event.target as HTMLInputElement).blur();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<TextField.Slot side="right">mm</TextField.Slot>
|
||||
</TextField.Root>
|
||||
</Flex>
|
||||
|
||||
{(customShell.type === ShellType.AP ||
|
||||
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">
|
||||
{customShell.normalization ?? 0}°
|
||||
</Text>
|
||||
<Slider
|
||||
min={0}
|
||||
max={90}
|
||||
value={[customShell.normalization ?? 0]}
|
||||
onValueChange={([value]) => {
|
||||
mutateTankopediaEphemeral((draft) => {
|
||||
draft.customShell!.normalization = value;
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</Flex>
|
||||
</Flex>
|
||||
|
||||
<Flex align="center" justify="between" gap="4" py="1">
|
||||
<Text>Ricochet</Text>
|
||||
|
||||
<Flex align="center" gap="2" flexGrow="1" maxWidth="15rem">
|
||||
<Text color="gray">{customShell.ricochet ?? 90}°</Text>
|
||||
<Slider
|
||||
min={0}
|
||||
max={90}
|
||||
value={[customShell.ricochet ?? 90]}
|
||||
onValueChange={([value]) => {
|
||||
mutateTankopediaEphemeral((draft) => {
|
||||
draft.customShell!.ricochet = value;
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</>
|
||||
)}
|
||||
</Flex>
|
||||
|
||||
<Flex justify="end" mt="6" gap="2">
|
||||
<Popover.Close>
|
||||
<Button color="red" variant="outline">
|
||||
Exit
|
||||
</Button>
|
||||
</Popover.Close>
|
||||
<Button
|
||||
color="red"
|
||||
onClick={() => {
|
||||
mutateTankopediaEphemeral((draft) => {
|
||||
draft.customShell = antagonistShell;
|
||||
});
|
||||
}}
|
||||
>
|
||||
Reset
|
||||
</Button>
|
||||
</Flex>
|
||||
</>
|
||||
)}
|
||||
</Popover.Content>
|
||||
</Popover.Root>
|
||||
);
|
||||
}
|
||||
+15
-11
@@ -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,15 +103,17 @@ export function Options({ thicknessRange, canvas }: OptionsProps) {
|
||||
style={{ position: 'absolute', transform: 'translateY(-50%)' }}
|
||||
align="end"
|
||||
>
|
||||
<Text color="gray" size={{ initial: '1', sm: '2' }}>
|
||||
{(
|
||||
resolvePenetrationCoefficient(
|
||||
hasCalibratedShells,
|
||||
antagonistShell.type,
|
||||
) * antagonistShell.penetration.near
|
||||
).toFixed(0)}
|
||||
mm
|
||||
</Text>
|
||||
{!hasCustomShell && (
|
||||
<Text color="gray" size={{ initial: '1', sm: '2' }}>
|
||||
{(
|
||||
resolvePenetrationCoefficient(
|
||||
hasCalibratedShells,
|
||||
antagonistShell.type,
|
||||
) * antagonistShell.penetration.near
|
||||
).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'
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user