Added Africa page placeholder

codeaid · Aug 18, 2023 · 799b042 · 799b042
1 parent ed0c5cd
commit 799b042
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 2 deletions.
diff --git a/src/components/Toolbar/Toolbar.tsx b/src/components/Toolbar/Toolbar.tsx
@@ -81,6 +81,10 @@ export const Toolbar = (props: ToolbarProps) => {
           children: translate('POI:MAP_NAME_ALASKA'),
           href: '/alaska',
         },
+        {
+          children: translate('POI:MAP_NAME_AFRICA'),
+          href: '/africa',
+        },
       ].map((action, index) => (
         <NavLink
           activeClassName={styles.ToolbarActionActive}

diff --git a/src/lib/i18n.ts b/src/lib/i18n.ts
@@ -159,7 +159,7 @@ export const getGenericMarkerKey = (
     case 'lodge':
       return 'TOOLBOX:MARKER_LODGE';
     case 'parking':
-      return 'TOOLBOX:MARKER_PARKING';
+      return 'UI:MARKER_PARKING';
     case 'photo':
       return 'UI:MARKER_PHOTO';
     case 'shooting range':

diff --git a/src/pages/africa/index.tsx b/src/pages/africa/index.tsx
@@ -0,0 +1,46 @@
+import Head from 'next/head';
+import { useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { Modal } from 'components/Modal';
+import { useHuntingMapType, useTranslator, useTutorial } from 'hooks';
+import styles from './styles.module.css';
+
+const AfricaPage = () => {
+  // Retrieve map type switcher
+  const { onSetMapType } = useHuntingMapType();
+
+  // Render map tutorial dialog
+  const { component: tutorial } = useTutorial(true);
+
+  // Retrieve application translator
+  const translate = useTranslator();
+
+  // Toggle currently active map type on page load and unload
+  useEffect(() => {
+    onSetMapType('africa');
+    return () => onSetMapType();
+  }, [onSetMapType]);
+
+  return (
+    <>
+      <Head>
+        <title>
+          {`${translate('POI:MAP_NAME_AFRICA')} - ${translate(
+            'UI:GAME_TITLE',
+          )}`}
+        </title>
+      </Head>
+
+      <Modal blur={false} canClose={false} header="Notice">
+        <div className={styles.AfricaPageNotice}>
+          {translate('POI:MAP_NAME_AFRICA')} will be unlocked on Monday, 21
+          August
+        </div>
+      </Modal>
+
+      {createPortal(tutorial, document.body)}
+    </>
+  );
+};
+
+export default AfricaPage;
diff --git a/src/pages/africa/styles.module.css b/src/pages/africa/styles.module.css
@@ -0,0 +1,6 @@
+.AfricaPageNotice {
+  font-family: 'Fira Sans Condensed', sans-serif;
+  font-size: 1.7em;
+  line-height: 1.5em;
+  text-align: center;
+}
diff --git a/src/types/cartography.ts b/src/types/cartography.ts
@@ -28,7 +28,7 @@ export interface MapOptions {
   mapWidth: number;
 }
 
-export type MapType = 'alaska' | 'idaho' | 'transylvania';
+export type MapType = 'africa' | 'alaska' | 'idaho' | 'transylvania';
 
 export interface MapZoomOptions {
   zoomMax: number;