feat: more customizations

src/app/tools/embed/customize/tanks/page.tsx

@@ -1,13 +1,11 @@
 'use client';
 
-import { Box } from '@radix-ui/themes';
 import { Dispatch, SetStateAction, use, useState } from 'react';
 import { EmbedConfigInputs } from '../../../../../components/EmbedConfigInputs';
 import {
   TanksEmbedCard,
   TanksEmbedWrapper,
 } from '../../../../../components/TanksEmbed';
-import { imgur } from '../../../../../core/blitzkit/imgur';
 import { tanksDefinitionsArray } from '../../../../../core/blitzkit/tankDefinitions';
 import {
   EmbedConfig,
@@ -17,9 +15,11 @@ import {
 import { extractEmbedConfigDefaults } from '../../utilities';
 
 const tankEmbedConfig = {
+  showTotal: { type: EmbedConfigType.Boolean, default: true },
+
   listWidth: { type: EmbedConfigType.Number, default: 320, unit: 'px' },
   listGap: { type: EmbedConfigType.Size, default: '2' },
-  listMaxTanks: { type: EmbedConfigType.Number, default: 8, pad: true },
+  listMaxTanks: { type: EmbedConfigType.Number, default: 4, pad: true },
 
   cardRadius: { type: EmbedConfigType.Radius, default: '2' },
   cardHeaderBackgroundColor: {
@@ -27,6 +27,12 @@ const tankEmbedConfig = {
     default: { base: 'gray', variant: '3' },
   },
   cardHeaderPadding: { type: EmbedConfigType.Size, default: '1' },
+  cardTitle: {
+    type: EmbedConfigType.FullTextControl,
+    default: { color: undefined, weight: 'bold', size: '3' },
+  },
+  cardTitleAutoColor: { type: EmbedConfigType.Boolean, default: true },
+  cardTitleAutoIcon: { type: EmbedConfigType.Boolean, default: true },
   cardBodyBackgroundColor: {
     type: EmbedConfigType.Color,
     default: { base: 'gray', variant: '2' },
@@ -34,12 +40,13 @@ const tankEmbedConfig = {
   cardBodyPadding: { type: EmbedConfigType.Size, default: '2', pad: true },
 
   columnGap: { type: EmbedConfigType.Size, default: '0' },
-  columnValueSize: { type: EmbedConfigType.SizeNo0, default: '3' },
+  columnValue: {
-  columnValueColor: { type: EmbedConfigType.TextColor, default: undefined },
+    type: EmbedConfigType.FullTextControl,
-  columnLabelSize: { type: EmbedConfigType.SizeNo0, default: '2' },
+    default: { color: undefined, size: '3', weight: 'regular' },
-  columnLabelColor: {
+  },
-    type: EmbedConfigType.TextColor,
+  columnLabel: {
-    default: 'gray',
+    type: EmbedConfigType.FullTextControl,
+    default: { color: 'gray', size: '2', weight: 'regular' },
     pad: true,
   },
 
@@ -62,20 +69,6 @@ export default function Page() {
   );
 
   return (
-    <Box
-      width="100vw"
-      height="100vh"
-      style={{
-        background: `url(${imgur('pAidayf')})`,
-        backgroundSize: 'cover',
-      }}
-    >
-      <TanksEmbedWrapper state={state}>
-        {tanks.slice(0, state.listMaxTanks).map((tank) => (
-          <TanksEmbedCard key={tank.id} tank={tank} state={state} />
-        ))}
-      </TanksEmbedWrapper>
-
     <EmbedConfigInputs
       config={tankEmbedConfig}
       state={state}
@@ -84,7 +77,14 @@ export default function Page() {
           SetStateAction<ExtractEmbedConfigType<EmbedConfig>>
         >
       }
-      />
+    >
-    </Box>
+      <TanksEmbedWrapper state={state}>
+        {state.showTotal && <TanksEmbedCard state={state} tank={null} />}
+
+        {tanks.slice(0, state.listMaxTanks).map((tank) => (
+          <TanksEmbedCard key={tank.id} tank={tank} state={state} />
+        ))}
+      </TanksEmbedWrapper>
+    </EmbedConfigInputs>
   );
 }

src/app/tools/embed/types.ts

@@ -8,6 +8,8 @@ export enum EmbedConfigType {
   SizeNo0,
   TextColor,
   String,
+  FullTextControl,
+  Boolean,
 }
 
 export const radixGrays = [
@@ -19,9 +21,15 @@ export const radixGrays = [
   'sand',
 ] as const;
 
+export const radixTextWeights = ['light', 'regular', 'medium', 'bold'] as const;
+
 export type EmbedConfig = Record<string, EmbedConfigItem>;
 
 export type EmbedConfigItem = (
+  | {
+      type: EmbedConfigType.Boolean;
+      default: boolean;
+    }
   | {
       type: EmbedConfigType.Number;
       default: number;
@@ -51,12 +59,24 @@ export type EmbedConfigItem = (
       type: EmbedConfigType.TextColor;
       default: RadixTextColor;
     }
+  | {
+      type: EmbedConfigType.FullTextControl;
+      default: {
+        color: RadixTextColor;
+        size: RadixSizeNo0;
+        weight: RadixTextWeight;
+      };
+    }
 ) & {
   pad?: boolean;
 };
 
+export type EmbedConfigItemType<Type extends EmbedConfigType> =
+  (EmbedConfigItem & { type: Type })['default'];
+
 export type RadixRadius = `${1 | 2 | 3 | 4}` | 'full';
 export type RadixSize = `${0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}`;
+export type RadixTextWeight = (typeof radixTextWeights)[number];
 export type RadixSizeNo0 = Exclude<RadixSize, '0'>;
 export type RadixColor = { base: RadixColorBase; variant: RadixColorVariant };
 export type RadixColorBase = Exclude<

src/components/EmbedConfigInputs.tsx

@@ -1,25 +1,37 @@
 import * as radixColors from '@radix-ui/colors';
-import { DragHandleDots2Icon } from '@radix-ui/react-icons';
+import {
+  DragHandleDots2Icon,
+  EnterFullScreenIcon,
+  ExitFullScreenIcon,
+  ImageIcon,
+} from '@radix-ui/react-icons';
 import {
   Box,
+  Button,
   Card,
   Flex,
+  IconButton,
+  Inset,
   ScrollArea,
   Select,
+  Switch,
   Text,
   TextField,
 } from '@radix-ui/themes';
 import { produce } from 'immer';
-import { capitalize, startCase, times } from 'lodash';
+import { capitalize, clamp, startCase, times } from 'lodash';
 import {
   Dispatch,
   ReactNode,
   SetStateAction,
   useCallback,
+  useEffect,
   useRef,
+  useState,
 } from 'react';
 import {
   EmbedConfig,
+  EmbedConfigItemType,
   EmbedConfigType,
   ExtractEmbedConfigType,
   RadixColor,
@@ -29,7 +41,10 @@ import {
   radixGrays,
   RadixRadius,
   RadixSize,
+  RadixSizeNo0,
   RadixTextColor,
+  RadixTextWeight,
+  radixTextWeights,
 } from '../app/tools/embed/types';
 import { toColorVar, toRadiusVar } from '../app/tools/embed/utilities';
 
@@ -37,13 +52,19 @@ interface EmbedConfigInputsProps {
   config: EmbedConfig;
   state: ExtractEmbedConfigType<EmbedConfig>;
   setState: Dispatch<SetStateAction<ExtractEmbedConfigType<EmbedConfig>>>;
+  children: ReactNode;
 }
 
 export function EmbedConfigInputs({
   config,
   state,
   setState,
+  children,
 }: EmbedConfigInputsProps) {
+  const [expanded, setExpanded] = useState(true);
+  const [backgroundImage, setBackgroundImage] = useState(
+    'https://upload.wikimedia.org/wikipedia/commons/f/f6/Swiss_National_Park_131.JPG',
+  );
   const mutateState = useCallback(
     (recipe: (draft: ExtractEmbedConfigType<EmbedConfig>) => void) => {
       setState(produce(recipe));
@@ -56,47 +77,247 @@ export function EmbedConfigInputs({
 
     if (!wrapper.current) return;
 
-    wrapper.current.style.top = `${parseFloat(wrapper.current.style.top) + event.movementY}px`;
+    wrapper.current.style.top = `${clamp(parseFloat(wrapper.current.style.top) + event.movementY, 32, window.innerHeight - 32 - 32)}px`;
-    wrapper.current.style.right = `${parseFloat(wrapper.current.style.right) - event.movementX}px`;
+    wrapper.current.style.right = `${clamp(parseFloat(wrapper.current.style.right) - event.movementX, 32, window.innerWidth - 32 - 320)}px`;
   }, []);
-
+  const handlePointerUp = useCallback(() => {
-  const handlePointerUp = useCallback((event: PointerEvent) => {
     window.removeEventListener('pointermove', handlePointerMove);
     window.removeEventListener('pointerup', handlePointerUp);
   }, []);
+  const fileInput = useRef<HTMLInputElement>();
+
+  useEffect(() => {
+    fileInput.current = document.createElement('input');
+    fileInput.current.type = 'file';
+    fileInput.current.style.display = 'none';
+    fileInput.current.accept = 'image/*';
+    fileInput.current.onchange = (event) => {
+      const file = (event.target as HTMLInputElement).files?.[0];
+      if (!file) return;
+      setBackgroundImage(URL.createObjectURL(file));
+    };
+  }, []);
 
   return (
+    <Flex
+      width="100vw"
+      height="100vh"
+      align="center"
+      justify="center"
+      overflow="hidden"
+      style={{
+        background: `url(${backgroundImage}) center / cover no-repeat`,
+      }}
+    >
       <Card
-      style={{ position: 'fixed', top: 0, right: 0, minWidth: 320 }}
+        style={{ position: 'fixed', top: 32, right: 32, minWidth: 320 }}
         ref={wrapper}
       >
+        <Inset mb="4">
           <Flex
             align="center"
             justify="center"
             p="2"
-        mb="2"
+            mb={expanded ? '2' : '0'}
+            position="relative"
             style={{
               backgroundColor: 'var(--color-panel-translucent)',
-          borderRadius: 'var(--radius-2)',
               cursor: 'grab',
             }}
             onPointerDown={(event) => {
+              event.preventDefault();
               window.addEventListener('pointermove', handlePointerMove);
               window.addEventListener('pointerup', handlePointerUp);
             }}
           >
+            <Text color="gray" trim="end">
               <DragHandleDots2Icon style={{ transform: 'rotate(90deg)' }} />
-      </Flex>
+            </Text>
 
+            <Box
+              position="absolute"
+              right="0"
+              top="50%"
+              pr="2"
+              style={{ transform: 'translateY(-25%)' }}
+            >
+              <IconButton
+                variant="ghost"
+                color="gray"
+                onClick={() => setExpanded((expanded) => !expanded)}
+              >
+                {expanded ? <ExitFullScreenIcon /> : <EnterFullScreenIcon />}
+              </IconButton>
+            </Box>
+          </Flex>
+        </Inset>
+
+        {expanded && (
           <ScrollArea
             scrollbars="vertical"
             style={{ height: '100%', maxHeight: 640 }}
           >
             <Flex direction="column" gap="2">
+              <Button
+                variant="outline"
+                color="gray"
+                mb="6"
+                onClick={() => fileInput.current?.click()}
+              >
+                <ImageIcon /> Upload test background
+              </Button>
+
               {Object.entries(config).map(([key, setting]) => {
                 let control: ReactNode;
 
                 switch (setting.type) {
+                  case EmbedConfigType.Boolean: {
+                    control = (
+                      <Switch
+                        checked={state[key] as boolean}
+                        onCheckedChange={(checked) =>
+                          mutateState((draft) => {
+                            draft[key] = checked;
+                          })
+                        }
+                      />
+                    );
+                    break;
+                  }
+
+                  case EmbedConfigType.FullTextControl: {
+                    control = (
+                      <>
+                        <Select.Root
+                          size="1"
+                          value={`${(state[key] as EmbedConfigItemType<EmbedConfigType.FullTextControl>).color}`}
+                          onValueChange={(value) => {
+                            mutateState((draft) => {
+                              (
+                                draft[
+                                  key
+                                ] as EmbedConfigItemType<EmbedConfigType.FullTextControl>
+                              ).color = value as RadixTextColor;
+                            });
+                          }}
+                        >
+                          <Select.Trigger />
+                          <Select.Content>
+                            <Select.Item value="undefined">
+                              <Box
+                                style={{
+                                  display: 'inline-block',
+                                  width: '1em',
+                                  height: '1em',
+                                  verticalAlign: 'text-top',
+                                  borderRadius: toRadiusVar('full'),
+                                  backgroundColor: 'white',
+                                }}
+                              />{' '}
+                              White
+                            </Select.Item>
+                            <Select.Item value="gray">
+                              <Box
+                                style={{
+                                  display: 'inline-block',
+                                  width: '1em',
+                                  height: '1em',
+                                  verticalAlign: 'text-top',
+                                  borderRadius: toRadiusVar('full'),
+                                  backgroundColor: 'gray',
+                                }}
+                              />{' '}
+                              Gray
+                            </Select.Item>
+                            {Object.entries(radixColors)
+                              .filter(
+                                ([key]) =>
+                                  !key.endsWith('A') &&
+                                  !key.endsWith('P3') &&
+                                  !key.endsWith('Dark') &&
+                                  !radixGrays.includes(key),
+                              )
+                              .map(([key]) => (
+                                <Select.Item key={key} value={key}>
+                                  <Box
+                                    style={{
+                                      display: 'inline-block',
+                                      width: '1em',
+                                      height: '1em',
+                                      verticalAlign: 'text-top',
+                                      borderRadius: toRadiusVar('full'),
+                                      backgroundColor: toColorVar({
+                                        base: key as RadixColorBase,
+                                        variant: '9',
+                                      }),
+                                    }}
+                                  />{' '}
+                                  {capitalize(key)}
+                                </Select.Item>
+                              ))}
+                          </Select.Content>
+                        </Select.Root>
+                        <Select.Root
+                          size="1"
+                          value={
+                            (
+                              state[
+                                key
+                              ] as EmbedConfigItemType<EmbedConfigType.FullTextControl>
+                            ).size
+                          }
+                          onValueChange={(value) => {
+                            mutateState((draft) => {
+                              (
+                                draft[
+                                  key
+                                ] as EmbedConfigItemType<EmbedConfigType.FullTextControl>
+                              ).size = value as RadixSizeNo0;
+                            });
+                          }}
+                        >
+                          <Select.Trigger />
+                          <Select.Content>
+                            {times(9, (index) => (
+                              <Select.Item key={index} value={`${index + 1}`}>
+                                Size {index + 1}
+                              </Select.Item>
+                            ))}
+                          </Select.Content>
+                        </Select.Root>
+                        <Select.Root
+                          size="1"
+                          value={
+                            (
+                              state[
+                                key
+                              ] as EmbedConfigItemType<EmbedConfigType.FullTextControl>
+                            ).weight
+                          }
+                          onValueChange={(value) => {
+                            mutateState((draft) => {
+                              (
+                                draft[
+                                  key
+                                ] as EmbedConfigItemType<EmbedConfigType.FullTextControl>
+                              ).weight = value as RadixTextWeight;
+                            });
+                          }}
+                        >
+                          <Select.Trigger />
+                          <Select.Content>
+                            {radixTextWeights.map((weight) => (
+                              <Select.Item key={weight} value={weight}>
+                                {startCase(weight)}
+                              </Select.Item>
+                            ))}
+                          </Select.Content>
+                        </Select.Root>
+                      </>
+                    );
+                    break;
+                  }
+
                   case EmbedConfigType.Number: {
                     control = (
                       <TextField.Root
@@ -129,7 +350,9 @@ export function EmbedConfigInputs({
                         value={state[key] as string}
                         onChange={(event) => {
                           mutateState((draft) => {
-                        draft[key] = (event.target as HTMLInputElement).value;
+                            draft[key] = (
+                              event.target as HTMLInputElement
+                            ).value;
                           });
                         }}
                       />
@@ -287,7 +510,8 @@ export function EmbedConfigInputs({
                                           width: '50%',
                                           height: '100%',
                                           backgroundColor: toColorVar({
-                                        base: (state[key] as RadixColor).base,
+                                            base: (state[key] as RadixColor)
+                                              .base,
                                             variant,
                                           }),
                                         }}
@@ -398,6 +622,18 @@ export function EmbedConfigInputs({
               })}
             </Flex>
           </ScrollArea>
+        )}
+
+        {!expanded && (
+          <Flex justify="center">
+            <Text size="2" color="gray">
+              Expand to configure
+            </Text>
+          </Flex>
+        )}
       </Card>
+
+      {children}
+    </Flex>
   );
 }

src/components/TanksEmbed.tsx

@@ -8,6 +8,10 @@ import {
   toWidthVar,
 } from '../app/tools/embed/utilities';
 import { TankDefinition } from '../core/blitzkit/tankDefinitions';
+import { ClassHeavy } from './ClassIcon/components/ClassHeavy';
+import { ClassLight } from './ClassIcon/components/ClassLight';
+import { ClassMedium } from './ClassIcon/components/ClassMedium';
+import { ClassTankDestroyer } from './ClassIcon/components/ClassTankDestroyer';
 
 interface TanksEmbedWrapperProps {
   children: ReactNode;
@@ -27,11 +31,12 @@ export function TanksEmbedWrapper({ children, state }: TanksEmbedWrapperProps) {
 }
 
 interface TanksEmbedCardProps {
-  tank: TankDefinition;
+  tank: TankDefinition | null;
   state: TanksEmbedState;
 }
 
 export function TanksEmbedCard({ tank, state }: TanksEmbedCardProps) {
+  const { color: cardTitleColor, ...restCardTitleProps } = state.cardTitle;
   return (
     <Flex
       direction="column"
@@ -48,7 +53,40 @@ export function TanksEmbedCard({ tank, state }: TanksEmbedCardProps) {
         }}
         p={state.cardHeaderPadding}
       >
-        {tank.name}
+        <Text
+          color={
+            state.cardTitleAutoColor
+              ? tank === null
+                ? cardTitleColor
+                : tank.treeType === 'collector'
+                  ? 'blue'
+                  : tank.treeType === 'premium'
+                    ? 'amber'
+                    : cardTitleColor
+              : cardTitleColor
+          }
+          {...restCardTitleProps}
+        >
+          <Flex align="center" gap="1">
+            {tank !== null && state.cardTitleAutoIcon && (
+              <>
+                {tank.class === 'lightTank' && (
+                  <ClassLight width="1em" height="1em" />
+                )}
+                {tank.class === 'mediumTank' && (
+                  <ClassMedium width="1em" height="1em" />
+                )}
+                {tank.class === 'heavyTank' && (
+                  <ClassHeavy width="1em" height="1em" />
+                )}
+                {tank.class === 'AT-SPG' && (
+                  <ClassTankDestroyer width="1em" height="1em" />
+                )}
+              </>
+            )}{' '}
+            {tank === null ? 'Total' : tank.name}
+          </Flex>
+        </Text>
       </Flex>
 
       <Flex p={state.cardBodyPadding}>
@@ -62,10 +100,10 @@ export function TanksEmbedCard({ tank, state }: TanksEmbedCardProps) {
               gap={state.columnGap}
               flexGrow="1"
             >
-              <Text size={state.columnValueSize} color={state.columnValueColor}>
+              <Text {...state.columnValue}>
                 70{state[`column${column}Unit`]}
               </Text>
-              <Text size={state.columnLabelSize} color={state.columnLabelColor}>
+              <Text {...state.columnLabel}>
                 {state[`column${column}Label`]}
               </Text>
             </Flex>