TresAbhi/blitzkit
1
0 Fork 0
mirror of https://github.com/blitzkit/blitzkit.git synced 2026-10-21 10:47:04 +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 { 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
+3 -2
View File
@@ -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
+23 -22
View File
@@ -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
+20 -20
View File
@@ -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
+3 -3
View File
@@ -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
+6 -6
View File
@@ -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
+2 -2
View File
@@ -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
+11 -4
View File
@@ -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 },