TresAbhi/blitzkit
1
0 Fork 0
mirror of https://github.com/blitzkit/blitzkit.git synced 2026-10-21 10:47:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: sides

Browse Source
This commit is contained in:
TrèsAbhi committed 2024-01-27 17:19:10 -06:00
1 parent f820d05082
commit 0250546ab5
4 files changed
+109 -177
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx
+99 -151
View File
@@ -1,6 +1,4 @@
import { ChevronDownIcon, ChevronUpIcon } from '@radix-ui/react-icons';
import { Flex, Heading } from '@radix-ui/themes';
import { useState } from 'react';
import { Flex, Heading, Tabs } from '@radix-ui/themes';
import { Camouflage } from './components/Camouflage';
import { Consumables } from './components/Consumables';
import { Crew } from './components/Crew';
@@ -9,158 +7,108 @@ import { Info } from './components/Info';
import { Modules } from './components/Modules';
import { Provisions } from './components/Provisions';
interface CharacteristicsProps {
config?: boolean;
}
export function Characteristics({ config }: CharacteristicsProps) {
const [configureVisible, setConfigureVisible] = useState(true);
const [statsVisible, setStatsVisible] = useState(true);
export function Characteristics() {
return (
<Flex gap="8" direction="column" wrap="wrap">
{config && (
<Flex
style={{ flex: 1, minWidth: 320, position: 'sticky', top: 64 }}
direction="column"
gap="4"
>
<Heading
onClick={() => setConfigureVisible((state) => !state)}
style={{
cursor: 'pointer',
}}
>
Configure{' '}
{configureVisible ? <ChevronDownIcon /> : <ChevronUpIcon />}
</Heading>
<Tabs.Root defaultValue="configure">
<Flex gap="4" direction="column">
<Tabs.List>
<Tabs.Trigger value="configure">Configure</Tabs.Trigger>
<Tabs.Trigger value="statistics">Statistics</Tabs.Trigger>
</Tabs.List>
{configureVisible && (
<Flex direction="column" gap="4">
<Modules />
<Equipments />
<Crew />
<Consumables />
<Provisions />
<Camouflage />
<Tabs.Content value="statistics">
<Flex direction="column" gap="4">
<Flex direction="column" gap="2">
<Heading size="4">Survivability</Heading>
<Info name="Health" value="2014" unit="hp" />
</Flex>
)}
</Flex>
)}
{!config && (
<Flex
style={{ flex: 1, minWidth: 320, position: 'sticky', top: 64 }}
direction="column"
gap="4"
>
<Heading
onClick={() => setStatsVisible((state) => !state)}
style={{
cursor: 'pointer',
}}
>
Statistics {statsVisible ? <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" />
</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 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>
)}
</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>
</Tabs.Content>
<Tabs.Content value="configure">
<Flex direction="column" gap="4">
<Modules />
<Equipments />
<Crew />
<Consumables />
<Provisions />
<Camouflage />
</Flex>
</Tabs.Content>
</Flex>
</Tabs.Root>
);
}
src/app/tools/tankopedia/[id]/components/Title.tsx
+1 -12
View File
@@ -1,5 +1,4 @@
import { ArrowLeftIcon } from '@radix-ui/react-icons';
import { Flex, Heading, Link, Text } from '@radix-ui/themes';
import { Flex, Heading } from '@radix-ui/themes';
import { Flag } from '../../../../../components/Flag';
import { useDuel } from '../../../../../stores/duel';
@@ -8,16 +7,6 @@ export function Title() {
return (
<Flex justify="between" align="center">
<Link
href="/tools/tankopedia"
style={{ color: 'unset', textDecoration: 'none' }}
>
<Flex gap="1" align="center">
<ArrowLeftIcon />
<Text>Back</Text>
</Flex>
</Link>
<Flex gap="2" align="center">
<Flag nation={protagonist.tank.nation} />
<Heading>{protagonist.tank.name}</Heading>
src/app/tools/tankopedia/[id]/page.tsx
+7 -12
View File
@@ -79,39 +79,34 @@ export default function Page({ params }: { params: { id: string } }) {
}, [id, assigned]);
return (
<PageWrapper color="purple" size="full">
<PageWrapper color="purple" size="double">
{assigned && (
<Flex style={{ width: '100%' }} justify="center">
<>
<Title />
<Flex
style={{ width: '100%' }}
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>
);
src/components/PageWrapper.tsx
+2 -2
View File
@@ -3,7 +3,7 @@ import { ComponentProps } from 'react';
interface PageWrapperProps extends ComponentProps<typeof Flex> {
color?: ComponentProps<typeof Theme>['accentColor'];
size?: 'regular' | 'wide' | 'full';
size?: 'regular' | 'wide' | 'double';
}
export default function PageWrapper({
@@ -19,7 +19,7 @@ export default function PageWrapper({
gap="4"
style={{
width: '100%',
maxWidth: size === 'regular' ? 800 : size === 'full' ? '100%' : 960,
maxWidth: size === 'regular' ? 800 : size === 'double' ? 1200 : 960,
margin: 'auto',
padding: 16,
boxSizing: 'border-box',