Merge branch 'main' into dev-rinth

src/app/layout.tsx

@@ -7,9 +7,9 @@ import { Roboto_Flex } from 'next/font/google';
 import { usePathname } from 'next/navigation';
 import { ReactNode, Suspense, useEffect, useState } from 'react';
 import { Footer } from '../components/Footer';
-import { Google } from '../components/Google';
 import { Loader } from '../components/Loader';
 import Navbar from '../components/Navbar';
+import { Party3 } from '../components/Party3';
 import isDev from '../core/blitzrinth/isDev';
 import { isLocalhost } from '../core/blitzrinth/isLocalhost';
 import { useFullScreen } from '../hooks/useFullScreen';
@@ -60,7 +60,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
         <meta property="og:site_name" content="Blitzrinth" />
         <link rel="icon" type="image/x-icon" href="/favicon.ico" />
 
-        <Google />
+        <Party3 />
       </head>
 
       <body

src/app/tools/compare/page.tsx

@@ -1233,10 +1233,21 @@ export default function Page() {
                   <Row name="Shells" value="shells" decimals={0} />
                 </>
               )}
-              <Row name="Caliber" value="caliber" decimals={0} />
               <Row name="Penetration" value="penetration" decimals={0} />
               <Row name="Damage" value="damage" decimals={0} />
               <Row name="Module damage" value="moduleDamage" decimals={0} />
+              <Row name="Caliber" value="caliber" decimals={0} />
+              <Row
+                name="Normalization"
+                value="shellNormalization"
+                decimals={0}
+              />
+              <Row
+                name="Ricochet"
+                value="shellRicochet"
+                deltaType="lowerIsBetter"
+                decimals={0}
+              />
               <Row name="Shell velocity" value="shellVelocity" decimals={0} />
               <Row
                 name="Aim time"

src/app/tools/tankopedia/[id]/components/AntagonistBar.tsx

@@ -191,6 +191,7 @@ export function AntagonistBar({ floating }: AntagonistBarProps) {
                             <Flex>
                               {antagonist.turret.guns.map((gun, index) => (
                                 <ModuleButton
+                                  key={gun.id}
                                   rowChild
                                   first={index === 0}
                                   last={

src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx

@@ -9,7 +9,7 @@ import {
   TextField,
 } from '@radix-ui/themes';
 import { debounce } from 'lodash';
-import { use, useEffect, useRef, useState } from 'react';
+import { Fragment, use, useEffect, useRef, useState } from 'react';
 import { lerp } from 'three/src/math/MathUtils';
 import { ShellButton } from '../../../../../../components/ModuleButtons/ShellButton';
 import { applyPitchYawLimits } from '../../../../../../core/blitz/applyPitchYawLimits';
@@ -155,7 +155,6 @@ export function Characteristics() {
             })}
           </Flex>
         </Flex>
-
         <Info name="Gun type">{GUN_TYPE_NAMES[gun.type]}</Info>
         <InfoWithDelta name="DPM" decimals={0} unit="hp / min">
           {stats.dpm}
@@ -189,7 +188,6 @@ export function Characteristics() {
         {gun.type !== 'regular' && (
           <InfoWithDelta name="Shells">{stats.shells}</InfoWithDelta>
         )}
-
         {gun.type === 'autoReloader' ? (
           <>
             <Info indent name="Most optimal">
@@ -229,9 +227,6 @@ export function Characteristics() {
             {stats.intraClip!}
           </InfoWithDelta>
         )}
-        <InfoWithDelta name="Caliber" decimals={0} unit="mm">
-          {stats.caliber}
-        </InfoWithDelta>
         <InfoWithDelta decimals={0} name="Penetration" unit="mm">
           {stats.penetration}
         </InfoWithDelta>
@@ -295,6 +290,22 @@ export function Characteristics() {
             {stats.explosionRadius!}
           </InfoWithDelta>
         )}
+        <InfoWithDelta name="Caliber" decimals={0} unit="mm">
+          {stats.caliber}
+        </InfoWithDelta>
+        <InfoWithDelta name="Normalization" decimals={0} unit="°">
+          {stats.shellNormalization}
+        </InfoWithDelta>
+        {shell.type !== 'he' && (
+          <InfoWithDelta
+            name="Ricochet"
+            decimals={0}
+            deltaType="lowerIsBetter"
+            unit="°"
+          >
+            {stats.shellRicochet!}
+          </InfoWithDelta>
+        )}
         <InfoWithDelta name="Shell velocity" unit="m/s" decimals={0}>
           {stats.shellVelocity}
         </InfoWithDelta>
@@ -516,7 +527,7 @@ export function Characteristics() {
           const count = member.count ?? 1;
 
           return (
-            <>
+            <Fragment key={member.type}>
               <InfoWithDelta
                 key={`${member.type}-root`}
                 name={`${CREW_MEMBER_NAMES[member.type]}${count > 1 ? ` x ${count}` : ''}`}
@@ -545,7 +556,7 @@ export function Characteristics() {
                   }
                 />
               )}
-            </>
+            </Fragment>
           );
         })}
       </Flex>

src/app/tools/tankopedia/[id]/components/Model/components/TankModel.tsx

@@ -124,11 +124,15 @@ export const TankModel = memo(() => {
           event.stopPropagation();
         }
 
-        return jsxTree(node, {
-          castShadow: true,
-          receiveShadow: true,
-          onPointerDown,
-        });
+        return jsxTree(
+          node,
+          {
+            castShadow: true,
+            receiveShadow: true,
+            onPointerDown,
+          },
+          node.uuid,
+        );
       })}
 
       <group ref={turretContainer}>
