From edc3aba545f9434610787abe1375d72a099d9e74 Mon Sep 17 00:00:00 2001 From: tresabhi <43380238+tresabhi@users.noreply.github.com> Date: Thu, 27 Aug 2026 11:23:41 -0500 Subject: [PATCH] restore banner --- .../website/public/media/patterns/api.svg | 3 +++ .../website/public/media/patterns/avatars.svg | 3 +++ .../website/public/media/patterns/tanks.svg | 3 +++ .../tools => media/tools/banners}/api.webp | Bin .../tools/banners}/avatars.webp | Bin .../tools/banners}/changelogs.webp | Bin .../tools => media/tools/banners}/charts.webp | Bin .../tools/banners}/compare.webp | Bin .../tools/banners}/discord.webp | Bin .../tools => media/tools/banners}/embed.webp | Bin .../tools/banners}/guesser.webp | Bin .../tools => media/tools/banners}/mixer.webp | Bin .../tools => media/tools/banners}/more.webp | Bin .../tools/banners}/performance.webp | Bin .../tools/banners}/players.webp | Bin .../tools/banners}/playlist.webp | Bin .../tools => media/tools/banners}/rating.webp | Bin .../tools/banners}/session.webp | Bin .../tools => media/tools/banners}/tanks.webp | Bin .../tools/banners}/tier-list.webp | Bin .../src/components/Flex/index.module.css | 4 +++ .../website/src/components/Flex/index.tsx | 4 ++- .../src/components/Skeleton/index.module.css | 25 ++++++++++++++++++ .../website/src/components/Skeleton/index.tsx | 9 +++++++ .../TankCardSkeleton/index.module.css | 7 +++++ .../index.tsx} | 13 +++++---- .../TankCardWrapper/index.module.css | 7 +++++ .../src/components/TankCardWrapper/index.tsx | 10 +++++++ .../TankSearch/components/RecentlyViewed.tsx | 2 +- .../TankSearch/components/TankCardWrapper.tsx | 12 --------- .../src/components/TankSearch/index.tsx | 8 +++--- .../website/src/components/TierList/Tiles.tsx | 6 ++--- 32 files changed, 90 insertions(+), 26 deletions(-) create mode 100644 packages/website/public/media/patterns/api.svg create mode 100644 packages/website/public/media/patterns/avatars.svg create mode 100644 packages/website/public/media/patterns/tanks.svg rename packages/website/public/{assets/images/tools => media/tools/banners}/api.webp (100%) rename packages/website/public/{assets/images/tools => media/tools/banners}/avatars.webp (100%) rename packages/website/public/{assets/images/tools => media/tools/banners}/changelogs.webp (100%) rename packages/website/public/{assets/images/tools => media/tools/banners}/charts.webp (100%) rename packages/website/public/{assets/images/tools => media/tools/banners}/compare.webp (100%) rename packages/website/public/{assets/images/tools => media/tools/banners}/discord.webp (100%) rename packages/website/public/{assets/images/tools => media/tools/banners}/embed.webp (100%) rename packages/website/public/{assets/images/tools => media/tools/banners}/guesser.webp (100%) rename packages/website/public/{assets/images/tools => media/tools/banners}/mixer.webp (100%) rename packages/website/public/{assets/images/tools => media/tools/banners}/more.webp (100%) rename packages/website/public/{assets/images/tools => media/tools/banners}/performance.webp (100%) rename packages/website/public/{assets/images/tools => media/tools/banners}/players.webp (100%) rename packages/website/public/{assets/images/tools => media/tools/banners}/playlist.webp (100%) rename packages/website/public/{assets/images/tools => media/tools/banners}/rating.webp (100%) rename packages/website/public/{assets/images/tools => media/tools/banners}/session.webp (100%) rename packages/website/public/{assets/images/tools => media/tools/banners}/tanks.webp (100%) rename packages/website/public/{assets/images/tools => media/tools/banners}/tier-list.webp (100%) create mode 100644 packages/website/src/components/Skeleton/index.module.css create mode 100644 packages/website/src/components/Skeleton/index.tsx create mode 100644 packages/website/src/components/TankCardSkeleton/index.module.css rename packages/website/src/components/{TankSearch/components/SkeletonTankCard.tsx => TankCardSkeleton/index.tsx} (52%) create mode 100644 packages/website/src/components/TankCardWrapper/index.module.css create mode 100644 packages/website/src/components/TankCardWrapper/index.tsx delete mode 100644 packages/website/src/components/TankSearch/components/TankCardWrapper.tsx diff --git a/packages/website/public/media/patterns/api.svg b/packages/website/public/media/patterns/api.svg new file mode 100644 index 000000000..92ed08562 --- /dev/null +++ b/packages/website/public/media/patterns/api.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/website/public/media/patterns/avatars.svg b/packages/website/public/media/patterns/avatars.svg new file mode 100644 index 000000000..e26584919 --- /dev/null +++ b/packages/website/public/media/patterns/avatars.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/website/public/media/patterns/tanks.svg b/packages/website/public/media/patterns/tanks.svg new file mode 100644 index 000000000..0a76ff759 --- /dev/null +++ b/packages/website/public/media/patterns/tanks.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/website/public/assets/images/tools/api.webp b/packages/website/public/media/tools/banners/api.webp similarity index 100% rename from packages/website/public/assets/images/tools/api.webp rename to packages/website/public/media/tools/banners/api.webp diff --git a/packages/website/public/assets/images/tools/avatars.webp b/packages/website/public/media/tools/banners/avatars.webp similarity index 100% rename from packages/website/public/assets/images/tools/avatars.webp rename to packages/website/public/media/tools/banners/avatars.webp diff --git a/packages/website/public/assets/images/tools/changelogs.webp b/packages/website/public/media/tools/banners/changelogs.webp similarity index 100% rename from packages/website/public/assets/images/tools/changelogs.webp rename to packages/website/public/media/tools/banners/changelogs.webp diff --git a/packages/website/public/assets/images/tools/charts.webp b/packages/website/public/media/tools/banners/charts.webp similarity index 100% rename from packages/website/public/assets/images/tools/charts.webp rename to packages/website/public/media/tools/banners/charts.webp diff --git a/packages/website/public/assets/images/tools/compare.webp b/packages/website/public/media/tools/banners/compare.webp similarity index 100% rename from packages/website/public/assets/images/tools/compare.webp rename to packages/website/public/media/tools/banners/compare.webp diff --git a/packages/website/public/assets/images/tools/discord.webp b/packages/website/public/media/tools/banners/discord.webp similarity index 100% rename from packages/website/public/assets/images/tools/discord.webp rename to packages/website/public/media/tools/banners/discord.webp diff --git a/packages/website/public/assets/images/tools/embed.webp b/packages/website/public/media/tools/banners/embed.webp similarity index 100% rename from packages/website/public/assets/images/tools/embed.webp rename to packages/website/public/media/tools/banners/embed.webp diff --git a/packages/website/public/assets/images/tools/guesser.webp b/packages/website/public/media/tools/banners/guesser.webp similarity index 100% rename from packages/website/public/assets/images/tools/guesser.webp rename to packages/website/public/media/tools/banners/guesser.webp diff --git a/packages/website/public/assets/images/tools/mixer.webp b/packages/website/public/media/tools/banners/mixer.webp similarity index 100% rename from packages/website/public/assets/images/tools/mixer.webp rename to packages/website/public/media/tools/banners/mixer.webp diff --git a/packages/website/public/assets/images/tools/more.webp b/packages/website/public/media/tools/banners/more.webp similarity index 100% rename from packages/website/public/assets/images/tools/more.webp rename to packages/website/public/media/tools/banners/more.webp diff --git a/packages/website/public/assets/images/tools/performance.webp b/packages/website/public/media/tools/banners/performance.webp similarity index 100% rename from packages/website/public/assets/images/tools/performance.webp rename to packages/website/public/media/tools/banners/performance.webp diff --git a/packages/website/public/assets/images/tools/players.webp b/packages/website/public/media/tools/banners/players.webp similarity index 100% rename from packages/website/public/assets/images/tools/players.webp rename to packages/website/public/media/tools/banners/players.webp diff --git a/packages/website/public/assets/images/tools/playlist.webp b/packages/website/public/media/tools/banners/playlist.webp similarity index 100% rename from packages/website/public/assets/images/tools/playlist.webp rename to packages/website/public/media/tools/banners/playlist.webp diff --git a/packages/website/public/assets/images/tools/rating.webp b/packages/website/public/media/tools/banners/rating.webp similarity index 100% rename from packages/website/public/assets/images/tools/rating.webp rename to packages/website/public/media/tools/banners/rating.webp diff --git a/packages/website/public/assets/images/tools/session.webp b/packages/website/public/media/tools/banners/session.webp similarity index 100% rename from packages/website/public/assets/images/tools/session.webp rename to packages/website/public/media/tools/banners/session.webp diff --git a/packages/website/public/assets/images/tools/tanks.webp b/packages/website/public/media/tools/banners/tanks.webp similarity index 100% rename from packages/website/public/assets/images/tools/tanks.webp rename to packages/website/public/media/tools/banners/tanks.webp diff --git a/packages/website/public/assets/images/tools/tier-list.webp b/packages/website/public/media/tools/banners/tier-list.webp similarity index 100% rename from packages/website/public/assets/images/tools/tier-list.webp rename to packages/website/public/media/tools/banners/tier-list.webp diff --git a/packages/website/src/components/Flex/index.module.css b/packages/website/src/components/Flex/index.module.css index 4a0203aab..fb60a78f2 100644 --- a/packages/website/src/components/Flex/index.module.css +++ b/packages/website/src/components/Flex/index.module.css @@ -1,3 +1,7 @@ .flex { display: flex; + + &[data-column="true"] { + flex-direction: column; + } } diff --git a/packages/website/src/components/Flex/index.tsx b/packages/website/src/components/Flex/index.tsx index 7f14a4aca..dc2e6b180 100644 --- a/packages/website/src/components/Flex/index.tsx +++ b/packages/website/src/components/Flex/index.tsx @@ -5,14 +5,16 @@ import styles from "./index.module.css"; interface Props extends ComponentProps<"div"> { gap?: Space; + column?: boolean; } -export function Flex({ children, className, gap, ...props }: Props) { +export function Flex({ children, column, className, gap, ...props }: Props) { return (
{children}
diff --git a/packages/website/src/components/Skeleton/index.module.css b/packages/website/src/components/Skeleton/index.module.css new file mode 100644 index 000000000..c468ffd6b --- /dev/null +++ b/packages/website/src/components/Skeleton/index.module.css @@ -0,0 +1,25 @@ +@keyframes skeleton-animation { + 0% { + background-color: var(--color-1); + } + 50% { + background-color: var(--color-2); + } + 100% { + background-color: var(--color-1); + } +} + +.skeleton { + --color-1: var(--black-a5); + --color-2: var(--black-a4); + + :global(:root.dark) & { + --color-1: var(--white-a3); + --color-2: var(--white-a2); + } + + animation: skeleton-animation var(--duration-subtle) ease infinite; + + border-radius: var(--space-2); +} diff --git a/packages/website/src/components/Skeleton/index.tsx b/packages/website/src/components/Skeleton/index.tsx new file mode 100644 index 000000000..1a36b09b5 --- /dev/null +++ b/packages/website/src/components/Skeleton/index.tsx @@ -0,0 +1,9 @@ +import type { ComponentProps } from "react"; +import { classNames } from "../../ui/classNames"; +import styles from "./index.module.css"; + +export interface SkeletonProps extends ComponentProps<"div"> {} + +export function Skeleton({ className, ...props }: SkeletonProps) { + return
; +} diff --git a/packages/website/src/components/TankCardSkeleton/index.module.css b/packages/website/src/components/TankCardSkeleton/index.module.css new file mode 100644 index 000000000..44510e73e --- /dev/null +++ b/packages/website/src/components/TankCardSkeleton/index.module.css @@ -0,0 +1,7 @@ +.icon { + /* height="5rem" */ +} + +.name { + /* height="1em" */ +} diff --git a/packages/website/src/components/TankSearch/components/SkeletonTankCard.tsx b/packages/website/src/components/TankCardSkeleton/index.tsx similarity index 52% rename from packages/website/src/components/TankSearch/components/SkeletonTankCard.tsx rename to packages/website/src/components/TankCardSkeleton/index.tsx index 7784cf664..76559276a 100644 --- a/packages/website/src/components/TankSearch/components/SkeletonTankCard.tsx +++ b/packages/website/src/components/TankCardSkeleton/index.tsx @@ -1,11 +1,14 @@ import { memo, useRef } from "react"; -import { useIntersection } from "../../../hooks/useIntersection"; +import { useIntersection } from "../../hooks/useIntersection"; +import { Flex } from "../Flex"; +import { Skeleton } from "../Skeleton"; +import styles from "./index.module.css"; interface SkeletonTankCardProps { onIntersection?: () => void; } -export const SkeletonTankCard = memo( +export const TankCardSkeleton = memo( ({ onIntersection }: SkeletonTankCardProps) => { const card = useRef(null!); @@ -14,9 +17,9 @@ export const SkeletonTankCard = memo( }); return ( - - - + + + ); }, diff --git a/packages/website/src/components/TankCardWrapper/index.module.css b/packages/website/src/components/TankCardWrapper/index.module.css new file mode 100644 index 000000000..0c3b69244 --- /dev/null +++ b/packages/website/src/components/TankCardWrapper/index.module.css @@ -0,0 +1,7 @@ +.wrapper { + /* py="4" + columns="repeat(auto-fill, minmax(7rem, 1fr))" + flow="dense" + gap="4" + gapY="8" */ +} diff --git a/packages/website/src/components/TankCardWrapper/index.tsx b/packages/website/src/components/TankCardWrapper/index.tsx new file mode 100644 index 000000000..9a19d2f7c --- /dev/null +++ b/packages/website/src/components/TankCardWrapper/index.tsx @@ -0,0 +1,10 @@ +import type { ComponentProps } from "react"; +import { classNames } from "../../ui/classNames"; +import styles from "./index.module.css"; + +export function TankCardWrapper({ + className, + ...props +}: ComponentProps<"div">) { + return
; +} diff --git a/packages/website/src/components/TankSearch/components/RecentlyViewed.tsx b/packages/website/src/components/TankSearch/components/RecentlyViewed.tsx index 96b3e071d..6ac16448e 100644 --- a/packages/website/src/components/TankSearch/components/RecentlyViewed.tsx +++ b/packages/website/src/components/TankSearch/components/RecentlyViewed.tsx @@ -6,7 +6,7 @@ import { TankFilters } from "../../../stores/tankFilters"; import { TankopediaPersistent } from "../../../stores/tankopediaPersistent"; import { TankSort } from "../../../stores/tankopediaSort"; import { TankCard } from "../../TankCard"; -import { TankCardWrapper } from "./TankCardWrapper"; +import { TankCardWrapper } from "../../TankCardWrapper"; const tankDefinitions = await api.tankDefinitions(); diff --git a/packages/website/src/components/TankSearch/components/TankCardWrapper.tsx b/packages/website/src/components/TankSearch/components/TankCardWrapper.tsx deleted file mode 100644 index dbf290d3e..000000000 --- a/packages/website/src/components/TankSearch/components/TankCardWrapper.tsx +++ /dev/null @@ -1,12 +0,0 @@ -export function TankCardWrapper(props: GridProps) { - return ( - - ); -} diff --git a/packages/website/src/components/TankSearch/index.tsx b/packages/website/src/components/TankSearch/index.tsx index 8f73eddc1..845034b56 100644 --- a/packages/website/src/components/TankSearch/index.tsx +++ b/packages/website/src/components/TankSearch/index.tsx @@ -25,14 +25,14 @@ import type { MaybeSkeletonComponentProps } from "../../types/maybeSkeletonCompo import { Callout } from "../Callout"; import { ExperimentIcon } from "../ExperimentIcon"; import { Link } from "../Link"; +import { TankCardWrapper } from "../TankCardWrapper"; import { TankSearchBar } from "../TankSearchBar"; import { TankSearchFilters } from "../TankSearchFilters"; import { Text } from "../Text"; import { TankSearchCard } from "./components/Card"; import { NoResults } from "./components/NoResults"; import { RecentlyViewed } from "./components/RecentlyViewed"; -import { SkeletonTankCard } from "./components/SkeletonTankCard"; -import { TankCardWrapper } from "./components/TankCardWrapper"; +import { TankCardSkeleton } from "../TankCardSkeleton"; import { MAX_RECENTLY_VIEWED } from "./constants"; import styles from "./index.module.css"; @@ -513,7 +513,7 @@ export const TankSearch = memo( Math.min(PREVIEW_COUNT, sorted.length - loadedCards), (index) => { return ( - { setLoadedCards((state) => @@ -538,7 +538,7 @@ export const TankSearch = memo( skeleton ? DEFAULT_LOADED_CARDS : 10 + 10 * Math.random(), ), (index) => ( - + ), )} diff --git a/packages/website/src/components/TierList/Tiles.tsx b/packages/website/src/components/TierList/Tiles.tsx index 1dabc0123..fa75715cb 100644 --- a/packages/website/src/components/TierList/Tiles.tsx +++ b/packages/website/src/components/TierList/Tiles.tsx @@ -6,8 +6,8 @@ import { api } from "../../core/blitzkit/api"; import { filterTanks } from "../../core/blitzkit/filterTanks"; import { TankFilters } from "../../stores/tankFilters"; import { TierList } from "../../stores/tierList"; -import { SkeletonTankCard } from "../TankSearch/components/SkeletonTankCard"; -import { TankCardWrapper } from "../TankSearch/components/TankCardWrapper"; +import { TankCardWrapper } from "../TankCardWrapper"; +import { TankCardSkeleton } from "../TankCardSkeleton"; import { TierListTile } from "./Tile"; const [tankDefinitions, gameDefinitions] = await Promise.all([ @@ -45,7 +45,7 @@ export function TierListTiles() { {times(Math.min(PREVIEW_COUNT, sorted.length - loadedTiles), (index) => { return ( - { setLoadedTiles((state) => Math.min(state + 2, sorted.length));