diff --git a/packages/website-ue/src/components/IconButton/index.module.css b/packages/website-ue/src/components/IconButton/index.module.css index 6c32e585f..e80c47788 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: 2rem; + font-size: 1.75em; } diff --git a/packages/website-ue/src/components/TankopediaLoadout/index.module.css b/packages/website-ue/src/components/TankopediaLoadout/index.module.css index e1566c71b..ec8441172 100644 --- a/packages/website-ue/src/components/TankopediaLoadout/index.module.css +++ b/packages/website-ue/src/components/TankopediaLoadout/index.module.css @@ -1,20 +1,32 @@ .lines { display: flex; + flex-direction: column; gap: var(--space-3); .line { display: flex; - flex-direction: column; align-items: center; - gap: var(--space-2); + gap: var(--space-3); .stage { + position: relative; + img { width: 1em; height: 1em; } + + .tier { + position: absolute; + left: var(--space-2); + top: var(--space-2); + } + } + + .arrow { + display: contents; } } } diff --git a/packages/website-ue/src/components/TankopediaLoadout/index.tsx b/packages/website-ue/src/components/TankopediaLoadout/index.tsx index c5995dfb9..73da9ca12 100644 --- a/packages/website-ue/src/components/TankopediaLoadout/index.tsx +++ b/packages/website-ue/src/components/TankopediaLoadout/index.tsx @@ -1,5 +1,5 @@ import type { UpgradeLine } from "@blitzkit/closed/protos/game/proto/legacy/blitz_static_tank_upgrade_line"; -import { CaretDownIcon } from "@radix-ui/react-icons"; +import { romanize } from "@blitzkit/core"; import { Fragment } from "react"; import { api } from "../../core/api/dynamic"; import { useAwait } from "../../hooks/useAwait"; @@ -8,6 +8,7 @@ import { Tankopedia } from "../../stores/tankopedia"; import { Heading } from "../Heading"; import { IconButton } from "../IconButton"; import { Section } from "../Section"; +import { Text } from "../Text"; import styles from "./index.module.css"; export function TankopediaLoadout() { @@ -40,12 +41,18 @@ function Line({ line }: LineProps) { return (
+ {line.name} + {line.stages.map((stage, index) => { const isSelected = upgrades[line.name] === index; return ( - {index !== 0 && } + {/* {index !== 0 && ( + + + + )} */} {/* {stage.display_name} */} {/* {stage.grade} */} - {/* {stage.number} */} + + + {romanize(stage.number)} + ); diff --git a/packages/website-ue/src/core/ui/romanize.ts b/packages/website-ue/src/core/ui/romanize.ts new file mode 100644 index 000000000..6f944fadd --- /dev/null +++ b/packages/website-ue/src/core/ui/romanize.ts @@ -0,0 +1,48 @@ +// Source - https://stackoverflow.com/a/9083076 +// Posted by Rene Pot, modified by community. See post 'Timeline' for change history +// Retrieved 2026-05-11, License - CC BY-SA 4.0 + +const keys = [ + "", + "C", + "CC", + "CCC", + "CD", + "D", + "DC", + "DCC", + "DCCC", + "CM", + "", + "X", + "XX", + "XXX", + "XL", + "L", + "LX", + "LXX", + "LXXX", + "XC", + "", + "I", + "II", + "III", + "IV", + "V", + "VI", + "VII", + "VIII", + "IX", +]; + +export function romanize(number: number) { + let digits = String(+number).split(""); + let roman = ""; + let i = 3; + + while (i--) { + roman = (keys[+digits.pop()! + i * 10] || "") + roman; + } + + return Array(+digits.join("") + 1).join("M") + roman; +}