update embed and fix varuna bug

packages/website/src/components/Embeds/PreviewWrapper.tsx

@@ -1,7 +1,7 @@
-import { Box } from '@radix-ui/themes';
-import { useEffect, useRef } from 'react';
-import { embedPreviews } from '../../constants/embeds';
-import { useEmbedStateCurry } from '../../stores/embedState/utilities';
+import { Box } from "@radix-ui/themes";
+import { useEffect, useRef } from "react";
+import { embedPreviews } from "../../constants/embeds";
+import { useEmbedStateCurry } from "../../stores/embedState/utilities";
 
 interface PreviewWrapperProps {
   name: keyof typeof embedPreviews;
@@ -10,17 +10,20 @@ interface PreviewWrapperProps {
 
 export function PreviewWrapper({ name, naked }: PreviewWrapperProps) {
   const { useEmbedState } = useEmbedStateCurry();
-  const width = useEmbedState('width');
-  const height = useEmbedState('height');
+
+  const width = useEmbedState("width");
+  const height = useEmbedState("height");
+
   const Preview = embedPreviews[name];
+
   const wrapper = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     if (!wrapper.current) return;
 
-    wrapper.current.classList.remove('preview-container-animated');
+    wrapper.current.classList.remove("preview-container-animated");
     void wrapper.current.offsetWidth;
-    wrapper.current.classList.add('preview-container-animated');
+    wrapper.current.classList.add("preview-container-animated");
   }, [width, height]);
 
   if (naked) {
@@ -29,7 +32,7 @@ export function PreviewWrapper({ name, naked }: PreviewWrapperProps) {
         position="absolute"
         top="0"
         left="50%"
-        style={{ transform: 'translate(-50%, 0) scale(0.75)' }}
+        style={{ transform: "translate(-50%, 0) scale(0.75)" }}
         width={`${width}px`}
         height={`${height}px`}
       >
@@ -44,7 +47,7 @@ export function PreviewWrapper({ name, naked }: PreviewWrapperProps) {
       top="50%"
       left="50%"
       overflow="hidden"
-      style={{ transform: naked ? 'scale(0.25)' : 'translate(-50%, -50%)' }}
+      style={{ transform: naked ? "scale(0.25)" : "translate(-50%, -50%)" }}
       ref={wrapper}
       className="preview-container-animated"
       width={`${width}px`}

packages/website/src/components/Embeds/breakdown.tsx

@@ -14,7 +14,7 @@ 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 { api } from "../../core/blitzkit/api";
 import { EmbedBreakdown } from "../../stores/embedBreakdown";
 import { useEmbedStateCurry } from "../../stores/embedState/utilities";
 import { BreakdownEmbedCard, BreakdownEmbedWrapper } from "../TanksEmbed";
@@ -30,7 +30,8 @@ export const compositeStatsKeysOptions = compositeStatsKeys.map((value) => ({
 }));
 
 const [tankDefinitions, averageDefinitions] = await Promise.all([
-  awaitableTankDefinitions,
+  api.tankDefinitions(),
+
   awaitableAverageDefinitions,
 ]);
 

packages/website/src/constants/embeds.ts

@@ -1,16 +1,16 @@
-import { type CompositeStatsKey } from '@blitzkit/core';
-import { grayA, grayDark, grayDarkA } from '@radix-ui/colors';
-import type { ReactNode } from 'react';
+import { type CompositeStatsKey } from "@blitzkit/core";
+import { grayA, grayDark, grayDarkA } from "@radix-ui/colors";
+import type { ReactNode } from "react";
 import {
   BreakdownPreview,
   BreakdownRenderer,
   compositeStatsKeysOptions,
-} from '../components/Embeds/breakdown';
+} from "../components/Embeds/breakdown";
 import type {
   EmbedConfig,
   ExtractEmbedConfigTypes,
-} from '../stores/embedState';
-import { EmbedItemType } from '../stores/embedState/constants';
+} from "../stores/embedState";
+import { EmbedItemType } from "../stores/embedState/constants";
 
 export const breakdownConfig = {
   width: { type: EmbedItemType.Slider, default: 320, min: 128, max: 640 },
@@ -18,7 +18,7 @@ export const breakdownConfig = {
 
   showTotal: { type: EmbedItemType.Boolean, default: true, pad: true },
 
-  listGap: { type: EmbedItemType.Size, default: '2' },
+  listGap: { type: EmbedItemType.Size, default: "2" },
   listMaxTanks: {
     type: EmbedItemType.Slider,
     default: 4,
@@ -27,15 +27,15 @@ export const breakdownConfig = {
     pad: true,
   },
 
-  cardRadius: { type: EmbedItemType.Radius, default: '2' },
+  cardRadius: { type: EmbedItemType.Radius, default: "2" },
   cardHeaderBackgroundColor: {
     type: EmbedItemType.Color,
     default: grayDarkA.grayA3,
   },
-  cardHeaderPadding: { type: EmbedItemType.Size, default: '1' },
+  cardHeaderPadding: { type: EmbedItemType.Size, default: "1" },
   cardTitle: {
     type: EmbedItemType.RichText,
-    default: { color: grayDark.gray12, weight: 'bold', size: '3' },
+    default: { color: grayDark.gray12, weight: "bold", size: "3" },
   },
   cardTitleTypeColor: { type: EmbedItemType.Boolean, default: true },
   cardTitleClassIcon: { type: EmbedItemType.Boolean, default: true },
@@ -45,45 +45,45 @@ export const breakdownConfig = {
   },
   cardBodyPadding: {
     type: EmbedItemType.Size,
-    default: '2',
+    default: "2",
     pad: true,
   },
 
-  columnGap: { type: EmbedItemType.Size, default: '0' },
+  columnGap: { type: EmbedItemType.Size, default: "0" },
   columnValue: {
     type: EmbedItemType.RichText,
-    default: { color: grayDark.gray12, size: '3', weight: 'regular' },
+    default: { color: grayDark.gray12, size: "3", weight: "regular" },
   },
   columnLabel: {
     type: EmbedItemType.RichText,
-    default: { color: grayDark.gray11, size: '2', weight: 'regular' },
+    default: { color: grayDark.gray11, size: "2", weight: "regular" },
     pad: true,
   },
 
   column1: {
     type: EmbedItemType.Enum,
-    default: 'cumulative_battles' satisfies CompositeStatsKey,
+    default: "cumulative_battles" satisfies CompositeStatsKey,
     options: compositeStatsKeysOptions,
   },
   column2: {
     type: EmbedItemType.Enum,
-    default: 'normalized_wins' satisfies CompositeStatsKey,
+    default: "normalized_wins" satisfies CompositeStatsKey,
     options: compositeStatsKeysOptions,
   },
   column3: {
     type: EmbedItemType.Enum,
-    default: 'cumulative_wn8' satisfies CompositeStatsKey,
+    default: "cumulative_wn8" satisfies CompositeStatsKey,
     options: compositeStatsKeysOptions,
   },
   column4: {
     type: EmbedItemType.Enum,
-    default: 'normalized_damage_dealt' satisfies CompositeStatsKey,
+    default: "normalized_damage_dealt" satisfies CompositeStatsKey,
     options: compositeStatsKeysOptions,
   },
-  column1CustomLabel: { type: EmbedItemType.String, default: '' },
-  column2CustomLabel: { type: EmbedItemType.String, default: '' },
-  column3CustomLabel: { type: EmbedItemType.String, default: '' },
-  column4CustomLabel: { type: EmbedItemType.String, default: '' },
+  column1CustomLabel: { type: EmbedItemType.String, default: "" },
+  column2CustomLabel: { type: EmbedItemType.String, default: "" },
+  column3CustomLabel: { type: EmbedItemType.String, default: "" },
+  column4CustomLabel: { type: EmbedItemType.String, default: "" },
 } satisfies EmbedConfig;
 
 export const embedConfigurations = {
@@ -93,6 +93,7 @@ export const embedConfigurations = {
 export const embedPreviews = {
   breakdown: BreakdownPreview,
 } satisfies Record<string, () => ReactNode>;
+
 export function extractEmbedConfigDefaults<Config extends EmbedConfig>(
   config: Config,
 ) {

packages/website/src/pages/[...chunk_default]/[...locale]/embed/[embed]/_index.tsx

@@ -8,32 +8,32 @@ import {
 } from "@radix-ui/react-icons";
 import { Box, Button, Flex, Heading, ScrollArea, Text } from "@radix-ui/themes";
 import { useEffect, useRef, useState, type ReactNode } from "react";
-import { CopyButton } from "../../../../components/CopyButton";
-import { Boolean } from "../../../../components/Embeds/Boolean";
-import { Color } from "../../../../components/Embeds/Color";
-import { Enum } from "../../../../components/Embeds/Enum";
-import { GenerateURL } from "../../../../components/Embeds/GenerateURL";
-import { Import } from "../../../../components/Embeds/Import";
-import { PreviewWrapper } from "../../../../components/Embeds/PreviewWrapper";
-import { Radius } from "../../../../components/Embeds/Radius";
-import { RichText } from "../../../../components/Embeds/RichText";
-import { Size } from "../../../../components/Embeds/Size";
-import { SizeWithout0 } from "../../../../components/Embeds/SizeWithout0";
-import { Slider } from "../../../../components/Embeds/Slider";
-import { TextController } from "../../../../components/Embeds/TextController";
-import { PageWrapper } from "../../../../components/PageWrapper";
+import { CopyButton } from "../../../../../components/CopyButton";
+import { Boolean } from "../../../../../components/Embeds/Boolean";
+import { Color } from "../../../../../components/Embeds/Color";
+import { Enum } from "../../../../../components/Embeds/Enum";
+import { GenerateURL } from "../../../../../components/Embeds/GenerateURL";
+import { Import } from "../../../../../components/Embeds/Import";
+import { PreviewWrapper } from "../../../../../components/Embeds/PreviewWrapper";
+import { Radius } from "../../../../../components/Embeds/Radius";
+import { RichText } from "../../../../../components/Embeds/RichText";
+import { Size } from "../../../../../components/Embeds/Size";
+import { SizeWithout0 } from "../../../../../components/Embeds/SizeWithout0";
+import { Slider } from "../../../../../components/Embeds/Slider";
+import { TextController } from "../../../../../components/Embeds/TextController";
+import { PageWrapper } from "../../../../../components/PageWrapper";
 import {
   embedConfigurations,
   extractEmbedConfigDefaults,
-} from "../../../../constants/embeds";
-import { NAVBAR_HEIGHT } from "../../../../constants/navbar";
+} from "../../../../../constants/embeds";
+import { NAVBAR_HEIGHT } from "../../../../../constants/navbar";
 import {
   LocaleProvider,
   useLocale,
   type LocaleAcceptorProps,
-} from "../../../../hooks/useLocale";
-import { EmbedState, type EmbedConfig } from "../../../../stores/embedState";
-import { EmbedItemType } from "../../../../stores/embedState/constants";
+} from "../../../../../hooks/useLocale";
+import { EmbedState, type EmbedConfig } from "../../../../../stores/embedState";
+import { EmbedItemType } from "../../../../../stores/embedState/constants";
 
 export interface EmbedPreviewControllerProps {
   configKey: string;
@@ -58,7 +58,7 @@ export function Page({ embed, locale }: PageProps & LocaleAcceptorProps) {
 function Content({ embed }: PageProps) {
   const config = embedConfigurations[embed] as EmbedConfig;
   const [backgroundImage, setBackgroundImage] = useState(
-    "/assets/images/backgrounds/embed-default.webp"
+    "/assets/images/backgrounds/embed-default.webp",
   );
   const fileInput = useRef<HTMLInputElement>(null!);
   const { strings } = useLocale();

packages/website/src/pages/[...chunk_default]/[...locale]/embed/[embed]/index.astro

@@ -2,8 +2,8 @@
 import { AstroSeo } from "@astrolib/seo";
 import type { GetStaticPaths } from "astro";
 import { capitalize } from "lodash-es";
-import { embedConfigurations } from "../../../../constants/embeds";
-import BaseLayout from "../../../../layouts/BaseLayout.astro";
+import { embedConfigurations } from "../../../../../constants/embeds";
+import BaseLayout from "../../../../../layouts/BaseLayout.astro";
 import { getStaticPaths as parentGetStaticPaths } from "../index.astro";
 import { Page } from "./_index";
 
@@ -17,7 +17,7 @@ export const getStaticPaths = (() => {
           ...parent.params,
           embed: embed as keyof typeof embedConfigurations,
         },
-      }))
+      })),
     )
     .flat();
 }) satisfies GetStaticPaths;

