mirror of
https://github.com/blitzkit/blitzkit.git
synced 2026-10-21 18:57:03 +02:00
feat: more responsive
This commit is contained in:
TrèsAbhi committed
1 parent
8d1745d47e
commit
ea68c8e82c
4 files changed
+112
-119
No files matched your search
+2
-6
@@ -1,5 +1,5 @@
|
||||
import { Flex } from '@radix-ui/themes';
|
||||
import { ReactNode } from 'react';
|
||||
import * as styles from '../../../../page.css';
|
||||
|
||||
interface ConfigurationChildWrapperProps {
|
||||
children: ReactNode;
|
||||
@@ -8,9 +8,5 @@ interface ConfigurationChildWrapperProps {
|
||||
export function ConfigurationChildWrapper({
|
||||
children,
|
||||
}: ConfigurationChildWrapperProps) {
|
||||
return (
|
||||
<Flex direction="column" gap="2" align="end" style={{ width: '100%' }}>
|
||||
{children}
|
||||
</Flex>
|
||||
);
|
||||
return <div className={styles.configurationChild}>{children}</div>;
|
||||
}
|
||||
@@ -9,17 +9,12 @@ export function Crew() {
|
||||
<Flex
|
||||
align="center"
|
||||
gap="4"
|
||||
style={{
|
||||
width: '100%',
|
||||
}}
|
||||
justify="end"
|
||||
style={{
|
||||
width: 240,
|
||||
}}
|
||||
>
|
||||
<Slider
|
||||
min={50}
|
||||
max={100}
|
||||
defaultValue={[100]}
|
||||
style={{ flex: 1, maxWidth: 208 }}
|
||||
/>
|
||||
<Slider min={50} max={100} defaultValue={[100]} style={{ flex: 1 }} />
|
||||
<TextField.Root style={{ width: 64 }}>
|
||||
<TextField.Input defaultValue={100} />
|
||||
<TextField.Slot>%</TextField.Slot>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { Flex, Heading } from '@radix-ui/themes';
|
||||
import * as styles from '../../../page.css';
|
||||
import { Camouflage } from './components/Camouflage';
|
||||
import { Consumables } from './components/Consumables';
|
||||
import { Crew } from './components/Crew';
|
||||
@@ -9,106 +10,88 @@ 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>
|
||||
<Flex className={styles.characteristics}>
|
||||
<div className={styles.configuration}>
|
||||
<Heading>Configure</Heading>
|
||||
|
||||
<Modules />
|
||||
<Equipments />
|
||||
<Crew />
|
||||
<Consumables />
|
||||
<Provisions />
|
||||
<Camouflage />
|
||||
</Flex>
|
||||
<Modules />
|
||||
<Equipments />
|
||||
<Crew />
|
||||
<Consumables />
|
||||
<Provisions />
|
||||
<Camouflage />
|
||||
</div>
|
||||
|
||||
<Flex style={{ flex: 1 }} wrap="wrap" direction="column" gap="4">
|
||||
<Heading>Statistics</Heading>
|
||||
<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="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">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">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">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 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>
|
||||
|
||||
@@ -56,19 +56,38 @@ export const alignTopRight = style({
|
||||
},
|
||||
});
|
||||
|
||||
export const configure = style({
|
||||
display: 'grid',
|
||||
gridTemplateColumns: '1fr 1fr',
|
||||
gap: 16,
|
||||
export const characteristics = style({
|
||||
display: 'flex',
|
||||
gap: 32,
|
||||
|
||||
'@media': {
|
||||
'screen and (max-width: 800px)': {
|
||||
flexDirection: 'column',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const configureRight = style({
|
||||
export const configurationChild = style({
|
||||
display: 'flex',
|
||||
gap: 8,
|
||||
flexDirection: 'column',
|
||||
|
||||
'@media': {
|
||||
'screen and (min-width: 801px)': {
|
||||
alignItems: 'end',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const configuration = style({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: 8,
|
||||
});
|
||||
export const configureLeft = style({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: 8,
|
||||
gap: 16,
|
||||
flex: 1,
|
||||
|
||||
'@media': {
|
||||
'screen and (min-width: 801px)': {
|
||||
alignItems: 'end',
|
||||
},
|
||||
},
|
||||
});
|
||||
Reference in new issue
Block a user