diff --git a/packages/website/src/components/Embeds/breakdown.tsx b/packages/website/src/components/Embeds/breakdown.tsx index d98b9ecf5..65da153e2 100644 --- a/packages/website/src/components/Embeds/breakdown.tsx +++ b/packages/website/src/components/Embeds/breakdown.tsx @@ -7,17 +7,17 @@ import { idToRegion, sumCompositeStats, type IndividualTankStats, -} from '@blitzkit/core'; -import { STRINGS } from '@blitzkit/i18n'; -import { ReloadIcon } from '@radix-ui/react-icons'; -import { ContextMenu } from '@radix-ui/themes'; -import { useEffect, useMemo, useState } from 'react'; -import { breakdownConfig } from '../../constants/embeds'; -import { awaitableAverageDefinitions } from '../../core/awaitables/averageDefinitions'; -import { awaitableTankDefinitions } from '../../core/awaitables/tankDefinitions'; -import { EmbedBreakdownPersistent } from '../../stores/embedBreakdownPersistent'; -import { useEmbedStateCurry } from '../../stores/embedState/utilities'; -import { BreakdownEmbedCard, BreakdownEmbedWrapper } from '../TanksEmbed'; +} from "@blitzkit/core"; +import { STRINGS } from "@blitzkit/i18n"; +import { ReloadIcon } from "@radix-ui/react-icons"; +import { ContextMenu } from "@radix-ui/themes"; +import { useEffect, useMemo, useState } from "react"; +import { breakdownConfig } from "../../constants/embeds"; +import { awaitableAverageDefinitions } from "../../core/awaitables/averageDefinitions"; +import { awaitableTankDefinitions } from "../../core/awaitables/tankDefinitions"; +import { EmbedBreakdown } from "../../stores/embedBreakdown"; +import { useEmbedStateCurry } from "../../stores/embedState/utilities"; +import { BreakdownEmbedCard, BreakdownEmbedWrapper } from "../TanksEmbed"; export const compositeStatsKeysOptions = compositeStatsKeys.map((value) => ({ value, @@ -55,7 +55,7 @@ export const fakeCompositeStats = compositeStats( wins: 30, xp: 1230 * 50, }, - averageDefinitions.averages[7297].mu, + averageDefinitions.averages[7297].mu ); export function BreakdownPreview() { @@ -64,11 +64,11 @@ export function BreakdownPreview() { return ( - {useEmbedState('showTotal') && ( + {useEmbedState("showTotal") && ( )} - {tanks.slice(0, useEmbedState('listMaxTanks')).map((tank) => ( + {tanks.slice(0, useEmbedState("listMaxTanks")).map((tank) => ( - - - ); -} - -function BreakdownRendererContent() { const { useEmbedState } = useEmbedStateCurry(); const params = new URLSearchParams(window.location.search); - const mutateEmbedBreakdownPersistent = EmbedBreakdownPersistent.useMutation(); - const id = Number(params.get('id')); - const tankStatsA = EmbedBreakdownPersistent.use((state) => state[id] ?? []); + const id = Number(params.get("id")); + const tankStatsA = EmbedBreakdown.use((state) => state[id] ?? []); const [tankStatsB, setTankStatsB] = useState([]); const diff = useMemo( () => deltaTankStats(tankStatsA, tankStatsB).sort( - (a, b) => b.last_battle_time - a.last_battle_time, + (a, b) => b.last_battle_time - a.last_battle_time ), - [tankStatsB], + [tankStatsB] ); const compositeStats = diff .map((diff) => { @@ -109,14 +100,14 @@ function BreakdownRendererContent() { const compositeStats = calculateCompositeStats( { battle_life_time: diff.battle_life_time, ...diff.all }, - average.mu, + average.mu ); return { id: diff.tank_id, compositeStats }; }) .filter((stats) => stats !== null); const sum = sumCompositeStats( - compositeStats.map(({ compositeStats }) => compositeStats), + compositeStats.map(({ compositeStats }) => compositeStats) ); useEffect(() => { @@ -135,12 +126,12 @@ function BreakdownRendererContent() { - {useEmbedState('showTotal') && ( + {useEmbedState("showTotal") && ( )} {compositeStats - .slice(0, useEmbedState('listMaxTanks')) + .slice(0, useEmbedState("listMaxTanks")) .map(({ id, compositeStats }) => { const tank = tankDefinitions.tanks[id]; @@ -163,7 +154,7 @@ function BreakdownRendererContent() { if (newA === null) return; - mutateEmbedBreakdownPersistent((draft) => { + EmbedBreakdown.mutate((draft) => { draft[id] = newA; }); }} diff --git a/packages/website/src/stores/embedBreakdown.ts b/packages/website/src/stores/embedBreakdown.ts new file mode 100644 index 000000000..ecdb13481 --- /dev/null +++ b/packages/website/src/stores/embedBreakdown.ts @@ -0,0 +1,9 @@ +import { type IndividualTankStats } from "@blitzkit/core"; +import { Varuna } from "varuna"; + +type EmbedBreakdown = Record; + +export const EmbedBreakdown = new Varuna( + {}, + "embed-breakdown-2" +); diff --git a/packages/website/src/stores/embedBreakdownPersistent.ts b/packages/website/src/stores/embedBreakdownPersistent.ts deleted file mode 100644 index 76ec9c965..000000000 --- a/packages/website/src/stores/embedBreakdownPersistent.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { type IndividualTankStats } from '@blitzkit/core'; -import * as lodash from 'lodash-es'; -import { create } from 'zustand'; -import { persist } from 'zustand/middleware'; -import { createContextualStore } from '../core/zustand/createContextualStore'; - -type EmbedBreakdownPersistentStore = Record; - -export const EmbedBreakdownPersistent = createContextualStore(() => - create()( - persist(() => ({}), { - name: 'embed-breakdown', - merge: (a, b) => lodash.merge(b, a), - }), - ), -);