From 6984794be10dd4fcdbea3eca332094e226506053 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Mon, 5 Aug 2024 12:52:40 -0500
Subject: [PATCH] feat: start of embeds

---
 src/app/layout.tsx                            |  46 +++----
 src/app/page.tsx                              |  12 +-
 src/app/tools/embed/customize/tanks/page.tsx  |  57 +++++++++
 src/app/tools/embed/page.tsx                  |   5 +
 src/app/tools/embed/types.ts                  |  31 +++++
 src/app/tools/embed/utilities.ts              |   9 ++
 .../components/BodyLoader.tsx                 |   0
 .../components/Controls.tsx                   |   0
 .../components/Header.tsx                     |   0
 .../components/Info.tsx                       |   0
 .../components/PlayerCountControl.tsx         |   0
 .../components/RowLoader.tsx                  |   0
 .../components/Table.tsx                      |   0
 .../components/TankRow.tsx                    |   0
 .../components/Tanks.tsx                      |   0
 .../components/TierBreakdown.tsx              |   0
 .../components/Total.tsx                      |   0
 .../layout.tsx                                |   0
 .../page.tsx                                  |   0
 src/components/EmbedConfigInputs.tsx          | 115 ++++++++++++++++++
 src/components/Party3.tsx                     |   4 +-
 src/components/TanksEmbed.tsx                 |  46 +++++++
 src/constants/tools.tsx                       |  18 ++-
 23 files changed, 313 insertions(+), 30 deletions(-)
 create mode 100644 src/app/tools/embed/customize/tanks/page.tsx
 create mode 100644 src/app/tools/embed/page.tsx
 create mode 100644 src/app/tools/embed/types.ts
 create mode 100644 src/app/tools/embed/utilities.ts
 rename src/app/tools/{tank-performance => performance}/components/BodyLoader.tsx (100%)
 rename src/app/tools/{tank-performance => performance}/components/Controls.tsx (100%)
 rename src/app/tools/{tank-performance => performance}/components/Header.tsx (100%)
 rename src/app/tools/{tank-performance => performance}/components/Info.tsx (100%)
 rename src/app/tools/{tank-performance => performance}/components/PlayerCountControl.tsx (100%)
 rename src/app/tools/{tank-performance => performance}/components/RowLoader.tsx (100%)
 rename src/app/tools/{tank-performance => performance}/components/Table.tsx (100%)
 rename src/app/tools/{tank-performance => performance}/components/TankRow.tsx (100%)
 rename src/app/tools/{tank-performance => performance}/components/Tanks.tsx (100%)
 rename src/app/tools/{tank-performance => performance}/components/TierBreakdown.tsx (100%)
 rename src/app/tools/{tank-performance => performance}/components/Total.tsx (100%)
 rename src/app/tools/{tank-performance => performance}/layout.tsx (100%)
 rename src/app/tools/{tank-performance => performance}/page.tsx (100%)
 create mode 100644 src/components/EmbedConfigInputs.tsx
 create mode 100644 src/components/TanksEmbed.tsx

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index bb5b82e8a..aa8f3e6b0 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -28,7 +28,7 @@ const robotoFlex = Roboto_Flex({
 
 export default function RootLayout({ children }: RootLayoutProps) {
   const pathname = usePathname();
-  const isEmbed = pathname.split('/')[1] === 'embeds';
+  const isEmbed = pathname.startsWith('/tools/embed/host');
   const isRoot = pathname === '/';
 
   return (
@@ -56,30 +56,34 @@ export default function RootLayout({ children }: RootLayoutProps) {
             backgroundColor: isEmbed ? 'transparent' : undefined,
           }}
         >
-          <Theme
-            appearance="dark"
-            panelBackground="solid"
-            radius="full"
-            accentColor="amber"
-            suppressHydrationWarning
-            suppressContentEditableWarning
-          >
-            <Flex
-              direction="column"
-              style={{
-                minHeight: '100vh',
-                paddingTop: isEmbed ? undefined : NAVBAR_HEIGHT,
-              }}
+          {!isEmbed && (
+            <Theme
+              appearance="dark"
+              panelBackground="solid"
+              radius="full"
+              accentColor="amber"
+              suppressHydrationWarning
+              suppressContentEditableWarning
             >
-              {!isEmbed && <Navbar />}
+              <Flex
+                direction="column"
+                style={{
+                  minHeight: '100vh',
+                  paddingTop: isEmbed ? undefined : NAVBAR_HEIGHT,
+                }}
+              >
+                {!isEmbed && <Navbar />}
 
-              <Checks />
+                <Checks />
 
-              <Suspense fallback={<PageLoader />}>{children}</Suspense>
+                <Suspense fallback={<PageLoader />}>{children}</Suspense>
 
-              {!isEmbed && <Footer />}
-            </Flex>
-          </Theme>
+                {!isEmbed && <Footer />}
+              </Flex>
+            </Theme>
+          )}
+
+          {isEmbed && children}
         </body>
       </html>
     </App.Provider>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 8097a064d..675b601a5 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,10 +1,11 @@
 'use client';
 
-import { Flex } from '@radix-ui/themes';
+import { Box, Flex } from '@radix-ui/themes';
 import { AdMidSectionResponsive } from '../components/AdMidSectionResponsive';
 import {
   compareTool,
   discordTool,
+  embedTool,
   moreTool,
   ratingTool,
   sessionTool,
@@ -43,7 +44,7 @@ export default function Page() {
 
           <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
             <ToolCard tool={sessionTool} />
-            <ToolCard tool={ratingTool} />
+            <ToolCard tool={embedTool} />
           </Flex>
 
           {!exempt && (
@@ -59,13 +60,14 @@ export default function Page() {
           )}
 
           <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
+            <ToolCard tool={ratingTool} />
             <ToolCard tool={discordTool} />
-            <ToolCard tool={moreTool} />
           </Flex>
 
-          {/* <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
+          <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
+            <ToolCard tool={moreTool} />
             <Box flexGrow="1" />
-          </Flex> */}
+          </Flex>
         </Flex>
       </Flex>
 
diff --git a/src/app/tools/embed/customize/tanks/page.tsx b/src/app/tools/embed/customize/tanks/page.tsx
new file mode 100644
index 000000000..20dbad70c
--- /dev/null
+++ b/src/app/tools/embed/customize/tanks/page.tsx
@@ -0,0 +1,57 @@
+'use client';
+
+import { Flex } 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 { tanksDefinitionsArray } from '../../../../../core/blitzkit/tankDefinitions';
+import {
+  EmbedConfig,
+  EmbedConfigType,
+  ExtractEmbedConfigType,
+} from '../../types';
+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 },
+
+  cardRadius: { type: EmbedConfigType.Radius, default: '2' },
+  cardHeaderPadding: { type: EmbedConfigType.Size, default: '2' },
+} satisfies EmbedConfig;
+
+export type TanksEmbedState = ExtractEmbedConfigType<typeof tankEmbedConfig>;
+
+export default function Page() {
+  const tanks = use(tanksDefinitionsArray);
+  const [state, setState] = useState(
+    extractEmbedConfigDefaults(tankEmbedConfig),
+  );
+
+  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>
+
+        <EmbedConfigInputs
+          config={tankEmbedConfig}
+          state={state}
+          setState={
+            setState as Dispatch<
+              SetStateAction<ExtractEmbedConfigType<EmbedConfig>>
+            >
+          }
+        />
+      </Flex>
+    </PageWrapper>
+  );
+}
diff --git a/src/app/tools/embed/page.tsx b/src/app/tools/embed/page.tsx
new file mode 100644
index 000000000..936746123
--- /dev/null
+++ b/src/app/tools/embed/page.tsx
@@ -0,0 +1,5 @@
+import PageWrapper from '../../../components/PageWrapper';
+
+export default function Page() {
+  return <PageWrapper></PageWrapper>;
+}
diff --git a/src/app/tools/embed/types.ts b/src/app/tools/embed/types.ts
new file mode 100644
index 000000000..1269ae49f
--- /dev/null
+++ b/src/app/tools/embed/types.ts
@@ -0,0 +1,31 @@
+export enum EmbedConfigType {
+  Number,
+  Radius,
+  Size,
+}
+
+export type EmbedConfig = Record<string, EmbedConfigItem>;
+
+export type EmbedConfigItem =
+  | {
+      type: EmbedConfigType.Number;
+      default: number;
+      unit?: string;
+    }
+  | {
+      type: EmbedConfigType.Radius;
+      default: RadixRadius;
+    }
+  | {
+      type: EmbedConfigType.Size;
+      default: RadixSize;
+    };
+
+export type RadixRadius = `${1 | 2 | 3 | 4}` | 'full';
+export type RadixSize = `${0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}`;
+
+export type ExtractEmbedConfigType<Config extends EmbedConfig> = {
+  [Key in keyof Config]: ({
+    type: Config[Key]['type'];
+  } & EmbedConfigItem)['default'];
+};
diff --git a/src/app/tools/embed/utilities.ts b/src/app/tools/embed/utilities.ts
new file mode 100644
index 000000000..062042330
--- /dev/null
+++ b/src/app/tools/embed/utilities.ts
@@ -0,0 +1,9 @@
+import { EmbedConfig, ExtractEmbedConfigType } from './types';
+
+export function extractEmbedConfigDefaults<Config extends EmbedConfig>(
+  config: Config,
+) {
+  return Object.fromEntries(
+    Object.entries(config).map(([key, value]) => [key, value.default]),
+  ) as ExtractEmbedConfigType<Config>;
+}
diff --git a/src/app/tools/tank-performance/components/BodyLoader.tsx b/src/app/tools/performance/components/BodyLoader.tsx
similarity index 100%
rename from src/app/tools/tank-performance/components/BodyLoader.tsx
rename to src/app/tools/performance/components/BodyLoader.tsx
diff --git a/src/app/tools/tank-performance/components/Controls.tsx b/src/app/tools/performance/components/Controls.tsx
similarity index 100%
rename from src/app/tools/tank-performance/components/Controls.tsx
rename to src/app/tools/performance/components/Controls.tsx
diff --git a/src/app/tools/tank-performance/components/Header.tsx b/src/app/tools/performance/components/Header.tsx
similarity index 100%
rename from src/app/tools/tank-performance/components/Header.tsx
rename to src/app/tools/performance/components/Header.tsx
diff --git a/src/app/tools/tank-performance/components/Info.tsx b/src/app/tools/performance/components/Info.tsx
similarity index 100%
rename from src/app/tools/tank-performance/components/Info.tsx
rename to src/app/tools/performance/components/Info.tsx
diff --git a/src/app/tools/tank-performance/components/PlayerCountControl.tsx b/src/app/tools/performance/components/PlayerCountControl.tsx
similarity index 100%
rename from src/app/tools/tank-performance/components/PlayerCountControl.tsx
rename to src/app/tools/performance/components/PlayerCountControl.tsx
diff --git a/src/app/tools/tank-performance/components/RowLoader.tsx b/src/app/tools/performance/components/RowLoader.tsx
similarity index 100%
rename from src/app/tools/tank-performance/components/RowLoader.tsx
rename to src/app/tools/performance/components/RowLoader.tsx
diff --git a/src/app/tools/tank-performance/components/Table.tsx b/src/app/tools/performance/components/Table.tsx
similarity index 100%
rename from src/app/tools/tank-performance/components/Table.tsx
rename to src/app/tools/performance/components/Table.tsx
diff --git a/src/app/tools/tank-performance/components/TankRow.tsx b/src/app/tools/performance/components/TankRow.tsx
similarity index 100%
rename from src/app/tools/tank-performance/components/TankRow.tsx
rename to src/app/tools/performance/components/TankRow.tsx
diff --git a/src/app/tools/tank-performance/components/Tanks.tsx b/src/app/tools/performance/components/Tanks.tsx
similarity index 100%
rename from src/app/tools/tank-performance/components/Tanks.tsx
rename to src/app/tools/performance/components/Tanks.tsx
diff --git a/src/app/tools/tank-performance/components/TierBreakdown.tsx b/src/app/tools/performance/components/TierBreakdown.tsx
similarity index 100%
rename from src/app/tools/tank-performance/components/TierBreakdown.tsx
rename to src/app/tools/performance/components/TierBreakdown.tsx
diff --git a/src/app/tools/tank-performance/components/Total.tsx b/src/app/tools/performance/components/Total.tsx
similarity index 100%
rename from src/app/tools/tank-performance/components/Total.tsx
rename to src/app/tools/performance/components/Total.tsx
diff --git a/src/app/tools/tank-performance/layout.tsx b/src/app/tools/performance/layout.tsx
similarity index 100%
rename from src/app/tools/tank-performance/layout.tsx
rename to src/app/tools/performance/layout.tsx
diff --git a/src/app/tools/tank-performance/page.tsx b/src/app/tools/performance/page.tsx
similarity index 100%
rename from src/app/tools/tank-performance/page.tsx
rename to src/app/tools/performance/page.tsx
diff --git a/src/components/EmbedConfigInputs.tsx b/src/components/EmbedConfigInputs.tsx
new file mode 100644
index 000000000..7810bf468
--- /dev/null
+++ b/src/components/EmbedConfigInputs.tsx
@@ -0,0 +1,115 @@
+import { Flex, Select, Text, TextField } from '@radix-ui/themes';
+import { produce } from 'immer';
+import { capitalize, startCase, times } from 'lodash';
+import { Dispatch, SetStateAction, useCallback } from 'react';
+import {
+  EmbedConfig,
+  EmbedConfigType,
+  ExtractEmbedConfigType,
+  RadixRadius,
+  RadixSize,
+} from '../app/tools/embed/types';
+
+interface EmbedConfigInputsProps {
+  config: EmbedConfig;
+  state: ExtractEmbedConfigType<EmbedConfig>;
+  setState: Dispatch<SetStateAction<ExtractEmbedConfigType<EmbedConfig>>>;
+}
+
+export function EmbedConfigInputs({
+  config,
+  state,
+  setState,
+}: EmbedConfigInputsProps) {
+  const mutateState = useCallback(
+    (recipe: (draft: ExtractEmbedConfigType<EmbedConfig>) => void) => {
+      setState(produce(recipe));
+    },
+    [],
+  );
+
+  return (
+    <Flex direction="column" gap="2" align="end">
+      {Object.entries(config).map(([key, setting]) => {
+        const name = capitalize(startCase(key));
+
+        switch (setting.type) {
+          case EmbedConfigType.Number: {
+            return (
+              <Flex align="center" gap="2">
+                <Text>{name}</Text>
+                <TextField.Root
+                  style={{ width: 96 }}
+                  type="number"
+                  value={state[key]}
+                  onChange={(event) => {
+                    mutateState((draft) => {
+                      draft[key] = (
+                        event.target as HTMLInputElement
+                      ).valueAsNumber;
+                    });
+                  }}
+                >
+                  {setting.unit && (
+                    <TextField.Slot side="right">px</TextField.Slot>
+                  )}
+                </TextField.Root>
+              </Flex>
+            );
+          }
+
+          case EmbedConfigType.Size: {
+            return (
+              <Flex align="center" gap="2">
+                <Text>{name}</Text>
+                <Select.Root
+                  value={state[key] as RadixSize}
+                  onValueChange={(value) => {
+                    mutateState((draft) => {
+                      draft[key] = value as RadixSize;
+                    });
+                  }}
+                >
+                  <Select.Trigger />
+                  <Select.Content>
+                    {times(10, (index) => (
+                      <Select.Item key={index} value={`${index}`}>
+                        {index}
+                      </Select.Item>
+                    ))}
+                  </Select.Content>
+                </Select.Root>
+              </Flex>
+            );
+          }
+
+          case EmbedConfigType.Radius: {
+            return (
+              <Flex align="center" gap="2">
+                <Text>Card radius</Text>
+                <Select.Root
+                  value={state[key] as RadixRadius}
+                  onValueChange={(value) => {
+                    mutateState((draft) => {
+                      draft[key] = value as RadixRadius;
+                    });
+                  }}
+                >
+                  <Select.Trigger />
+                  <Select.Content>
+                    {times(5, (index) => (
+                      <Select.Item key={index} value={`${index}`}>
+                        {index}
+                      </Select.Item>
+                    ))}
+                    <Select.Item value="full">Full</Select.Item>
+                  </Select.Content>
+                </Select.Root>
+              </Flex>
+            );
+          }
+        }
+      })}
+    </Flex>
+  );
+}
diff --git a/src/components/Party3.tsx b/src/components/Party3.tsx
index a197d6ce4..5639dc2e4 100644
--- a/src/components/Party3.tsx
+++ b/src/components/Party3.tsx
@@ -34,11 +34,11 @@ export function Party3() {
       /> */}
 
       {/* pub center */}
-      <script
+      {/* <script
         async
         src="https://adsdk.microsoft.com/mmnow/sdk.js?siteId=364645&publisherId=253617120"
         crossOrigin="anonymous"
-      />
+      /> */}
     </>
   );
 }
diff --git a/src/components/TanksEmbed.tsx b/src/components/TanksEmbed.tsx
new file mode 100644
index 000000000..271280133
--- /dev/null
+++ b/src/components/TanksEmbed.tsx
@@ -0,0 +1,46 @@
+import { Flex } from '@radix-ui/themes';
+import { ReactNode } from 'react';
+import { TanksEmbedState } from '../app/tools/embed/customize/tanks/page';
+import { TankDefinition } from '../core/blitzkit/tankDefinitions';
+
+interface TanksEmbedWrapperProps {
+  children: ReactNode;
+  state: TanksEmbedState;
+}
+
+export function TanksEmbedWrapper({ children, state }: TanksEmbedWrapperProps) {
+  return (
+    <Flex direction="column" gap={state.listGap} width={`${state.listWidth}px`}>
+      {children}
+    </Flex>
+  );
+}
+
+interface TanksEmbedCardProps {
+  tank: TankDefinition;
+  state: TanksEmbedState;
+}
+
+export function TanksEmbedCard({ tank, state }: TanksEmbedCardProps) {
+  return (
+    <Flex
+      direction="column"
+      style={{
+        borderRadius: `var(--radius-${state.cardRadius})`,
+        overflow: 'hidden',
+        backgroundColor: 'var(--color-panel-solid)',
+      }}
+    >
+      <Flex
+        justify="center"
+        style={{
+          backgroundColor: 'var(--color-panel-translucent)',
+        }}
+        p={state.cardHeaderPadding}
+      >
+        {tank.name}
+      </Flex>
+      <Flex>asd</Flex>
+    </Flex>
+  );
+}
diff --git a/src/constants/tools.tsx b/src/constants/tools.tsx
index bbfb3cbe5..a0e86ed50 100644
--- a/src/constants/tools.tsx
+++ b/src/constants/tools.tsx
@@ -108,8 +108,8 @@ export const playerStatsTool: Tool = {
 };
 
 export const tankPerformanceTool: Tool = {
-  id: 'tank-performance',
-  title: 'Tank performance',
+  id: 'performance',
+  title: 'Performance',
   description: 'Tank performance statistics',
   pageDescription: 'Best tanks and their performances in World of Tanks Blitz',
   button: {
@@ -119,12 +119,26 @@ export const tankPerformanceTool: Tool = {
   image: 'vOKFB03',
 };
 
+export const embedTool: Tool = {
+  id: 'embed',
+  title: 'Embed',
+  description: 'Embeds for streaming',
+  pageDescription:
+    'Create embeds for streaming World of Tanks Blitz with extreme customization',
+  button: {
+    text: 'Create',
+    color: 'red',
+  },
+  image: 'Q0faRYg',
+};
+
 export const TOOLS: Tool[] = [
   tankopediaTool,
   compareTool,
   tankPerformanceTool,
   playerStatsTool,
   sessionTool,
+  embedTool,
   ratingTool,
   discordTool,
   moreTool,