start of equipment ui

packages/website-ue/src/api/server.ts

@@ -232,15 +232,15 @@ export class ServerAPI extends AbstractAPI {
     const equipment = Equipment.create();
 
     for (const item of this.metadata.group("EquipmentPresetEntity")) {
-      equipment.presets[item.name] = item.EquipmentPreset();
+      equipment.presets[item.id] = item.EquipmentPreset();
     }
 
     for (const item of this.metadata.group("EquipmentPricePresetEntity")) {
-      equipment.prices[item.name] = item.EquipmentPricePreset();
+      equipment.prices[item.id] = item.EquipmentPricePreset();
     }
 
     for (const item of this.metadata.group("EquipmentEntity")) {
-      equipment.equipments[item.name] = item.BlitzStaticEquipment();
+      equipment.equipments[item.id] = item.BlitzStaticEquipment();
     }
 
     return equipment;

packages/website-ue/src/components/Button/index.module.css

@@ -16,7 +16,8 @@
 
   cursor: pointer;
 
-  svg {
+  svg,
+  img {
     width: 1em;
     height: 1em;
   }

packages/website-ue/src/components/IconButton/index.module.css

@@ -3,5 +3,5 @@
 
   aspect-ratio: 1 / 1;
 
-  font-size: var(--font-size-regular);
+  font-size: var(--font-size-major);
 }

packages/website-ue/src/components/TankopediaLoadout/index.module.css

@@ -9,6 +9,38 @@
     gap: var(--space-3);
   }
 
+  .equipment {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+
+    .row {
+      display: flex;
+      gap: var(--space-3);
+
+      .slots {
+        display: flex;
+
+        .slot {
+          aspect-ratio: 1 / 1;
+          padding: var(--space-3);
+
+          font-size: var(--space-5);
+
+          &:first-child {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+          }
+
+          &:last-child {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+          }
+        }
+      }
+    }
+  }
+
   .lines {
     display: flex;
     flex-direction: column;

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

@@ -4,12 +4,15 @@ import type { StandardPrice } from "@protos/blitz_static_standard_price";
 import type { UpgradeLine } from "@protos/blitz_static_tank_upgrade_line";
 import type { StageParameters } from "@protos/blitz_static_tank_upgrade_single_stage";
 import { DoubleArrowDownIcon, DoubleArrowUpIcon } from "@radix-ui/react-icons";
+import { chunk } from "lodash-es";
 import { useMemo } from "react";
+import { equipmentColumns } from "../../config/equipment";
+import { catImages } from "../../config/images";
 import {
   alternativeLines,
   isAlternativeLine,
   originalLineName,
-} from "../../config/alternativeLines";
+} from "../../config/modules";
 import { useEquipment } from "../../hooks/useEquipment";
 import { useProtagonist } from "../../hooks/useProtagonist";
 import { useStrings } from "../../hooks/useStrings";
@@ -39,12 +42,41 @@ function Equipment() {
     tank.tank!.equipment_preset_catalog_id,
     tank.tank!.equipment_price_preset_catalog_id,
   );
+  const equipmentState = Tankopedia.use((state) => state.protagonist.equipment);
 
   return (
     <div className={styles.section}>
       <div className={styles.header}>
         <Heading size="4">{strings.tanks.loadout.equipment}</Heading>
       </div>
+
+      <div className={styles.equipment}>
+        {chunk(equipment.preset.slots, equipmentColumns).map((chunk, index) => {
+          return (
+            <div key={index} className={styles.row}>
+              {chunk.map((slot, index) => {
+                return (
+                  <div key={index} className={styles.slots}>
+                    {slot.options_catalog_i_ds.map((id) => {
+                      return (
+                        <Button
+                          color="gray"
+                          variant="soft"
+                          radius="1"
+                          key={id}
+                          className={styles.slot}
+                        >
+                          <img src={catImages.squareTransparent} />
+                        </Button>
+                      );
+                    })}
+                  </div>
+                );
+              })}
+            </div>
+          );
+        })}
+      </div>
     </div>
   );
 }

packages/website-ue/src/config/equipment.ts

@@ -0,0 +1 @@
+export const equipmentColumns = 3;

packages/website-ue/src/config/images.ts

@@ -0,0 +1,4 @@
+export const catImages = {
+  squareTransparent:
+    "https://icatcare.org/img/asset/aW1hZ2VzL2N1dG91dHMvYWRvYmVzdG9ja18zMTYzODM5NjkucG5n/adobestock_316383969.png?p=default&s=86bb641e805a56548c51f3385510026b",
+};

packages/website-ue/src/hooks/useEquipment.ts

@@ -1,13 +1,10 @@
+import { api } from "../api/dynamic";
+import { useAwait } from "./useAwait";
+
 export function useEquipment(presetId: string, priceId: string) {
-  // const [, presetName] = presetId.split(".");
-  // const [, priceName] = priceId.split(".");
-  // const preset = useAwait(
-  //   () => api.equipmentPreset(presetName),
-  //   `equipment-preset-${presetName}`,
-  // );
-  // const price = useAwait(
-  //   () => api.equipmentPrice(priceName),
-  //   `equipment-price-${priceName}`,
-  // );
-  // return { preset, price };
+  const equipment = useAwait(() => api.equipment(), "equipment");
+  const preset = equipment.presets[presetId];
+  const price = equipment.prices[priceId];
+
+  return { preset, price, equipment };
 }

packages/website-ue/src/tankopedia/aggregateParameters.ts

@@ -17,7 +17,7 @@ import {
 import {
   isAlternativeLine,
   originalLineName,
-} from "../config/alternativeLines";
+} from "../config/modules";
 
 function patch(stage0: StageParameters, stage1: StageParameters) {
   if (stage1.number !== ++stage0.number) {

packages/website-ue/src/tankopedia/createTankState.ts

@@ -1,5 +1,5 @@
 import type { Tank } from "@protos/tank";
-import { alternativeLines } from "../config/alternativeLines";
+import { alternativeLines } from "../config/modules";
 import { TerrainHardness, type TankState } from "./tankState";
 
 export function createTankState({ tank, id }: Tank) {
@@ -22,6 +22,8 @@ export function createTankState({ tank, id }: Tank) {
   return {
     id,
 
+    equipment: {},
+
     upgrades,
     alternates,
 

packages/website-ue/src/tankopedia/tankState.ts

@@ -7,6 +7,8 @@ export enum TerrainHardness {
 export interface TankState {
   id: string;
 
+  equipment: Record<number, number>;
+
   upgrades: Record<string, number>;
   alternates: Record<string, boolean>;