From a54ba78dbf39c2db2886cdfecb94eb641ba4bbe1 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 22:04:03 -0500 Subject: [PATCH] feat: complete tankoepdia page --- .../src/blitzkit/averageDefinitions/index.ts | 2 +- packages/core/src/blitzkit/index.ts | 20 +- .../core/src/protobuf/lookupProtobufType.ts | 4 +- .../[id]/components/Characteristics/index.tsx | 27 +- .../tankopedia/[id]/components/Content.tsx | 2 +- .../src/app/tools/tankopedia/[id]/page.tsx | 2 +- packages/website-legacy/tsconfig.json | 2 +- .../src/components/ConsumablesManager.tsx | 2 +- .../src/components/EquipmentManager.tsx | 4 +- .../ModuleButtons/ConsumableButton.tsx | 7 +- .../ModuleButtons/EquipmentButton.tsx | 2 +- .../ModuleButtons/ProvisionButton.tsx | 2 +- .../components/Tankopedia/CalloutsSection.tsx | 4 +- .../Characteristics/components/Info.tsx | 14 +- .../components/InfoWithDelta.tsx | 4 +- .../components/Characteristics/index.tsx | 632 ++++++++++++++++++ .../components/ConfigurationChildWrapper.tsx | 4 +- .../components/Consumables.tsx | 17 +- .../components/Equipment.tsx | 8 +- .../components/Miscellaneous.tsx | 4 +- .../components/Modules.tsx | 40 +- .../components/Provisions.tsx | 8 +- .../components/Skills.tsx} | 10 +- .../index.tsx} | 14 +- .../components/Tankopedia/GameModeSection.tsx | 2 +- .../components/Tankopedia/HistorySection.tsx | 4 +- .../MetaSection/components/Listing.tsx | 2 +- .../MetaSection/components/Stars/index.tsx | 4 +- .../Tankopedia/MetaSection/index.tsx | 2 +- .../Tankopedia/ShotDisplaySection.tsx | 6 +- .../TechTreeSection/components/Node.tsx | 5 +- .../Tankopedia/TechTreeSection/index.tsx | 5 +- .../components/Tankopedia}/VideoSection.tsx | 15 +- .../src/core/blitzkit/tankCharacteristics.ts | 22 +- packages/website/src/hooks/useAdExempt.ts | 4 +- .../src/hooks/useFullscreenAvailability.ts | 4 +- packages/website/src/hooks/useIntersection.ts | 4 +- .../src/pages/tools/tankopedia/[id]/index.tsx | 30 +- .../src/stores/embedState/utilities.ts | 7 +- 39 files changed, 790 insertions(+), 161 deletions(-) rename packages/{website-legacy/src/app/tools/tankopedia/[id] => website/src/components/Tankopedia/CharacteristicsSection}/components/Characteristics/components/Info.tsx (87%) rename packages/{website-legacy/src/app/tools/tankopedia/[id] => website/src/components/Tankopedia/CharacteristicsSection}/components/Characteristics/components/InfoWithDelta.tsx (71%) create mode 100644 packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/index.tsx rename packages/{website-legacy/src/app/tools/tankopedia/[id]/components/Characteristics => website/src/components/Tankopedia/CharacteristicsSection}/components/ConfigurationChildWrapper.tsx (78%) rename packages/{website-legacy/src/app/tools/tankopedia/[id]/components/Characteristics => website/src/components/Tankopedia/CharacteristicsSection}/components/Consumables.tsx (82%) rename packages/{website-legacy/src/app/tools/tankopedia/[id]/components/Characteristics => website/src/components/Tankopedia/CharacteristicsSection}/components/Equipment.tsx (84%) rename packages/{website-legacy/src/app/tools/tankopedia/[id]/components/Characteristics => website/src/components/Tankopedia/CharacteristicsSection}/components/Miscellaneous.tsx (95%) rename packages/{website-legacy/src/app/tools/tankopedia/[id]/components/Characteristics => website/src/components/Tankopedia/CharacteristicsSection}/components/Modules.tsx (93%) rename packages/{website-legacy/src/app/tools/tankopedia/[id]/components/Characteristics => website/src/components/Tankopedia/CharacteristicsSection}/components/Provisions.tsx (84%) rename packages/{website-legacy/src/app/tools/tankopedia/[id]/components/Characteristics/components/Skills/index.tsx => website/src/components/Tankopedia/CharacteristicsSection/components/Skills.tsx} (87%) rename packages/website/src/components/Tankopedia/{CharacteristicsSection.tsx => CharacteristicsSection/index.tsx} (53%) rename packages/{website-legacy/src/app/tools/tankopedia/[id]/components => website/src/components/Tankopedia}/VideoSection.tsx (88%) diff --git a/packages/core/src/blitzkit/averageDefinitions/index.ts b/packages/core/src/blitzkit/averageDefinitions/index.ts index 825d49570..f93b03626 100644 --- a/packages/core/src/blitzkit/averageDefinitions/index.ts +++ b/packages/core/src/blitzkit/averageDefinitions/index.ts @@ -65,7 +65,7 @@ export const averageDefinitionsArray = averageDefinitions.then((data) => ({ id: Number(key), ...(value as AverageDefinitionsEntry), - } satisfies AverageDefinitionsEntryWithId), + }) satisfies AverageDefinitionsEntryWithId, ) .filter((tank) => tank.mu.battles > 0), ); diff --git a/packages/core/src/blitzkit/index.ts b/packages/core/src/blitzkit/index.ts index b0a422e32..964421f42 100644 --- a/packages/core/src/blitzkit/index.ts +++ b/packages/core/src/blitzkit/index.ts @@ -1,14 +1,14 @@ export * from './assertSecret'; export * from './asset'; export * from './availableProvisions'; -// export * from './averageDefinitions'; +export * from './averageDefinitions'; // export * from './camouflageDefinitions'; // export * from './checkConsumableProvisionInclusivity'; -// export * from './coefficient'; -// export * from './consumableDefinitions'; +export * from './coefficient'; +export * from './consumableDefinitions'; // export * from './context'; -// export * from './createDefaultSkills'; -// export * from './degressiveStat'; +export * from './createDefaultSkills'; +export * from './degressiveStat'; // export * from './discoveredIdDefinitions'; // export * from './emblemURL'; export * from './equipmentDefinitions'; @@ -29,13 +29,13 @@ export * from './normalizeBoundingBox'; // export * from './parseBkni'; // export * from './patientFetch'; // export * from './patientFetchJSON'; -// export * from './progressiveStat'; +export * from './progressiveStat'; export * from './provisionDefinitions'; export * from './resolveDpm'; export * from './resolvePenetrationCoefficient'; -// export * from './reviews'; +export * from './reviews'; export * from './skillDefinitions'; -// export * from './sum'; +export * from './sum'; export * from './superCompress'; export * from './superDecompress'; export * from './tankDefinitions'; @@ -44,6 +44,6 @@ export * from './tankNames'; export * from './unionBoundingBox'; export * from './uniqueGuns'; // export * from './unwrapBlitzkitResponse'; -// export * from './votes'; +export * from './votes'; // export * from './withCORSProxy'; -// export * from './youtubers'; +export * from './youtubers'; diff --git a/packages/core/src/protobuf/lookupProtobufType.ts b/packages/core/src/protobuf/lookupProtobufType.ts index 9c76f2676..11008572e 100644 --- a/packages/core/src/protobuf/lookupProtobufType.ts +++ b/packages/core/src/protobuf/lookupProtobufType.ts @@ -1,6 +1,6 @@ import protobuf from 'protobufjs'; -import average_definitions from '../../protos/average_definitions.proto'; -import reviews from '../../protos/reviews.proto'; +import average_definitions from '../../protos/average_definitions.proto?raw'; +import reviews from '../../protos/reviews.proto?raw'; export type ProtoSource = keyof typeof protos; diff --git a/packages/website-legacy/src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx b/packages/website-legacy/src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx index f550af9ab..43cb5d671 100644 --- a/packages/website-legacy/src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx +++ b/packages/website-legacy/src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx @@ -20,24 +20,23 @@ import { Tooltip, } from '@radix-ui/themes'; import { debounce } from 'lodash-es'; -import { Fragment, use, useEffect, useRef, useState } from 'react'; -import { lerp } from 'three/src/math/MathUtils'; -import { Ad, AdType } from '../../../../../../components/Ad'; -import { applyPitchYawLimits } from '../../../../../../core/blitz/applyPitchYawLimits'; -import { tankCharacteristics } from '../../../../../../core/blitzkit/tankCharacteristics'; -import { useAdExempt } from '../../../../../../hooks/useAdExempt'; -import { useEquipment } from '../../../../../../hooks/useEquipment'; -import { useTankModelDefinition } from '../../../../../../hooks/useTankModelDefinition'; -import * as Duel from '../../../../../../stores/duel'; -import * as TankopediaEphemeral from '../../../../../../stores/tankopediaEphemeral'; -import { Info } from './components/Info'; -import { InfoWithDelta } from './components/InfoWithDelta'; +import { Fragment, useEffect, useRef, useState } from 'react'; +import { Ad, AdType } from '../../../../../../../../website/src/components/Ad'; +import { InfoWithDelta } from '../../../../../../../../website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/InfoWithDelta'; +import { applyPitchYawLimits } from '../../../../../../../../website/src/core/blitz/applyPitchYawLimits'; +import { useAdExempt } from '../../../../../../../../website/src/hooks/useAdExempt'; +import { useEquipment } from '../../../../../../../../website/src/hooks/useEquipment'; +import { useTankModelDefinition } from '../../../../../../../../website/src/hooks/useTankModelDefinition'; +import { Duel } from '../../../../../../../../website/src/stores/duel'; +import { TankopediaEphemeral } from '../../../../../../../../website/src/stores/tankopediaEphemeral'; +import { Info } from '../../../../performance/components/Info'; + +const awaitedEquipmentDefinitions = await equipmentDefinitions; +const awaitedProvisionDefinitions = await provisionDefinitions; export function Characteristics() { const mutateDuel = Duel.useMutation(); const exempt = useAdExempt(); - const awaitedEquipmentDefinitions = use(equipmentDefinitions); - const awaitedProvisionDefinitions = use(provisionDefinitions); const crewSkills = TankopediaEphemeral.use((state) => state.skills); const penetrationDistanceInput = useRef(null); const hasImprovedVentilation = useEquipment(102); diff --git a/packages/website-legacy/src/app/tools/tankopedia/[id]/components/Content.tsx b/packages/website-legacy/src/app/tools/tankopedia/[id]/components/Content.tsx index 157038b61..479b32a1b 100644 --- a/packages/website-legacy/src/app/tools/tankopedia/[id]/components/Content.tsx +++ b/packages/website-legacy/src/app/tools/tankopedia/[id]/components/Content.tsx @@ -15,7 +15,7 @@ import { PageWrapper } from '../../../../../components/PageWrapper'; import { useAdExempt } from '../../../../../hooks/useAdExempt'; import * as Duel from '../../../../../stores/duel'; import * as TankopediaEphemeral from '../../../../../stores/tankopediaEphemeral'; -import { VideoSection } from './VideoSection'; +import { VideoSection } from '../../../../../../../website/src/components/Tankopedia/VideoSection'; export function Content() { const exempt = useAdExempt(); diff --git a/packages/website-legacy/src/app/tools/tankopedia/[id]/page.tsx b/packages/website-legacy/src/app/tools/tankopedia/[id]/page.tsx index ca2022b26..53f7d1735 100644 --- a/packages/website-legacy/src/app/tools/tankopedia/[id]/page.tsx +++ b/packages/website-legacy/src/app/tools/tankopedia/[id]/page.tsx @@ -15,7 +15,7 @@ import { PageWrapper } from '../../../../components/PageWrapper'; import { useAdExempt } from '../../../../hooks/useAdExempt'; import * as Duel from '../../../../stores/duel'; import * as TankopediaEphemeral from '../../../../stores/tankopediaEphemeral'; -import { VideoSection } from './components/VideoSection'; +import { VideoSection } from '../../../../../../website/src/components/Tankopedia/VideoSection'; export default function Page() { const exempt = useAdExempt(); diff --git a/packages/website-legacy/tsconfig.json b/packages/website-legacy/tsconfig.json index 682146c89..7daa61dbc 100644 --- a/packages/website-legacy/tsconfig.json +++ b/packages/website-legacy/tsconfig.json @@ -18,5 +18,5 @@ "../website/src/components/Tankopedia/HistorySection.tsx", "../website/src/components/Tankopedia/CalloutsSection.tsx", "../website/src/components/Tankopedia/ShotDisplaySection.tsx" - ] +, "../website/src/components/Tankopedia/CharacteristicsSection/components/ConfigurationChildWrapper.tsx", "../website/src/components/Tankopedia/VideoSection.tsx" ] } diff --git a/packages/website/src/components/ConsumablesManager.tsx b/packages/website/src/components/ConsumablesManager.tsx index e10b8ba20..84a65db92 100644 --- a/packages/website/src/components/ConsumablesManager.tsx +++ b/packages/website/src/components/ConsumablesManager.tsx @@ -1,4 +1,4 @@ -import { ConsumableEntry } from '@blitzkit/core'; +import type { ConsumableEntry } from '@blitzkit/core/src/blitzkit/consumableDefinitions'; import { Flex, type FlexProps } from '@radix-ui/themes'; import { ConsumableButton } from './ModuleButtons/ConsumableButton'; diff --git a/packages/website/src/components/EquipmentManager.tsx b/packages/website/src/components/EquipmentManager.tsx index ff3ef35c0..643af0c2a 100644 --- a/packages/website/src/components/EquipmentManager.tsx +++ b/packages/website/src/components/EquipmentManager.tsx @@ -1,7 +1,7 @@ -import { EquipmentPreset } from '@blitzkit/core'; +import type { EquipmentPreset } from '@blitzkit/core'; import { Flex } from '@radix-ui/themes'; import { cloneDeep } from 'lodash-es'; -import { EquipmentMatrix } from '../../../website-legacy/src/stores/duel'; +import type { EquipmentMatrix } from '../stores/duel'; import { EquipmentButton } from './ModuleButtons/EquipmentButton'; interface EquipmentManagerProps { diff --git a/packages/website/src/components/ModuleButtons/ConsumableButton.tsx b/packages/website/src/components/ModuleButtons/ConsumableButton.tsx index 29ec4fdb3..4dcbcaf9e 100644 --- a/packages/website/src/components/ModuleButtons/ConsumableButton.tsx +++ b/packages/website/src/components/ModuleButtons/ConsumableButton.tsx @@ -1,9 +1,10 @@ -import { asset, consumableDefinitions } from '@blitzkit/core'; +import { asset } from '@blitzkit/core'; +import { consumableDefinitions } from '@blitzkit/core/src/blitzkit/consumableDefinitions'; import { ClockIcon, ReloadIcon } from '@radix-ui/react-icons'; import { Flex, Text } from '@radix-ui/themes'; -import { useDelta } from '../../../../website-legacy/src/hooks/useDelta'; +import { useDelta } from '../../hooks/useDelta'; import { GenericTankComponentButton } from './GenericTankComponentButton'; -import { TankComponentButtonProps } from './TankComponentButton'; +import type { TankComponentButtonProps } from './TankComponentButton'; interface ConsumableButtonProps extends TankComponentButtonProps { consumable: number; diff --git a/packages/website/src/components/ModuleButtons/EquipmentButton.tsx b/packages/website/src/components/ModuleButtons/EquipmentButton.tsx index 65709ae10..6ce116226 100644 --- a/packages/website/src/components/ModuleButtons/EquipmentButton.tsx +++ b/packages/website/src/components/ModuleButtons/EquipmentButton.tsx @@ -1,6 +1,6 @@ import { asset, equipmentDefinitions } from '@blitzkit/core'; import { GenericTankComponentButton } from './GenericTankComponentButton'; -import { TankComponentButtonProps } from './TankComponentButton'; +import type { TankComponentButtonProps } from './TankComponentButton'; interface EquipmentButtonProps extends TankComponentButtonProps { equipment: number; diff --git a/packages/website/src/components/ModuleButtons/ProvisionButton.tsx b/packages/website/src/components/ModuleButtons/ProvisionButton.tsx index 44cb62d04..84514dd77 100644 --- a/packages/website/src/components/ModuleButtons/ProvisionButton.tsx +++ b/packages/website/src/components/ModuleButtons/ProvisionButton.tsx @@ -1,6 +1,6 @@ import { asset, provisionDefinitions } from '@blitzkit/core'; import { GenericTankComponentButton } from './GenericTankComponentButton'; -import { TankComponentButtonProps } from './TankComponentButton'; +import type { TankComponentButtonProps } from './TankComponentButton'; interface ProvisionButtonProps extends TankComponentButtonProps { provision: number; diff --git a/packages/website/src/components/Tankopedia/CalloutsSection.tsx b/packages/website/src/components/Tankopedia/CalloutsSection.tsx index 554bdfa37..78aac456a 100644 --- a/packages/website/src/components/Tankopedia/CalloutsSection.tsx +++ b/packages/website/src/components/Tankopedia/CalloutsSection.tsx @@ -1,7 +1,7 @@ import { MinusCircledIcon } from '@radix-ui/react-icons'; import { Callout, Flex } from '@radix-ui/themes'; -import { ExperimentIcon } from '../../../../../components/ExperimentIcon'; -import * as Duel from '../../../../../stores/duel'; +import { Duel } from '../../stores/duel'; +import { ExperimentIcon } from '../ExperimentIcon'; export function CalloutsSection() { const tank = Duel.use((state) => state.protagonist.tank); diff --git a/packages/website-legacy/src/app/tools/tankopedia/[id]/components/Characteristics/components/Info.tsx b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/Info.tsx similarity index 87% rename from packages/website-legacy/src/app/tools/tankopedia/[id]/components/Characteristics/components/Info.tsx rename to packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/Info.tsx index 82a1c767a..93772e116 100644 --- a/packages/website-legacy/src/app/tools/tankopedia/[id]/components/Characteristics/components/Info.tsx +++ b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/Info.tsx @@ -1,6 +1,6 @@ import { CaretDownIcon, CaretUpIcon } from '@radix-ui/react-icons'; -import { Flex, Text } from '@radix-ui/themes'; -import { ReactNode } from 'react'; +import { Flex, Separator, Text } from '@radix-ui/themes'; +import type { ReactNode } from 'react'; export interface InfoProps { name: ReactNode; @@ -41,15 +41,7 @@ export function Info({ )} - {children !== undefined && ( -
- )} + {children !== undefined && } {children !== undefined && ( diff --git a/packages/website-legacy/src/app/tools/tankopedia/[id]/components/Characteristics/components/InfoWithDelta.tsx b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/InfoWithDelta.tsx similarity index 71% rename from packages/website-legacy/src/app/tools/tankopedia/[id]/components/Characteristics/components/InfoWithDelta.tsx rename to packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/InfoWithDelta.tsx index 9ac8fe560..975720b1a 100644 --- a/packages/website-legacy/src/app/tools/tankopedia/[id]/components/Characteristics/components/InfoWithDelta.tsx +++ b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/InfoWithDelta.tsx @@ -1,5 +1,5 @@ -import { useDelta } from '../../../../../../../hooks/useDelta'; -import { Info, InfoProps } from './Info'; +import { useDelta } from '../../../../../../hooks/useDelta'; +import { type InfoProps, Info } from './Info'; interface InfoWithDeltaProps extends InfoProps { children: number; diff --git a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/index.tsx b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/index.tsx new file mode 100644 index 000000000..4211971f0 --- /dev/null +++ b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/index.tsx @@ -0,0 +1,632 @@ +import { + asset, + coefficient, + CREW_MEMBER_NAMES, + equipmentDefinitions, + GUN_TYPE_NAMES, + isExplosive, + provisionDefinitions, + resolvePenetrationCoefficient, +} from '@blitzkit/core'; +import { AccessibilityIcon, InfoCircledIcon } from '@radix-ui/react-icons'; +import { + Flex, + Heading, + IconButton, + Popover, + Slider, + Text, + TextField, + Tooltip, +} from '@radix-ui/themes'; +import { debounce } from 'lodash-es'; +import { useEffect, useRef, useState } from 'react'; +import { Fragment } from 'react/jsx-runtime'; +import { lerp } from 'three/src/math/MathUtils.js'; +import { applyPitchYawLimits } from '../../../../../core/blitz/applyPitchYawLimits'; +import { tankCharacteristics } from '../../../../../core/blitzkit/tankCharacteristics'; +import { useAdExempt } from '../../../../../hooks/useAdExempt'; +import { useEquipment } from '../../../../../hooks/useEquipment'; +import { useTankModelDefinition } from '../../../../../hooks/useTankModelDefinition'; +import { Duel } from '../../../../../stores/duel'; +import { TankopediaEphemeral } from '../../../../../stores/tankopediaEphemeral'; +import { Ad, AdType } from '../../../../Ad'; +import { Info } from './components/Info'; +import { InfoWithDelta } from './components/InfoWithDelta'; + +const awaitedEquipmentDefinitions = await equipmentDefinitions; +const awaitedProvisionDefinitions = await provisionDefinitions; + +export function Characteristics() { + const mutateDuel = Duel.useMutation(); + const exempt = useAdExempt(); + const crewSkills = TankopediaEphemeral.use((state) => state.skills); + const penetrationDistanceInput = useRef(null); + const hasImprovedVentilation = useEquipment(102); + const crewMastery = Duel.use((state) => state.protagonist.crewMastery); + const [penetrationDistance, setPenetrationDistance] = useState(250); + const setPenetrationDistanceDebounced = debounce((value: number) => { + setPenetrationDistance(value); + }, 500); + + const provisions = Duel.use((state) => state.protagonist.provisions); + const provisionCrewBonus = + provisions.reduce( + (total, provision) => + awaitedProvisionDefinitions[provision].crew + ? total + awaitedProvisionDefinitions[provision].crew! / 100 + : total, + 0, + ) + (hasImprovedVentilation ? 0.08 : 0); + const commanderMastery = crewMastery + provisionCrewBonus; + const consumables = Duel.use((state) => state.protagonist.consumables); + const camouflage = Duel.use((state) => state.protagonist.camouflage); + const equipmentMatrix = Duel.use( + (state) => state.protagonist.equipmentMatrix, + ); + const { tank, turret, gun, engine, track, shell } = Duel.use( + (state) => state.protagonist, + ); + const stockEngine = tank.engines[0]; + const stockTrack = tank.tracks[0]; + const stockTurret = tank.turrets[0]; + const stockGun = stockTurret.guns[0]; + const tankModelDefinition = useTankModelDefinition(); + const turretModelDefinition = tankModelDefinition.turrets[turret.id]; + const gunModelDefinition = turretModelDefinition.guns[gun.id]; + const stats = tankCharacteristics( + { + tank, + camouflage, + consumables, + crewMastery, + crewSkills, + engine, + equipmentMatrix, + gun, + provisions, + shell, + turret, + track, + stockEngine, + stockGun, + stockTrack, + stockTurret, + applyReactiveArmor: false, + applyDynamicArmor: false, + applySpallLiner: false, + }, + { + tankModelDefinition, + equipmentDefinitions: awaitedEquipmentDefinitions, + provisionDefinitions: awaitedProvisionDefinitions, + }, + ); + + const hasSupercharger = useEquipment(107); + const hasCalibratedShells = useEquipment(103); + const hasImprovedVerticalStabilizer = useEquipment(122); + const penetrationCoefficient = coefficient([ + hasCalibratedShells, + resolvePenetrationCoefficient(true, shell.type) - 1, + ]); + const penetrationLossOverDistanceCoefficient = coefficient([ + hasSupercharger, + -0.6, + ]); + + useEffect(() => { + if (penetrationDistanceInput.current) { + penetrationDistanceInput.current.value = `${penetrationDistance}`; + } + }, [penetrationDistance]); + useEffect(() => { + mutateDuel((draft) => { + [draft.protagonist.pitch, draft.protagonist.yaw] = applyPitchYawLimits( + draft.protagonist.pitch, + draft.protagonist.yaw, + gunModelDefinition.pitch, + turretModelDefinition.yaw, + hasImprovedVerticalStabilizer, + ); + }); + }, [hasImprovedVerticalStabilizer]); + + return ( + + + + + Firepower + + + {gun.shells.map((thisShell, shellIndex) => ( + + { + mutateDuel((draft) => { + draft.protagonist.shell = thisShell; + }); + }} + > + {thisShell.name} + + + ))} + + + {GUN_TYPE_NAMES[gun.type]} + + {stats.dpm} + + {gun.type === 'autoReloader' && ( + + {stats.dpmEffective!} + + )} + {gun.type !== 'regular' && ( + {stats.shells} + )} + {gun.type === 'autoReloader' ? ( + <> + + {stats.mostOptimalShellIndex! + 1} + + + {stats.shellReloads!.map((reload, index) => ( + + {reload} + + ))} + + ) : ( + + {stats.shellReload!} + + )} + {(gun.type === 'autoLoader' || gun.type === 'autoReloader') && ( + + {stats.intraClip!} + + )} + + {stats.penetration} + + {typeof shell.penetration !== 'number' && ( + <> + + {lerp( + shell.penetration[0], + shell.penetration[1], + (penetrationDistance * + penetrationLossOverDistanceCoefficient) / + 500, + ) * penetrationCoefficient} + + + Distance + { + setPenetrationDistanceDebounced(value); + + if (!penetrationDistanceInput.current) return; + + penetrationDistanceInput.current.value = value.toString(); + }} + /> + { + setPenetrationDistance( + Math.min( + parseInt(penetrationDistanceInput.current!.value), + 500, + ), + ); + }} + onKeyDown={(event) => { + if (event.key === 'Enter') { + event.currentTarget.blur(); + } + }} + > + m + + + + )} + + {stats.damage} + + {gun.type !== 'regular' && ( + + {stats.clipDamage!} + + )} + + {stats.moduleDamage} + + {isExplosive(shell.type) && ( + + {stats.explosionRadius!} + + )} + + {stats.caliber} + + + {stats.shellNormalization} + + {!isExplosive(shell.type) && ( + + {stats.shellRicochet!} + + )} + + {stats.shellVelocity} + + + {stats.aimTime} + + + + {stats.dispersion} + + + {stats.dispersionMoving} + + + {stats.dispersionHullTraversing} + + + {stats.dispersionTurretTraversing} + + + {stats.dispersionShooting} + + + {stats.dispersionGunDamaged} + + + {stats.maxDispersion} + + + + {stats.gunDepression} + + + {stats.gunElevation} + + {gunModelDefinition.pitch.front && ( + <> + + {stats.gunFrontalDepression!} + + + {stats.gunFrontalElevation!} + + + )} + {gunModelDefinition.pitch.back && ( + <> + + {stats.gunRearDepression!} + + + {stats.gunRearElevation!} + + + )} + {turretModelDefinition.yaw && ( + <> + + {stats.azimuthLeft!} + + + {stats.azimuthRight!} + + + )} + + + + Crew training + + + + + + + + + + + + + represents the other roles a crew member can take. + + + + + + + {tank.crew.map((member) => { + const count = member.count ?? 1; + + return ( + + 1 ? ` x ${count}` : '' + }`} + unit="%" + decimals={0} + > + {(member.type === 'commander' + ? commanderMastery + : commanderMastery * 1.1) * 100} + + + {member.substitute && ( + + + + {member.substitute + .map((sub, index) => + index === 0 ? CREW_MEMBER_NAMES[sub] : sub, + ) + .join(', ')} + + + } + > + {commanderMastery * 1.05 * 100} + + )} + + ); + })} + + + + {!exempt && ( + + + + )} + + + + Maneuverability + + + {stats.speedForwards} + + + {stats.speedBackwards} + + + {stats.enginePower} + + + {stats.weight} + + + + {stats.hardTerrainCoefficient} + + + {stats.mediumTerrainCoefficient} + + + {stats.softTerrainCoefficient} + + + + {stats.hardTerrainCoefficientRaw} + + + {stats.mediumTerrainCoefficientRaw} + + + {stats.softTerrainCoefficientRaw} + + + + {stats.powerToWeightRatioHardTerrain} + + + {stats.powerToWeightRatioMediumTerrain} + + + {stats.powerToWeightRatioSoftTerrain} + + + {stats.turretTraverseSpeed} + + + + {stats.hullTraverseHardTerrain} + + + {stats.hullTraverseMediumTerrain} + + + {stats.hullTraverseSoftTerrain} + + + + Survivability + + {stats.health} + + + {stats.fireChance * 100} + + + {stats.viewRange} + + + + {stats.camouflageStill * 100} + + + {stats.camouflageMoving * 100} + + + {stats.camouflageShootingStill * 100} + + + {stats.camouflageShootingMoving * 100} + + + {stats.camouflageCaughtOnFire * 100} + + + {stats.width} + + + {stats.height} + + + {stats.length} + + + {stats.volume} + + + + + ); +} diff --git a/packages/website-legacy/src/app/tools/tankopedia/[id]/components/Characteristics/components/ConfigurationChildWrapper.tsx b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/ConfigurationChildWrapper.tsx similarity index 78% rename from packages/website-legacy/src/app/tools/tankopedia/[id]/components/Characteristics/components/ConfigurationChildWrapper.tsx rename to packages/website/src/components/Tankopedia/CharacteristicsSection/components/ConfigurationChildWrapper.tsx index ed5fe5977..ecdee158d 100644 --- a/packages/website-legacy/src/app/tools/tankopedia/[id]/components/Characteristics/components/ConfigurationChildWrapper.tsx +++ b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/ConfigurationChildWrapper.tsx @@ -1,5 +1,5 @@ -import { Flex, FlexProps } from '@radix-ui/themes'; -import { ReactNode } from 'react'; +import { type FlexProps, Flex } from '@radix-ui/themes'; +import type { ReactNode } from 'react'; type ConfigurationChildWrapperProps = FlexProps & { children: ReactNode; diff --git a/packages/website-legacy/src/app/tools/tankopedia/[id]/components/Characteristics/components/Consumables.tsx b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Consumables.tsx similarity index 82% rename from packages/website-legacy/src/app/tools/tankopedia/[id]/components/Characteristics/components/Consumables.tsx rename to packages/website/src/components/Tankopedia/CharacteristicsSection/components/Consumables.tsx index 11f4ebebc..e8979fa6b 100644 --- a/packages/website-legacy/src/app/tools/tankopedia/[id]/components/Characteristics/components/Consumables.tsx +++ b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Consumables.tsx @@ -1,7 +1,6 @@ -import { - checkConsumableProvisionInclusivity, - consumableDefinitions, -} from '@blitzkit/core'; +import {} from '@blitzkit/core'; +import { checkConsumableProvisionInclusivity } from '@blitzkit/core/src/blitzkit/checkConsumableProvisionInclusivity'; +import { consumableDefinitions } from '@blitzkit/core/src/blitzkit/consumableDefinitions'; import { InfoCircledIcon } from '@radix-ui/react-icons'; import { Button, @@ -11,16 +10,16 @@ import { Popover, Text, } from '@radix-ui/themes'; -import { use } from 'react'; -import { ConsumablesManager } from '../../../../../../../components/ConsumablesManager'; -import { useEquipment } from '../../../../../../../hooks/useEquipment'; -import * as Duel from '../../../../../../../stores/duel'; +import { useEquipment } from '../../../../hooks/useEquipment'; +import { Duel } from '../../../../stores/duel'; +import { ConsumablesManager } from '../../../ConsumablesManager'; import { ConfigurationChildWrapper } from './ConfigurationChildWrapper'; +const awaitedConsumableDefinitions = await consumableDefinitions; + export function Consumables() { const mutateDuel = Duel.useMutation(); const protagonist = Duel.use((state) => state.protagonist); - const awaitedConsumableDefinitions = use(consumableDefinitions); const consumables = Duel.use((state) => state.protagonist.consumables); const consumablesList = Object.values(awaitedConsumableDefinitions).filter( (consumable) => diff --git a/packages/website-legacy/src/app/tools/tankopedia/[id]/components/Characteristics/components/Equipment.tsx b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Equipment.tsx similarity index 84% rename from packages/website-legacy/src/app/tools/tankopedia/[id]/components/Characteristics/components/Equipment.tsx rename to packages/website/src/components/Tankopedia/CharacteristicsSection/components/Equipment.tsx index 8caca6b49..3148e356d 100644 --- a/packages/website-legacy/src/app/tools/tankopedia/[id]/components/Characteristics/components/Equipment.tsx +++ b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Equipment.tsx @@ -1,14 +1,14 @@ import { equipmentDefinitions } from '@blitzkit/core'; import { Button, Flex, Heading } from '@radix-ui/themes'; -import { use } from 'react'; -import { EquipmentManager } from '../../../../../../../components/EquipmentManager'; -import * as Duel from '../../../../../../../stores/duel'; +import { Duel } from '../../../../stores/duel'; +import { EquipmentManager } from '../../../EquipmentManager'; import { ConfigurationChildWrapper } from './ConfigurationChildWrapper'; +const awaitedEquipmentDefinitions = await equipmentDefinitions; + export function Equipment() { const mutateDuel = Duel.useMutation(); const protagonist = Duel.use((state) => state.protagonist); - const awaitedEquipmentDefinitions = use(equipmentDefinitions); const equipmentPreset = awaitedEquipmentDefinitions.presets[protagonist.tank.equipment]; const equipmentMatrix = Duel.use( diff --git a/packages/website-legacy/src/app/tools/tankopedia/[id]/components/Characteristics/components/Miscellaneous.tsx b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Miscellaneous.tsx similarity index 95% rename from packages/website-legacy/src/app/tools/tankopedia/[id]/components/Characteristics/components/Miscellaneous.tsx rename to packages/website/src/components/Tankopedia/CharacteristicsSection/components/Miscellaneous.tsx index 231987ac6..8aa6ad780 100644 --- a/packages/website-legacy/src/app/tools/tankopedia/[id]/components/Characteristics/components/Miscellaneous.tsx +++ b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Miscellaneous.tsx @@ -2,8 +2,8 @@ import { asset } from '@blitzkit/core'; import { Flex, Heading, Slider, TextField } from '@radix-ui/themes'; import { clamp, debounce } from 'lodash-es'; import { useEffect, useMemo, useRef, useState } from 'react'; -import { GenericTankComponentButton } from '../../../../../../../components/ModuleButtons/GenericTankComponentButton'; -import * as Duel from '../../../../../../../stores/duel'; +import { Duel } from '../../../../stores/duel'; +import { GenericTankComponentButton } from '../../../ModuleButtons/GenericTankComponentButton'; import { ConfigurationChildWrapper } from './ConfigurationChildWrapper'; export function Miscellaneous() { diff --git a/packages/website-legacy/src/app/tools/tankopedia/[id]/components/Characteristics/components/Modules.tsx b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Modules.tsx similarity index 93% rename from packages/website-legacy/src/app/tools/tankopedia/[id]/components/Characteristics/components/Modules.tsx rename to packages/website/src/components/Tankopedia/CharacteristicsSection/components/Modules.tsx index 100d11cc8..4a14dd3ef 100644 --- a/packages/website-legacy/src/app/tools/tankopedia/[id]/components/Characteristics/components/Modules.tsx +++ b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Modules.tsx @@ -1,14 +1,14 @@ import { asset, formatCompact, - ModuleDefinition, - ModuleType, - TankDefinition, tankDefinitions, tankIcon, - Tier, TIER_ROMAN_NUMERALS, - Unlock, + type ModuleDefinition, + type ModuleType, + type TankDefinition, + type Tier, + type Unlock, } from '@blitzkit/core'; import { Button, @@ -19,9 +19,8 @@ import { Link, Text, } from '@radix-ui/themes'; -import { use } from 'react'; -import * as Duel from '../../../../../../../stores/duel'; import { ConfigurationChildWrapper } from './ConfigurationChildWrapper'; +import { Duel } from '../../../../stores/duel'; function ModuleButton({ tier, @@ -112,9 +111,10 @@ function ModuleButton({ ); } +const awaitedTankDefinitions = await tankDefinitions; + export function Modules() { const mutateDuel = Duel.useMutation(); - const awaitedTankDefinitions = use(tankDefinitions); const tank = Duel.use((state) => state.protagonist.tank); const hasUpgrades = tank.turrets.length > 1 || @@ -264,23 +264,23 @@ export function Modules() { (unlock.type === 'turret' ? turret.id : unlock.type === 'gun' - ? gun.id - : unlock.type === 'engine' - ? engine.id - : unlock.type === 'chassis' - ? track.id - : -1) === unlock.id + ? gun.id + : unlock.type === 'engine' + ? engine.id + : unlock.type === 'chassis' + ? track.id + : -1) === unlock.id } top={ unlock.type === 'turret' ? module.id == topTurret.id : unlock.type === 'gun' - ? module.id === topGun.id - : unlock.type === 'engine' - ? module.id === topEngine.id - : unlock.type === 'chassis' - ? module.id === topTrack.id - : false + ? module.id === topGun.id + : unlock.type === 'engine' + ? module.id === topEngine.id + : unlock.type === 'chassis' + ? module.id === topTrack.id + : false } onClick={() => setByUnlock(unlock)} /> diff --git a/packages/website-legacy/src/app/tools/tankopedia/[id]/components/Characteristics/components/Provisions.tsx b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Provisions.tsx similarity index 84% rename from packages/website-legacy/src/app/tools/tankopedia/[id]/components/Characteristics/components/Provisions.tsx rename to packages/website/src/components/Tankopedia/CharacteristicsSection/components/Provisions.tsx index 1a1432b1a..46a048194 100644 --- a/packages/website-legacy/src/app/tools/tankopedia/[id]/components/Characteristics/components/Provisions.tsx +++ b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Provisions.tsx @@ -1,15 +1,15 @@ import { availableProvisions, provisionDefinitions } from '@blitzkit/core'; import { Button, Flex, Heading } from '@radix-ui/themes'; -import { use } from 'react'; -import { ProvisionsManager } from '../../../../../../../components/ProvisionsManager'; -import * as Duel from '../../../../../../../stores/duel'; +import { Duel } from '../../../../stores/duel'; +import { ProvisionsManager } from '../../../ProvisionsManager'; import { ConfigurationChildWrapper } from './ConfigurationChildWrapper'; +const awaitedProvisionDefinitions = await provisionDefinitions; + export function Provisions() { const mutateDuel = Duel.useMutation(); const { tank, gun } = Duel.use((state) => state.protagonist); const provisions = Duel.use((state) => state.protagonist.provisions); - const awaitedProvisionDefinitions = use(provisionDefinitions); const provisionsList = availableProvisions( tank, gun, diff --git a/packages/website-legacy/src/app/tools/tankopedia/[id]/components/Characteristics/components/Skills/index.tsx b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Skills.tsx similarity index 87% rename from packages/website-legacy/src/app/tools/tankopedia/[id]/components/Characteristics/components/Skills/index.tsx rename to packages/website/src/components/Tankopedia/CharacteristicsSection/components/Skills.tsx index 509328d28..c182f192d 100644 --- a/packages/website-legacy/src/app/tools/tankopedia/[id]/components/Characteristics/components/Skills/index.tsx +++ b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Skills.tsx @@ -9,13 +9,13 @@ import { Popover, Text, } from '@radix-ui/themes'; -import { use } from 'react'; -import { CrewSkillManager } from '../../../../../../../../components/CrewSkillManager'; -import * as TankopediaEphemeral from '../../../../../../../../stores/tankopediaEphemeral'; -import { ConfigurationChildWrapper } from '../ConfigurationChildWrapper'; +import { TankopediaEphemeral } from '../../../../stores/tankopediaEphemeral'; +import { CrewSkillManager } from '../../../CrewSkillManager'; +import { ConfigurationChildWrapper } from './ConfigurationChildWrapper'; + +const awaitedSkillDefinitions = await skillDefinitions; export function Skills() { - const awaitedSkillDefinitions = use(skillDefinitions); const skillLevels = TankopediaEphemeral.use((state) => state.skills); const mutateTankopediaTemporary = TankopediaEphemeral.useMutation(); diff --git a/packages/website/src/components/Tankopedia/CharacteristicsSection.tsx b/packages/website/src/components/Tankopedia/CharacteristicsSection/index.tsx similarity index 53% rename from packages/website/src/components/Tankopedia/CharacteristicsSection.tsx rename to packages/website/src/components/Tankopedia/CharacteristicsSection/index.tsx index f4a7ad559..db5cdbd14 100644 --- a/packages/website/src/components/Tankopedia/CharacteristicsSection.tsx +++ b/packages/website/src/components/Tankopedia/CharacteristicsSection/index.tsx @@ -1,11 +1,11 @@ import { Flex, Heading } from '@radix-ui/themes'; -import { Characteristics } from '../../../../website-legacy/src/app/tools/tankopedia/[id]/components/Characteristics'; -import { Consumables } from '../../../../website-legacy/src/app/tools/tankopedia/[id]/components/Characteristics/components/Consumables'; -import { Equipment } from '../../../../website-legacy/src/app/tools/tankopedia/[id]/components/Characteristics/components/Equipment'; -import { Miscellaneous } from '../../../../website-legacy/src/app/tools/tankopedia/[id]/components/Characteristics/components/Miscellaneous'; -import { Modules } from '../../../../website-legacy/src/app/tools/tankopedia/[id]/components/Characteristics/components/Modules'; -import { Provisions } from '../../../../website-legacy/src/app/tools/tankopedia/[id]/components/Characteristics/components/Provisions'; -import { Skills } from '../../../../website-legacy/src/app/tools/tankopedia/[id]/components/Characteristics/components/Skills'; +import { Characteristics } from './components/Characteristics'; +import { Consumables } from './components/Consumables'; +import { Equipment } from './components/Equipment'; +import { Miscellaneous } from './components/Miscellaneous'; +import { Modules } from './components/Modules'; +import { Provisions } from './components/Provisions'; +import { Skills } from './components/Skills'; export function CharacteristicsSection() { return ( diff --git a/packages/website/src/components/Tankopedia/GameModeSection.tsx b/packages/website/src/components/Tankopedia/GameModeSection.tsx index 5600e5185..bfcab62f3 100644 --- a/packages/website/src/components/Tankopedia/GameModeSection.tsx +++ b/packages/website/src/components/Tankopedia/GameModeSection.tsx @@ -5,7 +5,7 @@ import { provisionDefinitions, } from '@blitzkit/core'; import { Box, Flex, Heading, Text } from '@radix-ui/themes'; -import * as Duel from '../../../../../../stores/duel'; +import { Duel } from '../../stores/duel'; const awaitedGameDefinitions = await gameDefinitions; const awaitedConsumableDefinitions = await consumableDefinitions; diff --git a/packages/website/src/components/Tankopedia/HistorySection.tsx b/packages/website/src/components/Tankopedia/HistorySection.tsx index eabc806bf..ab930b094 100644 --- a/packages/website/src/components/Tankopedia/HistorySection.tsx +++ b/packages/website/src/components/Tankopedia/HistorySection.tsx @@ -1,6 +1,6 @@ import { Heading, Text } from '@radix-ui/themes'; -import { PageWrapper } from '../../../../../components/PageWrapper'; -import * as Duel from '../../../../../stores/duel'; +import { Duel } from '../../stores/duel'; +import { PageWrapper } from '../PageWrapper'; export function HistorySection() { const tank = Duel.use((state) => state.protagonist.tank); diff --git a/packages/website/src/components/Tankopedia/MetaSection/components/Listing.tsx b/packages/website/src/components/Tankopedia/MetaSection/components/Listing.tsx index 91f680df0..a16207b0e 100644 --- a/packages/website/src/components/Tankopedia/MetaSection/components/Listing.tsx +++ b/packages/website/src/components/Tankopedia/MetaSection/components/Listing.tsx @@ -1,4 +1,4 @@ -import { Flex, Text, TextProps } from '@radix-ui/themes'; +import { Flex, Text, type TextProps } from '@radix-ui/themes'; type ListingProps = TextProps & { label: string; diff --git a/packages/website/src/components/Tankopedia/MetaSection/components/Stars/index.tsx b/packages/website/src/components/Tankopedia/MetaSection/components/Stars/index.tsx index 71ed692d7..06f4187d0 100644 --- a/packages/website/src/components/Tankopedia/MetaSection/components/Stars/index.tsx +++ b/packages/website/src/components/Tankopedia/MetaSection/components/Stars/index.tsx @@ -1,5 +1,5 @@ -import { StarsInt } from '@blitzkit/core'; -import { Flex, Text, TextProps } from '@radix-ui/themes'; +import type { StarsInt } from '@blitzkit/core'; +import { type TextProps, Flex, Text } from '@radix-ui/themes'; import { times } from 'lodash-es'; import { PartialStar } from './components/PartialStar'; diff --git a/packages/website/src/components/Tankopedia/MetaSection/index.tsx b/packages/website/src/components/Tankopedia/MetaSection/index.tsx index c6e5bf5a7..7caa62633 100644 --- a/packages/website/src/components/Tankopedia/MetaSection/index.tsx +++ b/packages/website/src/components/Tankopedia/MetaSection/index.tsx @@ -51,7 +51,7 @@ export function MetaSection() { - {assertSecret(process.env.PUBLIC_PROMOTE_OPENTEST) === 'true' && ( + {assertSecret(import.meta.env.PUBLIC_PROMOTE_OPENTEST) === 'true' && ( diff --git a/packages/website/src/components/Tankopedia/ShotDisplaySection.tsx b/packages/website/src/components/Tankopedia/ShotDisplaySection.tsx index 07418e0f6..9b2a4f9f9 100644 --- a/packages/website/src/components/Tankopedia/ShotDisplaySection.tsx +++ b/packages/website/src/components/Tankopedia/ShotDisplaySection.tsx @@ -1,9 +1,9 @@ import { Flex } from '@radix-ui/themes'; -import { ShotDisplayCard } from '../../../../../components/Armor/components/ShotDisplayCard'; -import * as TankEphemeral from '../../../../../stores/tankopediaEphemeral'; +import { TankopediaEphemeral } from '../../stores/tankopediaEphemeral'; +import { ShotDisplayCard } from '../Armor/components/ShotDisplayCard'; export function ShotDisplaySection() { - const shot = TankEphemeral.use((state) => state.shot); + const shot = TankopediaEphemeral.use((state) => state.shot); if (!shot) return null; diff --git a/packages/website/src/components/Tankopedia/TechTreeSection/components/Node.tsx b/packages/website/src/components/Tankopedia/TechTreeSection/components/Node.tsx index 1c71f304c..03e98de6e 100644 --- a/packages/website/src/components/Tankopedia/TechTreeSection/components/Node.tsx +++ b/packages/website/src/components/Tankopedia/TechTreeSection/components/Node.tsx @@ -5,9 +5,8 @@ import { tankDefinitions, TIER_ROMAN_NUMERALS, } from '@blitzkit/core'; -import { Box, Flex, Text } from '@radix-ui/themes'; -import Link from 'next/link'; -import * as TankopediaEphemeral from '../../../../../../../../stores/tankopediaEphemeral'; +import { Box, Flex, Link, Text } from '@radix-ui/themes'; +import { TankopediaEphemeral } from '../../../../stores/tankopediaEphemeral'; interface NodeProps { id: number; diff --git a/packages/website/src/components/Tankopedia/TechTreeSection/index.tsx b/packages/website/src/components/Tankopedia/TechTreeSection/index.tsx index 3c10cb058..2b81cafe9 100644 --- a/packages/website/src/components/Tankopedia/TechTreeSection/index.tsx +++ b/packages/website/src/components/Tankopedia/TechTreeSection/index.tsx @@ -2,8 +2,8 @@ import { asset, imgur, tankDefinitions } from '@blitzkit/core'; import { CaretLeftIcon, CaretRightIcon, PlusIcon } from '@radix-ui/react-icons'; import { Flex, Heading, IconButton, ScrollArea, Text } from '@radix-ui/themes'; import { Fragment, useEffect, useMemo, useRef, useState } from 'react'; -import * as Duel from '../../../../../../../stores/duel'; -import * as TankopediaEphemeral from '../../../../../../../stores/tankopediaEphemeral'; +import { Duel } from '../../../stores/duel'; +import { TankopediaEphemeral } from '../../../stores/tankopediaEphemeral'; import { Arrow } from './components/Arrow'; import { Node } from './components/Node'; @@ -168,6 +168,7 @@ export function TechTreeSection() { return ( {index > 0 && } + state.protagonist.tank); - const awaitedReviews = use(reviews); const videos = awaitedReviews.reviews[tank.id]?.videos; if (!videos) return null; diff --git a/packages/website/src/core/blitzkit/tankCharacteristics.ts b/packages/website/src/core/blitzkit/tankCharacteristics.ts index 560269848..1fddf735d 100644 --- a/packages/website/src/core/blitzkit/tankCharacteristics.ts +++ b/packages/website/src/core/blitzkit/tankCharacteristics.ts @@ -1,25 +1,25 @@ import { - coefficient, degressiveStat, - EngineDefinition, - EquipmentDefinitions, - GunDefinition, isExplosive, - ModelDefinition, normalizeBoundingBox, progressiveStat, - ProvisionDefinitions, resolveDpm, resolveNearPenetration, resolvePenetrationCoefficient, - ShellDefinition, sum, - TankDefinition, - TrackDefinition, - TurretDefinition, unionBoundingBox, + type EngineDefinition, + type EquipmentDefinitions, + type GunDefinition, + type ModelDefinition, + type ProvisionDefinitions, + type ShellDefinition, + type TankDefinition, + type TrackDefinition, + type TurretDefinition, } from '@blitzkit/core'; -import { EquipmentMatrix } from '../../stores/duel'; +import { coefficient } from '@blitzkit/core/src/blitzkit/coefficient'; +import type { EquipmentMatrix } from '../../stores/duel'; export type TankCharacteristics = ReturnType; diff --git a/packages/website/src/hooks/useAdExempt.ts b/packages/website/src/hooks/useAdExempt.ts index 6dd27f712..e5e07b7b0 100644 --- a/packages/website/src/hooks/useAdExempt.ts +++ b/packages/website/src/hooks/useAdExempt.ts @@ -1,5 +1,5 @@ import { useStore } from '@nanostores/react'; -import { useLayoutEffect, useState } from 'react'; +import { useEffect, useState } from 'react'; import { $patreonLogin } from '../stores/patreonLogin'; let cache: Record> = {}; @@ -8,7 +8,7 @@ export function useAdExempt() { const patreon = useStore($patreonLogin); const [exempt, setExempt] = useState(false); - useLayoutEffect(() => { + useEffect(() => { (async () => { if (!patreon.token) return setExempt(false); diff --git a/packages/website/src/hooks/useFullscreenAvailability.ts b/packages/website/src/hooks/useFullscreenAvailability.ts index 13824cacb..9bc68ae20 100644 --- a/packages/website/src/hooks/useFullscreenAvailability.ts +++ b/packages/website/src/hooks/useFullscreenAvailability.ts @@ -1,9 +1,9 @@ -import { useLayoutEffect, useState } from 'react'; +import { useEffect, useState } from 'react'; export function useFullscreenAvailability() { const [available, setAvailable] = useState(false); - useLayoutEffect(() => { + useEffect(() => { setAvailable(document.fullscreenEnabled); }, []); diff --git a/packages/website/src/hooks/useIntersection.ts b/packages/website/src/hooks/useIntersection.ts index 66a176f2b..f946f419c 100644 --- a/packages/website/src/hooks/useIntersection.ts +++ b/packages/website/src/hooks/useIntersection.ts @@ -1,4 +1,4 @@ -import { type RefObject, useLayoutEffect, useRef } from 'react'; +import { type RefObject, useEffect, useRef } from 'react'; interface UseIntersectionOptions extends IntersectionObserverInit { disabled: boolean; @@ -11,7 +11,7 @@ export function useIntersection( ) { const observer = useRef(); - useLayoutEffect(() => { + useEffect(() => { if (options?.disabled || !ref.current) return; const rect = ref.current.getBoundingClientRect(); diff --git a/packages/website/src/pages/tools/tankopedia/[id]/index.tsx b/packages/website/src/pages/tools/tankopedia/[id]/index.tsx index 2c453f3dd..c5572be0e 100644 --- a/packages/website/src/pages/tools/tankopedia/[id]/index.tsx +++ b/packages/website/src/pages/tools/tankopedia/[id]/index.tsx @@ -4,7 +4,15 @@ import { tankDefinitions, } from '@blitzkit/core'; import { PageWrapper } from '../../../../components/PageWrapper'; +import { CalloutsSection } from '../../../../components/Tankopedia/CalloutsSection'; +import { CharacteristicsSection } from '../../../../components/Tankopedia/CharacteristicsSection'; +import { GameModeSection } from '../../../../components/Tankopedia/GameModeSection'; import { HeroSection } from '../../../../components/Tankopedia/HeroSection'; +import { HistorySection } from '../../../../components/Tankopedia/HistorySection'; +import { MetaSection } from '../../../../components/Tankopedia/MetaSection'; +import { ShotDisplaySection } from '../../../../components/Tankopedia/ShotDisplaySection'; +import { TechTreeSection } from '../../../../components/Tankopedia/TechTreeSection'; +import { VideoSection } from '../../../../components/Tankopedia/VideoSection'; import { App } from '../../../../stores/app'; import { Duel } from '../../../../stores/duel'; import { TankopediaEphemeral } from '../../../../stores/tankopediaEphemeral'; @@ -31,17 +39,17 @@ export function Page({ id }: PageProps) { > - {/* - - - {!exempt && } - - - {!exempt && } - - - - {!exempt && } */} + + + + + {/* {!exempt && } */} + + {/* {!exempt && } */} + + + + {/* {!exempt && } */} diff --git a/packages/website/src/stores/embedState/utilities.ts b/packages/website/src/stores/embedState/utilities.ts index 9fbe26d6a..26043aff8 100644 --- a/packages/website/src/stores/embedState/utilities.ts +++ b/packages/website/src/stores/embedState/utilities.ts @@ -1,7 +1,6 @@ -import { TextProps } from '@radix-ui/themes'; -import { EmbedConfig } from '.'; -import * as EmbedState from './'; -import { EmbedConfigItemType, EmbedItemType } from './constants'; +import type { TextProps } from '@radix-ui/themes'; +import type { EmbedConfig } from '.'; +import type { EmbedConfigItemType, EmbedItemType } from './constants'; export function useEmbedStateCurry() { function useState(key: Key) {