From 8d1745d47e057fb3642f9e931ab4aaad9efa37c1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Fri, 26 Jan 2024 22:33:32 -0600
Subject: [PATCH] feat: test stats

---
 .../components/Camouflage.tsx                 |   0
 .../components/ConfigurationChildWrapper.tsx  |   2 +-
 .../components/Consumables.tsx                |   0
 .../components/Crew.tsx                       |   9 +-
 .../components/Equipments.tsx                 |   0
 .../Characteristics/components/Info.tsx       |  36 ++++++
 .../components/Modules.tsx                    |   0
 .../components/Provisions.tsx                 |   0
 .../components/Survivability.tsx              |   9 ++
 .../[id]/components/Characteristics/index.tsx | 117 ++++++++++++++++++
 .../[id]/components/Configure/index.tsx       |  24 ----
 src/app/tools/tankopedia/[id]/page.tsx        |   4 +-
 12 files changed, 170 insertions(+), 31 deletions(-)
 rename src/app/tools/tankopedia/[id]/components/{Configure => Characteristics}/components/Camouflage.tsx (100%)
 rename src/app/tools/tankopedia/[id]/components/{Configure => Characteristics}/components/ConfigurationChildWrapper.tsx (79%)
 rename src/app/tools/tankopedia/[id]/components/{Configure => Characteristics}/components/Consumables.tsx (100%)
 rename src/app/tools/tankopedia/[id]/components/{Configure => Characteristics}/components/Crew.tsx (97%)
 rename src/app/tools/tankopedia/[id]/components/{Configure => Characteristics}/components/Equipments.tsx (100%)
 create mode 100644 src/app/tools/tankopedia/[id]/components/Characteristics/components/Info.tsx
 rename src/app/tools/tankopedia/[id]/components/{Configure => Characteristics}/components/Modules.tsx (100%)
 rename src/app/tools/tankopedia/[id]/components/{Configure => Characteristics}/components/Provisions.tsx (100%)
 create mode 100644 src/app/tools/tankopedia/[id]/components/Characteristics/components/Survivability.tsx
 create mode 100644 src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx
 delete mode 100644 src/app/tools/tankopedia/[id]/components/Configure/index.tsx

