feat: i am having too much fun

scripts/buildTankopedia.ts

@@ -98,8 +98,8 @@ Promise.all(
               tree_type: isCollector
                 ? 'collector'
                 : isPremium
-                ? 'premium'
+                  ? 'premium'
-                : 'tech-tree',
+                  : '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);
 

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({
+export const listing = style({});
-  transition: `background-position ${theme.durations.regular}`,
 
-  backgroundPosition: 'left center',
+export const flag = style({
+  transitionDuration: theme.durations.regular,
+  left: '0',
+  top: '0',
 
-  ':hover': {
+  [`.${listing}:hover &, .${listing}:active &`]: {
-    backgroundPosition: '-256px center',
+    transform: 'translateX(-25%)',
+    filter: 'blur(3rem)',
   },
 });
 

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
+                <Card className={styles.listing}>
-                  className={styles.listing}
-                  style={{
-                    backgroundImage: `url(https://i.imgur.com/Iho9ATV.png)`,
-                    backgroundSize: 'contain',
-                    backgroundRepeat: 'no-repeat',
-                  }}
-                >
                   <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,