Skip to content

Commit

Permalink
Merge branch 'main' of github.com:Sammers21/wow-pla
Browse files Browse the repository at this point in the history
  • Loading branch information
@Sammers21
Sammers21 committed Oct 18, 2024
2 parents 3d47f02 + 43a75b1 commit 7237232
Show file tree
Hide file tree
Showing 8 changed files with 343 additions and 293 deletions.
1 change: 0 additions & 1 deletion frontend/src/components/DataTable/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import { getLadder } from '@/services/stats.service';
import {getActivityFromUrl, getBracket, getRegion} from '@/utils/urlparts';

import { BRACKETS } from '@/constants/pvp-activity';
import { REGION } from '@/constants/region';
import type { IActivityRecord } from '@/types';

export function getFromSearchParams(searchParams: URLSearchParams, name: string): string[] {
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/Footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const Footer = () => {
</div>

<div className="flex items-center gap-4">
<ExternalLink href="https://github.com/Sammers21/wow-pla/issues">
<ExternalLink href="https://github.com/Sammers21/pvpqnet">
<GitHubIcon />
</ExternalLink>
<ExternalLink href="https://discord.com/users/343752113752506379">
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/Header/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { borderColor, containerBg } from "@/theme";
import { metaUrls, publicUrls, shuffleMulticlassUrls } from "@/config";
import { REGION } from "@/constants/region";
import { BRACKETS } from "@/constants/pvp-activity";
import {getActivityFromUrl, getRegion} from "@/utils/urlparts";
import {getActivityFromUrl, getBracket, getRegion} from "@/utils/urlparts";

const StyledAppBar = styled(AppBar)({
backgroundImage: "none",
Expand All @@ -33,7 +33,7 @@ const Header = () => {
const host = window.location.host.toUpperCase();
const {
region: regionFromUrl = REGION.eu,
bracket = BRACKETS["3v3"],
bracket = getBracket(),
} = useParams();
const region = getRegion(regionFromUrl);
const activity = getActivityFromUrl();
Expand Down
62 changes: 31 additions & 31 deletions frontend/src/constants/meta.ts
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,31 @@
import type { TFilterName, IMetaFilter } from '@/containers/Meta/types';

export const columnGroups = [
{ field: '0.850', icons: ['rank_2.png', 'rank_4.png', 'rank_6.png'] },
{ field: '0.100', icons: ['rank_7.png', 'rank_8.png'] },
{ field: '0.050', icons: ['rank_9.png', 'rank_10.png'] },
];

export const metaFilter: IMetaFilter[] = [
{
title: 'Bracket',
name: 'bracket',
options: ['Shuffle', '2v2', '3v3', 'Battlegrounds'],
},
{
title: 'Period',
name: 'period',
options: ['Last month', 'Last week', 'Last day', 'This season'],
},
{
title: 'Role',
name: 'role',
options: ['All', 'Melee', 'Ranged', 'Dps', 'Healer', 'Tank'],
},
];

export const defaultFilters: Record<TFilterName, string> = {
bracket: 'Shuffle',
period: 'This season',
role: 'All',
};
import type { TFilterName, IMetaFilter } from '@/containers/Meta/types';

export const columnGroups = [
{ field: '0.850', icons: ['rank_2.png', 'rank_4.png', 'rank_6.png'] },
{ field: '0.100', icons: ['rank_7.png', 'rank_8.png'] },
{ field: '0.050', icons: ['rank_9.png', 'rank_10.png'] },
];

export const metaFilter: IMetaFilter[] = [
{
title: 'Bracket',
name: 'bracket',
options: ['Shuffle', '2v2', '3v3', 'Battlegrounds', 'Blitz'],
},
{
title: 'Period',
name: 'period',
options: ['Last month', 'Last week', 'Last day', 'This season'],
},
{
title: 'Role',
name: 'role',
options: ['All', 'Melee', 'Ranged', 'Dps', 'Healer', 'Tank'],
},
];

export const defaultFilters: Record<TFilterName, string> = {
bracket: 'Shuffle',
period: 'This season',
role: 'All',
};
223 changes: 122 additions & 101 deletions frontend/src/containers/Activity/Tabs.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,101 +1,122 @@
import {useNavigate, useLocation, useParams} from 'react-router-dom';
import {generatePath} from 'react-router';

import {Button, Chip} from '@mui/material';
import {styled} from '@mui/system';

import {getActivityFromUrl, getBracket, getRegion} from '@/utils/urlparts';
import {publicUrls} from '@/config';
import {BRACKETS} from '@/constants/pvp-activity';
import {borderColor} from '@/theme';

interface IProps {
bracketActivity: Record<BRACKETS, string> | undefined;
}

export const TabButton = styled(Button)<{ isActive: boolean }>(({isActive}) => {
return {
color: 'white',
flexGrow: 1,
borderRadius: 0,
borderColor: borderColor,
borderRightWidth: 1,
borderStyle: 'solid',
textTransform: 'none',
fontSize: 16,
fontWeight: 1000,
backgroundColor: isActive ? 'rgb(21, 128, 61, 0.25)' : 'rgba(31, 41, 55, 0.25)',
'&:hover': {
backgroundColor: isActive && 'rgb(21, 128, 61, 0.25)',
},
};
});

export const BracketCount = ({content}: { content: number | string | undefined }) => {
if (!content) return null;

return (
<div className="flex items-center justify-between ml-2">
<Chip className="!text-sm" label={content} size="small"/>
</div>
);
};

const ActivityTabs = ({bracketActivity}: IProps) => {
let navigate = useNavigate();
const location = useLocation();

const {region: regionFromUrl, bracket: bracketFromParams} = useParams();

const bracket = getBracket(bracketFromParams);
const activity = getActivityFromUrl();
const region = getRegion(regionFromUrl);

const handleBracketChange = (bracket: BRACKETS) => {
const newPath = generatePath(publicUrls.page, {region, activity, bracket});
navigate(`${newPath}${location.search}`);
};

return (
<div className="flex w-full rounded-t-md border-t border-l border-b border-solid border-[#2f384de6] bg-[#030303e6]">
<TabButton
sx={{borderTopLeftRadius: 5}}
onClick={() => handleBracketChange(BRACKETS.shuffle)}
isActive={bracket === BRACKETS.shuffle}
>
Shuffle
<BracketCount content={bracketActivity?.shuffle}/>
</TabButton>
<TabButton
onClick={() => handleBracketChange(BRACKETS['2v2'])}
isActive={bracket === BRACKETS['2v2']}
>
2v2
<BracketCount content={bracketActivity?.['2v2']}/>
</TabButton>
<TabButton
onClick={() => handleBracketChange(BRACKETS['3v3'])}
isActive={bracket === BRACKETS['3v3']}
>
3v3 <BracketCount content={bracketActivity?.['3v3']}/>
</TabButton>
<TabButton
sx={{}}
onClick={() => handleBracketChange(BRACKETS.blitz)}
isActive={bracket === BRACKETS.blitz}
>
Blitz
<BracketCount content={bracketActivity?.blitz}/>
</TabButton>
<TabButton
sx={{}}
onClick={() => handleBracketChange(BRACKETS.rbg)}
isActive={bracket === BRACKETS.rbg}
>
RBG <BracketCount content={bracketActivity?.rbg}/>
</TabButton>
</div>
);
};

export default ActivityTabs;
import { useNavigate, useLocation, useParams } from "react-router-dom";
import { generatePath } from "react-router";

import { Button, Chip } from "@mui/material";
import { styled } from "@mui/system";

import { getActivityFromUrl, getBracket, getRegion } from "@/utils/urlparts";
import { publicUrls } from "@/config";
import { BRACKETS } from "@/constants/pvp-activity";
import { borderColor } from "@/theme";
import { useWindowSize } from "react-use";

interface IProps {
bracketActivity: Record<BRACKETS, string> | undefined;
}

export const TabButton = styled(Button)<{ isActive: boolean }>(
({ isActive }) => {
return {
color: "white",
flexGrow: 1,
borderRadius: 0,
borderColor: borderColor,
borderRightWidth: 1,
borderStyle: "solid",
textTransform: "none",
fontSize: 16,
fontWeight: 1000,
backgroundColor: isActive
? "rgb(21, 128, 61, 0.25)"
: "rgba(31, 41, 55, 0.25)",
"&:hover": {
backgroundColor: isActive && "rgb(21, 128, 61, 0.25)",
},
};
}
);

export const BracketCount = ({
content,
width,
}: {
content: number | string | undefined;
width?: number;
}) => {
if (!content) return null;
if (typeof content === "string") {
content = parseInt(content);
}
if (content > 1000 && width && width < 768) {
content = `${(content / 1000).toFixed(0)}k`;
}
return (
<div className="flex items-center justify-between ml-0 sm:ml-2">
<Chip className="!text-sm" label={content} size="small" />
</div>
);
};

const ActivityTabs = ({ bracketActivity }: IProps) => {
let navigate = useNavigate();
const location = useLocation();
const { width } = useWindowSize();

const { region: regionFromUrl, bracket: bracketFromParams } = useParams();

const bracket = getBracket(bracketFromParams);
const activity = getActivityFromUrl();
const region = getRegion(regionFromUrl);

const handleBracketChange = (bracket: BRACKETS) => {
const newPath = generatePath(publicUrls.page, {
region,
activity,
bracket,
});
navigate(`${newPath}${location.search}`);
};

return (
<div className="flex w-full rounded-t-md border-t border-l border-b border-solid border-[#2f384de6] bg-[#030303e6]">
<TabButton
sx={{ borderTopLeftRadius: 5 }}
onClick={() => handleBracketChange(BRACKETS.shuffle)}
isActive={bracket === BRACKETS.shuffle}
>
Shuffle
<BracketCount content={bracketActivity?.shuffle} width={width} />
</TabButton>
<TabButton
onClick={() => handleBracketChange(BRACKETS["2v2"])}
isActive={bracket === BRACKETS["2v2"]}
>
2v2
<BracketCount content={bracketActivity?.["2v2"]} width={width} />
</TabButton>
<TabButton
onClick={() => handleBracketChange(BRACKETS["3v3"])}
isActive={bracket === BRACKETS["3v3"]}
>
3v3 <BracketCount content={bracketActivity?.["3v3"]} width={width} />
</TabButton>
<TabButton
sx={{}}
onClick={() => handleBracketChange(BRACKETS.blitz)}
isActive={bracket === BRACKETS.blitz}
>
Blitz
<BracketCount content={bracketActivity?.blitz} width={width} />
</TabButton>
<TabButton
sx={{}}
onClick={() => handleBracketChange(BRACKETS.rbg)}
isActive={bracket === BRACKETS.rbg}
>
RBG <BracketCount content={bracketActivity?.rbg} width={width} />
</TabButton>
</div>
);
};

export default ActivityTabs;
Loading

0 comments on commit 7237232

Please sign in to comment.