feat: correct flags

scripts/buildTankopedia.ts

@@ -1,5 +1,6 @@
 import { Octokit } from '@octokit/rest';
 import decompress from 'decompress';
+import { config } from 'dotenv';
 import { writeFileSync } from 'fs';
 import { cp, mkdir, readFile, readdir, rm, writeFile } from 'fs/promises';
 import { load } from 'js-yaml';
@@ -8,6 +9,9 @@ import { ElementCompact, xml2js } from 'xml-js';
 import { parse } from 'yaml';
 import { NATION_IDS } from '../src/constants/nations';
 import { BlitzkriegTankopedia, Tier } from '../src/core/blitzkrieg/tankopedia';
+import commitMultipleFiles, { FileChange } from './commitMultipleFiles';
+
+config();
 
 const LANGUAGE = 'en';
 const TEMP = 'temp/blitz';
@@ -86,7 +90,7 @@ Promise.all(
             const type = tags[0];
 
             if ((name ?? name_short) === undefined) {
-              console.log(vehicleData.userString._text);
+              console.warn(`Missing name for ${vehicle}`);
             }
 
             tankIds.push(id);
@@ -165,21 +169,37 @@ Promise.all(
     const flagChanges = await readdir(
       `${TEMP}/${directoriesOfInterest.flags}`,
     ).then((flags) =>
-      flags.filter((flag) => flag.startsWith('flag_tutor-tank_')),
+      Promise.all(
+        flags
+          .filter((flag) => flag.startsWith('flag_tutor-tank_'))
+          .map(async (flag) => {
+            const content = await readFile(
+              `${TEMP}/${directoriesOfInterest.flags}/${flag}`,
+              { encoding: 'base64' },
+            );
+            const name = flag.match(/flag_tutor-tank_(.+)\.packed\.webp/)![1];
+
+            return {
+              content,
+              encoding: 'base64',
+              path: `flags/${name}.webp`,
+            } satisfies FileChange;
+          }),
+      ),
     );
 
     console.log(flagChanges);
 
-    // console.log('Writing files...');
-    // await commitMultipleFiles(
-    //   octokit,
-    //   'tresabhi',
-    //   'blitzkrieg-assets',
-    //   'main',
-    //   new Date().toString(),
-    //   [tankopediaChange, ...iconsChange],
-    //   true,
-    // );
+    console.log('Writing files...');
+    await commitMultipleFiles(
+      octokit,
+      'tresabhi',
+      'blitzkrieg-assets',
+      'main',
+      new Date().toString(),
+      flagChanges,
+      true,
+    );
   } else {
     writeFile(
       'dist/tankopedia/tankopedia.json',

src/app/tools/tankopedia/page.tsx

@@ -10,6 +10,7 @@ import { Button, Card, Flex, Inset, Text, TextField } from '@radix-ui/themes';
 import { go } from 'fuzzysort';
 import { Suspense, use, useEffect, useMemo, useRef, useState } from 'react';
 import PageWrapper from '../../../components/PageWrapper';
+import { asset } from '../../../core/blitzkrieg/asset';
 import { tankIcon } from '../../../core/blitzkrieg/tankIcon';
 import {
   BlitzkriegTankopediaEntry,
@@ -23,12 +24,6 @@ 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() {
@@ -170,17 +165,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>
+                    {tank.nation !== 'other' && (
+                      <img
+                        className={styles.flag}
+                        src={asset(`flags/${tank.nation}.webp`)}
+                        style={{
+                          width: '100%',
+                          height: '100%',
+                          objectFit: 'contain',
+                          position: 'absolute',
+                        }}
+                      />
+                    )}
 
                     <div
                       style={{