Merge branch 'main' into dev-rinth

src/components/Ads/Horizontal.tsx

@@ -0,0 +1,24 @@
+export function AdHorizontal() {
+  return (
+    <>
+      <script
+        async
+        src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1289406790225052"
+        crossOrigin="anonymous"
+      />
+      <ins
+        className="adsbygoogle"
+        style={{ display: 'block' }}
+        data-ad-client="ca-pub-1289406790225052"
+        data-ad-slot="2391822409"
+        data-ad-format="auto"
+        data-full-width-responsive="true"
+      />
+      <script
+        dangerouslySetInnerHTML={{
+          __html: `(adsbygoogle = window.adsbygoogle || []).push({});`,
+        }}
+      />
+    </>
+  );
+}

src/components/Armor/components/CoreArmorSceneComponent/index.tsx

@@ -153,14 +153,12 @@ export function CoreArmorSceneComponent({
 
   return (
     <>
-      {jsxTree(node, {
-        renderOrder: 0,
-        material: excludeMaterial,
-      })}
-      {jsxTree(node, {
-        renderOrder: 1,
-        material,
-      })}
+      {jsxTree(
+        node,
+        { renderOrder: 0, material: excludeMaterial },
+        `${node.uuid}-exclude`,
+      )}
+      {jsxTree(node, { renderOrder: 1, material }, `${node.uuid}-include`)}
     </>
   );
 }

src/components/Armor/components/SpacedArmorScene.tsx

@@ -259,9 +259,9 @@ export const SpacedArmorScene = memo<SpacedArmorSceneProps>(({ scene }) => {
           </group>
 
           {modelNodes.map((node) => {
-            const isCurrentGun =
-              node.name ===
-              `gun_${gunModelDefinition.model.toString().padStart(2, '0')}`;
+            const isCurrentGun = node.name.startsWith(
+              `gun_${gunModelDefinition.model.toString().padStart(2, '0')}`,
+            );
             const isVisible = isCurrentGun;
 
             if (!isVisible) return null;

src/components/Armor/components/SpacedArmorSceneComponent/components/SpacedArmorSubExternal/index.tsx

@@ -37,8 +37,8 @@ export function SpacedArmorSubExternal({
     depthTest: true,
     depthWrite: false,
     blending: AdditiveBlending,
-    clippingPlanes: clip ? [clip] : undefined,
-    clipping: true,
+    clipping: clip !== undefined,
+    ...(clip ? { clippingPlanes: [clip] } : {}),
 
     uniforms: {
       thickness: { value: null },
@@ -107,26 +107,27 @@ export function SpacedArmorSubExternal({
 
   return (
     <>
-      {jsxTree(node, {
-        renderOrder: 3,
-        material: new MeshBasicMaterial({
-          colorWrite: false,
-          depthTest: true,
-          depthWrite: true,
-          clippingPlanes: clip ? [clip] : undefined,
-        }),
-        onClick() {},
-        userData: {
-          type: ArmorType.External,
-          thickness,
-          variant,
-        } satisfies ArmorUserData,
-      })}
+      {jsxTree(
+        node,
+        {
+          renderOrder: 3,
+          material: new MeshBasicMaterial({
+            colorWrite: false,
+            depthTest: true,
+            depthWrite: true,
+            ...(clip ? { clippingPlanes: [clip] } : {}),
+          }),
+          onClick() {},
+          userData: {
+            type: ArmorType.External,
+            thickness,
+            variant,
+          } satisfies ArmorUserData,
+        },
+        `${node.uuid}-exclude`,
+      )}
 
-      {jsxTree(node, {
-        renderOrder: 4,
-        material,
-      })}
+      {jsxTree(node, { renderOrder: 4, material }, `${node.uuid}-include`)}
     </>
   );
 }

src/components/Armor/components/SpacedArmorSceneComponent/components/SpacedArmorSubSpaced/index.tsx

@@ -113,20 +113,28 @@ export function SpacedArmorSubSpaced({
 
   return (
     <>
-      {jsxTree(node, {
-        renderOrder: 2,
-        material,
-        onClick() {},
-        userData: {
-          type: ArmorType.Spaced,
-          thickness,
-        } satisfies ArmorUserData,
-      })}
+      {jsxTree(
+        node,
+        {
+          renderOrder: 2,
+          material,
+          onClick() {},
+          userData: {
+            type: ArmorType.Spaced,
+            thickness,
+          } satisfies ArmorUserData,
+        },
+        `${node.uuid}-exclude`,
+      )}
 
-      {jsxTree(node, {
-        renderOrder: 5,
-        material: depthWriteMaterial,
-      })}
+      {jsxTree(
+        node,
+        {
+          renderOrder: 5,
+          material: depthWriteMaterial,
+        },
+        `${node.uuid}-include`,
+      )}
     </>
   );
 }

src/components/Armor/components/SpacedArmorSceneComponent/index.tsx

@@ -81,251 +81,265 @@ export function SpacedArmorSceneComponent({
   return (
     <>
       {props.type === ArmorType.Core &&
-        jsxTree(node, {
-          renderOrder: 0,
-          material: omitMaterial,
-          userData: {
-            type: ArmorType.Core,
-            thickness,
-          } satisfies ArmorUserData,
+        jsxTree(
+          node,
+          {
+            renderOrder: 0,
+            material: omitMaterial,
+            userData: {
+              type: ArmorType.Core,
+              thickness,
+            } satisfies ArmorUserData,
 
-          async onClick(event) {
-            event.stopPropagation();
+            async onClick(event) {
+              event.stopPropagation();
 
-            const duel = useDuel.getState();
-            const hasCalibratedShells = await hasEquipment(
-              103,
-              duel.antagonist!.tank.equipment,
-              duel.antagonist!.equipmentMatrix,
-            );
-            const hasEnhancedArmor = await hasEquipment(
-              110,
-              duel.protagonist!.tank.equipment,
-              duel.protagonist!.equipmentMatrix,
-            );
-            const thicknessCoefficient = hasEnhancedArmor ? 1.04 : 1;
-            const shell = useDuel.getState().antagonist!.shell;
-            const explosive = isExplosive(shell.type);
-            const splashing = canSplash(shell.type);
-            const penetration =
-              resolveNearPenetration(shell.penetration) *
-              (hasCalibratedShells
-                ? isExplosive(shell.type)
-                  ? 1.1
-                  : 1.05
-                : 1);
-            const shot: Shot = {
-              layers: [],
-              point: event.point,
-            }; // TODO: type this
-            let remainingPenetration = penetration;
-
-            const shellNormal = camera.position
-              .clone()
-              .sub(event.point)
-              .normalize();
-
-            pushLogs(shellNormal, filterIntersections(event.intersections), 0);
-
-            function filterIntersections(intersectionsRaw: Intersection[]) {
-              const showSpacedArmor =
-                useTankopediaPersistent.getState().model.visual.showSpacedArmor;
-              const intersectionsTyped = intersectionsRaw.filter(
-                ({ object }) => object.userData.type !== undefined,
-              ) as ArmorMeshIntersection[];
-              const intersectionsFiltered = intersectionsTyped.filter(
-                ({ object }) =>
-                  showSpacedArmor
-                    ? true
-                    : object.userData.type === ArmorType.Core,
+              const duel = useDuel.getState();
+              const hasCalibratedShells = await hasEquipment(
+                103,
+                duel.antagonist!.tank.equipment,
+                duel.antagonist!.equipmentMatrix,
               );
-              const intersectionsWithDuplicates = intersectionsFiltered.slice(
+              const hasEnhancedArmor = await hasEquipment(
+                110,
+                duel.protagonist!.tank.equipment,
+                duel.protagonist!.equipmentMatrix,
+              );
+              const thicknessCoefficient = hasEnhancedArmor ? 1.04 : 1;
+              const shell = useDuel.getState().antagonist!.shell;
+              const explosive = isExplosive(shell.type);
+              const splashing = canSplash(shell.type);
+              const penetration =
+                resolveNearPenetration(shell.penetration) *
+                (hasCalibratedShells
+                  ? isExplosive(shell.type)
+                    ? 1.1
+                    : 1.05
+                  : 1);
+              const shot: Shot = {
+                layers: [],
+                point: event.point,
+              }; // TODO: type this
+              let remainingPenetration = penetration;
+
+              const shellNormal = camera.position
+                .clone()
+                .sub(event.point)
+                .normalize();
+
+              pushLogs(
+                shellNormal,
+                filterIntersections(event.intersections),
                 0,
-                intersectionsFiltered.findIndex(
-                  ({ object }) => object.userData.type === ArmorType.Core,
-                ) + 1,
               );
-              const firstGunIntersectionIndex =
-                intersectionsWithDuplicates.findIndex(
+
+              function filterIntersections(intersectionsRaw: Intersection[]) {
+                const showSpacedArmor =
+                  useTankopediaPersistent.getState().model.visual
+                    .showSpacedArmor;
+                const intersectionsTyped = intersectionsRaw.filter(
+                  ({ object }) => object.userData.type !== undefined,
+                ) as ArmorMeshIntersection[];
+                const intersectionsFiltered = intersectionsTyped.filter(
                   ({ object }) =>
-                    object.userData.type === ArmorType.External &&
-                    object.userData.variant === 'gun',
+                    showSpacedArmor
+                      ? true
+                      : object.userData.type === ArmorType.Core,
                 );
-              const firstTrackIntersectionIndex =
-                intersectionsWithDuplicates.findIndex(
-                  ({ object }) =>
-                    object.userData.type === ArmorType.External &&
-                    object.userData.variant === 'track',
+                const intersectionsWithDuplicates = intersectionsFiltered.slice(
+                  0,
+                  intersectionsFiltered.findIndex(
+                    ({ object }) => object.userData.type === ArmorType.Core,
+                  ) + 1,
                 );
-              let intersections = intersectionsWithDuplicates;
-
-              if (firstGunIntersectionIndex !== -1) {
-                intersections = intersections.filter(({ object }, index) => {
-                  return object.userData.type === ArmorType.External &&
-                    object.userData.variant === 'gun'
-                    ? index === firstGunIntersectionIndex
-                    : true;
-                });
-              }
-              if (firstTrackIntersectionIndex !== -1) {
-                intersections = intersections.filter(({ object }, index) => {
-                  return object.userData.type === ArmorType.External &&
-                    object.userData.variant === 'track'
-                    ? index === firstTrackIntersectionIndex
-                    : true;
-                });
-              }
-
-              return intersections;
-            }
-
-            function pushLogs(
-              shellNormal: Vector3,
-              intersections: ArmorMeshIntersection[],
-              startingIndex: number,
-            ) {
-              let layerIndex = startingIndex;
-              let loopIndex = 0;
-
-              if (layerIndex !== 0 && intersections.length > 0) {
-                const distance = (
-                  shot.layers.at(-1) as ShotLayerBase
-                ).point.distanceTo(intersections[0].point);
-                if (explosive && !splashing)
-                  remainingPenetration -= 0.5 * remainingPenetration * distance;
-                const blocked = remainingPenetration < 0;
-
-                shot.layers.push({
-                  type: null,
-                  status: blocked ? 'blocked' : 'penetration',
-                  distance,
-                });
-
-                if (blocked) return;
-              }
-
-              for (const intersection of intersections) {
-                const surfaceNormal = intersection
-                  .normal!.clone()
-                  .applyQuaternion(
-                    event.object.getWorldQuaternion(new Quaternion()),
+                const firstGunIntersectionIndex =
+                  intersectionsWithDuplicates.findIndex(
+                    ({ object }) =>
+                      object.userData.type === ArmorType.External &&
+                      object.userData.variant === 'gun',
                   );
-                const thickness =
-                  thicknessCoefficient * intersection.object.userData.thickness;
+                const firstTrackIntersectionIndex =
+                  intersectionsWithDuplicates.findIndex(
+                    ({ object }) =>
+                      object.userData.type === ArmorType.External &&
+                      object.userData.variant === 'track',
+                  );
+                let intersections = intersectionsWithDuplicates;
 
-                if (layerIndex !== 0 && startingIndex === 0) {
-                  const previousIntersection = intersections[layerIndex - 1];
-                  const distance =
-                    intersection.distance - previousIntersection.distance;
+                if (firstGunIntersectionIndex !== -1) {
+                  intersections = intersections.filter(({ object }, index) => {
+                    return object.userData.type === ArmorType.External &&
+                      object.userData.variant === 'gun'
+                      ? index === firstGunIntersectionIndex
+                      : true;
+                  });
+                }
+                if (firstTrackIntersectionIndex !== -1) {
+                  intersections = intersections.filter(({ object }, index) => {
+                    return object.userData.type === ArmorType.External &&
+                      object.userData.variant === 'track'
+                      ? index === firstTrackIntersectionIndex
+                      : true;
+                  });
+                }
+
+                return intersections;
+              }
+
+              function pushLogs(
+                shellNormal: Vector3,
+                intersections: ArmorMeshIntersection[],
+                startingIndex: number,
+              ) {
+                let layerIndex = startingIndex;
+                let loopIndex = 0;
+
+                if (layerIndex !== 0 && intersections.length > 0) {
+                  const distance = (
+                    shot.layers.at(-1) as ShotLayerBase
+                  ).point.distanceTo(intersections[0].point);
                   if (explosive && !splashing)
                     remainingPenetration -=
                       0.5 * remainingPenetration * distance;
-                  const wasted = remainingPenetration < 0;
-
-                  shot.layers.push({
-                    type: null,
-                    status: wasted ? 'blocked' : 'penetration',
-                    distance,
-                  });
-
-                  if (wasted && !splashing) return;
-                }
-
-                if (intersection.object.userData.type === ArmorType.External) {
-                  remainingPenetration -= thickness;
                   const blocked = remainingPenetration < 0;
 
                   shot.layers.push({
-                    type: ArmorType.External,
-                    index: layerIndex,
-                    shellNormal,
-                    surfaceNormal,
-                    point: intersection.point,
-                    thickness: intersection.object.userData.thickness,
+                    type: null,
                     status: blocked ? 'blocked' : 'penetration',
+                    distance,
                   });
 
-                  if (splashing) {
-                    remainingPenetration = Math.max(0, remainingPenetration);
-                  } else if (blocked) {
-                    break;
-                  }
-                } else {
-                  const type = intersection.object.userData.type;
-                  const angle = surfaceNormal.angleTo(shellNormal);
-                  const ricochet = degToRad(shell.ricochet ?? 90);
-                  const normalization = degToRad(shell.normalization ?? 0);
-                  const threeCalibersRule =
-                    shell.caliber > thickness * 3 || layerIndex > 0;
-                  const twoCalibersRule = shell.caliber > thickness * 2;
-                  const finalNormalization = twoCalibersRule
-                    ? (1.4 * normalization * shell.caliber) / (2.0 * thickness)
-                    : normalization;
-                  const finalThickness =
-                    thickness === 0
-                      ? 0
-                      : thickness /
-                        Math.cos(Math.max(0, angle - finalNormalization));
+                  if (blocked) return;
+                }
+
+                for (const intersection of intersections) {
+                  const surfaceNormal = intersection
+                    .normal!.clone()
+                    .applyQuaternion(
+                      event.object.getWorldQuaternion(new Quaternion()),
+                    );
+                  const thickness =
+                    thicknessCoefficient *
+                    intersection.object.userData.thickness;
+
+                  if (layerIndex !== 0 && startingIndex === 0) {
+                    const previousIntersection = intersections[layerIndex - 1];
+                    const distance =
+                      intersection.distance - previousIntersection.distance;
+                    if (explosive && !splashing)
+                      remainingPenetration -=
+                        0.5 * remainingPenetration * distance;
+                    const wasted = remainingPenetration < 0;
 
-                  if (!threeCalibersRule && angle >= ricochet) {
                     shot.layers.push({
-                      type,
-                      index: layerIndex,
-                      shellNormal,
-                      surfaceNormal,
-                      point: intersection.point,
-                      thickness,
-                      thicknessAngled: finalThickness,
-                      angle,
-                      status: 'ricochet',
+                      type: null,
+                      status: wasted ? 'blocked' : 'penetration',
+                      distance,
                     });
 
-                    remainingPenetration *= 0.75;
+                    if (wasted && !splashing) return;
+                  }
 
-                    const raycaster = new Raycaster();
-                    const newShellNormal = shellNormal
-                      .clone()
-                      .reflect(surfaceNormal);
-                    const newCameraNormal = newShellNormal
-                      .clone()
-                      .multiplyScalar(-1);
-
-                    raycaster.set(intersection.point, newCameraNormal);
-                    pushLogs(
-                      newShellNormal,
-                      filterIntersections(
-                        raycaster.intersectObjects(scene.children, true),
-                      ),
-                      layerIndex + 1,
-                    );
-
-                    break;
-                  } else {
-                    remainingPenetration -= finalThickness;
+                  if (
+                    intersection.object.userData.type === ArmorType.External
+                  ) {
+                    remainingPenetration -= thickness;
                     const blocked = remainingPenetration < 0;
 
                     shot.layers.push({
-                      type,
+                      type: ArmorType.External,
                       index: layerIndex,
                       shellNormal,
                       surfaceNormal,
                       point: intersection.point,
-                      thickness,
-                      thicknessAngled: finalThickness,
-                      angle,
+                      thickness: intersection.object.userData.thickness,
                       status: blocked ? 'blocked' : 'penetration',
                     });
+
+                    if (splashing) {
+                      remainingPenetration = Math.max(0, remainingPenetration);
+                    } else if (blocked) {
+                      break;
+                    }
+                  } else {
+                    const type = intersection.object.userData.type;
+                    const angle = surfaceNormal.angleTo(shellNormal);
+                    const ricochet = degToRad(shell.ricochet ?? 90);
+                    const normalization = degToRad(shell.normalization ?? 0);
+                    const threeCalibersRule =
+                      shell.caliber > thickness * 3 || layerIndex > 0;
+                    const twoCalibersRule = shell.caliber > thickness * 2;
+                    const finalNormalization = twoCalibersRule
+                      ? (1.4 * normalization * shell.caliber) /
+                        (2.0 * thickness)
+                      : normalization;
+                    const finalThickness =
+                      thickness === 0
+                        ? 0
+                        : thickness /
+                          Math.cos(Math.max(0, angle - finalNormalization));
+
+                    if (!threeCalibersRule && angle >= ricochet) {
+                      shot.layers.push({
+                        type,
+                        index: layerIndex,
+                        shellNormal,
+                        surfaceNormal,
+                        point: intersection.point,
+                        thickness,
+                        thicknessAngled: finalThickness,
+                        angle,
+                        status: 'ricochet',
+                      });
+
+                      remainingPenetration *= 0.75;
+
+                      const raycaster = new Raycaster();
+                      const newShellNormal = shellNormal
+                        .clone()
+                        .reflect(surfaceNormal);
+                      const newCameraNormal = newShellNormal
+                        .clone()
+                        .multiplyScalar(-1);
+
+                      raycaster.set(intersection.point, newCameraNormal);
+                      pushLogs(
+                        newShellNormal,
+                        filterIntersections(
+                          raycaster.intersectObjects(scene.children, true),
+                        ),
+                        layerIndex + 1,
+                      );
+
+                      break;
+                    } else {
+                      remainingPenetration -= finalThickness;
+                      const blocked = remainingPenetration < 0;
+
+                      shot.layers.push({
+                        type,
+                        index: layerIndex,
+                        shellNormal,
+                        surfaceNormal,
+                        point: intersection.point,
+                        thickness,
+                        thicknessAngled: finalThickness,
+                        angle,
+                        status: blocked ? 'blocked' : 'penetration',
+                      });
+                    }
                   }
+
+                  layerIndex++;
+                  loopIndex++;
                 }
-
-                layerIndex++;
-                loopIndex++;
               }
-            }
 
-            useTankopediaTemporary.setState({ shot });
+              useTankopediaTemporary.setState({ shot });
+            },
           },
-        })}
+          node.uuid,
+        )}
 
       {props.type === ArmorType.Spaced && (
         <SpacedArmorSubSpaced node={node} thickness={thickness} />

src/components/CrewSkillManager.tsx

@@ -28,6 +28,7 @@ export function CrewSkillManager({
 
               return (
                 <GenericTankComponentButton
+                  key={skill}
                   special={!permanentSkills.includes(skill)}
                   first
                   last

src/components/Navbar/index.tsx

@@ -131,6 +131,7 @@ export default function Navbar() {
 
                     return (
                       <LinkRadix
+                        key={tool.id}
                         tabIndex={-1}
                         href={`/tools/${tool.id}`}
                         onClick={(event) => event.preventDefault()}

src/components/Party3.tsx

@@ -1,10 +1,16 @@
-export function Google() {
+import { useEffect } from 'react';
+
+export function Party3() {
+  useEffect(() => {
+    (window as any).msAdsQueue = (window as any).msAdsQueue || [];
+  }, []);
+
   return (
     <>
       {/* analytics */}
       <script
         async
-        src="https://www.googletagmanager.com/gtag/js?id=G-98NTMRHRP9"
+        src="https://www.googletagmanager.com/gtag/js?id=G-D8DT6EWVFJ"
       />
       <script
         dangerouslySetInnerHTML={{
@@ -13,7 +19,7 @@ export function Google() {
             function gtag(){dataLayer.push(arguments);}
             gtag('js', new Date());
 
-            gtag('config', 'G-98NTMRHRP9');
+            gtag('config', 'G-D8DT6EWVFJ');
           `,
         }}
       />
@@ -24,6 +30,13 @@ export function Google() {
         src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1289406790225052"
         crossOrigin="anonymous"
       />
+
+      {/* pub center */}
+      {/* <script
+        async
+        src="https://adsdk.microsoft.com/pubcenter/sdk.js?siteId=364477&publisherId=253617120"
+        crossOrigin="anonymous"
+      /> */}
     </>
   );
 }