packages/website/src/pages/[...chunk_default]/[...locale]/embed/_index.tsx

@@ -1,14 +1,14 @@
 import { Box, Flex, Link, Text } from "@radix-ui/themes";
-import { PreviewWrapper } from "../../../components/Embeds/PreviewWrapper";
-import { LinkI18n } from "../../../components/LinkI18n";
-import { PageWrapper } from "../../../components/PageWrapper";
-import { embedConfigurations } from "../../../constants/embeds";
-import { Var } from "../../../core/radix/var";
+import { PreviewWrapper } from "../../../../components/Embeds/PreviewWrapper";
+import { LinkI18n } from "../../../../components/LinkI18n";
+import { PageWrapper } from "../../../../components/PageWrapper";
+import { embedConfigurations } from "../../../../constants/embeds";
+import { Var } from "../../../../core/radix/var";
 import {
   type LocaleAcceptorProps,
   LocaleProvider,
   useLocale,
-} from "../../../hooks/useLocale";
+} from "../../../../hooks/useLocale";
 
 export function Page({ locale }: LocaleAcceptorProps) {
   return (

packages/website/src/pages/[...chunk_default]/[...locale]/embed/index.astro

@@ -1,6 +1,6 @@
 ---
-import { tools } from "../../../constants/tools";
-import ToolLayout from "../../../layouts/ToolLayout.astro";
+import { tools } from "../../../../constants/tools";
+import ToolLayout from "../../../../layouts/ToolLayout.astro";
 import { Page } from "./_index";
 
 export { getStaticPaths } from "../index.astro";

packages/website/src/stores/embedState/utilities.ts

@@ -1,8 +1,15 @@
-import type { TextProps } from '@radix-ui/themes';
-import { EmbedState, type EmbedConfig, type ExtractEmbedConfigTypes } from '.';
-import type { EmbedConfigItemType, EmbedItemType } from './constants';
+import type { TextProps } from "@radix-ui/themes";
+import { EmbedState, type EmbedConfig, type ExtractEmbedConfigTypes } from ".";
+import {
+  breakdownConfig,
+  extractEmbedConfigDefaults,
+} from "../../constants/embeds";
+import type { EmbedConfigItemType, EmbedItemType } from "./constants";
 
 export function useEmbedStateCurry<Config extends EmbedConfig>() {
+  // TODO: find a way to initialize with the correct state preset
+  EmbedState.useInitialization(extractEmbedConfigDefaults(breakdownConfig));
+
   function useEmbedState<Key extends keyof Config>(key: Key) {
     return EmbedState.use((state) => {
       return (state as ExtractEmbedConfigTypes<Config>)[key];
@@ -18,7 +25,7 @@ export function useEmbedStateCurry<Config extends EmbedConfig>() {
   >(key: Key) {
     const { color, ...state } = useEmbedState(
       key,
-    ) as EmbedConfigItemType<EmbedItemType.RichText>['default'];
+    ) as EmbedConfigItemType<EmbedItemType.RichText>["default"];
 
     return {
       style: { color },