feat: float

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

@@ -1,13 +1,13 @@
 'use client';
 
-import { Flex } from '@radix-ui/themes';
+import { Box } from '@radix-ui/themes';
 import { Dispatch, SetStateAction, use, useState } from 'react';
 import { EmbedConfigInputs } from '../../../../../components/EmbedConfigInputs';
-import PageWrapper from '../../../../../components/PageWrapper';
 import {
   TanksEmbedCard,
   TanksEmbedWrapper,
 } from '../../../../../components/TanksEmbed';
+import { imgur } from '../../../../../core/blitzkit/imgur';
 import { tanksDefinitionsArray } from '../../../../../core/blitzkit/tankDefinitions';
 import {
   EmbedConfig,
@@ -19,10 +19,38 @@ import { extractEmbedConfigDefaults } from '../../utilities';
 const tankEmbedConfig = {
   listWidth: { type: EmbedConfigType.Number, default: 320, unit: 'px' },
   listGap: { type: EmbedConfigType.Size, default: '2' },
-  listMaxTanks: { type: EmbedConfigType.Number, default: 8 },
+  listMaxTanks: { type: EmbedConfigType.Number, default: 8, pad: true },
 
   cardRadius: { type: EmbedConfigType.Radius, default: '2' },
-  cardHeaderPadding: { type: EmbedConfigType.Size, default: '2' },
+  cardHeaderBackgroundColor: {
+    type: EmbedConfigType.Color,
+    default: { base: 'gray', variant: '3' },
+  },
+  cardHeaderPadding: { type: EmbedConfigType.Size, default: '1' },
+  cardBodyBackgroundColor: {
+    type: EmbedConfigType.Color,
+    default: { base: 'gray', variant: '2' },
+  },
+  cardBodyPadding: { type: EmbedConfigType.Size, default: '2', pad: true },
+
+  columnGap: { type: EmbedConfigType.Size, default: '0' },
+  columnValueSize: { type: EmbedConfigType.SizeNo0, default: '3' },
+  columnValueColor: { type: EmbedConfigType.TextColor, default: undefined },
+  columnLabelSize: { type: EmbedConfigType.SizeNo0, default: '2' },
+  columnLabelColor: {
+    type: EmbedConfigType.TextColor,
+    default: 'gray',
+    pad: true,
+  },
+
+  column1Unit: { type: EmbedConfigType.String, default: '' },
+  column2Unit: { type: EmbedConfigType.String, default: '%' },
+  column3Unit: { type: EmbedConfigType.String, default: '' },
+  column4Unit: { type: EmbedConfigType.String, default: '' },
+  column1Label: { type: EmbedConfigType.String, default: 'Battles' },
+  column2Label: { type: EmbedConfigType.String, default: 'Winrate' },
+  column3Label: { type: EmbedConfigType.String, default: 'WN8' },
+  column4Label: { type: EmbedConfigType.String, default: 'Damage' },
 } satisfies EmbedConfig;
 
 export type TanksEmbedState = ExtractEmbedConfigType<typeof tankEmbedConfig>;
@@ -34,24 +62,29 @@ export default function Page() {
   );
 
   return (
-    <PageWrapper>
-      <Flex align="start" justify="between" gap="4">
-        <TanksEmbedWrapper state={state}>
-          {tanks.slice(0, state.listMaxTanks).map((tank) => (
-            <TanksEmbedCard key={tank.id} tank={tank} state={state} />
-          ))}
-        </TanksEmbedWrapper>
+    <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}
-          setState={
-            setState as Dispatch<
-              SetStateAction<ExtractEmbedConfigType<EmbedConfig>>
-            >
-          }
-        />
-      </Flex>
-    </PageWrapper>
+      <EmbedConfigInputs
+        config={tankEmbedConfig}
+        state={state}
+        setState={
+          setState as Dispatch<
+            SetStateAction<ExtractEmbedConfigType<EmbedConfig>>
+          >
+        }
+      />
+    </Box>
   );
 }

src/app/tools/embed/types.ts

@@ -1,17 +1,36 @@
+import * as radixColors from '@radix-ui/colors';
+
 export enum EmbedConfigType {
   Number,
   Radius,
   Size,
+  Color,
+  SizeNo0,
+  TextColor,
+  String,
 }
 
+export const radixGrays = [
+  'gray',
+  'mauve',
+  'slate',
+  'sage',
+  'olive',
+  'sand',
+] as const;
+
 export type EmbedConfig = Record<string, EmbedConfigItem>;
 
-export type EmbedConfigItem =
+export type EmbedConfigItem = (
   | {
       type: EmbedConfigType.Number;
       default: number;
       unit?: string;
     }
+  | {
+      type: EmbedConfigType.String;
+      default: string;
+    }
   | {
       type: EmbedConfigType.Radius;
       default: RadixRadius;
@@ -19,10 +38,39 @@ export type EmbedConfigItem =
   | {
       type: EmbedConfigType.Size;
       default: RadixSize;
-    };
+    }
+  | {
+      type: EmbedConfigType.SizeNo0;
+      default: RadixSizeNo0;
+    }
+  | {
+      type: EmbedConfigType.Color;
+      default: RadixColor;
+    }
+  | {
+      type: EmbedConfigType.TextColor;
+      default: RadixTextColor;
+    }
+) & {
+  pad?: boolean;
+};
 
 export type RadixRadius = `${1 | 2 | 3 | 4}` | 'full';
 export type RadixSize = `${0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}`;
+export type RadixSizeNo0 = Exclude<RadixSize, '0'>;
+export type RadixColor = { base: RadixColorBase; variant: RadixColorVariant };
+export type RadixColorBase = Exclude<
+  keyof typeof radixColors,
+  `${string}${'A' | 'P3' | 'Dark'}`
+>;
+type RadixColorGrays = (typeof radixGrays)[number];
+export type RadixTextColor =
+  | Exclude<RadixColorBase, RadixColorGrays>
+  | 'gray'
+  | undefined;
+export type RadixColorVariantRaw =
+  `${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12}`;
+export type RadixColorVariant = `${'' | 'a'}${RadixColorVariantRaw}`;
 
 export type ExtractEmbedConfigType<Config extends EmbedConfig> = {
   [Key in keyof Config]: ({

src/app/tools/embed/utilities.ts

@@ -1,4 +1,9 @@
-import { EmbedConfig, ExtractEmbedConfigType } from './types';
+import {
+  EmbedConfig,
+  ExtractEmbedConfigType,
+  RadixColor,
+  RadixRadius,
+} from './types';
 
 export function extractEmbedConfigDefaults<Config extends EmbedConfig>(
   config: Config,
@@ -7,3 +12,15 @@ export function extractEmbedConfigDefaults<Config extends EmbedConfig>(
     Object.entries(config).map(([key, value]) => [key, value.default]),
   ) as ExtractEmbedConfigType<Config>;
 }
+
+export function toWidthVar(state: number) {
+  return `${state}px`;
+}
+
+export function toRadiusVar(state: RadixRadius) {
+  return `var(--radius-${state})`;
+}
+
+export function toColorVar(state: RadixColor) {
+  return `var(--${state.base}-${state.variant})`;
+}