feat: some ui

package.json

@@ -35,7 +35,7 @@
     "@octokit/plugin-throttling": "^8.1.3",
     "@octokit/rest": "^20.0.1",
     "@prisma/client": "^5.4.1",
-    "@radix-ui/colors": "^3.0.0-rc.4",
+    "@radix-ui/colors": "^3.0.0",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/themes": "^2.0.1",
     "@react-three/drei": "^9.93.0",

src/commands/research.tsx

@@ -9,11 +9,17 @@ import { buildTechTreeLine } from '../core/blitzkrieg/buildTechTreeLine';
 import { emblemIdToURL } from '../core/blitzkrieg/emblemIdToURL';
 import { resolveAncestry } from '../core/blitzkrieg/resolveAncestry';
 import { tankDefinitions } from '../core/blitzkrieg/tankDefinitions';
+import {
+  TANK_ICONS,
+  TIER_ROMAN_NUMERALS,
+} from '../core/blitzkrieg/tankDefinitions/constants';
+import { tankIconPng } from '../core/blitzkrieg/tankIconPng';
 import addTankChoices from '../core/discord/addTankChoices';
 import autocompleteTanks from '../core/discord/autocompleteTanks';
 import { createLocalizedCommand } from '../core/discord/createLocalizedCommand';
 import resolvePlayerFromCommand from '../core/discord/resolvePlayerFromCommand';
 import { CommandRegistry } from '../events/interactionCreate';
+import { theme } from '../stitches.config';
 
 export const researchCommand = new Promise<CommandRegistry>((resolve) => {
   resolve({
@@ -41,15 +47,19 @@ export const researchCommand = new Promise<CommandRegistry>((resolve) => {
       const { id, region } = await resolvePlayerFromCommand(interaction);
       const tankStats = await getTankStats(region, id, interaction.locale);
       const ancestry = await resolveAncestry(tankId);
-      const firstOwnedTechTree = ancestry.find((id) =>
-        tankStats.some(({ tank_id }) => tank_id === id),
+      const firstOwnedTechTree = ancestry.find(
+        (id) =>
+          awaitedTankDefinitions[id].tier === 1 ||
+          tankStats.some(({ tank_id }) => tank_id === id),
       );
 
       if (firstOwnedTechTree === undefined) {
         return `idk what to call this error lol`;
       }
 
-      const line = await buildTechTreeLine(firstOwnedTechTree, tankId);
+      const line = (
+        await buildTechTreeLine(firstOwnedTechTree, tankId)
+      ).reverse();
       const { nickname } = await getAccountInfo(region, id);
       const clan = (await getClanAccountInfo(region, id, ['clan']))?.clan;
       const clanImage = clan ? emblemIdToURL(clan.emblem_set_id) : undefined;
@@ -61,6 +71,122 @@ export const researchCommand = new Promise<CommandRegistry>((resolve) => {
             image={clanImage}
             description={`Research • ${tank.name}`}
           />
+
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 8,
+            }}
+          >
+            {await Promise.all(
+              line.map(async (id) => {
+                const tank = awaitedTankDefinitions[id];
+
+                return (
+                  <div
+                    key={id}
+                    style={{
+                      display: 'flex',
+                      borderRadius: 4,
+                      backgroundColor: theme.colors.appBackground2,
+                      border: `1px solid ${theme.colors.componentInteractive}`,
+                    }}
+                  >
+                    <div
+                      style={{
+                        width: 48,
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                      }}
+                    >
+                      <span
+                        style={{
+                          color: theme.colors.textLowContrast,
+                          fontSize: 16,
+                        }}
+                      >
+                        {TIER_ROMAN_NUMERALS[tank.tier]}
+                      </span>
+                    </div>
+
+                    <div
+                      style={{
+                        flex: 1,
+                        display: 'flex',
+                        position: 'relative',
+                        right: '5%',
+                      }}
+                    >
+                      <div
+                        style={{
+                          height: 120,
+                          width: 240,
+                          display: 'flex',
+                          alignItems: 'center',
+                          justifyContent: 'flex-start',
+                          left: '25%',
+                          top: '5%',
+                        }}
+                      >
+                        <img
+                          src={await tankIconPng(id)}
+                          style={{
+                            height: '100%',
+                            position: 'absolute',
+                            objectFit: 'contain',
+                          }}
+                        />
+                      </div>
+
+                      <div
+                        style={{
+                          display: 'flex',
+                          gap: 4,
+                          alignItems: 'center',
+                          justifyContent: 'center',
+                          position: 'absolute',
+                          bottom: 8,
+                          left: '50%',
+                          transform: 'translateX(-50%)',
+                        }}
+                      >
+                        <img
+                          src={TANK_ICONS[tank.class]}
+                          width={16}
+                          height={16}
+                        />
+
+                        <span
+                          style={{
+                            color: theme.colors.textHighContrast,
+                          }}
+                        >
+                          {tank.name}
+                        </span>
+                      </div>
+                    </div>
+
+                    <div
+                      style={{
+                        flex: 1,
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: 8,
+                        padding: '16px 0',
+                      }}
+                    >
+                      <span>Research: 144,000</span>
+                      <span>Upgrades: 62,000</span>
+                      <span>Purchase: 1,500,000</span>
+                      <span>Equipment: 450,000</span>
+                    </div>
+                  </div>
+                );
+              }),
+            )}
+          </div>
         </CommandWrapper>
       );
     },

src/components/CommandWrapper.tsx

@@ -16,7 +16,7 @@ export default function CommandWrapper({ children, fat }: CommandWrapperProps) {
         gap: 16,
         width: 480,
         color: theme.colors.textHighContrast,
-        background: 'url(https://i.imgur.com/PhS06NJ.png)',
+        backgroundColor: theme.colors.appBackground1,
       }}
     >
       {children}

src/core/blitzkrieg/tankIconPng.ts

@@ -0,0 +1,9 @@
+import sharp from 'sharp';
+import { tankIcon } from './tankIcon';
+
+export async function tankIconPng(id: number) {
+  const imageResponse = await fetch(tankIcon(id));
+  const imageBufferWEBP = await imageResponse.arrayBuffer();
+  const imageBufferPNG = await sharp(imageBufferWEBP).png().toBuffer();
+  return `data:image/png;base64,${imageBufferPNG.toString('base64')}`;
+}

yarn.lock

@@ -1156,7 +1156,7 @@
   dependencies:
     "@prisma/debug" "5.9.1"
 
-"@radix-ui/colors@^3.0.0", "@radix-ui/colors@^3.0.0-rc.4":
+"@radix-ui/colors@^3.0.0":
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/colors/-/colors-3.0.0.tgz#e8a591a303c44e503bd1212cacf40a09511165e0"
   integrity sha512-FUOsGBkHrYJwCSEtWRCIfQbZG7q1e6DgxCIOe1SUQzDe/7rXXeA47s8yCn6fuTNQAj1Zq4oTFi9Yjp3wzElcxg==