From 45811b5c18ddf9da47198bc82ebcca421fa6d67f Mon Sep 17 00:00:00 2001 From: tresabhi <43380238+tresabhi@users.noreply.github.com> Date: Tue, 27 Oct 2026 17:13:01 -0500 Subject: [PATCH] fix imports --- packages/i18n/strings/en.json | 12 ++ .../Tankopedia/HeroSection/index.tsx | 4 +- .../components/CustomShellButton.tsx | 4 +- .../components/DynamicArmorSwitcher.tsx | 4 +- .../components/QuickInputs/index.css | 0 .../components/QuickInputs/index.tsx | 10 +- .../components/SpallLinerSwitcher.tsx | 6 +- .../components/Thicknesses.tsx | 18 +- .../Options => TankopediaOptions}/index.tsx | 156 ++++++++---------- .../components/TankopediaSandbox/index.tsx | 2 + 10 files changed, 106 insertions(+), 110 deletions(-) rename packages/website/src/components/{Tankopedia/HeroSection/components/Options => TankopediaOptions}/components/CustomShellButton.tsx (98%) rename packages/website/src/components/{Tankopedia/HeroSection/components/Options => TankopediaOptions}/components/DynamicArmorSwitcher.tsx (91%) rename packages/website/src/components/{Tankopedia/HeroSection/components/Options => TankopediaOptions}/components/QuickInputs/index.css (100%) rename packages/website/src/components/{Tankopedia/HeroSection/components/Options => TankopediaOptions}/components/QuickInputs/index.tsx (95%) rename packages/website/src/components/{Tankopedia/HeroSection/components/Options => TankopediaOptions}/components/SpallLinerSwitcher.tsx (94%) rename packages/website/src/components/{Tankopedia/HeroSection/components/Options => TankopediaOptions}/components/Thicknesses.tsx (91%) rename packages/website/src/components/{Tankopedia/HeroSection/components/Options => TankopediaOptions}/index.tsx (76%) diff --git a/packages/i18n/strings/en.json b/packages/i18n/strings/en.json index 2b5c9bda3..28e328d25 100644 --- a/packages/i18n/strings/en.json +++ b/packages/i18n/strings/en.json @@ -20,6 +20,18 @@ }, "tanks": { + "tabs": { + "model": "Model", + "dynamic_armor": "Dynamic armor", + "static_armor": "Static armor" + }, + + "poses": { + "hull_down": "Hull down", + "face_hug": "Face hug", + "default": "Default" + }, + "toys": { "ricochet": { "angle": "Angle", diff --git a/packages/website/src/components/Tankopedia/HeroSection/index.tsx b/packages/website/src/components/Tankopedia/HeroSection/index.tsx index 5c4ea2800..222de9d11 100644 --- a/packages/website/src/components/Tankopedia/HeroSection/index.tsx +++ b/packages/website/src/components/Tankopedia/HeroSection/index.tsx @@ -8,7 +8,7 @@ import { Duel } from "../../../stores/duel"; import { Tankopedia } from "../../../stores/tankopedia"; import type { MaybeSkeletonComponentProps } from "../../../types/maybeSkeletonComponentProps"; import type { ThicknessRange } from "../../StaticArmor"; -import { Options } from "./components/Options"; +import { TankopediaOptions } from "../../TankopediaOptions"; import { TankSandbox } from "./components/TankSandbox"; import { Title } from "./components/TankSandbox/Title"; @@ -142,7 +142,7 @@ export function HeroSection({ skeleton }: MaybeSkeletonComponentProps) { - <Options + <TankopediaOptions skeleton={skeleton} canvas={canvas} thicknessRange={thicknessRange} diff --git a/packages/website/src/components/Tankopedia/HeroSection/components/Options/components/CustomShellButton.tsx b/packages/website/src/components/TankopediaOptions/components/CustomShellButton.tsx similarity index 98% rename from packages/website/src/components/Tankopedia/HeroSection/components/Options/components/CustomShellButton.tsx rename to packages/website/src/components/TankopediaOptions/components/CustomShellButton.tsx index 1f530c1a4..183a0928e 100644 --- a/packages/website/src/components/Tankopedia/HeroSection/components/Options/components/CustomShellButton.tsx +++ b/packages/website/src/components/TankopediaOptions/components/CustomShellButton.tsx @@ -12,9 +12,9 @@ import { } from "@radix-ui/themes"; import { throttle } from "lodash-es"; import { type ChangeEvent } from "react"; -import { useLocale } from "../../../../../../hooks/useLocale"; import { Duel } from "../../../../../../stores/duel"; -import { Tankopedia } from "../../../../../../stores/tankopedia"; +import { useLocale } from "../../../hooks/useLocale"; +import { Tankopedia } from "../../../stores/tankopedia"; export function CustomShellButton() { const customShell = Tankopedia.use((state) => state.customShell); diff --git a/packages/website/src/components/Tankopedia/HeroSection/components/Options/components/DynamicArmorSwitcher.tsx b/packages/website/src/components/TankopediaOptions/components/DynamicArmorSwitcher.tsx similarity index 91% rename from packages/website/src/components/Tankopedia/HeroSection/components/Options/components/DynamicArmorSwitcher.tsx rename to packages/website/src/components/TankopediaOptions/components/DynamicArmorSwitcher.tsx index ec788d455..d35f8e34c 100644 --- a/packages/website/src/components/Tankopedia/HeroSection/components/Options/components/DynamicArmorSwitcher.tsx +++ b/packages/website/src/components/TankopediaOptions/components/DynamicArmorSwitcher.tsx @@ -1,8 +1,8 @@ import { alias } from "@blitzkit/core"; import { IconButton } from "@radix-ui/themes"; -import { useArmor } from "../../../../../../hooks/useArmor"; import { Duel } from "../../../../../../stores/duel"; -import { Tankopedia } from "../../../../../../stores/tankopedia"; +import { useArmor } from "../../../hooks/useArmor"; +import { Tankopedia } from "../../../stores/tankopedia"; export function DynamicArmorSwitcher() { const tank = Duel.use((state) => state.protagonist.tank); diff --git a/packages/website/src/components/Tankopedia/HeroSection/components/Options/components/QuickInputs/index.css b/packages/website/src/components/TankopediaOptions/components/QuickInputs/index.css similarity index 100% rename from packages/website/src/components/Tankopedia/HeroSection/components/Options/components/QuickInputs/index.css rename to packages/website/src/components/TankopediaOptions/components/QuickInputs/index.css diff --git a/packages/website/src/components/Tankopedia/HeroSection/components/Options/components/QuickInputs/index.tsx b/packages/website/src/components/TankopediaOptions/components/QuickInputs/index.tsx similarity index 95% rename from packages/website/src/components/Tankopedia/HeroSection/components/Options/components/QuickInputs/index.tsx rename to packages/website/src/components/TankopediaOptions/components/QuickInputs/index.tsx index e62181391..c68e0f8ae 100644 --- a/packages/website/src/components/Tankopedia/HeroSection/components/Options/components/QuickInputs/index.tsx +++ b/packages/website/src/components/TankopediaOptions/components/QuickInputs/index.tsx @@ -3,14 +3,14 @@ import { Flex, TextField } from "@radix-ui/themes"; import type { QuicklimeEvent } from "quicklime"; import { useEffect, useRef } from "react"; import { degToRad, radToDeg } from "three/src/math/MathUtils.js"; -import { applyPitchYawLimits } from "../../../../../../../core/blitz/applyPitchYawLimits"; +import { useTankModelDefinition } from "../../../../../../../hooks/useTankModelDefinition"; +import { Duel } from "../../../../../../../stores/duel"; +import { applyPitchYawLimits } from "../../../../core/blitz/applyPitchYawLimits"; import { type ModelTransformEventData, modelTransformEvent, -} from "../../../../../../../core/blitzkit/modelTransform"; -import { useEquipment } from "../../../../../../../hooks/useEquipment"; -import { useTankModelDefinition } from "../../../../../../../hooks/useTankModelDefinition"; -import { Duel } from "../../../../../../../stores/duel"; +} from "../../../../core/blitzkit/modelTransform"; +import { useEquipment } from "../../../../hooks/useEquipment"; import "./index.css"; export function QuickInputs() { diff --git a/packages/website/src/components/Tankopedia/HeroSection/components/Options/components/SpallLinerSwitcher.tsx b/packages/website/src/components/TankopediaOptions/components/SpallLinerSwitcher.tsx similarity index 94% rename from packages/website/src/components/Tankopedia/HeroSection/components/Options/components/SpallLinerSwitcher.tsx rename to packages/website/src/components/TankopediaOptions/components/SpallLinerSwitcher.tsx index 77653a3c9..3ebffd950 100644 --- a/packages/website/src/components/Tankopedia/HeroSection/components/Options/components/SpallLinerSwitcher.tsx +++ b/packages/website/src/components/TankopediaOptions/components/SpallLinerSwitcher.tsx @@ -2,10 +2,10 @@ import { alias, availableProvisions } from "@blitzkit/core"; import { ShuffleIcon } from "@radix-ui/react-icons"; import { Flex, IconButton, Popover } from "@radix-ui/themes"; import { api } from "../../../../../../core/blitzkit/api"; -import { SPALL_LINER_PROVISION_ID } from "../../../../../../core/blitzkit/spallLiner"; -import { useLocale } from "../../../../../../hooks/useLocale"; import { Duel } from "../../../../../../stores/duel"; -import { Tankopedia } from "../../../../../../stores/tankopedia"; +import { SPALL_LINER_PROVISION_ID } from "../../../core/blitzkit/spallLiner"; +import { useLocale } from "../../../hooks/useLocale"; +import { Tankopedia } from "../../../stores/tankopedia"; const provisionDefinitions = await api.provisionDefinitions(); diff --git a/packages/website/src/components/Tankopedia/HeroSection/components/Options/components/Thicknesses.tsx b/packages/website/src/components/TankopediaOptions/components/Thicknesses.tsx similarity index 91% rename from packages/website/src/components/Tankopedia/HeroSection/components/Options/components/Thicknesses.tsx rename to packages/website/src/components/TankopediaOptions/components/Thicknesses.tsx index fa6b0973a..894570e59 100644 --- a/packages/website/src/components/Tankopedia/HeroSection/components/Options/components/Thicknesses.tsx +++ b/packages/website/src/components/TankopediaOptions/components/Thicknesses.tsx @@ -2,12 +2,12 @@ import { literals } from "@blitzkit/i18n/src/literals"; import { EyeClosedIcon, EyeOpenIcon, ReloadIcon } from "@radix-ui/react-icons"; import { Button, Checkbox, Flex, Text } from "@radix-ui/themes"; import { Suspense } from "react"; -import { useLocale } from "../../../../../../hooks/useLocale"; -import { Tankopedia } from "../../../../../../stores/tankopedia"; -import { TankopediaPersistent } from "../../../../../../stores/tankopediaPersistent"; -import { TankopediaDisplay } from "../../../../../../stores/tankopediaPersistent/constants"; -import type { MaybeSkeletonComponentProps } from "../../../../../../types/maybeSkeletonComponentProps"; -import type { ThicknessRange } from "../../../../../StaticArmor"; +import { useLocale } from "../../../hooks/useLocale"; +import { Tankopedia } from "../../../stores/tankopedia"; +import { TankopediaPersistent } from "../../../stores/tankopediaPersistent"; +import { TankopediaDisplay } from "../../../stores/tankopediaPersistent/constants"; +import type { MaybeSkeletonComponentProps } from "../../../types/maybeSkeletonComponentProps"; +import type { ThicknessRange } from "../../StaticArmor"; import { DynamicArmorSwitcher } from "./DynamicArmorSwitcher"; type ThicknessesProps = MaybeSkeletonComponentProps & { @@ -17,13 +17,13 @@ type ThicknessesProps = MaybeSkeletonComponentProps & { export function Thicknesses({ thicknessRange, skeleton }: ThicknessesProps) { const display = Tankopedia.use((state) => state.display); const showExternalModules = TankopediaPersistent.use( - (state) => state.showExternalModules + (state) => state.showExternalModules, ); const showSpacedArmor = TankopediaPersistent.use( - (state) => state.showSpacedArmor + (state) => state.showSpacedArmor, ); const showPrimaryArmor = TankopediaPersistent.use( - (state) => state.showPrimaryArmor + (state) => state.showPrimaryArmor, ); const editStatic = Tankopedia.use((state) => state.editStatic); const { strings } = useLocale(); diff --git a/packages/website/src/components/Tankopedia/HeroSection/components/Options/index.tsx b/packages/website/src/components/TankopediaOptions/index.tsx similarity index 76% rename from packages/website/src/components/Tankopedia/HeroSection/components/Options/index.tsx rename to packages/website/src/components/TankopediaOptions/index.tsx index 73da9ff61..6fc025d9e 100644 --- a/packages/website/src/components/Tankopedia/HeroSection/components/Options/index.tsx +++ b/packages/website/src/components/TankopediaOptions/index.tsx @@ -1,9 +1,4 @@ -import { - alias, - resolvePenetrationCoefficient, - romanize, - uniqueGuns, -} from "@blitzkit/core"; +import { alias, romanize, uniqueGuns } from "@blitzkit/core"; import { literals } from "@blitzkit/i18n/src/literals"; import { Crosshair1Icon, @@ -27,39 +22,38 @@ import { Tooltip, } from "@radix-ui/themes"; import { Suspense, useState, type RefObject } from "react"; -import { Pose, poseEvent } from "../../../../../core/blitzkit/pose"; -import { useEquipment } from "../../../../../hooks/useEquipment"; -import { useFullScreen } from "../../../../../hooks/useFullScreen"; -import { useFullscreenAvailability } from "../../../../../hooks/useFullscreenAvailability"; -import { useLocale } from "../../../../../hooks/useLocale"; -import { Duel } from "../../../../../stores/duel"; -import { Tankopedia } from "../../../../../stores/tankopedia"; -import { TankopediaPersistent } from "../../../../../stores/tankopediaPersistent"; -import { TankopediaDisplay } from "../../../../../stores/tankopediaPersistent/constants"; -import type { MaybeSkeletonComponentProps } from "../../../../../types/maybeSkeletonComponentProps"; -import { EqualIcon } from "../../../../EqualIcon"; -import { ModuleButton } from "../../../../ModuleButtons/ModuleButton"; -import { ScreenshotButton } from "../../../../ScreenshotButton"; -import { SmallTankIcon } from "../../../../SmallTankIcon"; -import type { ThicknessRange } from "../../../../StaticArmor"; +import { Pose, poseEvent } from "../../core/blitzkit/pose"; +import { DuelModule, useDuel } from "../../hooks/useDuel"; +import { useEquipment } from "../../hooks/useEquipment"; +import { useFullScreen } from "../../hooks/useFullScreen"; +import { useFullscreenAvailability } from "../../hooks/useFullscreenAvailability"; +import { useStrings } from "../../hooks/useStrings"; +import { useUnwrapper } from "../../hooks/useUnwrapper"; +import { Tankopedia } from "../../stores/tankopedia"; +import { TankopediaPersistent } from "../../stores/tankopediaPersistent"; +import { TankopediaDisplay } from "../../stores/tankopediaPersistent/constants"; +import type { MaybeSkeletonComponentProps } from "../../types/maybeSkeletonComponentProps"; +import { EqualIcon } from "../EqualIcon"; +import { ModuleButton } from "../ModuleButtons/ModuleButton"; +import { ScreenshotButton } from "../ScreenshotButton"; +import { SmallTankIcon } from "../SmallTankIcon"; import { SidebarIconButton, SidebarIconGroup, -} from "../../../../TankopediaSidebarIconButtons"; -import { SkinSwitcher } from "../../../../TankopediaSkinSwitcher"; -import { TankSearch } from "../../../../TankSearch"; +} from "../TankopediaSidebarIconButtons"; +import { TankSearch } from "../TankSearch"; import { CustomShellButton } from "./components/CustomShellButton"; import { DynamicArmorSwitcher } from "./components/DynamicArmorSwitcher"; -import { QuickInputs } from "./components/QuickInputs"; import { SpallLinerSwitcher } from "./components/SpallLinerSwitcher"; -import { Thicknesses } from "./components/Thicknesses"; type OptionsProps = MaybeSkeletonComponentProps & { - thicknessRange: ThicknessRange; canvas: RefObject<HTMLCanvasElement>; }; -export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) { +export function TankopediaOptions({ canvas, skeleton }: OptionsProps) { + const strings = useStrings(); + const unwrap = useUnwrapper(); + const hasCustomShell = Tankopedia.use( (state) => state.customShell !== undefined, ); @@ -69,31 +63,23 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) { (state) => state.advancedHighlighting, ); const fullScreenAvailable = useFullscreenAvailability(true); - const protagonistTank = Duel.use((state) => state.protagonist.tank); - const antagonistGun = Duel.use((state) => state.antagonist.gun); - const antagonistShell = Duel.use((state) => state.antagonist.shell); + const protagonistTank = useDuel("protagonist", DuelModule.Tank); + const antagonistGun = useDuel("antagonist", DuelModule.Gun); + const antagonistShell = useDuel("antagonist", DuelModule.Shell); const [antagonistSelectorOpen, setAntagonistSelectorOpen] = useState(false); - const antagonistTank = Duel.use((state) => state.antagonist.tank); - const hasCalibratedShells = useEquipment("protagonist", 103, true); + const antagonistTank = useDuel("antagonist", DuelModule.Tank); + const hasCalibratedShells = useEquipment("protagonist", 103); const [tab, setTab] = useState("search"); const hasEnhancedArmor = useEquipment("protagonist", 110); const antagonistUniqueGuns = uniqueGuns(antagonistTank.turrets); - const { strings, unwrap } = useLocale(); const revealed = Tankopedia.use((state) => state.revealed); const disturbed = Tankopedia.use((state) => state.disturbed); const highGraphics = TankopediaPersistent.use((state) => state.highGraphics); const modelRequested = Tankopedia.use((state) => state.modelRequested); - const equalize = Duel.use((state) => state.equalize); - const equalizer = Duel.use((state) => state.antagonist.tank.equalizer); + const equalize = Tankopedia.use((state) => state.environment.equalize); return ( <> - {disturbed && <QuickInputs />} - - <Thicknesses skeleton={skeleton} thicknessRange={thicknessRange} /> - - <SkinSwitcher /> - <Flex gap="2" direction="column" @@ -110,7 +96,7 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) { > {!hasCustomShell && ( <Text color="gray" size={{ initial: "1", sm: "2" }}> - {literals(strings.common.units.mm, { + {/* {literals(strings.common.units.mm, { value: ( resolvePenetrationCoefficient( hasCalibratedShells, @@ -119,7 +105,8 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) { equalizer, ) * antagonistShell.penetration!.near ).toFixed(0), - })} + })} */} + what </Text> )} @@ -165,13 +152,13 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) { <ModuleButton module="gun" key={gun.id} - onClick={() => - Duel.mutate((draft) => { - draft.antagonist.turret = turret; - draft.antagonist.gun = gun; - draft.antagonist.shell = gun.shells[0]; - }) - } + onClick={() => { + Tankopedia.mutate((draft) => { + draft.antagonist.turret = turret.id; + draft.antagonist.gun = gun.id; + draft.antagonist.shell = gun.shells[0].id; + }); + }} selected={gun.id === antagonistGun.id} discriminator={romanize(gun.tier)} secondaryDiscriminator={ @@ -196,10 +183,8 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) { alt={unwrap(thisShell.name!)} src={alias("api", `/icons/shells/${thisShell.icon}.webp`)} onClick={() => { - Duel.mutate((draft) => { - draft.antagonist.shell = thisShell; - }); Tankopedia.mutate((draft) => { + draft.antagonist.shell = thisShell.id; draft.shot = undefined; draft.customShell = undefined; }); @@ -223,13 +208,14 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) { size={{ initial: "2", sm: "3" }} radius="none" onClick={() => { - Duel.mutate((draft) => { - draft.antagonist.equipmentMatrix[0][0] = hasCalibratedShells - ? 0 - : 1; - }); Tankopedia.mutate((draft) => { draft.shot = undefined; + + if (hasCalibratedShells) { + delete draft.protagonist.equipment[0]; + } else { + draft.antagonist.equipment[0] = 1; + } }); }} > @@ -248,12 +234,13 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) { size={{ initial: "2", sm: "3" }} radius="none" onClick={() => { - Duel.mutate((draft) => { - draft.protagonist.equipmentMatrix[1][1] = hasEnhancedArmor - ? 0 - : -1; - }); Tankopedia.mutate((draft) => { + if (hasEnhancedArmor) { + delete draft.protagonist.equipment[4]; + } else { + draft.antagonist.equipment[4] = 0; + } + draft.shot = undefined; }); }} @@ -282,10 +269,8 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) { size={{ initial: "2", sm: "3" }} color={equalize ? undefined : "gray"} onClick={() => { - Duel.mutate((draft) => { - draft.equalize = !draft.equalize; - }); Tankopedia.mutate((draft) => { + draft.environment.equalize = !draft.environment.equalize; draft.shot = undefined; }); }} @@ -347,19 +332,19 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) { <DropdownMenu.Item onClick={() => poseEvent.emit(Pose.HullDown)} > - {strings.website.tools.tankopedia.sandbox.poses.hull_down} + {strings.tanks.poses.hull_down} </DropdownMenu.Item> <DropdownMenu.Item onClick={() => poseEvent.emit(Pose.FaceHug)} > - {strings.website.tools.tankopedia.sandbox.poses.face_hug} + {strings.tanks.poses.face_hug} </DropdownMenu.Item> <DropdownMenu.Item onClick={() => poseEvent.emit(Pose.Default)} > - {strings.website.tools.tankopedia.sandbox.poses.default} + {strings.tanks.poses.default} </DropdownMenu.Item> </DropdownMenu.Content> </DropdownMenu.Root> @@ -422,9 +407,7 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) { }} > <SegmentedControl.Item value={`${TankopediaDisplay.Model}`}> - <Tooltip - content={strings.website.tools.tankopedia.sandbox.model.name} - > + <Tooltip content={strings.tanks.tabs.model}> <Flex height="100%" align="center"> <img src="/assets/images/icons/tankopedia-model.png" @@ -434,9 +417,7 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) { </Tooltip> </SegmentedControl.Item> <SegmentedControl.Item value={`${TankopediaDisplay.DynamicArmor}`}> - <Tooltip - content={strings.website.tools.tankopedia.sandbox.dynamic.name} - > + <Tooltip content={strings.tanks.tabs.dynamic_armor}> <Flex height="100%" align="center"> <img src="/assets/images/icons/tankopedia-dynamic-armor.png" @@ -446,9 +427,7 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) { </Tooltip> </SegmentedControl.Item> <SegmentedControl.Item value={`${TankopediaDisplay.StaticArmor}`}> - <Tooltip - content={strings.website.tools.tankopedia.sandbox.static.name} - > + <Tooltip content={strings.tanks.tabs.model}> <Flex height="100%" align="center"> <img src="/assets/images/icons/tankopedia-static-armor.png" @@ -485,14 +464,17 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) { <TankSearch compact onSelect={(tank) => { - 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]; + Tankopedia.mutate((draft) => { + draft.antagonist.tank = tank.id; + draft.antagonist.engine = tank.engines.at(-1)!.id; + draft.antagonist.track = tank.tracks.at(-1)!.id; + + const turret = tank.turrets.at(-1)!; + const gun = turret.guns.at(-1)!; + + draft.antagonist.turret = turret.id; + draft.antagonist.gun = gun.id; + draft.antagonist.shell = gun.shells[0].id; }); setAntagonistSelectorOpen(false); }} diff --git a/packages/website/src/components/TankopediaSandbox/index.tsx b/packages/website/src/components/TankopediaSandbox/index.tsx index b04433138..c46e8e62b 100644 --- a/packages/website/src/components/TankopediaSandbox/index.tsx +++ b/packages/website/src/components/TankopediaSandbox/index.tsx @@ -21,6 +21,7 @@ import { ShotDisplay } from "../ShotDisplay"; import { SmartCanvas } from "../SmartCanvas"; import { StaticArmor, type ThicknessRange } from "../StaticArmor"; import { TankModel } from "../TankModel"; +import { TankopediaOptions } from "../TankopediaOptions"; import { TankopediaSkinSwitcher } from "../TankopediaSkinSwitcher"; import styles from "./index.module.css"; @@ -171,6 +172,7 @@ export function TankopediaSandbox({ </SmartCanvas> <TankopediaSkinSwitcher /> + <TankopediaOptions /> </div> ); }