feat: tier list share button

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<HTMLInputElement>(null);
+
+  return (
+    <CopyButton
+      variant="outline"
+      copy={() =>
+        `${location.origin}/tools/tier-list?${generateTierListParams(tanks)}`
+      }
+    >
+      <Share2Icon /> Share
+    </CopyButton>
+  );
+}

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 { TierList } from '../../../stores/tierList';
-import { tierListRows } from './Table/constants';
+import { tierListRows } from '../Table/constants';
+import { Share } from './components/Share';
 
 export function TierListControls() {
   const mutateTierList = TierList.useMutation();
 
   return (
-    <Flex justify="center">
+    <Flex justify="center" gap="2">
       <Button
         color="red"
         onClick={() => {
@@ -18,6 +19,8 @@ export function TierListControls() {
       >
         <ReloadIcon /> Reset
       </Button>
+
+      <Share />
     </Flex>
   );
 }

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;
+}

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;
+}

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 (
     <PageWrapper color="orange" maxWidth="100rem">
+      <URLManager />
       <TierListControls />
       <TierListTable />
       <FilterControl />