diff --git a/packages/i18n/strings/en.json b/packages/i18n/strings/en.json index f7346cdfe..44aae9c71 100644 --- a/packages/i18n/strings/en.json +++ b/packages/i18n/strings/en.json @@ -122,6 +122,7 @@ "provisions": "Provisions", "modules": "Modules", "equipment": "Equipment", + "shells": "Shells", "alternative": "Alt" }, diff --git a/packages/website/src/components/TankopediaLoadout/index.module.css b/packages/website/src/components/TankopediaLoadout/index.module.css index 1881479be..7543110f2 100644 --- a/packages/website/src/components/TankopediaLoadout/index.module.css +++ b/packages/website/src/components/TankopediaLoadout/index.module.css @@ -22,6 +22,10 @@ gap: var(--space-2); } + .shells { + display: flex; + } + .status { display: flex; flex-direction: column; diff --git a/packages/website/src/components/TankopediaLoadout/index.tsx b/packages/website/src/components/TankopediaLoadout/index.tsx index d45956800..16ad5d472 100644 --- a/packages/website/src/components/TankopediaLoadout/index.tsx +++ b/packages/website/src/components/TankopediaLoadout/index.tsx @@ -11,7 +11,6 @@ import { useStrings } from "../../hooks/useStrings"; import { useTankCompatibility } from "../../hooks/useTankCompatibility"; import { useUnwrapper } from "../../hooks/useUnwrapper"; import { Tankopedia } from "../../stores/tankopedia"; -import { hasUpgrades } from "../../tankopedia/hasUpgrades"; import { vehicleStatusKeys } from "../../tankopedia/tankState"; import type { ComputedCharacteristics } from "../../types/characteristics"; import { Button } from "../Button"; @@ -31,11 +30,12 @@ interface TankopediaLoadoutProps { export function TankopediaLoadout({ characteristics }: TankopediaLoadoutProps) { const tank = useDuel("protagonist", DuelModule.Tank); - const showModules = hasUpgrades(tank); + // const showModules = hasUpgrades(tank); return ( <> {/* {showModules && } */} + @@ -105,7 +105,6 @@ function Status() { key={key} radius="1" className={styles.state} - data-selected={status[key]} color={status[key] ? "amber" : "gray"} variant={status[key] ? "surface" : "soft"} onClick={() => { @@ -125,6 +124,52 @@ function Status() { ); } +function Shells() { + const strings = useStrings(); + const unwrap = useUnwrapper(); + + const gun = useDuel("protagonist", DuelModule.Gun); + const shell = useDuel("protagonist", DuelModule.Shell); + + return ( +
+
+ {strings.tanks.loadout.shells} +
+ +
+ {gun.shells.map((candidate) => { + const isSelected = candidate.id === shell.id; + const name = unwrap(candidate.name!); + + return ( + + { + Tankopedia.mutate((draft) => { + draft.protagonist.shell = candidate.id; + }); + }} + > + {name} + + + ); + })} +
+
+ ); +} + function Provisions() { const strings = useStrings(); const tank = useDuel("protagonist", DuelModule.Tank); @@ -447,7 +492,6 @@ function EquipmentOption({ size="major" color={isSelected ? undefined : "gray"} variant={isSelected ? "surface" : "soft"} - data-selected={isSelected} radius="1" parentListChild className={styles.slot}