feat: renaming

packages/website/src/components/Tankopedia/TechTreeSection/components/Node.tsx

@@ -1,12 +1,12 @@
-import { asset, formatCompact, TIER_ROMAN_NUMERALS } from '@blitzkit/core';
-import { literals } from '@blitzkit/i18n/src/literals';
-import { Box, Flex, Skeleton, Text } from '@radix-ui/themes';
-import { awaitableAverageDefinitions } from '../../../../core/awaitables/averageDefinitions';
-import { awaitableTankDefinitions } from '../../../../core/awaitables/tankDefinitions';
-import { useLocale } from '../../../../hooks/useLocale';
-import { TankopediaEphemeral } from '../../../../stores/tankopediaEphemeral';
-import type { MaybeSkeletonComponentProps } from '../../../../types/maybeSkeletonComponentProps';
-import { LinkI18n } from '../../../LinkI18n';
+import { asset, formatCompact, TIER_ROMAN_NUMERALS } from "@blitzkit/core";
+import { literals } from "@blitzkit/i18n/src/literals";
+import { Box, Flex, Skeleton, Text } from "@radix-ui/themes";
+import { awaitableAverageDefinitions } from "../../../../core/awaitables/averageDefinitions";
+import { awaitableTankDefinitions } from "../../../../core/awaitables/tankDefinitions";
+import { useLocale } from "../../../../hooks/useLocale";
+import { Tankopedia } from "../../../../stores/tankopedia";
+import type { MaybeSkeletonComponentProps } from "../../../../types/maybeSkeletonComponentProps";
+import { LinkI18n } from "../../../LinkI18n";
 
 type NodeProps = MaybeSkeletonComponentProps & {
   id: number;
@@ -21,7 +21,7 @@ const [tankDefinitions, averageDefinitions] = await Promise.all([
 
 export function Node({ id, highlight, nextIds, skeleton }: NodeProps) {
   const { locale, strings, unwrap } = useLocale();
-  const xpMultiplier = TankopediaEphemeral.use((state) => state.xpMultiplier);
+  const xpMultiplier = Tankopedia.use((state) => state.xpMultiplier);
   const tank = tankDefinitions.tanks[id];
   const nextTanks = nextIds?.map((id) => tankDefinitions.tanks[id]);
   const thisTankXp =
@@ -36,7 +36,7 @@ export function Node({ id, highlight, nextIds, skeleton }: NodeProps) {
         ? 0
         : (tank.research_cost.research_cost_type!.value as number) /
           xpMultiplier),
-    0,
+    0
   );
   const averages = averageDefinitions.averages[tank.id]?.mu;
   const averageXp = averages ? averages.xp / averages.battles : undefined;
@@ -49,32 +49,32 @@ export function Node({ id, highlight, nextIds, skeleton }: NodeProps) {
       href={`/tanks/${tankDefinitions.tanks[id].slug}`}
       key={id}
       style={{
-        textDecoration: 'none',
-        color: 'inherit',
-        position: 'relative',
+        textDecoration: "none",
+        color: "inherit",
+        position: "relative",
       }}
     >
       <Box
-        mx={highlight ? '2' : '0'}
+        mx={highlight ? "2" : "0"}
         style={{
           background: highlight
             ? `url(${asset(`flags/fade_small/${tank.nation}.webp`)})`
             : undefined,
-          backgroundPosition: 'center',
-          backgroundSize: 'cover',
-          boxShadow: highlight ? 'var(--shadow-4)' : undefined,
-          borderRadius: 'var(--radius-4)',
-          overflow: 'hidden',
+          backgroundPosition: "center",
+          backgroundSize: "cover",
+          boxShadow: highlight ? "var(--shadow-4)" : undefined,
+          borderRadius: "var(--radius-4)",
+          overflow: "hidden",
         }}
       >
         <Flex
           direction="column"
           align="center"
           py="4"
-          px={highlight ? '4' : '2'}
+          px={highlight ? "4" : "2"}
           style={{
-            backdropFilter: highlight ? 'brightness(0.25)' : undefined,
-            WebkitBackdropFilter: highlight ? 'brightness(0.25)' : undefined,
+            backdropFilter: highlight ? "brightness(0.25)" : undefined,
+            WebkitBackdropFilter: highlight ? "brightness(0.25)" : undefined,
           }}
         >
           <img
@@ -83,7 +83,7 @@ export function Node({ id, highlight, nextIds, skeleton }: NodeProps) {
             width={64}
             height={64}
             style={{
-              objectFit: 'contain',
+              objectFit: "contain",
             }}
           />
 
@@ -99,12 +99,12 @@ export function Node({ id, highlight, nextIds, skeleton }: NodeProps) {
                 <Flex gap="1" align="center">
                   <img
                     alt="XP"
-                    src={asset('icons/currencies/xp.webp')}
+                    src={asset("icons/currencies/xp.webp")}
                     style={{
-                      width: '1em',
-                      height: '1em',
-                      objectFit: 'contain',
-                      objectPosition: 'center',
+                      width: "1em",
+                      height: "1em",
+                      objectFit: "contain",
+                      objectPosition: "center",
                     }}
                   />
                   {formatCompact(locale, thisTankXp)}
@@ -114,12 +114,12 @@ export function Node({ id, highlight, nextIds, skeleton }: NodeProps) {
                 <Flex gap="1" align="center">
                   <img
                     alt="Silver"
-                    src={asset('icons/currencies/silver.webp')}
+                    src={asset("icons/currencies/silver.webp")}
                     style={{
-                      width: '1em',
-                      height: '1em',
-                      objectFit: 'contain',
-                      objectPosition: 'center',
+                      width: "1em",
+                      height: "1em",
+                      objectFit: "contain",
+                      objectPosition: "center",
                     }}
                   />
                   {formatCompact(locale, tank.price.value)}
@@ -135,7 +135,7 @@ export function Node({ id, highlight, nextIds, skeleton }: NodeProps) {
                     ? strings.website.tools.tankopedia.tech_tree.battle
                     : literals(
                         strings.website.tools.tankopedia.tech_tree.battles,
-                        [`${games}`],
+                        [`${games}`]
                       ))}
               </Text>
             )}

packages/website/src/components/Tankopedia/TechTreeSection/index.tsx

@@ -1,15 +1,15 @@
-import { asset, TankType } from '@blitzkit/core';
-import { literals } from '@blitzkit/i18n/src/literals';
-import { CaretLeftIcon, CaretRightIcon, PlusIcon } from '@radix-ui/react-icons';
-import { Flex, Heading, IconButton, ScrollArea, Text } from '@radix-ui/themes';
-import { Fragment, useEffect, useMemo, useRef, useState } from 'react';
-import { awaitableTankDefinitions } from '../../../core/awaitables/tankDefinitions';
-import { useLocale } from '../../../hooks/useLocale';
-import { Duel } from '../../../stores/duel';
-import { TankopediaEphemeral } from '../../../stores/tankopediaEphemeral';
-import type { MaybeSkeletonComponentProps } from '../../../types/maybeSkeletonComponentProps';
-import { Arrow } from './components/Arrow';
-import { Node } from './components/Node';
+import { asset, TankType } from "@blitzkit/core";
+import { literals } from "@blitzkit/i18n/src/literals";
+import { CaretLeftIcon, CaretRightIcon, PlusIcon } from "@radix-ui/react-icons";
+import { Flex, Heading, IconButton, ScrollArea, Text } from "@radix-ui/themes";
+import { Fragment, useEffect, useMemo, useRef, useState } from "react";
+import { awaitableTankDefinitions } from "../../../core/awaitables/tankDefinitions";
+import { useLocale } from "../../../hooks/useLocale";
+import { Duel } from "../../../stores/duel";
+import { Tankopedia } from "../../../stores/tankopedia";
+import type { MaybeSkeletonComponentProps } from "../../../types/maybeSkeletonComponentProps";
+import { Arrow } from "./components/Arrow";
+import { Node } from "./components/Node";
 
 type Line = number[];
 
@@ -20,7 +20,7 @@ export const XP_MULTIPLIERS = [1, 2, 3, 4, 5, 10];
 export function TechTreeSection({ skeleton }: MaybeSkeletonComponentProps) {
   const { locale, strings } = useLocale();
   const master = Duel.use((state) => state.protagonist.tank);
-  const xpMultiplier = TankopediaEphemeral.use((state) => state.xpMultiplier);
+  const xpMultiplier = Tankopedia.use((state) => state.xpMultiplier);
   const container = useRef<HTMLDivElement>(null);
   const lines = useMemo(() => {
     function extend(line: Line): Line[] {
@@ -32,8 +32,8 @@ export function TechTreeSection({ skeleton }: MaybeSkeletonComponentProps) {
         if (root.ancestors.length === 1 || root.tier === 2) {
           line.push(
             root.ancestors.find(
-              (ancestor) => !tankDefinitions.tanks[ancestor].deprecated,
-            ) ?? root.ancestors[0],
+              (ancestor) => !tankDefinitions.tanks[ancestor].deprecated
+            ) ?? root.ancestors[0]
           );
           return extend(line);
         } else {
@@ -52,7 +52,7 @@ export function TechTreeSection({ skeleton }: MaybeSkeletonComponentProps) {
   const [lineIndex, setLineIndex] = useState(0);
   const line = useMemo(
     () => (lines.length === 0 ? [master.id] : [...lines[lineIndex]].reverse()),
-    [master, lineIndex],
+    [master, lineIndex]
   );
   const totalXp = line.reduce(
     (xp, id) =>
@@ -62,11 +62,11 @@ export function TechTreeSection({ skeleton }: MaybeSkeletonComponentProps) {
         ? 0
         : (tankDefinitions.tanks[id].research_cost.research_cost_type!
             .value as number)),
-    0,
+    0
   );
   const totalCredits = line.reduce(
     (credits, id) => credits + tankDefinitions.tanks[id].price.value,
-    0,
+    0
   );
 
   useEffect(() => {
@@ -87,7 +87,7 @@ export function TechTreeSection({ skeleton }: MaybeSkeletonComponentProps) {
       direction="column"
       align="center"
       gap="0"
-      style={{ backgroundColor: 'var(--color-surface)' }}
+      style={{ backgroundColor: "var(--color-surface)" }}
       py="6"
     >
       <Flex direction="column" align="center">
@@ -101,12 +101,12 @@ export function TechTreeSection({ skeleton }: MaybeSkeletonComponentProps) {
               <Flex gap="1" align="center">
                 <img
                   alt="XP"
-                  src={asset('icons/currencies/xp.webp')}
+                  src={asset("icons/currencies/xp.webp")}
                   style={{
-                    width: '1em',
-                    height: '1em',
-                    objectFit: 'contain',
-                    objectPosition: 'center',
+                    width: "1em",
+                    height: "1em",
+                    objectFit: "contain",
+                    objectPosition: "center",
                   }}
                 />
                 {Math.round(totalXp / xpMultiplier).toLocaleString(locale)}
@@ -117,12 +117,12 @@ export function TechTreeSection({ skeleton }: MaybeSkeletonComponentProps) {
               <Flex gap="1" align="center">
                 <img
                   alt="Silver"
-                  src={asset('icons/currencies/silver.webp')}
+                  src={asset("icons/currencies/silver.webp")}
                   style={{
-                    width: '1em',
-                    height: '1em',
-                    objectFit: 'contain',
-                    objectPosition: 'center',
+                    width: "1em",
+                    height: "1em",
+                    objectFit: "contain",
+                    objectPosition: "center",
                   }}
                 />
                 {totalCredits.toLocaleString(locale)}
@@ -139,15 +139,15 @@ export function TechTreeSection({ skeleton }: MaybeSkeletonComponentProps) {
               <Flex
                 key={multiplier}
                 style={{
-                  background: 'url(/assets/images/icons/xp-multiplier.png)',
-                  backgroundSize: 'contain',
-                  backgroundRepeat: 'no-repeat',
-                  backgroundPosition: 'center',
+                  background: "url(/assets/images/icons/xp-multiplier.png)",
+                  backgroundSize: "contain",
+                  backgroundRepeat: "no-repeat",
+                  backgroundPosition: "center",
                   opacity: selected ? 1 : 0.5,
-                  cursor: 'pointer',
+                  cursor: "pointer",
                 }}
                 onClick={() => {
-                  TankopediaEphemeral.mutate((draft) => {
+                  Tankopedia.mutate((draft) => {
                     draft.xpMultiplier = multiplier;
                   });
                 }}