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

tank search ui rebuilt... somewhat

Browse Source
This commit is contained in:
tresabhi committed 2026-08-28 10:42:57 -05:00
1 parent b400ff6d07
commit 1f1c9f26f1
21 files changed
+455 -369
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/website/src/components/Button/index.module.css
+3 -2
View File
@@ -10,14 +10,15 @@
border: none; border: none;
font-family: var(--font-family-regular); font-family: var(--font-family-regular);
font-size: 0.75rem; font-size: 0.75em;
color: var(--gray-1); color: var(--gray-1);
font-weight: var(--weight-medium); font-weight: var(--weight-medium);
cursor: pointer; cursor: pointer;
&[data-size="minor"] { &[data-size="minor"] {
font-size: 0.75rem; font-size: 0.75em;
padding: var(--space-2) var(--space-3);
} }
&[data-array="true"] { &[data-array="true"] {
packages/website/src/components/DropdownMenu/index.module.css
+2
View File
@@ -0,0 +1,2 @@
.Trigger {
}
packages/website/src/components/Flex/index.module.css
+57
View File
@@ -4,4 +4,61 @@
&[data-column="true"] { &[data-column="true"] {
flex-direction: column; flex-direction: column;
} }
&[data-wrap="true"] {
flex-wrap: wrap;
}
&[data-justify="start"] {
justify-content: flex-start;
}
&[data-justify="center"] {
justify-content: center;
}
&[data-justify="end"] {
justify-content: flex-end;
}
&[data-justify="between"] {
justify-content: space-between;
}
&[data-align="start"] {
align-items: flex-start;
}
&[data-align="center"] {
align-items: center;
}
&[data-align="end"] {
align-items: flex-end;
}
&[data-gap="0"] {
gap: var(--space-0);
}
&[data-gap="1"] {
gap: var(--space-1);
}
&[data-gap="2"] {
gap: var(--space-2);
}
&[data-gap="3"] {
gap: var(--space-3);
}
&[data-gap="4"] {
gap: var(--space-4);
}
&[data-gap="5"] {
gap: var(--space-5);
}
&[data-gap="6"] {
gap: var(--space-6);
}
&[data-gap="7"] {
gap: var(--space-7);
}
&[data-gap="8"] {
gap: var(--space-8);
}
&[data-gap="9"] {
gap: var(--space-9);
}
} }
packages/website/src/components/Flex/index.tsx
+20 -3
View File
@@ -4,17 +4,34 @@ import { classNames } from "../../ui/classNames";
import styles from "./index.module.css"; import styles from "./index.module.css";
interface Props extends ComponentProps<"div"> { interface Props extends ComponentProps<"div"> {
gap?: Space;
column?: boolean; column?: boolean;
wrap?: boolean;
align?: "start" | "center" | "end";
justify?: "start" | "center" | "end" | "between";
gap?: Space;
} }
export function Flex({ children, column, className, gap, ...props }: Props) { export function Flex({
children,
column,
className,
gap,
justify,
align,
wrap,
...props
}: Props) {
return ( return (
<div <div
{...props} {...props}
className={classNames(styles.flex, className)} className={classNames(styles.flex, className)}
data-gap={gap}
data-column={column} data-column={column}
data-wrap={wrap}
data-gap={gap}
data-justify={justify}
data-align={align}
> >
{children} {children}
</div> </div>
packages/website/src/components/LinkI18nWrapper/index.module.css
+3
View File
@@ -0,0 +1,3 @@
.wrapper {
display: contents;
}
packages/website/src/components/LinkI18nWrapper/index.tsx
+21
View File
@@ -0,0 +1,21 @@
import locales from "@blitzkit/i18n/locales.json";
import { LinkWrapper, type LinkWrapperProps } from "../LinkWrapper";
import styles from "./index.module.css";
export interface LinkI18nWrapperProps extends LinkWrapperProps {
locale: string;
}
export function LinkI18nWrapper({
locale,
href,
...props
}: LinkI18nWrapperProps) {
return (
<LinkWrapper
className={styles.wrapper}
href={`${locale === locales.default ? "" : `/${locale}`}${href}`}
{...props}
/>
);
}
packages/website/src/components/LinkWrapper/index.module.css
+3
View File
@@ -0,0 +1,3 @@
.wrapper {
display: contents;
}
packages/website/src/components/LinkWrapper/index.tsx
+9
View File
@@ -0,0 +1,9 @@
import type { ComponentProps } from "react";
import { classNames } from "../../ui/classNames";
import styles from "./index.module.css";
export interface LinkWrapperProps extends ComponentProps<"a"> {}
export function LinkWrapper({ className, ...props }: LinkWrapperProps) {
return <a className={classNames(styles.wrapper, className)} {...props} />;
}
packages/website/src/components/TankCard/index.css
-43
View File
@@ -1,43 +0,0 @@
.tank-search-card {
user-select: none;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
background-position: top left;
background-size: contain;
background-repeat: no-repeat;
overflow: hidden;
}
.tank-search-card[data-provide-link='true'] {
cursor: pointer;
}
.tank-search-card .link {
width: 100%;
display: flex;
flex-direction: column;
color: inherit;
}
.tank-search-card .image {
width: 100%;
height: 8rem;
object-position: center right;
object-fit: contain;
filter: drop-shadow(-1px -1px 4px black);
}
.tank-search-card .class-icon {
width: 1em;
height: 1em;
min-width: 1em;
min-height: 1em;
}
.tank-search-card .name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
packages/website/src/components/TankCard/index.module.css
+15
View File
@@ -0,0 +1,15 @@
.image-wrapper {
overflow: hidden;
box-sizing: border-box;
background-size: auto 100%;
background-repeat: no-repeat;
height: 6rem;
}
.icon {
width: 1em;
height: 1em;
}
packages/website/src/components/TankCard/index.tsx
+68 -88
View File
@@ -1,15 +1,15 @@
import { alias, TankType, type TankDefinition } from "@blitzkit/core"; import { alias, TankType, type TankDefinition } from "@blitzkit/core";
import { uniq } from "lodash-es"; import { uniq } from "lodash-es";
import { forwardRef, type ReactNode } from "react"; import { type ReactNode } from "react";
import { api } from "../../core/blitzkit/api"; import { api } from "../../core/blitzkit/api";
import { useLocale } from "../../hooks/useLocale"; import { useLocale } from "../../hooks/useLocale";
import { TankopediaPersistent } from "../../stores/tankopediaPersistent"; import { TankopediaPersistent } from "../../stores/tankopediaPersistent";
import { classIcons } from "../ClassIcon"; import { classIcons } from "../ClassIcon";
import { Flex } from "../Flex"; import { Flex } from "../Flex";
import { LinkI18n } from "../LinkI18n"; import { LinkI18nWrapper } from "../LinkI18nWrapper";
import { MAX_RECENTLY_VIEWED } from "../TankSearch/constants"; import { MAX_RECENTLY_VIEWED } from "../TankSearch/constants";
import { Text, type TextProps } from "../Text"; import { Text, type TextProps } from "../Text";
import "./index.css"; import styles from "./index.module.css";
type TankCardProps = TextProps & { type TankCardProps = TextProps & {
tank: TankDefinition; tank: TankDefinition;
@@ -20,100 +20,80 @@ type TankCardProps = TextProps & {
const tankDefinitions = await api.tankDefinitions(); const tankDefinitions = await api.tankDefinitions();
export const TankCard = forwardRef<HTMLSpanElement, TankCardProps>( export const TankCard = ({
( tank,
{ discriminator,
tank, onTankSelect: onSelect,
discriminator, noLink,
onTankSelect: onSelect, style,
noLink, ...props
style, }: TankCardProps) => {
...props const { unwrap, locale } = useLocale();
}: TankCardProps,
ref,
) => {
const { unwrap, locale } = useLocale();
const provideLink = !noLink && onSelect === undefined;
const Icon = classIcons[tank.class]; const provideLink = !noLink && onSelect === undefined;
const name = unwrap(tank.name!);
return ( const color: TextProps["color"] =
<Text tank.type === TankType.TANK_TYPE_COLLECTOR
ref={ref} ? "blue"
tabIndex={onSelect ? 0 : undefined} : tank.type === TankType.TANK_TYPE_PREMIUM
size="2" ? "amber"
color={ : "gray";
tank.type === TankType.TANK_TYPE_COLLECTOR const lowContrast = tank.type !== TankType.TANK_TYPE_RESEARCHABLE;
? "blue"
: tank.type === TankType.TANK_TYPE_PREMIUM const Icon = classIcons[tank.class];
? "amber"
: "gray" const content = (
} <Flex
highContrast={tank.type === TankType.TANK_TYPE_RESEARCHABLE} column
onClick={() => { gap="3"
onSelect?.(tank); onClick={() => {
TankopediaPersistent.mutate((draft) => { onSelect?.(tank);
draft.recentlyViewed = uniq([tank.id, ...draft.recentlyViewed]) TankopediaPersistent.mutate((draft) => {
.filter((id) => id in tankDefinitions.tanks) draft.recentlyViewed = uniq([tank.id, ...draft.recentlyViewed])
.slice(0, MAX_RECENTLY_VIEWED); .filter((id) => id in tankDefinitions.tanks)
}); .slice(0, MAX_RECENTLY_VIEWED);
}} });
className="tank-search-card" }}
data-provide-link={provideLink} >
<Flex
justify="end"
className={styles["image-wrapper"]}
style={{ style={{
backgroundImage: `url(${alias( backgroundImage: `url(${alias(
"api", "api",
`/flags/scratched/${tank.nation}.webp`, `/flags/scratched/${tank.nation}.webp`,
)})`, )})`,
...style,
}} }}
{...props}
> >
<LinkI18n <img
locale={locale} alt={name}
className="link" src={alias("api", `/tanks/${tank.id}/icons/big.webp`)}
underline="hover" />
href={provideLink ? `/tanks/${tank.slug}` : "#"} </Flex>
onClick={(event) => {
if (!provideLink) event.preventDefault();
}}
>
<img
alt={unwrap(tank.name!)}
src={alias("api", `/tanks/${tank.id}/icons/big.webp`)}
className="image"
draggable={false}
/>
<Flex <Text color={color} lowContrast={lowContrast}>
justify="center" <Flex align="center" gap="2" justify="center">
gap="1" <Icon className={styles.icon} />
align="center" {name}
overflow="hidden" </Flex>
width="100%"
mt="1"
>
<Icon className="class-icon" />
<Text align="center" className="name">
{unwrap(tank.name!)}
</Text>
</Flex>
{discriminator && (
<Text
color="gray"
align="center"
style={{
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis",
}}
>
{discriminator}
</Text>
)}
</LinkI18n>
</Text> </Text>
{discriminator && (
<Text lowContrast align="center">
{discriminator}
</Text>
)}
</Flex>
);
if (provideLink) {
return (
<LinkI18nWrapper locale={locale} href={`/tanks/${tank.slug}`}>
{content}
</LinkI18nWrapper>
); );
}, }
);
return content;
};
packages/website/src/components/TankCardWrapper/index.module.css
+6 -5
View File
@@ -1,7 +1,8 @@
.wrapper { .wrapper {
/* py="4" display: grid;
columns="repeat(auto-fill, minmax(7rem, 1fr))"
flow="dense" gap: var(--space-4);
gap="4" row-gap: var(--space-5);
gapY="8" */
grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
} }
packages/website/src/components/TankSearch/components/Sort.tsx
+6 -3
View File
@@ -5,6 +5,7 @@ import type {
TankopediaSortDirection, TankopediaSortDirection,
} from "../../../stores/tankopediaPersistent"; } from "../../../stores/tankopediaPersistent";
import { TankSort } from "../../../stores/tankopediaSort"; import { TankSort } from "../../../stores/tankopediaSort";
import { Button } from "../../Button";
import { DropdownMenu } from "../../DropdownMenu"; import { DropdownMenu } from "../../DropdownMenu";
interface ItemProps { interface ItemProps {
@@ -39,9 +40,11 @@ export function Sort() {
return ( return (
<DropdownMenu.Root> <DropdownMenu.Root>
<DropdownMenu.Trigger> <DropdownMenu.Trigger asChild>
{strings.website.common.tank_search.sort_dropdown.label} <Button variant="surface" color="gray">
<CaretDownIcon /> {strings.website.common.tank_search.sort_dropdown.label}
<CaretDownIcon />
</Button>
</DropdownMenu.Trigger> </DropdownMenu.Trigger>
<DropdownMenu.Content align="end"> <DropdownMenu.Content align="end">
packages/website/src/components/TankSearch/index.module.css
+8 -16
View File
@@ -1,19 +1,11 @@
.container { .tanks {
display: flex; /* mt="2" gap="1" align="center" justify="center" direction="column" */
flex-direction: column;
gap: var(--space-2); .count {
flex-grow: 1; /* gap="2" */
.tanks {
/* mt="2" gap="1" align="center" justify="center" direction="column" */
.count {
/* gap="2" */
}
}
.test-warning {
/* justify="center" mt="4" */
} }
} }
.test-warning {
/* justify="center" mt="4" */
}
packages/website/src/components/TankSearch/index.tsx
+10 -10
View File
@@ -9,7 +9,7 @@ import {
import { literals } from "@blitzkit/i18n/src/literals"; import { literals } from "@blitzkit/i18n/src/literals";
import fuzzysort from "fuzzysort"; import fuzzysort from "fuzzysort";
import { times, uniq } from "lodash-es"; import { times, uniq } from "lodash-es";
import { memo, useEffect, useMemo, useState, type ComponentProps } from "react"; import { memo, useEffect, useMemo, useState } from "react";
import usePromise from "react-promise-suspense"; import usePromise from "react-promise-suspense";
import { awaitableTankNames } from "../../core/awaitables/tankNames"; import { awaitableTankNames } from "../../core/awaitables/tankNames";
import { api } from "../../core/blitzkit/api"; import { api } from "../../core/blitzkit/api";
@@ -24,6 +24,7 @@ import { TankSort } from "../../stores/tankopediaSort";
import type { MaybeSkeletonComponentProps } from "../../types/maybeSkeletonComponentProps"; import type { MaybeSkeletonComponentProps } from "../../types/maybeSkeletonComponentProps";
import { Callout } from "../Callout"; import { Callout } from "../Callout";
import { ExperimentIcon } from "../ExperimentIcon"; import { ExperimentIcon } from "../ExperimentIcon";
import { Flex } from "../Flex";
import { Link } from "../Link"; import { Link } from "../Link";
import { RecentlyViewedTanks } from "../RecentlyViewedTanks"; import { RecentlyViewedTanks } from "../RecentlyViewedTanks";
import { TankCardSkeleton } from "../TankCardSkeleton"; import { TankCardSkeleton } from "../TankCardSkeleton";
@@ -36,12 +37,11 @@ import { NoResults } from "./components/NoResults";
import { MAX_RECENTLY_VIEWED } from "./constants"; import { MAX_RECENTLY_VIEWED } from "./constants";
import styles from "./index.module.css"; import styles from "./index.module.css";
export type TankSearchProps = MaybeSkeletonComponentProps & export type TankSearchProps = MaybeSkeletonComponentProps & {
ComponentProps<"div"> & { compact?: boolean;
compact?: boolean; onSelect?: (tank: TankDefinition) => void;
onSelect?: (tank: TankDefinition) => void; onSelectAll?: (tanks: TankDefinition[]) => void;
onSelectAll?: (tanks: TankDefinition[]) => void; };
};
const PREVIEW_COUNT = 20; const PREVIEW_COUNT = 20;
const DEFAULT_LOADED_CARDS = 64; const DEFAULT_LOADED_CARDS = 64;
@@ -55,7 +55,7 @@ const [gameDefinitions, modelDefinitions, tankDefinitions, tankNames] =
]); ]);
export const TankSearch = memo<TankSearchProps>( export const TankSearch = memo<TankSearchProps>(
({ compact, onSelect, onSelectAll, skeleton, ...props }) => { ({ compact, onSelect, onSelectAll, skeleton }) => {
const { strings, locale } = useLocale(); const { strings, locale } = useLocale();
const wargaming = App.use((state) => state.logins.wargaming); const wargaming = App.use((state) => state.logins.wargaming);
const awaitedTanksDefinitionsArray = Object.values(tankDefinitions.tanks); const awaitedTanksDefinitionsArray = Object.values(tankDefinitions.tanks);
@@ -430,7 +430,7 @@ export const TankSearch = memo<TankSearchProps>(
}, [tankFilters, tankopediaSort]); }, [tankFilters, tankopediaSort]);
return ( return (
<div className={styles.container} {...props}> <Flex column gap="4">
<TankSearchBar <TankSearchBar
skeleton={skeleton} skeleton={skeleton}
topResult={tanks?.[0]} topResult={tanks?.[0]}
@@ -543,7 +543,7 @@ export const TankSearch = memo<TankSearchProps>(
)} )}
</TankCardWrapper> </TankCardWrapper>
)} )}
</div> </Flex>
); );
}, },
); );
packages/website/src/components/TankSearchBar/index.module.css
-7
View File
@@ -1,7 +0,0 @@
.search-bar {
/* justify="center" */
.wrapper {
/* gap="2" flexGrow="1" */
}
}
packages/website/src/components/TankSearchBar/index.tsx
+15 -17
View File
@@ -5,10 +5,10 @@ import { type KeyboardEventHandler, useCallback, useRef } from "react";
import { useLocale } from "../../hooks/useLocale"; import { useLocale } from "../../hooks/useLocale";
import { TankFilters } from "../../stores/tankFilters"; import { TankFilters } from "../../stores/tankFilters";
import type { MaybeSkeletonComponentProps } from "../../types/maybeSkeletonComponentProps"; import type { MaybeSkeletonComponentProps } from "../../types/maybeSkeletonComponentProps";
import { Flex } from "../Flex";
import { Spinner } from "../Spinner"; import { Spinner } from "../Spinner";
import { Sort } from "../TankSearch/components/Sort"; import { Sort } from "../TankSearch/components/Sort";
import { TextField } from "../TextField"; import { TextField } from "../TextField";
import styles from "./index.module.css";
type SearchBarProps = MaybeSkeletonComponentProps & { type SearchBarProps = MaybeSkeletonComponentProps & {
topResult?: TankDefinition; topResult?: TankDefinition;
@@ -65,22 +65,20 @@ export function TankSearchBar({
); );
return ( return (
<div className={styles["search-bar"]}> <Flex gap="3">
<div className={styles.wrapper}> <TextField
<TextField disabled={skeleton}
disabled={skeleton} defaultValue={search ?? undefined}
defaultValue={search ?? undefined} style={{ flex: 1 }}
style={{ flex: 1 }} ref={input}
ref={input} placeholder={strings.website.common.tank_search.search_bar_hint}
placeholder={strings.website.common.tank_search.search_bar_hint} onChange={handleChange}
onChange={handleChange} onKeyDown={handleKeyDown}
onKeyDown={handleKeyDown} >
> {searching ? <Spinner /> : <MagnifyingGlassIcon />}
{searching ? <Spinner /> : <MagnifyingGlassIcon />} </TextField>
</TextField>
<Sort /> <Sort />
</div> </Flex>
</div>
); );
} }
packages/website/src/components/TankSearchFilters/index.tsx
+202 -172
View File
@@ -21,6 +21,7 @@ import { api } from "../../core/blitzkit/api";
import { useLocale } from "../../hooks/useLocale"; import { useLocale } from "../../hooks/useLocale";
import { App } from "../../stores/app"; import { App } from "../../stores/app";
import { TankFilters, type CaseType } from "../../stores/tankFilters"; import { TankFilters, type CaseType } from "../../stores/tankFilters";
import { Button } from "../Button";
import { classIcons } from "../ClassIcon"; import { classIcons } from "../ClassIcon";
import { DropdownMenu } from "../DropdownMenu"; import { DropdownMenu } from "../DropdownMenu";
import { Flex } from "../Flex"; import { Flex } from "../Flex";
@@ -173,7 +174,7 @@ const TIERS = times(10, (i) => 10 - i);
export function TankSearchFilters() { export function TankSearchFilters() {
return ( return (
<div className={styles.container}> <Flex gap="3" wrap>
<TiersFilter /> <TiersFilter />
<ClassFilter /> <ClassFilter />
<TypeFilter /> <TypeFilter />
@@ -189,7 +190,7 @@ export function TankSearchFilters() {
<GameModeAbilitiesFilter /> <GameModeAbilitiesFilter />
<ResetButton /> <ResetButton />
</div> </Flex>
); );
} }
@@ -214,22 +215,24 @@ function TiersFilter() {
return ( return (
<DropdownMenu.Root modal={false}> <DropdownMenu.Root modal={false}>
<DropdownMenu.Trigger> <DropdownMenu.Trigger asChild>
<Flex gap="1"> <Button size="minor" color="gray" variant="surface">
{tiers.slice(0, MAX_ICONS).map((tier) => ( <Flex gap="1">
<Text size="minor" key={tier}> {tiers.slice(0, MAX_ICONS).map((tier) => (
{TIER_ROMAN_NUMERALS[tier]} <Text size="minor" key={tier}>
</Text> {TIER_ROMAN_NUMERALS[tier]}
))} </Text>
))}
{tiers.length > MAX_ICONS && ( {tiers.length > MAX_ICONS && (
<Text size="minor"> <Text size="minor">
{literals(strings.common.units.plus, { {literals(strings.common.units.plus, {
value: tiers.length - MAX_ICONS, value: tiers.length - MAX_ICONS,
})} })}
</Text> </Text>
)} )}
</Flex> </Flex>
</Button>
</DropdownMenu.Trigger> </DropdownMenu.Trigger>
<DropdownMenu.Content> <DropdownMenu.Content>
@@ -287,21 +290,23 @@ function NationsFilter() {
return ( return (
<DropdownMenu.Root modal={false}> <DropdownMenu.Root modal={false}>
<DropdownMenu.Trigger> <DropdownMenu.Trigger asChild>
<Flex> <Button size="minor" color="gray" variant="surface">
{nations.map((nation, index) => ( <Flex>
<img {nations.map((nation, index) => (
key={nation} <img
style={{ key={nation}
filter: "drop-shadow(0 0 var(--space-1) var(--black-a11))", style={{
marginLeft: index > 0 ? "-0.5em" : undefined, filter: "drop-shadow(0 0 var(--space-1) var(--black-a11))",
width: "1.25em", marginLeft: index > 0 ? "-0.5em" : undefined,
height: "1.25em", width: "1.25em",
}} height: "1.25em",
src={alias("api", `/flags/circle/${nation}.webp`)} }}
/> src={alias("api", `/flags/circle/${nation}.webp`)}
))} />
</Flex> ))}
</Flex>
</Button>
</DropdownMenu.Trigger> </DropdownMenu.Trigger>
<DropdownMenu.Content> <DropdownMenu.Content>
@@ -369,25 +374,27 @@ function ClassFilter() {
return ( return (
<DropdownMenu.Root modal={false}> <DropdownMenu.Root modal={false}>
<DropdownMenu.Trigger> <DropdownMenu.Trigger asChild>
<Flex> <Button size="minor" color="gray" variant="surface">
{classes.map((tankClass, index) => { <Flex>
const Icon = classIcons[tankClass]; {classes.map((tankClass, index) => {
return ( const Icon = classIcons[tankClass];
<Icon return (
key={tankClass} <Icon
style={{ key={tankClass}
color: "var(--gray-12)", style={{
opacity: 1, color: "var(--gray-12)",
filter: "drop-shadow(0 0 var(--space-1) var(--black-a11))", opacity: 1,
marginLeft: index > 0 ? "-0.5em" : undefined, filter: "drop-shadow(0 0 var(--space-1) var(--black-a11))",
width: "1.25em", marginLeft: index > 0 ? "-0.5em" : undefined,
height: "1.25em", width: "1.25em",
}} height: "1.25em",
/> }}
); />
})} );
</Flex> })}
</Flex>
</Button>
</DropdownMenu.Trigger> </DropdownMenu.Trigger>
<DropdownMenu.Content> <DropdownMenu.Content>
@@ -447,25 +454,27 @@ function GunTypeFilter() {
return ( return (
<DropdownMenu.Root modal={false}> <DropdownMenu.Root modal={false}>
<DropdownMenu.Trigger> <DropdownMenu.Trigger asChild>
<Flex> <Button size="minor" color="gray" variant="surface">
{gunTypes.map((gunType) => { <Flex>
const Icon = GUN_TYPE_ICONS[gunType]; {gunTypes.map((gunType) => {
const Icon = GUN_TYPE_ICONS[gunType];
return ( return (
<Icon <Icon
key={gunType} key={gunType}
style={{ style={{
margin: gunType === "regular" ? "0 -0.125em" : undefined, margin: gunType === "regular" ? "0 -0.125em" : undefined,
opacity: 1, opacity: 1,
color: "var(--gray-12)", color: "var(--gray-12)",
width: "1.25em", width: "1.25em",
height: "1.25em", height: "1.25em",
}} }}
/> />
); );
})} })}
</Flex> </Flex>
</Button>
</DropdownMenu.Trigger> </DropdownMenu.Trigger>
<DropdownMenu.Content> <DropdownMenu.Content>
@@ -523,25 +532,27 @@ function TypeFilter() {
return ( return (
<DropdownMenu.Root modal={false}> <DropdownMenu.Root modal={false}>
<DropdownMenu.Trigger> <DropdownMenu.Trigger asChild>
<Flex gap="1"> <Button size="minor" color="gray" variant="surface">
{types.map((tankType) => { <Flex gap="1">
return ( {types.map((tankType) => {
<ResearchedIcon return (
style={{ <ResearchedIcon
color: `var(--${TANK_TYPE_COLORS[tankType]}-${ style={{
tankType === TankType.TANK_TYPE_RESEARCHABLE ? "12" : "11" color: `var(--${TANK_TYPE_COLORS[tankType]}-${
})`, tankType === TankType.TANK_TYPE_RESEARCHABLE ? "12" : "11"
filter: "drop-shadow(0 0 var(--space-1) var(--black-a11))", })`,
opacity: 1, filter: "drop-shadow(0 0 var(--space-1) var(--black-a11))",
width: "1.25em", opacity: 1,
height: "1.25em", width: "1.25em",
}} height: "1.25em",
key={tankType} }}
/> key={tankType}
); />
})} );
</Flex> })}
</Flex>
</Button>
</DropdownMenu.Trigger> </DropdownMenu.Trigger>
<DropdownMenu.Content> <DropdownMenu.Content>
@@ -622,21 +633,34 @@ function IndividualShellFilter({
return ( return (
<DropdownMenu.Root modal={false}> <DropdownMenu.Root modal={false}>
<DropdownMenu.Trigger> <DropdownMenu.Trigger asChild>
{shells[index] === null && ( <IconButton
<Text color="gray" style={{ display: "contents" }}> size="minor"
<MissingShellIcon width="1em" height="1em" /> variant="surface"
</Text> style={{
)} borderTopLeftRadius: index === 0 ? undefined : 0,
{shells[index] !== null && ( borderBottomLeftRadius: index === 0 ? undefined : 0,
<img borderTopRightRadius: index === 2 ? undefined : 0,
style={{ width: "1em", height: "1em" }} borderBottomRightRadius: index === 2 ? undefined : 0,
src={alias( }}
"api", color="gray"
`/icons/shells/${shellTypeIcons[shells[index]]}${premium ? "_premium" : ""}.webp`, highContrast
)} >
/> {shells[index] === null && (
)} <Text color="gray" style={{ display: "contents" }}>
<MissingShellIcon width="1em" height="1em" />
</Text>
)}
{shells[index] !== null && (
<img
style={{ width: "1em", height: "1em" }}
src={alias(
"api",
`/icons/shells/${shellTypeIcons[shells[index]]}${premium ? "_premium" : ""}.webp`,
)}
/>
)}
</IconButton>
</DropdownMenu.Trigger> </DropdownMenu.Trigger>
<DropdownMenu.Content> <DropdownMenu.Content>
@@ -825,30 +849,32 @@ function ConsumablesFilter() {
return ( return (
<DropdownMenu.Root modal={false}> <DropdownMenu.Root modal={false}>
<DropdownMenu.Trigger> <DropdownMenu.Trigger asChild>
<Flex> <Button size="minor" color="gray" variant="surface">
{consumables.slice(0, MAX_ICONS).map((consumable, index) => ( <Flex>
<img {consumables.slice(0, MAX_ICONS).map((consumable, index) => (
key={consumable} <img
style={{ key={consumable}
filter: "drop-shadow(0 0 var(--space-1) var(--black-a11))", style={{
marginLeft: index > 0 ? "-0.5em" : undefined, filter: "drop-shadow(0 0 var(--space-1) var(--black-a11))",
width: "1.25em", marginLeft: index > 0 ? "-0.5em" : undefined,
height: "1.25em", width: "1.25em",
objectFit: "contain", height: "1.25em",
}} objectFit: "contain",
src={alias("api", `/icons/consumables/${consumable}.webp`)} }}
/> src={alias("api", `/icons/consumables/${consumable}.webp`)}
))} />
))}
{consumables.length > MAX_ICONS && ( {consumables.length > MAX_ICONS && (
<Text size="minor" className={styles["overflow-plus"]}> <Text size="minor" className={styles["overflow-plus"]}>
{literals(strings.common.units.plus, { {literals(strings.common.units.plus, {
value: consumables.length - MAX_ICONS, value: consumables.length - MAX_ICONS,
})} })}
</Text> </Text>
)} )}
</Flex> </Flex>
</Button>
</DropdownMenu.Trigger> </DropdownMenu.Trigger>
<DropdownMenu.Content> <DropdownMenu.Content>
@@ -917,30 +943,32 @@ function ProvisionsFilter() {
return ( return (
<DropdownMenu.Root modal={false}> <DropdownMenu.Root modal={false}>
<DropdownMenu.Trigger> <DropdownMenu.Trigger asChild>
<Flex> <Button size="minor" color="gray" variant="surface">
{provisions.slice(0, MAX_ICONS).map((provision, index) => ( <Flex>
<img {provisions.slice(0, MAX_ICONS).map((provision, index) => (
key={provision} <img
style={{ key={provision}
filter: "drop-shadow(0 0 var(--space-1) var(--black-a11))", style={{
marginLeft: index > 0 ? "-0.5em" : undefined, filter: "drop-shadow(0 0 var(--space-1) var(--black-a11))",
width: "1.25em", marginLeft: index > 0 ? "-0.5em" : undefined,
height: "1.25em", width: "1.25em",
objectFit: "contain", height: "1.25em",
}} objectFit: "contain",
src={alias("api", `/icons/provisions/${provision}.webp`)} }}
/> src={alias("api", `/icons/provisions/${provision}.webp`)}
))} />
))}
{provisions.length > MAX_ICONS && ( {provisions.length > MAX_ICONS && (
<Text size="minor" className={styles["overflow-plus"]}> <Text size="minor" className={styles["overflow-plus"]}>
{literals(strings.common.units.plus, { {literals(strings.common.units.plus, {
value: provisions.length - MAX_ICONS, value: provisions.length - MAX_ICONS,
})} })}
</Text> </Text>
)} )}
</Flex> </Flex>
</Button>
</DropdownMenu.Trigger> </DropdownMenu.Trigger>
<DropdownMenu.Content> <DropdownMenu.Content>
@@ -1024,30 +1052,32 @@ function GameModeAbilitiesFilter() {
return ( return (
<DropdownMenu.Root modal={false}> <DropdownMenu.Root modal={false}>
<DropdownMenu.Trigger> <DropdownMenu.Trigger asChild>
<Flex> <Button size="minor" color="gray" variant="surface">
{icons.slice(0, MAX_ICONS).map((icon, index) => ( <Flex>
<img {icons.slice(0, MAX_ICONS).map((icon, index) => (
key={icon} <img
style={{ key={icon}
filter: "drop-shadow(0 0 var(--space-1) var(--black-a11))", style={{
marginLeft: index > 0 ? "-0.5em" : undefined, filter: "drop-shadow(0 0 var(--space-1) var(--black-a11))",
width: "1.25em", marginLeft: index > 0 ? "-0.5em" : undefined,
height: "1.25em", width: "1.25em",
objectFit: "contain", height: "1.25em",
}} objectFit: "contain",
src={icon} }}
/> src={icon}
))} />
))}
{icons.length > MAX_ICONS && ( {icons.length > MAX_ICONS && (
<Text size="minor" className={styles["overflow-plus"]}> <Text size="minor" className={styles["overflow-plus"]}>
{literals(strings.common.units.plus, { {literals(strings.common.units.plus, {
value: icons.length - MAX_ICONS, value: icons.length - MAX_ICONS,
})} })}
</Text> </Text>
)} )}
</Flex> </Flex>
</Button>
</DropdownMenu.Trigger> </DropdownMenu.Trigger>
<DropdownMenu.Content> <DropdownMenu.Content>
packages/website/src/components/ToolCard.astro
+2 -2
View File
@@ -77,7 +77,7 @@ const toolStrings =
</style> </style>
<div <div
style={{ backgroundImage: `url(/assets/images/tools/${tool.id}.webp)` }} style={{ backgroundImage: `url(/media/tools/banners/${tool.id}.webp)` }}
class="container" class="container"
> >
<LinkI18n <LinkI18n
@@ -89,7 +89,7 @@ const toolStrings =
> >
<div <div
class="background" class="background"
style={{ backgroundImage: `url(/assets/images/tools/${tool.id}.webp)` }} style={{ backgroundImage: `url(/media/tools/banners/${tool.id}.webp)` }}
> >
</div> </div>
packages/website/src/pages/[...chunk_default]/[...locale]/tanks/index.astro
+4
View File
@@ -1,4 +1,5 @@
--- ---
import ColorScale from "../../../../components/ColorScale.astro";
import { Section } from "../../../../components/Section"; import { Section } from "../../../../components/Section";
import ToolBanner from "../../../../components/ToolBanner.astro"; import ToolBanner from "../../../../components/ToolBanner.astro";
import { tools } from "../../../../constants/tools"; import { tools } from "../../../../constants/tools";
@@ -11,6 +12,9 @@ const { locale } = Astro.props;
--- ---
<BaseLayout {locale} accent="purple"> <BaseLayout {locale} accent="purple">
<ColorScale color="blue" />
<ColorScale color="amber" />
<ToolBanner {locale} tool={tools.tanks} slot="pre-app" /> <ToolBanner {locale} tool={tools.tanks} slot="pre-app" />
<Section> <Section>
packages/website/src/ui/compose.tsx
+1 -1
View File
@@ -27,7 +27,7 @@ export function composeRadixComponents<
mapped[key] = composeRadixComponent( mapped[key] = composeRadixComponent(
components[key] as FC, components[key] as FC,
styles[key], `radix__${styles[key]}`,
) as Components[Extract<keyof Components, string>]; ) as Components[Extract<keyof Components, string>];
} }