From f820d05082c3bdef5749d9203660891f18f04906 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Sat, 27 Jan 2024 13:53:19 -0600
Subject: [PATCH] feat: sticky sandbox

---
 .../[id]/components/Characteristics/index.tsx | 252 ++++++++++--------
 src/app/tools/tankopedia/[id]/page.tsx        |  40 ++-
 src/components/PageWrapper.tsx                |   4 +-
 3 files changed, 175 insertions(+), 121 deletions(-)

diff --git a/src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx b/src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx
index 2361ddd1d..f7fad827e 100644
--- a/src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx
+++ b/src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx
@@ -9,126 +9,158 @@ import { Info } from './components/Info';
 import { Modules } from './components/Modules';
 import { Provisions } from './components/Provisions';
 
-export function Characteristics() {
+interface CharacteristicsProps {
+  config?: boolean;
+}
+
+export function Characteristics({ config }: CharacteristicsProps) {
   const [configureVisible, setConfigureVisible] = useState(true);
   const [statsVisible, setStatsVisible] = useState(true);
 
   return (
-    <Flex gap="8" wrap="wrap">
-      <Flex style={{ flex: 1, minWidth: 320 }} direction="column" gap="4">
-        <Heading
-          onClick={() => setStatsVisible((state) => !state)}
-          style={{
-            cursor: 'pointer',
-          }}
+    <Flex gap="8" direction="column" wrap="wrap">
+      {config && (
+        <Flex
+          style={{ flex: 1, minWidth: 320, position: 'sticky', top: 64 }}
+          direction="column"
+          gap="4"
         >
-          Statistics {statsVisible ? <ChevronDownIcon /> : <ChevronUpIcon />}
-        </Heading>
+          <Heading
+            onClick={() => setConfigureVisible((state) => !state)}
+            style={{
+              cursor: 'pointer',
+            }}
+          >
+            Configure{' '}
+            {configureVisible ? <ChevronDownIcon /> : <ChevronUpIcon />}
+          </Heading>
 
-        {statsVisible && (
-          <Flex direction="column" gap="4">
-            <Flex direction="column" gap="2">
-              <Heading size="4">Survivability</Heading>
-              <Info name="Health" value="2014" unit="hp" />
+          {configureVisible && (
+            <Flex direction="column" gap="4">
+              <Modules />
+              <Equipments />
+              <Crew />
+              <Consumables />
+              <Provisions />
+              <Camouflage />
             </Flex>
+          )}
+        </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 style={{ flex: 1, minWidth: 320 }} direction="column" gap="4">
-        <Heading
-          onClick={() => setConfigureVisible((state) => !state)}
-          style={{
-            cursor: 'pointer',
-          }}
+      {!config && (
+        <Flex
+          style={{ flex: 1, minWidth: 320, position: 'sticky', top: 64 }}
+          direction="column"
+          gap="4"
         >
-          Configure {configureVisible ? <ChevronDownIcon /> : <ChevronUpIcon />}
-        </Heading>
+          <Heading
+            onClick={() => setStatsVisible((state) => !state)}
+            style={{
+              cursor: 'pointer',
+            }}
+          >
+            Statistics {statsVisible ? <ChevronDownIcon /> : <ChevronUpIcon />}
+          </Heading>
 
-        {configureVisible && (
-          <Flex direction="column" gap="4">
-            <Modules />
-            <Equipments />
-            <Crew />
-            <Consumables />
-            <Provisions />
-            <Camouflage />
-          </Flex>
-        )}
-      </Flex>
+          {statsVisible && (
+            <Flex direction="column" gap="4">
+              <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>
   );
 }
diff --git a/src/app/tools/tankopedia/[id]/page.tsx b/src/app/tools/tankopedia/[id]/page.tsx
index 3c9512eec..f3b2280c5 100644
--- a/src/app/tools/tankopedia/[id]/page.tsx
+++ b/src/app/tools/tankopedia/[id]/page.tsx
@@ -76,19 +76,41 @@ export default function Page({ params }: { params: { id: string } }) {
     return () => {
       window.removeEventListener('keydown', handleKeyDown);
     };
-  }, [id]);
+  }, [id, assigned]);
 
   return (
-    <PageWrapper color="purple">
+    <PageWrapper color="purple" size="full">
       {assigned && (
-        <Flex gap="8" direction="column">
-          <Flex gap="4" direction="column">
-            <Title />
-            <TankSandbox />
-            <AntagonistBar />
-          </Flex>
+        <Flex style={{ width: '100%' }} justify="center">
+          <Flex
+            gap="8"
+            direction="row"
+            align="start"
+            justify="center"
+            style={{
+              width: '100%',
+              // maxWidth: 1024,
+            }}
+          >
+            <Characteristics config />
 
-          <Characteristics />
+            <Flex
+              gap="4"
+              direction="column"
+              style={{
+                flex: 1,
+                maxWidth: 640,
+                position: 'sticky',
+                top: 64,
+              }}
+            >
+              <Title />
+              <TankSandbox />
+              <AntagonistBar />
+            </Flex>
+
+            <Characteristics />
+          </Flex>
         </Flex>
       )}
     </PageWrapper>
diff --git a/src/components/PageWrapper.tsx b/src/components/PageWrapper.tsx
index 09ce1bfb6..defdb9553 100644
--- a/src/components/PageWrapper.tsx
+++ b/src/components/PageWrapper.tsx
@@ -3,7 +3,7 @@ import { ComponentProps } from 'react';
 
 interface PageWrapperProps extends ComponentProps<typeof Flex> {
   color?: ComponentProps<typeof Theme>['accentColor'];
-  size?: 'regular' | 'wide';
+  size?: 'regular' | 'wide' | 'full';
 }
 
 export default function PageWrapper({
@@ -19,7 +19,7 @@ export default function PageWrapper({
         gap="4"
         style={{
           width: '100%',
-          maxWidth: size === 'regular' ? 800 : 960,
+          maxWidth: size === 'regular' ? 800 : size === 'full' ? '100%' : 960,
           margin: 'auto',
           padding: 16,
           boxSizing: 'border-box',