From 28e2139683e8ff4c005f0581b790af29164ea46a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Sun, 3 Dec 2023 21:44:58 -0600
Subject: [PATCH] feat: even coooooooooler animations

---
 src/app/tools/tankopedia/page.css.tsx | 15 ++++++++++---
 src/app/tools/tankopedia/page.tsx     | 32 ++++++++++++++++++---------
 2 files changed, 34 insertions(+), 13 deletions(-)

diff --git a/src/app/tools/tankopedia/page.css.tsx b/src/app/tools/tankopedia/page.css.tsx
index 2e23bdc30..caac3d0f6 100644
--- a/src/app/tools/tankopedia/page.css.tsx
+++ b/src/app/tools/tankopedia/page.css.tsx
@@ -1,7 +1,15 @@
 import { style } from '@vanilla-extract/css';
 import { theme } from '../../../stitches.config';
 
-export const listing = style({});
+export const listing = style({
+  transition: `background-position ${theme.durations.regular}`,
+
+  backgroundPosition: 'left center',
+
+  ':hover': {
+    backgroundPosition: '-256px center',
+  },
+});
 
 export const listingShadow = style({
   boxShadow: `inset 0 -128px 128px -128px ${theme.colors.appBackground1}`,
@@ -22,9 +30,10 @@ export const listingLabel = style({
 
 export const listingImage = style({
   transition: `transform ${theme.durations.regular}`,
-  transform: 'translateX(25%) translateY(0)',
+  position: 'absolute',
+  left: '50%',
 
   [`.${listing}:hover &, .${listing}:active &`]: {
-    transform: 'translateX(25%) translateY(10%)',
+    transform: 'translate(-25%, 10%)',
   },
 });
diff --git a/src/app/tools/tankopedia/page.tsx b/src/app/tools/tankopedia/page.tsx
index a2f24d7f8..9d806f0b4 100644
--- a/src/app/tools/tankopedia/page.tsx
+++ b/src/app/tools/tankopedia/page.tsx
@@ -154,26 +154,38 @@ export default function Page() {
                   flex: 1,
                 }}
               >
-                <Card className={styles.listing}>
+                <Card
+                  className={styles.listing}
+                  style={{
+                    backgroundImage: `url(https://i.imgur.com/Iho9ATV.png)`,
+                    backgroundSize: 'contain',
+                    backgroundRepeat: 'no-repeat',
+                  }}
+                >
                   <Inset
                     key={tank.id}
                     style={{
-                      minHeight: 128,
                       minWidth: 256,
+                      minHeight: 128,
                       position: 'relative',
                       display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'center',
                     }}
                   >
-                    <img
-                      className={styles.listingImage}
-                      src={tankIcon(tank.id)}
+                    <div
                       style={{
-                        objectFit: 'contain',
-                        objectPosition: 'left center',
+                        width: 256,
+                        height: 128,
                       }}
-                    />
+                      className={styles.listingImage}
+                    >
+                      <img
+                        src={tankIcon(tank.id)}
+                        style={{
+                          objectFit: 'contain',
+                          objectPosition: 'left center',
+                        }}
+                      />
+                    </div>
 
                     <div
                       className={styles.listingShadow}