Show country flag in user list of webclient (#4431)

webclient/src/components/UserDisplay/UserDisplay.css

@@ -8,4 +8,9 @@
   height: 100%;
   display: flex;
   align-items: center;
-}
+}
+
+.user-display__country {
+  width: 1.1em;
+  margin-right: 0.4em;
+}

webclient/src/components/UserDisplay/UserDisplay.tsx

@@ -6,6 +6,7 @@ import { NavLink, generatePath } from "react-router-dom";
 import Menu from "@material-ui/core/Menu";
 import MenuItem from "@material-ui/core/MenuItem";
 
+import { Images } from "images/Images";
 import { SessionService } from "api";
 import { ServerSelectors } from "store";
 import { RouteEnum, User } from "types";
@@ -85,7 +86,7 @@ class UserDisplay extends Component<UserDisplayProps, UserDisplayState> {
   render() {
     const { user } = this.props;
     const { position } = this.state;
-    const { name } = user;
+    const { name, country } = user;
 
     const isABuddy = this.isABuddy();
     const isIgnored = this.isIgnored();
@@ -96,7 +97,7 @@ class UserDisplay extends Component<UserDisplayProps, UserDisplayState> {
       <div className="user-display">
         <NavLink to={generatePath(RouteEnum.PLAYER, { name })} className="plain-link">
           <div className="user-display__details" onContextMenu={this.handleClick}>
-            <div className="user-display__country"></div>
+            <img className="user-display__country" src={Images.Countries[country]} alt={country}></img>
             <div className="user-display__name single-line-ellipsis">{name}</div>
           </div>
         </NavLink>

webclient/src/images/Images.tsx

@@ -1,7 +1,7 @@
 import Countries from "./countries/_Countries";
 
 export class Images {
-  static Countries = [
+  static Countries = {
     ...Countries
-  ];
-}
+  };
+}

webclient/src/images/countries/_Countries.tsx

@@ -247,7 +247,7 @@ import za from "./za.svg";
 import zm from "./zm.svg";
 import zw from "./zw.svg";
 
-const Countries = [
+const Countries = {
   ad,
   ae,
   af,
@@ -496,6 +496,6 @@ const Countries = [
   za,
   zm,
   zw,
-];
+};
 
-export default Countries;
+export default Countries;