TresAbhi/blitzkit
1
0 Fork 0
mirror of https://github.com/blitzkit/blitzkit.git synced 2026-10-24 03:59:50 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: shells

Browse Source
This commit is contained in:
TrèsAbhi committed 2024-05-03 19:18:34 -05:00
1 parent a8bb6d0bb8
commit 7bd84fdaec
1 file changed
+197 -151
Download Patch File Download Diff File Expand all files Collapse all files
src/app/tools/tankopedia/[id]/components/Model/components/Options.tsx
+197 -151
View File
@@ -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>
</>
); );
} }