From 645cfacecb489e4fe3a6ad9d9f56697775941ef4 Mon Sep 17 00:00:00 2001 From: tresabhi <43380238+tresabhi@users.noreply.github.com> Date: Wed, 5 Aug 2026 13:13:48 -0500 Subject: [PATCH] update embed and fix varuna bug --- .../src/components/Embeds/PreviewWrapper.tsx | 23 +++++----- .../src/components/Embeds/breakdown.tsx | 5 ++- packages/website/src/constants/embeds.ts | 45 ++++++++++--------- .../[...locale]/embed/[embed]/_index.tsx | 40 ++++++++--------- .../[...locale]/embed/[embed]/index.astro | 6 +-- .../[...locale]/embed/_index.tsx | 12 ++--- .../[...locale]/embed/index.astro | 4 +- .../src/stores/embedState/utilities.ts | 15 +++++-- 8 files changed, 81 insertions(+), 69 deletions(-) diff --git a/packages/website/src/components/Embeds/PreviewWrapper.tsx b/packages/website/src/components/Embeds/PreviewWrapper.tsx index 1c0f02772..a60486ec5 100644 --- a/packages/website/src/components/Embeds/PreviewWrapper.tsx +++ b/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(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`} diff --git a/packages/website/src/components/Embeds/breakdown.tsx b/packages/website/src/components/Embeds/breakdown.tsx index 662762432..2b7340eb4 100644 --- a/packages/website/src/components/Embeds/breakdown.tsx +++ b/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, ]); diff --git a/packages/website/src/constants/embeds.ts b/packages/website/src/constants/embeds.ts index 8284acea7..2194bee65 100644 --- a/packages/website/src/constants/embeds.ts +++ b/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 ReactNode>; + export function extractEmbedConfigDefaults( config: Config, ) { diff --git a/packages/website/src/pages/[...chunk_default]/[...locale]/embed/[embed]/_index.tsx b/packages/website/src/pages/[...chunk_default]/[...locale]/embed/[embed]/_index.tsx index d1f6ca7c7..416514749 100644 --- a/packages/website/src/pages/[...chunk_default]/[...locale]/embed/[embed]/_index.tsx +++ b/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(null!); const { strings } = useLocale(); diff --git a/packages/website/src/pages/[...chunk_default]/[...locale]/embed/[embed]/index.astro b/packages/website/src/pages/[...chunk_default]/[...locale]/embed/[embed]/index.astro index 85c9e5c26..d53acc9bf 100644 --- a/packages/website/src/pages/[...chunk_default]/[...locale]/embed/[embed]/index.astro +++ b/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; diff --git a/packages/website/src/pages/[...chunk_default]/[...locale]/embed/_index.tsx b/packages/website/src/pages/[...chunk_default]/[...locale]/embed/_index.tsx index 73f504434..54a307810 100644 --- a/packages/website/src/pages/[...chunk_default]/[...locale]/embed/_index.tsx +++ b/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 ( diff --git a/packages/website/src/pages/[...chunk_default]/[...locale]/embed/index.astro b/packages/website/src/pages/[...chunk_default]/[...locale]/embed/index.astro index 13ff94238..674665781 100644 --- a/packages/website/src/pages/[...chunk_default]/[...locale]/embed/index.astro +++ b/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"; diff --git a/packages/website/src/stores/embedState/utilities.ts b/packages/website/src/stores/embedState/utilities.ts index adb92cb80..1889e8819 100644 --- a/packages/website/src/stores/embedState/utilities.ts +++ b/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() { + // TODO: find a way to initialize with the correct state preset + EmbedState.useInitialization(extractEmbedConfigDefaults(breakdownConfig)); + function useEmbedState(key: Key) { return EmbedState.use((state) => { return (state as ExtractEmbedConfigTypes)[key]; @@ -18,7 +25,7 @@ export function useEmbedStateCurry() { >(key: Key) { const { color, ...state } = useEmbedState( key, - ) as EmbedConfigItemType['default']; + ) as EmbedConfigItemType["default"]; return { style: { color },