diff --git a/src/config/namespaces.ts b/src/config/namespaces.ts index e8e956d..5a10bf8 100644 --- a/src/config/namespaces.ts +++ b/src/config/namespaces.ts @@ -24,4 +24,7 @@ export const SERVER_PAGE = { VILLAGE_PAGE: { INDEX_PAGE: 'server-page/village-page/index-page', }, + RANKING_PAGE: { + COMMON: 'server-page/ranking-page/common', + }, }; diff --git a/src/config/routes.ts b/src/config/routes.ts index 2dda7b2..d287580 100644 --- a/src/config/routes.ts +++ b/src/config/routes.ts @@ -20,6 +20,7 @@ export const SERVER_PAGE = { INDEX_PAGE: '/server/:key/village/:id', }, RANKING_PAGE: { + BASE: '/server/:key/ranking', PLAYER_PAGE: { INDEX_PAGE: '/server/:key/ranking/player', OD_PAGE: '/server/:key/ranking/player/od', diff --git a/src/features/ServerPage/ServerPage.tsx b/src/features/ServerPage/ServerPage.tsx index 40afe31..309b46e 100644 --- a/src/features/ServerPage/ServerPage.tsx +++ b/src/features/ServerPage/ServerPage.tsx @@ -7,6 +7,7 @@ import IndexPage from './features/IndexPage/IndexPage'; import PlayerPage from './features/PlayerPage/PlayerPage'; import TribePage from './features/TribePage/TribePage'; import VillagePage from './features/VillagePage/VillagePage'; +import RankingPage from './features/RankingPage/RankingPage'; import NotFoundPage from '../NotFoundPage/NotFoundPage'; const EnhancedRoute = ({ children, ...rest }: RouteProps) => { @@ -32,6 +33,9 @@ function ServerPage() { + + + diff --git a/src/features/ServerPage/common/PageLayout/components/Sidebar/Sidebar.tsx b/src/features/ServerPage/common/PageLayout/components/Sidebar/Sidebar.tsx index 11cbc89..54a58cb 100644 --- a/src/features/ServerPage/common/PageLayout/components/Sidebar/Sidebar.tsx +++ b/src/features/ServerPage/common/PageLayout/components/Sidebar/Sidebar.tsx @@ -43,46 +43,54 @@ const Sidebar = ({ t, className, open, variant, onClose, onOpen }: Props) => { to: ROUTES.SERVER_PAGE.INDEX_PAGE, params: { key }, Icon: , + exact: true, }, { name: t('pageLayout.sidebar.routes.rankings.name'), Icon: , + to: ROUTES.SERVER_PAGE.RANKING_PAGE.BASE, nested: [ { name: t('pageLayout.sidebar.routes.rankings.player.index'), to: ROUTES.SERVER_PAGE.RANKING_PAGE.PLAYER_PAGE.INDEX_PAGE, params: { key }, Icon: , + exact: true, }, { name: t('pageLayout.sidebar.routes.rankings.player.od'), to: ROUTES.SERVER_PAGE.RANKING_PAGE.PLAYER_PAGE.OD_PAGE, params: { key }, Icon: , + exact: true, }, { name: t('pageLayout.sidebar.routes.rankings.player.archive'), to: ROUTES.SERVER_PAGE.RANKING_PAGE.PLAYER_PAGE.ARCHIVE_PAGE, params: { key }, Icon: , + exact: true, }, { name: t('pageLayout.sidebar.routes.rankings.tribe.index'), to: ROUTES.SERVER_PAGE.RANKING_PAGE.TRIBE_PAGE.INDEX_PAGE, params: { key }, Icon: , + exact: true, }, { name: t('pageLayout.sidebar.routes.rankings.tribe.od'), to: ROUTES.SERVER_PAGE.RANKING_PAGE.TRIBE_PAGE.OD_PAGE, params: { key }, Icon: , + exact: true, }, { name: t('pageLayout.sidebar.routes.rankings.tribe.archive'), to: ROUTES.SERVER_PAGE.RANKING_PAGE.TRIBE_PAGE.ARCHIVE_PAGE, params: { key }, Icon: , + exact: true, }, ], }, @@ -91,12 +99,14 @@ const Sidebar = ({ t, className, open, variant, onClose, onOpen }: Props) => { to: ROUTES.SERVER_PAGE.ENNOBLEMENTS_PAGE, params: { key }, Icon: , + exact: true, }, { name: t('pageLayout.sidebar.routes.map'), to: ROUTES.SERVER_PAGE.MAP_PAGE, params: { key }, Icon: , + exact: true, }, ]; diff --git a/src/features/ServerPage/common/PageLayout/components/Sidebar/components/Nav/ListItem.tsx b/src/features/ServerPage/common/PageLayout/components/Sidebar/components/Nav/ListItem.tsx index 233b5cc..80f4459 100644 --- a/src/features/ServerPage/common/PageLayout/components/Sidebar/components/Nav/ListItem.tsx +++ b/src/features/ServerPage/common/PageLayout/components/Sidebar/components/Nav/ListItem.tsx @@ -1,5 +1,5 @@ import React, { Fragment, useState } from 'react'; -import { useLocation, generatePath } from 'react-router-dom'; +import { useLocation, generatePath, matchPath } from 'react-router-dom'; import { Route } from './types'; import { makeStyles } from '@material-ui/core/styles'; @@ -25,12 +25,8 @@ function ListItem({ route, nestedLevel }: Props) { const classes = useStyles(); const { pathname } = useLocation(); const hasNested = Array.isArray(route.nested) && route.nested.length > 0; - const generatedPath = - route.to && route.params - ? generatePath(route.to, route.params) - : route.to - ? route.to - : ''; + const isActive = + route.to && matchPath(pathname, { path: route.to, exact: route.exact }); const getItem = () => { return ( @@ -43,12 +39,17 @@ function ListItem({ route, nestedLevel }: Props) { > {route.Icon} - + {hasNested && ( {open ? : } )} @@ -59,14 +60,7 @@ function ListItem({ route, nestedLevel }: Props) { return ( {!hasNested && route.to ? ( - + {getItem()} ) : ( diff --git a/src/features/ServerPage/common/PageLayout/components/Sidebar/components/Nav/types.ts b/src/features/ServerPage/common/PageLayout/components/Sidebar/components/Nav/types.ts index 95e6a2a..ad8c708 100644 --- a/src/features/ServerPage/common/PageLayout/components/Sidebar/components/Nav/types.ts +++ b/src/features/ServerPage/common/PageLayout/components/Sidebar/components/Nav/types.ts @@ -3,6 +3,7 @@ import { Props } from '@common/Link/Link'; export interface Route { name: string; to?: string; + exact?: boolean; params?: Props['params']; Icon: React.ReactElement; nested?: Route[]; diff --git a/src/features/ServerPage/features/RankingPage/RankingPage.tsx b/src/features/ServerPage/features/RankingPage/RankingPage.tsx new file mode 100644 index 0000000..cd46417 --- /dev/null +++ b/src/features/ServerPage/features/RankingPage/RankingPage.tsx @@ -0,0 +1,21 @@ +import React from 'react'; +import { SERVER_PAGE } from '@config/routes'; + +import { Switch, Route } from 'react-router-dom'; +import PlayerPage from './features/PlayerPage/PlayerPage'; +import NotFoundPage from '../../../NotFoundPage/NotFoundPage'; + +function RankingPage() { + return ( + + + + + + + + + ); +} + +export default RankingPage; diff --git a/src/features/ServerPage/features/RankingPage/common/PageLayout/PageLayout.tsx b/src/features/ServerPage/features/RankingPage/common/PageLayout/PageLayout.tsx new file mode 100644 index 0000000..3e8b21c --- /dev/null +++ b/src/features/ServerPage/features/RankingPage/common/PageLayout/PageLayout.tsx @@ -0,0 +1,78 @@ +import React from 'react'; +import { useTranslation } from 'react-i18next'; +import useServer from '@features/ServerPage/libs/ServerContext/useServer'; +import useTabs from './useTabs'; +import * as NAMESPACES from '@config/namespaces'; + +import { makeStyles } from '@material-ui/core/styles'; + +import { Tabs, Tab } from '@material-ui/core'; +import Link from '@common/Link/Link'; +import ServerPageLayout from '@features/ServerPage/common/PageLayout/PageLayout'; + +import background from './backgrounds/bg-1-dark.png'; + +export interface Props { + children: React.ReactNode; +} + +function PageLayout({ children }: Props) { + const classes = useStyles(); + const server = useServer(); + const { t } = useTranslation(NAMESPACES.SERVER_PAGE.RANKING_PAGE.COMMON); + const { currentTab, tabs } = useTabs(t); + return ( + +
+ + {tabs.map(({ to, label }) => { + return ( + + {label} + + } + /> + ); + })} + +
+
{children}
+ + ); +} + +const useStyles = makeStyles(theme => ({ + header: { + width: '100%', + minHeight: theme.spacing(30), + backgroundPosition: 'center', + backgroundSize: 'cover', + backgroundRepeat: 'no-repeat', + display: 'flex', + justifyContent: 'flex-end', + flexDirection: 'column', + backgroundImage: `url(${background})`, + boxShadow: theme.shadows[4], + }, + content: { + height: '100%', + padding: theme.spacing(3, 0), + '&.no-padding': { + padding: '0 0', + }, + }, +})); + +export default PageLayout; diff --git a/src/features/ServerPage/features/RankingPage/common/PageLayout/backgrounds/bg-1-dark.png b/src/features/ServerPage/features/RankingPage/common/PageLayout/backgrounds/bg-1-dark.png new file mode 100644 index 0000000..0a0c649 Binary files /dev/null and b/src/features/ServerPage/features/RankingPage/common/PageLayout/backgrounds/bg-1-dark.png differ diff --git a/src/features/ServerPage/features/RankingPage/common/PageLayout/useTabs.ts b/src/features/ServerPage/features/RankingPage/common/PageLayout/useTabs.ts new file mode 100644 index 0000000..32ad33a --- /dev/null +++ b/src/features/ServerPage/features/RankingPage/common/PageLayout/useTabs.ts @@ -0,0 +1,58 @@ +import { useMemo } from 'react'; +import { matchPath, useLocation } from 'react-router-dom'; +import * as ROUTES from '@config/routes'; + +import { TFunction } from 'i18next'; + +const useTabs = (t: TFunction) => { + const loc = useLocation(); + const tabs = useMemo(() => { + return [ + { + to: ROUTES.SERVER_PAGE.RANKING_PAGE.PLAYER_PAGE.INDEX_PAGE, + label: t('pageLayout.tabs.playerPage.indexPage'), + }, + { + to: ROUTES.SERVER_PAGE.RANKING_PAGE.PLAYER_PAGE.OD_PAGE, + label: t('pageLayout.tabs.playerPage.odPage'), + }, + { + to: ROUTES.SERVER_PAGE.RANKING_PAGE.PLAYER_PAGE.DAILY_PAGE, + label: t('pageLayout.tabs.playerPage.dailyPage'), + }, + { + to: ROUTES.SERVER_PAGE.RANKING_PAGE.PLAYER_PAGE.ARCHIVE_PAGE, + label: t('pageLayout.tabs.playerPage.archivePage'), + }, + { + to: ROUTES.SERVER_PAGE.RANKING_PAGE.TRIBE_PAGE.INDEX_PAGE, + label: t('pageLayout.tabs.tribePage.indexPage'), + }, + { + to: ROUTES.SERVER_PAGE.RANKING_PAGE.TRIBE_PAGE.OD_PAGE, + label: t('pageLayout.tabs.tribePage.odPage'), + }, + { + to: ROUTES.SERVER_PAGE.RANKING_PAGE.TRIBE_PAGE.DAILY_PAGE, + label: t('pageLayout.tabs.tribePage.dailyPage'), + }, + { + to: ROUTES.SERVER_PAGE.RANKING_PAGE.TRIBE_PAGE.ARCHIVE_PAGE, + label: t('pageLayout.tabs.tribePage.archivePage'), + }, + ]; + }, [t]); + const currentTab = useMemo( + () => + tabs.findIndex(({ to }) => { + return matchPath(loc.pathname, { exact: true, path: to }); + }), + [loc.pathname, tabs] + ); + return { + tabs, + currentTab, + }; +}; + +export default useTabs; diff --git a/src/features/ServerPage/features/RankingPage/features/PlayerPage/PlayerPage.tsx b/src/features/ServerPage/features/RankingPage/features/PlayerPage/PlayerPage.tsx new file mode 100644 index 0000000..82ae77b --- /dev/null +++ b/src/features/ServerPage/features/RankingPage/features/PlayerPage/PlayerPage.tsx @@ -0,0 +1,21 @@ +import React from 'react'; +import { SERVER_PAGE } from '@config/routes'; + +import { Switch, Route } from 'react-router-dom'; +import IndexPage from './features/IndexPage/IndexPage'; +import NotFoundPage from '../../../NotFoundPage/NotFoundPage'; + +function PlayerPage() { + return ( + + + + + + + + + ); +} + +export default PlayerPage; diff --git a/src/features/ServerPage/features/RankingPage/features/PlayerPage/features/IndexPage/IndexPage.tsx b/src/features/ServerPage/features/RankingPage/features/PlayerPage/features/IndexPage/IndexPage.tsx new file mode 100644 index 0000000..db76dbb --- /dev/null +++ b/src/features/ServerPage/features/RankingPage/features/PlayerPage/features/IndexPage/IndexPage.tsx @@ -0,0 +1,9 @@ +import React from 'react'; + +import PageLayout from '@features/ServerPage/features/RankingPage/common/PageLayout/PageLayout'; + +function IndexPage() { + return elo; +} + +export default IndexPage; diff --git a/src/libs/i18n/en/server-page/index.ts b/src/libs/i18n/en/server-page/index.ts index 997d46f..48c3193 100644 --- a/src/libs/i18n/en/server-page/index.ts +++ b/src/libs/i18n/en/server-page/index.ts @@ -4,6 +4,7 @@ import indexPage from './index-page'; import playerPage from './player-page'; import tribePage from './tribe-page'; import villagePage from './village-page'; +import rankingPage from './ranking-page'; const translations = { [NAMESPACES.SERVER_PAGE.COMMON]: common, @@ -11,6 +12,7 @@ const translations = { [NAMESPACES.SERVER_PAGE.VILLAGE_PAGE.INDEX_PAGE]: villagePage, ...playerPage, ...tribePage, + ...rankingPage, }; export default translations; diff --git a/src/libs/i18n/en/server-page/ranking-page/common.ts b/src/libs/i18n/en/server-page/ranking-page/common.ts new file mode 100644 index 0000000..8745dcb --- /dev/null +++ b/src/libs/i18n/en/server-page/ranking-page/common.ts @@ -0,0 +1,20 @@ +const translations = { + pageLayout: { + tabs: { + playerPage: { + indexPage: 'Players', + odPage: 'Players OD', + dailyPage: 'Players daily', + archivePage: 'Past players', + }, + tribePage: { + indexPage: 'Tribes', + odPage: 'Tribes OD', + dailyPage: 'Tribes daily', + archivePage: 'Past tribes', + }, + }, + }, +}; + +export default translations; diff --git a/src/libs/i18n/en/server-page/ranking-page/index.ts b/src/libs/i18n/en/server-page/ranking-page/index.ts new file mode 100644 index 0000000..2ae881d --- /dev/null +++ b/src/libs/i18n/en/server-page/ranking-page/index.ts @@ -0,0 +1,8 @@ +import * as NAMESPACES from '@config/namespaces'; +import common from './common'; + +const translations = { + [NAMESPACES.SERVER_PAGE.RANKING_PAGE.COMMON]: common, +}; + +export default translations; diff --git a/src/libs/i18n/pl/index.ts b/src/libs/i18n/pl/index.ts index ca745ee..5ea5911 100644 --- a/src/libs/i18n/pl/index.ts +++ b/src/libs/i18n/pl/index.ts @@ -4,11 +4,13 @@ import indexPage from './index-page'; import notFoundPage from './not-found-page'; import serverPage from './server-page'; import table from './table'; +import lineChart from './line-chart'; const translations = { [NAMESPACES.COMMON]: common, [NAMESPACES.INDEX_PAGE]: indexPage, [NAMESPACES.NOT_FOUND_PAGE]: notFoundPage, + [NAMESPACES.LINE_CHART]: lineChart, [NAMESPACES.TABLE]: table, ...serverPage, }; diff --git a/src/libs/i18n/pl/server-page/index.ts b/src/libs/i18n/pl/server-page/index.ts index 997d46f..48c3193 100644 --- a/src/libs/i18n/pl/server-page/index.ts +++ b/src/libs/i18n/pl/server-page/index.ts @@ -4,6 +4,7 @@ import indexPage from './index-page'; import playerPage from './player-page'; import tribePage from './tribe-page'; import villagePage from './village-page'; +import rankingPage from './ranking-page'; const translations = { [NAMESPACES.SERVER_PAGE.COMMON]: common, @@ -11,6 +12,7 @@ const translations = { [NAMESPACES.SERVER_PAGE.VILLAGE_PAGE.INDEX_PAGE]: villagePage, ...playerPage, ...tribePage, + ...rankingPage, }; export default translations; diff --git a/src/libs/i18n/pl/server-page/ranking-page/common.ts b/src/libs/i18n/pl/server-page/ranking-page/common.ts new file mode 100644 index 0000000..93b4a39 --- /dev/null +++ b/src/libs/i18n/pl/server-page/ranking-page/common.ts @@ -0,0 +1,20 @@ +const translations = { + pageLayout: { + tabs: { + playerPage: { + indexPage: 'Gracze', + odPage: 'Gracze OD', + dailyPage: 'Gracze dzienne', + archivePage: 'Byli gracze', + }, + tribePage: { + indexPage: 'Plemiona', + odPage: 'Plemiona OD', + dailyPage: 'Plemiona dzienne', + archivePage: 'Byłe plemiona', + }, + }, + }, +}; + +export default translations; diff --git a/src/libs/i18n/pl/server-page/ranking-page/index.ts b/src/libs/i18n/pl/server-page/ranking-page/index.ts new file mode 100644 index 0000000..2ae881d --- /dev/null +++ b/src/libs/i18n/pl/server-page/ranking-page/index.ts @@ -0,0 +1,8 @@ +import * as NAMESPACES from '@config/namespaces'; +import common from './common'; + +const translations = { + [NAMESPACES.SERVER_PAGE.RANKING_PAGE.COMMON]: common, +}; + +export default translations;