diff --git a/src/components/Toolbar/Toolbar.tsx b/src/components/Toolbar/Toolbar.tsx index a7485e0f..d4bd62b3 100644 --- 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) => ( { + // 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 ( + <> + + + {`${translate('POI:MAP_NAME_AFRICA')} - ${translate( + 'UI:GAME_TITLE', + )}`} + + + + +
+ {translate('POI:MAP_NAME_AFRICA')} will be unlocked on Monday, 21 + August +
+ + + {createPortal(tutorial, document.body)} + + ); +}; + +export default AfricaPage; diff --git a/src/pages/africa/styles.module.css b/src/pages/africa/styles.module.css new file mode 100644 index 00000000..45253f50 --- /dev/null +++ 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 index 2b48a80a..a0566aba 100644 --- 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;