diff --git a/src/app/tools/tankopedia/[id]/components/Configure/components/Camouflage.tsx b/src/app/tools/tankopedia/[id]/components/Characteristics/components/Camouflage.tsx
similarity index 100%
rename from src/app/tools/tankopedia/[id]/components/Configure/components/Camouflage.tsx
rename to src/app/tools/tankopedia/[id]/components/Characteristics/components/Camouflage.tsx
diff --git a/src/app/tools/tankopedia/[id]/components/Configure/components/ConfigurationChildWrapper.tsx b/src/app/tools/tankopedia/[id]/components/Characteristics/components/ConfigurationChildWrapper.tsx
similarity index 79%
rename from src/app/tools/tankopedia/[id]/components/Configure/components/ConfigurationChildWrapper.tsx
rename to src/app/tools/tankopedia/[id]/components/Characteristics/components/ConfigurationChildWrapper.tsx
index f768431ab..bd6cc1b46 100644
--- a/src/app/tools/tankopedia/[id]/components/Configure/components/ConfigurationChildWrapper.tsx
+++ b/src/app/tools/tankopedia/[id]/components/Characteristics/components/ConfigurationChildWrapper.tsx
@@ -9,7 +9,7 @@ export function ConfigurationChildWrapper({
   children,
 }: ConfigurationChildWrapperProps) {
   return (
-    <Flex direction="column" gap="2">
+    <Flex direction="column" gap="2" align="end" style={{ width: '100%' }}>
       {children}
     </Flex>
   );
diff --git a/src/app/tools/tankopedia/[id]/components/Configure/components/Consumables.tsx b/src/app/tools/tankopedia/[id]/components/Characteristics/components/Consumables.tsx
similarity index 100%
rename from src/app/tools/tankopedia/[id]/components/Configure/components/Consumables.tsx
rename to src/app/tools/tankopedia/[id]/components/Characteristics/components/Consumables.tsx
diff --git a/src/app/tools/tankopedia/[id]/components/Configure/components/Crew.tsx b/src/app/tools/tankopedia/[id]/components/Characteristics/components/Crew.tsx
similarity index 97%
rename from src/app/tools/tankopedia/[id]/components/Configure/components/Crew.tsx
rename to src/app/tools/tankopedia/[id]/components/Characteristics/components/Crew.tsx
index 2eb767305..0341d12d3 100644
--- a/src/app/tools/tankopedia/[id]/components/Configure/components/Crew.tsx
+++ b/src/app/tools/tankopedia/[id]/components/Characteristics/components/Crew.tsx
@@ -12,17 +12,18 @@ export function Crew() {
         style={{
           width: '100%',
         }}
+        justify="end"
       >
-        <TextField.Root style={{ width: 64 }}>
-          <TextField.Input defaultValue={100} />
-          <TextField.Slot>%</TextField.Slot>
-        </TextField.Root>
         <Slider
           min={50}
           max={100}
           defaultValue={[100]}
           style={{ flex: 1, maxWidth: 208 }}
         />
+        <TextField.Root style={{ width: 64 }}>
+          <TextField.Input defaultValue={100} />
+          <TextField.Slot>%</TextField.Slot>
+        </TextField.Root>
       </Flex>
     </ConfigurationChildWrapper>
   );
diff --git a/src/app/tools/tankopedia/[id]/components/Configure/components/Equipments.tsx b/src/app/tools/tankopedia/[id]/components/Characteristics/components/Equipments.tsx
similarity index 100%
rename from src/app/tools/tankopedia/[id]/components/Configure/components/Equipments.tsx
rename to src/app/tools/tankopedia/[id]/components/Characteristics/components/Equipments.tsx
diff --git a/src/app/tools/tankopedia/[id]/components/Characteristics/components/Info.tsx b/src/app/tools/tankopedia/[id]/components/Characteristics/components/Info.tsx
new file mode 100644
index 000000000..40b2a93b0
--- /dev/null
+++ b/src/app/tools/tankopedia/[id]/components/Characteristics/components/Info.tsx
@@ -0,0 +1,36 @@
+import { Flex, Text } from '@radix-ui/themes';
+import { theme } from '../../../../../../../stitches.config';
+
+interface InfoProps {
+  name: string;
+  value: string;
+  unit: string;
+  indent?: boolean;
+}
+
+export function Info({ name, value, unit, indent = false }: InfoProps) {
+  return (
+    <Flex
+      align="center"
+      style={{ width: '100%', paddingLeft: indent ? 24 : 0 }}
+      gap="4"
+    >
+      <Text>
+        {name}{' '}
+        <Text color="gray" size="1">
+          {unit}
+        </Text>
+      </Text>
+
+      <div
+        style={{
+          flex: 1,
+          height: 1,
+          backgroundColor: theme.colors.componentCallToActionInteractive_alpha,
+        }}
+      />
+
+      <Text>{value}</Text>
+    </Flex>
+  );
+}
diff --git a/src/app/tools/tankopedia/[id]/components/Configure/components/Modules.tsx b/src/app/tools/tankopedia/[id]/components/Characteristics/components/Modules.tsx
similarity index 100%
rename from src/app/tools/tankopedia/[id]/components/Configure/components/Modules.tsx
rename to src/app/tools/tankopedia/[id]/components/Characteristics/components/Modules.tsx
diff --git a/src/app/tools/tankopedia/[id]/components/Configure/components/Provisions.tsx b/src/app/tools/tankopedia/[id]/components/Characteristics/components/Provisions.tsx
similarity index 100%
rename from src/app/tools/tankopedia/[id]/components/Configure/components/Provisions.tsx
rename to src/app/tools/tankopedia/[id]/components/Characteristics/components/Provisions.tsx
diff --git a/src/app/tools/tankopedia/[id]/components/Characteristics/components/Survivability.tsx b/src/app/tools/tankopedia/[id]/components/Characteristics/components/Survivability.tsx
new file mode 100644
index 000000000..676da483a
--- /dev/null
+++ b/src/app/tools/tankopedia/[id]/components/Characteristics/components/Survivability.tsx
@@ -0,0 +1,9 @@
+import { Flex } from '@radix-ui/themes';
+import { Info } from './Info';
+
+export function Survivability() {
+  return (
+    <Flex>
+    </Flex>
+  );
+}
diff --git a/src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx b/src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx
new file mode 100644
index 000000000..ebd47c4b7
--- /dev/null
+++ b/src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx
@@ -0,0 +1,117 @@
+import { Flex, Heading } from '@radix-ui/themes';
+import { Camouflage } from './components/Camouflage';
+import { Consumables } from './components/Consumables';
+import { Crew } from './components/Crew';
+import { Equipments } from './components/Equipments';
+import { Info } from './components/Info';
+import { Modules } from './components/Modules';
+import { Provisions } from './components/Provisions';
+
+export function Characteristics() {
+  return (
+    <Flex gap="4" direction="column">
+      <Flex gap="8">
+        <Flex
+          style={{ flex: 1 }}
+          wrap="wrap"
+          direction="column"
+          gap="4"
+          align="end"
+        >
+          <Heading>Configure</Heading>
+
+          <Modules />
+          <Equipments />
+          <Crew />
+          <Consumables />
+          <Provisions />
+          <Camouflage />
+        </Flex>
+
+        <Flex style={{ flex: 1 }} wrap="wrap" direction="column" gap="4">
+          <Heading>Statistics</Heading>
+
+          <Flex direction="column" gap="6">
+            <Flex direction="column" gap="2">
+              <Heading size="4">Survivability</Heading>
+              <Info name="Health" value="2014" unit="hp" />
+            </Flex>
+
+            <Flex direction="column" gap="2">
+              <Heading size="4">Lethality</Heading>
+              <Info name="Armor damage" value="330" unit="hp" />
+              <Info indent name="Module damage" value="125" unit="hp" />
+              <Info indent name="Caliber" value="100" unit="mm" />
+              <Info name="Penetration" value="257" unit="mm" />
+              <Info indent name="At 500m" value="240" unit="mm" />
+              <Info name="Damage per minute" value="2316" unit="hp / min" />
+              <Info indent name="Maximum" value="2316" unit="hp / min" />
+              <Info
+                indent
+                name="Effective at 60s"
+                value="2316"
+                unit="hp / min"
+              />
+              <Info name="Reload" value="5.73" unit="s" />
+              <Info name="Shell velocity" value="1535" unit="m/s" />
+              <Info name="Aim time" value="1.72" unit="s" />
+              <Info name="Dispersion" value="0.326" unit="m" />
+              <Info indent name="On move" value="0.100" unit="m" />
+              <Info indent name="On hull traverse" value="0.100" unit="m" />
+              <Info indent name="On turret traverse" value="0.070" unit="m" />
+              <Info indent name="On shoot" value="3.500" unit="m" />
+            </Flex>
+
+            <Flex direction="column" gap="2">
+              <Heading size="4">Flexibility</Heading>
+              <Info name="Gun depression" value="20" unit="°" />
+              <Info indent name="Elevation" value="7" unit="°" />
+              <Info indent name="Azimuth" value="30, 30" unit="°" />
+            </Flex>
+
+            <Flex direction="column" gap="2">
+              <Heading size="4">Mobility</Heading>
+              <Info name="Weight" value="45" unit="mt" />
+              <Info name="Speed forwards" value="55" unit="km/s" />
+              <Info indent name="Backward" value="20" unit="km/s" />
+              <Info
+                name="Effective power on hard terrain"
+                value="36.86"
+                unit="hp/kg"
+              />
+              <Info
+                indent
+                name="On medium terrain"
+                value="36.86"
+                unit="hp/kg"
+              />
+              <Info indent name="On soft terrain" value="36.86" unit="hp/kg" />
+              <Info
+                name="Traverse speed on hard terrain"
+                value="36.86"
+                unit="°/s"
+              />
+              <Info indent name="On medium terrain" value="36.86" unit="°/s" />
+              <Info indent name="On soft terrain" value="36.86" unit="°/s" />
+            </Flex>
+
+            <Flex direction="column" gap="2">
+              <Heading size="4">Stealth</Heading>
+              <Info name="View range" value="302" unit="m" />
+              <Info name="Size" value="6.21 x 2.43 x 2.00" unit="m" />
+              <Info name="Camouflage when still" value="30.00" unit="%" />
+              <Info indent name="When moving" value="30.00" unit="%" />
+              <Info indent name="When shooting still" value="30.00" unit="%" />
+              <Info
+                indent
+                name="When shooting while moving"
+                value="30.00"
+                unit="%"
+              />
+            </Flex>
+          </Flex>
+        </Flex>
+      </Flex>
+    </Flex>
+  );
+}
diff --git a/src/app/tools/tankopedia/[id]/components/Configure/index.tsx b/src/app/tools/tankopedia/[id]/components/Configure/index.tsx
deleted file mode 100644
index fbc138bea..000000000
--- a/src/app/tools/tankopedia/[id]/components/Configure/index.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Flex, Heading } from '@radix-ui/themes';
-import { Camouflage } from './components/Camouflage';
-import { Consumables } from './components/Consumables';
-import { Crew } from './components/Crew';
-import { Equipments } from './components/Equipments';
-import { Modules } from './components/Modules';
-import { Provisions } from './components/Provisions';
-
-export function Configure() {
-  return (
-    <Flex gap="4" direction="column">
-      <Heading>Configure</Heading>
-
-      <Flex wrap="wrap" direction="column" gap="4">
-        <Modules />
-        <Crew />
-        <Camouflage />
-        <Provisions />
-        <Consumables />
-        <Equipments />
-      </Flex>
-    </Flex>
-  );
-}
diff --git a/src/app/tools/tankopedia/[id]/page.tsx b/src/app/tools/tankopedia/[id]/page.tsx
index d4e1c7272..3c9512eec 100644
--- a/src/app/tools/tankopedia/[id]/page.tsx
+++ b/src/app/tools/tankopedia/[id]/page.tsx
@@ -7,7 +7,7 @@ import { tankDefinitions } from '../../../../core/blitzkrieg/tankDefinitions';
 import { mutateDuel, useDuel } from '../../../../stores/duel';
 import { mutateTankopediaTemporary } from '../../../../stores/tankopedia';
 import { AntagonistBar } from './components/AntagonistBar';
-import { Configure } from './components/Configure';
+import { Characteristics } from './components/Characteristics';
 import { TankSandbox } from './components/Model/TankSandbox';
 import { Title } from './components/Title';
 
@@ -88,7 +88,7 @@ export default function Page({ params }: { params: { id: string } }) {
             <AntagonistBar />
           </Flex>
 
-          <Configure />
+          <Characteristics />
         </Flex>
       )}
     </PageWrapper>