diff --git a/packages/website/src/components/Navbar.astro b/packages/website/src/components/Navbar.astro index dd8754eb5..c461016de 100644 --- a/packages/website/src/components/Navbar.astro +++ b/packages/website/src/components/Navbar.astro @@ -20,7 +20,6 @@ import { import { resolveBranchName } from '../core/blitzkit/branches'; import { homeTool, TOOLS } from '../constants/tools'; import { NavbarAccount } from './NavbarAccount'; -import { times } from 'lodash-es'; const toolsFiltered = TOOLS.filter((tool) => !('href' in tool)); const tools = [homeTool, ...toolsFiltered]; diff --git a/packages/website/src/components/TierList/Controls/components/Share.tsx b/packages/website/src/components/TierList/Controls/components/Share.tsx index 7825f59b5..b8432a64a 100644 --- a/packages/website/src/components/TierList/Controls/components/Share.tsx +++ b/packages/website/src/components/TierList/Controls/components/Share.tsx @@ -1,18 +1,16 @@ 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); + const rows = TierList.use((state) => state.rows); return ( - `${location.origin}/tools/tier-list?${generateTierListParams(tanks)}` + `${location.origin}/tools/tier-list?${generateTierListParams(rows)}` } > Share diff --git a/packages/website/src/components/TierList/Controls/index.tsx b/packages/website/src/components/TierList/Controls/index.tsx index 7592f113c..aeb5de9b3 100644 --- a/packages/website/src/components/TierList/Controls/index.tsx +++ b/packages/website/src/components/TierList/Controls/index.tsx @@ -1,7 +1,6 @@ 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, tierListInitialState } from '../../../stores/tierList'; import { Share } from './components/Share'; export function TierListControls() { @@ -13,7 +12,7 @@ export function TierListControls() { color="red" onClick={() => { mutateTierList((draft) => { - draft.tanks = tierListRows.map(() => []); + Object.assign(draft, tierListInitialState); }); }} > diff --git a/packages/website/src/components/TierList/Row/components/Header.tsx b/packages/website/src/components/TierList/Row/components/Header.tsx new file mode 100644 index 000000000..bff09d835 --- /dev/null +++ b/packages/website/src/components/TierList/Row/components/Header.tsx @@ -0,0 +1,112 @@ +import { + CheckIcon, + Cross1Icon, + Pencil1Icon, + Pencil2Icon, +} from '@radix-ui/react-icons'; +import { + Button, + Flex, + Heading, + IconButton, + Popover, + Table, + TextField, +} from '@radix-ui/themes'; +import { useRef, useState } from 'react'; +import { Var } from '../../../../core/radix/var'; +import { TierList } from '../../../../stores/tierList'; +import { tierListRows } from '../../Table/constants'; + +interface HeaderProps { + index: number; +} + +export function Header({ index }: HeaderProps) { + const rowStyle = tierListRows[index]; + const name = TierList.use((state) => state.rows[index].name); + const input = useRef(null); + const mutateTierList = TierList.useMutation(); + const [open, setOpen] = useState(false); + + return ( + + + + + + {name} + + + + + + + + + + + { + if (!input.current) return; + + if (event.key === 'Enter') { + input.current.blur(); + } else if (event.key === 'Escape') { + input.current.value = name; + input.current.blur(); + } + }} + onBlur={() => { + if (!input.current) return; + + mutateTierList((draft) => { + if (!input.current) return; + + draft.rows[index].name = input.current.value; + }); + + setOpen(false); + }} + > + + + + + + + { + if (!input.current) return; + + input.current.value = name; + }} + > + + + + + + + + + + ); +} diff --git a/packages/website/src/components/TierList/Row.tsx b/packages/website/src/components/TierList/Row/index.tsx similarity index 61% rename from packages/website/src/components/TierList/Row.tsx rename to packages/website/src/components/TierList/Row/index.tsx index f05db2fe2..3eca6a095 100644 --- a/packages/website/src/components/TierList/Row.tsx +++ b/packages/website/src/components/TierList/Row/index.tsx @@ -1,10 +1,10 @@ import { fetchTankDefinitions } from '@blitzkit/core'; -import { Flex, Heading, Table } from '@radix-ui/themes'; +import { Flex, Table } from '@radix-ui/themes'; import { useEffect, useRef } from 'react'; -import { Var } from '../../core/radix/var'; -import { TierList } from '../../stores/tierList'; -import { tierListRowElements, tierListRows } from './Table/constants'; -import { TierListTile } from './Tile'; +import { TierList } from '../../../stores/tierList'; +import { tierListRowElements } from '../Table/constants'; +import { TierListTile } from '../Tile'; +import { Header } from './components/Header'; interface TierListRowProps { index: number; @@ -13,8 +13,7 @@ interface TierListRowProps { const tankDefinitions = await fetchTankDefinitions(); export function TierListRow({ index }: TierListRowProps) { - const rowStyle = tierListRows[index]; - const tanks = TierList.use((state) => state.tanks[index]); + const tanks = TierList.use((state) => state.rows[index].tanks); const row = useRef(null); useEffect(() => { @@ -30,13 +29,8 @@ export function TierListRow({ index }: TierListRowProps) { }); return ( - - - {rowStyle.name} - + +
diff --git a/packages/website/src/components/TierList/Tile.tsx b/packages/website/src/components/TierList/Tile.tsx index 95c848f28..6e3ef7736 100644 --- a/packages/website/src/components/TierList/Tile.tsx +++ b/packages/website/src/components/TierList/Tile.tsx @@ -106,10 +106,10 @@ export function TierListTile(props: TierListTileProps) { mutateTierList((draft) => { draft.dragging = false; - draft.tanks = draft.tanks.map((row) => - row.filter((tankId) => tankId !== props.tank.id), - ); - draft.tanks[rowIndex].splice(tileIndex, 0, props.tank.id); + draft.rows.forEach((row) => { + row.tanks = row.tanks.filter((tankId) => tankId !== props.tank.id); + }); + draft.rows[rowIndex].tanks.splice(tileIndex, 0, props.tank.id); draft.placedTanks.add(props.tank.id); }); @@ -120,10 +120,10 @@ export function TierListTile(props: TierListTileProps) { mutateTierList((draft) => { draft.dragging = false; - draft.tanks = draft.tanks.map((row) => - row.filter((tankId) => tankId !== props.tank.id), - ); - draft.tanks[rowIndex].push(props.tank.id); + draft.rows.forEach((row) => { + row.tanks = row.tanks.filter((tankId) => tankId !== props.tank.id); + }); + draft.rows[rowIndex].tanks.push(props.tank.id); draft.placedTanks.add(props.tank.id); }); @@ -135,9 +135,9 @@ export function TierListTile(props: TierListTileProps) { if (!wasPlaced) { mutateTierList((draft) => { draft.dragging = false; - draft.tanks = draft.tanks.map((row) => - row.filter((tankId) => tankId !== props.tank.id), - ); + draft.rows.forEach((row) => { + row.tanks = row.tanks.filter((tankId) => tankId !== props.tank.id); + }); draft.placedTanks.delete(props.tank.id); }); } diff --git a/packages/website/src/components/TierList/URLManager.tsx b/packages/website/src/components/TierList/URLManager.tsx index 3401aa290..b5f9f8aab 100644 --- a/packages/website/src/components/TierList/URLManager.tsx +++ b/packages/website/src/components/TierList/URLManager.tsx @@ -6,7 +6,7 @@ import { TierList } from '../../stores/tierList'; const tankDefinitions = await fetchTankDefinitions(); export function URLManager() { - const tanks = TierList.use((state) => state.tanks); + const rows = TierList.use((state) => state.rows); const mutateTierList = TierList.useMutation(); useEffect(() => { @@ -21,15 +21,15 @@ export function URLManager() { .filter((id) => id in tankDefinitions.tanks); mutateTierList((draft) => { - draft.tanks[index] = values; + draft.rows[index].tanks = values; }); } }); }, []); useEffect(() => { - window.history.replaceState(null, '', `?${generateTierListParams(tanks)}`); - }, [tanks]); + window.history.replaceState(null, '', `?${generateTierListParams(rows)}`); + }, [rows]); return null; } diff --git a/packages/website/src/core/blitzkit/generateTierListParams.ts b/packages/website/src/core/blitzkit/generateTierListParams.ts index 8d465adcc..7a870e4bc 100644 --- a/packages/website/src/core/blitzkit/generateTierListParams.ts +++ b/packages/website/src/core/blitzkit/generateTierListParams.ts @@ -1,8 +1,10 @@ -export function generateTierListParams(tanks: number[][]) { +import type { TierList } from '../../stores/tierList'; + +export function generateTierListParams(rows: TierList['rows']) { const params = new URLSearchParams(); - tanks.forEach((row, index) => { - params.set(`row-${index}`, row.join(',')); + rows.forEach((row, index) => { + params.set(`row-${index}`, row.tanks.join(',')); }); return params; diff --git a/packages/website/src/pages/tools/embed/[embed]/_index.tsx b/packages/website/src/pages/tools/embed/[embed]/_index.tsx index 9c6434e1d..8e3eb379f 100644 --- a/packages/website/src/pages/tools/embed/[embed]/_index.tsx +++ b/packages/website/src/pages/tools/embed/[embed]/_index.tsx @@ -54,10 +54,6 @@ export function Page({ embed }: PageProps) { } function Content({ embed }: PageProps) { - const wargaming = App.useDeferred( - (state) => state.logins.wargaming, - undefined, - ); const embedStateStore = EmbedState.useStore(); const config = embedConfigurations[embed] as EmbedConfig; const [backgroundImage, setBackgroundImage] = useState( diff --git a/packages/website/src/stores/tierList.ts b/packages/website/src/stores/tierList.ts index 13c3605b8..872dd00c8 100644 --- a/packages/website/src/stores/tierList.ts +++ b/packages/website/src/stores/tierList.ts @@ -6,18 +6,23 @@ import { createContextualStore } from '../core/zustand/createContextualStore'; export interface TierList { dragging: boolean; - tanks: number[][]; + rows: { name: string; tanks: number[] }[]; placedTanks: Set; } enableMapSet(); +export const tierListInitialState: TierList = { + dragging: false, + rows: tierListRows.map((row) => ({ + name: row.name, + tanks: [], + })), + placedTanks: new Set(), +}; + export const TierList = createContextualStore(() => create()( - subscribeWithSelector(() => ({ - dragging: false, - tanks: tierListRows.map(() => []), - placedTanks: new Set(), - })), + subscribeWithSelector(() => tierListInitialState), ), );