fix: keys

This commit is contained in:
tresabhi committed 2025-04-15 16:29:14 -05:00
1 parent 545b655d4e
commit 8b6610151e
9 files changed
+68 -44

No files matched your search

@@ -216,7 +216,7 @@ export function PrimaryArmorSceneComponent({
return (
<mesh
{...props}
key={key}
key={`${key}-exclude`}
renderOrder={0}
material={excludeMaterial}
/>
@@ -226,7 +226,12 @@ export function PrimaryArmorSceneComponent({
{jsxTree(node, {
mesh(_, props, key) {
return (
<mesh {...props} key={key} renderOrder={1} material={material} />
<mesh
{...props}
key={`${key}-include`}
renderOrder={1}
material={material}
/>
);
},
})}
@@ -74,7 +74,7 @@ export const SpacedArmorScene = memo<SpacedArmorSceneProps>(({ scene }) => {
return (
<SpacedArmorSceneComponent
scene={scene}
key={node.uuid}
key={`${node.uuid}-hull`}
type={spaced ? ArmorType.Spaced : ArmorType.Primary}
thickness={thickness}
node={node}
@@ -93,7 +93,7 @@ export const SpacedArmorScene = memo<SpacedArmorSceneProps>(({ scene }) => {
return (
<SpacedArmorSceneComponent
scene={scene}
key={node.uuid}
key={`${node.uuid}-track`}
type={ArmorType.External}
thickness={trackModelDefinition.thickness}
variant="track"
@@ -127,7 +127,7 @@ export const SpacedArmorScene = memo<SpacedArmorSceneProps>(({ scene }) => {
<group position={turretOrigin}>
<SpacedArmorSceneComponent
scene={scene}
key={node.uuid}
key={`${node.uuid}-turret`}
type={spaced ? ArmorType.Spaced : ArmorType.Primary}
thickness={thickness}
node={node}
@@ -158,7 +158,7 @@ export const SpacedArmorScene = memo<SpacedArmorSceneProps>(({ scene }) => {
return null;
return (
<group position={hullOrigin} key={node.uuid}>
<group position={hullOrigin} key={`${node.uuid}-gun-spaced}`}>
<group position={turretOrigin.clone().add(gunOrigin)}>
<SpacedArmorSceneComponent
scene={scene}
@@ -185,7 +185,7 @@ export const SpacedArmorScene = memo<SpacedArmorSceneProps>(({ scene }) => {
return (
<SpacedArmorSceneComponent
scene={scene}
key={node.uuid}
key={`${node.uuid}-gun-external`}
type={ArmorType.External}
thickness={gunModelDefinition.thickness}
variant="gun"
@@ -115,11 +115,17 @@ export function SpacedArmorSubExternal({
return (
<>
{jsxTree(node, {
group(_, props, key) {
return (
<group {...props} key={`${key}-spaced-sub-external-exclude`} />
);
},
mesh(_, props, key) {
return (
<mesh
{...props}
key={key}
key={`${key}-spaced-sub-external-exclude`}
renderOrder={3}
material={
new MeshBasicMaterial({
@@ -142,9 +148,20 @@ export function SpacedArmorSubExternal({
})}
{jsxTree(node, {
group(_, props, key) {
return (
<group {...props} key={`${key}-spaced-sub-external-include`} />
);
},
mesh(_, props, key) {
return (
<mesh {...props} key={key} renderOrder={4} material={material} />
<mesh
{...props}
key={`${key}-spaced-sub-external-include`}
renderOrder={4}
material={material}
/>
);
},
})}
@@ -125,11 +125,15 @@ export function SpacedArmorSubSpaced({
return (
<>
{jsxTree(node, {
group(_, props, key) {
return <group {...props} key={`${key}-spaced-sub-spaced-exclude`} />;
},
mesh(_, props, key) {
return (
<mesh
{...props}
key={key}
key={`${key}-spaced-sub-spaced-exclude`}
renderOrder={2}
material={material}
onClick={() => {}}
@@ -145,11 +149,15 @@ export function SpacedArmorSubSpaced({
})}
{jsxTree(node, {
group(_, props, key) {
return <group {...props} key={`${key}-spaced-sub-spaced-include`} />;
},
mesh(_, props, key) {
return (
<mesh
{...props}
key={key}
key={`${key}-spaced-sub-spaced-include`}
renderOrder={5}
material={depthWriteMaterial}
/>
@@ -373,11 +373,11 @@ export function SpacedArmorSceneComponent({
<>
{props.type === ArmorType.Primary &&
jsxTree(node, {
mesh(mesh, props, key) {
mesh(_, props, key) {
return (
<mesh
{...props}
key={key}
key={`${key}-spaced-component`}
renderOrder={0}
material={omitMaterial}
userData={
@@ -25,6 +25,12 @@ export function InitialFogReveal() {
fog.near = near;
fog.far = far;
if (x >= 1) {
fog.near = forNear0;
fog.far = fogFar0;
clearInterval(interval);
}
}, 1000 / 60);
return () => clearInterval(interval);
@@ -70,8 +70,7 @@ export const TankSandbox = forwardRef<HTMLCanvasElement, TankSandboxProps>(
if (rawDisplay === display) return;
const t0 = Date.now();
const interval = setInterval((e) => {
const interval = setInterval(() => {
const t = (Date.now() - t0) / 1000;
const x = t / fogAnimationTime;
const y = Math.cbrt(-2 * Math.abs(x - 0.5)) + 1;
@@ -4,6 +4,7 @@ import { times } from 'lodash-es';
import { Suspense, useEffect, useMemo, useRef } from 'react';
import { NAVBAR_HEIGHT } from '../../../constants/navbar';
import { awaitableTankDefinitions } from '../../../core/awaitables/tankDefinitions';
import { Var } from '../../../core/radix/var';
import { useFullScreen } from '../../../hooks/useFullScreen';
import { useLocale } from '../../../hooks/useLocale';
import { Duel } from '../../../stores/duel';
@@ -107,6 +108,19 @@ export function HeroSection({ skeleton }: MaybeSkeletonComponentProps) {
left={disturbed ? '0' : { initial: '0', md: '12.5%' }}
style={{ transitionDuration: '200ms' }}
>
{!revealed && (
<Spinner
style={{
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
width: Var('space-6'),
height: Var('space-6'),
}}
/>
)}
{/* {skeleton && <TankSandboxLoader id={protagonist.id} />} */}
<Suspense>
@@ -147,21 +161,7 @@ export function HeroSection({ skeleton }: MaybeSkeletonComponentProps) {
}
style={{ transitionDuration: '200ms', position: 'relative' }}
>
<Icon
width="1em"
height="1em"
style={{ opacity: revealed ? 1 : 0 }}
/>
<Spinner
style={{
position: 'absolute',
top: '0',
left: '0',
width: '1em',
height: '1em',
opacity: revealed ? 0 : 1,
}}
/>
<Icon width="1em" height="1em" />
</Heading>
<Heading
@@ -179,14 +179,7 @@ export function HeroSection({ skeleton }: MaybeSkeletonComponentProps) {
</Heading>
</Flex>
<Box
ml="3"
style={{
transitionDuration: '200ms',
opacity: revealed ? 1 : 0,
transform: revealed ? 'translateY(0)' : 'translateY(-100%)',
}}
>
<Box ml="3">
<Text
color="gray"
size={{ initial: '3', lg: disturbed ? '4' : '5' }}
@@ -1,4 +1,4 @@
import type { MeshProps, Object3DProps } from '@react-three/fiber';
import type { GroupProps, MeshProps } from '@react-three/fiber';
import type { ReactNode } from 'react';
import { Mesh, Object3D } from 'three';
@@ -6,11 +6,7 @@ export function jsxTree(
node: Object3D,
mergers?: {
mesh?: (mesh: Mesh, props: MeshProps, key: string) => ReactNode;
group?: (
object3d: Object3D,
props: Object3DProps,
key: string,
) => ReactNode;
group?: (object3d: Object3D, props: GroupProps, key: string) => ReactNode;
},
): ReactNode {
if (node instanceof Mesh) {