From 54ea17a6176ddaef2e80ed44263917fe875ba8c1 Mon Sep 17 00:00:00 2001 From: Pavel Drankov Date: Wed, 11 Sep 2024 11:22:04 +0300 Subject: [PATCH] releasef fix the zolo bracket text position --- .../src/containers/Profile/PvpBrackets.tsx | 464 +++++++++--------- 1 file changed, 232 insertions(+), 232 deletions(-) diff --git a/frontend/src/containers/Profile/PvpBrackets.tsx b/frontend/src/containers/Profile/PvpBrackets.tsx index db03e605..381f45a4 100644 --- a/frontend/src/containers/Profile/PvpBrackets.tsx +++ b/frontend/src/containers/Profile/PvpBrackets.tsx @@ -1,232 +1,232 @@ -import {useMemo} from 'react'; -import dayjs from 'dayjs-ext'; - -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'; - -interface IProps { - player: IPlayer; -} - -const arenaAndRbg = [ - {name: 'ARENA_2v2', title: '2v2'}, - {name: 'ARENA_3v3', title: '3v3'}, - {name: 'BATTLEGROUNDS', title: 'RBG'}, -]; - -const PvpBracket = ({ - title, - bracket, - isZolo, - zoloName, - playerClass, - hasFourSpecs, - }: { - title?: string; - bracket?: IPlayerBracket; - isZolo?: boolean; - zoloName?: string - playerClass?: string; - hasFourSpecs: boolean; -}) => { - const specIcon = useMemo(() => { - if (!isZolo || !title) return; - return getSpecIcon(`${title} ${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 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}; - }, [bracket]); - const ratingImg = ( - rating - ); - return ( -
-
-
-
- {specIcon ? ( -
- {zoloName} - {title} -
- ) : ( - {title} - )} -
- {bracket?.season_max_rating && - bracket.season_max_rating !== -1 && - bracket?.season_max_rating !== bracket?.max_rating ? ( - -
- Season - - {bracket.season_max_rating} - - -
- - ) : null} - {bracket?.max_rating && bracket.max_rating !== -1 ? ( - -
- Record - - {bracket.max_rating} - - -
- - ) : null} -
-
- -
- {/* {ratingImg} */} - - {ratingImg} - {stats.rating} - - {bracket?.rank && bracket.rank !== -1 ? ( -
- -
- ) : null} -
-
- -
-
- {bracket?.won || 0} - / - {bracket?.lost || 0} -
- -
- - {stats.showWinRate ? `${stats.winRate}%` : '-'} - -
-
- -
-
- ); -}; - -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) && bracket_type.includes("SHUFFLE")) - const noRender = player.class === 'Druid' && spec === 'Guardian' && !bracket; - 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 ( -
-
- {arenaAndRbg.map(({title, name}) => { - const playerBracket = (player?.brackets || []).find((b) => b.bracket_type === name); - return ( - - ); - })} -
-
- {shuffleBrackets.map(({bracket, spec, noRender}) => { - if (noRender) return null; - return ( - - ); - })} -
-
- {blitzBrackets.map(({bracket, spec, noRender}) => { - if (noRender) return null; - return ( - - ); - })} -
-
- ); -}; - -export default PvpBrackets; +import {useMemo} from 'react'; +import dayjs from 'dayjs-ext'; + +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'; + +interface IProps { + player: IPlayer; +} + +const arenaAndRbg = [ + {name: 'ARENA_2v2', title: '2v2'}, + {name: 'ARENA_3v3', title: '3v3'}, + {name: 'BATTLEGROUNDS', title: 'RBG'}, +]; + +const PvpBracket = ({ + title, + bracket, + isZolo, + zoloName, + playerClass, + hasFourSpecs, + }: { + title?: string; + bracket?: IPlayerBracket; + isZolo?: boolean; + zoloName?: string + playerClass?: string; + hasFourSpecs: boolean; +}) => { + const specIcon = useMemo(() => { + if (!isZolo || !title) return; + return getSpecIcon(`${title} ${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 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}; + }, [bracket]); + const ratingImg = ( + rating + ); + return ( +
+
+
+
+ {specIcon ? ( +
+ {title} + {zoloName} +
+ ) : ( + {title} + )} +
+ {bracket?.season_max_rating && + bracket.season_max_rating !== -1 && + bracket?.season_max_rating !== bracket?.max_rating ? ( + +
+ Season + + {bracket.season_max_rating} + + +
+ + ) : null} + {bracket?.max_rating && bracket.max_rating !== -1 ? ( + +
+ Record + + {bracket.max_rating} + + +
+ + ) : null} +
+
+ +
+ {/* {ratingImg} */} + + {ratingImg} + {stats.rating} + + {bracket?.rank && bracket.rank !== -1 ? ( +
+ +
+ ) : null} +
+
+ +
+
+ {bracket?.won || 0} + / + {bracket?.lost || 0} +
+ +
+ + {stats.showWinRate ? `${stats.winRate}%` : '-'} + +
+
+ +
+
+ ); +}; + +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) && bracket_type.includes("SHUFFLE")) + const noRender = player.class === 'Druid' && spec === 'Guardian' && !bracket; + 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 ( +
+
+ {arenaAndRbg.map(({title, name}) => { + const playerBracket = (player?.brackets || []).find((b) => b.bracket_type === name); + return ( + + ); + })} +
+
+ {shuffleBrackets.map(({bracket, spec, noRender}) => { + if (noRender) return null; + return ( + + ); + })} +
+
+ {blitzBrackets.map(({bracket, spec, noRender}) => { + if (noRender) return null; + return ( + + ); + })} +
+
+ ); +}; + +export default PvpBrackets;