diff --git a/packages/website/src/components/TankopediaOptions/index.module.css b/packages/website/src/components/TankopediaOptions/index.module.css index a06b10353..2f1e97731 100644 --- a/packages/website/src/components/TankopediaOptions/index.module.css +++ b/packages/website/src/components/TankopediaOptions/index.module.css @@ -10,7 +10,7 @@ left: 50%; bottom: var(--space-4); - transform: translate(-50%, calc(100% + var(--space-4)) s); + transform: translate(-50%, calc(100% + var(--space-4))); &[data-visible="true"] { transform: translate(-50%, 0); diff --git a/packages/website/src/components/TankopediaOptions/index.tsx b/packages/website/src/components/TankopediaOptions/index.tsx index 1d9b8d698..d3874ee35 100644 --- a/packages/website/src/components/TankopediaOptions/index.tsx +++ b/packages/website/src/components/TankopediaOptions/index.tsx @@ -1,5 +1,12 @@ import { uniqueGuns } from "@blitzkit/core"; -import { ShadowInnerIcon, ShadowNoneIcon } from "@radix-ui/react-icons"; +import { + Crosshair1Icon, + EnterFullScreenIcon, + ExitFullScreenIcon, + ShadowInnerIcon, + ShadowNoneIcon, + SunIcon, +} from "@radix-ui/react-icons"; import { useState, type RefObject } from "react"; import { DuelModule, useDuel } from "../../hooks/useDuel"; import { useEquipment } from "../../hooks/useEquipment"; @@ -12,8 +19,13 @@ import { TankopediaPersistent } from "../../stores/tankopediaPersistent"; import { TankopediaDisplay } from "../../stores/tankopediaPersistent/constants"; import type { MaybeSkeletonComponentProps } from "../../types/maybeSkeletonComponentProps"; import { IconButton } from "../IconButton"; +import { ScreenshotButton } from "../ScreenshotButton"; import { SegmentedControl } from "../SegmentedControl"; import styles from "./index.module.css"; +import { Dialog, Tabs } from "radix-ui"; +import { Button } from "../Button"; +import { SmallTankIcon } from "../SmallTankIcon"; +import { TankSearch } from "../TankSearch"; type OptionsProps = MaybeSkeletonComponentProps & { canvas: RefObject; @@ -230,11 +242,7 @@ export function TankopediaOptions({ canvas, skeleton }: OptionsProps) { {strings.website.common.tank_search.select_dialog_title} - + { diff --git a/packages/website/src/components/TankopediaSandbox/index.module.css b/packages/website/src/components/TankopediaSandbox/index.module.css index dfa8ee09f..69903f43d 100644 --- a/packages/website/src/components/TankopediaSandbox/index.module.css +++ b/packages/website/src/components/TankopediaSandbox/index.module.css @@ -1,4 +1,6 @@ .wrapper { + background-color: black; + height: calc(100dvh - 16rem); position: relative; diff --git a/packages/website/src/components/TankopediaSandbox/index.tsx b/packages/website/src/components/TankopediaSandbox/index.tsx index 281141c20..4e95bfa93 100644 --- a/packages/website/src/components/TankopediaSandbox/index.tsx +++ b/packages/website/src/components/TankopediaSandbox/index.tsx @@ -23,7 +23,6 @@ import { SmartCanvas } from "../SmartCanvas"; import { StaticArmor, type ThicknessRange } from "../StaticArmor"; import { TankModel } from "../TankModel"; import { TankopediaAntagonistControl } from "../TankopediaAntagonistControl"; -import { TankopediaOptions } from "../TankopediaOptions"; import { TankopediaSkinSwitcher } from "../TankopediaSkinSwitcher"; import styles from "./index.module.css"; @@ -113,8 +112,6 @@ export function TankopediaSandbox({ function handleTransitionEvent(event: QuicklimeEvent) { if (!wrapper.current) return; - - wrapper.current.style.backgroundColor = `rgba(0, 0, 0, ${1 - event.data})`; } poseEvent.on(handlePoseEvent); @@ -179,7 +176,7 @@ export function TankopediaSandbox({ - + {/* */} ); } diff --git a/packages/website/src/components/TankopediaSkinSwitcher/index.tsx b/packages/website/src/components/TankopediaSkinSwitcher/index.tsx index c247e54de..a9a3f983c 100644 --- a/packages/website/src/components/TankopediaSkinSwitcher/index.tsx +++ b/packages/website/src/components/TankopediaSkinSwitcher/index.tsx @@ -19,7 +19,7 @@ export function TankopediaSkinSwitcher() { const skin = Tankopedia.use((state) => state.requestedSkin); const requestedDisplay = Tankopedia.use((state) => state.requestedDisplay); - const disturbed = Tankopedia.use((state) => state.disturbed); + const revealed = Tankopedia.use((state) => state.revealed); const skins = uniqBy( Object.values(camouflageDefinitions.camouflages).filter( @@ -33,7 +33,7 @@ export function TankopediaSkinSwitcher() { return (
{skins.map((camouflage) => { const name = unwrap(camouflage.name!).replace(