From f984b91602b66b6c238750f26bd3faa4407cd27f Mon Sep 17 00:00:00 2001
From: "Kalle (Sendou)" <38327916+Sendouc@users.noreply.github.com>
Date: Sat, 13 Mar 2021 20:50:46 +0200
Subject: [PATCH] use flag images instead of emojis (fixes windows)

---
 components/builds/BuildCard.tsx  |  4 ++--
 components/common/Flag.tsx       | 11 +++++++++++
 components/t/RosterPlayerBar.tsx |  8 +++++---
 components/u/AvatarWithInfo.tsx  | 11 ++++++-----
 next.config.js                   |  3 +++
 pages/freeagents.tsx             | 11 ++++++-----
 pages/t/index.tsx                | 15 +++++++++------
 pages/u/index.tsx                | 12 ++++++------
 8 files changed, 48 insertions(+), 27 deletions(-)
 create mode 100644 components/common/Flag.tsx

diff --git a/components/builds/BuildCard.tsx b/components/builds/BuildCard.tsx
index a3c97fa2d..d64b5bd15 100644
--- a/components/builds/BuildCard.tsx
+++ b/components/builds/BuildCard.tsx
@@ -10,11 +10,11 @@ import {
 } from "@chakra-ui/react";
 import { Plural, t, Trans } from "@lingui/macro";
 import { Ability, Prisma } from "@prisma/client";
+import Flag from "components/common/Flag";
 import ModeImage from "components/common/ModeImage";
 import MyIconButton from "components/common/MyIconButton";
 import UserAvatar from "components/common/UserAvatar";
 import WeaponImage from "components/common/WeaponImage";
-import { getEmojiFlag } from "countries-list";
 import { useMyTheme } from "hooks/common";
 import Image from "next/image";
 import Link from "next/link";
