diff --git a/bun.lock b/bun.lock index 3d26f747d..239e81541 100644 --- a/bun.lock +++ b/bun.lock @@ -2443,7 +2443,7 @@ "potpack": ["potpack@1.0.2", "", {}, "sha512-choctRBIV9EMT9WGAZHn3V7t0Z2pMQyl0EZE6pFc/6ml3ssw7Dlf/oAOvFwjm1HVsqfQN8GfeFyJ+d8tRzqueQ=="], - "prettier": ["prettier@3.8.1", "", { "bin": { "prettier": "bin/prettier.cjs" } }, "sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg=="], + "prettier": ["prettier@3.8.3", "", { "bin": { "prettier": "bin/prettier.cjs" } }, "sha512-7igPTM53cGHMW8xWuVTydi2KO233VFiTNyF5hLJqpilHfmn8C8gPf+PS7dUT64YcXFbiMGZxS9pCSxL/Dxm/Jw=="], "pretty-bytes": ["pretty-bytes@6.1.1", "", {}, "sha512-mQUvGU6aUFQ+rNvTIAcZuWGRT9a6f6Yrg9bHs4ImKF+HZCEK+plBvnAZYSIQztknZF2qnzNtr6F8s0+IuptdlQ=="], @@ -3247,6 +3247,8 @@ "yaml-language-server/lodash": ["lodash@4.17.21", "", {}, "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="], + "yaml-language-server/prettier": ["prettier@3.8.1", "", { "bin": { "prettier": "bin/prettier.cjs" } }, "sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg=="], + "yaml-language-server/request-light": ["request-light@0.5.8", "", {}, "sha512-3Zjgh+8b5fhRJBQZoy+zbVKpAQGLyka0MPgW3zruTF4dFFJ8Fqcfu9YsAvi/rvdcaTeWG3MkbZv4WKxAn/84Lg=="], "yaml-language-server/yaml": ["yaml@2.7.1", "", { "bin": { "yaml": "bin.mjs" } }, "sha512-10ULxpnOCQXxJvBgxsn9ptjq6uviG/htZKk9veJGhlqn3w/DxQ631zFF+nlQXLwmImeS5amR2dl2U8sg6U9jsQ=="], diff --git a/packages/website-ue/src/components/Button/index.module.css b/packages/website-ue/src/components/Button/index.module.css index 0a5c62aff..4442b77bf 100644 --- a/packages/website-ue/src/components/Button/index.module.css +++ b/packages/website-ue/src/components/Button/index.module.css @@ -10,12 +10,28 @@ border: none; font-family: var(--font-family-regular); - font-size: var(--font-size-minor); + font-size: 0.75rem; color: var(--gray-1); font-weight: var(--weight-medium); cursor: pointer; + &[data-size="minor"] { + font-size: 0.75rem; + } + + &[data-array="true"] { + &:first-child { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + &:last-child { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + } + svg, img { width: 1em; @@ -33,6 +49,7 @@ &[data-variant="surface"], &[data-variant="soft"] { background-color: var(--accent-3); + color: var(--gray-12); } &[data-variant="inverted"] { diff --git a/packages/website-ue/src/components/Button/index.tsx b/packages/website-ue/src/components/Button/index.tsx index 13a254500..f0dc66fa9 100644 --- a/packages/website-ue/src/components/Button/index.tsx +++ b/packages/website-ue/src/components/Button/index.tsx @@ -7,7 +7,8 @@ export interface ButtonProps extends ComponentProps<"button"> { color?: Color; radius?: `${1 | 2 | 3}` | "max"; variant?: "solid" | "surface" | "soft" | "inverted" | "ghost" | "outline"; - size?: "regular"; + size?: "regular" | "minor"; + array?: boolean; } export const LIGHT_TEXT_COLORS = new Set([ @@ -32,6 +33,7 @@ export function Button({ style, radius = "max", size = "regular", + array = false, ...props }: ButtonProps) { return ( @@ -42,6 +44,7 @@ export function Button({ data-light-text={variant === "solid"} data-radius={radius} data-size={size} + data-array={array} {...props} /> ); diff --git a/packages/website-ue/src/components/IconButton/index.module.css b/packages/website-ue/src/components/IconButton/index.module.css index 62f5d428f..c8ebc2710 100644 --- a/packages/website-ue/src/components/IconButton/index.module.css +++ b/packages/website-ue/src/components/IconButton/index.module.css @@ -2,6 +2,4 @@ padding: var(--space-3); aspect-ratio: 1 / 1; - - 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 86630a9f7..13cb04e1f 100644 --- a/packages/website-ue/src/components/TankopediaLoadout/index.module.css +++ b/packages/website-ue/src/components/TankopediaLoadout/index.module.css @@ -6,7 +6,11 @@ .header { display: flex; align-items: center; - gap: var(--space-3); + gap: var(--space-4); + + .upgrade-buttons { + display: flex; + } } .equipment { @@ -33,16 +37,6 @@ 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; - } - &[data-selected="true"] { z-index: 1; } diff --git a/packages/website-ue/src/components/TankopediaLoadout/index.tsx b/packages/website-ue/src/components/TankopediaLoadout/index.tsx index 92f52198d..4ec4358fe 100644 --- a/packages/website-ue/src/components/TankopediaLoadout/index.tsx +++ b/packages/website-ue/src/components/TankopediaLoadout/index.tsx @@ -33,6 +33,8 @@ import { Price } from "../Price"; import { Section } from "../Section"; import { Text } from "../Text"; import styles from "./index.module.css"; +import { IconButton } from "../IconButton"; +import { Tank } from "@protos/tank"; export function TankopediaLoadout() { const tank = useProtagonist(); @@ -164,6 +166,7 @@ function EquipmentOption({ variant={isSelected ? "surface" : "soft"} data-selected={isSelected} radius="1" + array className={styles.slot} onClick={() => { Tankopedia.mutate((draft) => { @@ -183,45 +186,72 @@ function EquipmentOption({ function Modules() { const strings = useStrings(); const tank = useProtagonist(); + const upgrades = Tankopedia.use((state) => state.protagonist.upgrades); + const alternates = Tankopedia.use((state) => state.protagonist.alternates); + const isStock = useMemo(() => { + return tank.tank!.upgrade_lines.every((line) => { + if (isAlternativeLine(line.name)) return true; + return upgrades[line.name] === 0; + }); + }, [upgrades]); + const isUpgraded = useMemo(() => { + return tank.tank!.upgrade_lines.every((line) => { + if (isAlternativeLine(line.name)) return true; + + return ( + upgrades[line.name] === line.stages.length - 1 || + (line.name in alternates && alternates[line.name]) + ); + }); + }, [upgrades]); return (
{strings.tanks.loadout.modules} - { - Tankopedia.mutate((draft) => { - for (const line of tank.tank!.upgrade_lines) { - if (isAlternativeLine(line.name)) continue; +
+ { + Tankopedia.mutate((draft) => { + for (const line of tank.tank!.upgrade_lines) { + if (isAlternativeLine(line.name)) continue; - draft.protagonist.upgrades[line.name] = 0; - draft.protagonist.alternates[line.name] = false; - } - }); - }} - color="gray" - > - - - - { - Tankopedia.mutate((draft) => { - for (const line of tank.tank!.upgrade_lines) { - draft.protagonist.upgrades[line.name] = line.stages.length - 1; - - if (isAlternativeLine(line.name)) { - const original = originalLineName(line.name)!; - draft.protagonist.alternates[original] = true; + draft.protagonist.upgrades[line.name] = 0; + draft.protagonist.alternates[line.name] = false; } - } - }); - }} - color="gray" - > - - + }); + }} + color="gray" + > + + + + { + Tankopedia.mutate((draft) => { + for (const line of tank.tank!.upgrade_lines) { + draft.protagonist.upgrades[line.name] = + line.stages.length - 1; + + if (isAlternativeLine(line.name)) { + const original = originalLineName(line.name)!; + draft.protagonist.alternates[original] = true; + } + } + }); + }} + color="gray" + > + + +