mirror of
https://github.com/blitzkit/blitzkit.git
synced 2026-10-25 11:39:51 +01:00
feat: collapse
This commit is contained in:
TrèsAbhi committed
1 parent
47b8f75447
commit
46719cd32a
1 file changed
+107
-72
@@ -1,4 +1,6 @@
|
|||||||
|
import { ChevronDownIcon, ChevronUpIcon } from '@radix-ui/react-icons';
|
||||||
import { Flex, Heading } from '@radix-ui/themes';
|
import { Flex, Heading } from '@radix-ui/themes';
|
||||||
|
import { useState } from 'react';
|
||||||
import * as styles from '../../../page.css';
|
import * as styles from '../../../page.css';
|
||||||
import { Camouflage } from './components/Camouflage';
|
import { Camouflage } from './components/Camouflage';
|
||||||
import { Consumables } from './components/Consumables';
|
import { Consumables } from './components/Consumables';
|
||||||
@@ -9,91 +11,124 @@ import { Modules } from './components/Modules';
|
|||||||
import { Provisions } from './components/Provisions';
|
import { Provisions } from './components/Provisions';
|
||||||
|
|
||||||
export function Characteristics() {
|
export function Characteristics() {
|
||||||
|
const [configureVisible, setConfigureVisible] = useState(true);
|
||||||
|
const [statsVisible, setStatsVisible] = useState(true);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Flex className={styles.characteristics}>
|
<Flex className={styles.characteristics}>
|
||||||
<div className={styles.configuration}>
|
<div className={styles.configuration}>
|
||||||
<Heading>Configure</Heading>
|
<Heading
|
||||||
|
onClick={() => setConfigureVisible((state) => !state)}
|
||||||
|
style={{
|
||||||
|
cursor: 'pointer',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Configure {configureVisible ? <ChevronDownIcon /> : <ChevronUpIcon />}
|
||||||
|
</Heading>
|
||||||
|
|
||||||
<Modules />
|
{configureVisible && (
|
||||||
<Equipments />
|
<Flex direction="column" gap="4">
|
||||||
<Crew />
|
<Modules />
|
||||||
<Consumables />
|
<Equipments />
|
||||||
<Provisions />
|
<Crew />
|
||||||
<Camouflage />
|
<Consumables />
|
||||||
|
<Provisions />
|
||||||
|
<Camouflage />
|
||||||
|
</Flex>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Flex style={{ flex: 1 }} wrap="wrap" direction="column" gap="4">
|
<Flex style={{ flex: 1 }} wrap="wrap" direction="column" gap="4">
|
||||||
<Heading>Statistics</Heading>
|
<Heading
|
||||||
|
onClick={() => setStatsVisible((state) => !state)}
|
||||||
|
style={{
|
||||||
|
cursor: 'pointer',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Statistics {statsVisible ? <ChevronDownIcon /> : <ChevronUpIcon />}
|
||||||
|
</Heading>
|
||||||
|
|
||||||
<Flex direction="column" gap="6">
|
{statsVisible && (
|
||||||
<Flex direction="column" gap="2">
|
<Flex direction="column" gap="4">
|
||||||
<Heading size="4">Survivability</Heading>
|
<Flex direction="column" gap="2">
|
||||||
<Info name="Health" value="2014" unit="hp" />
|
<Heading size="4">Survivability</Heading>
|
||||||
</Flex>
|
<Info name="Health" value="2014" unit="hp" />
|
||||||
|
</Flex>
|
||||||
|
|
||||||
<Flex direction="column" gap="2">
|
<Flex direction="column" gap="2">
|
||||||
<Heading size="4">Lethality</Heading>
|
<Heading size="4">Lethality</Heading>
|
||||||
<Info name="Armor damage" value="330" unit="hp" />
|
<Info name="Armor damage" value="330" unit="hp" />
|
||||||
<Info indent name="Module damage" value="125" unit="hp" />
|
<Info indent name="Module damage" value="125" unit="hp" />
|
||||||
<Info indent name="Caliber" value="100" unit="mm" />
|
<Info indent name="Caliber" value="100" unit="mm" />
|
||||||
<Info name="Penetration" value="257" unit="mm" />
|
<Info name="Penetration" value="257" unit="mm" />
|
||||||
<Info indent name="At 500m" value="240" unit="mm" />
|
<Info indent name="At 500m" value="240" unit="mm" />
|
||||||
<Info name="Damage per minute" value="2316" unit="hp / min" />
|
<Info name="Damage per minute" value="2316" unit="hp / min" />
|
||||||
<Info indent name="Maximum" 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
|
||||||
<Info name="Reload" value="5.73" unit="s" />
|
indent
|
||||||
<Info name="Shell velocity" value="1535" unit="m/s" />
|
name="Effective at 60s"
|
||||||
<Info name="Aim time" value="1.72" unit="s" />
|
value="2316"
|
||||||
<Info name="Dispersion" value="0.326" unit="m" />
|
unit="hp / min"
|
||||||
<Info indent name="On move" value="0.100" unit="m" />
|
/>
|
||||||
<Info indent name="On hull traverse" value="0.100" unit="m" />
|
<Info name="Reload" value="5.73" unit="s" />
|
||||||
<Info indent name="On turret traverse" value="0.070" unit="m" />
|
<Info name="Shell velocity" value="1535" unit="m/s" />
|
||||||
<Info indent name="On shoot" value="3.500" unit="m" />
|
<Info name="Aim time" value="1.72" unit="s" />
|
||||||
</Flex>
|
<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">
|
<Flex direction="column" gap="2">
|
||||||
<Heading size="4">Flexibility</Heading>
|
<Heading size="4">Flexibility</Heading>
|
||||||
<Info name="Gun depression" value="20" unit="°" />
|
<Info name="Gun depression" value="20" unit="°" />
|
||||||
<Info indent name="Elevation" value="7" unit="°" />
|
<Info indent name="Elevation" value="7" unit="°" />
|
||||||
<Info indent name="Azimuth" value="30, 30" unit="°" />
|
<Info indent name="Azimuth" value="30, 30" unit="°" />
|
||||||
</Flex>
|
</Flex>
|
||||||
|
|
||||||
<Flex direction="column" gap="2">
|
<Flex direction="column" gap="2">
|
||||||
<Heading size="4">Mobility</Heading>
|
<Heading size="4">Mobility</Heading>
|
||||||
<Info name="Weight" value="45" unit="mt" />
|
<Info name="Weight" value="45" unit="mt" />
|
||||||
<Info name="Speed forwards" value="55" unit="km/s" />
|
<Info name="Speed forwards" value="55" unit="km/s" />
|
||||||
<Info indent name="Backward" value="20" unit="km/s" />
|
<Info indent name="Backward" value="20" unit="km/s" />
|
||||||
<Info
|
<Info
|
||||||
name="Effective power on hard terrain"
|
name="Effective power on hard terrain"
|
||||||
value="36.86"
|
value="36.86"
|
||||||
unit="hp/kg"
|
unit="hp/kg"
|
||||||
/>
|
/>
|
||||||
<Info indent name="On medium terrain" value="36.86" unit="hp/kg" />
|
<Info
|
||||||
<Info indent name="On soft terrain" value="36.86" unit="hp/kg" />
|
indent
|
||||||
<Info
|
name="On medium terrain"
|
||||||
name="Traverse speed on hard terrain"
|
value="36.86"
|
||||||
value="36.86"
|
unit="hp/kg"
|
||||||
unit="°/s"
|
/>
|
||||||
/>
|
<Info indent name="On soft terrain" value="36.86" unit="hp/kg" />
|
||||||
<Info indent name="On medium terrain" value="36.86" unit="°/s" />
|
<Info
|
||||||
<Info indent name="On soft terrain" value="36.86" unit="°/s" />
|
name="Traverse speed on hard terrain"
|
||||||
</Flex>
|
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">
|
<Flex direction="column" gap="2">
|
||||||
<Heading size="4">Stealth</Heading>
|
<Heading size="4">Stealth</Heading>
|
||||||
<Info name="View range" value="302" unit="m" />
|
<Info name="View range" value="302" unit="m" />
|
||||||
<Info name="Size" value="6.21 x 2.43 x 2.00" 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 name="Camouflage when still" value="30.00" unit="%" />
|
||||||
<Info indent name="When moving" 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 still" value="30.00" unit="%" />
|
||||||
<Info
|
<Info
|
||||||
indent
|
indent
|
||||||
name="When shooting while moving"
|
name="When shooting while moving"
|
||||||
value="30.00"
|
value="30.00"
|
||||||
unit="%"
|
unit="%"
|
||||||
/>
|
/>
|
||||||
|
</Flex>
|
||||||
</Flex>
|
</Flex>
|
||||||
</Flex>
|
)}
|
||||||
</Flex>
|
</Flex>
|
||||||
</Flex>
|
</Flex>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in new issue
Block a user