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 (
-
-
- setStatsVisible((state) => !state)}
- style={{
- cursor: 'pointer',
- }}
+
+ {config && (
+
- Statistics {statsVisible ? : }
-
+ setConfigureVisible((state) => !state)}
+ style={{
+ cursor: 'pointer',
+ }}
+ >
+ Configure{' '}
+ {configureVisible ? : }
+
- {statsVisible && (
-
-
- Survivability
-
+ {configureVisible && (
+
+
+
+
+
+
+
+ )}
+
+ )}
-
- Lethality
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Flexibility
-
-
-
-
-
-
- Mobility
-
-
-
-
-
-
-
-
-
-
-
-
- Stealth
-
-
-
-
-
-
-
-
- )}
-
-
-
- setConfigureVisible((state) => !state)}
- style={{
- cursor: 'pointer',
- }}
+ {!config && (
+
- Configure {configureVisible ? : }
-
+ setStatsVisible((state) => !state)}
+ style={{
+ cursor: 'pointer',
+ }}
+ >
+ Statistics {statsVisible ? : }
+
- {configureVisible && (
-
-
-
-
-
-
-
-
- )}
-
+ {statsVisible && (
+
+
+ Survivability
+
+
+
+
+ Lethality
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Flexibility
+
+
+
+
+
+
+ Mobility
+
+
+
+
+
+
+
+
+
+
+
+
+ Stealth
+
+
+
+
+
+
+
+
+ )}
+
+ )}
);
}
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 (
-
+
{assigned && (
-
-
-
-
-
-
+
+
+
-
+
+
+
+
+
+
+
+
)}
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 {
color?: ComponentProps['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',