@@ -189,11 +193,15 @@ export const TankModel = memo(() => {
             window.removeEventListener('pointerup', handlePointerUp);
           }
 
-          return jsxTree(node, {
-            castShadow: true,
-            receiveShadow: true,
-            onPointerDown,
-          });
+          return jsxTree(
+            node,
+            {
+              castShadow: true,
+              receiveShadow: true,
+              onPointerDown,
+            },
+            node.uuid,
+          );
         })}
 
         <group ref={gunContainer}>
@@ -255,11 +263,15 @@ export const TankModel = memo(() => {
               window.removeEventListener('pointerup', handlePointerUp);
             }
 
-            return jsxTree(node, {
-              castShadow: true,
-              receiveShadow: true,
-              onPointerDown,
-            });
+            return jsxTree(
+              node,
+              {
+                castShadow: true,
+                receiveShadow: true,
+                onPointerDown,
+              },
+              node.uuid,
+            );
           })}
         </group>
       </group>

src/app/tools/tankopedia/[id]/components/Videos.tsx

@@ -0,0 +1,74 @@
+import { InfoCircledIcon, PlusIcon } from '@radix-ui/react-icons';
+import { Callout, Card, Flex, Heading, Link, Text } from '@radix-ui/themes';
+import { use } from 'react';
+import { videoDefinitions } from '../../../../../core/blitzkrieg/videos';
+import { useFullScreen } from '../../../../../hooks/useFullScreen';
+import { useDuel } from '../../../../../stores/duel';
+
+export function Videos() {
+  const isFullScreen = useFullScreen();
+  const tank = useDuel((state) => state.protagonist!.tank);
+  const awaitedVideoDefinitions = use(videoDefinitions);
+  const videos = awaitedVideoDefinitions[tank.id]?.videos ?? [];
+
+  if (isFullScreen) return null;
+
+  return (
+    <Flex direction="column" gap="4" mt="4" align="start">
+      <Heading size="6">Review videos</Heading>
+
+      <Callout.Root>
+        <Callout.Icon>
+          <InfoCircledIcon />
+        </Callout.Icon>
+        <Callout.Text>
+          Some YouTubers may not have videos on the {tank.name} leading to
+          off-topic videos.
+        </Callout.Text>
+      </Callout.Root>
+
+      <Flex gap="3" wrap="wrap">
+        {videos.map((video) => (
+          <Link
+            key={video}
+            href={`https://www.youtube.com/watch?v=${video}`}
+            target="_blank"
+          >
+            <img
+              src={`https://i.ytimg.com/vi/${video}/hqdefault.jpg`}
+              style={{
+                aspectRatio: '16 / 9',
+                objectFit: 'cover',
+                height: 128,
+                borderRadius: 8,
+              }}
+            />
+          </Link>
+        ))}
+
+        <Link href="https://discord.gg/nDt7AjGJQH" target="_blank">
+          <Card
+            style={{
+              aspectRatio: '16 / 9',
+              height: 128,
+            }}
+          >
+            <Flex
+              align="center"
+              justify="center"
+              gap="1"
+              style={{
+                width: '100%',
+                height: '100%',
+              }}
+            >
+              <Text color="purple">
+                {videos.length === 0 ? 'Suggest' : 'Suggest more'} <PlusIcon />
+              </Text>
+            </Flex>
+          </Card>
+        </Link>
+      </Flex>
+    </Flex>
+  );
+}

src/app/tools/tankopedia/[id]/page.tsx

@@ -17,6 +17,7 @@ import { Provisions } from './components/Characteristics/components/Provisions';
 import { Skills } from './components/Characteristics/components/Skills';
 import { TankSandbox } from './components/Model/TankSandbox';
 import { Title } from './components/Title';
+import { Videos } from './components/Videos';
 
 export default function Page({ params }: { params: { id: string } }) {
   const initialId = parseInt(params.id);
@@ -83,7 +84,7 @@ export default function Page({ params }: { params: { id: string } }) {
               style={{
                 flex: 1,
                 width: '100%',
-                top: 64,
+                top: 64 + 16,
                 position: wideFormat ? 'sticky' : undefined,
               }}
             >
@@ -91,7 +92,6 @@ export default function Page({ params }: { params: { id: string } }) {
                 <TankSandbox />
                 <AntagonistBar />
               </Flex>
-
               <Flex gap="5" wrap="wrap">
                 <Modules />
                 <Provisions />
@@ -110,6 +110,8 @@ export default function Page({ params }: { params: { id: string } }) {
               <Characteristics />
             </Flex>
           </Flex>
+
+          <Videos />
         </>
       )}
     </PageWrapper>

src/app/tools/tankopedia/map/page.tsx

@@ -1,5 +1,8 @@
+'use client';
+
 import { Flex, Link } from '@radix-ui/themes';
 import { use } from 'react';
+import { AdHorizontal } from '../../../../components/Ads/Horizontal';
 import PageWrapper from '../../../../components/PageWrapper';
 import { tankDefinitions } from '../../../../core/blitzrinth/tankDefinitions';
 
@@ -8,11 +11,17 @@ export default function Page() {
 
   return (
     <PageWrapper>
+      <title>Super duper secret map for SEO</title>
+
+      <AdHorizontal />
+
       <Flex direction="column" align="center">
         {Object.values(awaitedTankDefinitions)
           .sort((a, b) => b.tier - a.tier)
           .map((tank) => (
-            <Link href={`./${tank.id}`}>{tank.name}</Link>
+            <Link href={`./${tank.id}`} key={tank.id}>
+              {tank.name}
+            </Link>
           ))}
       </Flex>
     </PageWrapper>