From b942ae7c8fc4679d4152ff09e7fcd052d4bf40b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Sun, 14 Jun 2026 19:21:38 +0200
Subject: [PATCH] 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>
---
 components/team-flag.tsx | 36 +++++++++++++++++++++++++++++++++++-
 lib/iso-codes.ts         | 15 +++++++++------
 scripts/sync.ts          |  4 ++--
 3 files changed, 46 insertions(+), 9 deletions(-)

diff --git a/components/team-flag.tsx b/components/team-flag.tsx
index 8ea2f0b..541d4a2 100644
--- a/components/team-flag.tsx
+++ b/components/team-flag.tsx
@@ -9,8 +9,42 @@ interface Props {
 
 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) {
-  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 (
     <span
       className={`fi fi-${code} rounded-sm inline-block flex-shrink-0 ${sizes[size]} ${className}`}
diff --git a/lib/iso-codes.ts b/lib/iso-codes.ts
index c59ff0b..f8b6482 100644
--- a/lib/iso-codes.ts
+++ b/lib/iso-codes.ts
@@ -1,4 +1,4 @@
-export const TEAM_ISO: Record<string, string> = {
+export const TEAM_ISO: Record<string, string | null> = {
   // A
   'Afghanistan': 'af', 'Albania': 'al', 'Algeria': 'dz', 'Angola': 'ao',
   'Argentina': 'ar', 'Armenia': 'am', 'Australia': 'au', 'Austria': 'at',
@@ -19,7 +19,8 @@ export const TEAM_ISO: Record<string, string> = {
   // F
   'Finland': 'fi', 'France': 'fr',
   // 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',
   // H
   'Haiti': 'ht', 'Honduras': 'hn', 'Hungary': 'hu',
@@ -48,10 +49,11 @@ export const TEAM_ISO: Record<string, string> = {
   // Q
   'Qatar': 'qa',
   // R
-  'Romania': 'ro', 'Russia': 'ru', 'Soviet Union': 'su',
+  'Romania': 'ro', 'Russia': 'ru', 'Soviet Union': null,
   // S
   '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',
   'Korea Republic': 'kr', 'Spain': 'es', 'Sweden': 'se', 'Switzerland': 'ch',
   // T
@@ -68,8 +70,9 @@ export const TEAM_ISO: Record<string, string> = {
   'Zambia': 'zm', 'Zimbabwe': 'zw',
 }
 
-export function getIso(teamName: string): string {
-  return TEAM_ISO[teamName] ?? teamName.toLowerCase().replace(/\s+/g, '-').substring(0, 2)
+export function getIso(teamName: string): string | null {
+  if (teamName in TEAM_ISO) return TEAM_ISO[teamName]
+  return null
 }
 
 export function slugify(name: string): string {
diff --git a/scripts/sync.ts b/scripts/sync.ts
index e0b4f1f..51b1154 100644
--- a/scripts/sync.ts
+++ b/scripts/sync.ts
@@ -130,9 +130,9 @@ async function run() {
 
   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)!
-    const iso2 = extra?.iso2 ?? getIso(rawName)
+    const iso2 = (extra && 'iso2' in extra) ? extra.iso2 : getIso(rawName)
     const [row] = await db.execute(sql`
       INSERT INTO teams (name, iso2, fifa_code, continent, confederation)
       VALUES (${rawName}, ${iso2 ?? null}, ${extra?.fifaCode ?? null}, ${extra?.continent ?? null}, ${extra?.confederation ?? null})