Skip to content

Commit

Permalink
releasef add blitz to profiles
Browse files Browse the repository at this point in the history
  • Loading branch information
@Sammers21
Sammers21 committed Sep 11, 2024
1 parent 1bccbee commit 21633cb
Showing 1 changed file with 69 additions and 51 deletions.
120 changes: 69 additions & 51 deletions frontend/src/containers/Profile/PvpBrackets.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,58 +1,55 @@
import { useMemo } from 'react';
import {useMemo} from 'react';
import dayjs from 'dayjs-ext';

import { Chip, LinearProgress, Tooltip } from '@mui/material';
import {Chip, LinearProgress, Tooltip} from '@mui/material';
import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
import { getSpecIcon, getWonAndLossColors, bracketToColor, getSeasonRankImageFromRating } from '@/utils/table';
import { CLASS_AND_SPECS } from '@/constants/filterSchema';
import type { IPlayerBracket, IPlayer } from '@/types';
import {getSpecIcon, getWonAndLossColors, bracketToColor, getSeasonRankImageFromRating} from '@/utils/table';
import {CLASS_AND_SPECS} from '@/constants/filterSchema';
import type {IPlayerBracket, IPlayer} from '@/types';

interface IProps {
player: IPlayer;
}

const arenaAndRbg = [
{ name: 'ARENA_2v2', title: '2v2' },
{ name: 'ARENA_3v3', title: '3v3' },
{ name: 'BATTLEGROUNDS', title: 'RBG' },
{name: 'ARENA_2v2', title: '2v2'},
{name: 'ARENA_3v3', title: '3v3'},
{name: 'BATTLEGROUNDS', title: 'RBG'},
];

const PvpBracket = ({
title,
bracket,
isShuffle,
playerClass,
hasFourSpecs,
}: {
title,
bracket,
isZolo,
zoloName,
playerClass,
hasFourSpecs,
}: {
title?: string;
bracket?: IPlayerBracket;
isShuffle?: boolean;
isZolo?: boolean;
zoloName?: string
playerClass?: string;
hasFourSpecs: boolean;
}) => {
const specIcon = useMemo(() => {
if (!isShuffle || !title) return;

if (!isZolo || !title) return;
return getSpecIcon(`${title} ${playerClass}` || '');
}, [title, isShuffle, playerClass]);

}, [title, isZolo, playerClass]);
const ratingColor = useMemo(() => {
if (!bracket) return '#ffffff';
return bracketToColor(bracket);
}, [bracket]);

