mirror of
https://github.com/blitzkit/blitzkit.git
synced 2026-10-21 10:47:04 +02:00
feat: sticky sandbox
This commit is contained in:
TrèsAbhi committed
1 parent
9ba239caf0
commit
f820d05082
3 files changed
+175
-121
No files matched your search
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
@@ -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',
|
||||
|
||||
Reference in new issue
Block a user