From c73eb0d95138fb7c17e8eb7fd13f5a2122be60ac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Mon, 19 Aug 2024 13:56:04 -0500
Subject: [PATCH] feat: testing warning

---
 .../[id]/components/Model/HeroSection.tsx     | 31 +++++++++++++------
 .../[id]/components/TestingSection.tsx        | 23 ++++++++++++++
 src/app/tools/tankopedia/[id]/page.tsx        |  2 ++
 .../components/TankSearch/index.tsx           |  4 +--
 4 files changed, 49 insertions(+), 11 deletions(-)
 create mode 100644 src/app/tools/tankopedia/[id]/components/TestingSection.tsx

diff --git a/src/app/tools/tankopedia/[id]/components/Model/HeroSection.tsx b/src/app/tools/tankopedia/[id]/components/Model/HeroSection.tsx
index d2c728148..f415d4186 100644
--- a/src/app/tools/tankopedia/[id]/components/Model/HeroSection.tsx
+++ b/src/app/tools/tankopedia/[id]/components/Model/HeroSection.tsx
@@ -3,6 +3,7 @@ import { Box, Button, Flex, Heading, Text } from '@radix-ui/themes';
 import Link from 'next/link';
 import { Suspense, use, useEffect, useMemo, useState } from 'react';
 import { classIcons } from '../../../../../../components/ClassIcon';
+import { ScienceIcon } from '../../../../../../components/ScienceIcon';
 import { ThicknessRange } from '../../../../../../components/StaticArmor';
 import { resolveNearPenetration } from '../../../../../../core/blitz/resolveNearPenetration';
 import { tankDefinitions } from '../../../../../../core/blitzkit/tankDefinitions';
@@ -100,15 +101,27 @@ export function HeroSection({ id }: HeroSectionProps) {
               </Heading>
             </Flex>
 
-            <Text color="gray" ml={{ initial: '0', md: '9' }}>
-              Tier {TIER_ROMAN_NUMERALS[protagonist.tier]}{' '}
-              {
-                (strings.common.nations_adjectives as Record<string, string>)[
-                  protagonist.nation
-                ]
-              }{' '}
-              {strings.common.tank_class_short[protagonist.class]}
-            </Text>
+            <Flex direction="column" ml={{ initial: '0', md: '9' }}>
+              {tank.testing && (
+                <Text color="red">
+                  <Flex align="center" gap="1">
+                    Tank in testing
+                    <ScienceIcon width="1em" height="1em" />
+                  </Flex>
+                </Text>
+              )}
+
+              <Text color="gray">
+                Tier {TIER_ROMAN_NUMERALS[protagonist.tier]}{' '}
+                {
+                  (strings.common.nations_adjectives as Record<string, string>)[
+                    protagonist.nation
+                  ]
+                }{' '}
+                {strings.common.tank_class_short[protagonist.class]}
+              </Text>
+            </Flex>
+
             <Flex gap="4" ml={{ initial: '0', md: '9' }} mt="-1">
               <Link href="/tools/tankopedia">
                 <Button variant="ghost" size="1" ml="-1">
diff --git a/src/app/tools/tankopedia/[id]/components/TestingSection.tsx b/src/app/tools/tankopedia/[id]/components/TestingSection.tsx
new file mode 100644
index 000000000..91d7795de
--- /dev/null
+++ b/src/app/tools/tankopedia/[id]/components/TestingSection.tsx
@@ -0,0 +1,23 @@
+import { Callout, Flex } from '@radix-ui/themes';
+import { ExperimentIcon } from '../../../../../components/ExperimentIcon';
+import * as Duel from '../../../../../stores/duel';
+
+export function TestingSection() {
+  const tank = Duel.use((state) => state.protagonist.tank);
+
+  if (!tank.testing) return null;
+
+  return (
+    <Flex justify="center" mb="4">
+      <Callout.Root>
+        <Callout.Icon>
+          <ExperimentIcon style={{ width: '1em', height: '1em' }} />
+        </Callout.Icon>
+        <Callout.Text>
+          Tanks in testing are subject to change and may not represent the final
+          product.
+        </Callout.Text>
+      </Callout.Root>
+    </Flex>
+  );
+}
diff --git a/src/app/tools/tankopedia/[id]/page.tsx b/src/app/tools/tankopedia/[id]/page.tsx
index a5a06d49e..f01680809 100644
--- a/src/app/tools/tankopedia/[id]/page.tsx
+++ b/src/app/tools/tankopedia/[id]/page.tsx
@@ -12,6 +12,7 @@ import { GameModeSection } from './components/Model/GameModeSection';
 import { HeroSection } from './components/Model/HeroSection';
 import { TechTreeSection } from './components/Model/TechTreeSection';
 import { ShotDisplaySection } from './components/ShotDisplaySection';
+import { TestingSection } from './components/TestingSection';
 import { VideoSection } from './components/VideoSection';
 
 export default function Page({ params }: { params: { id: string } }) {
@@ -78,6 +79,7 @@ export default function Page({ params }: { params: { id: string } }) {
       <HeroSection id={id} />
       <ShotDisplaySection />
       {!exempt && <AdMidSectionResponsive />}
+      <TestingSection />
       <CharacteristicsSection />
       {!exempt && <AdMidSectionResponsive />}
       <GameModeSection />
diff --git a/src/app/tools/tankopedia/components/TankSearch/index.tsx b/src/app/tools/tankopedia/components/TankSearch/index.tsx
index 1ff8903bd..2cbe1f64b 100644
--- a/src/app/tools/tankopedia/components/TankSearch/index.tsx
+++ b/src/app/tools/tankopedia/components/TankSearch/index.tsx
@@ -433,8 +433,8 @@ export const TankSearch = memo<TankSearchProps>(
                 <ExperimentIcon style={{ width: '1em', height: '1em' }} />
               </Callout.Icon>
               <Callout.Text>
-                Tanks in testing are subject to change and many not represent
-                the final product.
+                Tanks in testing are subject to change and may not represent the
+                final product.
               </Callout.Text>
             </Callout.Root>
           </Flex>