const stats = useMemo(() => {
const won = bracket?.won || 0;
const lost = bracket?.lost || 0;
const rating = bracket?.rating || 0;
const is_rank_one_range = bracket?.is_rank_one_range || false;

const { wonColor, lossColor } = getWonAndLossColors(won, lost);
const {wonColor, lossColor} = getWonAndLossColors(won, lost);
const showWinRate = won > 0 || lost > 0;
const winRate = ((won * 100) / (won + lost)).toFixed(2);
const winRateColor = parseInt(winRate, 10) >= 50 ? "green" : "#ff0531";

return { rating, is_rank_one_range, showWinRate, winRateColor, wonColor, lossColor, winRate };
return {rating, is_rank_one_range, showWinRate, winRateColor, wonColor, lossColor, winRate};
}, [bracket]);
const ratingImg = (
<img
Expand All @@ -65,19 +62,22 @@ const PvpBracket = ({
<div
className={`flex self-stretch flex-col items-center pr-2 ${hasFourSpecs ? 'w-1/4' : 'w-1/3'}`}
>
<div className="relative flex flex-col w-full h-full rounded-lg border pb-4 px-3 border-solid border-[#37415180] bg-[#030303e6]">
<div
className="relative flex flex-col w-full h-full rounded-lg border pb-4 px-3 border-solid border-[#37415180] bg-[#030303e6]">
<div className="flex flex-col w-full justify-start py-2">
<div className="flex w-full justify-between items-center">
{specIcon ? (
<img
className="h-9 w-9 rounded border border-solid border-[#37415180]"
src={specIcon}
alt={title}
/>
<div className="flex flex-row items-center w-full w-full">
<span className="text-base sm:text-2xl text-white pr-2">{zoloName}</span>
<img
className="h-9 w-9 rounded border border-solid border-[#37415180]"
src={specIcon}
alt={title}
/>
</div>
) : (
<span className="text-base sm:text-3xl text-white">{title}</span>
)}

<div className="hidden sm:flex sm:flex-col rounded-lg absolute top-0 right-0 px-2 pt-2 bg-[#030303e6]">
{bracket?.season_max_rating &&
bracket.season_max_rating !== -1 &&
Expand All @@ -92,7 +92,7 @@ const PvpBracket = ({
<span className="text-base">Season</span>
<span className="text-white text-xs sm:text-base flex items-center">
{bracket.season_max_rating}
<InfoOutlinedIcon fontSize="small" className="!ml-1 !w-4 !h-4" />
<InfoOutlinedIcon fontSize="small" className="!ml-1 !w-4 !h-4"/>
</span>
</div>
</Tooltip>
Expand All @@ -108,7 +108,7 @@ const PvpBracket = ({
<span className="text-base">Record</span>
<span className="text-white text-xs sm:text-base flex items-center">
{bracket.max_rating}
<InfoOutlinedIcon fontSize="small" className="!ml-1 !w-4 !h-4" />
<InfoOutlinedIcon fontSize="small" className="!ml-1 !w-4 !h-4"/>
</span>
</div>
</Tooltip>
Expand All @@ -120,14 +120,14 @@ const PvpBracket = ({
{/* {ratingImg} */}
<span
className="flex flex-row items-center gap-1 text-2xl md:text-4xl font-semibold"
style={{ color: ratingColor }}
style={{color: ratingColor}}
>
{ratingImg}
{stats.rating}
</span>
{bracket?.rank && bracket.rank !== -1 ? (
<div className="hidden sm:flex items-center justify-between relative">
<Chip className="!text-xs md:!text-sm" label={`#${bracket.rank}`} size="small" />
<Chip className="!text-xs md:!text-sm" label={`#${bracket.rank}`} size="small"/>
</div>
) : null}
</div>
Expand All @@ -143,7 +143,7 @@ const PvpBracket = ({
<div className="flex pl-0 sm:pl-2 sm:border-l border-solid border-[#37415180]">
<span
className="text-sm md:text-base text-[#4B5563]"
style={{ opacity: stats.showWinRate ? 1 : 0 }}
style={{opacity: stats.showWinRate ? 1 : 0}}
>
{stats.showWinRate ? `${stats.winRate}%` : '-'}
</span>
Expand All @@ -153,54 +153,72 @@ const PvpBracket = ({
variant="determinate"
value={parseInt(stats.winRate, 10)}
sx={{
'& .MuiLinearProgress-bar': { backgroundColor: '#008000' },
'&.MuiLinearProgress-root': { backgroundColor: '#ff0000' },
'& .MuiLinearProgress-bar': {backgroundColor: '#008000'},
'&.MuiLinearProgress-root': {backgroundColor: '#ff0000'},
}}
/>
</div>
</div>
);
};

const PvpBrackets = ({ player }: IProps) => {
const PvpBrackets = ({player}: IProps) => {
// @ts-ignore
const classAndSpec = CLASS_AND_SPECS[player.class] as string[];
const hasFourSpecs = classAndSpec.length === 4;

const shuffleBrackets = classAndSpec
.map((spec) => {
const bracket = player?.brackets?.find(({ bracket_type }) => bracket_type.includes(spec));
const bracket = player?.brackets?.find(({bracket_type}) => bracket_type.includes(spec) && bracket_type.includes("SHUFFLE"))
const noRender = player.class === 'Druid' && spec === 'Guardian' && !bracket;

return { bracket, spec, noRender };
return {bracket, spec, noRender};
})
.sort((a, b) => (b.bracket?.rating ?? 0) - (a.bracket?.rating ?? 0));
const blitzBrackets = classAndSpec
.map((spec) => {
const bracket = player?.brackets?.find(({bracket_type}) => bracket_type.includes(spec) && bracket_type.includes("BLITZ"))
const noRender = player.class === 'Druid' && spec === 'Guardian' && !bracket;
return {bracket, spec, noRender};
})
.sort((a, b) => (b.bracket?.rating ?? 0) - (a.bracket?.rating ?? 0));

const hasDruidTank =
player.class === 'Druid' &&
!!(player?.brackets || []).find((b) => b.bracket_type.includes('Guardian'));

return (
<div className="flex gap-2 justify-start flex-col">
<div className="flex flex-nowrap flex-row items-stretch justify-start">
{arenaAndRbg.map(({ title, name }) => {
{arenaAndRbg.map(({title, name}) => {
const playerBracket = (player?.brackets || []).find((b) => b.bracket_type === name);
return (
<PvpBracket key={name} title={title} bracket={playerBracket} hasFourSpecs={false} />
<PvpBracket key={name} title={title} bracket={playerBracket} hasFourSpecs={false}/>
);
})}
</div>

<div className="flex flex-wrap justify-start">
{shuffleBrackets.map(({ bracket, spec, noRender }) => {
{shuffleBrackets.map(({bracket, spec, noRender}) => {
if (noRender) return null;
return (
<PvpBracket
key={spec}
bracket={bracket}
title={spec}
isZolo={true}
zoloName={"Shuffle"}
playerClass={player.class}
hasFourSpecs={hasFourSpecs && hasDruidTank}
/>
);
})}
</div>
<div className="flex flex-wrap justify-start">
{blitzBrackets.map(({bracket, spec, noRender}) => {
if (noRender) return null;

return (
<PvpBracket
key={spec}
bracket={bracket}
title={spec}
isShuffle
isZolo={true}
zoloName={"Blitz"}
playerClass={player.class}
hasFourSpecs={hasFourSpecs && hasDruidTank}
/>
Expand Down

0 comments on commit 21633cb

Please sign in to comment.