feat: migration 3

packages/bot/src/components/Tanks/components/Column.tsx

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+
+interface ColumnProps {
+  children: ReactNode;
+}
+
+export function Column({ children }: ColumnProps) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 8,
+        flex: 1,
+      }}
+    >
+      {children}
+    </div>
+  );
+}

packages/bot/src/components/Tanks/components/Item/constants.ts

@@ -0,0 +1,22 @@
+import { TankClass, TreeType } from '.';
+import {
+  TANK_ICONS,
+  TANK_ICONS_COLLECTOR,
+  TANK_ICONS_PREMIUM,
+} from '../../../../core/blitzkit/tankDefinitions/constants';
+
+export const TREE_TYPE_NAMES: Record<TreeType, string> = {
+  researchable: 'Tech tree',
+  premium: 'Premium',
+  collector: 'Collector',
+};
+export const TREE_TYPE_IMAGES: Record<TreeType, string> = {
+  researchable: 'https://i.imgur.com/pJxO2XY.png',
+  premium: 'https://i.imgur.com/mZzSwOU.png',
+  collector: 'https://i.imgur.com/7A0RsG5.png',
+};
+export const TREE_TYPE_ICONS: Record<TreeType, Record<TankClass, string>> = {
+  researchable: TANK_ICONS,
+  premium: TANK_ICONS_PREMIUM,
+  collector: TANK_ICONS_COLLECTOR,
+};

packages/bot/src/components/Tanks/components/Item/index.tsx

@@ -0,0 +1,74 @@
+import { theme } from '../../../../stitches.config';
+import { TANK_CLASSES, TREE_TYPES, TREE_TYPE_ICONS } from './constants';
+
+export type TankClass = (typeof TANK_CLASSES)[number];
+export type TreeType = (typeof TREE_TYPES)[number];
+
+export interface ItemProps {
+  tankType?: TankClass;
+  name: string;
+  treeType: TreeType;
+}
+
+const TREE_TYPE_COLOR = {
+  researchable: '',
+  premium: '_amber',
+  collector: '_blue',
+} as const;
+
+export function Item({ tankType, name, treeType }: ItemProps) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        height: 32,
+        paddingLeft: 8,
+        paddingRight: 8,
+        overflow: 'hidden',
+        alignItems: 'center',
+        borderRadius: 4,
+        backgroundColor:
+          theme.colors[`componentInteractive${TREE_TYPE_COLOR[treeType]}`],
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          gap: 4,
+          flex: 1,
+          alignItems: 'center',
+          justifyContent: 'flex-start',
+          overflow: 'hidden',
+        }}
+      >
+        {tankType && (
+          <img
+            alt={tankType}
+            src={TREE_TYPE_ICONS[treeType][tankType]}
+            style={{ width: 14, height: 14 }}
+          />
+        )}
+        <span
+          style={{
+            fontSize: 16,
+            whiteSpace: 'nowrap',
+            color: theme.colors[`textLowContrast${TREE_TYPE_COLOR[treeType]}`],
+          }}
+        >
+          {name}
+        </span>
+      </div>
+
+      {/* {image && (
+        // TODO: remove hardcoded dimensions when satori fixes non-width unloadable images
+        <img
+          alt={name}
+          src={image}
+          width={106}
+          height={32}
+          style={{ objectFit: 'cover' }}
+        />
+      )} */}
+    </div>
+  );
+}

packages/bot/src/components/Tanks/components/Root.tsx

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+
+interface RootProps {
+  children: ReactNode;
+}
+
+export function Root({ children }: RootProps) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 16,
+      }}
+    >
+      {children}
+    </div>
+  );
+}

packages/bot/src/components/Tanks/components/Row.tsx

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+
+interface RowProps {
+  children: ReactNode;
+}
+
+export function Row({ children }: RowProps) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        gap: 8,
+      }}
+    >
+      {children}
+    </div>
+  );
+}

packages/bot/src/components/Tanks/components/Title.tsx

@@ -0,0 +1,19 @@
+import { theme } from '../../../stitches.config';
+
+interface TitleProps {
+  children: string;
+}
+
+export function Title({ children }: TitleProps) {
+  return (
+    <span
+      style={{
+        fontWeight: 900,
+        color: theme.colors.textHighContrast,
+        fontSize: 24,
+      }}
+    >
+      {children}
+    </span>
+  );
+}

packages/bot/src/components/Tanks/index.ts

@@ -0,0 +1,5 @@
+export * from './components/Column';
+export * from './components/Item';
+export * from './components/Root';
+export * from './components/Row';
+export * from './components/Title';