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

feat: quick controls

Browse Source
This commit is contained in:
tresabhi committed 2025-04-14 23:56:29 -05:00
1 parent 45938c875f
commit 2bef96475c
6 files changed
+55 -40
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

bun.lockb
BIN
View File
Binary file not shown.
package.json
+4 -4
View File
@@ -46,9 +46,9 @@
"devDependencies": { "devDependencies": {
"@types/bun": "latest", "@types/bun": "latest",
"@types/lodash-es": "^4.17.12", "@types/lodash-es": "^4.17.12",
"@types/node": "^22.5.4", "@types/node": "^22.14.1",
"prettier": "^3.3.3", "prettier": "^3.5.3",
"prisma": "^6.0.0", "prisma": "^6.6.0",
"typescript": "^5.5.4" "typescript": "^5.8.3"
} }
} }
packages/website/src/components/MissingShellIcon.tsx
+2 -2
View File
@@ -13,8 +13,8 @@ export function MissingShellIcon(props: ComponentProps<'svg'>) {
<path <path
d="M39.5461 16.5714L47.4286 24.4539M16.1429 37.5714L26.4286 47.8571M56 10.3802L53.6198 8C32.2378 20.0846 22.0873 28.6952 8 48.0661C8.13223 48.595 8.63471 50.2876 11.1736 52.8264C13.7124 55.3653 15.405 55.8678 15.9339 56C35.3048 41.9127 43.9154 31.7622 56 10.3802Z" d="M39.5461 16.5714L47.4286 24.4539M16.1429 37.5714L26.4286 47.8571M56 10.3802L53.6198 8C32.2378 20.0846 22.0873 28.6952 8 48.0661C8.13223 48.595 8.63471 50.2876 11.1736 52.8264C13.7124 55.3653 15.405 55.8678 15.9339 56C35.3048 41.9127 43.9154 31.7622 56 10.3802Z"
stroke="currentColor" stroke="currentColor"
stroke-width="4" strokeWidth="4"
stroke-linecap="round" strokeLinecap="round"
stroke-linejoin="round" stroke-linejoin="round"
/> />
</svg> </svg>
packages/website/src/components/Tankopedia/HeroSection/components/Options/components/Thicknesses.tsx
+14 -5
View File
@@ -5,14 +5,17 @@ import { Suspense } from 'react';
import { useLocale } from '../../../../../../hooks/useLocale'; import { useLocale } from '../../../../../../hooks/useLocale';
import { TankopediaEphemeral } from '../../../../../../stores/tankopediaEphemeral'; import { TankopediaEphemeral } from '../../../../../../stores/tankopediaEphemeral';
import { TankopediaPersistent } from '../../../../../../stores/tankopediaPersistent'; import { TankopediaPersistent } from '../../../../../../stores/tankopediaPersistent';
import { TankopediaDisplay } from '../../../../../../stores/tankopediaPersistent/constants';
import type { MaybeSkeletonComponentProps } from '../../../../../../types/maybeSkeletonComponentProps';
import type { ThicknessRange } from '../../../../../Armor/components/StaticArmor'; import type { ThicknessRange } from '../../../../../Armor/components/StaticArmor';
import { DynamicArmorSwitcher } from './DynamicArmorSwitcher'; import { DynamicArmorSwitcher } from './DynamicArmorSwitcher';
interface ThicknessesProps { type ThicknessesProps = MaybeSkeletonComponentProps & {
thicknessRange: ThicknessRange; thicknessRange: ThicknessRange;
} };
export function Thicknesses({ thicknessRange }: ThicknessesProps) { export function Thicknesses({ thicknessRange, skeleton }: ThicknessesProps) {
const display = TankopediaEphemeral.use((state) => state.display);
const showExternalModules = TankopediaPersistent.use( const showExternalModules = TankopediaPersistent.use(
(state) => state.showExternalModules, (state) => state.showExternalModules,
); );
@@ -31,10 +34,14 @@ export function Thicknesses({ thicknessRange }: ThicknessesProps) {
return ( return (
<Flex <Flex
position="absolute" position="absolute"
right="0" right={display === TankopediaDisplay.StaticArmor ? '0' : '-6rem'}
top="50%" top="50%"
mr="4" mr="4"
style={{ transform: 'translateY(-50%)', userSelect: 'none' }} style={{
transform: 'translateY(-50%)',
userSelect: 'none',
transitionDuration: '200ms',
}}
direction="column" direction="column"
gap="5" gap="5"
align="end" align="end"
@@ -190,9 +197,11 @@ export function Thicknesses({ thicknessRange }: ThicknessesProps) {
</Button> </Button>
</Flex> </Flex>
{!skeleton && (
<Suspense> <Suspense>
<DynamicArmorSwitcher /> <DynamicArmorSwitcher />
</Suspense> </Suspense>
)}
</Flex> </Flex>
); );
} }
packages/website/src/components/Tankopedia/HeroSection/components/Options/index.tsx
+27 -25
View File
@@ -42,6 +42,7 @@ import {
} from '../../../../../stores/tankopediaEphemeral'; } from '../../../../../stores/tankopediaEphemeral';
import { TankopediaPersistent } from '../../../../../stores/tankopediaPersistent'; import { TankopediaPersistent } from '../../../../../stores/tankopediaPersistent';
import { TankopediaDisplay } from '../../../../../stores/tankopediaPersistent/constants'; import { TankopediaDisplay } from '../../../../../stores/tankopediaPersistent/constants';
import type { MaybeSkeletonComponentProps } from '../../../../../types/maybeSkeletonComponentProps';
import type { ThicknessRange } from '../../../../Armor/components/StaticArmor'; import type { ThicknessRange } from '../../../../Armor/components/StaticArmor';
import { ModuleButton } from '../../../../ModuleButtons/ModuleButton'; import { ModuleButton } from '../../../../ModuleButtons/ModuleButton';
import { SmallTankIcon } from '../../../../SmallTankIcon'; import { SmallTankIcon } from '../../../../SmallTankIcon';
@@ -51,12 +52,12 @@ import { DynamicArmorSwitcher } from './components/DynamicArmorSwitcher';
import { QuickInputs } from './components/QuickInputs'; import { QuickInputs } from './components/QuickInputs';
import { Thicknesses } from './components/Thicknesses'; import { Thicknesses } from './components/Thicknesses';
interface OptionsProps { type OptionsProps = MaybeSkeletonComponentProps & {
thicknessRange: ThicknessRange; thicknessRange: ThicknessRange;
canvas: RefObject<HTMLCanvasElement>; canvas: RefObject<HTMLCanvasElement>;
} };
export function Options({ thicknessRange, canvas }: OptionsProps) { export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) {
const hasCustomShell = TankopediaEphemeral.use( const hasCustomShell = TankopediaEphemeral.use(
(state) => state.customShell !== undefined, (state) => state.customShell !== undefined,
); );
@@ -111,17 +112,18 @@ export function Options({ thicknessRange, canvas }: OptionsProps) {
/> />
)} )}
{display === TankopediaDisplay.StaticArmor && ( <Thicknesses skeleton={skeleton} thicknessRange={thicknessRange} />
<Thicknesses thicknessRange={thicknessRange} />
)}
{display === TankopediaDisplay.DynamicArmor && (
<Flex <Flex
gap="2" gap="2"
direction="column" direction="column"
top="50%" top="50%"
right="3" right={display === TankopediaDisplay.DynamicArmor ? '3' : '-3rem'}
style={{ position: 'absolute', transform: 'translateY(-50%)' }} style={{
position: 'absolute',
transform: 'translateY(-50%)',
transitionDuration: '200ms',
}}
align="end" align="end"
> >
{!hasCustomShell && ( {!hasCustomShell && (
@@ -136,6 +138,7 @@ export function Options({ thicknessRange, canvas }: OptionsProps) {
])} ])}
</Text> </Text>
)} )}
{antagonistUniqueGuns.length > 1 && ( {antagonistUniqueGuns.length > 1 && (
<Popover.Root> <Popover.Root>
<Popover.Trigger> <Popover.Trigger>
@@ -157,11 +160,7 @@ export function Options({ thicknessRange, canvas }: OptionsProps) {
mr="2" mr="2"
mb="1" mb="1"
> >
{ {TIER_ROMAN_NUMERALS[antagonistGun.gun_type!.value.base.tier]}
TIER_ROMAN_NUMERALS[
antagonistGun.gun_type!.value.base.tier
]
}
</Text> </Text>
<img <img
@@ -178,9 +177,7 @@ export function Options({ thicknessRange, canvas }: OptionsProps) {
<Popover.Content side="left" align="center"> <Popover.Content side="left" align="center">
<Flex gap="2"> <Flex gap="2">
{[...antagonistUniqueGuns] {[...antagonistUniqueGuns].reverse().map(({ gun, turret }) => (
.reverse()
.map(({ gun, turret }) => (
<ModuleButton <ModuleButton
module="gun" module="gun"
key={gun.gun_type!.value.base.id} key={gun.gun_type!.value.base.id}
@@ -202,9 +199,7 @@ export function Options({ thicknessRange, canvas }: OptionsProps) {
secondaryDiscriminator={ secondaryDiscriminator={
<Text style={{ fontSize: '0.75em' }}> <Text style={{ fontSize: '0.75em' }}>
{literals(strings.common.units.mm, [ {literals(strings.common.units.mm, [
gun.gun_type!.value.base.shells[0].caliber.toFixed( gun.gun_type!.value.base.shells[0].caliber.toFixed(0),
0,
),
])} ])}
</Text> </Text>
} }
@@ -214,6 +209,7 @@ export function Options({ thicknessRange, canvas }: OptionsProps) {
</Popover.Content> </Popover.Content>
</Popover.Root> </Popover.Root>
)} )}
<Flex <Flex
direction="column" direction="column"
style={{ style={{
@@ -316,11 +312,12 @@ export function Options({ thicknessRange, canvas }: OptionsProps) {
</IconButton> </IconButton>
</Flex> </Flex>
{!skeleton && (
<Suspense> <Suspense>
<DynamicArmorSwitcher /> <DynamicArmorSwitcher />
</Suspense> </Suspense>
</Flex>
)} )}
</Flex>
<Flex <Flex
direction="column" direction="column"
@@ -330,8 +327,13 @@ export function Options({ thicknessRange, canvas }: OptionsProps) {
left="50%" left="50%"
style={{ transform: 'translateX(-50%)' }} style={{ transform: 'translateX(-50%)' }}
> >
{display === TankopediaDisplay.DynamicArmor && ( <Flex
<> direction="column"
align="center"
style={{ transitionDuration: '200ms' }}
position="relative"
bottom={display === TankopediaDisplay.DynamicArmor ? '0' : '-7rem'}
>
<Flex <Flex
align="center" align="center"
gap="2" gap="2"
@@ -394,8 +396,8 @@ export function Options({ thicknessRange, canvas }: OptionsProps) {
</Dialog.Content> </Dialog.Content>
</Dialog.Root> </Dialog.Root>
</Flex> </Flex>
</> </Flex>
)}
<Flex gap="3" align="center" mt="2"> <Flex gap="3" align="center" mt="2">
<SegmentedControl.Root <SegmentedControl.Root
value={`${display}`} value={`${display}`}
packages/website/src/components/Tankopedia/HeroSection/index.tsx
+8 -4
View File
@@ -101,7 +101,7 @@ export function HeroSection({ skeleton }: MaybeSkeletonComponentProps) {
style={{ transform: 'translateY(-50%)', transitionDuration: '200ms' }} style={{ transform: 'translateY(-50%)', transitionDuration: '200ms' }}
direction="column" direction="column"
align={{ initial: 'center', md: 'start' }} align={{ initial: 'center', md: 'start' }}
gap={disturbed ? '0' : '2'} gap={disturbed ? '0' : { initial: '0', md: '2' }}
> >
<Flex align="center" gap="3"> <Flex align="center" gap="3">
<Heading <Heading
@@ -139,7 +139,7 @@ export function HeroSection({ skeleton }: MaybeSkeletonComponentProps) {
weight="light" weight="light"
ml={{ ml={{
initial: '0', initial: '0',
md: '8', md: disturbed ? 'var(--font-size-7)' : 'var(--font-size-8)',
lg: disturbed ? 'var(--font-size-8)' : 'var(--font-size-9)', lg: disturbed ? 'var(--font-size-8)' : 'var(--font-size-9)',
}} }}
style={{ transitionDuration: '200ms' }} style={{ transitionDuration: '200ms' }}
@@ -161,7 +161,7 @@ export function HeroSection({ skeleton }: MaybeSkeletonComponentProps) {
width="100%" width="100%"
height="100%" height="100%"
position="relative" position="relative"
left={disturbed ? '0' : '12.5%'} left={disturbed ? '0' : { initial: '0', md: '12.5%' }}
style={{ transitionDuration: '200ms' }} style={{ transitionDuration: '200ms' }}
> >
{skeleton && <TankSandboxLoader id={protagonist.id} />} {skeleton && <TankSandboxLoader id={protagonist.id} />}
@@ -171,7 +171,11 @@ export function HeroSection({ skeleton }: MaybeSkeletonComponentProps) {
</Suspense> </Suspense>
</Box> </Box>
<Options canvas={canvas} thicknessRange={thicknessRange} /> <Options
skeleton={skeleton}
canvas={canvas}
thicknessRange={thicknessRange}
/>
</Box> </Box>
</Box> </Box>
</Flex> </Flex>