Starship Survivors Wiki

RarityBadge

3 min read

PURPOSE

Renders a circular letter badge intended to dangle off the upper-left corner of a rarity card. The colored fill matches the rarity tier, and the centered letter is drawn in Cal Sans white with a black stroke approximated via multi-layer text-shadow.

OWNS

  • The RarityBadge named React function component.
  • The local Props interface (letter, fill, radius, optional style).
  • The inline-style computation for the badge wrapper <div>, including circle geometry (size = radius * 2), letter sizing (fontSize = round(radius * 1.05)), border, drop shadow, font stack, and the four-direction text-shadow stroke.

READS FROM

  • Props.letter — single character/string painted in the center.
  • Props.fill — CSS color used as the circle background.
  • Props.radius — outer-circle radius in pixels, drives both size and fontSize.
  • Props.style — optional CSSProperties spread over the computed style object, so callers can override or extend (typically for positioning relative to the parent card).
  • CSSProperties type imported from react.

PUSHES TO

  • Returns a single <div aria-hidden> JSX element with all styling applied inline. No external state, store, or DOM target is written.

DOES NOT

  • Does not import or consume any rarity data, theme, or store; the caller supplies letter and fill directly.
  • Does not position itself; absolute/relative placement is the parent card’s responsibility (passed via style if needed).
  • Does not handle pointer or keyboard interaction — pointerEvents: 'none' and aria-hidden mark it as purely decorative.
  • Does not animate, transition, or react to hover/focus.
  • Does not load fonts; relies on 'Cal Sans' being available with Impact, sans-serif as fallback.

Signals

  • Visual signal only: rarity tier is encoded by fill color and letter glyph.
  • aria-hidden removes the badge from the accessibility tree, so screen readers ignore it; the rarity must be conveyed elsewhere in the card.

Entry points

  • Named export RarityBadge({ letter, fill, radius, style }) consumed by rarity-card components in src/metagame/.

Pattern notes

  • Inline-style component with no CSS module or stylesheet dependency — keeps the badge self-contained and themable per call site.
  • Letter stroke is faked with a four-direction text-shadow (-1/+1px on each axis) rather than an SVG stroke, avoiding a nested SVG element.
  • Geometry is fully derived from radius: width/height equal radius * 2, font size is round(radius * 1.05), so a single prop scales the entire badge.
  • Border is 1px solid rgba(0,0,0,0.7) with a 0 1px 0 rgba(0,0,0,0.45) box-shadow for a subtle lift against the card.
  • borderRadius: '50%' plus equal width/height yields the circular shape; flexbox centers the letter.
  • Caller-supplied style is spread last, so callers can override any computed property (e.g., positioning, transform, z-index).

Graph View