TresAbhi/blitzkit
1
0 Fork 0
mirror of https://github.com/blitzkit/blitzkit.git synced 2026-10-27 12:39:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: clearer controls of tankoepdia

Browse Source
This commit is contained in:
TrèsAbhi committed 2025-10-04 21:53:18 -05:00
1 parent 9412be2d7c
commit ab10343704
2 files changed
+127 -118
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/i18n/strings/en.json
-1
View File
@@ -969,7 +969,6 @@
}, },
"advanced": "Advanced highlighting", "advanced": "Advanced highlighting",
"shooter": "Shooter:",
"shot_card": { "shot_card": {
"element": { "element": {
packages/website/src/components/Tankopedia/HeroSection/components/Options/index.tsx
+127 -117
View File
@@ -6,13 +6,15 @@ import {
} from "@blitzkit/core"; } from "@blitzkit/core";
import { literals } from "@blitzkit/i18n/src/literals"; import { literals } from "@blitzkit/i18n/src/literals";
import { import {
Crosshair1Icon,
EnterFullScreenIcon, EnterFullScreenIcon,
ExitFullScreenIcon, ExitFullScreenIcon,
EyeOpenIcon, EyeOpenIcon,
ShadowInnerIcon,
ShadowNoneIcon,
} from "@radix-ui/react-icons"; } from "@radix-ui/react-icons";
import { import {
Button, Button,
Checkbox,
Dialog, Dialog,
DropdownMenu, DropdownMenu,
Flex, Flex,
@@ -284,78 +286,100 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) {
bottom={revealed ? "4" : "-100%"} bottom={revealed ? "4" : "-100%"}
left="50%" left="50%"
style={{ transform: "translateX(-50%)", transitionDuration: "200ms" }} style={{ transform: "translateX(-50%)", transitionDuration: "200ms" }}
gap="2"
> >
<Flex <Flex
direction="column" gap="2"
align="center" align="center"
style={{ transitionDuration: "200ms" }} style={{ transitionDuration: "200ms" }}
position="relative" position="relative"
bottom={display === TankopediaDisplay.DynamicArmor ? "0" : "-7rem"} bottom={display === TankopediaDisplay.DynamicArmor ? "0" : "-7rem"}
> >
<Flex {disturbed && (
align="center" <>
gap="2" {display === TankopediaDisplay.DynamicArmor && (
mb="1" <IconButton
style={{ cursor: "pointer" }} size="2"
onClick={() => { highContrast
TankopediaPersistent.mutate((draft) => { onClick={() => {
draft.advancedHighlighting = !draft.advancedHighlighting; TankopediaPersistent.mutate((draft) => {
}); draft.advancedHighlighting = !draft.advancedHighlighting;
}} });
> }}
<Checkbox variant="classic" checked={advancedHighlighting} /> color={advancedHighlighting ? undefined : "gray"}
<Text color="gray" size="2"> variant={advancedHighlighting ? "solid" : "surface"}
{strings.website.tools.tankopedia.sandbox.dynamic.advanced}
</Text>
</Flex>
<Flex align="center" gap="2">
<Text color="gray" size="2">
{strings.website.tools.tankopedia.sandbox.dynamic.shooter}
</Text>
<Dialog.Root
open={antagonistSelectorOpen}
onOpenChange={setAntagonistSelectorOpen}
>
<Dialog.Trigger>
<Button variant="ghost">
<Flex gap="2" align="center">
<SmallTankIcon id={antagonistTank.id} size={16} />
{unwrap(antagonistTank.name)}
</Flex>
</Button>
</Dialog.Trigger>
<Dialog.Content>
<Dialog.Title align="center">
{strings.website.common.tank_search.select_dialog_title}
</Dialog.Title>
<Tabs.Root
value={tab}
onValueChange={setTab}
style={{ position: "relative" }}
> >
<TankSearch {advancedHighlighting ? (
compact <ShadowInnerIcon />
onSelect={(tank) => { ) : (
Duel.mutate((draft) => { <ShadowNoneIcon />
draft.antagonist.tank = tank; )}
draft.antagonist.engine = tank.engines.at(-1)!; </IconButton>
draft.antagonist.track = tank.tracks.at(-1)!; )}
draft.antagonist.turret = tank.turrets.at(-1)!;
draft.antagonist.gun = <DropdownMenu.Root>
draft.antagonist.turret.guns.at(-1)!; <DropdownMenu.Trigger>
draft.antagonist.shell = draft.antagonist.gun.shells[0]; <IconButton
}); size="2"
setAntagonistSelectorOpen(false); variant="surface"
}} highContrast
/> color="gray"
</Tabs.Root> >
</Dialog.Content> <EyeOpenIcon />
</Dialog.Root> </IconButton>
</Flex> </DropdownMenu.Trigger>
<DropdownMenu.Content>
<DropdownMenu.Item
onClick={() => poseEvent.emit(Pose.HullDown)}
>
{strings.website.tools.tankopedia.sandbox.poses.hull_down}
</DropdownMenu.Item>
<DropdownMenu.Item
onClick={() => poseEvent.emit(Pose.FaceHug)}
>
{strings.website.tools.tankopedia.sandbox.poses.face_hug}
</DropdownMenu.Item>
<DropdownMenu.Item
onClick={() => poseEvent.emit(Pose.Default)}
>
{strings.website.tools.tankopedia.sandbox.poses.default}
</DropdownMenu.Item>
</DropdownMenu.Content>
</DropdownMenu.Root>
<ScreenshotButton
color="gray"
size="2"
variant="surface"
highContrast
canvas={canvas}
name={protagonistTank.slug}
/>
{fullScreenAvailable && (
<IconButton
size="2"
highContrast
onClick={() => {
if (isFullScreen) {
document.exitFullscreen();
} else document.body.requestFullscreen();
}}
color={isFullScreen ? undefined : "gray"}
variant={isFullScreen ? "solid" : "surface"}
>
{isFullScreen ? (
<ExitFullScreenIcon />
) : (
<EnterFullScreenIcon />
)}
</IconButton>
)}
</>
)}
</Flex> </Flex>
<Flex gap="3" align="center" mt="2"> <Flex gap="3" align="center" mt="2">
@@ -407,61 +431,47 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) {
</SegmentedControl.Item> </SegmentedControl.Item>
</SegmentedControl.Root> </SegmentedControl.Root>
{disturbed && ( {display === TankopediaDisplay.DynamicArmor && (
<> <Dialog.Root
<DropdownMenu.Root> open={antagonistSelectorOpen}
<DropdownMenu.Trigger> onOpenChange={setAntagonistSelectorOpen}
<IconButton variant="ghost" color="gray"> >
<EyeOpenIcon /> <Dialog.Trigger>
</IconButton> <Button variant="solid" highContrast>
</DropdownMenu.Trigger> <Crosshair1Icon />
{unwrap(antagonistTank.name)}
<SmallTankIcon id={antagonistTank.id} size={16} />
</Button>
</Dialog.Trigger>
<DropdownMenu.Content> <Dialog.Content>
<DropdownMenu.Item <Dialog.Title align="center">
onClick={() => poseEvent.emit(Pose.HullDown)} {strings.website.common.tank_search.select_dialog_title}
> </Dialog.Title>
{strings.website.tools.tankopedia.sandbox.poses.hull_down}
</DropdownMenu.Item>
<DropdownMenu.Item <Tabs.Root
onClick={() => poseEvent.emit(Pose.FaceHug)} value={tab}
> onValueChange={setTab}
{strings.website.tools.tankopedia.sandbox.poses.face_hug} style={{ position: "relative" }}
</DropdownMenu.Item>
<DropdownMenu.Item
onClick={() => poseEvent.emit(Pose.Default)}
>
{strings.website.tools.tankopedia.sandbox.poses.default}
</DropdownMenu.Item>
</DropdownMenu.Content>
</DropdownMenu.Root>
<ScreenshotButton
color="gray"
variant="ghost"
canvas={canvas}
name={protagonistTank.slug}
/>
{fullScreenAvailable && (
<IconButton
color="gray"
variant="ghost"
onClick={() => {
if (isFullScreen) {
document.exitFullscreen();
} else document.body.requestFullscreen();
}}
> >
{isFullScreen ? ( <TankSearch
<ExitFullScreenIcon /> compact
) : ( onSelect={(tank) => {
<EnterFullScreenIcon /> Duel.mutate((draft) => {
)} draft.antagonist.tank = tank;
</IconButton> draft.antagonist.engine = tank.engines.at(-1)!;
)} draft.antagonist.track = tank.tracks.at(-1)!;
</> draft.antagonist.turret = tank.turrets.at(-1)!;
draft.antagonist.gun =
draft.antagonist.turret.guns.at(-1)!;
draft.antagonist.shell = draft.antagonist.gun.shells[0];
});
setAntagonistSelectorOpen(false);
}}
/>
</Tabs.Root>
</Dialog.Content>
</Dialog.Root>
)} )}
</Flex> </Flex>
</Flex> </Flex>