From c7e2780d17d738789c10972dd7f783d791a94b5b 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 22:09:08 -0600
Subject: [PATCH] feat: i am having too much fun

---
 scripts/buildTankopedia.ts            |  8 +++++---
 src/app/tools/tankopedia/page.css.tsx | 13 ++++++++-----
 src/app/tools/tankopedia/page.tsx     | 27 +++++++++++++++++++--------
 3 files changed, 32 insertions(+), 16 deletions(-)

diff --git a/scripts/buildTankopedia.ts b/scripts/buildTankopedia.ts
index 14f79b7f9..c417171b9 100644
--- a/scripts/buildTankopedia.ts
+++ b/scripts/buildTankopedia.ts
@@ -98,8 +98,8 @@ Promise.all(
               tree_type: isCollector
                 ? 'collector'
                 : isPremium
-                ? 'premium'
-                : 'tech-tree',
+                  ? 'premium'
+                  : 'tech-tree',
               tier,
               type,
             };
@@ -164,7 +164,9 @@ Promise.all(
     // ).flat() as FileChange[];
     const flagChanges = await readdir(
       `${TEMP}/${directoriesOfInterest.flags}`,
-    ).then((flags) => flags.filter((flag) => flag.startsWith('flag_text')));
+    ).then((flags) =>
+      flags.filter((flag) => flag.startsWith('flag_tutor-tank_')),
+    );
 
     console.log(flagChanges);
 
diff --git a/src/app/tools/tankopedia/page.css.tsx b/src/app/tools/tankopedia/page.css.tsx
index caac3d0f6..1d3407fe6 100644
--- a/src/app/tools/tankopedia/page.css.tsx
+++ b/src/app/tools/tankopedia/page.css.tsx
@@ -1,13 +1,16 @@
 import { style } from '@vanilla-extract/css';
 import { theme } from '../../../stitches.config';
 
-export const listing = style({
-  transition: `background-position ${theme.durations.regular}`,
+export const listing = style({});
 
-  backgroundPosition: 'left center',
+export const flag = style({
+  transitionDuration: theme.durations.regular,
+  left: '0',
+  top: '0',
 
-  ':hover': {
-    backgroundPosition: '-256px center',
+  [`.${listing}:hover &, .${listing}:active &`]: {
+    transform: 'translateX(-25%)',
+    filter: 'blur(3rem)',
   },
 });
 
diff --git a/src/app/tools/tankopedia/page.tsx b/src/app/tools/tankopedia/page.tsx
index 9d806f0b4..4f22e1d07 100644
--- a/src/app/tools/tankopedia/page.tsx
+++ b/src/app/tools/tankopedia/page.tsx
@@ -23,6 +23,12 @@ import { useTankopedia } from '../../../stores/tankopedia';
 import { Options } from './components/Options';
 import * as styles from './page.css';
 
+const flags = [
+  'https://i.imgur.com/Iho9ATV.png',
+  'https://i.imgur.com/uKWdnOn.png',
+  'https://i.imgur.com/kf4GwjJ.png',
+];
+
 const TANKS_PER_PAGE = 30;
 
 export default function Page() {
@@ -154,14 +160,7 @@ export default function Page() {
                   flex: 1,
                 }}
               >
-                <Card
-                  className={styles.listing}
-                  style={{
-                    backgroundImage: `url(https://i.imgur.com/Iho9ATV.png)`,
-                    backgroundSize: 'contain',
-                    backgroundRepeat: 'no-repeat',
-                  }}
-                >
+                <Card className={styles.listing}>
                   <Inset
                     key={tank.id}
                     style={{
@@ -171,6 +170,18 @@ export default function Page() {
                       display: 'flex',
                     }}
                   >
+                    <img
+                      className={styles.flag}
+                      // pick a random flag
+                      src={flags[Math.floor(Math.random() * flags.length)]}
+                      style={{
+                        width: '100%',
+                        height: '100%',
+                        objectFit: 'contain',
+                        position: 'absolute',
+                      }}
+                    ></img>
+
                     <div
                       style={{
                         width: 256,