@@ -103,7 +103,7 @@ const BuildCard: React.FC<BuildCardProps & BoxProps> = ({
               {build.updatedAt.toLocaleDateString()}
             </Box>
             {build.jpn ? (
-              <>{getEmojiFlag("JP")}</>
+              <Flag countryCode="JP" />
             ) : build.top500 ? (
               <Image
                 src={`/layout/xsearch.png`}
diff --git a/components/common/Flag.tsx b/components/common/Flag.tsx
new file mode 100644
index 000000000..24ac3dbbc
--- /dev/null
+++ b/components/common/Flag.tsx
@@ -0,0 +1,11 @@
+import Image from "next/image";
+
+export default function Flag({ countryCode }: { countryCode: string }) {
+  return (
+    <Image
+      width={16}
+      height={16}
+      src={`https://www.countryflags.io/${countryCode}/flat/16.png`}
+    />
+  );
+}
diff --git a/components/t/RosterPlayerBar.tsx b/components/t/RosterPlayerBar.tsx
index bdc80b489..b4b62997e 100644
--- a/components/t/RosterPlayerBar.tsx
+++ b/components/t/RosterPlayerBar.tsx
@@ -1,8 +1,8 @@
 import { Box, Center, Flex } from "@chakra-ui/react";
+import Flag from "components/common/Flag";
 import MyLink from "components/common/MyLink";
 import UserAvatar from "components/common/UserAvatar";
 import WeaponImage from "components/common/WeaponImage";
-import { getEmojiFlag } from "countries-list";
 import { useMyTheme } from "hooks/common";
 import { GetTeamData } from "prisma/queries/getTeam";
 import { Unpacked } from "utils/types";
@@ -45,8 +45,10 @@ const RosterPlayerBar: React.FC<Props> = ({ user }) => {
           fontWeight="medium"
           fontSize="sm"
         >
-          {user.username}#{user.discriminator}{" "}
-          {user.profile?.country ? getEmojiFlag(user.profile.country) : ""}
+          <Box mr={1}>
+            {user.username}#{user.discriminator}
+          </Box>{" "}
+          {user.profile?.country && <Flag countryCode={user.profile.country} />}
         </Flex>
       </MyLink>
       <Box display={["block", "none"]} />
diff --git a/components/u/AvatarWithInfo.tsx b/components/u/AvatarWithInfo.tsx
index c7ea94caf..d34fcad02 100644
--- a/components/u/AvatarWithInfo.tsx
+++ b/components/u/AvatarWithInfo.tsx
@@ -8,13 +8,14 @@ import {
 } from "@chakra-ui/react";
 import { t, Trans } from "@lingui/macro";
 import { LeagueType, RankedMode } from "@prisma/client";
+import Flag from "components/common/Flag";
 import ModeImage from "components/common/ModeImage";
 import MyLink from "components/common/MyLink";
 import SubText from "components/common/SubText";
 import TwitterAvatar from "components/common/TwitterAvatar";
 import UserAvatar from "components/common/UserAvatar";
 import WeaponImage from "components/common/WeaponImage";
-import { countries, getEmojiFlag } from "countries-list";
+import { countries } from "countries-list";
 import { useMyTheme, useUser } from "hooks/common";
 import Image from "next/image";
 import { GetUserByIdentifierData } from "prisma/queries/getUserByIdentifier";
@@ -72,16 +73,16 @@ const AvatarWithInfo: React.FC<AvatarWithInfoProps> = ({
             </Heading>
           </Flex>
           {user.profile?.country && (
-            <Box mx="auto" my={1}>
-              <Box as="span" mr={1}>
-                {getEmojiFlag(user.profile.country)}{" "}
+            <Flex align="center" mx="auto" my={1}>
+              <Box as="span" mr={1} mt={1}>
+                <Flag countryCode={user.profile.country} />{" "}
               </Box>
               {
                 Object.entries(countries).find(
                   ([key]) => key === user.profile!.country
                 )![1].name
               }
-            </Box>
+            </Flex>
           )}
           {user.team && (
             <Flex align="center" justify="center" my={2}>
diff --git a/next.config.js b/next.config.js
index 10b5b6b00..25582de63 100644
--- a/next.config.js
+++ b/next.config.js
@@ -12,6 +12,9 @@ module.exports = withImages({
   experimental: {
     optimizeFonts: true,
   },
+  images: {
+    domains: ["www.countryflags.io"],
+  },
   // i18n: {
   //  v-- import from lib/locales
   //   locales: [
diff --git a/pages/freeagents.tsx b/pages/freeagents.tsx
index 4d2342ee4..ba02ca10a 100644
--- a/pages/freeagents.tsx
+++ b/pages/freeagents.tsx
@@ -17,6 +17,7 @@ import {
 } from "@chakra-ui/react";
 import { t, Trans } from "@lingui/macro";
 import { Playstyle } from "@prisma/client";
+import Flag from "components/common/Flag";
 import Markdown from "components/common/Markdown";
 import MyLink from "components/common/MyLink";
 import SubText from "components/common/SubText";
@@ -25,7 +26,7 @@ import UserAvatar from "components/common/UserAvatar";
 import WeaponImage from "components/common/WeaponImage";
 import FAModal from "components/freeagents/FAModal";
 import HeaderBanner from "components/layout/HeaderBanner";
-import { countries, getEmojiFlag } from "countries-list";
+import { countries } from "countries-list";
 import { useMyTheme, useUser } from "hooks/common";
 import { useFreeAgents } from "hooks/freeagents";
 import { useRouter } from "next/router";
@@ -278,16 +279,16 @@ const FreeAgentCard = ({
         </Flex>
 
         {post.user.profile?.country && (
-          <Box ml={2} my={2}>
-            <Box as="span" mr={2}>
-              {getEmojiFlag(post.user.profile.country)}{" "}
+          <Flex align="center" ml={2} my={2}>
+            <Box as="span" mr={1} mt={1}>
+              <Flag countryCode={post.user.profile.country} />{" "}
             </Box>
             {
               Object.entries(countries).find(
                 ([key]) => key === post.user.profile?.country
               )![1].name
             }
-          </Box>
+          </Flex>
         )}
 
         {post.user.profile && post.user.profile?.weaponPool.length > 0 && (
diff --git a/pages/t/index.tsx b/pages/t/index.tsx
index 76ff38c40..e758ca56f 100644
--- a/pages/t/index.tsx
+++ b/pages/t/index.tsx
@@ -11,6 +11,7 @@ import {
 } from "@chakra-ui/react";
 import { t, Trans } from "@lingui/macro";
 import ChakraSelect from "components/common/ChakraSelect";
+import Flag from "components/common/Flag";
 import Markdown from "components/common/Markdown";
 import MyLink from "components/common/MyLink";
 import SubText from "components/common/SubText";
@@ -18,7 +19,7 @@ import SubTextCollapse from "components/common/SubTextCollapse";
 import TwitterAvatar from "components/common/TwitterAvatar";
 import HeaderBanner from "components/layout/HeaderBanner";
 import CreateNewTeamModal from "components/t/CreateNewTeamModal";
-import { countries, getEmojiFlag } from "countries-list";
+import { countries } from "countries-list";
 import { useMyTheme, useUser } from "hooks/common";
 import { GetStaticProps } from "next";
 import Image from "next/image";
@@ -133,11 +134,13 @@ const TeamsPage = ({ teams }: Props) => {
                 </Box>
               </MyLink>
 
-              <Box ml={2}>
-                {team.countries
-                  .map((country) => getEmojiFlag(country))
-                  .join("  ")}
-              </Box>
+              <Flex ml={2}>
+                {team.countries.map((country) => (
+                  <Box mr={1}>
+                    <Flag key={country} countryCode={country} />
+                  </Box>
+                ))}
+              </Flex>
             </Flex>
             <Box color={gray} fontSize="sm" mt={2}>
               {team.roster
diff --git a/pages/u/index.tsx b/pages/u/index.tsx
index 948fd5d1c..6c4f5c671 100644
--- a/pages/u/index.tsx
+++ b/pages/u/index.tsx
@@ -5,10 +5,10 @@ import {
   InputGroup,
   InputLeftElement,
 } from "@chakra-ui/react";
+import Flag from "components/common/Flag";
 import MyLink from "components/common/MyLink";
 import UserAvatar from "components/common/UserAvatar";
 import HeaderBanner from "components/layout/HeaderBanner";
-import { getEmojiFlag } from "countries-list";
 import { useDebounce, useMyTheme } from "hooks/common";
 import { GetStaticProps } from "next";
 import Head from "next/head";
@@ -96,14 +96,14 @@ const UserSearchPage = ({ users }: Props) => {
 
 function UserInfo({ user }: { user: Unpacked<GetAllUsersData> }) {
   return (
-    <Flex my={6} align="center">
+    <Flex my={3} align="center">
       <Link href={`/u/${user.discordId}`}>
         <a>
           <UserAvatar isSmall user={user} />
         </a>
       </Link>
       <Box ml={4}>
-        <Box fontWeight="bold">
+        <Flex align="center" fontWeight="bold">
           <MyLink
             href={`/u/${user.discordId}`}
             isColored={false}
@@ -112,11 +112,11 @@ function UserInfo({ user }: { user: Unpacked<GetAllUsersData> }) {
             {user.username}#{user.discriminator}
           </MyLink>
           {user.profile?.country ? (
-            <Box as="span" ml={2}>
-              {getEmojiFlag(user.profile.country)}
+            <Box ml={2} mt={2}>
+              <Flag countryCode={user.profile.country} />
             </Box>
           ) : null}
-        </Box>
+        </Flex>
         {user.profile?.twitterName && (
           <Flex align="center" fontSize="sm" mt={1}>
             <Box as={FaTwitter} color="#00acee" mr={1} />