- {match.homeTeam.crest
- ?
+ {match.homeTeam.name
+ ?
:
🏳️
}
@@ -75,8 +76,8 @@ export default function TipModal({ match, onClose, onSaved }: Props) {
- {match.awayTeam.crest
- ?
+ {match.awayTeam.name
+ ?
:
🏳️
}
diff --git a/frontend/src/pages/DashboardPage.tsx b/frontend/src/pages/DashboardPage.tsx
index ff926fe..5e9a866 100644
--- a/frontend/src/pages/DashboardPage.tsx
+++ b/frontend/src/pages/DashboardPage.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { TrendingUp, TrendingDown } from 'lucide-react';
import { api, DashboardData, Match } from '../api/client';
+import { getFlagUrl } from '../utils/flagUrl';
import TipModal from '../components/TipModal';
import styles from './DashboardPage.module.css';
@@ -88,8 +89,8 @@ export default function DashboardPage(_props: Props) {
- {hero.match.homeTeam.crest ? (
-
+ {hero.match.homeTeam.name ? (
+
) : (
🏳️
)}
@@ -108,8 +109,8 @@ export default function DashboardPage(_props: Props) {
- {hero.match.awayTeam.crest ? (
-
+ {hero.match.awayTeam.name ? (
+
) : (
🏳️
)}
diff --git a/frontend/src/utils/flagUrl.ts b/frontend/src/utils/flagUrl.ts
new file mode 100644
index 0000000..1e8247a
--- /dev/null
+++ b/frontend/src/utils/flagUrl.ts
@@ -0,0 +1,66 @@
+/**
+ * Maps team names to local flag image paths.
+ * Flags are stored as static PNGs in /flags/{iso-code}.png
+ * Source: flagcdn.com (320px width, downloaded once)
+ */
+
+const TEAM_TO_FLAG: Record
= {
+ 'Algeria': 'dz',
+ 'Argentina': 'ar',
+ 'Australia': 'au',
+ 'Austria': 'at',
+ 'Belgium': 'be',
+ 'Bosnia-Herzegovina': 'ba',
+ 'Brazil': 'br',
+ 'Canada': 'ca',
+ 'Cape Verde Islands': 'cv',
+ 'Colombia': 'co',
+ 'Congo DR': 'cd',
+ 'Croatia': 'hr',
+ 'Curaçao': 'cw',
+ 'Czechia': 'cz',
+ 'Ecuador': 'ec',
+ 'Egypt': 'eg',
+ 'England': 'gb-eng',
+ 'France': 'fr',
+ 'Germany': 'de',
+ 'Ghana': 'gh',
+ 'Haiti': 'ht',
+ 'Iran': 'ir',
+ 'Iraq': 'iq',
+ 'Ivory Coast': 'ci',
+ 'Japan': 'jp',
+ 'Jordan': 'jo',
+ 'Mexico': 'mx',
+ 'Morocco': 'ma',
+ 'Netherlands': 'nl',
+ 'New Zealand': 'nz',
+ 'Norway': 'no',
+ 'Panama': 'pa',
+ 'Paraguay': 'py',
+ 'Portugal': 'pt',
+ 'Qatar': 'qa',
+ 'Saudi Arabia': 'sa',
+ 'Scotland': 'gb-sct',
+ 'Senegal': 'sn',
+ 'South Africa': 'za',
+ 'South Korea': 'kr',
+ 'Spain': 'es',
+ 'Sweden': 'se',
+ 'Switzerland': 'ch',
+ 'Tunisia': 'tn',
+ 'Turkey': 'tr',
+ 'United States': 'us',
+ 'Uruguay': 'uy',
+ 'Uzbekistan': 'uz',
+};
+
+/**
+ * Returns the local flag URL for a team name.
+ * Falls back to the original crest URL if no mapping exists.
+ */
+export function getFlagUrl(teamName: string, fallbackCrest: string | null): string {
+ const code = TEAM_TO_FLAG[teamName];
+ if (code) return `/flags/${code}.png`;
+ return fallbackCrest || '';
+}