diff --git a/packages/website/src/components/TierList/Controls/components/Share.tsx b/packages/website/src/components/TierList/Controls/components/Share.tsx new file mode 100644 index 000000000..7825f59b5 --- /dev/null +++ b/packages/website/src/components/TierList/Controls/components/Share.tsx @@ -0,0 +1,21 @@ +import { Share2Icon } from '@radix-ui/react-icons'; +import { useRef } from 'react'; +import { generateTierListParams } from '../../../../core/blitzkit/generateTierListParams'; +import { TierList } from '../../../../stores/tierList'; +import { CopyButton } from '../../../CopyButton'; + +export function Share() { + const tanks = TierList.use((state) => state.tanks); + const input = useRef(null); + + return ( + + `${location.origin}/tools/tier-list?${generateTierListParams(tanks)}` + } + > + Share + + ); +} diff --git a/packages/website/src/components/TierList/Controls.tsx b/packages/website/src/components/TierList/Controls/index.tsx similarity index 69% rename from packages/website/src/components/TierList/Controls.tsx rename to packages/website/src/components/TierList/Controls/index.tsx index 15c27d588..7592f113c 100644 --- a/packages/website/src/components/TierList/Controls.tsx +++ b/packages/website/src/components/TierList/Controls/index.tsx @@ -1,13 +1,14 @@ import { ReloadIcon } from '@radix-ui/react-icons'; import { Button, Flex } from '@radix-ui/themes'; -import { TierList } from '../../stores/tierList'; -import { tierListRows } from './Table/constants'; +import { TierList } from '../../../stores/tierList'; +import { tierListRows } from '../Table/constants'; +import { Share } from './components/Share'; export function TierListControls() { const mutateTierList = TierList.useMutation(); return ( - + + + ); } diff --git a/packages/website/src/components/TierList/URLManager.tsx b/packages/website/src/components/TierList/URLManager.tsx new file mode 100644 index 000000000..da16671d8 --- /dev/null +++ b/packages/website/src/components/TierList/URLManager.tsx @@ -0,0 +1,29 @@ +import { useEffect } from 'react'; +import { generateTierListParams } from '../../core/blitzkit/generateTierListParams'; +import { TierList } from '../../stores/tierList'; + +export function URLManager() { + const tanks = TierList.use((state) => state.tanks); + const mutateTierList = TierList.useMutation(); + + useEffect(() => { + const params = new URLSearchParams(window.location.search); + + params.forEach((value, key) => { + if (key.startsWith('row-')) { + const index = Number.parseInt(key.slice(4), 10); + const values = value.split(',').map(parseInt).filter(Boolean); + + mutateTierList((draft) => { + draft.tanks[index] = values; + }); + } + }); + }, []); + + useEffect(() => { + window.history.replaceState(null, '', `?${generateTierListParams(tanks)}`); + }, [tanks]); + + return null; +} diff --git a/packages/website/src/core/blitzkit/generateTierListParams.ts b/packages/website/src/core/blitzkit/generateTierListParams.ts new file mode 100644 index 000000000..8d465adcc --- /dev/null +++ b/packages/website/src/core/blitzkit/generateTierListParams.ts @@ -0,0 +1,9 @@ +export function generateTierListParams(tanks: number[][]) { + const params = new URLSearchParams(); + + tanks.forEach((row, index) => { + params.set(`row-${index}`, row.join(',')); + }); + + return params; +} diff --git a/packages/website/src/pages/tools/tier-list/_index.tsx b/packages/website/src/pages/tools/tier-list/_index.tsx index 1bd55d237..2cfe0749a 100644 --- a/packages/website/src/pages/tools/tier-list/_index.tsx +++ b/packages/website/src/pages/tools/tier-list/_index.tsx @@ -3,6 +3,7 @@ import { FilterControl } from '../../../components/TankSearch/components/FilterC import { TierListControls } from '../../../components/TierList/Controls'; import { TierListTable } from '../../../components/TierList/Table'; import { TierListTiles } from '../../../components/TierList/Tiles'; +import { URLManager } from '../../../components/TierList/URLManager'; import { TankopediaPersistent } from '../../../stores/tankopediaPersistent'; import { TierList } from '../../../stores/tierList'; @@ -19,6 +20,7 @@ export function Page() { function Content() { return ( +