feat: start migration to proto for popular tanks

packages/website-ue/src/components/HomeTanks.astro

@@ -15,19 +15,9 @@ interface Props {
 const { locale } = Astro.props;
 
 const strings = await api.strings(locale);
+const popular = (await api.popularTanks()).tanks.slice(0, 8);
 
-const popular = [
-  "Concept 1B",
-  "Obj. 268",
-  "Grille 15",
-  "Kpz 70 Missile",
-  "Concept 1B",
-  "Concept 1B",
-  "Concept 1B",
-  "Concept 1B",
-  "Concept 1B",
-  "Concept 1B",
-];
+console.log(popular.length);
 ---
 
 <style>
@@ -51,7 +41,7 @@ const popular = [
 
   <Scroller client:load className="tanks">
     <div class="content">
-      {popular.map((tank) => <TankCard {tank} />)}
+      {popular.map((tank) => <TankCard {...tank} />)}
     </div>
   </Scroller>
 

packages/website-ue/src/components/TankCard/index.tsx

@@ -1,11 +1,10 @@
+import type { PopularTank } from "../../protos/popular_tanks";
 import { Text } from "../Text";
 import styles from "./index.module.css";
 
-interface TankCard {
-  tank: string;
-}
+export function TankCard({ id }: PopularTank) {
+  const tanks = useAwait(api.tanks, "tanks");
 
-export function TankCard({ tank }: TankCard) {
   return (
     <div className={styles["tank-card"]}>
       <div className={styles["icon-wrapper"]}>
@@ -19,12 +18,12 @@ export function TankCard({ tank }: TankCard) {
         <div
           className={styles.icon}
           style={{
-            backgroundImage: "url(https://i.imgur.com/HrkTwHc.png)",
+            backgroundImage: `url(/api/tanks/${id}.webp)`,
           }}
         />
       </div>
 
-      <Text className={styles.name}>{tank}</Text>
+      <Text className={styles.name}>{id}</Text>
     </div>
   );
 }