diff --git a/.vscode/settings.json b/.vscode/settings.json index 0ca7d3e4e..eed8bbe76 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -37,6 +37,7 @@ "fullstats", "fuzzysort", "gamemode", + "glsl", "GLTF", "immer", "JOINTINDEX", diff --git a/src/app/tools/tankopedia/[id]/components/Model/TankDisplay.tsx b/src/app/tools/tankopedia/[id]/components/Model/TankDisplay.tsx index 73183d7de..d9d8e5076 100644 --- a/src/app/tools/tankopedia/[id]/components/Model/TankDisplay.tsx +++ b/src/app/tools/tankopedia/[id]/components/Model/TankDisplay.tsx @@ -1,9 +1,16 @@ import { EnterFullScreenIcon, ExitFullScreenIcon, - FrameIcon, + GearIcon, } from '@radix-ui/react-icons'; -import { Button, Card, Flex, Tabs, Theme } from '@radix-ui/themes'; +import { + Button, + Card, + DropdownMenu, + Flex, + Tabs, + Theme, +} from '@radix-ui/themes'; import { Html } from '@react-three/drei'; import { Canvas } from '@react-three/fiber'; import { Suspense, use, useEffect, useRef, useState } from 'react'; @@ -29,6 +36,7 @@ export function TankDisplay() { const [isFullScreen, setIsFullScreen] = useState(false); const mode = useTankopedia((state) => state.mode); const showGrid = useTankopedia((state) => state.model.showGrid); + const opaqueArmor = useTankopedia((state) => state.model.opaqueArmor); const protagonist = useTankopedia((state) => { if (!state.areTanksAssigned) return; return state.protagonist; @@ -147,17 +155,37 @@ export function TankDisplay() { right: 18, }} > - + + + + + + + { + mutateTankopedia((draft) => { + draft.model.showGrid = checked; + }); + }} + > + Show grid + + + { + mutateTankopedia((draft) => { + draft.model.opaqueArmor = checked; + }); + }} + > + Opaque armor + + +