From 2b5ffb2b84d547220ea427ff6eb9797de4270a05 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com> Date: Sun, 22 Sep 2024 21:27:46 -0500 Subject: [PATCH] feat: armor modes 2 --- .../Armor/components/ArmorPlateDisplay.tsx | 2 +- .../Armor/components/PrimaryArmorScene.tsx | 11 ++++------ .../Armor/components/ShotDisplay.tsx | 8 ++++---- .../Armor/components/ShotDisplayCard.tsx | 12 ++++++++++- .../Armor/components/SpacedArmorScene.tsx | 11 ++++------ .../Options/components/Thicknesses.tsx | 5 ----- .../HeroSection/components/Options/index.tsx | 5 ++++- .../components/TankSandbox/index.tsx | 5 ++++- .../Tankopedia/HeroSection/index.tsx | 20 ++++--------------- .../MetaSection/components/Votes/index.tsx | 14 ++++++------- .../Tankopedia/MetaSection/index.tsx | 19 +++++++++--------- .../core/zustand/createContextualStore.tsx | 2 +- 12 files changed, 52 insertions(+), 62 deletions(-) diff --git a/packages/website/src/components/Armor/components/ArmorPlateDisplay.tsx b/packages/website/src/components/Armor/components/ArmorPlateDisplay.tsx index 029278723..47e152e0b 100644 --- a/packages/website/src/components/Armor/components/ArmorPlateDisplay.tsx +++ b/packages/website/src/components/Armor/components/ArmorPlateDisplay.tsx @@ -22,7 +22,7 @@ export function ArmorPlateDisplay() { (state) => state.highlightArmor, ); const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation(); - const developerMode = App.useDeferred(false, (state) => state.developerMode); + const developerMode = App.useDeferred((state) => state.developerMode, false); const duelStore = Duel.useStore(); const input = useRef(null); const tankopediaEphemeralStore = TankopediaEphemeral.useStore(); diff --git a/packages/website/src/components/Armor/components/PrimaryArmorScene.tsx b/packages/website/src/components/Armor/components/PrimaryArmorScene.tsx index 4e7acaf9c..21fb08234 100644 --- a/packages/website/src/components/Armor/components/PrimaryArmorScene.tsx +++ b/packages/website/src/components/Armor/components/PrimaryArmorScene.tsx @@ -87,8 +87,8 @@ export const PrimaryArmorScene = memo(() => { return null; return ( - - + + { return null; return ( - - + + - {/* {[...shot.in.layers, ...(shot.out?.layers ?? [])].map((layer, index) => { + {[...shot.in.layers, ...(shot.out?.layers ?? [])].map((layer, index) => { if (layer.type === null) return null; const shotStatusColor = @@ -276,7 +276,7 @@ export function ShotDisplay() { /> - )} */} + )} ); } diff --git a/packages/website/src/components/Armor/components/ShotDisplayCard.tsx b/packages/website/src/components/Armor/components/ShotDisplayCard.tsx index 50bb50ea3..ad5214ffa 100644 --- a/packages/website/src/components/Armor/components/ShotDisplayCard.tsx +++ b/packages/website/src/components/Armor/components/ShotDisplayCard.tsx @@ -1,9 +1,19 @@ -import { Flex, Text } from '@radix-ui/themes'; +import { + Card, + Flex, + Inset, + Separator, + Text, + type CardProps, +} from '@radix-ui/themes'; import type { ComponentProps } from 'react'; +import { radToDeg } from 'three/src/math/MathUtils.js'; import type { + Shot, ShotLayer, ShotStatus, } from '../../../stores/tankopediaEphemeral'; +import { shotStatusColors } from './ShotDisplay'; import { ArmorType } from './SpacedArmorScene'; import type { ExternalModuleVariant } from './SpacedArmorSceneComponent'; diff --git a/packages/website/src/components/Armor/components/SpacedArmorScene.tsx b/packages/website/src/components/Armor/components/SpacedArmorScene.tsx index 8e354c36a..ce2b3600f 100644 --- a/packages/website/src/components/Armor/components/SpacedArmorScene.tsx +++ b/packages/website/src/components/Armor/components/SpacedArmorScene.tsx @@ -123,8 +123,8 @@ export const SpacedArmorScene = memo(({ scene }) => { return null; return ( - - + + (({ scene }) => { return null; return ( - - + + state.showPrimaryArmor, ); - const mutateDuel = Duel.useMutation(); const mutateTankopediaPersistent = TankopediaPersistent.useMutation(); const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation(); const editStatic = TankopediaEphemeral.use((state) => state.editStatic); - const protagonistTank = Duel.use((state) => state.protagonist.tank); const tankopediaEphemeralStore = TankopediaEphemeral.useStore(); - const { hasDynamicArmor } = useArmor(protagonistTank.id); return ( state.display); + const display = TankopediaPersistent.useDeferred( + (state) => state.display, + TankopediaDisplay.Model, + ); const isFullScreen = useFullScreen(); const showGrid = TankopediaPersistent.use((state) => state.showGrid); const showEnvironment = TankopediaPersistent.use( diff --git a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/index.tsx b/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/index.tsx index 9d8253d4b..a536fcefb 100644 --- a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/index.tsx +++ b/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/index.tsx @@ -45,7 +45,10 @@ export const TankSandbox = forwardRef( const turretModelDefinition = tankModelDefinition.turrets[protagonist.turret.id]; const gunModelDefinition = turretModelDefinition.guns[protagonist.gun.id]; - const display = TankopediaPersistent.use((state) => state.display); + const display = TankopediaPersistent.useDeferred( + (state) => state.display, + TankopediaDisplay.Model, + ); const onScreen = useOnScreen(canvas); useImperativeHandle(ref, () => canvas.current!, []); diff --git a/packages/website/src/components/Tankopedia/HeroSection/index.tsx b/packages/website/src/components/Tankopedia/HeroSection/index.tsx index c7df95417..07e9de503 100644 --- a/packages/website/src/components/Tankopedia/HeroSection/index.tsx +++ b/packages/website/src/components/Tankopedia/HeroSection/index.tsx @@ -1,6 +1,6 @@ import { resolveNearPenetration, tankDefinitions } from '@blitzkit/core'; import { Box, Flex, Heading, Text } from '@radix-ui/themes'; -import { Suspense, useEffect, useMemo, useRef, useState } from 'react'; +import { Suspense, useEffect, useMemo, useRef } from 'react'; import { NAVBAR_HEIGHT } from '../../../constants/navbar'; import { Var } from '../../../core/radix/var'; import { useFullScreen } from '../../../hooks/useFullScreen'; @@ -18,7 +18,7 @@ export function HeroSection() { const isFullScreen = useFullScreen(); const protagonist = Duel.use((state) => state.protagonist.tank); const Icon = classIcons[protagonist.class]; - const [dummyLoader, setDummyLoader] = useState(true); + // const [dummyLoader, setDummyLoader] = useState(true); const treeColor = protagonist.treeType === 'collector' ? 'blue' @@ -46,7 +46,7 @@ export function HeroSection() { }, [protagonist]); useEffect(() => { - setDummyLoader(false); + // setDummyLoader(false); }, []); return ( @@ -109,19 +109,7 @@ export function HeroSection() { > - - - - } - > + }> diff --git a/packages/website/src/components/Tankopedia/MetaSection/components/Votes/index.tsx b/packages/website/src/components/Tankopedia/MetaSection/components/Votes/index.tsx index a79806b4a..4d0eb840d 100644 --- a/packages/website/src/components/Tankopedia/MetaSection/components/Votes/index.tsx +++ b/packages/website/src/components/Tankopedia/MetaSection/components/Votes/index.tsx @@ -1,10 +1,11 @@ import { formatCompact } from '@blitzkit/core'; +import { useStore } from '@nanostores/react'; import { Flex, Heading, Skeleton, Text } from '@radix-ui/themes'; import { memo } from 'react'; -import { WargamingLoginButton } from '../../../../../../../../../components/Navbar/components/WargamingLoginButton'; -import { useTankVotes } from '../../../../../../../../../hooks/useTankVotes'; -import * as App from '../../../../../../../../../stores/app'; -import * as Duel from '../../../../../../../../../stores/duel'; +import { useTankVotes } from '../../../../../hooks/useTankVotes'; +import { Duel } from '../../../../../stores/duel'; +import { $wargamingLogin } from '../../../../../stores/wargamingLogin'; +import { WargamingLoginButton } from '../../../../WargamingLoginButton'; import { StarRow } from './components/StarRow'; import { VoteCaster } from './components/VoteCaster'; @@ -12,10 +13,7 @@ export const Votes = memo( () => { const id = Duel.use((state) => state.protagonist.tank.id); const votes = useTankVotes(id); - const wargaming = App.useDeferred( - undefined, - (state) => state.logins.wargaming, - ); + const wargaming = useStore($wargamingLogin); return ( diff --git a/packages/website/src/components/Tankopedia/MetaSection/index.tsx b/packages/website/src/components/Tankopedia/MetaSection/index.tsx index 9693d1e91..c6e5bf5a7 100644 --- a/packages/website/src/components/Tankopedia/MetaSection/index.tsx +++ b/packages/website/src/components/Tankopedia/MetaSection/index.tsx @@ -6,23 +6,22 @@ import { } from '@blitzkit/core'; import strings from '@blitzkit/core/lang/en-US.json'; import { ChevronLeftIcon, MixIcon, UpdateIcon } from '@radix-ui/react-icons'; -import { Button, Code, Dialog, Flex } from '@radix-ui/themes'; +import { Button, Code, Dialog, Flex, Link } from '@radix-ui/themes'; import { useState } from 'react'; -import { classIcons } from '../../../../../../../components/ClassIcon'; -import { Link } from '../../../../../../../components/Link'; -import { ScienceIcon } from '../../../../../../../components/ScienceIcon'; -import { tankToDuelMember } from '../../../../../../../core/blitzkit/tankToDuelMember'; -import * as App from '../../../../../../../stores/app'; -import * as Duel from '../../../../../../../stores/duel'; -import * as TankopediaEphemeral from '../../../../../../../stores/tankopediaEphemeral'; -import { TankSearch } from '../../../../components/TankSearch'; +import { tankToDuelMember } from '../../../core/blitzkit/tankToDuelMember'; +import { App } from '../../../stores/app'; +import { Duel } from '../../../stores/duel'; +import { TankopediaEphemeral } from '../../../stores/tankopediaEphemeral'; +import { classIcons } from '../../ClassIcon'; +import { ScienceIcon } from '../../ScienceIcon'; +import { TankSearch } from '../../TankSearch'; import { Listing } from './components/Listing'; const awaitedProvisionDefinitions = await provisionDefinitions; const awaitedModelDefinitions = await modelDefinitions; export function MetaSection() { - const developerMode = App.useDeferred(false, (state) => state.developerMode); + const developerMode = App.useDeferred((state) => state.developerMode, false); const protagonist = Duel.use((state) => state.protagonist.tank); const ClassIcon = classIcons[protagonist.class]; const antagonist = Duel.use((state) => state.antagonist.tank); diff --git a/packages/website/src/core/zustand/createContextualStore.tsx b/packages/website/src/core/zustand/createContextualStore.tsx index ba5324990..129ace215 100644 --- a/packages/website/src/core/zustand/createContextualStore.tsx +++ b/packages/website/src/core/zustand/createContextualStore.tsx @@ -58,8 +58,8 @@ export function createContextualStore< } function useDeferred( - initial: Slice, selector: (store: Type) => Slice = (state) => state as Slice, + initial: Slice, ) { const [state, setState] = useState(initial); const trueState = use(selector);