Achievement Trophy Wall Features Block for React

Edit MILESTONES at the top of the file: each entry is an icon, a name, the rule that unlocks it and, for a locked one, a progress with have, need and unit. Leave progress out and the milestone is unlocked. The header's count, the percent and the bar are all counted from that list, so they never disagree with the wall. Keep the total at a multiple of four so the wall fills its rows at every width.

Each badge has a press target laid over its cell. Clicking, tapping, or pressing Enter or Space opens the tooltip; Escape closes it. It doesn't open on hover alone, because a hover card can't be reached by keyboard, and the same tooltip works on every target. The rule is also what the tooltip says to assistive technology, and the badge's name and standing are always in the page as text.

No. Unlocked is a filled medallion and locked is an outlined, muted one with a lock, and the words "Unlocked" or "Locked" sit under every name. The block is greyscale and follows your theme in light and dark, so nothing is tied to a palette.

The bar is decoration; its meaning is the sentence beside it, "6 of 8 unlocked", which is real text. That keeps one clear announcement instead of a bar and a sentence saying the same thing.

The header stacks and the progress bar takes the full width. The wall is two badges across and four rows tall, with each cell a comfortable press target. Nothing scrolls sideways at 320 pixels.

The header and the wall fade up once when the page loads, with a CSS transition, and the tooltip fades in. With reduced motion the entrance is off and the tooltip appears without animation. Nothing loops.