game mode banners

cspell.json

@@ -1,5 +1,6 @@
 {
   "words": [
+    "gamemodes",
     "Tankopedia"
   ]
-}
+}

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Equalizer.tsx

@@ -33,7 +33,7 @@ export function Equalizer() {
         style={{
           cursor: "pointer",
           borderRadius: "var(--radius-3)",
-          backgroundImage: "url(/api/icons/game_mode_banners/45.webp)",
+          backgroundImage: "url(/api/gamemodes/45/banner.webp)",
           backgroundSize: "cover",
           backgroundPosition: "center",
           overflow: "hidden",

packages/website/src/components/Tankopedia/GameModeSection.tsx

@@ -37,7 +37,7 @@ export function GameModeSection() {
               direction="column"
               style={{
                 borderRadius: "var(--radius-3)",
-                background: `url(/api/icons/game_mode_banners/${id}.webp)`,
+                background: `url(/api/gamemodes/${id}/banner.webp)`,
                 backgroundSize: "cover",
                 backgroundPosition: "center",
               }}
@@ -45,7 +45,7 @@ export function GameModeSection() {
               <Box
                 flexGrow="1"
                 style={{
-                  background: `url(/api/icons/game_mode_banners/${id}.webp)`,
+                  background: `url(/api/gamemodes/${id}/banner.webp)`,
                   backgroundSize: "cover",
                   backgroundPosition: "center",
                 }}

packages/website/src/pages/[...chunk_api]/gamemodes/[id]/banner.webp.ts

@@ -1,12 +1,13 @@
+import type { SquadBattleTypeStylesYaml } from "@blitzkit/core";
+import type { APIContext, GetStaticPathsItem } from "astro";
 import sharp from "sharp";
-import { AssetUploader } from "../core/github/assetUploader";
+import { mixStaticPaths } from "../../../../core/blitzkit/mixStaticPaths";
-import { vfs } from "./constants";
+import { vfs } from "../../../../core/blitzkit/vfs";
-import { SquadBattleTypeStylesYaml } from "./definitions";
+import { getStaticPaths as _getStaticPaths } from "../../_index";
 
-export async function gameModeBanners() {
+export const getStaticPaths = mixStaticPaths(_getStaticPaths, async () => {
-  console.log("Building game mode banners...");
+  const paths: GetStaticPathsItem[] = [];
 
-  using uploader = new AssetUploader("game mode banners");
   const gameTypeSelectorStyles = await vfs.yaml<SquadBattleTypeStylesYaml>(
     `Data/UI/Screens/Lobby/Hangar/GameTypeSelector.yaml`,
   );
@@ -34,15 +35,20 @@ export async function gameModeBanners() {
       path = `/Gfx/UI/Hangar/GameTypes/battle-type_${name.toLowerCase()}`;
     }
 
-    const content = await sharp(await vfs.file(`Data${path}.packed.webp`))
+    paths.push({
-      .trim({ background: { r: 0, g: 0, b: 0, alpha: 0 } })
+      params: { id },
-      .toBuffer();
+      props: { path: `Data${path}.packed.webp` },
-
-    await uploader.add({
-      path: `icons/game_mode_banners/${id}.webp`,
-      content,
     });
   }
 
-  await uploader.flush();
+  return paths;
+});
+
+export async function GET({ props }: APIContext<{ path: string }>) {
+  const buffer = await sharp(await vfs.file(props.path))
+    .trim({ background: { r: 0, g: 0, b: 0, alpha: 0 } })
+    .toBuffer();
+  const bytes = new Uint8Array(buffer);
+
+  return new Response(bytes);
 }