diff --git a/cspell.json b/cspell.json index 16b4ea7f5..ba729b144 100644 --- a/cspell.json +++ b/cspell.json @@ -4,6 +4,8 @@ "amogos", "Tankopedia", "uasset", - "oodle" + "oodle", + "blitzkit", + "webp" ] } \ No newline at end of file diff --git a/packages/i18n/strings/en.json b/packages/i18n/strings/en.json index 3607af087..efc5aae71 100644 --- a/packages/i18n/strings/en.json +++ b/packages/i18n/strings/en.json @@ -198,12 +198,8 @@ }, "tanks": { - "characteristics": { - "title": "Characteristics" - }, - "loadout": { - "title": "Loadout", + "consumables": "Consumables", "modules": "Modules", "equipment": "Equipment", "alternative": "Alt" diff --git a/packages/website-ue/src/components/TankopediaLoadout/index.module.css b/packages/website-ue/src/components/TankopediaLoadout/index.module.css index cbcb5f749..336a2e674 100644 --- a/packages/website-ue/src/components/TankopediaLoadout/index.module.css +++ b/packages/website-ue/src/components/TankopediaLoadout/index.module.css @@ -13,6 +13,36 @@ } } + .consumables { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: var(--space-3); + + .consumable { + font-size: var(--space-5); + + img { + width: 1em; + height: 1em; + } + + .info { + display: flex; + flex-direction: column; + + .entry { + display: flex; + gap: var(--space-2); + + svg { + width: 1em; + height: 1em; + } + } + } + } + } + .equipment { 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 c5b0384f3..cc316fa9c 100644 --- a/packages/website-ue/src/components/TankopediaLoadout/index.tsx +++ b/packages/website-ue/src/components/TankopediaLoadout/index.tsx @@ -5,9 +5,11 @@ import { 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 { + ClockIcon, CornerBottomLeftIcon, DoubleArrowLeftIcon, DoubleArrowRightIcon, + ResetIcon, TrashIcon, } from "@radix-ui/react-icons"; import { chunk } from "lodash-es"; @@ -26,7 +28,7 @@ import { useProtagonist } from "../../hooks/useProtagonist"; import { useStrings } from "../../hooks/useStrings"; import { useTierPrices } from "../../hooks/useTierPrices"; import { useUpgradePreset } from "../../hooks/useUpgradePreset"; -import { Tankopedia } from "../../stores/tankopedia"; +import { Tankopedia, TankopediaCompare } from "../../stores/tankopedia"; import { Button } from "../Button"; import { Heading } from "../Heading"; import { IconButton } from "../IconButton"; @@ -38,13 +40,15 @@ import type { ComputedCharacteristics } from "../../tankopedia/computeCharacteri import { Tooltip } from "../Tooltip"; import { useGameStrings } from "../../hooks/useGameStrings"; import { TankopediaCollapsible } from "../TankopediaCollapsible"; +import type { ConsumableComponent } from "@protos/blitz_static_consumable_component"; +import { Tank } from "@protos/tank"; +import { select } from "three/src/nodes/math/ConditionalNode.js"; interface TankopediaLoadoutProps { characteristics: ComputedCharacteristics; } export function TankopediaLoadout({ characteristics }: TankopediaLoadoutProps) { - const strings = useStrings(); const tank = useProtagonist(); const showModules = tank.tank!.upgrade_lines.some( @@ -53,15 +57,9 @@ export function TankopediaLoadout({ characteristics }: TankopediaLoadoutProps) { return ( <> - - {showModules && } - - - - - - lmao - + {showModules && } + + ); } @@ -71,21 +69,88 @@ interface ConsumablesProps { } function Consumables({ characteristics }: ConsumablesProps) { + const strings = useStrings(); const consumables = useConsumables(); - const tierPrices = useTierPrices(); const tank = useProtagonist(); const isCompatible = useCompatibility(tank, characteristics); - return Object.entries(consumables.consumables).map( - ([id, { compatibility, consumable, purchase }]) => { - if (!isCompatible(compatibility!)) return null; + return ( +
+
+ {strings.tanks.loadout.consumables} - return ( - - {id} {JSON.stringify(consumable, null, 2)} - - ); - }, + { + Tankopedia.mutate((draft) => { + draft.protagonist.consumables = []; + }); + }} + > + + +
+ +
+ {Object.entries(consumables.consumables).map( + ([id, { compatibility, consumable, purchase }]) => { + if (!isCompatible(compatibility!)) return null; + return ; + }, + )} +
+
+ ); +} + +interface ConsumableProps { + id: string; + consumable: ConsumableComponent; +} + +function Consumable({ id, consumable }: ConsumableProps) { + const gameStrings = useGameStrings("ConsumableEntity"); + const isSelected = Tankopedia.use((state) => + state.protagonist.consumables.includes(id), + ); + + return ( + + + ); } diff --git a/packages/website-ue/src/components/Tooltip/index.module.css b/packages/website-ue/src/components/Tooltip/index.module.css index 5367ce91f..567ac7995 100644 --- a/packages/website-ue/src/components/Tooltip/index.module.css +++ b/packages/website-ue/src/components/Tooltip/index.module.css @@ -20,9 +20,7 @@ white-space: nowrap; } - &:hover, - &:active, - &:focus-within { + &:hover { .text { display: block; } diff --git a/packages/website-ue/src/pages/[...locale]/tanks/[slug]/_index.module.css b/packages/website-ue/src/pages/[...locale]/tanks/[slug]/_index.module.css index 0bbf33117..3b82456cf 100644 --- a/packages/website-ue/src/pages/[...locale]/tanks/[slug]/_index.module.css +++ b/packages/website-ue/src/pages/[...locale]/tanks/[slug]/_index.module.css @@ -12,7 +12,7 @@ display: flex; flex-direction: column; - gap: var(--space-6); + gap: var(--space-5); padding: var(--space-5); overflow-y: auto; diff --git a/packages/website-ue/src/stores/tankopedia.ts b/packages/website-ue/src/stores/tankopedia.ts index 651b83e81..74cc2d66e 100644 --- a/packages/website-ue/src/stores/tankopedia.ts +++ b/packages/website-ue/src/stores/tankopedia.ts @@ -16,6 +16,5 @@ export enum TankopediaCompare { export const Tankopedia = new Varuna((tank) => ({ compare: TankopediaCompare.TierAndClass, - protagonist: createTankState(tank), })); diff --git a/packages/website-ue/src/tankopedia/createTankState.ts b/packages/website-ue/src/tankopedia/createTankState.ts index cf7cbbe81..55f256997 100644 --- a/packages/website-ue/src/tankopedia/createTankState.ts +++ b/packages/website-ue/src/tankopedia/createTankState.ts @@ -23,6 +23,7 @@ export function createTankState({ tank, id }: Tank) { id, equipment: {}, + consumables: [], upgrades, alternates, diff --git a/packages/website-ue/src/tankopedia/tankState.ts b/packages/website-ue/src/tankopedia/tankState.ts index 4d7f82cc6..47fe10533 100644 --- a/packages/website-ue/src/tankopedia/tankState.ts +++ b/packages/website-ue/src/tankopedia/tankState.ts @@ -8,6 +8,7 @@ export interface TankState { id: string; equipment: Record; + consumables: string[]; upgrades: Record; alternates: Record;