diff --git a/packages/i18n/strings/en.json b/packages/i18n/strings/en.json index 71571ba75..e4c650680 100644 --- a/packages/i18n/strings/en.json +++ b/packages/i18n/strings/en.json @@ -969,7 +969,6 @@ }, "advanced": "Advanced highlighting", - "shooter": "Shooter:", "shot_card": { "element": { diff --git a/packages/website/src/components/Tankopedia/HeroSection/components/Options/index.tsx b/packages/website/src/components/Tankopedia/HeroSection/components/Options/index.tsx index 871dd0f03..0e013bc2d 100644 --- a/packages/website/src/components/Tankopedia/HeroSection/components/Options/index.tsx +++ b/packages/website/src/components/Tankopedia/HeroSection/components/Options/index.tsx @@ -6,13 +6,15 @@ import { } from "@blitzkit/core"; import { literals } from "@blitzkit/i18n/src/literals"; import { + Crosshair1Icon, EnterFullScreenIcon, ExitFullScreenIcon, EyeOpenIcon, + ShadowInnerIcon, + ShadowNoneIcon, } from "@radix-ui/react-icons"; import { Button, - Checkbox, Dialog, DropdownMenu, Flex, @@ -284,78 +286,100 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) { bottom={revealed ? "4" : "-100%"} left="50%" style={{ transform: "translateX(-50%)", transitionDuration: "200ms" }} + gap="2" > - { - TankopediaPersistent.mutate((draft) => { - draft.advancedHighlighting = !draft.advancedHighlighting; - }); - }} - > - - - {strings.website.tools.tankopedia.sandbox.dynamic.advanced} - - - - - - {strings.website.tools.tankopedia.sandbox.dynamic.shooter} - - - - - - - - - - {strings.website.common.tank_search.select_dialog_title} - - - + {display === TankopediaDisplay.DynamicArmor && ( + { + TankopediaPersistent.mutate((draft) => { + draft.advancedHighlighting = !draft.advancedHighlighting; + }); + }} + color={advancedHighlighting ? undefined : "gray"} + variant={advancedHighlighting ? "solid" : "surface"} > - { - Duel.mutate((draft) => { - draft.antagonist.tank = tank; - 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); - }} - /> - - - - + {advancedHighlighting ? ( + + ) : ( + + )} + + )} + + + + + + + + + + poseEvent.emit(Pose.HullDown)} + > + {strings.website.tools.tankopedia.sandbox.poses.hull_down} + + + poseEvent.emit(Pose.FaceHug)} + > + {strings.website.tools.tankopedia.sandbox.poses.face_hug} + + + poseEvent.emit(Pose.Default)} + > + {strings.website.tools.tankopedia.sandbox.poses.default} + + + + + + + {fullScreenAvailable && ( + { + if (isFullScreen) { + document.exitFullscreen(); + } else document.body.requestFullscreen(); + }} + color={isFullScreen ? undefined : "gray"} + variant={isFullScreen ? "solid" : "surface"} + > + {isFullScreen ? ( + + ) : ( + + )} + + )} + + )} @@ -407,61 +431,47 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) { - {disturbed && ( - <> - - - - - - + {display === TankopediaDisplay.DynamicArmor && ( + + + + - - poseEvent.emit(Pose.HullDown)} - > - {strings.website.tools.tankopedia.sandbox.poses.hull_down} - + + + {strings.website.common.tank_search.select_dialog_title} + - poseEvent.emit(Pose.FaceHug)} - > - {strings.website.tools.tankopedia.sandbox.poses.face_hug} - - - poseEvent.emit(Pose.Default)} - > - {strings.website.tools.tankopedia.sandbox.poses.default} - - - - - - - {fullScreenAvailable && ( - { - if (isFullScreen) { - document.exitFullscreen(); - } else document.body.requestFullscreen(); - }} + - {isFullScreen ? ( - - ) : ( - - )} - - )} - + { + Duel.mutate((draft) => { + draft.antagonist.tank = tank; + 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); + }} + /> + + + )}