diff --git a/public/images/matchTabs/bets.svg b/public/images/matchTabs/bets.svg new file mode 100644 index 00000000..d112cddb --- /dev/null +++ b/public/images/matchTabs/bets.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/images/matchTabs/chat.svg b/public/images/matchTabs/chat.svg new file mode 100644 index 00000000..02d75c4b --- /dev/null +++ b/public/images/matchTabs/chat.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/images/matchTabs/players.svg b/public/images/matchTabs/players.svg new file mode 100644 index 00000000..ffa6cb02 --- /dev/null +++ b/public/images/matchTabs/players.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/images/matchTabs/plays.svg b/public/images/matchTabs/plays.svg new file mode 100644 index 00000000..0850a8e7 --- /dev/null +++ b/public/images/matchTabs/plays.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/images/matchTabs/stats.svg b/public/images/matchTabs/stats.svg new file mode 100644 index 00000000..12afb401 --- /dev/null +++ b/public/images/matchTabs/stats.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/public/images/matchTabs/watch.svg b/public/images/matchTabs/watch.svg new file mode 100644 index 00000000..fdb9114f --- /dev/null +++ b/public/images/matchTabs/watch.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/config/lexics/indexLexics.tsx b/src/config/lexics/indexLexics.tsx index 5d6e1344..e44e4d09 100644 --- a/src/config/lexics/indexLexics.tsx +++ b/src/config/lexics/indexLexics.tsx @@ -22,6 +22,7 @@ const matchPopupLexics = { match_interviews: 13031, match_settings: 13490, no_data: 15397, + others: 19902, players_episodes: 13398, playlist_format: 13406, playlist_format_all_actions: 13408, @@ -31,6 +32,7 @@ const matchPopupLexics = { sec_before: 13411, selected_player_actions: 13413, started_streaming_at: 16042, + stats: 18179, streamed_live_on: 16043, video: 1017, views: 13440, diff --git a/src/features/MatchSidePlaylists/components/PlayersPlaylists/styled.tsx b/src/features/MatchSidePlaylists/components/PlayersPlaylists/styled.tsx index 5ab9e064..619eba54 100644 --- a/src/features/MatchSidePlaylists/components/PlayersPlaylists/styled.tsx +++ b/src/features/MatchSidePlaylists/components/PlayersPlaylists/styled.tsx @@ -6,7 +6,6 @@ export const Wrapper = styled.div` display: flex; flex-direction: column; align-items: center; - margin-top: 25px; ` export const List = styled.ul` diff --git a/src/features/MatchSidePlaylists/components/PlayersTable/index.tsx b/src/features/MatchSidePlaylists/components/PlayersTable/index.tsx new file mode 100644 index 00000000..46520e1b --- /dev/null +++ b/src/features/MatchSidePlaylists/components/PlayersTable/index.tsx @@ -0,0 +1,243 @@ +import { + Table, + Thead, + Th, + Tbody, + Tr, + Td, + PlayerNum, + ParamShortTitle, +} from './styled' + +export const PlayersTable = () => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Min + + Pt + + Reb + + Ass + + To +
57 Selikhov9712214
57 Selikhov9712214
57 Selikhov9712214
57 Selikhov9712214
57 Selikhov9712214
57 Selikhov9712214
57 Selikhov9712214
57 Selikhov9712214
57 Selikhov9712214
57 Selikhov9712214
57 Selikhov9712214
57 Selikhov9712214
57 Selikhov9712214
57 Selikhov9712214
57 Selikhov9712214
57 Selikhov9712214
57 Selikhov9712214
57 Selikhov9712214
57 Selikhov9712214
57 Selikhov9712214
57 Selikhov9712214
57 Selikhov9712214
57 Selikhov9712214
57 Selikhov9712214
57 Selikhov9712214
57 Selikhov9712214
+) diff --git a/src/features/MatchSidePlaylists/components/PlayersTable/styled.tsx b/src/features/MatchSidePlaylists/components/PlayersTable/styled.tsx new file mode 100644 index 00000000..3d88c1f6 --- /dev/null +++ b/src/features/MatchSidePlaylists/components/PlayersTable/styled.tsx @@ -0,0 +1,86 @@ +import styled, { css } from 'styled-components/macro' + +import { customScrollbar } from 'features/Common' + +export const Table = styled.table` + width: 100%; + border-radius: 5px; + border-collapse: collapse; + letter-spacing: -0.078px; + background-color: #333333; + table-layout: fixed; + + ${customScrollbar} +` + +export const Thead = styled.thead` + height: 45px; + border-bottom: 0.5px solid rgba(255, 255, 255, 0.5); +` + +type ThProps = { + sorted?: boolean, +} + +export const Th = styled.th` + font-size: 11px; + color: ${({ theme }) => theme.colors.white}; + text-transform: uppercase; + + :first-child { + width: 115px; + } + + ${({ sorted }) => (sorted + ? '' + : css` + opacity: 0.5; + `)} +` + +export const ParamShortTitle = styled.span`` + +export const Tbody = styled.tbody`` + +export const Tr = styled.tr` + height: 45px; + border-bottom: 0.5px solid rgba(255, 255, 255, 0.5); + + :last-child { + border-bottom: none; + } +` + +type TdProps = { + clickable?: boolean, + sorted?: boolean, +} + +export const Td = styled.td` + font-size: 11px; + text-align: center; + color: ${({ clickable, theme }) => (clickable ? '#5EB2FF' : theme.colors.white)}; + + :first-child { + padding-left: 13px; + text-align: left; + color: ${({ theme }) => theme.colors.white}; + } + + + ${({ sorted }) => (sorted + ? css` + font-weight: bold; + ` + : '')} + + ${({ clickable }) => (clickable + ? css` + cursor: pointer; + ` + : '')} +` + +export const PlayerNum = styled.span` + color: rgba(255, 255, 255, 0.5); +` diff --git a/src/features/MatchSidePlaylists/components/TabPlayers/index.tsx b/src/features/MatchSidePlaylists/components/TabPlayers/index.tsx new file mode 100644 index 00000000..bd8244ac --- /dev/null +++ b/src/features/MatchSidePlaylists/components/TabPlayers/index.tsx @@ -0,0 +1,31 @@ +import isEmpty from 'lodash/isEmpty' + +import type { Playlists, PlaylistOption } from 'features/MatchPage/types' +import type { MatchInfo } from 'requests' + +import { PlayersPlaylists } from '../PlayersPlaylists' + +type Props = { + onSelect: (option: PlaylistOption) => void, + playlists: Playlists, + profile: MatchInfo, + selectedPlaylist?: PlaylistOption, +} + +export const TabPlayers = ({ + onSelect, + playlists, + profile, + selectedPlaylist, +}: Props) => { + if (isEmpty(playlists.players.team1)) return null + + return ( + + ) +} diff --git a/src/features/MatchSidePlaylists/components/TabStats/config.tsx b/src/features/MatchSidePlaylists/components/TabStats/config.tsx new file mode 100644 index 00000000..099a117f --- /dev/null +++ b/src/features/MatchSidePlaylists/components/TabStats/config.tsx @@ -0,0 +1,5 @@ +export enum Tabs { + TEAMS, + TEAM1, + TEAM2, +} diff --git a/src/features/MatchSidePlaylists/components/TabStats/index.tsx b/src/features/MatchSidePlaylists/components/TabStats/index.tsx new file mode 100644 index 00000000..c43592bb --- /dev/null +++ b/src/features/MatchSidePlaylists/components/TabStats/index.tsx @@ -0,0 +1,34 @@ +import { Tooltip } from 'features/Tooltip' + +import { PlayersTable } from '../PlayersTable' +import { TeamsStats } from '../TeamsStats' + +import { + Container, + Header, + TabList, + Tab, + Switch, + SwitchTitle, + SwitchButton, +} from './styled' + +export const TabStats = () => ( + +
+ + Teams + DIN + SPA + + + Final Stats + + + + +
+ + {/* */} + +) diff --git a/src/features/MatchSidePlaylists/components/TabStats/styled.tsx b/src/features/MatchSidePlaylists/components/TabStats/styled.tsx new file mode 100644 index 00000000..f2f58203 --- /dev/null +++ b/src/features/MatchSidePlaylists/components/TabStats/styled.tsx @@ -0,0 +1,108 @@ +import styled, { css } from 'styled-components/macro' + +import { TooltipWrapper } from 'features/Tooltip' + +export const Container = styled.div`` + +export const Header = styled.div` + display: flex; + justify-content: space-between; + margin-bottom: 23px; +` + +export const TabList = styled.div.attrs({ role: 'tablist' })` + display: flex; +` + +type TabProps = { + selected?: boolean, +} + +export const Tab = styled.div.attrs(({ selected }: TabProps) => ({ + 'aria-pressed': selected, + role: 'tab', +}))` + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 15px 10px; + font-size: 12px; + color: ${({ theme }) => theme.colors.white}; + opacity: ${({ selected }) => (selected ? '1' : '0.4')}; + cursor: pointer; + border-bottom: 2px solid transparent; + + + ${({ selected, theme }) => (selected + ? css` + border-color: ${theme.colors.white}; + ` + : '')} +` + +export const Switch = styled.div` + display: flex; +` + +export const SwitchTitle = styled.span` + font-size: 12px; + color: ${({ theme }) => theme.colors.white}; +` + +export const SwitchButton = styled.button` + position: relative; + width: 20px; + height: 7px; + margin-left: 5px; + margin-top: 5px; + border-radius: 2px; + border: none; + border: 1px solid ${({ theme }) => theme.colors.white}; + cursor: pointer; + + ${TooltipWrapper} { + left: auto; + right: 0; + padding: 2px 10px; + border-radius: 6px; + transform: none; + + ::before { + display: none; + } + } + + :hover { + ${TooltipWrapper} { + display: block; + } + } + + ${({ theme }) => (true // Позже будет добавлен пропс + ? css` + background-image: linear-gradient( + to right, + ${theme.colors.white} 33.333%, + ${theme.colors.black} 33.333%, + ${theme.colors.black} 66.666%, + ${theme.colors.white} 66.666%, + ${theme.colors.white} 72%, + ${theme.colors.black} 72%, + ${theme.colors.black} 100%) + ` + : css` + border-color: transparent; + background-image: linear-gradient( + to right, + ${theme.colors.white} 33.333%, + ${theme.colors.black} 33.333%, + ${theme.colors.black} 38%, + ${theme.colors.white} 38%, + ${theme.colors.white} 66.666%, + ${theme.colors.black} 66.666%, + ${theme.colors.black} 72%, + ${theme.colors.white} 72%, + ${theme.colors.white} 100%) + ` + )} +` diff --git a/src/features/MatchSidePlaylists/components/TabVideo/index.tsx b/src/features/MatchSidePlaylists/components/TabVideo/index.tsx index 83d165dc..2a8740d6 100644 --- a/src/features/MatchSidePlaylists/components/TabVideo/index.tsx +++ b/src/features/MatchSidePlaylists/components/TabVideo/index.tsx @@ -77,6 +77,8 @@ export const TabVideo = ({ setOverflow(hasScroll) }, [ref, selectedDate]) + if (tournamentData.matches.length <= 1) return null + return ( void, playlists: Playlists, profile: MatchInfo, selectedPlaylist?: PlaylistOption, + tournamentData: TournamentData, } export const TabWatch = ({ @@ -23,6 +27,7 @@ export const TabWatch = ({ playlists, profile, selectedPlaylist, + tournamentData, }: Props) => ( - {!isEmpty(playlists.players.team1) && ( - - )} + ) diff --git a/src/features/MatchSidePlaylists/components/TeamsStats/index.tsx b/src/features/MatchSidePlaylists/components/TeamsStats/index.tsx new file mode 100644 index 00000000..17a1dad5 --- /dev/null +++ b/src/features/MatchSidePlaylists/components/TeamsStats/index.tsx @@ -0,0 +1,276 @@ +import { + Container, + Row, + TeamShortName, + ParamValueContainer, + ParamValue, + ParamTitle, +} from './styled' + +export const TeamsStats = () => ( + + + DIN + SPA + + + + 90 + + Points + 123 + + + + 90 + + Points + 123 + + + + 90 + + Points + 123 + + + + 90 + + Points + 123 + + + + 90 + + Points + 123 + + + + 90 + + Points + 123 + + + + 90 + + Points + 123 + + + + 90 + + Points + 123 + + + + 90 + + Points + 123 + + + + 90 + + Points + 123 + + + + 90 + + Points + 123 + + + + 90 + + Points + 123 + + + + 90 + + Points + 123 + + + + 90 + + Points + 123 + + + + 90 + + Points + 123 + + + + 90 + + Points + 123 + + + + 90 + + Points + 123 + + + + 90 + + Points + 123 + + + + 90 + + Points + 123 + + + + 90 + + Points + 123 + + + + 90 + + Points + 123 + + + + 90 + + Points + 123 + + + + 90 + + Points + 123 + + + + 90 + + Points + 123 + + + + 90 + + Points + 123 + + + + 90 + + Points + 123 + + + + 90 + + Points + 123 + + + + 90 + + Points + 123 + + + + 90 + + Points + 123 + + + + 90 + + Points + 123 + + + + 90 + + Points + 123 + + + + 90 + + Points + 123 + + + + 90 + + Points + 123 + + + + 90 + + Points + 123 + + + + 90 + + Points + 123 + + + + 90 + + Points + 123 + + + + 90 + + Points + 123 + + +) diff --git a/src/features/MatchSidePlaylists/components/TeamsStats/styled.tsx b/src/features/MatchSidePlaylists/components/TeamsStats/styled.tsx new file mode 100644 index 00000000..222b9918 --- /dev/null +++ b/src/features/MatchSidePlaylists/components/TeamsStats/styled.tsx @@ -0,0 +1,56 @@ +import styled, { css } from 'styled-components/macro' + +import { customScrollbar } from 'features/Common' + +export const Container = styled.div` + width: 100%; + font-size: 11px; + background-color: #333333; + + ${customScrollbar} +` + +export const TeamShortName = styled.span` + color: ${({ theme }) => theme.colors.white}; + letter-spacing: -0.078px; + text-transform: uppercase; + font-weight: 600; + opacity: 0.5; +` + +export const Row = styled.div` + display: flex; + justify-content: space-between; + align-items: center; + height: 45px; + padding: 0 12px; + border-bottom: 0.5px solid rgba(255, 255, 255, 0.5); + + :last-child { + border-bottom: none; + } +` + +export const ParamValueContainer = styled.div`` + +type TParamValue = { + clickable?: boolean, +} + +export const ParamValue = styled.span` + color: ${({ clickable, theme }) => (clickable ? '#5EB2FF' : theme.colors.white)}; + + ${({ clickable }) => (clickable + ? css` + cursor: pointer; + ` + : '')} +` + +export const ParamTitle = styled.span` + color: ${({ theme }) => theme.colors.white}; + letter-spacing: -0.078px; + text-transform: uppercase; + font-weight: 600; + opacity: 0.5; +` diff --git a/src/features/MatchSidePlaylists/config.tsx b/src/features/MatchSidePlaylists/config.tsx index 9ab22db3..fc7219fd 100644 --- a/src/features/MatchSidePlaylists/config.tsx +++ b/src/features/MatchSidePlaylists/config.tsx @@ -1,5 +1,6 @@ export enum Tabs { WATCH, EVENTS, - VIDEO + STATS, + PLAYERS, } diff --git a/src/features/MatchSidePlaylists/hooks.tsx b/src/features/MatchSidePlaylists/hooks.tsx index a953144c..689c6fe5 100644 --- a/src/features/MatchSidePlaylists/hooks.tsx +++ b/src/features/MatchSidePlaylists/hooks.tsx @@ -15,7 +15,6 @@ export const useMatchSidePlaylists = () => { closePopup, events, matchPlaylists: playlists, - tournamentData, } = useMatchPageStore() const [selectedTab, setSelectedTab] = useState(Tabs.WATCH) const isWatchTabVisible = useMemo(() => { @@ -35,10 +34,6 @@ export const useMatchSidePlaylists = () => { events.length > 0 ), [events]) - const isVideoTabVisible = useMemo(() => ( - tournamentData.matches.length > 1 - ), [tournamentData]) - useEffect(() => { switch (true) { case isWatchTabVisible: @@ -47,11 +42,8 @@ export const useMatchSidePlaylists = () => { case isEventTabVisible: setSelectedTab(Tabs.EVENTS) break - case isVideoTabVisible: - setSelectedTab(Tabs.VIDEO) - break } - }, [isEventTabVisible, isVideoTabVisible, isWatchTabVisible]) + }, [isEventTabVisible, isWatchTabVisible]) useEffect(() => { if (selectedTab !== Tabs.EVENTS) closePopup() @@ -59,7 +51,7 @@ export const useMatchSidePlaylists = () => { return { isEventTabVisible, - isVideoTabVisible, + isStatsTabVisible: true, isWatchTabVisible, onTabClick: setSelectedTab, selectedTab, diff --git a/src/features/MatchSidePlaylists/index.tsx b/src/features/MatchSidePlaylists/index.tsx index b3a0edc9..25b08a12 100644 --- a/src/features/MatchSidePlaylists/index.tsx +++ b/src/features/MatchSidePlaylists/index.tsx @@ -6,8 +6,6 @@ import { import type { TCircleAnimation, TSetCircleAnimation } from 'features/CircleAnimationBar' import type { PlaylistOption } from 'features/MatchPage/types' -import { Tab, TabsGroup } from 'features/Common' -import { T9n } from 'features/T9n' import { useMatchPageStore } from 'features/MatchPage/store' import { useEventListener } from 'hooks' @@ -17,18 +15,24 @@ import { isIOS } from 'config/userAgent' import { Tabs } from './config' import { TabEvents } from './components/TabEvents' import { TabWatch } from './components/TabWatch' -import { TabVideo } from './components/TabVideo' +import { TabPlayers } from './components/TabPlayers' +import { TabStats } from './components/TabStats' import { useMatchSidePlaylists } from './hooks' import { Wrapper, TabsWrapper, + TabsGroup, + Tab, + TabIcon, + TabTitle, Container, } from './styled' const tabPanes = { [Tabs.WATCH]: TabWatch, [Tabs.EVENTS]: TabEvents, - [Tabs.VIDEO]: TabVideo, + [Tabs.STATS]: TabStats, + [Tabs.PLAYERS]: TabPlayers, } type Props = { @@ -38,6 +42,8 @@ type Props = { setCircleAnimation?: TSetCircleAnimation, } +const hasLessThanFourTabs = false + export const MatchSidePlaylists = ({ circleAnimation, onSelect, @@ -54,7 +60,7 @@ export const MatchSidePlaylists = ({ const { isEventTabVisible, - isVideoTabVisible, + isStatsTabVisible, isWatchTabVisible, onTabClick, selectedTab, @@ -99,13 +105,14 @@ export const MatchSidePlaylists = ({ return ( - + {isWatchTabVisible ? ( onTabClick(Tabs.WATCH)} > - + + ) : null} {isEventTabVisible ? ( @@ -113,15 +120,26 @@ export const MatchSidePlaylists = ({ selected={selectedTab === Tabs.EVENTS} onClick={() => onTabClick(Tabs.EVENTS)} > - + + + + ) : null} + {isStatsTabVisible ? ( + onTabClick(Tabs.PLAYERS)} + > + + ) : null} - {isVideoTabVisible ? ( + {isStatsTabVisible ? ( onTabClick(Tabs.VIDEO)} + selected={selectedTab === Tabs.STATS} + onClick={() => onTabClick(Tabs.STATS)} > - + + ) : null} @@ -130,7 +148,6 @@ export const MatchSidePlaylists = ({ ` + display: flex; + height: 45px; + padding-top: 10px; + + ${({ hasLessThanFourTabs }) => (hasLessThanFourTabs + ? css` + height: 40px; + + ${Tab} { + justify-content: initial; + flex-direction: row; + gap: 5px; + } + ` + : '')} + + ${isMobileDevice + ? css` + ` + : ''}; +` + +type TabProps = { + selected?: boolean, +} + +export const Tab = styled.div.attrs(({ selected }: TabProps) => ({ + 'aria-pressed': selected, + role: 'tab', +}))` + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + flex: 1; + opacity: ${({ selected }) => (selected ? '1' : '0.4')}; + cursor: pointer; + + :hover { + opacity: 1; + } +` + +type TabIconProps = { + icon: 'watch' | 'plays' | 'players' | 'stats', +} + +export const TabIcon = styled.div` + width: 20px; + height: 20px; + background-image: url(/images/matchTabs/${({ icon }) => `${icon}.svg`}); + background-repeat: no-repeat; + background-position: center; + background-size: contain; + + ${({ icon }) => (icon === 'players' + ? css` + background-size: 23px; + ` + : '')} +` + +export const TabTitle = styled(T9n)` + font-size: 8px; + text-transform: uppercase; + color: ${({ theme }) => theme.colors.white}; +` + type TContainer = { - forVideoTab?: boolean, hasScroll: boolean, } export const Container = styled.div` width: 320px; - margin-top: 14px; + margin-top: 23px; max-height: calc(100vh - 130px); overflow-y: ${({ forVideoTab }) => (forVideoTab ? 'hidden' : 'auto')}; padding-right: ${({ forVideoTab }) => (forVideoTab ? '0' : '')}; diff --git a/src/features/Tooltip/index.tsx b/src/features/Tooltip/index.tsx index b0683b49..a436eb2d 100644 --- a/src/features/Tooltip/index.tsx +++ b/src/features/Tooltip/index.tsx @@ -25,7 +25,7 @@ export const TooltipWrapper = styled(TooltipBlockWrapper)` ` type Props = { - children: ReactNode, + children?: ReactNode, lexic: string, }