feat: show country flag next to city names in top villes

Determine country from geoPoint coordinates using bounding boxes
for the main Ğ1 community countries (FR, BE, CH, ES, DE, IT, ...).
Display the emoji flag before each city name in the top villes panel.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
syoul
2026-03-22 18:52:00 +01:00
parent a8792641ab
commit 8d9a9a3c07
4 changed files with 70 additions and 26 deletions

View File

@@ -1,5 +1,6 @@
import { useRef } from 'react';
import type { PeriodStats } from '../services/DataService';
import { countryCodeToFlag } from '../services/adapters/CesiumAdapter';
interface StatsPanelProps {
stats: PeriodStats | null;
@@ -120,7 +121,9 @@ export function StatsPanel({ stats, loading, periodDays, source }: StatsPanelPro
>
<span className="text-base">{MEDALS[i]}</span>
<div className="flex-1 min-w-0">
<p className="text-white text-sm font-medium truncate">{city.name}</p>
<p className="text-white text-sm font-medium truncate">
{countryCodeToFlag(city.countryCode)}{city.countryCode ? ' ' : ''}{city.name}
</p>
<p className="text-[#6b7280] text-xs">{city.count} tx</p>
</div>
<span className="text-[#d4a843] text-sm font-mono shrink-0 flex items-center gap-1">