fix: show placeholder badge for defunct nations with no flag-icons code

Soviet Union (su), Yugoslavia (yu), East Germany, Germany DR, FR Yugoslavia,
and Czechoslovakia have no valid entry in flag-icons. Map them to null in
TEAM_ISO so getIso() returns null, and render a muted initials badge in
TeamFlag instead of a broken/empty sprite. Also drop the buggy 2-char
substring fallback that generated random valid codes for unknown teams.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-06-14 19:21:38 +02:00
parent 3955c7492b
commit b942ae7c8f
3 changed files with 46 additions and 9 deletions
+35 -1
View File
@@ -9,8 +9,42 @@ interface Props {
const sizes = { sm: 'text-lg', md: 'text-2xl', lg: 'text-4xl', xl: 'text-[60px]' } const sizes = { sm: 'text-lg', md: 'text-2xl', lg: 'text-4xl', xl: 'text-[60px]' }
const placeholderSize = {
sm: { width: '1.35em', height: '1em', fontSize: '0.38em' },
md: { width: '1.35em', height: '1em', fontSize: '0.38em' },
lg: { width: '1.35em', height: '1em', fontSize: '0.38em' },
xl: { width: '1.35em', height: '1em', fontSize: '0.38em' },
}
export function TeamFlag({ name, iso2, size = 'md', className = '' }: Props) { export function TeamFlag({ name, iso2, size = 'md', className = '' }: Props) {
const code = iso2 ?? getIso(name) const code = iso2 !== undefined ? iso2 : getIso(name)
if (!code) {
const abbr = name
.split(/\s+/)
.map(w => w[0])
.join('')
.slice(0, 3)
.toUpperCase()
return (
<span
className={`rounded-sm inline-flex items-center justify-center flex-shrink-0 ${sizes[size]} ${className}`}
style={{
...placeholderSize[size],
background: 'rgba(42,92,53,0.35)',
color: '#6abf7a',
fontFamily: 'Space Grotesk, sans-serif',
fontWeight: 700,
letterSpacing: '0.04em',
lineHeight: 1,
}}
title={name}
>
{abbr}
</span>
)
}
return ( return (
<span <span
className={`fi fi-${code} rounded-sm inline-block flex-shrink-0 ${sizes[size]} ${className}`} className={`fi fi-${code} rounded-sm inline-block flex-shrink-0 ${sizes[size]} ${className}`}
+9 -6
View File
@@ -1,4 +1,4 @@
export const TEAM_ISO: Record<string, string> = { export const TEAM_ISO: Record<string, string | null> = {
// A // A
'Afghanistan': 'af', 'Albania': 'al', 'Algeria': 'dz', 'Angola': 'ao', 'Afghanistan': 'af', 'Albania': 'al', 'Algeria': 'dz', 'Angola': 'ao',
'Argentina': 'ar', 'Armenia': 'am', 'Australia': 'au', 'Austria': 'at', 'Argentina': 'ar', 'Armenia': 'am', 'Australia': 'au', 'Austria': 'at',
@@ -19,7 +19,8 @@ export const TEAM_ISO: Record<string, string> = {
// F // F
'Finland': 'fi', 'France': 'fr', 'Finland': 'fi', 'France': 'fr',
// G // G
'Gabon': 'ga', 'Germany': 'de', 'West Germany': 'de', 'East Germany': 'de', 'Gabon': 'ga', 'Germany': 'de', 'West Germany': 'de',
'East Germany': null, 'Germany DR': null,
'Ghana': 'gh', 'Greece': 'gr', 'Guatemala': 'gt', 'Guinea': 'gn', 'Ghana': 'gh', 'Greece': 'gr', 'Guatemala': 'gt', 'Guinea': 'gn',
// H // H
'Haiti': 'ht', 'Honduras': 'hn', 'Hungary': 'hu', 'Haiti': 'ht', 'Honduras': 'hn', 'Hungary': 'hu',
@@ -48,10 +49,11 @@ export const TEAM_ISO: Record<string, string> = {
// Q // Q
'Qatar': 'qa', 'Qatar': 'qa',
// R // R
'Romania': 'ro', 'Russia': 'ru', 'Soviet Union': 'su', 'Romania': 'ro', 'Russia': 'ru', 'Soviet Union': null,
// S // S
'Saudi Arabia': 'sa', 'Scotland': 'gb-sct', 'Senegal': 'sn', 'Saudi Arabia': 'sa', 'Scotland': 'gb-sct', 'Senegal': 'sn',
'Serbia': 'rs', 'Yugoslavia': 'yu', 'Slovakia': 'sk', 'Slovenia': 'si', 'Serbia': 'rs', 'Yugoslavia': null, 'FR Yugoslavia': null, 'Czechoslovakia': null,
'Slovakia': 'sk', 'Slovenia': 'si',
'Somalia': 'so', 'South Africa': 'za', 'South Korea': 'kr', 'Somalia': 'so', 'South Africa': 'za', 'South Korea': 'kr',
'Korea Republic': 'kr', 'Spain': 'es', 'Sweden': 'se', 'Switzerland': 'ch', 'Korea Republic': 'kr', 'Spain': 'es', 'Sweden': 'se', 'Switzerland': 'ch',
// T // T
@@ -68,8 +70,9 @@ export const TEAM_ISO: Record<string, string> = {
'Zambia': 'zm', 'Zimbabwe': 'zw', 'Zambia': 'zm', 'Zimbabwe': 'zw',
} }
export function getIso(teamName: string): string { export function getIso(teamName: string): string | null {
return TEAM_ISO[teamName] ?? teamName.toLowerCase().replace(/\s+/g, '-').substring(0, 2) if (teamName in TEAM_ISO) return TEAM_ISO[teamName]
return null
} }
export function slugify(name: string): string { export function slugify(name: string): string {
+2 -2
View File
@@ -130,9 +130,9 @@ async function run() {
const teamCache = new Map<string, number>() const teamCache = new Map<string, number>()
async function upsertTeam(rawName: string, extra?: { iso2?: string; fifaCode?: string; continent?: string; confederation?: string }) { async function upsertTeam(rawName: string, extra?: { iso2?: string | null; fifaCode?: string; continent?: string; confederation?: string }) {
if (teamCache.has(rawName)) return teamCache.get(rawName)! if (teamCache.has(rawName)) return teamCache.get(rawName)!
const iso2 = extra?.iso2 ?? getIso(rawName) const iso2 = (extra && 'iso2' in extra) ? extra.iso2 : getIso(rawName)
const [row] = await db.execute(sql` const [row] = await db.execute(sql`
INSERT INTO teams (name, iso2, fifa_code, continent, confederation) INSERT INTO teams (name, iso2, fifa_code, continent, confederation)
VALUES (${rawName}, ${iso2 ?? null}, ${extra?.fifaCode ?? null}, ${extra?.continent ?? null}, ${extra?.confederation ?? null}) VALUES (${rawName}, ${iso2 ?? null}, ${extra?.fifaCode ?? null}, ${extra?.continent ?? null}, ${extra?.confederation ?? null})