Add country dropdown and flags (#28)

* Add country dropdown and flags

* Fix build for country flags

* Improve country select filtering and scoreboard teams

* Fix country select display value

* Fix country select input display

src/graphics/scoreboard/main.vue

@@ -2,6 +2,7 @@
 import { useHead } from '@unhead/vue';
 import { computed } from 'vue';
 import { playersReplicant, scoreboardReplicant } from '../../browser_shared/replicants';
+import { resolveCountryCode } from '../../shared/countries';
 import type { Schemas } from '../../types';
 
 useHead({ title: 'Scoreboard' });
@@ -35,6 +36,53 @@ const rightName = computed(() => {
   return player?.gamertag || 'Jugador 2';
 });
 
+const leftTeam = computed(() => {
+  const player = players.value[scoreboard.value.leftPlayerId];
+  return player?.team || '';
+});
+
+const rightTeam = computed(() => {
+  const player = players.value[scoreboard.value.rightPlayerId];
+  return player?.team || '';
+});
+
+const flagModules = import.meta.glob('/node_modules/flag-icons/flags/4x3/*.svg', {
+  eager: true,
+  import: 'default',
+  query: '?url',
+}) as Record<string, string>;
+
+const flagByCode = Object.fromEntries(
+  Object.entries(flagModules)
+    .map(([path, url]) => {
+      const filename = path.split('/').pop();
+      const code = filename?.replace('.svg', '');
+      if (!code) {
+        return null;
+      }
+      return [code.toLowerCase(), url] as const;
+    })
+    .filter((entry): entry is readonly [string, string] => Boolean(entry)),
+);
+
+const getFlagUrl = (country: string | undefined) => {
+  const code = resolveCountryCode(country);
+  if (!code) {
+    return '';
+  }
+  return flagByCode[code.toLowerCase()] ?? '';
+};
+
+const leftFlagUrl = computed(() => {
+  const player = players.value[scoreboard.value.leftPlayerId];
+  return getFlagUrl(player?.country);
+});
+
+const rightFlagUrl = computed(() => {
+  const player = players.value[scoreboard.value.rightPlayerId];
+  return getFlagUrl(player?.country);
+});
+
 const roundText = computed(() => scoreboard.value.round || 'Round');
 </script>
 
@@ -69,20 +117,46 @@ const roundText = computed(() => scoreboard.value.round || 'Round');
         <img src="./img/name1.svg" alt="" />
 
         <div id="p1-name-text-wrapper" class="name-text-wrapper">
+          <span v-if="leftTeam" class="team-text">
+            {{ leftTeam }}
+          </span>
           <span class="gamertag-text">
             {{ leftName }}
           </span>
         </div>
+
+        <div
+          v-if="leftFlagUrl"
+          id="p1-flag-wrapper"
+          class="flag-wrapper"
+        >
+          <div class="flag-mask">
+            <img class="flag" :src="leftFlagUrl" alt="" />
+          </div>
+        </div>
       </div>
 
       <div id="p2-name-wrapper" class="name-wrapper">
         <img src="./img/name2.svg" alt="" />
 
         <div id="p2-name-text-wrapper" class="name-text-wrapper">
+          <span v-if="rightTeam" class="team-text">
+            {{ rightTeam }}
+          </span>
           <span class="gamertag-text">
             {{ rightName }}
           </span>
         </div>
+
+        <div
+          v-if="rightFlagUrl"
+          id="p2-flag-wrapper"
+          class="flag-wrapper"
+        >
+          <div class="flag-mask">
+            <img class="flag" :src="rightFlagUrl" alt="" />
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -107,6 +181,11 @@ const roundText = computed(() => scoreboard.value.round || 'Round');
     var(--name-panel-height) * 0.5 - (var(--name-text-height) * 0.5)
   );
 
+  --flag-width: 38px;
+  --flag-height: 26px;
+  --flag-offset-x: 16px;
+  --flag-offset-y: 12px;
+
   --games-text-width: calc(var(--main-panel-width) * 0.11);
   --games-text-height: calc(var(--main-panel-height) * 0.8);
   --games-text-offset-x: calc(var(--main-panel-width) * 0.04);
@@ -233,6 +312,40 @@ img {
   text-overflow: ellipsis;
 }
 
+.team-text {
+  color: #a5a5a5;
+  margin-right: 8px;
+}
+
+.flag-wrapper {
+  position: absolute;
+  top: var(--flag-offset-y);
+  height: var(--flag-height);
+  width: var(--flag-width);
+  z-index: 1;
+}
+
+#p1-flag-wrapper {
+  left: var(--flag-offset-x);
+}
+
+#p2-flag-wrapper {
+  right: var(--flag-offset-x);
+}
+
+.flag-mask {
+  width: 100%;
+  height: 100%;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.flag {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
 .games-text-wrapper {
   position: absolute;
   top: var(--games-text-offset-y);