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

feat: migrated tank search

Browse Source
This commit is contained in:
TrèsAbhi committed 2024-09-17 22:13:35 -05:00
1 parent 0537418f6a
commit e241870ece
36 files changed
+868 -718
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/core/src/blitzkit/index.ts
+7 -7
View File
@@ -1,5 +1,5 @@
export * from './assertSecret'; export * from './assertSecret';
// export * from './asset'; export * from './asset';
// export * from './availableProvisions'; // export * from './availableProvisions';
// export * from './averageDefinitions'; // export * from './averageDefinitions';
// export * from './camouflageDefinitions'; // export * from './camouflageDefinitions';
@@ -24,14 +24,14 @@ export * from './gameDefinitions';
// export * from './isExplosive'; // export * from './isExplosive';
// export * from './linkBlitzAndDiscord'; // export * from './linkBlitzAndDiscord';
// export * from './mapDefinitions'; // export * from './mapDefinitions';
// export * from './modelDefinitions'; export * from './modelDefinitions';
// export * from './normalizeBoundingBox'; export * from './normalizeBoundingBox';
// export * from './parseBkni'; // export * from './parseBkni';
// export * from './patientFetch'; // export * from './patientFetch';
// export * from './patientFetchJSON'; // export * from './patientFetchJSON';
// export * from './progressiveStat'; // export * from './progressiveStat';
// export * from './provisionDefinitions'; // export * from './provisionDefinitions';
// export * from './resolveDpm'; export * from './resolveDpm';
// export * from './resolvePenetrationCoefficient'; // export * from './resolvePenetrationCoefficient';
// export * from './reviews'; // export * from './reviews';
// export * from './skillDefinitions'; // export * from './skillDefinitions';
@@ -39,9 +39,9 @@ export * from './gameDefinitions';
export * from './superCompress'; export * from './superCompress';
export * from './superDecompress'; export * from './superDecompress';
export * from './tankDefinitions'; export * from './tankDefinitions';
// export * from './tankIcon'; export * from './tankIcon';
// export * from './tankNames'; export * from './tankNames';
// export * from './unionBoundingBox'; export * from './unionBoundingBox';
// export * from './uniqueGuns'; // export * from './uniqueGuns';
// export * from './unwrapBlitzkitResponse'; // export * from './unwrapBlitzkitResponse';
// export * from './votes'; // export * from './votes';
packages/core/src/blitzkit/tankNames.ts
+2 -1
View File
@@ -1,5 +1,6 @@
import { deburr } from 'lodash-es'; import { deburr } from 'lodash-es';
import { camouflageDefinitions, tankDefinitionsArray } from '.'; import { tankDefinitionsArray } from '.';
import { camouflageDefinitions } from './camouflageDefinitions';
export const tankNames = Promise.all([ export const tankNames = Promise.all([
tankDefinitionsArray, tankDefinitionsArray,
packages/website-legacy/src/app/tools/performance/components/Controls.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import { FilterControl } from '../../tankopedia/components/FilterControl'; import { FilterControl } from '../../../../../../website/src/components/TankSearch/components/FilterControl';
import { PlayerCountControl } from './PlayerCountControl'; import { PlayerCountControl } from './PlayerCountControl';
export function Controls() { export function Controls() {
packages/website-legacy/src/app/tools/tankopedia/[id]/components/Lighting.tsx
-8
View File
@@ -3,14 +3,6 @@ import { useModel } from '../../../../../hooks/useModel';
import * as Duel from '../../../../../stores/duel'; import * as Duel from '../../../../../stores/duel';
import * as TankopediaPersistent from '../../../../../stores/tankopediaPersistent'; import * as TankopediaPersistent from '../../../../../stores/tankopediaPersistent';
export const ENVIRONMENTS = [
'lobby',
'apartment',
'warehouse',
'dawn',
'sunset',
] as const;
export function Lighting() { export function Lighting() {
const protagonist = Duel.use((state) => state.protagonist); const protagonist = Duel.use((state) => state.protagonist);
const { hasPbr } = useModel(protagonist.tank.id); const { hasPbr } = useModel(protagonist.tank.id);
packages/website-legacy/src/app/tools/tankopedia/components/FilterControl.tsx
-372
View File
@@ -1,372 +0,0 @@
import {
asset,
gameDefinitions,
TANK_CLASSES,
Tier,
TIER_ROMAN_NUMERALS,
} from '@blitzkit/core';
import strings from '@blitzkit/core/lang/en-US.json';
import { ReloadIcon } from '@radix-ui/react-icons';
import { Box, Flex, IconButton, Text, Tooltip } from '@radix-ui/themes';
import { times } from 'lodash-es';
import { use } from 'react';
import { classIcons } from '../../../../components/ClassIcon';
import { ExperimentIcon } from '../../../../components/ExperimentIcon';
import { ResearchedIcon } from '../../../../components/ResearchedIcon';
import { ScienceIcon } from '../../../../components/ScienceIcon';
import { ScienceOffIcon } from '../../../../components/ScienceOffIcon';
import * as TankFilters from '../../../../stores/tankFilters';
interface FilterControlProps {
compact?: boolean;
}
export function FilterControl({ compact }: FilterControlProps) {
const awaitedGameDefinitions = use(gameDefinitions);
const filters = TankFilters.use();
const mutateTankFilters = TankFilters.useMutation();
const tankFiltersStore = TankFilters.useStore();
return (
<Flex height="fit-content" gap="2" align="start" justify="center">
<Flex
direction={compact ? 'row' : { initial: 'row', sm: 'column' }}
overflow="hidden"
style={{ borderRadius: 'var(--radius-5)' }}
>
<Flex direction={compact ? 'column' : { sm: 'row', initial: 'column' }}>
{times(5, (index) => {
const tier = (index + 1) as Tier;
const selected = filters.tiers?.includes(tier);
return (
<Tooltip key={tier} content={`Tier ${tier}`}>
<IconButton
key={tier}
variant={selected ? 'solid' : 'soft'}
radius="none"
color={selected ? undefined : 'gray'}
highContrast
onClick={() =>
mutateTankFilters((draft) => {
if (draft.tiers?.includes(tier)) {
draft.tiers = draft.tiers?.filter((t) => t !== tier);
} else {
draft.tiers = [...(draft.tiers ?? []), tier];
}
})
}
>
<Text size="2">{TIER_ROMAN_NUMERALS[tier]}</Text>
</IconButton>
</Tooltip>
);
})}
</Flex>
<Flex direction={compact ? 'column' : { sm: 'row', initial: 'column' }}>
{times(5, (index) => {
const tier = (index + 6) as Tier;
const selected = filters.tiers?.includes(tier);
return (
<Tooltip key={tier} content={`Tier ${tier}`}>
<IconButton
key={tier}
variant={selected ? 'solid' : 'soft'}
radius="none"
color={selected ? undefined : 'gray'}
highContrast
onClick={() =>
mutateTankFilters((draft) => {
if (draft.tiers?.includes(tier)) {
draft.tiers = draft.tiers?.filter((t) => t !== tier);
} else {
draft.tiers = [...(draft.tiers ?? []), tier];
}
})
}
>
<Text size="2">{TIER_ROMAN_NUMERALS[tier]}</Text>
</IconButton>
</Tooltip>
);
})}
</Flex>
</Flex>
<Flex
direction={compact ? 'row' : { initial: 'row', sm: 'column' }}
overflow="hidden"
style={{ borderRadius: 'var(--radius-5)' }}
>
<Flex direction={compact ? 'column' : { sm: 'row', initial: 'column' }}>
{awaitedGameDefinitions.nations
.slice(0, Math.ceil(awaitedGameDefinitions.nations.length / 2))
.map((nation) => {
const selected = filters.nations?.includes(nation);
return (
<Tooltip
content={
strings.common.nations[
nation as keyof typeof strings.common.nations
]
}
key={nation}
>
<IconButton
variant={selected ? 'solid' : 'soft'}
color={selected ? undefined : 'gray'}
highContrast
radius="none"
onClick={() =>
mutateTankFilters((draft) => {
if (draft.nations?.includes(nation)) {
draft.nations = draft.nations?.filter(
(n) => n !== nation,
);
} else {
draft.nations = [...(draft.nations ?? []), nation];
}
})
}
>
<img
style={{ width: '1em', height: '1em' }}
src={asset(`flags/circle/${nation}.webp`)}
/>
</IconButton>
</Tooltip>
);
})}
</Flex>
<Flex direction={compact ? 'column' : { sm: 'row', initial: 'column' }}>
{awaitedGameDefinitions.nations
.slice(Math.ceil(awaitedGameDefinitions.nations.length / 2))
.map((nation) => {
const selected = filters.nations?.includes(nation);
return (
<Tooltip
content={
strings.common.nations[
nation as keyof typeof strings.common.nations
]
}
key={nation}
>
<IconButton
key={nation}
style={{ flex: 1 }}
variant={selected ? 'solid' : 'soft'}
color={selected ? undefined : 'gray'}
highContrast
radius="none"
onClick={() =>
mutateTankFilters((draft) => {
if (draft.nations?.includes(nation)) {
draft.nations = draft.nations?.filter(
(n) => n !== nation,
);
} else {
draft.nations = [...(draft.nations ?? []), nation];
}
})
}
>
<img
style={{ width: '1em', height: '1em' }}
src={asset(`flags/circle/${nation}.webp`)}
/>
</IconButton>
</Tooltip>
);
})}
</Flex>
</Flex>
<Flex
overflow="hidden"
style={{ borderRadius: 'var(--radius-full)' }}
direction={compact ? 'column' : { sm: 'row', initial: 'column' }}
>
{TANK_CLASSES.map((tankClass) => {
const Icon = classIcons[tankClass];
const selected = filters.classes?.includes(tankClass);
return (
<Tooltip
content={strings.common.tank_class_medium[tankClass]}
key={tankClass}
>
<IconButton
variant={selected ? 'solid' : 'soft'}
radius="none"
color={selected ? undefined : 'gray'}
highContrast
onClick={() =>
mutateTankFilters((draft) => {
if (draft.classes?.includes(tankClass)) {
draft.classes = draft.classes?.filter(
(c) => c !== tankClass,
);
} else {
draft.classes = [...(draft.classes ?? []), tankClass];
}
})
}
>
<Icon style={{ width: '1em', height: '1em' }} />
</IconButton>
</Tooltip>
);
})}
</Flex>
<Flex
overflow="hidden"
style={{ borderRadius: 'var(--radius-full)' }}
direction={compact ? 'column' : { sm: 'row', initial: 'column' }}
>
<Tooltip content="Researchable">
<IconButton
variant={filters.types?.includes('researchable') ? 'solid' : 'soft'}
radius="none"
color={filters.types?.includes('researchable') ? undefined : 'gray'}
highContrast
onClick={() =>
mutateTankFilters((draft) => {
if (draft.types?.includes('researchable')) {
draft.types = draft.types?.filter(
(t) => t !== 'researchable',
);
} else {
draft.types = [...(draft.types ?? []), 'researchable'];
}
})
}
>
<ResearchedIcon style={{ width: '1em', height: '1em' }} />
</IconButton>
</Tooltip>
<Tooltip content="Premium">
<IconButton
variant={filters.types?.includes('premium') ? 'solid' : 'soft'}
radius="none"
color={filters.types?.includes('premium') ? 'amber' : 'gray'}
highContrast
onClick={() =>
mutateTankFilters((draft) => {
if (draft.types?.includes('premium')) {
draft.types = draft.types?.filter((t) => t !== 'premium');
} else {
draft.types = [...(draft.types ?? []), 'premium'];
}
})
}
>
<Text
color={filters.types?.includes('premium') ? undefined : 'amber'}
style={{ display: 'flex', justifyContent: 'center' }}
>
<ResearchedIcon style={{ width: '1em', height: '1em' }} />
</Text>
</IconButton>
</Tooltip>
<Tooltip content="Collector">
<IconButton
variant={filters.types?.includes('collector') ? 'solid' : 'soft'}
radius="none"
color={filters.types?.includes('collector') ? 'blue' : 'gray'}
highContrast
onClick={() =>
mutateTankFilters((draft) => {
if (draft.types?.includes('collector')) {
draft.types = draft.types?.filter((t) => t !== 'collector');
} else {
draft.types = [...(draft.types ?? []), 'collector'];
}
})
}
>
<Text
color={filters.types?.includes('collector') ? undefined : 'blue'}
style={{ display: 'flex', justifyContent: 'center' }}
>
<ResearchedIcon style={{ width: '1em', height: '1em' }} />
</Text>
</IconButton>
</Tooltip>
</Flex>
<Flex
overflow="hidden"
style={{ borderRadius: 'var(--radius-full)' }}
direction={compact ? 'column' : { sm: 'row', initial: 'column' }}
>
<Tooltip content="Include test tank">
<IconButton
variant={filters.testing === 'include' ? 'solid' : 'soft'}
radius="none"
color={filters.testing === 'include' ? undefined : 'gray'}
highContrast
onClick={() =>
mutateTankFilters((draft) => {
draft.testing = 'include';
})
}
>
<ExperimentIcon
style={{ width: '1em', height: '1em', color: 'currentColor' }}
/>
</IconButton>
</Tooltip>
<Tooltip content="Exclude test tank">
<IconButton
variant={filters.testing === 'exclude' ? 'solid' : 'soft'}
radius="none"
color={filters.testing === 'exclude' ? undefined : 'gray'}
highContrast
onClick={() =>
mutateTankFilters((draft) => {
draft.testing = 'exclude';
})
}
>
<ScienceOffIcon
style={{ width: '1em', height: '1em', color: 'currentColor' }}
/>
</IconButton>
</Tooltip>
<Tooltip content="Only test tank">
<IconButton
variant={filters.testing === 'only' ? 'solid' : 'soft'}
radius="none"
color={filters.testing === 'only' ? undefined : 'gray'}
highContrast
onClick={() =>
mutateTankFilters((draft) => {
draft.testing = 'only';
})
}
>
<ScienceIcon
style={{ width: '1em', height: '1em', color: 'currentColor' }}
/>
</IconButton>
</Tooltip>
</Flex>
<Box>
<IconButton
color="red"
onClick={() => {
tankFiltersStore.setState(tankFiltersStore.getInitialState(), true);
}}
>
<ReloadIcon />
</IconButton>
</Box>
</Flex>
);
}
packages/website-legacy/src/app/tools/tankopedia/components/TierFilter.tsx
-51
View File
@@ -1,51 +0,0 @@
import { Tier, TIER_ROMAN_NUMERALS } from '@blitzkit/core';
import { Flex, IconButton, Text } from '@radix-ui/themes';
import { times } from 'lodash-es';
import { memo } from 'react';
import * as TankFilters from '../../../../stores/tankFilters';
import * as TankopediaSort from '../../../../stores/tankopediaSort';
export const TierFilter = memo(() => {
const tierFilter = TankFilters.use((state) => state.tiers);
const sort = TankopediaSort.use();
const search = TankFilters.use((state) => state.search);
const mutateTankFilters = TankFilters.useMutation();
if (sort.by !== 'meta.none' || search) return null;
return (
<Flex justify="center">
<Flex
direction="row"
overflow="hidden"
style={{ borderRadius: 'var(--radius-full)' }}
>
{times(10, (index) => {
const tier = (10 - index) as Tier;
const selected = tierFilter.includes(tier);
return (
<IconButton
key={tier}
variant={selected ? 'solid' : 'soft'}
radius="none"
color={selected ? undefined : 'gray'}
highContrast
onClick={() =>
mutateTankFilters((draft) => {
if (draft.tiers?.includes(tier)) {
draft.tiers = draft.tiers?.filter((t) => t !== tier);
} else {
draft.tiers = [...(draft.tiers ?? []), tier];
}
})
}
>
<Text size="2">{TIER_ROMAN_NUMERALS[tier]}</Text>
</IconButton>
);
})}
</Flex>
</Flex>
);
});
packages/website-legacy/tsconfig.json
+5 -1
View File
@@ -7,5 +7,9 @@
} }
] ]
}, },
"include": ["src/**/*", ".next/types/**/*.ts"] "include": [
"src/**/*",
".next/types/**/*.ts",
"../website/src/components/TankSearch/components/FilterControl.tsx"
]
} }
packages/website/src/components/Ad.tsx
+2 -2
View File
@@ -1,8 +1,8 @@
import { imgur } from '@blitzkit/core'; import { imgur } from '@blitzkit/core';
import { Box, BoxProps, Text } from '@radix-ui/themes'; import { Box, type BoxProps, Text } from '@radix-ui/themes';
import { uniqueId } from 'lodash-es'; import { uniqueId } from 'lodash-es';
import { useEffect, useRef } from 'react'; import { useEffect, useRef } from 'react';
import { Vector2Tuple } from 'three'; import type { Vector2Tuple } from 'three';
export enum AdType { export enum AdType {
MediumRectangleHorizontalPurple = 738182777, MediumRectangleHorizontalPurple = 738182777,
packages/website/src/components/AdMidSectionNarrowOnly.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import { Flex, FlexProps } from '@radix-ui/themes'; import { Flex, type FlexProps } from '@radix-ui/themes';
import { Ad, AdType } from './Ad'; import { Ad, AdType } from './Ad';
export function AdMidSectionNarrowOnly(props: FlexProps) { export function AdMidSectionNarrowOnly(props: FlexProps) {
packages/website/src/components/AdMidSectionResponsive.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import { Flex, FlexProps } from '@radix-ui/themes'; import { Flex, type FlexProps } from '@radix-ui/themes';
import { Ad, AdType } from './Ad'; import { Ad, AdType } from './Ad';
export function AdMidSectionResponsive(props: FlexProps) { export function AdMidSectionResponsive(props: FlexProps) {
packages/website/src/components/AdMidSectionWideOnly.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import { Flex, FlexProps } from '@radix-ui/themes'; import { Flex, type FlexProps } from '@radix-ui/themes';
import { Ad, AdType } from './Ad'; import { Ad, AdType } from './Ad';
export function AdMidSectionWideOnly(props: FlexProps) { export function AdMidSectionWideOnly(props: FlexProps) {
packages/website/src/components/ConsumablesManager.tsx
+1 -1
View File
@@ -1,5 +1,5 @@
import { ConsumableEntry } from '@blitzkit/core'; import { ConsumableEntry } from '@blitzkit/core';
import { Flex, FlexProps } from '@radix-ui/themes'; import { Flex, type FlexProps } from '@radix-ui/themes';
import { ConsumableButton } from './ModuleButtons/ConsumableButton'; import { ConsumableButton } from './ModuleButtons/ConsumableButton';
type ConsumablesManagerProps = FlexProps & { type ConsumablesManagerProps = FlexProps & {
packages/website/src/components/Navbar.astro
-2
View File
@@ -18,11 +18,9 @@ import {
Text, Text,
} from '@radix-ui/themes'; } from '@radix-ui/themes';
import { BRANCH_NAMES } from '../constants/branches'; import { BRANCH_NAMES } from '../constants/branches';
import { NAVBAR_HEIGHT } from '../constants/navbar';
import { homeTool, TOOLS } from '../constants/tools'; import { homeTool, TOOLS } from '../constants/tools';
import { PatreonIcon } from './PatreonIcon'; import { PatreonIcon } from './PatreonIcon';
import { NavbarAccount } from './NavbarAccount'; import { NavbarAccount } from './NavbarAccount';
import { TestComponent } from '../pages/TestComponent';
const toolsFiltered = TOOLS.filter((tool) => !('href' in tool)); const toolsFiltered = TOOLS.filter((tool) => !('href' in tool));
const tools = [homeTool, ...toolsFiltered]; const tools = [homeTool, ...toolsFiltered];
packages/website/src/components/PageWrapper.tsx
+2 -2
View File
@@ -1,6 +1,6 @@
import { Flex, FlexProps, Theme } from '@radix-ui/themes'; import { Flex, type FlexProps, Theme } from '@radix-ui/themes';
import type { ComponentProps } from 'react'; import type { ComponentProps } from 'react';
import { RadixSize } from '../../../website-legacy/src/stores/embedState'; import type { RadixSize } from '../stores/embedState';
type PageWrapperProps = FlexProps & { type PageWrapperProps = FlexProps & {
color?: ComponentProps<typeof Theme>['accentColor']; color?: ComponentProps<typeof Theme>['accentColor'];
packages/website/src/components/Speedometer.tsx
+2 -2
View File
@@ -1,5 +1,5 @@
import { Flex, FlexProps, Text } from '@radix-ui/themes'; import { Flex, type FlexProps, Text } from '@radix-ui/themes';
import { ReactNode } from 'react'; import type { ReactNode } from 'react';
type SpeedometerProps = FlexProps & { type SpeedometerProps = FlexProps & {
value: ReactNode; value: ReactNode;
packages/website/src/components/TankSearch/components/FilterControl.tsx
+496
View File
@@ -0,0 +1,496 @@
import {
asset,
gameDefinitions,
TANK_CLASSES,
TIER_ROMAN_NUMERALS,
type Tier,
} from '@blitzkit/core';
import strings from '@blitzkit/core/lang/en-US.json';
import { useStore } from '@nanostores/react';
import { ReloadIcon } from '@radix-ui/react-icons';
import { Box, Flex, IconButton, Text, Tooltip } from '@radix-ui/themes';
import { times } from 'lodash-es';
import { useAwait } from '../../../hooks/useAwait';
import { $tankFilters, initialTankFilters } from '../../../stores/tankFilters';
import { classIcons } from '../../ClassIcon';
import { ExperimentIcon } from '../../ExperimentIcon';
import { ResearchedIcon } from '../../ResearchedIcon';
import { ScienceIcon } from '../../ScienceIcon';
import { ScienceOffIcon } from '../../ScienceOffIcon';
interface FilterControlProps {
compact?: boolean;
}
export function FilterControl({ compact }: FilterControlProps) {
const awaitedGameDefinitions = useAwait(gameDefinitions);
const tankFilters = useStore($tankFilters);
return (
<Flex height="fit-content" gap="2" align="start" justify="center">
<Flex
direction={compact ? 'row' : { initial: 'row', sm: 'column' }}
overflow="hidden"
style={{ borderRadius: 'var(--radius-5)' }}
>
<Flex direction={compact ? 'column' : { sm: 'row', initial: 'column' }}>
{times(5, (index) => {
const tier = (index + 1) as Tier;
const selected = tankFilters.tiers?.includes(tier);
return (
<Tooltip key={tier} content={`Tier ${tier}`}>
<IconButton
key={tier}
variant={selected ? 'solid' : 'soft'}
radius="none"
color={selected ? undefined : 'gray'}
highContrast
onClick={() =>
// mutateTankFilters((draft) => {
// if (draft.tiers?.includes(tier)) {
// draft.tiers = draft.tiers?.filter((t) => t !== tier);
// } else {
// draft.tiers = [...(draft.tiers ?? []), tier];
// }
// })
{
if (tankFilters.tiers.includes(tier)) {
$tankFilters.setKey(
'tiers',
tankFilters.tiers.filter((t) => t !== tier),
);
} else {
$tankFilters.setKey('tiers', [
...tankFilters.tiers,
tier,
]);
}
}
}
>
<Text size="2">{TIER_ROMAN_NUMERALS[tier]}</Text>
</IconButton>
</Tooltip>
);
})}
</Flex>
<Flex direction={compact ? 'column' : { sm: 'row', initial: 'column' }}>
{times(5, (index) => {
const tier = (index + 6) as Tier;
const selected = tankFilters.tiers?.includes(tier);
return (
<Tooltip key={tier} content={`Tier ${tier}`}>
<IconButton
key={tier}
variant={selected ? 'solid' : 'soft'}
radius="none"
color={selected ? undefined : 'gray'}
highContrast
onClick={() =>
// mutateTankFilters((draft) => {
// if (draft.tiers?.includes(tier)) {
// draft.tiers = draft.tiers?.filter((t) => t !== tier);
// } else {
// draft.tiers = [...(draft.tiers ?? []), tier];
// }
// })
{
if (tankFilters.tiers.includes(tier)) {
$tankFilters.setKey(
'tiers',
tankFilters.tiers.filter((t) => t !== tier),
);
} else {
$tankFilters.setKey('tiers', [
...tankFilters.tiers,
tier,
]);
}
}
}
>
<Text size="2">{TIER_ROMAN_NUMERALS[tier]}</Text>
</IconButton>
</Tooltip>
);
})}
</Flex>
</Flex>
<Flex
direction={compact ? 'row' : { initial: 'row', sm: 'column' }}
overflow="hidden"
style={{ borderRadius: 'var(--radius-5)' }}
>
<Flex direction={compact ? 'column' : { sm: 'row', initial: 'column' }}>
{awaitedGameDefinitions.nations
.slice(0, Math.ceil(awaitedGameDefinitions.nations.length / 2))
.map((nation) => {
const selected = tankFilters.nations?.includes(nation);
return (
<Tooltip
content={
strings.common.nations[
nation as keyof typeof strings.common.nations
]
}
key={nation}
>
<IconButton
variant={selected ? 'solid' : 'soft'}
color={selected ? undefined : 'gray'}
highContrast
radius="none"
onClick={() =>
// mutateTankFilters((draft) => {
// if (draft.nations?.includes(nation)) {
// draft.nations = draft.nations?.filter(
// (n) => n !== nation,
// );
// } else {
// draft.nations = [...(draft.nations ?? []), nation];
// }
// })
{
if (tankFilters.nations.includes(nation)) {
$tankFilters.setKey(
'nations',
tankFilters.nations.filter((n) => n !== nation),
);
} else {
$tankFilters.setKey('nations', [
...tankFilters.nations,
nation,
]);
}
}
}
>
<img
style={{ width: '1em', height: '1em' }}
src={asset(`flags/circle/${nation}.webp`)}
/>
</IconButton>
</Tooltip>
);
})}
</Flex>
<Flex direction={compact ? 'column' : { sm: 'row', initial: 'column' }}>
{awaitedGameDefinitions.nations
.slice(Math.ceil(awaitedGameDefinitions.nations.length / 2))
.map((nation) => {
const selected = tankFilters.nations?.includes(nation);
return (
<Tooltip
content={
strings.common.nations[
nation as keyof typeof strings.common.nations
]
}
key={nation}
>
<IconButton
key={nation}
style={{ flex: 1 }}
variant={selected ? 'solid' : 'soft'}
color={selected ? undefined : 'gray'}
highContrast
radius="none"
onClick={() =>
// mutateTankFilters((draft) => {
// if (draft.nations?.includes(nation)) {
// draft.nations = draft.nations?.filter(
// (n) => n !== nation,
// );
// } else {
// draft.nations = [...(draft.nations ?? []), nation];
// }
// })
{
if (tankFilters.nations.includes(nation)) {
$tankFilters.setKey(
'nations',
tankFilters.nations.filter((n) => n !== nation),
);
} else {
$tankFilters.setKey('nations', [
...tankFilters.nations,
nation,
]);
}
}
}
>
<img
style={{ width: '1em', height: '1em' }}
src={asset(`flags/circle/${nation}.webp`)}
/>
</IconButton>
</Tooltip>
);
})}
</Flex>
</Flex>
<Flex
overflow="hidden"
style={{ borderRadius: 'var(--radius-full)' }}
direction={compact ? 'column' : { sm: 'row', initial: 'column' }}
>
{TANK_CLASSES.map((tankClass) => {
const Icon = classIcons[tankClass];
const selected = tankFilters.classes?.includes(tankClass);
return (
<Tooltip
content={strings.common.tank_class_medium[tankClass]}
key={tankClass}
>
<IconButton
variant={selected ? 'solid' : 'soft'}
radius="none"
color={selected ? undefined : 'gray'}
highContrast
onClick={() =>
// mutateTankFilters((draft) => {
// if (draft.classes?.includes(tankClass)) {
// draft.classes = draft.classes?.filter(
// (c) => c !== tankClass,
// );
// } else {
// draft.classes = [...(draft.classes ?? []), tankClass];
// }
// })
{
if (tankFilters.classes.includes(tankClass)) {
$tankFilters.setKey(
'classes',
tankFilters.classes.filter((c) => c !== tankClass),
);
} else {
$tankFilters.setKey('classes', [
...tankFilters.classes,
tankClass,
]);
}
}
}
>
<Icon style={{ width: '1em', height: '1em' }} />
</IconButton>
</Tooltip>
);
})}
</Flex>
<Flex
overflow="hidden"
style={{ borderRadius: 'var(--radius-full)' }}
direction={compact ? 'column' : { sm: 'row', initial: 'column' }}
>
<Tooltip content="Researchable">
<IconButton
variant={
tankFilters.types?.includes('researchable') ? 'solid' : 'soft'
}
radius="none"
color={
tankFilters.types?.includes('researchable') ? undefined : 'gray'
}
highContrast
onClick={() =>
// mutateTankFilters((draft) => {
// if (draft.types?.includes('researchable')) {
// draft.types = draft.types?.filter(
// (t) => t !== 'researchable',
// );
// } else {
// draft.types = [...(draft.types ?? []), 'researchable'];
// }
// })
{
if (tankFilters.types.includes('researchable')) {
$tankFilters.setKey(
'types',
tankFilters.types.filter((t) => t !== 'researchable'),
);
} else {
$tankFilters.setKey('types', [
...tankFilters.types,
'researchable',
]);
}
}
}
>
<ResearchedIcon style={{ width: '1em', height: '1em' }} />
</IconButton>
</Tooltip>
<Tooltip content="Premium">
<IconButton
variant={tankFilters.types?.includes('premium') ? 'solid' : 'soft'}
radius="none"
color={tankFilters.types?.includes('premium') ? 'amber' : 'gray'}
highContrast
onClick={() =>
// mutateTankFilters((draft) => {
// if (draft.types?.includes('premium')) {
// draft.types = draft.types?.filter((t) => t !== 'premium');
// } else {
// draft.types = [...(draft.types ?? []), 'premium'];
// }
// })
{
if (tankFilters.types.includes('premium')) {
$tankFilters.setKey(
'types',
tankFilters.types.filter((t) => t !== 'premium'),
);
} else {
$tankFilters.setKey('types', [
...tankFilters.types,
'premium',
]);
}
}
}
>
<Text
color={
tankFilters.types?.includes('premium') ? undefined : 'amber'
}
style={{ display: 'flex', justifyContent: 'center' }}
>
<ResearchedIcon style={{ width: '1em', height: '1em' }} />
</Text>
</IconButton>
</Tooltip>
<Tooltip content="Collector">
<IconButton
variant={
tankFilters.types?.includes('collector') ? 'solid' : 'soft'
}
radius="none"
color={tankFilters.types?.includes('collector') ? 'blue' : 'gray'}
highContrast
onClick={() =>
// mutateTankFilters((draft) => {
// if (draft.types?.includes('collector')) {
// draft.types = draft.types?.filter((t) => t !== 'collector');
// } else {
// draft.types = [...(draft.types ?? []), 'collector'];
// }
// })
{
if (tankFilters.types.includes('collector')) {
$tankFilters.setKey(
'types',
tankFilters.types.filter((t) => t !== 'collector'),
);
} else {
$tankFilters.setKey('types', [
...tankFilters.types,
'collector',
]);
}
}
}
>
<Text
color={
tankFilters.types?.includes('collector') ? undefined : 'blue'
}
style={{ display: 'flex', justifyContent: 'center' }}
>
<ResearchedIcon style={{ width: '1em', height: '1em' }} />
</Text>
</IconButton>
</Tooltip>
</Flex>
<Flex
overflow="hidden"
style={{ borderRadius: 'var(--radius-full)' }}
direction={compact ? 'column' : { sm: 'row', initial: 'column' }}
>
<Tooltip content="Include test tank">
<IconButton
variant={tankFilters.testing === 'include' ? 'solid' : 'soft'}
radius="none"
color={tankFilters.testing === 'include' ? undefined : 'gray'}
highContrast
onClick={() =>
// mutateTankFilters((draft) => {
// draft.testing = 'include';
// })
{
$tankFilters.setKey('testing', 'include');
}
}
>
<ExperimentIcon
style={{ width: '1em', height: '1em', color: 'currentColor' }}
/>
</IconButton>
</Tooltip>
<Tooltip content="Exclude test tank">
<IconButton
variant={tankFilters.testing === 'exclude' ? 'solid' : 'soft'}
radius="none"
color={tankFilters.testing === 'exclude' ? undefined : 'gray'}
highContrast
onClick={() =>
// mutateTankFilters((draft) => {
// draft.testing = 'exclude';
// })
{
$tankFilters.setKey('testing', 'exclude');
}
}
>
<ScienceOffIcon
style={{ width: '1em', height: '1em', color: 'currentColor' }}
/>
</IconButton>
</Tooltip>
<Tooltip content="Only test tank">
<IconButton
variant={tankFilters.testing === 'only' ? 'solid' : 'soft'}
radius="none"
color={tankFilters.testing === 'only' ? undefined : 'gray'}
highContrast
onClick={() =>
// mutateTankFilters((draft) => {
// draft.testing = 'only';
// })
{
$tankFilters.setKey('testing', 'only');
}
}
>
<ScienceIcon
style={{ width: '1em', height: '1em', color: 'currentColor' }}
/>
</IconButton>
</Tooltip>
</Flex>
<Box>
<IconButton
color="red"
onClick={() => {
// tankFiltersStore.setState(tankFiltersStore.getInitialState(), true);
$tankFilters.set(initialTankFilters);
}}
>
<ReloadIcon />
</IconButton>
</Box>
</Flex>
);
}
packages/website-legacy/src/app/tools/tankopedia/components/NoResults.tsx → packages/website/src/components/TankSearch/components/NoResults.tsx
+4 -6
View File
@@ -1,13 +1,11 @@
import { Flex, Link, Text } from '@radix-ui/themes'; import { Flex, Link, Text } from '@radix-ui/themes';
import * as TankFilters from '../../../../stores/tankFilters'; import { $tankFilters, initialTankFilters } from '../../../stores/tankFilters';
interface NoResultsProps { interface NoResultsProps {
type?: 'filters' | 'search'; type?: 'filters' | 'search';
} }
export function NoResults({ type = 'filters' }: NoResultsProps) { export function NoResults({ type = 'filters' }: NoResultsProps) {
const tankFiltersStore = TankFilters.useStore();
return ( return (
<Flex flexGrow="1" align="center" justify="center"> <Flex flexGrow="1" align="center" justify="center">
<Text color="gray"> <Text color="gray">
@@ -16,9 +14,9 @@ export function NoResults({ type = 'filters' }: NoResultsProps) {
href="#" href="#"
underline="always" underline="always"
color="red" color="red"
onClick={() => onClick={() => {
tankFiltersStore.setState(tankFiltersStore.getInitialState(), true) $tankFilters.set(initialTankFilters);
} }}
> >
{type === 'filters' ? 'Try clearing filters' : 'Try searching again'} {type === 'filters' ? 'Try clearing filters' : 'Try searching again'}
</Link> </Link>
packages/website-legacy/src/app/tools/tankopedia/components/QuickLink.tsx → packages/website/src/components/TankSearch/components/QuickLink.tsx
+4 -4
View File
@@ -1,17 +1,17 @@
import { type TankDefinition } from '@blitzkit/core'; import { type TankDefinition } from '@blitzkit/core';
import { useStore } from '@nanostores/react';
import { CaretRightIcon } from '@radix-ui/react-icons'; import { CaretRightIcon } from '@radix-ui/react-icons';
import { Button, Link, TextField } from '@radix-ui/themes'; import { Button, Link, TextField } from '@radix-ui/themes';
import * as TankFilters from '../../../../stores/tankFilters'; import { $tankFilters } from '../../../stores/tankFilters';
interface QuickLinkProps { interface QuickLinkProps {
topResult?: TankDefinition; topResult?: TankDefinition;
} }
export function QuickLink({ topResult }: QuickLinkProps) { export function QuickLink({ topResult }: QuickLinkProps) {
const search = TankFilters.use((state) => state.search); const tankFilters = useStore($tankFilters);
const searching = TankFilters.use((state) => state.searching);
if (!search || !topResult || searching) return null; if (!tankFilters.search || !topResult || tankFilters.searching) return null;
return ( return (
<TextField.Slot> <TextField.Slot>
packages/website-legacy/src/app/tools/tankopedia/components/SearchBar.tsx → packages/website/src/components/TankSearch/components/SearchBar.tsx
+23 -16
View File
@@ -1,11 +1,12 @@
import { TankDefinition } from '@blitzkit/core'; import type { TankDefinition } from '@blitzkit/core';
import { useStore } from '@nanostores/react';
import { MagnifyingGlassIcon } from '@radix-ui/react-icons'; import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
import { Flex, Spinner, TextField } from '@radix-ui/themes'; import { Flex, Spinner, TextField } from '@radix-ui/themes';
import { debounce } from 'lodash-es'; import { debounce } from 'lodash-es';
import { useRouter } from 'next/navigation'; import { useRouter } from 'next/navigation';
import { KeyboardEventHandler, useCallback, useRef } from 'react'; import { type KeyboardEventHandler, useCallback, useRef } from 'react';
import * as TankFilters from '../../../../stores/tankFilters';
import { QuickLink } from './QuickLink'; import { QuickLink } from './QuickLink';
import { $tankFilters } from '../../../stores/tankFilters';
import { Sort } from './Sort'; import { Sort } from './Sort';
interface SearchBarProps { interface SearchBarProps {
@@ -14,35 +15,41 @@ interface SearchBarProps {
} }
export function SearchBar({ topResult, onSelect }: SearchBarProps) { export function SearchBar({ topResult, onSelect }: SearchBarProps) {
const tankFiltersStore = TankFilters.useStore(); const tankFilters = useStore($tankFilters);
const lastSearch = tankFiltersStore.getState().search;
const router = useRouter(); const router = useRouter();
const input = useRef<HTMLInputElement>(null); const input = useRef<HTMLInputElement>(null);
const searching = TankFilters.use((state) => state.searching);
const performSearch = useCallback( const performSearch = useCallback(
debounce(() => { debounce(() => {
tankFiltersStore.setState({ searching: false }); // tankFiltersStore.setState({ searching: false });
$tankFilters.setKey('searching', false);
if (!input.current) return; if (!input.current) return;
const sanitized = input.current.value.trim(); const sanitized = input.current.value.trim();
tankFiltersStore.setState({ // tankFiltersStore.setState({
search: sanitized.length === 0 ? undefined : sanitized, // search: sanitized.length === 0 ? undefined : sanitized,
}); // });
$tankFilters.setKey(
'search',
sanitized.length === 0 ? undefined : sanitized,
);
}, 500), }, 500),
[], [],
); );
const handleChange = useCallback(() => { const handleChange = useCallback(() => {
if (!tankFiltersStore.getState().searching) { // if (!tankFiltersStore.getState().searching) {
tankFiltersStore.setState({ searching: true }); // tankFiltersStore.setState({ searching: true });
// }
if (!tankFilters.searching) {
$tankFilters.setKey('searching', true);
} }
performSearch(); performSearch();
}, []); }, [tankFilters]);
const handleKeyDown = useCallback<KeyboardEventHandler>( const handleKeyDown = useCallback<KeyboardEventHandler>(
(event) => { (event) => {
if (event.key !== 'Enter' || !topResult || searching) return; if (event.key !== 'Enter' || !topResult || tankFilters.searching) return;
event.preventDefault(); event.preventDefault();
@@ -59,7 +66,7 @@ export function SearchBar({ topResult, onSelect }: SearchBarProps) {
<Flex justify="center" mt="4"> <Flex justify="center" mt="4">
<Flex gap="2" flexGrow="1"> <Flex gap="2" flexGrow="1">
<TextField.Root <TextField.Root
defaultValue={lastSearch} defaultValue={tankFilters.search}
style={{ flex: 1 }} style={{ flex: 1 }}
ref={input} ref={input}
placeholder="Search tanks..." placeholder="Search tanks..."
@@ -67,7 +74,7 @@ export function SearchBar({ topResult, onSelect }: SearchBarProps) {
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
> >
<TextField.Slot> <TextField.Slot>
{searching ? <Spinner /> : <MagnifyingGlassIcon />} {tankFilters.searching ? <Spinner /> : <MagnifyingGlassIcon />}
</TextField.Slot> </TextField.Slot>
<QuickLink topResult={topResult} /> <QuickLink topResult={topResult} />
packages/website-legacy/src/app/tools/tankopedia/components/SkeletonTankCard.tsx → packages/website/src/components/TankSearch/components/SkeletonTankCard.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import { Flex, Skeleton } from '@radix-ui/themes'; import { Flex, Skeleton } from '@radix-ui/themes';
import { memo, useRef } from 'react'; import { memo, useRef } from 'react';
import { useIntersection } from '../../../../hooks/useIntersection'; import { useIntersection } from '../../../hooks/useIntersection';
interface SkeletonTankCardProps { interface SkeletonTankCardProps {
onIntersection?: () => void; onIntersection?: () => void;
packages/website-legacy/src/app/tools/tankopedia/components/Sort.tsx → packages/website/src/components/TankSearch/components/Sort.tsx
+89 -118
View File
@@ -1,11 +1,11 @@
import { useStore } from '@nanostores/react';
import { CaretDownIcon } from '@radix-ui/react-icons'; import { CaretDownIcon } from '@radix-ui/react-icons';
import { Button, DropdownMenu } from '@radix-ui/themes'; import { Button, DropdownMenu } from '@radix-ui/themes';
import { TankopediaSortDirection } from '../../../../stores/tankopediaPersistent'; import type { TankopediaSortDirection } from '../../../stores/tankopediaPersistent';
import * as TankopediaSort from '../../../../stores/tankopediaSort'; import { $tankopediaSort } from '../../../stores/tankopediaSort';
export function Sort() { export function Sort() {
const sort = TankopediaSort.use(); const tankopediaSort = useStore($tankopediaSort);
const mutateTankopediaSort = TankopediaSort.useMutation();
return ( return (
<DropdownMenu.Root modal={false}> <DropdownMenu.Root modal={false}>
@@ -18,11 +18,12 @@ export function Sort() {
<DropdownMenu.Content align="end"> <DropdownMenu.Content align="end">
<DropdownMenu.CheckboxItem <DropdownMenu.CheckboxItem
checked={sort.by === 'meta.none'} checked={tankopediaSort.by === 'meta.none'}
onClick={() => { onClick={() => {
mutateTankopediaSort((draft) => { // mutateTankopediaSort((draft) => {
draft.by = 'meta.none'; // draft.by = 'meta.none';
}); // });
$tankopediaSort.setKey('by', 'meta.none');
}} }}
> >
No sort No sort
@@ -34,131 +35,123 @@ export function Sort() {
<DropdownMenu.SubTrigger>Fire</DropdownMenu.SubTrigger> <DropdownMenu.SubTrigger>Fire</DropdownMenu.SubTrigger>
<DropdownMenu.SubContent> <DropdownMenu.SubContent>
<DropdownMenu.CheckboxItem <DropdownMenu.CheckboxItem
checked={sort.by === 'fire.dpm'} checked={tankopediaSort.by === 'fire.dpm'}
onClick={() => { onClick={() => {
mutateTankopediaSort((draft) => { // mutateTankopediaSort((draft) => {
draft.by = 'fire.dpm'; // draft.by = 'fire.dpm';
}); // });
$tankopediaSort.setKey('by', 'fire.dpm');
}} }}
> >
Standard DPM Standard DPM
</DropdownMenu.CheckboxItem> </DropdownMenu.CheckboxItem>
<DropdownMenu.CheckboxItem <DropdownMenu.CheckboxItem
checked={sort.by === 'fire.dpmPremium'} checked={tankopediaSort.by === 'fire.dpmPremium'}
onClick={() => { onClick={() => {
mutateTankopediaSort((draft) => { // mutateTankopediaSort((draft) => {
draft.by = 'fire.dpmPremium'; // draft.by = 'fire.dpmPremium';
}); // });
$tankopediaSort.setKey('by', 'fire.dpmPremium');
}} }}
> >
Premium DPM Premium DPM
</DropdownMenu.CheckboxItem> </DropdownMenu.CheckboxItem>
<DropdownMenu.CheckboxItem <DropdownMenu.CheckboxItem
checked={sort.by === 'fire.reload'} checked={tankopediaSort.by === 'fire.reload'}
onClick={() => { onClick={() => {
mutateTankopediaSort((draft) => { // mutateTankopediaSort((draft) => {
draft.by = 'fire.reload'; // draft.by = 'fire.reload';
}); // });
$tankopediaSort.setKey('by', 'fire.reload');
}} }}
> >
Reload Reload
</DropdownMenu.CheckboxItem> </DropdownMenu.CheckboxItem>
<DropdownMenu.CheckboxItem <DropdownMenu.CheckboxItem
checked={sort.by === 'fire.caliber'} checked={tankopediaSort.by === 'fire.caliber'}
onClick={() => { onClick={() => {
mutateTankopediaSort((draft) => { // mutateTankopediaSort((draft) => {
draft.by = 'fire.caliber'; // draft.by = 'fire.caliber';
}); // });
$tankopediaSort.setKey('by', 'fire.caliber');
}} }}
> >
Caliber Caliber
</DropdownMenu.CheckboxItem> </DropdownMenu.CheckboxItem>
<DropdownMenu.CheckboxItem <DropdownMenu.CheckboxItem
checked={sort.by === 'fire.standardPenetration'} checked={tankopediaSort.by === 'fire.standardPenetration'}
onClick={() => { onClick={() => {
mutateTankopediaSort((draft) => { // mutateTankopediaSort((draft) => {
draft.by = 'fire.standardPenetration'; // draft.by = 'fire.standardPenetration';
}); // });
$tankopediaSort.setKey('by', 'fire.standardPenetration');
}} }}
> >
Standard penetration Standard penetration
</DropdownMenu.CheckboxItem> </DropdownMenu.CheckboxItem>
<DropdownMenu.CheckboxItem <DropdownMenu.CheckboxItem
checked={sort.by === 'fire.premiumPenetration'} checked={tankopediaSort.by === 'fire.premiumPenetration'}
onClick={() => { onClick={() => {
mutateTankopediaSort((draft) => { // mutateTankopediaSort((draft) => {
draft.by = 'fire.premiumPenetration'; // draft.by = 'fire.premiumPenetration';
}); // });
$tankopediaSort.setKey('by', 'fire.premiumPenetration');
}} }}
> >
Premium penetration Premium penetration
</DropdownMenu.CheckboxItem> </DropdownMenu.CheckboxItem>
<DropdownMenu.CheckboxItem <DropdownMenu.CheckboxItem
checked={sort.by === 'fire.damage'} checked={tankopediaSort.by === 'fire.damage'}
onClick={() => { onClick={() => {
mutateTankopediaSort((draft) => { $tankopediaSort.setKey('by', 'fire.damage');
draft.by = 'fire.damage';
});
}} }}
> >
Damage Damage
</DropdownMenu.CheckboxItem> </DropdownMenu.CheckboxItem>
<DropdownMenu.CheckboxItem <DropdownMenu.CheckboxItem
checked={sort.by === 'fire.shellVelocity'} checked={tankopediaSort.by === 'fire.shellVelocity'}
onClick={() => { onClick={() => {
mutateTankopediaSort((draft) => { $tankopediaSort.setKey('by', 'fire.shellVelocity');
draft.by = 'fire.shellVelocity';
});
}} }}
> >
Shell velocity Shell velocity
</DropdownMenu.CheckboxItem> </DropdownMenu.CheckboxItem>
<DropdownMenu.CheckboxItem <DropdownMenu.CheckboxItem
checked={sort.by === 'fire.aimTime'} checked={tankopediaSort.by === 'fire.aimTime'}
onClick={() => { onClick={() => {
mutateTankopediaSort((draft) => { $tankopediaSort.setKey('by', 'fire.aimTime');
draft.by = 'fire.aimTime';
});
}} }}
> >
Aim time Aim time
</DropdownMenu.CheckboxItem> </DropdownMenu.CheckboxItem>
<DropdownMenu.CheckboxItem <DropdownMenu.CheckboxItem
checked={sort.by === 'fire.dispersionStill'} checked={tankopediaSort.by === 'fire.dispersionStill'}
onClick={() => { onClick={() => {
mutateTankopediaSort((draft) => { $tankopediaSort.setKey('by', 'fire.dispersionStill');
draft.by = 'fire.dispersionStill';
});
}} }}
> >
Dispersion still Dispersion still
</DropdownMenu.CheckboxItem> </DropdownMenu.CheckboxItem>
<DropdownMenu.CheckboxItem <DropdownMenu.CheckboxItem
checked={sort.by === 'fire.dispersionMoving'} checked={tankopediaSort.by === 'fire.dispersionMoving'}
onClick={() => { onClick={() => {
mutateTankopediaSort((draft) => { $tankopediaSort.setKey('by', 'fire.dispersionMoving');
draft.by = 'fire.dispersionMoving';
});
}} }}
> >
Dispersion moving Dispersion moving
</DropdownMenu.CheckboxItem> </DropdownMenu.CheckboxItem>
<DropdownMenu.CheckboxItem <DropdownMenu.CheckboxItem
checked={sort.by === 'fire.gunDepression'} checked={tankopediaSort.by === 'fire.gunDepression'}
onClick={() => { onClick={() => {
mutateTankopediaSort((draft) => { $tankopediaSort.setKey('by', 'fire.gunDepression');
draft.by = 'fire.gunDepression';
});
}} }}
> >
Gun depression Gun depression
</DropdownMenu.CheckboxItem> </DropdownMenu.CheckboxItem>
<DropdownMenu.CheckboxItem <DropdownMenu.CheckboxItem
checked={sort.by === 'fire.gunElevation'} checked={tankopediaSort.by === 'fire.gunElevation'}
onClick={() => { onClick={() => {
mutateTankopediaSort((draft) => { $tankopediaSort.setKey('by', 'fire.gunElevation');
draft.by = 'fire.gunElevation';
});
}} }}
> >
Gun elevation Gun elevation
@@ -170,61 +163,49 @@ export function Sort() {
<DropdownMenu.SubTrigger>Maneuverability</DropdownMenu.SubTrigger> <DropdownMenu.SubTrigger>Maneuverability</DropdownMenu.SubTrigger>
<DropdownMenu.SubContent> <DropdownMenu.SubContent>
<DropdownMenu.CheckboxItem <DropdownMenu.CheckboxItem
checked={sort.by === 'maneuverability.forwardsSpeed'} checked={tankopediaSort.by === 'maneuverability.forwardsSpeed'}
onClick={() => { onClick={() => {
mutateTankopediaSort((draft) => { $tankopediaSort.setKey('by', 'maneuverability.forwardsSpeed');
draft.by = 'maneuverability.forwardsSpeed';
});
}} }}
> >
Forwards speed Forwards speed
</DropdownMenu.CheckboxItem> </DropdownMenu.CheckboxItem>
<DropdownMenu.CheckboxItem <DropdownMenu.CheckboxItem
checked={sort.by === 'maneuverability.backwardsSpeed'} checked={tankopediaSort.by === 'maneuverability.backwardsSpeed'}
onClick={() => { onClick={() => {
mutateTankopediaSort((draft) => { $tankopediaSort.setKey('by', 'maneuverability.backwardsSpeed');
draft.by = 'maneuverability.backwardsSpeed';
});
}} }}
> >
Backwards speed Backwards speed
</DropdownMenu.CheckboxItem> </DropdownMenu.CheckboxItem>
<DropdownMenu.CheckboxItem <DropdownMenu.CheckboxItem
checked={sort.by === 'maneuverability.power'} checked={tankopediaSort.by === 'maneuverability.power'}
onClick={() => { onClick={() => {
mutateTankopediaSort((draft) => { $tankopediaSort.setKey('by', 'maneuverability.power');
draft.by = 'maneuverability.power';
});
}} }}
> >
Power Power
</DropdownMenu.CheckboxItem> </DropdownMenu.CheckboxItem>
<DropdownMenu.CheckboxItem <DropdownMenu.CheckboxItem
checked={sort.by === 'maneuverability.powerToWeight'} checked={tankopediaSort.by === 'maneuverability.powerToWeight'}
onClick={() => { onClick={() => {
mutateTankopediaSort((draft) => { $tankopediaSort.setKey('by', 'maneuverability.powerToWeight');
draft.by = 'maneuverability.powerToWeight';
});
}} }}
> >
Power to weight Power to weight
</DropdownMenu.CheckboxItem> </DropdownMenu.CheckboxItem>
<DropdownMenu.CheckboxItem <DropdownMenu.CheckboxItem
checked={sort.by === 'maneuverability.weight'} checked={tankopediaSort.by === 'maneuverability.weight'}
onClick={() => { onClick={() => {
mutateTankopediaSort((draft) => { $tankopediaSort.setKey('by', 'maneuverability.weight');
draft.by = 'maneuverability.weight';
});
}} }}
> >
Weight Weight
</DropdownMenu.CheckboxItem> </DropdownMenu.CheckboxItem>
<DropdownMenu.CheckboxItem <DropdownMenu.CheckboxItem
checked={sort.by === 'maneuverability.traverseSpeed'} checked={tankopediaSort.by === 'maneuverability.traverseSpeed'}
onClick={() => { onClick={() => {
mutateTankopediaSort((draft) => { $tankopediaSort.setKey('by', 'maneuverability.traverseSpeed');
draft.by = 'maneuverability.traverseSpeed';
});
}} }}
> >
Traverse speed Traverse speed
@@ -236,71 +217,60 @@ export function Sort() {
<DropdownMenu.SubTrigger>Survivability</DropdownMenu.SubTrigger> <DropdownMenu.SubTrigger>Survivability</DropdownMenu.SubTrigger>
<DropdownMenu.SubContent> <DropdownMenu.SubContent>
<DropdownMenu.CheckboxItem <DropdownMenu.CheckboxItem
checked={sort.by === 'survivability.health'} checked={tankopediaSort.by === 'survivability.health'}
onClick={() => { onClick={() => {
mutateTankopediaSort((draft) => { $tankopediaSort.setKey('by', 'survivability.health');
draft.by = 'survivability.health';
});
}} }}
> >
Health Health
</DropdownMenu.CheckboxItem> </DropdownMenu.CheckboxItem>
<DropdownMenu.CheckboxItem <DropdownMenu.CheckboxItem
checked={sort.by === 'survivability.viewRange'} checked={tankopediaSort.by === 'survivability.viewRange'}
onClick={() => { onClick={() => {
mutateTankopediaSort((draft) => { $tankopediaSort.setKey('by', 'survivability.viewRange');
draft.by = 'survivability.viewRange';
});
}} }}
> >
View range View range
</DropdownMenu.CheckboxItem> </DropdownMenu.CheckboxItem>
<DropdownMenu.CheckboxItem <DropdownMenu.CheckboxItem
checked={sort.by === 'survivability.camouflageStill'} checked={tankopediaSort.by === 'survivability.camouflageStill'}
onClick={() => { onClick={() => {
mutateTankopediaSort((draft) => { $tankopediaSort.setKey('by', 'survivability.camouflageStill');
draft.by = 'survivability.camouflageStill';
});
}} }}
> >
Camouflage Camouflage
</DropdownMenu.CheckboxItem> </DropdownMenu.CheckboxItem>
<DropdownMenu.CheckboxItem <DropdownMenu.CheckboxItem
checked={sort.by === 'survivability.camouflageMoving'} checked={tankopediaSort.by === 'survivability.camouflageMoving'}
onClick={() => { onClick={() => {
mutateTankopediaSort((draft) => { $tankopediaSort.setKey('by', 'survivability.camouflageMoving');
draft.by = 'survivability.camouflageMoving';
});
}} }}
> >
Camouflage moving Camouflage moving
</DropdownMenu.CheckboxItem> </DropdownMenu.CheckboxItem>
<DropdownMenu.CheckboxItem <DropdownMenu.CheckboxItem
checked={sort.by === 'survivability.camouflageShooting'} checked={tankopediaSort.by === 'survivability.camouflageShooting'}
onClick={() => { onClick={() => {
mutateTankopediaSort((draft) => { $tankopediaSort.setKey(
draft.by = 'survivability.camouflageShooting'; 'by',
}); 'survivability.camouflageShooting',
);
}} }}
> >
Camouflage shooting Camouflage shooting
</DropdownMenu.CheckboxItem> </DropdownMenu.CheckboxItem>
<DropdownMenu.CheckboxItem <DropdownMenu.CheckboxItem
checked={sort.by === 'survivability.volume'} checked={tankopediaSort.by === 'survivability.volume'}
onClick={() => { onClick={() => {
mutateTankopediaSort((draft) => { $tankopediaSort.setKey('by', 'survivability.volume');
draft.by = 'survivability.volume';
});
}} }}
> >
Volume Volume
</DropdownMenu.CheckboxItem> </DropdownMenu.CheckboxItem>
<DropdownMenu.CheckboxItem <DropdownMenu.CheckboxItem
checked={sort.by === 'survivability.length'} checked={tankopediaSort.by === 'survivability.length'}
onClick={() => { onClick={() => {
mutateTankopediaSort((draft) => { $tankopediaSort.setKey('by', 'survivability.length');
draft.by = 'survivability.length';
});
}} }}
> >
Length Length
@@ -310,12 +280,13 @@ export function Sort() {
<DropdownMenu.Label>Direction</DropdownMenu.Label> <DropdownMenu.Label>Direction</DropdownMenu.Label>
<DropdownMenu.RadioGroup <DropdownMenu.RadioGroup
value={sort.direction} value={tankopediaSort.direction}
onValueChange={(value) => onValueChange={(value) => {
mutateTankopediaSort((draft) => { $tankopediaSort.setKey(
draft.direction = value as TankopediaSortDirection; 'direction',
}) value as TankopediaSortDirection,
} );
}}
> >
<DropdownMenu.RadioItem value="ascending"> <DropdownMenu.RadioItem value="ascending">
Ascending Ascending
packages/website-legacy/src/app/tools/tankopedia/components/TankCard.css.ts → packages/website/src/components/TankSearch/components/TankCard.css.ts
View File
File renamed without changes.
packages/website-legacy/src/app/tools/tankopedia/components/TankCard.tsx → packages/website/src/components/TankSearch/components/TankCard.tsx
+14 -12
View File
@@ -4,17 +4,19 @@ import {
normalizeBoundingBox, normalizeBoundingBox,
resolveDpm, resolveDpm,
resolveNearPenetration, resolveNearPenetration,
TankDefinition,
tankIcon, tankIcon,
unionBoundingBox, unionBoundingBox,
type TankDefinition,
} from '@blitzkit/core'; } from '@blitzkit/core';
import { useStore } from '@nanostores/react';
import { Flex, Text } from '@radix-ui/themes'; import { Flex, Text } from '@radix-ui/themes';
import { assignInlineVars } from '@vanilla-extract/dynamic'; import { assignInlineVars } from '@vanilla-extract/dynamic';
import Link from 'next/link'; import Link from 'next/link';
import { use, useMemo } from 'react'; import { useMemo } from 'react';
import { classIcons } from '../../../../components/ClassIcon'; import { resolveReload } from '../../../core/blitzkit/resolveReload';
import { resolveReload } from '../../../../core/blitzkit/resolveReload'; import { useAwait } from '../../../hooks/useAwait';
import * as TankopediaSort from '../../../../stores/tankopediaSort'; import { $tankopediaSort } from '../../../stores/tankopediaSort';
import { classIcons } from '../../ClassIcon';
import * as styles from './TankCard.css'; import * as styles from './TankCard.css';
interface TankCardProps { interface TankCardProps {
@@ -23,11 +25,11 @@ interface TankCardProps {
} }
export function TankCard({ tank, onSelect }: TankCardProps) { export function TankCard({ tank, onSelect }: TankCardProps) {
const awaitedModelDefinitions = use(modelDefinitions); const awaitedModelDefinitions = useAwait(modelDefinitions);
const Icon = classIcons[tank.class]; const Icon = classIcons[tank.class];
const sortBy = TankopediaSort.use((state) => state.by); const tankopediaSort = useStore($tankopediaSort);
const discriminator = useMemo(() => { const discriminator = useMemo(() => {
if (sortBy.startsWith('meta')) return undefined; if (tankopediaSort.by.startsWith('meta')) return undefined;
const turret = tank.turrets.at(-1)!; const turret = tank.turrets.at(-1)!;
const gun = turret.guns.at(-1)!; const gun = turret.guns.at(-1)!;
@@ -39,7 +41,7 @@ export function TankCard({ tank, onSelect }: TankCardProps) {
const turretModelDefinition = tankModelDefinition.turrets[turret.id]; const turretModelDefinition = tankModelDefinition.turrets[turret.id];
const gunModelDefinition = turretModelDefinition.guns[gun.id]; const gunModelDefinition = turretModelDefinition.guns[gun.id];
switch (sortBy) { switch (tankopediaSort.by) {
case 'fire.aimTime': case 'fire.aimTime':
return gun.aimTime.toFixed(2); return gun.aimTime.toFixed(2);
case 'fire.caliber': case 'fire.caliber':
@@ -131,7 +133,7 @@ export function TankCard({ tank, onSelect }: TankCardProps) {
), ),
).toFixed(0); ).toFixed(0);
} }
}, [sortBy]); }, [tankopediaSort.by]);
return ( return (
<Text <Text
@@ -141,8 +143,8 @@ export function TankCard({ tank, onSelect }: TankCardProps) {
tank.treeType === 'collector' tank.treeType === 'collector'
? 'blue' ? 'blue'
: tank.treeType === 'premium' : tank.treeType === 'premium'
? 'amber' ? 'amber'
: 'gray' : 'gray'
} }
highContrast={tank.treeType === 'researchable'} highContrast={tank.treeType === 'researchable'}
onClick={onSelect ? () => onSelect(tank) : undefined} onClick={onSelect ? () => onSelect(tank) : undefined}
packages/website-legacy/src/app/tools/tankopedia/components/TankCardWrapper.tsx → packages/website/src/components/TankSearch/components/TankCardWrapper.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import { Grid, GridProps } from '@radix-ui/themes'; import { Grid, type GridProps } from '@radix-ui/themes';
export function TankCardWrapper(props: GridProps) { export function TankCardWrapper(props: GridProps) {
return ( return (
packages/website/src/components/TankSearch/components/TierFilter.tsx
+60
View File
@@ -0,0 +1,60 @@
import { type Tier, TIER_ROMAN_NUMERALS } from '@blitzkit/core';
import { useStore } from '@nanostores/react';
import { Flex, IconButton, Text } from '@radix-ui/themes';
import { times } from 'lodash-es';
import { memo } from 'react';
import { $tankFilters } from '../../../stores/tankFilters';
import { $tankopediaSort } from '../../../stores/tankopediaSort';
export const TierFilter = memo(() => {
const tankFilters = useStore($tankFilters);
const tankopediaSort = useStore($tankopediaSort);
if (tankopediaSort.by !== 'meta.none' || tankFilters.search) return null;
return (
<Flex justify="center">
<Flex
direction="row"
overflow="hidden"
style={{ borderRadius: 'var(--radius-full)' }}
>
{times(10, (index) => {
const tier = (10 - index) as Tier;
const selected = tankFilters.tiers.includes(tier);
return (
<IconButton
key={tier}
variant={selected ? 'solid' : 'soft'}
radius="none"
color={selected ? undefined : 'gray'}
highContrast
onClick={() =>
// mutateTankFilters((draft) => {
// if (draft.tiers?.includes(tier)) {
// draft.tiers = draft.tiers?.filter((t) => t !== tier);
// } else {
// draft.tiers = [...(draft.tiers ?? []), tier];
// }
// })
{
if (tankFilters.tiers.includes(tier)) {
$tankFilters.setKey(
'tiers',
tankFilters.tiers.filter((t) => t !== tier),
);
} else {
$tankFilters.setKey('tiers', [...tankFilters.tiers, tier]);
}
}
}
>
<Text size="2">{TIER_ROMAN_NUMERALS[tier]}</Text>
</IconButton>
);
})}
</Flex>
</Flex>
);
});
packages/website-legacy/src/app/tools/tankopedia/components/TankSearch/constants.tsx → packages/website/src/components/TankSearch/constants.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import { TreeType } from '@blitzkit/core'; import type { TreeType } from '@blitzkit/core';
export const treeTypeOrder: TreeType[] = [ export const treeTypeOrder: TreeType[] = [
'researchable', 'researchable',
packages/website-legacy/src/app/tools/tankopedia/components/TankSearch/index.tsx → packages/website/src/components/TankSearch/index.tsx
+47 -41
View File
@@ -1,6 +1,5 @@
import { import {
TANK_CLASSES, TANK_CLASSES,
TankDefinition,
gameDefinitions, gameDefinitions,
modelDefinitions, modelDefinitions,
normalizeBoundingBox, normalizeBoundingBox,
@@ -10,28 +9,31 @@ import {
tankDefinitionsArray, tankDefinitionsArray,
tankNames, tankNames,
unionBoundingBox, unionBoundingBox,
type TankDefinition,
} from '@blitzkit/core'; } from '@blitzkit/core';
import { Callout, Flex, FlexProps, Link, Text } from '@radix-ui/themes'; import { useStore } from '@nanostores/react';
import { go } from 'fuzzysort'; import { Callout, Flex, Link, Text, type FlexProps } from '@radix-ui/themes';
import fuzzysort from 'fuzzysort';
import { times } from 'lodash-es'; import { times } from 'lodash-es';
import { Fragment, memo, use, useEffect, useMemo, useState } from 'react'; import { Fragment, memo, useEffect, useMemo, useState } from 'react';
import { AdMidSectionResponsive } from '../../../../../components/AdMidSectionResponsive'; import { filterTank } from '../../core/blitzkit/filterTank';
import { ExperimentIcon } from '../../../../../components/ExperimentIcon'; import { resolveReload } from '../../core/blitzkit/resolveReload';
import { filterTank } from '../../../../../core/blitzkit/filterTank'; import { useAdExempt } from '../../hooks/useAdExempt';
import { resolveReload } from '../../../../../core/blitzkit/resolveReload'; import { useAwait } from '../../hooks/useAwait';
import { useAdExempt } from '../../../../../hooks/useAdExempt'; import { $tankFilters } from '../../stores/tankFilters';
import * as TankFilters from '../../../../../stores/tankFilters';
import { import {
SORT_NAMES, SORT_NAMES,
SORT_UNITS, SORT_UNITS,
} from '../../../../../stores/tankopediaPersistent/constants'; } from '../../stores/tankopediaPersistent/constants';
import * as TankopediaSort from '../../../../../stores/tankopediaSort'; import { $tankopediaSort } from '../../stores/tankopediaSort';
import { FilterControl } from '../FilterControl'; import { AdMidSectionResponsive } from '../AdMidSectionResponsive';
import { NoResults } from '../NoResults'; import { ExperimentIcon } from '../ExperimentIcon';
import { SearchBar } from '../SearchBar'; import { FilterControl } from './components/FilterControl';
import { SkeletonTankCard } from '../SkeletonTankCard'; import { NoResults } from './components/NoResults';
import { TankCard } from '../TankCard'; import { SearchBar } from './components/SearchBar';
import { TankCardWrapper } from '../TankCardWrapper'; import { SkeletonTankCard } from './components/SkeletonTankCard';
import { TankCard } from './components/TankCard';
import { TankCardWrapper } from './components/TankCardWrapper';
import { treeTypeOrder } from './constants'; import { treeTypeOrder } from './constants';
type TankSearchProps = Omit<FlexProps, 'onSelect'> & { type TankSearchProps = Omit<FlexProps, 'onSelect'> & {
@@ -46,21 +48,23 @@ const DEFAULT_LOADED_CARDS = 75;
export const TankSearch = memo<TankSearchProps>( export const TankSearch = memo<TankSearchProps>(
({ compact, onSelect, onSelectAll, ...props }) => { ({ compact, onSelect, onSelectAll, ...props }) => {
const exempt = useAdExempt(); const exempt = useAdExempt();
const awaitedGameDefinitions = use(gameDefinitions); const awaitedGameDefinitions = useAwait(gameDefinitions);
const awaitedModelDefinitions = use(modelDefinitions); const awaitedModelDefinitions = useAwait(modelDefinitions);
const awaitedTankDefinitions = use(tankDefinitions); const awaitedTankDefinitions = useAwait(tankDefinitions);
const awaitedTanksDefinitionsArray = use(tankDefinitionsArray); const awaitedTanksDefinitionsArray = useAwait(tankDefinitionsArray);
const awaitedTankNames = use(tankNames); const awaitedTankNames = useAwait(tankNames);
const filters = TankFilters.use(); const tankFilters = useStore($tankFilters);
const sort = TankopediaSort.use(); const tankopediaSort = useStore($tankopediaSort);
const tanksFiltered = useMemo(() => { const tanksFiltered = useMemo(() => {
if (filters.search === undefined) { console.log(awaitedTanksDefinitionsArray);
if (tankFilters.search === undefined) {
const filtered = awaitedTanksDefinitionsArray.filter((tank) => const filtered = awaitedTanksDefinitionsArray.filter((tank) =>
filterTank(filters, tank), filterTank(tankFilters, tank),
); );
let sorted: TankDefinition[]; let sorted: TankDefinition[];
switch (sort.by) { switch (tankopediaSort.by) {
case 'meta.none': case 'meta.none':
sorted = filtered sorted = filtered
.sort((a, b) => b.tier - a.tier) .sort((a, b) => b.tier - a.tier)
@@ -370,9 +374,11 @@ export const TankSearch = memo<TankSearchProps>(
break; break;
} }
return sort.direction === 'ascending' ? sorted : sorted.reverse(); return tankopediaSort.direction === 'ascending'
? sorted
: sorted.reverse();
} else { } else {
const searchedRaw = go(filters.search, awaitedTankNames, { const searchedRaw = fuzzysort.go(tankFilters.search, awaitedTankNames, {
keys: ['searchableName', 'searchableNameDeburr', 'camouflages'], keys: ['searchableName', 'searchableNameDeburr', 'camouflages'],
}); });
const searchedTanks = searchedRaw.map( const searchedTanks = searchedRaw.map(
@@ -380,19 +386,19 @@ export const TankSearch = memo<TankSearchProps>(
); );
return searchedTanks; return searchedTanks;
} }
}, [filters, sort]); }, [tankFilters, tankopediaSort]);
const [loadedRows, setLoadedRows] = useState(DEFAULT_LOADED_CARDS); const [loadedRows, setLoadedRows] = useState(DEFAULT_LOADED_CARDS);
const tanks = tanksFiltered.slice(0, loadedRows); const tanks = tanksFiltered.slice(0, loadedRows);
useEffect(() => { useEffect(() => {
setLoadedRows(DEFAULT_LOADED_CARDS); setLoadedRows(DEFAULT_LOADED_CARDS);
}, [filters, sort]); }, [tankFilters, tankopediaSort]);
return ( return (
<Flex direction="column" gap="4" flexGrow="1" {...props}> <Flex direction="column" gap="4" flexGrow="1" {...props}>
<SearchBar topResult={tanks?.[0]} onSelect={onSelect} /> <SearchBar topResult={tanks?.[0]} onSelect={onSelect} />
{!filters.search && !filters.searching && ( {!tankFilters.search && !tankFilters.searching && (
<FilterControl compact={compact} /> <FilterControl compact={compact} />
)} )}
@@ -413,18 +419,18 @@ export const TankSearch = memo<TankSearchProps>(
)} )}
</Flex> </Flex>
{sort.by !== 'meta.none' && ( {tankopediaSort.by !== 'meta.none' && (
<Text color="gray"> <Text color="gray">
Sorting by {SORT_NAMES[sort.by]} Sorting by {SORT_NAMES[tankopediaSort.by]}
{SORT_UNITS[sort.by] === undefined {SORT_UNITS[tankopediaSort.by] === undefined
? '' ? ''
: ` (${SORT_UNITS[sort.by]})`} : ` (${SORT_UNITS[tankopediaSort.by]})`}
, {sort.direction} , {tankopediaSort.direction}
</Text> </Text>
)} )}
</Flex> </Flex>
{filters.testing === 'only' && ( {tankFilters.testing === 'only' && (
<Flex justify="center" mt="4"> <Flex justify="center" mt="4">
<Callout.Root color="amber"> <Callout.Root color="amber">
<Callout.Icon> <Callout.Icon>
@@ -438,7 +444,7 @@ export const TankSearch = memo<TankSearchProps>(
</Flex> </Flex>
)} )}
{!filters.searching && ( {!tankFilters.searching && (
<> <>
{tanks.length > 0 && ( {tanks.length > 0 && (
<TankCardWrapper> <TankCardWrapper>
@@ -477,7 +483,7 @@ export const TankSearch = memo<TankSearchProps>(
</> </>
)} )}
{filters.searching && ( {tankFilters.searching && (
<TankCardWrapper> <TankCardWrapper>
{times(Math.round(10 + 10 * Math.random()), (index) => ( {times(Math.round(10 + 10 * Math.random()), (index) => (
<SkeletonTankCard key={index} /> <SkeletonTankCard key={index} />
packages/website/src/constants/lightingEnvironments.ts
+7
View File
@@ -0,0 +1,7 @@
export const ENVIRONMENTS = [
'lobby',
'apartment',
'warehouse',
'dawn',
'sunset',
] as const;
packages/website/src/hooks/useIntersection.ts
+1 -1
View File
@@ -1,4 +1,4 @@
import { RefObject, useLayoutEffect, useRef } from 'react'; import { type RefObject, useLayoutEffect, useRef } from 'react';
interface UseIntersectionOptions extends IntersectionObserverInit { interface UseIntersectionOptions extends IntersectionObserverInit {
disabled: boolean; disabled: boolean;
packages/website/src/layouts/ToolLayout.astro
+66
View File
@@ -0,0 +1,66 @@
---
import { imgur, ImgurSize } from '@blitzkit/core';
import { Box, Flex, Heading, Text } from '@radix-ui/themes';
import { TOOLS } from '../constants/tools';
import RootLayout from './RootLayout.astro';
const { pathname } = Astro.url;
const pathSplit = pathname.split('/');
const toolId = pathSplit.at(2);
const isToolRoot = pathname === `/tools/${toolId}`;
const tool = TOOLS.find((tool) => tool.id === toolId);
---
<RootLayout>
{
tool && (
<>
{isToolRoot && (
<>
<title>{tool.title}</title>
<meta property="og:image" content={imgur(tool.image)} />
{tool.pageDescription !== undefined && (
<>
<meta name="description" content={tool.pageDescription} />
<meta
property="og:description"
content={tool.pageDescription}
/>
</>
)}
</>
)}
</>
)
}
{
pathSplit.length === 3 && (
<Box
style={{
backgroundImage: `url(${imgur(tool!.image, {
format: 'jpeg',
size: ImgurSize.HugeThumbnail,
})})`,
backgroundSize: 'cover',
}}
>
<Flex
direction="column"
align="center"
py="6"
style={{
backdropFilter: 'blur(4rem)',
WebkitBackdropFilter: 'blur(4rem)',
}}
>
<Heading size="7">{tool?.title}</Heading>
<Text>{tool?.description}</Text>
</Flex>
</Box>
)
}
<slot />
</RootLayout>
packages/website/src/pages/TestComponent.tsx
-21
View File
@@ -1,21 +0,0 @@
import { Button, Flex, Popover, Text } from '@radix-ui/themes';
import { BlitzKitTheme } from '../components/BlitzKitTheme';
export function TestComponent() {
return (
<Popover.Root>
<Popover.Trigger>
<Button>Radix UI</Button>
</Popover.Trigger>
<BlitzKitTheme>
<Popover.Content>
<Flex direction="column">
<Text>I should be in a dark mode popover</Text>
<Button>And I should be yellow and have full border radius!</Button>
</Flex>
</Popover.Content>
</BlitzKitTheme>
</Popover.Root>
);
}
packages/website/src/pages/test.astro
-16
View File
@@ -1,16 +0,0 @@
---
import { BlitzKitTheme } from '../components/BlitzKitTheme';
import { TestComponent } from './TestComponent';
---
<style is:global>
@import '@radix-ui/themes/styles.css';
</style>
<html>
<body>
<BlitzKitTheme>
<TestComponent client:idle />
</BlitzKitTheme>
</body>
</html>
packages/website/src/pages/tools/tankopedia/index.astro
+8
View File
@@ -0,0 +1,8 @@
---
import { TankSearch } from '../../../components/TankSearch';
import ToolLayout from '../../../layouts/ToolLayout.astro';
---
<ToolLayout>
<TankSearch />
</ToolLayout>
packages/website/src/stores/tankFilters.ts
+13 -15
View File
@@ -1,6 +1,5 @@
import { TankClass, Tier, TreeType } from '@blitzkit/core'; import type { TankClass, Tier, TreeType } from '@blitzkit/core';
import { create } from 'zustand'; import { map } from 'nanostores';
import { createContextualSafeStore } from '../core/zustand/createContextualSafeStore';
export interface TankFilters { export interface TankFilters {
tiers: Tier[]; tiers: Tier[];
@@ -12,15 +11,14 @@ export interface TankFilters {
searching: boolean; searching: boolean;
} }
export const { Provider, use, useMutation, useStore } = export const initialTankFilters: TankFilters = {
createContextualSafeStore(() => tiers: [],
create<TankFilters>()(() => ({ nations: [],
tiers: [], classes: [],
nations: [], types: [],
classes: [], testing: 'include',
types: [], search: undefined,
testing: 'include', searching: false,
search: undefined, };
searching: false,
})), export const $tankFilters = map<TankFilters>(initialTankFilters);
);
packages/website/src/stores/tankopediaPersistent/index.ts
+1 -1
View File
@@ -2,7 +2,7 @@ import { TankClass, Tier, TreeType } from '@blitzkit/core';
import lodash from 'lodash-es'; import lodash from 'lodash-es';
import { create } from 'zustand'; import { create } from 'zustand';
import { persist, subscribeWithSelector } from 'zustand/middleware'; import { persist, subscribeWithSelector } from 'zustand/middleware';
import { ENVIRONMENTS } from '../../app/tools/tankopedia/[id]/components/Lighting'; import { ENVIRONMENTS } from '../../constants/lightingEnvironments';
import { createContextualSafeStore } from '../../core/zustand/createContextualSafeStore'; import { createContextualSafeStore } from '../../core/zustand/createContextualSafeStore';
import { SORT_NAMES, TankopediaDisplay } from './constants'; import { SORT_NAMES, TankopediaDisplay } from './constants';
packages/website/src/stores/tankopediaSort.ts
+7 -11
View File
@@ -1,8 +1,7 @@
import { create } from 'zustand'; import { map } from 'nanostores';
import { createContextualSafeStore } from '../core/zustand/createContextualSafeStore';
import { import {
TankopediaSortBy, type TankopediaSortBy,
TankopediaSortDirection, type TankopediaSortDirection,
} from './tankopediaPersistent'; } from './tankopediaPersistent';
export interface TankopediaSort { export interface TankopediaSort {
@@ -10,10 +9,7 @@ export interface TankopediaSort {
direction: TankopediaSortDirection; direction: TankopediaSortDirection;
} }
export const { Provider, use, useMutation, useStore } = export const $tankopediaSort = map<TankopediaSort>({
createContextualSafeStore(() => by: 'meta.none',
create<TankopediaSort>()(() => ({ direction: 'descending',
by: 'meta.none', });
direction: 'descending',
})),
);