diff --git a/bun.lockb b/bun.lockb index 871b4dfb9..4ea53cfd8 100644 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/package.json b/package.json index 4ff7cf7f0..c9938249d 100644 --- a/package.json +++ b/package.json @@ -40,6 +40,7 @@ "@resvg/resvg-js": "^2.4.1", "@types/three": "^0.160.0", "@vanilla-extract/css": "^1.13.0", + "@vanilla-extract/dynamic": "^2.1.1", "adm-zip": "^0.5.12", "bepaint": "^0.1.0-beta.3", "csv-parse": "^5.5.6", diff --git a/src/app/tools/tankopedia/components/TankCard.css.ts b/src/app/tools/tankopedia/components/TankCard.css.ts new file mode 100644 index 000000000..4eee27a4f --- /dev/null +++ b/src/app/tools/tankopedia/components/TankCard.css.ts @@ -0,0 +1,31 @@ +import { createVar, style } from '@vanilla-extract/css'; + +export const cardBackgroundVar = createVar(); + +export const card = style({ + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + gap: 'var(--space-2)', + background: cardBackgroundVar, +}); + +export const image = style({ + height: 64, + width: '100%', + objectPosition: 'center right', + objectFit: 'contain', +}); + +export const classIcon = style({ + width: '1em', + height: '1em', + minWidth: '1em', + minHeight: '1em', +}); + +export const name = style({ + whiteSpace: 'nowrap', + overflow: 'hidden', + textOverflow: 'ellipsis', +}); diff --git a/src/app/tools/tankopedia/components/TankCard.tsx b/src/app/tools/tankopedia/components/TankCard.tsx index 44688a6ed..ddd9282a5 100644 --- a/src/app/tools/tankopedia/components/TankCard.tsx +++ b/src/app/tools/tankopedia/components/TankCard.tsx @@ -1,49 +1,50 @@ -import { Flex, Link, Text } from '@radix-ui/themes'; -import { use, useEffect, useMemo, useRef } from 'react'; -import { classIcons } from '../../../../components/ClassIcon'; +import { Flex, Text } from '@radix-ui/themes'; +import { Icon } from '@radix-ui/themes/dist/cjs/components/callout'; +import { assignInlineVars } from '@vanilla-extract/dynamic'; +import { useEffect, useRef } from 'react'; +import { Link } from '../../../../components/Link'; import { asset } from '../../../../core/blitzkit/asset'; -import { modelDefinitions } from '../../../../core/blitzkit/modelDefinitions'; -import { resolveDpm } from '../../../../core/blitzkit/resolveDpm'; import { TankDefinition } from '../../../../core/blitzkit/tankDefinitions'; import { tankIcon } from '../../../../core/blitzkit/tankIcon'; import { tankopediaFilterTank } from '../../../../core/blitzkit/tankopediaFilterTank'; import { useTankopediaFilters } from '../../../../stores/tankopediaFilters'; +import * as styles from './TankCard.css'; interface TankCardProps { tank: TankDefinition; } export function TankCard({ tank }: TankCardProps) { - const awaitedModelDefinitions = use(modelDefinitions); - const Icon = classIcons[tank.class]; + // const awaitedModelDefinitions = use(modelDefinitions); + // const Icon = classIcons[tank.class]; const link = useRef(null); - const sortBy = useTankopediaFilters((state) => state.sort.by); - const discriminator = useMemo(() => { - if (sortBy.startsWith('meta')) return undefined; + // const sortBy = useTankopediaFilters((state) => state.sort.by); + // const discriminator = useMemo(() => { + // if (sortBy.startsWith('meta')) return undefined; - const turret = tank.turrets.at(-1)!; - const gun = turret.guns.at(-1)!; - const shell = gun.shells[0]; - const tracks = tank.tracks.at(-1)!; - const tankModelDefinition = awaitedModelDefinitions[tank.id]; + // const turret = tank.turrets.at(-1)!; + // const gun = turret.guns.at(-1)!; + // const shell = gun.shells[0]; + // const tracks = tank.tracks.at(-1)!; + // const tankModelDefinition = awaitedModelDefinitions[tank.id]; - switch (sortBy) { - case 'fire.aimTime': - return `${gun.aimTime.toFixed(2)}s`; - case 'fire.caliber': - return `${shell.caliber.toFixed(0)}mm`; - case 'fire.damage': - return `${shell.damage.armor.toFixed(0)}hp`; - case 'fire.dispersionMoving': - return `+ ${tracks.dispersion.move.toFixed(3)}`; - case 'fire.dispersionStill': - return gun.dispersion.base.toFixed(3); - case 'fire.dpm': - return resolveDpm(gun, shell).toFixed(0); - case 'fire.gunDepression': - return awaitedModelDefinitions; - } - }, [sortBy]); + // switch (sortBy) { + // case 'fire.aimTime': + // return `${gun.aimTime.toFixed(2)}s`; + // case 'fire.caliber': + // return `${shell.caliber.toFixed(0)}mm`; + // case 'fire.damage': + // return `${shell.damage.armor.toFixed(0)}hp`; + // case 'fire.dispersionMoving': + // return `+ ${tracks.dispersion.move.toFixed(3)}`; + // case 'fire.dispersionStill': + // return gun.dispersion.base.toFixed(3); + // case 'fire.dpm': + // return resolveDpm(gun, shell).toFixed(0); + // case 'fire.gunDepression': + // return awaitedModelDefinitions; + // } + // }, [sortBy]); useEffect(() => { const unsubscribe = useTankopediaFilters.subscribe((filters) => { @@ -70,27 +71,12 @@ export function TankCard({ tank }: TankCardProps) { highContrast={tank.treeType === 'researchable'} underline="hover" href={`/tools/tankopedia/${tank.id}`} - style={{ - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - gap: 'var(--space-2)', - background: `url(${asset(`flags/scratched/${tank.nation}.webp`)})`, - backgroundSize: 'contain', - backgroundRepeat: 'no-repeat', - backgroundPosition: 'top left', - }} + className={styles.card} + style={assignInlineVars({ + [styles.cardBackgroundVar]: `top left / contain no-repeat url(${asset(`flags/scratched/${tank.nation}.webp`)})`, + })} > - {tank.name} + {tank.name} - - + + {tank.name} - {discriminator && ( + {/* {discriminator && ( {discriminator} - )} + )} */} ); } diff --git a/src/components/Link.tsx b/src/components/Link.tsx index 130ea5f2d..05aa574e3 100644 --- a/src/components/Link.tsx +++ b/src/components/Link.tsx @@ -2,25 +2,29 @@ import { LinkProps, Link as RadixLink } from '@radix-ui/themes'; import { useRouter } from 'next/navigation'; +import { forwardRef } from 'react'; -export function Link({ href, onClick, ...props }: LinkProps) { - const router = useRouter(); +export const Link = forwardRef( + ({ href, onClick, ...props }, ref) => { + const router = useRouter(); - return ( - { - event.preventDefault(); - if (href) { - if (event.ctrlKey || event.metaKey) { - window.open(href); - } else { - router.push(href); + return ( + { + event.preventDefault(); + if (href) { + if (event.ctrlKey || event.metaKey) { + window.open(href); + } else { + router.push(href); + } } - } - onClick?.(event); - }} - {...props} - /> - ); -} + onClick?.(event); + }} + {...props} + /> + ); + }, +);