From 887d3079df12ad03654b34d2264e8dc25c10b6d5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com> Date: Sun, 8 Sep 2024 21:52:12 -0500 Subject: [PATCH] feat: isloate embed config --- .../components/PreviewWrapper/index.tsx | 2 +- .../src/app/tools/embed/[embed]/host/page.tsx | 2 +- .../src/app/tools/embed/[embed]/layout.tsx | 2 +- .../src/app/tools/embed/[embed]/page.tsx | 2 +- .../tools/embed/configurations/breakdown.tsx | 86 +----------------- .../app/tools/embed/configurations/index.ts | 11 --- .../website/src/components/TanksEmbed.tsx | 18 ++-- packages/website/src/constants/embeds.ts | 91 +++++++++++++++++++ 8 files changed, 107 insertions(+), 107 deletions(-) delete mode 100644 packages/website/src/app/tools/embed/configurations/index.ts create mode 100644 packages/website/src/constants/embeds.ts diff --git a/packages/website/src/app/tools/embed/[embed]/components/PreviewWrapper/index.tsx b/packages/website/src/app/tools/embed/[embed]/components/PreviewWrapper/index.tsx index d1d1e3976..e55e4559c 100644 --- a/packages/website/src/app/tools/embed/[embed]/components/PreviewWrapper/index.tsx +++ b/packages/website/src/app/tools/embed/[embed]/components/PreviewWrapper/index.tsx @@ -1,7 +1,7 @@ import { Box } from '@radix-ui/themes'; import { useEffect, useRef } from 'react'; +import { previews } from '../../../../../../constants/embeds'; import { useEmbedStateCurry } from '../../../../../../stores/embedState/utilities'; -import { previews } from '../../../configurations'; import * as styles from './index.css'; interface PreviewWrapperProps { diff --git a/packages/website/src/app/tools/embed/[embed]/host/page.tsx b/packages/website/src/app/tools/embed/[embed]/host/page.tsx index c30994249..9df674003 100644 --- a/packages/website/src/app/tools/embed/[embed]/host/page.tsx +++ b/packages/website/src/app/tools/embed/[embed]/host/page.tsx @@ -4,8 +4,8 @@ import { Code, Heading } from '@radix-ui/themes'; import { useSearchParams } from 'next/navigation'; import { useMemo } from 'react'; import { PageWrapper } from '../../../../../components/PageWrapper'; +import { configurations } from '../../../../../constants/embeds'; import * as EmbedState from '../../../../../stores/embedState'; -import { configurations } from '../../configurations'; import { extractEmbedConfigDefaults } from '../../utilities'; export interface EmbedPreviewControllerProps { diff --git a/packages/website/src/app/tools/embed/[embed]/layout.tsx b/packages/website/src/app/tools/embed/[embed]/layout.tsx index c66718477..8816d1ffe 100644 --- a/packages/website/src/app/tools/embed/[embed]/layout.tsx +++ b/packages/website/src/app/tools/embed/[embed]/layout.tsx @@ -1,6 +1,6 @@ import { useMemo } from 'react'; +import { configurations } from '../../../../constants/embeds'; import * as EmbedState from '../../../../stores/embedState'; -import { configurations } from '../configurations'; import { extractEmbedConfigDefaults } from '../utilities'; export function generateStaticParams() { diff --git a/packages/website/src/app/tools/embed/[embed]/page.tsx b/packages/website/src/app/tools/embed/[embed]/page.tsx index fcdca3d5f..f5940325b 100644 --- a/packages/website/src/app/tools/embed/[embed]/page.tsx +++ b/packages/website/src/app/tools/embed/[embed]/page.tsx @@ -16,11 +16,11 @@ import { ReactNode, useEffect, useRef, useState } from 'react'; import { stringify } from 'urlon'; import { CopyButton } from '../../../../components/CopyButton'; import { PageWrapper } from '../../../../components/PageWrapper'; +import { configurations } from '../../../../constants/embeds'; import * as App from '../../../../stores/app'; import * as EmbedState from '../../../../stores/embedState'; import { EmbedConfig } from '../../../../stores/embedState'; import { EmbedItemType } from '../../../../stores/embedState/constants'; -import { configurations } from '../configurations'; import { Boolean } from './components/Boolean'; import { Color } from './components/Color'; import { Enum } from './components/Enum'; diff --git a/packages/website/src/app/tools/embed/configurations/breakdown.tsx b/packages/website/src/app/tools/embed/configurations/breakdown.tsx index 75929da2f..27f248ac8 100644 --- a/packages/website/src/app/tools/embed/configurations/breakdown.tsx +++ b/packages/website/src/app/tools/embed/configurations/breakdown.tsx @@ -1,98 +1,18 @@ -import { - CompositeStatsKey, - compositeStatsKeys, - tankDefinitionsArray, -} from '@blitzkit/core'; +import { compositeStatsKeys, tankDefinitionsArray } from '@blitzkit/core'; import strings from '@blitzkit/core/lang/en-US.json'; -import { grayA, grayDark, grayDarkA } from '@radix-ui/colors'; import { use } from 'react'; import { BreakdownEmbedCard, BreakdownEmbedWrapper, } from '../../../../components/TanksEmbed'; -import { EmbedConfig } from '../../../../stores/embedState'; -import { EmbedItemType } from '../../../../stores/embedState/constants'; +import { breakdownConfig } from '../../../../constants/embeds'; import { useEmbedStateCurry } from '../../../../stores/embedState/utilities'; -const compositeStatsKeysOptions = compositeStatsKeys.map((value) => ({ +export const compositeStatsKeysOptions = compositeStatsKeys.map((value) => ({ label: strings.common.composite_stats[value], value, })); -export const breakdownConfig = { - width: { type: EmbedItemType.Slider, default: 320, min: 128, max: 640 }, - height: { type: EmbedItemType.Slider, default: 492, min: 128, max: 1024 }, - - showTotal: { type: EmbedItemType.Boolean, default: true, pad: true }, - - listGap: { type: EmbedItemType.Size, default: '2' }, - listMaxTanks: { - type: EmbedItemType.Slider, - default: 4, - min: 0, - max: 8, - pad: true, - }, - - cardRadius: { type: EmbedItemType.Radius, default: '2' }, - cardHeaderBackgroundColor: { - type: EmbedItemType.Color, - default: grayDarkA.grayA3, - }, - cardHeaderPadding: { type: EmbedItemType.Size, default: '1' }, - cardTitle: { - type: EmbedItemType.RichText, - default: { color: grayDark.gray12, weight: 'bold', size: '3' }, - }, - cardTitleTypeColor: { type: EmbedItemType.Boolean, default: true }, - cardTitleClassIcon: { type: EmbedItemType.Boolean, default: true }, - cardBodyBackgroundColor: { - type: EmbedItemType.Color, - default: grayA.grayA11, - }, - cardBodyPadding: { - type: EmbedItemType.Size, - default: '2', - pad: true, - }, - - columnGap: { type: EmbedItemType.Size, default: '0' }, - columnValue: { - type: EmbedItemType.RichText, - default: { color: grayDark.gray12, size: '3', weight: 'regular' }, - }, - columnLabel: { - type: EmbedItemType.RichText, - default: { color: grayDark.gray11, size: '2', weight: 'regular' }, - pad: true, - }, - - column1: { - type: EmbedItemType.Enum, - default: 'cumulative_battles' satisfies CompositeStatsKey, - options: compositeStatsKeysOptions, - }, - column2: { - type: EmbedItemType.Enum, - default: 'normalized_wins' satisfies CompositeStatsKey, - options: compositeStatsKeysOptions, - }, - column3: { - type: EmbedItemType.Enum, - default: 'cumulative_wn8' satisfies CompositeStatsKey, - options: compositeStatsKeysOptions, - }, - column4: { - type: EmbedItemType.Enum, - 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: '' }, -} satisfies EmbedConfig; - export function BreakdownPreview() { const tanks = use(tankDefinitionsArray); const { useState } = useEmbedStateCurry(); diff --git a/packages/website/src/app/tools/embed/configurations/index.ts b/packages/website/src/app/tools/embed/configurations/index.ts deleted file mode 100644 index bc39ddb8e..000000000 --- a/packages/website/src/app/tools/embed/configurations/index.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { ReactNode } from 'react'; -import { EmbedConfig } from '../../../../stores/embedState'; -import { BreakdownPreview, breakdownConfig } from './breakdown'; - -export const configurations = { - breakdown: breakdownConfig, -} satisfies Record; - -export const previews = { - breakdown: BreakdownPreview, -} satisfies Record ReactNode>; diff --git a/packages/website/src/components/TanksEmbed.tsx b/packages/website/src/components/TanksEmbed.tsx index a631075e5..d14935381 100644 --- a/packages/website/src/components/TanksEmbed.tsx +++ b/packages/website/src/components/TanksEmbed.tsx @@ -8,8 +8,8 @@ import { amberDark, blueDark } from '@radix-ui/colors'; import { Flex, Text } from '@radix-ui/themes'; import { times } from 'lodash'; import { ReactNode } from 'react'; -import { breakdownConfig } from '../app/tools/embed/configurations/breakdown'; import { toRadiusVar } from '../app/tools/embed/utilities'; +import { breakdownConfig } from '../constants/embeds'; import { useEmbedStateCurry } from '../stores/embedState/utilities'; import { ClassHeavy } from './ClassIcon/components/ClassHeavy'; import { ClassLight } from './ClassIcon/components/ClassLight'; @@ -64,14 +64,14 @@ export function BreakdownEmbedCard({ tank }: BreakdownEmbedCardProps) { tank === null ? undefined : tank.treeType === 'researchable' || - !useState('cardTitleTypeColor') - ? undefined - : { - color: - tank.treeType === 'premium' - ? amberDark.amber11 - : blueDark.blue11, - }, + !useState('cardTitleTypeColor') + ? undefined + : { + color: + tank.treeType === 'premium' + ? amberDark.amber11 + : blueDark.blue11, + }, }} > diff --git a/packages/website/src/constants/embeds.ts b/packages/website/src/constants/embeds.ts new file mode 100644 index 000000000..600529b71 --- /dev/null +++ b/packages/website/src/constants/embeds.ts @@ -0,0 +1,91 @@ +import { CompositeStatsKey } from '@blitzkit/core'; +import { grayA, grayDark, grayDarkA } from '@radix-ui/colors'; +import { ReactNode } from 'react'; +import { + BreakdownPreview, + compositeStatsKeysOptions, +} from '../app/tools/embed/configurations/breakdown'; +import { EmbedConfig } from '../stores/embedState'; +import { EmbedItemType } from '../stores/embedState/constants'; + +export const breakdownConfig = { + width: { type: EmbedItemType.Slider, default: 320, min: 128, max: 640 }, + height: { type: EmbedItemType.Slider, default: 492, min: 128, max: 1024 }, + + showTotal: { type: EmbedItemType.Boolean, default: true, pad: true }, + + listGap: { type: EmbedItemType.Size, default: '2' }, + listMaxTanks: { + type: EmbedItemType.Slider, + default: 4, + min: 0, + max: 8, + pad: true, + }, + + cardRadius: { type: EmbedItemType.Radius, default: '2' }, + cardHeaderBackgroundColor: { + type: EmbedItemType.Color, + default: grayDarkA.grayA3, + }, + cardHeaderPadding: { type: EmbedItemType.Size, default: '1' }, + cardTitle: { + type: EmbedItemType.RichText, + default: { color: grayDark.gray12, weight: 'bold', size: '3' }, + }, + cardTitleTypeColor: { type: EmbedItemType.Boolean, default: true }, + cardTitleClassIcon: { type: EmbedItemType.Boolean, default: true }, + cardBodyBackgroundColor: { + type: EmbedItemType.Color, + default: grayA.grayA11, + }, + cardBodyPadding: { + type: EmbedItemType.Size, + default: '2', + pad: true, + }, + + columnGap: { type: EmbedItemType.Size, default: '0' }, + columnValue: { + type: EmbedItemType.RichText, + default: { color: grayDark.gray12, size: '3', weight: 'regular' }, + }, + columnLabel: { + type: EmbedItemType.RichText, + default: { color: grayDark.gray11, size: '2', weight: 'regular' }, + pad: true, + }, + + column1: { + type: EmbedItemType.Enum, + default: 'cumulative_battles' satisfies CompositeStatsKey, + options: compositeStatsKeysOptions, + }, + column2: { + type: EmbedItemType.Enum, + default: 'normalized_wins' satisfies CompositeStatsKey, + options: compositeStatsKeysOptions, + }, + column3: { + type: EmbedItemType.Enum, + default: 'cumulative_wn8' satisfies CompositeStatsKey, + options: compositeStatsKeysOptions, + }, + column4: { + type: EmbedItemType.Enum, + 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: '' }, +} satisfies EmbedConfig; + +export const configurations = { + breakdown: breakdownConfig, +} satisfies Record; + +export const previews = { + breakdown: BreakdownPreview, +} satisfies Record ReactNode>;