TresAbhi/blitzkit
1
0 Fork 0
mirror of https://github.com/blitzkit/blitzkit.git synced 2026-10-23 19:49:50 +02:00
Code Issues Packages Projects Releases Wiki Activity

update embed and fix varuna bug

Browse Source
This commit is contained in:
tresabhi committed 2026-08-05 13:13:48 -05:00
1 parent d2041d0ee6
commit 645cfacecb
8 files changed
+81 -69
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/website/src/components/Embeds/PreviewWrapper.tsx
+13 -10
View File
@@ -1,7 +1,7 @@
import { Box } from '@radix-ui/themes'; import { Box } from "@radix-ui/themes";
import { useEffect, useRef } from 'react'; import { useEffect, useRef } from "react";
import { embedPreviews } from '../../constants/embeds'; import { embedPreviews } from "../../constants/embeds";
import { useEmbedStateCurry } from '../../stores/embedState/utilities'; import { useEmbedStateCurry } from "../../stores/embedState/utilities";
interface PreviewWrapperProps { interface PreviewWrapperProps {
name: keyof typeof embedPreviews; name: keyof typeof embedPreviews;
@@ -10,17 +10,20 @@ interface PreviewWrapperProps {
export function PreviewWrapper({ name, naked }: PreviewWrapperProps) { export function PreviewWrapper({ name, naked }: PreviewWrapperProps) {
const { useEmbedState } = useEmbedStateCurry(); const { useEmbedState } = useEmbedStateCurry();
const width = useEmbedState('width');
const height = useEmbedState('height'); const width = useEmbedState("width");
const height = useEmbedState("height");
const Preview = embedPreviews[name]; const Preview = embedPreviews[name];
const wrapper = useRef<HTMLDivElement>(null); const wrapper = useRef<HTMLDivElement>(null);
useEffect(() => { useEffect(() => {
if (!wrapper.current) return; if (!wrapper.current) return;
wrapper.current.classList.remove('preview-container-animated'); wrapper.current.classList.remove("preview-container-animated");
void wrapper.current.offsetWidth; void wrapper.current.offsetWidth;
wrapper.current.classList.add('preview-container-animated'); wrapper.current.classList.add("preview-container-animated");
}, [width, height]); }, [width, height]);
if (naked) { if (naked) {
@@ -29,7 +32,7 @@ export function PreviewWrapper({ name, naked }: PreviewWrapperProps) {
position="absolute" position="absolute"
top="0" top="0"
left="50%" left="50%"
style={{ transform: 'translate(-50%, 0) scale(0.75)' }} style={{ transform: "translate(-50%, 0) scale(0.75)" }}
width={`${width}px`} width={`${width}px`}
height={`${height}px`} height={`${height}px`}
> >
@@ -44,7 +47,7 @@ export function PreviewWrapper({ name, naked }: PreviewWrapperProps) {
top="50%" top="50%"
left="50%" left="50%"
overflow="hidden" overflow="hidden"
style={{ transform: naked ? 'scale(0.25)' : 'translate(-50%, -50%)' }} style={{ transform: naked ? "scale(0.25)" : "translate(-50%, -50%)" }}
ref={wrapper} ref={wrapper}
className="preview-container-animated" className="preview-container-animated"
width={`${width}px`} width={`${width}px`}
packages/website/src/components/Embeds/breakdown.tsx
+3 -2
View File
@@ -14,7 +14,7 @@ import { ContextMenu } from "@radix-ui/themes";
import { useEffect, useMemo, useState } from "react"; import { useEffect, useMemo, useState } from "react";
import { breakdownConfig } from "../../constants/embeds"; import { breakdownConfig } from "../../constants/embeds";
import { awaitableAverageDefinitions } from "../../core/awaitables/averageDefinitions"; import { awaitableAverageDefinitions } from "../../core/awaitables/averageDefinitions";
import { awaitableTankDefinitions } from "../../core/awaitables/tankDefinitions"; import { api } from "../../core/blitzkit/api";
import { EmbedBreakdown } from "../../stores/embedBreakdown"; import { EmbedBreakdown } from "../../stores/embedBreakdown";
import { useEmbedStateCurry } from "../../stores/embedState/utilities"; import { useEmbedStateCurry } from "../../stores/embedState/utilities";
import { BreakdownEmbedCard, BreakdownEmbedWrapper } from "../TanksEmbed"; import { BreakdownEmbedCard, BreakdownEmbedWrapper } from "../TanksEmbed";
@@ -30,7 +30,8 @@ export const compositeStatsKeysOptions = compositeStatsKeys.map((value) => ({
})); }));
const [tankDefinitions, averageDefinitions] = await Promise.all([ const [tankDefinitions, averageDefinitions] = await Promise.all([
awaitableTankDefinitions, api.tankDefinitions(),
awaitableAverageDefinitions, awaitableAverageDefinitions,
]); ]);
packages/website/src/constants/embeds.ts
+23 -22
View File
@@ -1,16 +1,16 @@
import { type CompositeStatsKey } from '@blitzkit/core'; import { type CompositeStatsKey } from "@blitzkit/core";
import { grayA, grayDark, grayDarkA } from '@radix-ui/colors'; import { grayA, grayDark, grayDarkA } from "@radix-ui/colors";
import type { ReactNode } from 'react'; import type { ReactNode } from "react";
import { import {
BreakdownPreview, BreakdownPreview,
BreakdownRenderer, BreakdownRenderer,
compositeStatsKeysOptions, compositeStatsKeysOptions,
} from '../components/Embeds/breakdown'; } from "../components/Embeds/breakdown";
import type { import type {
EmbedConfig, EmbedConfig,
ExtractEmbedConfigTypes, ExtractEmbedConfigTypes,
} from '../stores/embedState'; } from "../stores/embedState";
import { EmbedItemType } from '../stores/embedState/constants'; import { EmbedItemType } from "../stores/embedState/constants";
export const breakdownConfig = { export const breakdownConfig = {
width: { type: EmbedItemType.Slider, default: 320, min: 128, max: 640 }, 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 }, showTotal: { type: EmbedItemType.Boolean, default: true, pad: true },
listGap: { type: EmbedItemType.Size, default: '2' }, listGap: { type: EmbedItemType.Size, default: "2" },
listMaxTanks: { listMaxTanks: {
type: EmbedItemType.Slider, type: EmbedItemType.Slider,
default: 4, default: 4,
@@ -27,15 +27,15 @@ export const breakdownConfig = {
pad: true, pad: true,
}, },
cardRadius: { type: EmbedItemType.Radius, default: '2' }, cardRadius: { type: EmbedItemType.Radius, default: "2" },
cardHeaderBackgroundColor: { cardHeaderBackgroundColor: {
type: EmbedItemType.Color, type: EmbedItemType.Color,
default: grayDarkA.grayA3, default: grayDarkA.grayA3,
}, },
cardHeaderPadding: { type: EmbedItemType.Size, default: '1' }, cardHeaderPadding: { type: EmbedItemType.Size, default: "1" },
cardTitle: { cardTitle: {
type: EmbedItemType.RichText, 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 }, cardTitleTypeColor: { type: EmbedItemType.Boolean, default: true },
cardTitleClassIcon: { type: EmbedItemType.Boolean, default: true }, cardTitleClassIcon: { type: EmbedItemType.Boolean, default: true },
@@ -45,45 +45,45 @@ export const breakdownConfig = {
}, },
cardBodyPadding: { cardBodyPadding: {
type: EmbedItemType.Size, type: EmbedItemType.Size,
default: '2', default: "2",
pad: true, pad: true,
}, },
columnGap: { type: EmbedItemType.Size, default: '0' }, columnGap: { type: EmbedItemType.Size, default: "0" },
columnValue: { columnValue: {
type: EmbedItemType.RichText, type: EmbedItemType.RichText,
default: { color: grayDark.gray12, size: '3', weight: 'regular' }, default: { color: grayDark.gray12, size: "3", weight: "regular" },
}, },
columnLabel: { columnLabel: {
type: EmbedItemType.RichText, type: EmbedItemType.RichText,
default: { color: grayDark.gray11, size: '2', weight: 'regular' }, default: { color: grayDark.gray11, size: "2", weight: "regular" },
pad: true, pad: true,
}, },
column1: { column1: {
type: EmbedItemType.Enum, type: EmbedItemType.Enum,
default: 'cumulative_battles' satisfies CompositeStatsKey, default: "cumulative_battles" satisfies CompositeStatsKey,
options: compositeStatsKeysOptions, options: compositeStatsKeysOptions,
}, },
column2: { column2: {
type: EmbedItemType.Enum, type: EmbedItemType.Enum,
default: 'normalized_wins' satisfies CompositeStatsKey, default: "normalized_wins" satisfies CompositeStatsKey,
options: compositeStatsKeysOptions, options: compositeStatsKeysOptions,
}, },
column3: { column3: {
type: EmbedItemType.Enum, type: EmbedItemType.Enum,
default: 'cumulative_wn8' satisfies CompositeStatsKey, default: "cumulative_wn8" satisfies CompositeStatsKey,
options: compositeStatsKeysOptions, options: compositeStatsKeysOptions,
}, },
column4: { column4: {
type: EmbedItemType.Enum, type: EmbedItemType.Enum,
default: 'normalized_damage_dealt' satisfies CompositeStatsKey, default: "normalized_damage_dealt" satisfies CompositeStatsKey,
options: compositeStatsKeysOptions, options: compositeStatsKeysOptions,
}, },
column1CustomLabel: { type: EmbedItemType.String, default: '' }, column1CustomLabel: { type: EmbedItemType.String, default: "" },
column2CustomLabel: { type: EmbedItemType.String, default: '' }, column2CustomLabel: { type: EmbedItemType.String, default: "" },
column3CustomLabel: { type: EmbedItemType.String, default: '' }, column3CustomLabel: { type: EmbedItemType.String, default: "" },
column4CustomLabel: { type: EmbedItemType.String, default: '' }, column4CustomLabel: { type: EmbedItemType.String, default: "" },
} satisfies EmbedConfig; } satisfies EmbedConfig;
export const embedConfigurations = { export const embedConfigurations = {
@@ -93,6 +93,7 @@ export const embedConfigurations = {
export const embedPreviews = { export const embedPreviews = {
breakdown: BreakdownPreview, breakdown: BreakdownPreview,
} satisfies Record<string, () => ReactNode>; } satisfies Record<string, () => ReactNode>;
export function extractEmbedConfigDefaults<Config extends EmbedConfig>( export function extractEmbedConfigDefaults<Config extends EmbedConfig>(
config: Config, config: Config,
) { ) {
packages/website/src/pages/[...chunk_default]/[...locale]/embed/[embed]/_index.tsx
+20 -20
View File
@@ -8,32 +8,32 @@ import {
} from "@radix-ui/react-icons"; } from "@radix-ui/react-icons";
import { Box, Button, Flex, Heading, ScrollArea, Text } from "@radix-ui/themes"; import { Box, Button, Flex, Heading, ScrollArea, Text } from "@radix-ui/themes";
import { useEffect, useRef, useState, type ReactNode } from "react"; import { useEffect, useRef, useState, type ReactNode } from "react";
import { CopyButton } from "../../../../components/CopyButton"; import { CopyButton } from "../../../../../components/CopyButton";
import { Boolean } from "../../../../components/Embeds/Boolean"; import { Boolean } from "../../../../../components/Embeds/Boolean";
import { Color } from "../../../../components/Embeds/Color"; import { Color } from "../../../../../components/Embeds/Color";
import { Enum } from "../../../../components/Embeds/Enum"; import { Enum } from "../../../../../components/Embeds/Enum";
import { GenerateURL } from "../../../../components/Embeds/GenerateURL"; import { GenerateURL } from "../../../../../components/Embeds/GenerateURL";
import { Import } from "../../../../components/Embeds/Import"; import { Import } from "../../../../../components/Embeds/Import";
import { PreviewWrapper } from "../../../../components/Embeds/PreviewWrapper"; import { PreviewWrapper } from "../../../../../components/Embeds/PreviewWrapper";
import { Radius } from "../../../../components/Embeds/Radius"; import { Radius } from "../../../../../components/Embeds/Radius";
import { RichText } from "../../../../components/Embeds/RichText"; import { RichText } from "../../../../../components/Embeds/RichText";
import { Size } from "../../../../components/Embeds/Size"; import { Size } from "../../../../../components/Embeds/Size";
import { SizeWithout0 } from "../../../../components/Embeds/SizeWithout0"; import { SizeWithout0 } from "../../../../../components/Embeds/SizeWithout0";
import { Slider } from "../../../../components/Embeds/Slider"; import { Slider } from "../../../../../components/Embeds/Slider";
import { TextController } from "../../../../components/Embeds/TextController"; import { TextController } from "../../../../../components/Embeds/TextController";
import { PageWrapper } from "../../../../components/PageWrapper"; import { PageWrapper } from "../../../../../components/PageWrapper";
import { import {
embedConfigurations, embedConfigurations,
extractEmbedConfigDefaults, extractEmbedConfigDefaults,
} from "../../../../constants/embeds"; } from "../../../../../constants/embeds";
import { NAVBAR_HEIGHT } from "../../../../constants/navbar"; import { NAVBAR_HEIGHT } from "../../../../../constants/navbar";
import { import {
LocaleProvider, LocaleProvider,
useLocale, useLocale,
type LocaleAcceptorProps, type LocaleAcceptorProps,
} from "../../../../hooks/useLocale"; } from "../../../../../hooks/useLocale";
import { EmbedState, type EmbedConfig } from "../../../../stores/embedState"; import { EmbedState, type EmbedConfig } from "../../../../../stores/embedState";
import { EmbedItemType } from "../../../../stores/embedState/constants"; import { EmbedItemType } from "../../../../../stores/embedState/constants";
export interface EmbedPreviewControllerProps { export interface EmbedPreviewControllerProps {
configKey: string; configKey: string;
@@ -58,7 +58,7 @@ export function Page({ embed, locale }: PageProps & LocaleAcceptorProps) {
function Content({ embed }: PageProps) { function Content({ embed }: PageProps) {
const config = embedConfigurations[embed] as EmbedConfig; const config = embedConfigurations[embed] as EmbedConfig;
const [backgroundImage, setBackgroundImage] = useState( const [backgroundImage, setBackgroundImage] = useState(
"/assets/images/backgrounds/embed-default.webp" "/assets/images/backgrounds/embed-default.webp",
); );
const fileInput = useRef<HTMLInputElement>(null!); const fileInput = useRef<HTMLInputElement>(null!);
const { strings } = useLocale(); const { strings } = useLocale();
packages/website/src/pages/[...chunk_default]/[...locale]/embed/[embed]/index.astro
+3 -3
View File
@@ -2,8 +2,8 @@
import { AstroSeo } from "@astrolib/seo"; import { AstroSeo } from "@astrolib/seo";
import type { GetStaticPaths } from "astro"; import type { GetStaticPaths } from "astro";
import { capitalize } from "lodash-es"; import { capitalize } from "lodash-es";
import { embedConfigurations } from "../../../../constants/embeds"; import { embedConfigurations } from "../../../../../constants/embeds";
import BaseLayout from "../../../../layouts/BaseLayout.astro"; import BaseLayout from "../../../../../layouts/BaseLayout.astro";
import { getStaticPaths as parentGetStaticPaths } from "../index.astro"; import { getStaticPaths as parentGetStaticPaths } from "../index.astro";
import { Page } from "./_index"; import { Page } from "./_index";
@@ -17,7 +17,7 @@ export const getStaticPaths = (() => {
...parent.params, ...parent.params,
embed: embed as keyof typeof embedConfigurations, embed: embed as keyof typeof embedConfigurations,
}, },
})) })),
) )
.flat(); .flat();
}) satisfies GetStaticPaths; }) satisfies GetStaticPaths;
packages/website/src/pages/[...chunk_default]/[...locale]/embed/_index.tsx
+6 -6
View File
@@ -1,14 +1,14 @@
import { Box, Flex, Link, Text } from "@radix-ui/themes"; import { Box, Flex, Link, Text } from "@radix-ui/themes";
import { PreviewWrapper } from "../../../components/Embeds/PreviewWrapper"; import { PreviewWrapper } from "../../../../components/Embeds/PreviewWrapper";
import { LinkI18n } from "../../../components/LinkI18n"; import { LinkI18n } from "../../../../components/LinkI18n";
import { PageWrapper } from "../../../components/PageWrapper"; import { PageWrapper } from "../../../../components/PageWrapper";
import { embedConfigurations } from "../../../constants/embeds"; import { embedConfigurations } from "../../../../constants/embeds";
import { Var } from "../../../core/radix/var"; import { Var } from "../../../../core/radix/var";
import { import {
type LocaleAcceptorProps, type LocaleAcceptorProps,
LocaleProvider, LocaleProvider,
useLocale, useLocale,
} from "../../../hooks/useLocale"; } from "../../../../hooks/useLocale";
export function Page({ locale }: LocaleAcceptorProps) { export function Page({ locale }: LocaleAcceptorProps) {
return ( return (
packages/website/src/pages/[...chunk_default]/[...locale]/embed/index.astro
+2 -2
View File
@@ -1,6 +1,6 @@
--- ---
import { tools } from "../../../constants/tools"; import { tools } from "../../../../constants/tools";
import ToolLayout from "../../../layouts/ToolLayout.astro"; import ToolLayout from "../../../../layouts/ToolLayout.astro";
import { Page } from "./_index"; import { Page } from "./_index";
export { getStaticPaths } from "../index.astro"; export { getStaticPaths } from "../index.astro";
packages/website/src/stores/embedState/utilities.ts
+11 -4
View File
@@ -1,8 +1,15 @@
import type { TextProps } from '@radix-ui/themes'; import type { TextProps } from "@radix-ui/themes";
import { EmbedState, type EmbedConfig, type ExtractEmbedConfigTypes } from '.'; import { EmbedState, type EmbedConfig, type ExtractEmbedConfigTypes } from ".";
import type { EmbedConfigItemType, EmbedItemType } from './constants'; import {
breakdownConfig,
extractEmbedConfigDefaults,
} from "../../constants/embeds";
import type { EmbedConfigItemType, EmbedItemType } from "./constants";
export function useEmbedStateCurry<Config extends EmbedConfig>() { 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) { function useEmbedState<Key extends keyof Config>(key: Key) {
return EmbedState.use((state) => { return EmbedState.use((state) => {
return (state as ExtractEmbedConfigTypes<Config>)[key]; return (state as ExtractEmbedConfigTypes<Config>)[key];
@@ -18,7 +25,7 @@ export function useEmbedStateCurry<Config extends EmbedConfig>() {
>(key: Key) { >(key: Key) {
const { color, ...state } = useEmbedState( const { color, ...state } = useEmbedState(
key, key,
) as EmbedConfigItemType<EmbedItemType.RichText>['default']; ) as EmbedConfigItemType<EmbedItemType.RichText>["default"];
return { return {
style: { color }, style: { color },