diff --git a/packages/website/src/components/Ad.tsx b/packages/website/src/components/Ad.tsx deleted file mode 100644 index d3323d033..000000000 --- a/packages/website/src/components/Ad.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { Box, type BoxProps } from '@radix-ui/themes'; -import { useEffect } from 'react'; - -export type AdProps = BoxProps & { - id: string; -}; - -export function Ad({ id, ...props }: AdProps) { - useEffect(() => { - (window as any).nitroAds.createAd(id, { - refreshTime: 30, - demo: import.meta.env.MODE === 'development', - renderVisibleOnly: true, - delayLoading: true, - report: { - enabled: true, - icon: true, - wording: 'Report Ad', - position: 'top-right-side', - }, - }); - }, [id]); - - return ; -} diff --git a/packages/website/src/components/AdResponsiveHorizontal.tsx b/packages/website/src/components/AdResponsiveHorizontal.tsx deleted file mode 100644 index 35d08aa7b..000000000 --- a/packages/website/src/components/AdResponsiveHorizontal.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import { Ad, type AdProps } from './Ad'; - -type AdResponsiveHorizontal = AdProps; - -export function AdResponsiveHorizontal(props: AdResponsiveHorizontal) { - return ; -} diff --git a/packages/website/src/components/AdStickyTableRow.tsx b/packages/website/src/components/AdStickyTableRow.tsx deleted file mode 100644 index d5fcfe669..000000000 --- a/packages/website/src/components/AdStickyTableRow.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { Flex, Table } from '@radix-ui/themes'; -import { AdResponsiveHorizontal } from './AdResponsiveHorizontal'; - -interface AdStickyTableRowProps { - id: string; -} - -export function AdStickyTableRow({ id }: AdStickyTableRowProps) { - return ( - - - - - - - - ); -} diff --git a/packages/website/src/components/AdWithContext.tsx b/packages/website/src/components/AdWithContext.tsx deleted file mode 100644 index 85639762a..000000000 --- a/packages/website/src/components/AdWithContext.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { App } from '../stores/app'; -import { Ad, type AdProps } from './Ad'; - -export function AdWithContext(props: AdProps) { - return ( - - - - ); -} diff --git a/packages/website/src/components/Compare/Body.tsx b/packages/website/src/components/Compare/Body.tsx index f753c35ed..f79af9976 100644 --- a/packages/website/src/components/Compare/Body.tsx +++ b/packages/website/src/components/Compare/Body.tsx @@ -2,7 +2,6 @@ import { asset } from '@blitzkit/core'; import { Flex, Heading, IconButton, Table } from '@radix-ui/themes'; import type { TankCharacteristics } from '../../core/blitzkit/tankCharacteristics'; import { CompareEphemeral } from '../../stores/compareEphemeral'; -import { AdStickyTableRow } from '../AdStickyTableRow'; import { StickyColumnHeaderCell } from '../StickyColumnHeaderCell'; import { CompareRow } from './CompareRow'; import { CompareSectionTitle } from './CompareSectionTitle'; @@ -76,8 +75,6 @@ export function Body({ stats }: BodyProps) { - - - - Maneuverability - - Survivability diff --git a/packages/website/src/components/InlineSkeleton.tsx b/packages/website/src/components/InlineSkeleton.tsx new file mode 100644 index 000000000..21c7b480a --- /dev/null +++ b/packages/website/src/components/InlineSkeleton.tsx @@ -0,0 +1,11 @@ +import { Skeleton, type SkeletonProps } from '@radix-ui/themes'; + +export function InlineSkeleton({ style, ...props }: SkeletonProps) { + return ( + + ); +} diff --git a/packages/website/src/components/Performance/BodyLoader.tsx b/packages/website/src/components/Performance/BodyLoader.tsx deleted file mode 100644 index e48bd88d2..000000000 --- a/packages/website/src/components/Performance/BodyLoader.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { Table } from '@radix-ui/themes'; -import { times } from 'lodash-es'; -import { RowLoader } from './RowLoader'; - -export function BodyLoader() { - return ( - - {times(10, (index) => ( - - ))} - - ); -} diff --git a/packages/website/src/components/Performance/PerformanceInfo.tsx b/packages/website/src/components/Performance/PerformanceInfo.tsx index a960400c2..dd556f849 100644 --- a/packages/website/src/components/Performance/PerformanceInfo.tsx +++ b/packages/website/src/components/Performance/PerformanceInfo.tsx @@ -5,16 +5,21 @@ import { } from '@blitzkit/core'; import { InfoCircledIcon } from '@radix-ui/react-icons'; import { Callout, Flex } from '@radix-ui/themes'; +import type { MaybeSkeletonComponentProps } from '../../types/maybeSkeletonComponentProps'; +import { InlineSkeleton } from '../InlineSkeleton'; const discoveredIdsDefinitions = await fetchDiscoveredIdsDefinitions(); const averageDefinitions = await fetchAverageDefinitions(); -export function PerformanceInfo() { - const samples = discoveredIdsDefinitions.count; +export function PerformanceInfo({ skeleton }: MaybeSkeletonComponentProps) { + const samples = formatCompact(Math.round(discoveredIdsDefinitions.count)); const minutesAgo = Math.floor( (Date.now() - averageDefinitions.time) / (1000 * 60), ); const hoursAgo = Math.floor(minutesAgo / 60); + const timeAgo = `${hoursAgo === 0 ? minutesAgo : hoursAgo} ${ + hoursAgo === 0 ? 'minutes' : 'hours' + }`; return ( @@ -23,9 +28,9 @@ export function PerformanceInfo() { - Career stats based on {formatCompact(Math.round(samples))} players. - Updated {hoursAgo === 0 ? minutesAgo : hoursAgo}{' '} - {hoursAgo === 0 ? 'minutes' : 'hours'} ago. + Career stats based on{' '} + {skeleton ? : samples} players. + Updated {skeleton ? : timeAgo} ago. diff --git a/packages/website/src/components/Performance/Table.tsx b/packages/website/src/components/Performance/Table.tsx index 66d2e66d9..1abb0f8eb 100644 --- a/packages/website/src/components/Performance/Table.tsx +++ b/packages/website/src/components/Performance/Table.tsx @@ -1,25 +1,19 @@ import { Flex } from '@radix-ui/themes'; -import { Suspense } from 'react'; +import type { MaybeSkeletonComponentProps } from '../../types/maybeSkeletonComponentProps'; import { StickyTableRoot } from '../StickyTableRoot'; -import { BodyLoader } from './BodyLoader'; import { Header } from './Header'; import { Tanks } from './Tanks'; -export function TankTable() { +export function TankTable({ skeleton }: MaybeSkeletonComponentProps) { return (
- }> - - + ); diff --git a/packages/website/src/components/Performance/Tanks.tsx b/packages/website/src/components/Performance/Tanks.tsx index d511d6dba..40b14b133 100644 --- a/packages/website/src/components/Performance/Tanks.tsx +++ b/packages/website/src/components/Performance/Tanks.tsx @@ -7,7 +7,7 @@ import { filterTank } from '../../core/blitzkit/filterTank'; import { $tankFilters } from '../../stores/tankFilters'; import { TankPerformancePersistent } from '../../stores/tankPerformancePersistent'; import { TankPerformanceSort } from '../../stores/tankPerformanceSort'; -import { AdStickyTableRow } from '../AdStickyTableRow'; +import type { MaybeSkeletonComponentProps } from '../../types/maybeSkeletonComponentProps'; import { RowLoader } from './RowLoader'; import { TankRow } from './TankRow'; import { Total } from './Total'; @@ -24,7 +24,17 @@ const averageDefinitionsArray = await fetchAverageDefinitions().then( })), ); -export function Tanks() { +export function Tanks({ skeleton }: MaybeSkeletonComponentProps) { + if (skeleton) { + return ( + + {times(16, (index) => ( + + ))} + + ); + } + const sort = TankPerformanceSort.use(); const tankPerformancePersistentStore = TankPerformancePersistent.useStore(); const filters = useStore($tankFilters); @@ -132,16 +142,11 @@ export function Tanks() { {tanks.slice(0, loadedRows).map((averages, index) => { const tank = tankDefinitions.tanks[averages.id]; - const hasAd = index % 16 === 0; - const adId = Math.floor(index / 16); if (tank === undefined) return null; return ( - {hasAd && ( - - )} }> diff --git a/packages/website/src/components/Skeleton/index.css.ts b/packages/website/src/components/Skeleton/index.css.ts deleted file mode 100644 index 99acbb31b..000000000 --- a/packages/website/src/components/Skeleton/index.css.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { slateDarkA } from '@radix-ui/colors'; -import { keyframes, style } from '@vanilla-extract/css'; - -const animation = keyframes({ - '0%': { backgroundColor: slateDarkA.slateA2 }, - '50%': { backgroundColor: slateDarkA.slateA3 }, - '100%': { backgroundColor: slateDarkA.slateA2 }, -}); - -export const skeleton = style({ - borderRadius: 8, - animation: `${animation} 2s ease-in-out infinite`, -}); diff --git a/packages/website/src/components/Skeleton/index.tsx b/packages/website/src/components/Skeleton/index.tsx deleted file mode 100644 index 990cbcbcf..000000000 --- a/packages/website/src/components/Skeleton/index.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import type { ComponentProps } from 'react'; -import { skeleton } from './index.css'; - -export function Skeleton({ className, ...props }: ComponentProps<'div'>) { - return
; -} diff --git a/packages/website/src/components/StickyTableRoot.tsx b/packages/website/src/components/StickyTableRoot.tsx index d0b8e2cdc..04fc7546d 100644 --- a/packages/website/src/components/StickyTableRoot.tsx +++ b/packages/website/src/components/StickyTableRoot.tsx @@ -6,9 +6,9 @@ export function StickyTableRoot({ style, ...props }: RootProps) { const table = useRef(null); useEffect(() => { - table.current - ?.querySelector('table') - ?.style.setProperty('overflow', 'auto'); + // table.current + // ?.querySelector('table') + // ?.style.setProperty('overflow', 'auto'); }, []); return ( diff --git a/packages/website/src/components/TankSearch/index.tsx b/packages/website/src/components/TankSearch/index.tsx index 045ba389c..caf8d2335 100644 --- a/packages/website/src/components/TankSearch/index.tsx +++ b/packages/website/src/components/TankSearch/index.tsx @@ -13,7 +13,7 @@ import { useStore } from '@nanostores/react'; import { Callout, Flex, Link, Text, type FlexProps } from '@radix-ui/themes'; import fuzzysort from 'fuzzysort'; import { times } from 'lodash-es'; -import { Fragment, memo, useEffect, useMemo, useState } from 'react'; +import { memo, useEffect, useMemo, useState } from 'react'; import { filterTank } from '../../core/blitzkit/filterTank'; import { resolveReload } from '../../core/blitzkit/resolveReload'; import { useAdExempt } from '../../hooks/useAdExempt'; @@ -23,7 +23,6 @@ import { SORT_UNITS, } from '../../stores/tankopediaPersistent/constants'; import { $tankopediaSort } from '../../stores/tankopediaSort'; -import { AdResponsiveHorizontal } from '../AdResponsiveHorizontal'; import { ExperimentIcon } from '../ExperimentIcon'; import { FilterControl } from './components/FilterControl'; import { NoResults } from './components/NoResults'; @@ -463,27 +462,9 @@ export const TankSearch = memo( <> {tanks.length > 0 && ( - {tanks.map((tank, index) => { - const hasAd = (index + 16) % 32 === 0; - const adId = Math.floor(index / 32); - - return ( - - - - {!exempt && - !compact && - hasAd && - index !== tanks.length - 1 && ( - - - - )} - - ); - })} + {tanks.map((tank) => ( + + ))} {times( Math.min(PREVIEW_COUNT, tanksFiltered.length - loadedRows), diff --git a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/index.tsx b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/index.tsx index fed37b918..23205b2b6 100644 --- a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/index.tsx +++ b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/index.tsx @@ -503,19 +503,6 @@ export function Characteristics() { - {/* AD TODO: */} - {/* {!exempt && ( - - - - )} */} - Maneuverability diff --git a/packages/website/src/core/radix/var.ts b/packages/website/src/core/radix/var.ts index c83443d11..b2acb3999 100644 --- a/packages/website/src/core/radix/var.ts +++ b/packages/website/src/core/radix/var.ts @@ -2,7 +2,6 @@ type Name = | `color-${'background' | `panel-${'solid' | 'translucent'}` | 'surface' | 'overlay'}` | `radius-${1 | 2 | 3 | 4 | 5 | 6 | 'full'}` | `space-${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}` - | string; export function Var(name: Name) { return `var(--${name})`; diff --git a/packages/website/src/pages/index.astro b/packages/website/src/pages/index.astro index a4103ba10..ae5bc5ff3 100644 --- a/packages/website/src/pages/index.astro +++ b/packages/website/src/pages/index.astro @@ -1,6 +1,5 @@ --- import { Box, Flex, Heading } from '@radix-ui/themes'; -import { AdResponsiveHorizontal } from '../components/AdResponsiveHorizontal'; import HomeHero from '../components/HomeHero.astro'; import { Plugs } from '../components/Plugs.tsx'; import ToolCard from '../components/ToolCard.astro'; @@ -24,10 +23,6 @@ import BaseLayout from '../layouts/BaseLayout.astro'; - - - - {/* */} @@ -41,10 +36,6 @@ import BaseLayout from '../layouts/BaseLayout.astro'; - - - - diff --git a/packages/website/src/pages/tools/performance/_index.tsx b/packages/website/src/pages/tools/performance/_index.tsx index 5815b806d..958147bd3 100644 --- a/packages/website/src/pages/tools/performance/_index.tsx +++ b/packages/website/src/pages/tools/performance/_index.tsx @@ -4,23 +4,24 @@ import { PerformanceInfo } from '../../../components/Performance/PerformanceInfo import { TankTable } from '../../../components/Performance/Table'; import { TankPerformancePersistent } from '../../../stores/tankPerformancePersistent'; import { TankPerformanceSort } from '../../../stores/tankPerformanceSort'; +import type { MaybeSkeletonComponentProps } from '../../../types/maybeSkeletonComponentProps'; -export function Page() { +export function Page({ skeleton }: MaybeSkeletonComponentProps) { return ( - + ); } -function Content() { +function Content({ skeleton }: MaybeSkeletonComponentProps) { return ( - + - + ); } diff --git a/packages/website/src/pages/tools/performance/index.astro b/packages/website/src/pages/tools/performance/index.astro index 07c5ded6a..38aa96d07 100644 --- a/packages/website/src/pages/tools/performance/index.astro +++ b/packages/website/src/pages/tools/performance/index.astro @@ -5,5 +5,7 @@ import { Page } from './_index'; --- - + + + diff --git a/packages/website/src/pages/tools/tankopedia/[id]/_index.tsx b/packages/website/src/pages/tools/tankopedia/[id]/_index.tsx index 5c0e90570..e79b6e6ea 100644 --- a/packages/website/src/pages/tools/tankopedia/[id]/_index.tsx +++ b/packages/website/src/pages/tools/tankopedia/[id]/_index.tsx @@ -3,7 +3,6 @@ import { fetchProvisionDefinitions, fetchTankDefinitions, } from '@blitzkit/core'; -import { AdResponsiveHorizontal } from '../../../../components/AdResponsiveHorizontal'; import { PageWrapper } from '../../../../components/PageWrapper'; import { CalloutsSection } from '../../../../components/Tankopedia/CalloutsSection'; import { CharacteristicsSection } from '../../../../components/Tankopedia/CharacteristicsSection'; @@ -48,16 +47,12 @@ export function Page({ id }: PageProps) { > - - - - diff --git a/packages/website/src/types/maybeSkeletonComponentProps.ts b/packages/website/src/types/maybeSkeletonComponentProps.ts new file mode 100644 index 000000000..70b1412b8 --- /dev/null +++ b/packages/website/src/types/maybeSkeletonComponentProps.ts @@ -0,0 +1,3 @@ +export interface MaybeSkeletonComponentProps { + skeleton?: boolean; +}