Function WorldMap

freebuff/web/src/app/live/live-client.tsx:155–358

({
  stats,
  compact = false,
  isLoading = false,
}: {
  stats: FreebuffLiveStats
  compact?: boolean
  isLoading?: boolean
})

}

function WorldMap({
  stats,
  compact = false,
  isLoading = false,
}: {
  stats: FreebuffLiveStats
  compact?: boolean
  isLoading?: boolean
}) {
  const maxCount = Math.max(1, ...stats.countries.map((row) => row.count))
  const plottedCountries = stats.countries
    .map((country) => {
      const point = COUNTRY_POINT_LOOKUP[country.countryCode]
      return point ? { ...country, point } : null
    })
    .filter(isPlottedCountry)
  const unplottedCount = stats.countries.length - plottedCountries.length

  return (
    <section className="relative self-start overflow-hidden rounded-lg border border-white/10 bg-[#020807] shadow-[0_24px_90px_rgba(0,0,0,0.34),inset_0_1px_0_rgba(255,255,255,0.05)]">
      <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_50%_28%,rgba(34,211,238,0.14),transparent_38%),linear-gradient(180deg,rgba(124,255,63,0.04),rgba(0,0,0,0.2))]" />
      {!compact && (
        <div className="pointer-events-none absolute left-4 top-4 z-10 rounded-md border border-white/10 bg-black/45 px-3 py-2 backdrop-blur md:left-5 md:top-5">
          <div className="font-mono text-[10px] uppercase tracking-[0.22em] text-white/45">
            Active countries
          </div>
          <div className="mt-1 text-2xl font-serif leading-none text-white">
            {stats.countries.length.toLocaleString()}
          </div>
        </div>
      )}

      <svg
        viewBox={`0 0 ${MAP_SIZE.width} ${MAP_SIZE.height}`}
        role="img"
        aria-label="World map of live Freebuff users by country"
        className={cn(
          'relative w-full',
          compact ? 'h-[230px] md:h-[380px]' : 'h-[300px] md:h-[520px]',
        )}
      >
        <defs>
          <pattern
            id="live-map-grid"
            width="48"
            height="48"
            patternUnits="userSpaceOnUse"
          >
            <path
              d="M48 0H0V48"
              fill="none"
              stroke="rgba(124,255,63,0.055)"
              strokeWidth="1"
            />
          </pattern>
          <linearGradient id="live-ocean" x1="0" x2="1" y1="0" y2="1">
            <stop offset="0%" stopColor="#03100d" />
            <stop offset="46%" stopColor="#041918" />