From 30fa18f0fd4f4c3131d76732b148f8f08d293c8d Mon Sep 17 00:00:00 2001 From: tresabhi <43380238+tresabhi@users.noreply.github.com> Date: Sun, 17 May 2026 13:19:28 -0500 Subject: [PATCH] start of equipment ui --- packages/website-ue/src/api/server.ts | 6 ++-- .../src/components/Button/index.module.css | 3 +- .../components/IconButton/index.module.css | 2 +- .../TankopediaLoadout/index.module.css | 32 +++++++++++++++++ .../components/TankopediaLoadout/index.tsx | 34 ++++++++++++++++++- packages/website-ue/src/config/equipment.ts | 1 + packages/website-ue/src/config/images.ts | 4 +++ .../{alternativeLines.ts => modules.ts} | 0 packages/website-ue/src/hooks/useEquipment.ts | 19 +++++------ .../src/tankopedia/aggregateParameters.ts | 2 +- .../src/tankopedia/createTankState.ts | 4 ++- .../website-ue/src/tankopedia/tankState.ts | 2 ++ 12 files changed, 90 insertions(+), 19 deletions(-) create mode 100644 packages/website-ue/src/config/equipment.ts create mode 100644 packages/website-ue/src/config/images.ts rename packages/website-ue/src/config/{alternativeLines.ts => modules.ts} (100%) diff --git a/packages/website-ue/src/api/server.ts b/packages/website-ue/src/api/server.ts index cd888a95b..7fdbd8ae7 100644 --- a/packages/website-ue/src/api/server.ts +++ b/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; diff --git a/packages/website-ue/src/components/Button/index.module.css b/packages/website-ue/src/components/Button/index.module.css index cb37faff6..a2d3e1d1a 100644 --- a/packages/website-ue/src/components/Button/index.module.css +++ b/packages/website-ue/src/components/Button/index.module.css @@ -16,7 +16,8 @@ cursor: pointer; - svg { + svg, + img { width: 1em; height: 1em; } diff --git a/packages/website-ue/src/components/IconButton/index.module.css b/packages/website-ue/src/components/IconButton/index.module.css index 8819c175c..62f5d428f 100644 --- a/packages/website-ue/src/components/IconButton/index.module.css +++ b/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); } diff --git a/packages/website-ue/src/components/TankopediaLoadout/index.module.css b/packages/website-ue/src/components/TankopediaLoadout/index.module.css index c967309b5..1cd75f97c 100644 --- a/packages/website-ue/src/components/TankopediaLoadout/index.module.css +++ b/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; diff --git a/packages/website-ue/src/components/TankopediaLoadout/index.tsx b/packages/website-ue/src/components/TankopediaLoadout/index.tsx index 981fc09ef..18cbb1847 100644 --- a/packages/website-ue/src/components/TankopediaLoadout/index.tsx +++ b/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 (
{strings.tanks.loadout.equipment}
+ +
+ {chunk(equipment.preset.slots, equipmentColumns).map((chunk, index) => { + return ( +
+ {chunk.map((slot, index) => { + return ( +
+ {slot.options_catalog_i_ds.map((id) => { + return ( + + ); + })} +
+ ); + })} +
+ ); + })} +
); } diff --git a/packages/website-ue/src/config/equipment.ts b/packages/website-ue/src/config/equipment.ts new file mode 100644 index 000000000..fdc0f23ca --- /dev/null +++ b/packages/website-ue/src/config/equipment.ts @@ -0,0 +1 @@ +export const equipmentColumns = 3; diff --git a/packages/website-ue/src/config/images.ts b/packages/website-ue/src/config/images.ts new file mode 100644 index 000000000..210fa91ad --- /dev/null +++ b/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", +}; diff --git a/packages/website-ue/src/config/alternativeLines.ts b/packages/website-ue/src/config/modules.ts similarity index 100% rename from packages/website-ue/src/config/alternativeLines.ts rename to packages/website-ue/src/config/modules.ts diff --git a/packages/website-ue/src/hooks/useEquipment.ts b/packages/website-ue/src/hooks/useEquipment.ts index 8b88d0897..5ebb79501 100644 --- a/packages/website-ue/src/hooks/useEquipment.ts +++ b/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 }; } diff --git a/packages/website-ue/src/tankopedia/aggregateParameters.ts b/packages/website-ue/src/tankopedia/aggregateParameters.ts index e67ac8e74..19b95786b 100644 --- a/packages/website-ue/src/tankopedia/aggregateParameters.ts +++ b/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) { diff --git a/packages/website-ue/src/tankopedia/createTankState.ts b/packages/website-ue/src/tankopedia/createTankState.ts index 41870e6a7..cf7cbbe81 100644 --- a/packages/website-ue/src/tankopedia/createTankState.ts +++ b/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, diff --git a/packages/website-ue/src/tankopedia/tankState.ts b/packages/website-ue/src/tankopedia/tankState.ts index db2ca8263..4d7f82cc6 100644 --- a/packages/website-ue/src/tankopedia/tankState.ts +++ b/packages/website-ue/src/tankopedia/tankState.ts @@ -7,6 +7,8 @@ export enum TerrainHardness { export interface TankState { id: string; + equipment: Record; + upgrades: Record; alternates: Record;