From 0b697a94bd180403969e357a9f16d1671c51d197 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Fri, 12 Jan 2024 20:42:10 -0600
Subject: [PATCH] feat: small tank icon

---
 .../tankopedia/[id]/components/VersusBar.tsx  | 14 ++++-----
 src/components/SmallTankIcon.tsx              | 29 +++++++++++++++++++
 2 files changed, 35 insertions(+), 8 deletions(-)
 create mode 100644 src/components/SmallTankIcon.tsx

diff --git a/src/app/tools/tankopedia/[id]/components/VersusBar.tsx b/src/app/tools/tankopedia/[id]/components/VersusBar.tsx
index 55b509725..87e7565da 100644
--- a/src/app/tools/tankopedia/[id]/components/VersusBar.tsx
+++ b/src/app/tools/tankopedia/[id]/components/VersusBar.tsx
@@ -6,7 +6,6 @@ import {
 import {
   Button,
   Card,
-  Checkbox,
   Dialog,
   Flex,
   Heading,
@@ -19,6 +18,7 @@ import { go } from 'fuzzysort';
 import { debounce } from 'lodash';
 import { use, useRef, useState } from 'react';
 import { ModuleButton } from '../../../../../components/ModuleButton';
+import { SmallTankIcon } from '../../../../../components/SmallTankIcon';
 import {
   SHELL_NAMES,
   tankDefinitions,
@@ -53,8 +53,11 @@ export function VersusBar() {
           <Dialog.Root>
             <Dialog.Trigger>
               <Button variant="ghost">
-                {antagonist.tank.name}
-                <CaretRightIcon />
+                <Flex gap="2" align="center">
+                  {antagonist.tank.name}
+                  <SmallTankIcon id={antagonist.tank.id} size={16} />
+                  <CaretRightIcon />
+                </Flex>
               </Button>
             </Dialog.Trigger>
 
@@ -250,11 +253,6 @@ export function VersusBar() {
           </Dialog.Root>
         </Flex>
 
-        <Flex gap="2" align="center">
-          <Checkbox defaultChecked />
-          <Text>Calibrated</Text>
-        </Flex>
-
         <Flex>
           {antagonist.gun.shells.map((shell, index) => {
             return (
diff --git a/src/components/SmallTankIcon.tsx b/src/components/SmallTankIcon.tsx
new file mode 100644
index 000000000..a324c818d
--- /dev/null
+++ b/src/components/SmallTankIcon.tsx
@@ -0,0 +1,29 @@
+import { asset } from '../core/blitzkrieg/asset';
+
+interface SmallTankIconProps {
+  id: number;
+  size?: number;
+}
+
+const WIDTH = 70;
+const HEIGHT = 24;
+
+export function SmallTankIcon({ id, size = HEIGHT }: SmallTankIconProps) {
+  return (
+    <div
+      style={{
+        height: size,
+        overflow: 'hidden',
+        width: WIDTH * (size / HEIGHT),
+      }}
+    >
+      <img
+        src={asset(`icons/tanks/small/${id}.webp`)}
+        style={{
+          transform: `scale(${(size / HEIGHT) * 100}%)`,
+          transformOrigin: 'top left',
+        }}
+      />
+    </div>
+  );
+}