mirror of
https://github.com/blitzkit/blitzkit.git
synced 2026-10-24 03:59:50 +02:00
feat: shells
This commit is contained in:
TrèsAbhi committed
1 parent
a8bb6d0bb8
commit
7bd84fdaec
1 file changed
+197
-151
@@ -5,9 +5,11 @@ import {
|
|||||||
GearIcon,
|
GearIcon,
|
||||||
} from '@radix-ui/react-icons';
|
} from '@radix-ui/react-icons';
|
||||||
import { DropdownMenu, Flex, IconButton, Switch } from '@radix-ui/themes';
|
import { DropdownMenu, Flex, IconButton, Switch } from '@radix-ui/themes';
|
||||||
|
import { asset } from '../../../../../../../core/blitzkit/asset';
|
||||||
import { Pose, poseEvent } from '../../../../../../../core/blitzkit/pose';
|
import { Pose, poseEvent } from '../../../../../../../core/blitzkit/pose';
|
||||||
import { useFullScreen } from '../../../../../../../hooks/useFullScreen';
|
import { useFullScreen } from '../../../../../../../hooks/useFullScreen';
|
||||||
import { useApp } from '../../../../../../../stores/app';
|
import { useApp } from '../../../../../../../stores/app';
|
||||||
|
import { mutateDuel, useDuel } from '../../../../../../../stores/duel';
|
||||||
import mutateTankopediaPersistent, {
|
import mutateTankopediaPersistent, {
|
||||||
mutateTankopediaTemporary,
|
mutateTankopediaTemporary,
|
||||||
useTankopediaPersistent,
|
useTankopediaPersistent,
|
||||||
@@ -39,183 +41,227 @@ export function Options() {
|
|||||||
(state) => state.model.visual.environment,
|
(state) => state.model.visual.environment,
|
||||||
);
|
);
|
||||||
const developerMode = useApp((state) => state.developerMode);
|
const developerMode = useApp((state) => state.developerMode);
|
||||||
|
const gun = useDuel((state) => state.antagonist!.gun);
|
||||||
|
const shell = useDuel((state) => state.antagonist!.shell);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Flex
|
<>
|
||||||
gap="4"
|
{mode === 'armor' && (
|
||||||
align="center"
|
<Flex
|
||||||
style={{
|
style={{
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
bottom: 16,
|
right: 16,
|
||||||
left: '50%',
|
top: '50%',
|
||||||
transform: 'translateX(-50%)',
|
transform: 'translateY(-50%)',
|
||||||
}}
|
}}
|
||||||
>
|
direction="column"
|
||||||
|
>
|
||||||
|
{gun.shells.map((thisShell, shellIndex) => (
|
||||||
|
<IconButton
|
||||||
|
color={thisShell.id === shell.id ? undefined : 'gray'}
|
||||||
|
variant="soft"
|
||||||
|
key={thisShell.id}
|
||||||
|
style={{
|
||||||
|
borderTopLeftRadius: shellIndex === 0 ? undefined : 0,
|
||||||
|
borderTopRightRadius: shellIndex === 0 ? undefined : 0,
|
||||||
|
borderBottomRightRadius:
|
||||||
|
shellIndex === gun.shells.length - 1 ? undefined : 0,
|
||||||
|
borderBottomLeftRadius:
|
||||||
|
shellIndex === gun.shells.length - 1 ? undefined : 0,
|
||||||
|
marginLeft: shellIndex === 0 ? 0 : -1,
|
||||||
|
}}
|
||||||
|
onClick={() => {
|
||||||
|
mutateDuel((draft) => {
|
||||||
|
draft.antagonist!.shell = thisShell;
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
width={16}
|
||||||
|
height={16}
|
||||||
|
src={asset(`icons/shells/${thisShell.icon}.webp`)}
|
||||||
|
/>
|
||||||
|
</IconButton>
|
||||||
|
))}
|
||||||
|
</Flex>
|
||||||
|
)}
|
||||||
|
|
||||||
<Flex
|
<Flex
|
||||||
style={{
|
gap="4"
|
||||||
cursor: 'default',
|
|
||||||
userSelect: 'none',
|
|
||||||
}}
|
|
||||||
align="center"
|
align="center"
|
||||||
gap="2"
|
style={{
|
||||||
onClick={() => {
|
position: 'absolute',
|
||||||
mutateTankopediaPersistent((draft) => {
|
bottom: 16,
|
||||||
draft.mode = draft.mode === 'armor' ? 'model' : 'armor';
|
left: '50%',
|
||||||
});
|
transform: 'translateX(-50%)',
|
||||||
}}
|
}}
|
||||||
mr="2"
|
|
||||||
>
|
>
|
||||||
<Switch size="1" checked={mode === 'armor'} />
|
<Flex
|
||||||
Armor
|
style={{
|
||||||
</Flex>
|
cursor: 'default',
|
||||||
|
userSelect: 'none',
|
||||||
|
}}
|
||||||
|
align="center"
|
||||||
|
gap="2"
|
||||||
|
onClick={() => {
|
||||||
|
mutateTankopediaPersistent((draft) => {
|
||||||
|
draft.mode = draft.mode === 'armor' ? 'model' : 'armor';
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
mr="2"
|
||||||
|
>
|
||||||
|
<Switch size="1" checked={mode === 'armor'} />
|
||||||
|
Armor
|
||||||
|
</Flex>
|
||||||
|
|
||||||
<DropdownMenu.Root>
|
<DropdownMenu.Root>
|
||||||
<DropdownMenu.Trigger>
|
<DropdownMenu.Trigger>
|
||||||
<IconButton variant="ghost" color="gray">
|
<IconButton variant="ghost" color="gray">
|
||||||
<EyeOpenIcon />
|
<EyeOpenIcon />
|
||||||
</IconButton>
|
</IconButton>
|
||||||
</DropdownMenu.Trigger>
|
</DropdownMenu.Trigger>
|
||||||
|
|
||||||
<DropdownMenu.Content>
|
<DropdownMenu.Content>
|
||||||
<DropdownMenu.Item onClick={() => poseEvent.emit(Pose.HullDown)}>
|
<DropdownMenu.Item onClick={() => poseEvent.emit(Pose.HullDown)}>
|
||||||
Hull down
|
Hull down
|
||||||
</DropdownMenu.Item>
|
</DropdownMenu.Item>
|
||||||
|
|
||||||
<DropdownMenu.Item onClick={() => poseEvent.emit(Pose.FaceHug)}>
|
<DropdownMenu.Item onClick={() => poseEvent.emit(Pose.FaceHug)}>
|
||||||
Face hug
|
Face hug
|
||||||
</DropdownMenu.Item>
|
</DropdownMenu.Item>
|
||||||
|
|
||||||
<DropdownMenu.Item onClick={() => poseEvent.emit(Pose.Default)}>
|
<DropdownMenu.Item onClick={() => poseEvent.emit(Pose.Default)}>
|
||||||
Default
|
Default
|
||||||
</DropdownMenu.Item>
|
</DropdownMenu.Item>
|
||||||
</DropdownMenu.Content>
|
</DropdownMenu.Content>
|
||||||
</DropdownMenu.Root>
|
</DropdownMenu.Root>
|
||||||
|
|
||||||
<DropdownMenu.Root>
|
<DropdownMenu.Root>
|
||||||
<DropdownMenu.Trigger>
|
<DropdownMenu.Trigger>
|
||||||
<IconButton variant="ghost" color="gray">
|
<IconButton variant="ghost" color="gray">
|
||||||
<GearIcon />
|
<GearIcon />
|
||||||
</IconButton>
|
</IconButton>
|
||||||
</DropdownMenu.Trigger>
|
</DropdownMenu.Trigger>
|
||||||
|
|
||||||
<DropdownMenu.Content>
|
<DropdownMenu.Content>
|
||||||
{mode === 'armor' && (
|
{mode === 'armor' && (
|
||||||
<>
|
<>
|
||||||
<DropdownMenu.Label>Armor</DropdownMenu.Label>
|
<DropdownMenu.Label>Armor</DropdownMenu.Label>
|
||||||
|
|
||||||
<DropdownMenu.CheckboxItem
|
|
||||||
checked={showSpacedArmor}
|
|
||||||
onCheckedChange={(checked) => {
|
|
||||||
mutateTankopediaPersistent((draft) => {
|
|
||||||
draft.model.visual.showSpacedArmor = checked;
|
|
||||||
});
|
|
||||||
mutateTankopediaTemporary((draft) => {
|
|
||||||
draft.shot = undefined;
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Spaced armor
|
|
||||||
</DropdownMenu.CheckboxItem>
|
|
||||||
|
|
||||||
<DropdownMenu.CheckboxItem
|
|
||||||
checked={greenPenetration}
|
|
||||||
onCheckedChange={(checked) => {
|
|
||||||
mutateTankopediaPersistent((draft) => {
|
|
||||||
draft.model.visual.greenPenetration = checked;
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Green penetration
|
|
||||||
</DropdownMenu.CheckboxItem>
|
|
||||||
|
|
||||||
{developerMode && (
|
|
||||||
<DropdownMenu.CheckboxItem
|
<DropdownMenu.CheckboxItem
|
||||||
checked={wireframe}
|
checked={showSpacedArmor}
|
||||||
onCheckedChange={(checked) => {
|
onCheckedChange={(checked) => {
|
||||||
mutateTankopediaPersistent((draft) => {
|
mutateTankopediaPersistent((draft) => {
|
||||||
draft.model.visual.wireframe = checked;
|
draft.model.visual.showSpacedArmor = checked;
|
||||||
|
});
|
||||||
|
mutateTankopediaTemporary((draft) => {
|
||||||
|
draft.shot = undefined;
|
||||||
});
|
});
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Wireframe
|
Spaced armor
|
||||||
</DropdownMenu.CheckboxItem>
|
</DropdownMenu.CheckboxItem>
|
||||||
)}
|
|
||||||
|
|
||||||
<DropdownMenu.CheckboxItem
|
<DropdownMenu.CheckboxItem
|
||||||
checked={opaque}
|
checked={greenPenetration}
|
||||||
onCheckedChange={(checked) => {
|
onCheckedChange={(checked) => {
|
||||||
mutateTankopediaPersistent((draft) => {
|
mutateTankopediaPersistent((draft) => {
|
||||||
draft.model.visual.opaque = checked;
|
draft.model.visual.greenPenetration = checked;
|
||||||
});
|
});
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Opaque
|
Green penetration
|
||||||
</DropdownMenu.CheckboxItem>
|
</DropdownMenu.CheckboxItem>
|
||||||
</>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<DropdownMenu.Label>Environment</DropdownMenu.Label>
|
{developerMode && (
|
||||||
|
<DropdownMenu.CheckboxItem
|
||||||
<DropdownMenu.CheckboxItem
|
checked={wireframe}
|
||||||
checked={showGrid}
|
onCheckedChange={(checked) => {
|
||||||
onCheckedChange={(checked) => {
|
|
||||||
mutateTankopediaPersistent((draft) => {
|
|
||||||
draft.model.visual.showGrid = checked;
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Show grid
|
|
||||||
</DropdownMenu.CheckboxItem>
|
|
||||||
|
|
||||||
<DropdownMenu.CheckboxItem
|
|
||||||
checked={showEnvironment}
|
|
||||||
onCheckedChange={(checked) => {
|
|
||||||
mutateTankopediaPersistent((draft) => {
|
|
||||||
draft.model.visual.showEnvironment = checked;
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{/* TODO: consider removing this? */}
|
|
||||||
View environment
|
|
||||||
</DropdownMenu.CheckboxItem>
|
|
||||||
|
|
||||||
<DropdownMenu.Sub>
|
|
||||||
<DropdownMenu.SubTrigger>Lighting</DropdownMenu.SubTrigger>
|
|
||||||
|
|
||||||
<DropdownMenu.SubContent>
|
|
||||||
<DropdownMenu.RadioGroup value={environment}>
|
|
||||||
{ENVIRONMENTS.map((environment) => (
|
|
||||||
<DropdownMenu.RadioItem
|
|
||||||
key={environment}
|
|
||||||
value={environment}
|
|
||||||
onClick={() => {
|
|
||||||
mutateTankopediaPersistent((draft) => {
|
mutateTankopediaPersistent((draft) => {
|
||||||
draft.model.visual.environment = environment;
|
draft.model.visual.wireframe = checked;
|
||||||
});
|
});
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{environment[0].toUpperCase() + environment.slice(1)}
|
Wireframe
|
||||||
</DropdownMenu.RadioItem>
|
</DropdownMenu.CheckboxItem>
|
||||||
))}
|
)}
|
||||||
</DropdownMenu.RadioGroup>
|
|
||||||
</DropdownMenu.SubContent>
|
|
||||||
</DropdownMenu.Sub>
|
|
||||||
</DropdownMenu.Content>
|
|
||||||
</DropdownMenu.Root>
|
|
||||||
|
|
||||||
{fullScreenAvailable && (
|
<DropdownMenu.CheckboxItem
|
||||||
<IconButton
|
checked={opaque}
|
||||||
color="gray"
|
onCheckedChange={(checked) => {
|
||||||
variant="ghost"
|
mutateTankopediaPersistent((draft) => {
|
||||||
onClick={() => {
|
draft.model.visual.opaque = checked;
|
||||||
if (isFullScreen) {
|
});
|
||||||
document.exitFullscreen();
|
}}
|
||||||
} else document.body.requestFullscreen();
|
>
|
||||||
}}
|
Opaque
|
||||||
>
|
</DropdownMenu.CheckboxItem>
|
||||||
{isFullScreen ? <ExitFullScreenIcon /> : <EnterFullScreenIcon />}
|
</>
|
||||||
</IconButton>
|
)}
|
||||||
)}
|
|
||||||
</Flex>
|
<DropdownMenu.Label>Environment</DropdownMenu.Label>
|
||||||
|
|
||||||
|
<DropdownMenu.CheckboxItem
|
||||||
|
checked={showGrid}
|
||||||
|
onCheckedChange={(checked) => {
|
||||||
|
mutateTankopediaPersistent((draft) => {
|
||||||
|
draft.model.visual.showGrid = checked;
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Show grid
|
||||||
|
</DropdownMenu.CheckboxItem>
|
||||||
|
|
||||||
|
<DropdownMenu.CheckboxItem
|
||||||
|
checked={showEnvironment}
|
||||||
|
onCheckedChange={(checked) => {
|
||||||
|
mutateTankopediaPersistent((draft) => {
|
||||||
|
draft.model.visual.showEnvironment = checked;
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* TODO: consider removing this? */}
|
||||||
|
View environment
|
||||||
|
</DropdownMenu.CheckboxItem>
|
||||||
|
|
||||||
|
<DropdownMenu.Sub>
|
||||||
|
<DropdownMenu.SubTrigger>Lighting</DropdownMenu.SubTrigger>
|
||||||
|
|
||||||
|
<DropdownMenu.SubContent>
|
||||||
|
<DropdownMenu.RadioGroup value={environment}>
|
||||||
|
{ENVIRONMENTS.map((environment) => (
|
||||||
|
<DropdownMenu.RadioItem
|
||||||
|
key={environment}
|
||||||
|
value={environment}
|
||||||
|
onClick={() => {
|
||||||
|
mutateTankopediaPersistent((draft) => {
|
||||||
|
draft.model.visual.environment = environment;
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{environment[0].toUpperCase() + environment.slice(1)}
|
||||||
|
</DropdownMenu.RadioItem>
|
||||||
|
))}
|
||||||
|
</DropdownMenu.RadioGroup>
|
||||||
|
</DropdownMenu.SubContent>
|
||||||
|
</DropdownMenu.Sub>
|
||||||
|
</DropdownMenu.Content>
|
||||||
|
</DropdownMenu.Root>
|
||||||
|
|
||||||
|
{fullScreenAvailable && (
|
||||||
|
<IconButton
|
||||||
|
color="gray"
|
||||||
|
variant="ghost"
|
||||||
|
onClick={() => {
|
||||||
|
if (isFullScreen) {
|
||||||
|
document.exitFullscreen();
|
||||||
|
} else document.body.requestFullscreen();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{isFullScreen ? <ExitFullScreenIcon /> : <EnterFullScreenIcon />}
|
||||||
|
</IconButton>
|
||||||
|
)}
|
||||||
|
</Flex>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
Reference in new issue
Block a user