Merge Add legal rating for South Korean servers (mr-483)

ed8a4d5 - feat(ext/cfx-ui): add legal rating for South Korean servers
citizenfx · Aug 23, 2024 · 662b09f · 662b09f
2 parents cc806d3 + ed8a4d5
commit 662b09f
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 12 deletions.
diff --git a/ext/cfx-ui/src/assets/images/GRAC-GTAV.png b/ext/cfx-ui/src/assets/images/GRAC-GTAV.png
diff --git a/ext/cfx-ui/src/assets/images/GRAC-RDR2.png b/ext/cfx-ui/src/assets/images/GRAC-RDR2.png
diff --git a/ext/cfx-ui/src/cfx/apps/mpMenu/parts/LegacyConnectingModal/ServerHeader.module.scss b/ext/cfx-ui/src/cfx/apps/mpMenu/parts/LegacyConnectingModal/ServerHeader.module.scss
@@ -0,0 +1,27 @@
+.rating {
+    display: flex;
+    align-items: center;
+
+    width: 100%;
+
+    padding-bottom: ui.offset('large');
+
+    .left {
+        width: ui.offset('large');
+        height: ui.control-height('normal');
+
+        background-color: ui.color('primary', 200);
+    }
+
+    .image {
+        width: 40%;
+    }
+
+    .right {
+        flex-grow: 1;
+
+        height: ui.control-height('normal');
+
+        background-color: ui.color('primary', 200);
+    }
+}
diff --git a/ext/cfx-ui/src/cfx/apps/mpMenu/parts/LegacyConnectingModal/ServerHeader.tsx b/ext/cfx-ui/src/cfx/apps/mpMenu/parts/LegacyConnectingModal/ServerHeader.tsx
@@ -8,8 +8,11 @@ import { observer } from 'mobx-react-lite';
 
 import { ServerIcon } from 'cfx/common/parts/Server/ServerIcon/ServerIcon';
 import { ServerTitle } from 'cfx/common/parts/Server/ServerTitle/ServerTitle';
+import { getServerLegalRatingImageURL } from 'cfx/common/services/servers/helpers';
 import { IServerView } from 'cfx/common/services/servers/types';
 
+import s from './ServerHeader.module.scss';
+
 export interface ServerHeaderProps {
   server: IServerView;
 }
@@ -18,22 +21,34 @@ export const ServerHeader = observer(function ServerHeader(props: ServerHeaderPr
     server,
   } = props;
 
+  const ratingImageURL = getServerLegalRatingImageURL(server);
+
   return (
-    <Box style={getStyle(server)}>
-      <Pad top size="xlarge" />
+    <Flex vertical>
+      <Box style={getStyle(server)}>
+        <Pad top size="xlarge" />
 
-      <Pad size="large">
-        <Flex vertical gap="large">
-          <Flex centered="axis">
-            <ServerIcon type="details" size="small" server={server} />
+        <Pad size="large">
+          <Flex vertical gap="large">
+            <Flex centered="axis">
+              <ServerIcon type="details" size="small" server={server} />
 
-            <Flex vertical>
-              <ServerTitle size="xxlarge" title={server.projectName || server.hostname} />
+              <Flex vertical>
+                <ServerTitle size="xxlarge" title={server.projectName || server.hostname} />
+              </Flex>
             </Flex>
           </Flex>
-        </Flex>
-      </Pad>
-    </Box>
+        </Pad>
+      </Box>
+
+      {ratingImageURL && (
+        <div className={s.rating}>
+          <div className={s.left} />
+          <img className={s.image} src={ratingImageURL} alt="Server Legal Rating" />
+          <div className={s.right} />
+        </div>
+      )}
+    </Flex>
   );
 });
 

diff --git a/ext/cfx-ui/src/cfx/common/pages/ServerDetailsPage/ServerDetailsPage.tsx b/ext/cfx-ui/src/cfx/common/pages/ServerDetailsPage/ServerDetailsPage.tsx
@@ -31,7 +31,7 @@ import { useAccountService } from 'cfx/common/services/account/account.service';
 import { ElementPlacements } from 'cfx/common/services/analytics/types';
 import { useIntlService } from 'cfx/common/services/intl/intl.service';
 import { $L, useL10n } from 'cfx/common/services/intl/l10n';
-import { isServerOffline } from 'cfx/common/services/servers/helpers';
+import { getServerLegalRatingImageURL, isServerOffline } from 'cfx/common/services/servers/helpers';
 import { IServersService } from 'cfx/common/services/servers/servers.service';
 import { IServerView, IServerViewPlayer, ServerViewDetailsLevel } from 'cfx/common/services/servers/types';
 import { useServerCountryTitle, useTimeoutFlag } from 'cfx/utils/hooks';
@@ -91,6 +91,8 @@ export const ServerDetailsPage = observer(function Details(props: ServerDetailsP
 
   const countryTitle = useServerCountryTitle(server.locale, server.localeCountry);
 
+  const ratingImageURL = getServerLegalRatingImageURL(server);
+
   return (
     <Page showLoader={isCompleteServerLoading}>
       <Island grow className={rootClassName}>
@@ -177,6 +179,10 @@ export const ServerDetailsPage = observer(function Details(props: ServerDetailsP
               >
                 <Pad top right bottom size="xlarge">
                   <Flex vertical gap="large">
+                    {ratingImageURL && (
+                      <img src={ratingImageURL} alt="Server Legal Rating" />
+                    )}
+
                     <Warning server={server} />
 
                     <ServerExtraDetails server={server} />

diff --git a/ext/cfx-ui/src/cfx/common/services/servers/helpers.ts b/ext/cfx-ui/src/cfx/common/services/servers/helpers.ts
@@ -1,5 +1,11 @@
+import { GameName } from 'cfx/base/game';
+import { currentGameNameIs } from 'cfx/base/gameRuntime';
+
 import { IServerView, ServerViewDetailsLevel } from './types';
 
+const southKoreaGRACFiveM = new URL('assets/images/GRAC-GTAV.png', import.meta.url).toString();
+const southKoreaGRACRedM = new URL('assets/images/GRAC-RDR2.png', import.meta.url).toString();
+
 export function showServerPremiumBadge(
   premium: IServerView['premium'],
 ): premium is NonNullable<IServerView['premium']> {
@@ -14,6 +20,18 @@ export function showServerCountryFlag(
   return lclocaleCountry !== 'aq' && lclocaleCountry !== '001';
 }
 
+export function getServerLegalRatingImageURL(server: IServerView): string | null {
+  if (server.localeCountry === 'KR') {
+    if (currentGameNameIs(GameName.RedM)) {
+      return southKoreaGRACRedM;
+    }
+
+    return southKoreaGRACFiveM;
+  }
+
+  return null;
+}
+
 export function showServerPowers(server: IServerView): boolean {
   if (!isServerBoostable(server)) {
     return false;