\n {teamName.slice(0, 2).toUpperCase()}\n
\n \n );\n};\n\nexport default HeaderLogo;\n","import React from 'react';\n\nconst ArrowDown = () => (\n \n);\n\nexport default ArrowDown;\n","import { useState, useEffect, useRef } from 'react';\n\nexport default function useComponentVisible(initialIsVisible, callback = null) {\n const [isComponentVisible, setIsComponentVisible] = useState(initialIsVisible);\n const ref = useRef(null);\n\n const handleClickOutside = event => {\n if (ref.current && !ref.current.contains(event.target)) {\n\t\t\tsetIsComponentVisible(prev => {\n\t\t\t\t// prev && console.log(123);\n\n return false;\n });\n if (callback) callback('');\n }\n };\n\n useEffect(() => {\n document.addEventListener('click', handleClickOutside, true);\n return () => {\n document.removeEventListener('click', handleClickOutside, true);\n };\n }, []);\n\n return { ref, isComponentVisible, setIsComponentVisible };\n}\n","import classNames from 'classnames';\nimport cl from './CrossClose.module.scss';\n\nconst CrossClose = ({ handleCrossClick, addedClass = null, ...props }) => {\n const wrapperClasses = classNames(cl.btn, {\n [addedClass]: addedClass\n });\n\n return (\n \n );\n};\n\nexport default CrossClose;\n","import ArrowDown from 'components/UI/icons/ArrowDown';\nimport React, { useState } from 'react';\nimport { getShortName } from 'utils';\nimport cl from './Dropdown.module.scss';\nimport classNames from 'classnames';\nimport useComponentVisible from 'hooks/useComponentVisible';\nimport CrossClose from 'components/UI/buttons/CrossClose/CrossClose';\n\n// function listenForOutsideClicks(listening, setListening, menuRef, setIsOpen, setSearchFieldValue) {\n// return () => {\n// if (listening) return;\n// if (!menuRef.current) return;\n// setListening(true);\n// [`click`, `touchstart`].forEach(type => {\n// document.addEventListener(type, evt => {\n// if (menuRef.current?.contains(evt.target)) return;\n// setIsOpen(false);\n// setSearchFieldValue('');\n// });\n// });\n// };\n// }\n\nconst SearchField = ({ value, setValue }) => {\n const handleSearchFieldChange = e => {\n setValue(e.target.value);\n };\n return (\n\n
\n );\n};\n\nexport default Dropdown;\n","import { useDispatch } from \"react-redux\"\nimport { setFocus } from \"redux/gameReducer\"\n\nconst useGameFocus = target => {\n\tconst dispatch = useDispatch()\n\n\tconst setGameFocus = () => dispatch(setFocus(target))\n\n\treturn setGameFocus\n}\n\t\nexport default useGameFocus","import React from 'react';\n\nconst ReplaceEvent = () => (\n \n {title}\n
\n {isOpen && (\n \n
\n \n
\n )}\n - \n {searchField && (\n
- \n
\n \n )}\n {filteredOptions.map((option, i) => (\n
\n \n \n
\n);\n\nexport default ReplaceEvent;\n","import { useSelector } from 'react-redux';\n\nconst usePitchTypes = (num, isFull = true) => {\n const { pitch_types: pitchTypes } = useSelector(state => state.game.preview);\n\n\tif (num === null || num === undefined) return\n\n const textIndex = isFull ? 0 : 1;\n\n return pitchTypes[num][textIndex];\n};\n\nexport default usePitchTypes;\n","import ReplaceEvent from 'components/UI/icons/ReplaceEvent';\nimport usePitchTypes from 'hooks/usePitchTypes';\nimport React, { forwardRef } from 'react';\nimport cl from './PlaysEvents.module.scss';\n\nconst PlaysEventsItem = ({ moment, currentMoment, handleClick, isVideo }, ref) => {\n const { icons, inner, metering, table } = moment;\n\n const isActive = inner.id === currentMoment?.inner?.id;\n const classes = isActive ? cl.active : '';\n const refValue = isActive ? ref : null;\n\n const playClasses = [];\n icons.circ_text_play !== 'R' && playClasses.push(cl[icons.circ_color_play]);\n icons.circ_text_play === 'OBR' && playClasses.push(cl.obr);\n\n const playDataBefore = icons.circ_text_pitch || icons.circ_text_play === 'R' ? '' : icons.batter_moment;\n\n const topEventText = metering?.pitch?.start_speed ? metering?.pitch?.start_speed.toFixed(0) : '';\n\n const ballsEnding = table.balls > 1 ? 's' : '';\n const strikesEnding = table.strikes > 1 ? 's' : '';\n\n const pitchTypeName = usePitchTypes(metering.pitch?.pitch_type, false);\n return (\n <>\n {icons.circ_color_pitch && (\n \n {icons.circ_text_pitch}\n
\n \n {isVideo && (\n
\n \n {pitchTypeName} {topEventText}\n
\n )}\n\n {!isVideo && (\n <>{`(${table.balls} ball${ballsEnding} - ${table.strikes} strike${strikesEnding})`}\n )}\n
\n \n {icons.circ_text_play !== 'R' ? icons.circ_text_play :
\n {!(icons.circ_color_pitch && icons.circ_color_play) && (\n \n {/* {icons.circ_color_pitch && icons.circ_color_play? (\n <>\n
\n )}\n \n \n ) : (\n <> */}\n {isVideo && (\n
\n {pitchTypeName} {topEventText}\n
\n )}\n\n {!isVideo && (\n <>{`(${table.balls} ball${ballsEnding} - ${table.strikes} strike${strikesEnding})`}\n )}\n
\n\n {/* ({table.balls} - {table.strikes}) */}\n {/* \n )} */}\n \n */}\n
\n );\n};\n\nexport default ContentPitcher;\n","import React from 'react';\nimport { useSelector } from 'react-redux';\nimport useGameFocus from 'hooks/useGameFocus';\nimport cl from './PlaysEvents.module.scss';\nimport PlaysEventsList from './PlaysEventsList';\n// import PlaysEventsTotal from './PlaysEventsTotal';\nimport ContentPitcher from '../ContentPitcher/ContentPitcher';\nimport classNames from 'classnames';\n\nconst PlaysEvents = () => {\n const moments = useSelector(state => state.game.moments);\n const isVideo = useSelector(state => state.game.isVideo);\n\n\tconst eventsClasses = classNames(cl.events, {\n\t\t[cl.noVideo]: !isVideo\n\t})\n return (\n \n Pitcher: {isPitcher && {pitcherName}}\n
\n\n {/*\n Total:{' '}\n {isPitcher && (\n \n {ballsCount + strikesCount} ({ballsCount} ball{ballsEnding}, {strikesCount} strike\n {strikesEnding})\n \n )}\n
\n\n
\n );\n};\n\nexport default PlaysEvents;\n","import React from 'react';\nimport PlaysEvents from '../PlaysEvents/PlaysEvents';\n\nconst MobileHeaderEvents = ({ cl }) => (\n \n
\n )}\n {/* \n
\n);\nexport default MobileHeaderEvents;\n","// import { useSelector } from 'react-redux';\n// import ContentControls from '../ContentControls/ContentControls';\nimport classNames from 'classnames';\nimport ContentPitcher from '../ContentPitcher/ContentPitcher';\nimport PlaysEvents from '../PlaysEvents/PlaysEvents';\nimport cl from './Content.module.scss';\n\nconst MobilePitcherFilters = () => {\n // const isVideo = useSelector(state => state.game.isVideo);\n\n\tconst eventsWrapperClasses = classNames(cl.mobileOnlyPortrait, cl.eventsWrapper)\n return (\n \n
\n );\n};\n\nexport default MobilePitcherFilters;\n","import { useMemo } from 'react';\n\nconst SORT_PRIORITY = {\n All: 1,\n Score: 2,\n Single: 3,\n Double: 4,\n Triple: 5,\n 'Home Run': 6,\n Strikeout: 7,\n 'Double Play': 8,\n Stealing: 9,\n 'Caught Stealing': 10,\n Error: 11,\n 'Wild Pitch': 12,\n 'Passed Ball': 13,\n Walk: 14,\n 'Hit By Pitch': 15,\n Balk: 16,\n Groundout: 17,\n GDP: 18,\n Flyout: 19,\n Pickoff: 20,\n Sacrifice: 21,\n Bunt: 22,\n Replace: 23,\n Interference: 24\n};\n\nexport const useFilterSituations = newSituations =>\n useMemo(() => {\n let filteredSituations = [{ name: 'All', count: 1, priority: 1 }];\n for (let newSituation of newSituations) {\n let count = newSituations.filter(sit => sit === newSituation).length;\n let index = filteredSituations.findIndex(sit => sit.name === newSituation);\n if (index !== -1) continue;\n filteredSituations[filteredSituations.length] = {\n name: newSituation,\n count,\n priority: SORT_PRIORITY[newSituation]\n };\n }\n\n return filteredSituations;\n }, [newSituations]);\n\nexport const useSortFilteredSituations = newSituations => {\n const sortedSituations = useFilterSituations(newSituations);\n\n return useMemo(() => {\n sortedSituations.sort((a, b) => (a.priority > b.priority ? 1 : -1));\n\n return sortedSituations;\n }, [sortedSituations]);\n};\n","import cl from './Header.module.scss';\nimport Dropdown from 'components/UI/dropdown/GamesDropdown/Dropdown';\nimport { useSortFilteredSituations } from 'hooks/useFilterSituations';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { setPlaybackMode, setSituationFilter } from 'redux/gameReducer';\n\nconst MobileFilters = () => {\n const situations = useSelector(s => s.game.situations);\n const playbackMode = useSelector(s => s.game.playbackMode);\n const situationFilter = useSelector(s => s.game.situationFilter);\n\n const dispatch = useDispatch();\n\n const handleClick = e => {\n playbackMode !== 'pause' && dispatch(setPlaybackMode('pause'));\n const newSituationFilter = situationFilter !== e ? e : 'All';\n dispatch(setSituationFilter(newSituationFilter));\n };\n\n const filteredSituations = useSortFilteredSituations(situations).reduce((sum, cur) => {\n sum.push(cur.name);\n return sum;\n }, []);\n return (\n \n
\n {/* \n
\n );\n};\n\nexport default MobileFilters;\n","import classNames from 'classnames';\nimport React, { useState } from 'react';\nimport { useRef } from 'react';\nimport { useSelector } from 'react-redux';\nimport { useDispatch } from 'react-redux';\nimport { setPlayerCardFilter, togglePlayerCardFilterBy, setPlayerCardFilterFocused } from 'redux/gameReducer';\nimport cl from './PlayerFilterField.module.scss';\n\nconst PlayerFilterField = () => {\n\tconst isFilteredPlayer = useSelector(s => s.game.isFilteredPlayer)\n\tconst playerCardFilterBy = useSelector(s => s.game.playerCardFilterBy)\n\tconst playerCardFilter = useSelector(s => s.game.playerCardFilter)\n\n const [filterValue, setFilterValue] = useState(playerCardFilter);\n\t\n const dispatch = useDispatch();\n\n const filterTimeoutRef = useRef();\n\n const changeHandler = e => {\n const value = e.target.value;\n setFilterValue(value);\n clearTimeout(filterTimeoutRef.current);\n\n filterTimeoutRef.current = setTimeout(() => {\n dispatch(setPlayerCardFilter(value));\n }, 400);\n };\n\n const inputClasses = classNames([cl.filterPlayerField], {\n [cl.noPlayerFiltered]: !isFilteredPlayer\n });\n\n const btnText = playerCardFilterBy === 'pitcher' ? 'P' : 'B';\n\n const handleBtnClick = () => dispatch(togglePlayerCardFilterBy());\n const handleFieldFocus = () => dispatch(setPlayerCardFilterFocused(true));\n const handleFieldBlur = () => dispatch(setPlayerCardFilterFocused(false));\n return (\n \n \n
\n );\n};\n\nexport default PlayerFilterField;\n","export default __webpack_public_path__ + \"static/media/options_button_icon.4598d9a1.svg\";","import React from 'react';\nimport cl from './SimpleToggler.module.scss';\n\nconst SimpleToggler = props => (\n \n);\nexport default SimpleToggler;\n","const newDate = new Date();\n// console.log(newDate);\n// console.log(newDate.getHours());\n// console.log(newDate.getTimezoneOffset());\n// newDate.setHours(newDate.getHours() - newDate.getTimezoneOffset() / 60);\n\nconst defaultState = {\n currentLeague: { id: -1, name: 'All' },\n // currentYear: 2022,\n currentYear: newDate.getFullYear(),\n currentDate: newDate,\n currentLeaguesScroll: 0,\n mobileWidth: 0,\n isMobile: false,\n currentGameType: 'Baseball',\n\tmobileOrientation: 0,\n\tisMobileScoreboard: true,\n isMobileTimeline: true\n\t// allYearsLeagues: {}\n};\n\nconst SET_CURRENT_LEAGUE = 'SET_CURRENT_LEAGUE';\nconst SET_CURRENT_YEAR = 'SET_CURRENT_YEAR';\nconst SET_CURRENT_DATE = 'SET_CURRENT_DATE';\nconst SET_CURRENT_LEAGUES_SCROLL = 'SET_CURRENT_LEAGUES_SCROLL';\nconst SET_MOBILE_WIDTH = 'SET_MOBILE_WIDTH';\nconst SET_IS_MOBILE = 'SET_IS_MOBILE';\nconst SET_CURRENT_GAME_TYPE = 'SET_CURRENT_GAME_TYPE';\nconst SET_MOBILE_ORIENTATION = 'SET_MOBILE_ORIENTATION';\n// const SET_ALL_YEARS_LEAGUES = 'SET_ALL_YEARS_LEAGUES';\nconst TOGGLE_IS_MOBILE_SCOREBOARD = 'TOGGLE_IS_MOBILE_SCOREBOARD';\nconst TOGGLE_IS_MOBILE_TIMELINE = 'TOGGLE_IS_MOBILE_TIMELINE';\n\nexport const sharedReducer = (state = defaultState, action) => {\n switch (action.type) {\n case SET_CURRENT_LEAGUE:\n return { ...state, currentLeague: action.payload };\n case SET_CURRENT_YEAR:\n return { ...state, currentYear: action.payload };\n case SET_CURRENT_DATE:\n return { ...state, currentDate: action.payload };\n case SET_CURRENT_LEAGUES_SCROLL:\n return { ...state, currentLeaguesScroll: action.payload };\n case SET_MOBILE_WIDTH:\n return { ...state, mobileWidth: action.payload };\n case SET_IS_MOBILE:\n return { ...state, isMobile: action.payload };\n case SET_CURRENT_GAME_TYPE:\n return { ...state, currentGameType: action.payload };\n case SET_MOBILE_ORIENTATION:\n return { ...state, mobileOrientation: action.payload };\n // case SET_ALL_YEARS_LEAGUES:\n // return { ...state, allYearsLeagues: {...state.allYearsLeagues, [action.payload.year]: action.payload.data} };\n\t\tcase TOGGLE_IS_MOBILE_SCOREBOARD:\n return { ...state, isMobileScoreboard: !state.isMobileScoreboard };\n case TOGGLE_IS_MOBILE_TIMELINE:\n return { ...state, isMobileTimeline: !state.isMobileTimeline };\n default:\n return state;\n }\n};\n\nexport const setCurrentLeague = payload => ({ type: SET_CURRENT_LEAGUE, payload });\nexport const setCurrentYear = payload => ({ type: SET_CURRENT_YEAR, payload });\nexport const setCurrentDate = payload => ({ type: SET_CURRENT_DATE, payload });\nexport const setCurrentLeaguesScroll = payload => ({ type: SET_CURRENT_LEAGUES_SCROLL, payload });\nexport const setMobileWidth = payload => ({ type: SET_MOBILE_WIDTH, payload });\nexport const setIsMobile = payload => ({ type: SET_IS_MOBILE, payload });\nexport const setCurrentGameType = payload => ({ type: SET_CURRENT_GAME_TYPE, payload });\nexport const setMobileOrientation = payload => ({ type: SET_MOBILE_ORIENTATION, payload });\n// export const setAllYearsLeagues = payload => ({ type: SET_ALL_YEARS_LEAGUES, payload });\nexport const toggleIsMobileScoreboard = () => ({ type: TOGGLE_IS_MOBILE_SCOREBOARD });\nexport const toggleIsMobileTimeline = () => ({ type: TOGGLE_IS_MOBILE_TIMELINE });","import cl from './OptionsDropdown.module.scss';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { toggleIsMobileScoreboard, toggleIsMobileTimeline } from 'redux/sharedReducer';\nimport SimpleToggler from 'components/UI/togglers/SimpleToggler/SimpleToggler';\nimport classNames from 'classnames';\n\nconst ComponentsTogglers = () => {\n\tconst isMobileScoreboard = useSelector(s => s.shared.isMobileScoreboard)\n\tconst isMobileTimeline = useSelector(s => s.shared.isMobileTimeline)\n\n\tconst dispatch = useDispatch()\n\n\tconst scoreboardRowClasses = classNames(cl.row, cl.onlyMobilePortrait)\n\tconst effectsRowClasses = classNames(cl.row, cl.onlyMobileLandscape)\n return (\n \n
\n );\n};\n\nexport default ComponentsTogglers;\n","import React from 'react';\nimport cl from './FirstLastMoment.module.scss';\n\nconst FirstLastMoment = ({ isLastMomentMode, ...props }) => {\n return (\n \n );\n};\n\nexport default FirstLastMoment;\n","import classNames from 'classnames';\nimport React from 'react';\nimport cl from './ForwardRepeat.module.scss';\n\nconst ForwardRepeat = ({ playbackMode, ...props }) => {\n const forwardPathClasses = classNames({\n [cl.unfilled]: playbackMode !== 'play',\n [cl.filled]: playbackMode === 'play'\n });\n const repeatPathClasses = classNames({\n [cl.unfilled]: playbackMode === 'play',\n [cl.filled]: playbackMode !== 'play'\n });\n return (\n \n );\n};\n\nexport default ForwardRepeat;\n","import cl from './OptionsDropdown.module.scss';\nimport FirstLastMoment from 'components/UI/buttons/FirstLastMoment/FirstLastMoment';\nimport ForwardRepeat from 'components/UI/buttons/ForwardRepeat/ForwardRepeat';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { setIsLastMomentMode, setPlaybackMode } from 'redux/gameReducer';\n\nconst PlayModesTogglers = () => {\n const playbackMode = useSelector(s => s.game.playbackMode);\n const isLastMomentMode = useSelector(s => s.game.isLastMomentMode);\n\n const dispatch = useDispatch();\n\n const playbackModeClick = e => {\n console.log(e);\n const newMode =\n e.currentTarget.name === 'play-pause' ? (playbackMode === 'play' ? 'pause' : 'play') : 'playOnline';\n dispatch(setPlaybackMode(newMode));\n };\n\n const handlefirstLastBtn = () => dispatch(setIsLastMomentMode());\n\n const getClassName = name => {\n if (\n (playbackMode !== 'playOnline' && name === 'play-pause') ||\n (playbackMode === 'playOnline' && name === 'play-online')\n )\n return cl.active;\n return '';\n };\n return (\n \n Scoreboard\n dispatch(toggleIsMobileScoreboard())} />\n
\n \n Timeline\n dispatch(toggleIsMobileTimeline())} />\n
\n \n Effects\n {}} />\n
\n \n \n \n
\n );\n};\n\nexport default PlayModesTogglers;\n","import classNames from 'classnames';\nimport cl from './OptionsDropdown.module.scss';\nimport { setVideoLengthMode, setVideoPlaybackRate } from 'redux/gameReducer';\nimport { useDispatch, useSelector } from 'react-redux';\n\nconst SpeedOption = ({ speed, handleOptionClick }) => {\n const videoPlaybackRate = useSelector(state => state.game.videoPlaybackRate);\n\n const optionsClasses = classNames(cl.speedOption, {\n [cl.active]: videoPlaybackRate === speed\n });\n return (\n \n {speed}\n
\n );\n};\n\nconst VideoMode = ({ mode, handleModeClick }) => {\n const videoLengthMode = useSelector(state => state.game.videoLengthMode);\nconsole.log(videoLengthMode);\n return (\n \n );\n};\n\nconst SpeedSelectors = () => {\n const dispatch = useDispatch();\n\n const handleVideoModeClick = name => () => dispatch(setVideoLengthMode(name));\n\n const handleSpeedOptionClick = option => () => {\n dispatch(setVideoPlaybackRate(option));\n };\n\n const speedsArr = [0.25, 1, 2];\n const videoModes = ['Full', 'Short', 'Super Short'];\n return (\n \n
\n );\n};\n\nexport default SpeedSelectors;\n","import BtnImg from 'icons/options_button_icon.svg';\nimport cl from './OptionsDropdown.module.scss';\nimport useComponentVisible from 'hooks/useComponentVisible';\nimport CrossClose from 'components/UI/buttons/CrossClose/CrossClose';\nimport SimpleToggler from 'components/UI/togglers/SimpleToggler/SimpleToggler';\nimport ComponentsTogglers from './ComponentsTogglers';\nimport PlayModesTogglers from './PlayModesTogglers';\nimport SpeedSelectors from './SpeedSelectors';\nimport classNames from 'classnames';\n\nconst OptionsDropdown = ({ panelStyles = null, mobileLandscapeVisible = false }) => {\n const {\n ref: menuRef,\n isComponentVisible: isOpen,\n setIsComponentVisible: setIsOpen\n } = useComponentVisible(false);\n\n const handleBtnClick = () => setIsOpen(prev => !prev);\n const handleCrossClick = () => setIsOpen(false);\n\n const wrapperClasses = classNames(cl.dropdownWrapper, {\n [cl.mobileLandscapeVisible]: mobileLandscapeVisible\n });\n return (\n \n
\n Speed
\n\n {speedsArr.map((speed, i) => (\n
\n \n {videoModes.map((videoMode, i) => (\n
\n \n \n {isOpen && (\n
\n );\n};\n\nexport default OptionsDropdown;\n","import classNames from 'classnames';\nimport cl from './MobileOptionsBar.module.scss';\nimport { shallowEqual, useDispatch, useSelector } from 'react-redux';\nimport { setBoxActiveButton } from 'redux/gameReducer';\n\nconst ScoreInfo = () => {\n const preview = useSelector(s => s.game.preview, shallowEqual);\n const isVideo = useSelector(s => s.game.isVideo);\n const currentTab = useSelector(s => s.game.currentTab);\n const boxActiveButton = useSelector(s => s.game.boxActiveButton);\n\n\tconst dispatch = useDispatch()\n\n\tconst handleTeamClick = teamSide => () => dispatch(setBoxActiveButton(teamSide))\n\n\tconst getTeamClasses = teamSide => classNames(cl.teamName, {\n\t\t[cl.active]: teamSide === boxActiveButton && currentTab === 'box'\n\t})\n\n const scoreWrapperClasses = classNames(cl.scoreInfo, {\n [cl.noVideo]: !isVideo\n });\n return (\n \n
\n )}\n \n
\n \n
\n \n Effects\n {}} />\n
\n \n
\n );\n};\n\nexport default ScoreInfo;\n","import React from 'react';\n\nconst ContentBoxFooterRow = ({ footerArr, columnIndex, rowIndex }) => {\n const rowTextArr = footerArr[columnIndex * 6 + rowIndex].split(':');\n\n return (\n \n {preview.guests.name}\n {preview.guests.score}\n
\n \n {preview.owners.name}\n {preview.owners.score}\n
\n \n {rowTextArr[0]}:\n {rowTextArr[1]}\n
\n );\n};\n\nexport default ContentBoxFooterRow;\n","import React from 'react';\nimport ContentBoxFooterRow from './ContentBoxFooterRow';\n\nconst ContentBoxFooterColumn = ({ columnIndex, footerArr }) => {\n const rowsArr = [];\n\n for (let rowIndex = 0; rowIndex < 6; rowIndex++) {\n columnIndex * 6 + rowIndex < footerArr.length && rowsArr.push(null);\n }\n\n return (\n\n {rowsArr.map((_, rowIndex) => (\n
\n );\n};\n\nexport default ContentBoxFooterColumn;\n","import React from 'react';\nimport cl from './ContentBoxFooter.module.scss';\nimport ContentBoxFooterColumn from './ContentBoxFooterColumn';\n\nconst ContentBoxFooter = ({ footer }) => {\n const footerArr = footer.split('\\n');\n const columnsCount = Math.ceil(footerArr.length / 6);\n const columnsArr = new Array(columnsCount).fill('', 0, columnsCount);\n\n return (\n \n
\n );\n};\n\nexport default ContentBoxFooter;","import cl from './InfoDropdown.module.scss';\nimport CrossClose from 'components/UI/buttons/CrossClose/CrossClose';\nimport HeaderTeams from 'components/Game/HeaderTeams/HeaderTeams';\nimport HeaderScoresList from 'components/Game/HeaderScoresList/HeaderScoresList';\nimport HeaderInfo from 'components/Game/HeaderInfo/HeaderInfo';\nimport { shallowEqual, useSelector } from 'react-redux';\nimport { useEffect } from 'react';\nimport useScrollHorizontally from 'hooks/useScrollHorizontally';\nimport Arrow from 'components/UI/buttons/Arrow/Arrow';\nimport VerticalScrollDivider from 'components/UI/dividers/VerticalScrollDivider/VerticalScrollDivider';\nimport classNames from 'classnames';\nimport ContentBoxFooter from 'components/Game/ContentBoxFooter/ContentBoxFooter';\n\nconst InfoPanel = ({ panelStyles, setIsOpen }) => {\n const innings = useSelector(s => s.game.innings, shallowEqual);\n const preview = useSelector(s => s.game.preview, shallowEqual);\n const { footer } = useSelector(s => s.game.boxData);\n\n const [scrollRef, isLeftScroll, isRightScroll, addListeners, removeListeners, scrollFixation] =\n useScrollHorizontally();\n\n useEffect(() => {\n const ref = scrollRef.current;\n scrollFixation();\n addListeners();\n return () => {\n removeListeners(ref);\n };\n }, [scrollFixation, addListeners, removeListeners, scrollRef]);\n\n useEffect(() => {\n if (scrollRef.current) {\n scrollFixation();\n }\n }, [innings, scrollRef, scrollFixation]);\n\n const scrollHorizontally = e => {\n const start = scrollRef.current.scrollLeft,\n change = 120,\n increment = 10;\n let currentTime = 0;\n\n Math.easeInOutQuad = function (t, b, c, d) {\n t /= d / 2;\n if (t < 1) return (c / 2) * t * t + b;\n t--;\n return (-c / 2) * (t * (t - 2) - 1) + b;\n };\n\n const animateScroll = function (name) {\n currentTime += increment;\n const val = Math.easeInOutQuad(currentTime, start, name === 'scroll-left' ? -change : change, 300);\n scrollRef.current.scrollLeft = val;\n if (currentTime < 300) {\n setTimeout(() => animateScroll(name), increment);\n }\n };\n\n animateScroll(e.currentTarget.name);\n };\n\n const handleCrossClick = () => setIsOpen(false);\n\n const leftArrowGroup = isLeftScroll ? (\n <>\n \n {columnsArr.map((_, columnIndex) => (\n
\n \n
\n );\n};\n\nexport default InfoPanel;\n","import cl from './InfoDropdown.module.scss';\nimport useComponentVisible from 'hooks/useComponentVisible';\nimport classNames from 'classnames';\nimport ArrowDown from 'components/UI/icons/ArrowDown';\nimport InfoPanel from './InfoPanel';\n\nconst InfoDropdown = ({ panelStyles = null, mobileLandscapeVisible = false }) => {\n const {\n ref: menuRef,\n isComponentVisible: isOpen,\n setIsComponentVisible: setIsOpen\n } = useComponentVisible(false);\n\n const handleBtnClick = () => setIsOpen(prev => !prev);\n\n const wrapperClasses = classNames(cl.dropdownWrapper, {\n [cl.mobileLandscapeVisible]: mobileLandscapeVisible\n });\n return (\n \n
\n {isFooter && \n
\n {leftArrowGroup}
\n {rightArrowGroup}
\n \n \n {isOpen &&
\n );\n};\n\nexport default InfoDropdown;\n","import classNames from 'classnames';\nimport cl from './MobileOptionsBar.module.scss';\nimport OptionsDropdown from './OptionsDropdown/OptionsDropdown';\nimport ScoreInfo from './ScoreInfo';\nimport { useSelector } from 'react-redux';\nimport InfoDropdown from './InfoDropdown/InfoDropdown';\n\nconst MobileOptionsBar = ({ currentTab = null, portrait = true, landscape = false }) => {\n const isVideo = useSelector(s => s.game.isVideo);\n\n const optionsBarClasses = classNames(cl.optionsBar, {\n [cl.onlyPortraitMobile]: portrait,\n [cl.onlyLandscapeMobile]: landscape,\n [cl.noVideo]: !isVideo\n });\n\n const isOptions = isVideo && currentTab !== 'box';\n const isInfo = currentTab === 'box';\n return (\n \n
\n );\n};\n\nexport default MobileOptionsBar;\n","import cl from './Header.module.scss';\nimport Dropdown from 'components/UI/dropdown/GamesDropdown/Dropdown';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { setBoxMode } from 'redux/gameReducer';\n\nconst BOX_MODES = ['Batting', 'Running', 'Fielding', 'Pitching', 'Catching', 'Machine Vision Statistics'];\n\nconst MobileBoxModes = () => {\n const boxMode = useSelector(s => s.game.boxMode);\n\n const dispatch = useDispatch();\n\n const handleClick = option => {\n dispatch(setBoxMode(option));\n };\n\n return (\n \n
\n );\n};\n\nexport default MobileBoxModes;\n","import React, { useEffect } from 'react';\nimport cl from './Header.module.scss';\nimport HeaderTabs from '../HeaderTabs/HeaderTabs';\nimport HeaderScoresList from '../HeaderScoresList/HeaderScoresList';\nimport HeaderInfo from '../HeaderInfo/HeaderInfo';\nimport HeaderTeams from '../HeaderTeams/HeaderTeams';\nimport Arrow from 'components/UI/buttons/Arrow/Arrow';\nimport VerticalScrollDivider from 'components/UI/dividers/VerticalScrollDivider/VerticalScrollDivider';\nimport useScrollHorizontally from 'hooks/useScrollHorizontally';\nimport useFullDate from 'hooks/useFullDate';\nimport { useDispatch, useSelector } from 'react-redux';\n// import { setImagesData } from 'redux/gameReducer';\nimport HeaderLogo from '../HeaderLogo/HeaderLogo';\nimport Dropdown from 'components/UI/dropdown/GamesDropdown/Dropdown';\nimport { getSearchParam, getShortName } from 'utils';\nimport { setBoxActiveButton } from 'redux/gameReducer';\nimport MobileHeaderEvents from './MobileHeaderEvents';\nimport MobilePitcherFilters from '../Content/MobilePitcherFilters';\nimport MobileFilters from './MobileFilters';\nimport PlayerFilterField from '../PlayerFilterField/PlayerFilterField';\nimport classNames from 'classnames';\nimport MobileOptionsBar from './MobileOptionsBar/MobileOptionsBar';\nimport MobileBoxModes from './MobileBoxModes';\n\nconst Header = ({ currentTab, handleTabClick }) => {\n const [scrollRef, isLeftScroll, isRightScroll, addListeners, removeListeners, scrollFixation] =\n useScrollHorizontally();\n const innings = useSelector(state => state.game.innings);\n const preview = useSelector(state => state.game.preview);\n // const imagesData = useSelector(state => state.game.imagesData);\n const inningNumber = useSelector(state => state.game.inningNumber);\n const playbackMode = useSelector(state => state.game.playbackMode);\n const isVideo = useSelector(state => state.game.isVideo);\n const boxActiveButton = useSelector(state => state.game.boxActiveButton);\n const currentCard = useSelector(state => state.game.currentCard);\n\n const isMobileScoreboard = useSelector(state => state.shared.isMobileScoreboard);\n\n const dispatch = useDispatch();\n\n // useEffect(() => {\n // const fetchImage = async (teamName, url) => {\n // try {\n // const response = await axios.get(`http://baseball-gametrack.ru/api/logo/${url}`, {\n // responseType: 'arraybuffer',\n // timeout: 2500\n // });\n\n // dispatch(\n // setImagesData({\n // [teamName]: 'data:image/jpg;base64, ' + Buffer.from(response.data, 'binary').toString('base64')\n // })\n // );\n // } catch (err) {\n // // err.message === 'Request failed with status code 523' &&\n // setTimeout(() => fetchImage(teamName, url), 2500);\n // console.log(err.message);\n // }\n // };\n\n // !imagesData[preview.guests.name] &&\n // preview.guests.logo !== '' &&\n // fetchImage(preview.guests.name, preview.guests.logo);\n // !imagesData[preview.owners.name] &&\n // preview.owners.logo !== '' &&\n // fetchImage(preview.owners.name, preview.owners.logo);\n // // eslint-disable-next-line\n // }, []);\n\n useEffect(() => {\n const ref = scrollRef.current;\n scrollFixation();\n addListeners();\n return () => {\n removeListeners(ref);\n };\n }, [scrollFixation, addListeners, removeListeners, scrollRef]);\n\n useEffect(() => {\n if (scrollRef.current) {\n scrollFixation();\n }\n }, [innings, scrollRef, scrollFixation]);\n\n useEffect(() => {\n if (playbackMode !== 'playOnline' || inningNumber < 10) return;\n scrollRef.current.scrollLeft = (inningNumber - 9) * 30;\n }, [playbackMode, inningNumber, scrollRef]);\n\n const scrollHorizontally = e => {\n const start = scrollRef.current.scrollLeft,\n change = 120,\n increment = 10;\n let currentTime = 0;\n\n Math.easeInOutQuad = function (t, b, c, d) {\n t /= d / 2;\n if (t < 1) return (c / 2) * t * t + b;\n t--;\n return (-c / 2) * (t * (t - 2) - 1) + b;\n };\n\n const animateScroll = function (name) {\n currentTime += increment;\n const val = Math.easeInOutQuad(currentTime, start, name === 'scroll-left' ? -change : change, 300);\n scrollRef.current.scrollLeft = val;\n if (currentTime < 300) {\n setTimeout(() => animateScroll(name), increment);\n }\n };\n\n animateScroll(e.currentTarget.name);\n };\n\n const handleTeamClick = name => () => dispatch(setBoxActiveButton(name));\n\n const leftArrowGroup = isLeftScroll ? (\n <>\n \n
\n \n
\n \n
\n {preview.league_name}
\n{useFullDate(preview.game_date)}
\nat Moscow ({preview.stadium_name})
\n\n
\n \n \n
\n \n {preview.guests.score}\n - \n {preview.owners.score}\n
\n \n \n
\n {currentTab !== 'box' && \n {`${useFullDate(preview.game_date)} At MOSCOW (${preview.stadium_name.toUpperCase()})`}\n
*/}\n \n {getSearchParam('tab') !== 'box' &&
\n {preview.guests.score}
\n\n
\n \n
\n {leftArrowGroup}
\n {rightArrowGroup}
\n {preview.owners.score}
\n- \n {filteredSituations}\n
\n {CAMERAS.map((camera, i) => (\n
\n );\n};\n\nexport default CameraList;\n","import React from 'react';\nimport cl from './Cross.module.scss';\n\nconst Cross = ({ imgSrc, handleClick, alt = 'close' }) => {\n return (\n \n );\n};\n\nexport default Cross;\n","import React from 'react';\nimport cl from './ModalCameraSelector.module.scss';\nimport ModalCross from 'images/modal_cross.png';\nimport { setIsCameraSelector } from 'redux/gameReducer';\nimport { useDispatch } from 'react-redux';\nimport CameraList from './CameraList';\nimport Cross from 'components/UI/buttons/Cross/Cross';\n\nconst ModalCameraSelector = ({ activeNumber }) => {\n const dispatch = useDispatch();\n\n const handleCloseBtnClick = () => dispatch(setIsCameraSelector(false));\n return (\n \n {modesData.map((mode, i) => {\n const modeClasses = classNames({\n [cl.oneCamera]: mode.cams_values.length === 1,\n [cl.fourCameras]: mode.cams_values.length === 4,\n [cl.activeMode]: mode.is_active\n });\n return (\n
\n handleModeClick(i)}>\n {mode.cams_values.map((value, j) => {\n const valueClasses = classNames({\n [cl.activeCameraBtn]: mode.is_active && mode.active_cam - 1 === j\n });\n return (\n \n );\n })}\n
\n );\n })}\n \n
\n );\n};\n\nexport default ModalCameraSelector;\n","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAdCAYAAAC9pNwMAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAEjSURBVHgBxZeNDYIwEIWPxAEcwRE6giO4gW7gCOAEuoFuwgi4gSMwwvOI13AQ+W2vvKQJP9f3QSjvgIgFwFFqMTTHTzkZS1i53ynQygzO3nfFcUng7PkU75rHqX/youB3iiD22fMoFdQNFR6loNGTAiTQSrw+PA5TE5wUQibuaTn0oDymoQMTq9kTQ6AhBiEXvBouj6gOeUT/4KOLpLcoXxRLY68Fb5/R6kEWau5GwU88rgpakKXQTbk0UAUvFbSkFEI37L1sOxt6YQ/rzjaxqqM3Fw1d8h4HNRdvuDS5fO365MIWWY0tuhMihP1iOCKGPWY0F194RqsoYY+pby4Yhz16zcUfzC2hCq5Tzu34WCbnblmWFWSkxpuBfvvtryb5v9MXlssxG0Xg0MsAAAAASUVORK5CYII=\"","import React, { useRef } from 'react';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { setIsCameraSelector, setSeekValue, setViewMode } from 'redux/gameReducer';\nimport cl from './FiltersViewModes.module.scss';\nimport GearIcon from 'icons/gear_icon.png';\nimport ModalCameraSelector from '../ModalCameraSelector/ModalCameraSelector';\n\nconst FiltersViewModes = () => {\n const activeNumberRef = useRef(1);\n\n const viewMode = useSelector(s => s.game.viewMode);\n const isCameraSelector = useSelector(s => s.game.isCameraSelector);\n\n const dispatch = useDispatch();\n\n const handleModeClick = e => {\n\t\tif (e.currentTarget.name === viewMode) {\n\t\t\treturn\n // dispatch(setIsCameraSelector(true));\n\t\t\t// return\n }\n dispatch(setViewMode(e.currentTarget.name));\n dispatch(setSeekValue(null));\n activeNumberRef.current = +e.currentTarget.name.slice(-1);\n };\n const getClassName = mode => (viewMode === mode ? cl.active : '');\n\n return (\n <>\n e.stopPropagation()}>\n
\n \n \n \n \n
\n {isCameraSelector && \n
\n \n {renderScrollArrow(isLeftArrow)}\n
\n {tab === 'videos' && !isBroadcast && isVideo && \n setLoaded(true)}\n style={imgStyles}\n alt='Portrait'\n />\n
\n );\n};\n\nexport default ContentCardPortrait;\n","import React from 'react';\nimport cl from './ContentCardTitle.module.scss';\nimport { Link } from 'react-router-dom';\n\nconst ContentCardTitle = ({ player }) => {\n const { h, '2b': b2, '3b': b3, ab, hr, pa } = player;\n\n const isStats = b2 !== undefined && b3 !== undefined && hr !== undefined;\n\n const getStats = () => {\n let subStr = [];\n b2 && subStr.push(`${b2 > 1 ? `${b2} ` : ''}2B`);\n b3 && subStr.push(`${b3 > 1 ? `${b3} ` : ''}3B`);\n hr && subStr.push(`${hr > 1 ? `${hr} ` : ''}HR`);\n subStr = subStr.join(', ');\n const isSubstr = subStr.length > 0;\n\n return `PA:${pa}, ${h} of ${ab}${isSubstr ? ` (${subStr})` : ''}`;\n };\n\n const stats = isStats ? getStats() : '';\n\n return (\n \n {`${player.hit_order}. ${player.who}. ${stats}`}\n
\n );\n};\n\nexport default ContentCardTitle;\n","import React from 'react';\n\nconst Ellipse = ({ fill, ...props }) => (\n \n);\n\nexport default Ellipse;\n","import React from 'react';\nimport Ellipse from '../Ellipse';\nimport cl from './BallsStrikes.module.scss';\n\nconst BallsStrikes = ({ balls, strikes }) => (\n\n 0 && '#2B9D6A'} />\n 1 && '#2B9D6A'} />\n 2 && '#2B9D6A'} />\n 3 && '#2B9D6A'} />\n 0 && '#E2001C'} />\n 1 && '#E2001C'} />\n 2 && '#E2001C'} />\n
\n);\n\nexport default BallsStrikes;\n","import React from 'react';\n\nconst Rectangle = ({ fill, ...props }) => (\n \n);\n\nexport default Rectangle;\n","import React from 'react';\nimport Rectangle from '../Rectangle';\nimport cl from './Bases.module.scss';\n\nconst Bases = ({ r1, r2, r3 }) => (\n \n
\n);\n\nexport default Bases;\n","import React from 'react';\nimport Ellipse from '../Ellipse';\nimport cl from './Outs.module.scss';\n\nconst Outs = ({ outs }) => (\n \n 0 && '#1A4C96'} />\n 1 && '#1A4C96'} />\n
\n);\n\nexport default Outs;\n","import React from 'react';\nimport cl from './ContentCardSigns.module.scss';\nimport BallsStrikes from 'components/UI/icons/BallsStrikes/BallsStrikes';\nimport Bases from 'components/UI/icons/Bases/Bases';\nimport Outs from 'components/UI/icons/Outs/Outs';\n\nconst ContentCardSigns = ({ table }) => {\n const { r1, r2, r3, outs, balls, strikes } = table;\n\n return (\n <>\n \n
\n \n {!noCardTitle &&
\n );\n};\n\nexport default ContentCardSimple;\n","import React from 'react';\nimport cl from './ContentCardComplexFooter.module.scss';\nimport BallsStrikes from 'components/UI/icons/BallsStrikes/BallsStrikes';\nimport Bases from 'components/UI/icons/Bases/Bases';\nimport Outs from 'components/UI/icons/Outs/Outs';\nimport { useSelector } from 'react-redux';\nimport classNames from 'classnames';\n\nconst ContentCardComplexFooter = ({ lastMoment, noSigns }) => {\n const isVideo = useSelector(state => state.game.isVideo);\n\n const eventsSummary = [];\n const { r1, r2, r3, outs, balls, strikes } = lastMoment?.table || 0;\n\n lastMoment?.events?.forEach(event => eventsSummary.push(event.description));\n\n const cardText = eventsSummary.join('.') + '.';\n\n const wrapperClasses = classNames(cl.rectanglesEllipsesWrapper, {\n [cl.noVideo]: !isVideo\n });\n return (\n \n
\n \n {cardText}\n {!noSigns && (\n
\n \n
\n )}\n \n
\n );\n};\n\nexport default ContentCardComplexFooter;\n","export default __webpack_public_path__ + \"static/media/switch_arrow.c468c60c.svg\";","import React from 'react';\nimport cl from './SwitchArrow.module.scss';\nimport SwitchArrowIcon from 'icons/switch_arrow.svg'\n\nconst SwitchArrow = () => {\n return (\n {cardText}
\n {!noSigns && (\n\n
\n )}\n \n
\n \n 
\n
\n );\n};\n\nexport default SwitchArrow;\n","import React from 'react';\nimport classNames from 'classnames';\n\nconst ItemRowSideText = ({ event, cl, side = 'left', rowNumber = 1 }) => {\n const leftSideClasses = classNames(cl.leftSide, {\n [cl.textBold]: (event.left_row2_index && rowNumber === 2) || (event.left_row1_index && rowNumber === 1)\n });\n\n const rightSideClasses = classNames(cl.rightSide, {\n [cl.textBold]: (event.right_row1_index && rowNumber === 1) || (event.right_row2_index && rowNumber === 2)\n });\n\n const classes = side === 'left' ? leftSideClasses : rightSideClasses;\n return (\n \n {event[`${side}_row${rowNumber}_text`] || event[`${side}_row${rowNumber}_index`]}\n
\n );\n};\n\nexport default ItemRowSideText;\n","import React from 'react';\nimport SwitchArrow from 'components/UI/dividers/SwitchArrow/SwitchArrow';\nimport ItemRowSideText from './ItemRowSideText';\n\nconst ItemRow = ({ event, rowNumber = 1, cl }) => (\n\n
\n);\n\nexport default ItemRow;\n","import React from 'react';\nimport ItemRow from './ItemRow';\n\nconst ItemTextBlockBody = ({ cl, event }) => {\n const isSecondRow = event.rows_numbers === 2;\n\n return (\n \n
\n );\n};\n\nexport default ItemTextBlockBody;\n","import React from 'react';\n\nconst ItemTextBlockHeader = ({ cl, header }) => {\n const headerClasses = [cl.textBold, cl.textAlignCenter].join(' ');\n\n return {header}
;\n};\n\nexport default ItemTextBlockHeader;\n","import React from 'react';\nimport ItemTextBlockBody from './ItemTextBlockBody';\nimport ItemTextBlockHeader from './ItemTextBlockHeader';\n\nconst ItemTextBlock = ({ cl, header, event, isVideo }) => {\n const isHeader = header !== null && !isVideo;\n\n return (\n\n {isHeader && \n
\n );\n};\n\nexport default ItemTextBlock;\n","import React from 'react';\nimport PortraitImg from 'images/portrait.png';\nimport ContentCardPortrait from 'components/Game/ContentCardPortrait/ContentCardPortrait';\n\nconst ItemRightPortrait = ({ cl, event, imagesData }) => {\n const rightImgClass = !imagesData[event.old_player] ? cl.default : '';\n const rightImgSrc = imagesData[event.old_player] || PortraitImg;\n\n const rightSide = event.old_player ? (\n \n \n
\n );\n};\n\nexport default ContentCardReplacementItem;\n","import React, { Fragment } from 'react';\nimport { useSelector } from 'react-redux';\nimport { getShortName } from 'utils';\nimport cl from './ContentCardReplacement.module.scss';\nimport ContentCardReplacementItem from './ContentCardReplacementItem/ContentCardReplacementItem';\n\nconst ContentCardReplacement = ({ events }) => {\n const isVideo = useSelector(state => state.game.isVideo);\n\n let teamName;\n return (\n \n {events.map((event, i) => {\n\t\t\t\tconst isTeamsNotEqual = event.team !== teamName\n\t\t\t\t\n if (isTeamsNotEqual) {\n teamName = event.team;\n const headerTitle = `${getShortName(event.team, 18)} replacements`;\n\n return (\n \n {isVideo && \n );\n }\n\n return (\n \n \n );\n })}\n
\n );\n};\n\nexport default ContentCardReplacement;\n","import React from 'react';\nimport cl from './Rects.module.scss';\n\nconst RectText = ({ icons }) => {\n const classes = [cl.rectText, cl[icons.rect_color]];\n return {headerTitle}
}\n{icons.rect_text.toUpperCase()}
;\n};\n\nexport default RectText;\n","import React from 'react';\nimport cl from './Rects.module.scss';\n\nconst RectScore = ({ icons }) => {\n const classes = [cl.score, cl.rectText];\n const scoreText = icons.score_gue + ' - ' + icons.score_own;\n\n return {scoreText}
;\n};\n\nexport default RectScore;\n","import RectScore from 'components/UI/icons/Rects/RectScore';\nimport RectText from 'components/UI/icons/Rects/RectText';\nimport React, { useLayoutEffect, useRef, useMemo } from 'react';\n\nconst BodyTop = ({ cl, sit, innerRects = false }) => {\n const ref = useRef(null);\n\n const eventsSummary = useMemo(\n () => sit.events.reduce((sum, event) => [...sum, event.description], []),\n [sit.events]\n );\n\n useLayoutEffect(() => {\n if (ref.current === null) return;\n ref.current.innerHTML = eventsSummary.join('.') + '.';\n }, [eventsSummary, sit.icons.rect_text]);\n\n const isRectScore = sit.icons.score_own !== undefined;\n\n const cardText = eventsSummary.join('.') + '.';\n return (\n \n \n {cardText}\n \n {innerRects && (\n
\n );\n};\n\nexport default BodyTop;\n","import React from 'react';\nimport cl from './ContentCardComplexBody.module.scss';\nimport 'scss/colorWords.scss';\nimport ContentCardReplacement from '../ContentCardReplacement/ContentCardReplacement';\nimport RectText from 'components/UI/icons/Rects/RectText';\nimport RectScore from 'components/UI/icons/Rects/RectScore';\nimport { useSelector } from 'react-redux';\nimport ContentCardSigns from '../ContentCardSigns/ContentCardSigns';\nimport BodyTop from './BodyTop';\nimport classNames from 'classnames';\n\nconst ContentCardComplexBody = ({ sit, noSigns, innerRects }) => {\n const isVideo = useSelector(state => state.game.isVideo);\n\n const isRectScore = sit.icons.score_own !== undefined;\n\n const bottomClasses = classNames(cl.bottom, {\n [cl.noVideo]: !isVideo\n });\n return (\n <>\n {sit.icons.rect_text !== 'Replacement' ? (\n \n
\n )}\n \n
\n ) : (\n \n
}\n \n {!noCardTitle &&
\n );\n};\n\nexport default HeaderTop;\n","import React from 'react';\nimport RectText from 'components/UI/icons/Rects/RectText';\nimport RectScore from 'components/UI/icons/Rects/RectScore';\nimport ContentCardSigns from '../ContentCardSigns/ContentCardSigns';\nimport { useSelector } from 'react-redux';\nimport classNames from 'classnames';\n\nconst HeaderBottom = ({ cl, eventsSummary, isRectText, sit, noSigns }) => {\n const isVideo = useSelector(state => state.game.isVideo);\n\n const isRectScore = sit.icons.score_own !== undefined;\n\n const bottomClasses = classNames(cl.bottom, {\n [cl.noVideo]: !isVideo\n });\n\n const bottomStyles =\n eventsSummary.length === 0 && !isVideo ? { position: 'absolute', top: '1.6rem', right: 0 } : null;\n return (\n \n
\n \n
\n \n {cardText}\n
\n {innerRects && (\n\n
\n )}\n \n {isRectText &&
\n );\n};\n\nexport default HeaderBottom;\n","import React, { useMemo } from 'react';\nimport cl from './ContentCardComplexHeader.module.scss';\nimport 'scss/colorWords.scss';\nimport ContentCardReplacement from '../ContentCardReplacement/ContentCardReplacement';\nimport HeaderTop from './HeaderTop';\nimport HeaderBottom from './HeaderBottom';\n\nconst ContentCardComplexHeader = ({ player, sit, noCardTitle, noSigns, innerRects }) => {\n const eventsSummary = useMemo(\n () =>\n sit.icons.rect_text !== 'Replacement'\n ? sit.events.reduce((sum, event) => [...sum, event.description], [])\n : [],\n // eslint-disable-next-line\n [sit.events]\n );\n\n const isRectText = sit.icons.rect_text !== 'Replacement';\n\n return (\n \n
\n );\n};\n\nexport default ContentCardComplexHeader;\n","import React from 'react';\nimport ContentCardComplexFooter from '../ContentCardComplexFooter/ContentCardComplexFooter';\nimport ContentCardComplexBody from '../ContentCardComplexBody/ContentCardComplexBody';\nimport ContentCardComplexHeader from '../ContentCardComplexHeader/ContentCardComplexHeader';\n\nconst ContentCardComplex = ({\n player,\n situationsArr,\n noCardTitle = false,\n noSigns = false,\n innerRects = false\n}) => {\n const lastMoment = player.moments.slice(-1)[0];\n const isFooter = !lastMoment.icons?.rect_text || lastMoment.icons?.rect_text === 'Replacement';\n\n return (\n <>\n \n RUNS: {beforeAfterData[cardIndex].after.runs}\n HITS: {beforeAfterData[cardIndex].after.hits}\n ERRORS: {beforeAfterData[cardIndex].after.err}\n LOB: {beforeAfterData[cardIndex].after.lob}\n
\n )}\n \n );\n};\n\nexport default forwardRef(ContentSituationsListItem);\n","import { useDispatch, useSelector } from 'react-redux';\nimport { setActiveCardList, setCurrentCard, setCurrentMoment } from 'redux/gameReducer';\n\nconst KEYS = ['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight'];\n\nconst useArrowNavigate = (cards, currentCard) => {\n const activeCardList = useSelector(state => state.game.activeCardList);\n const currentMoment = useSelector(state => state.game.currentMoment);\n const focus = useSelector(state => state.game.focus);\n\n // const playbackMode = useSelector(state => state.game.playbackMode);\n const dispatch = useDispatch();\n\n const handleKeyDown = e => {\n if (!KEYS.includes(e.key)) return;\n e.preventDefault();\n\n // Set playback mode to pause\n // playbackMode !== 'pause' && dispatch(setPlaybackMode('pause'));\n\n const cardIndex = cards.findIndex(card => card.moments[0].inner.id === currentCard.moments[0].inner.id);\n const newMoments = [];\n currentCard.type !== 'Replacement'\n ? currentCard.moments?.forEach(moment => moment.icons && newMoments.push(moment))\n : newMoments.push(currentCard.moments[0]);\n const momentIndex = newMoments?.findIndex(moment => moment.inner?.id === currentMoment?.inner?.id);\n\n if (focus !== 'list') return;\n\n switch (e.key) {\n case 'ArrowUp':\n if (cardIndex === 0 && activeCardList !== 'events') break;\n if (e.shiftKey) {\n const prevCard = cards\n .slice(0, cardIndex)\n .reverse()\n .find(card => card.who_id === currentCard.who_id);\n if (prevCard === undefined) break;\n dispatch(setCurrentCard(prevCard));\n break;\n }\n if (activeCardList === 'events') {\n if (momentIndex === 0 && cardIndex === 0) break;\n if (momentIndex === 0 || (momentIndex === -1 && cardIndex !== 0)) {\n dispatch(setCurrentCard(cards[cardIndex - 1]));\n break;\n }\n dispatch(setCurrentMoment(currentCard.moments[momentIndex - 1]));\n break;\n }\n dispatch(setCurrentCard(cards[cardIndex - 1]));\n break;\n case 'ArrowDown':\n if (cardIndex >= cards.length - 1 && activeCardList !== 'events') break;\n if (e.shiftKey) {\n const nextCard = cards.slice(cardIndex + 1).find(card => card.who_id === currentCard.who_id);\n if (nextCard === undefined) break;\n dispatch(setCurrentCard(nextCard));\n break;\n }\n if (activeCardList === 'events') {\n if (\n (momentIndex >= currentCard.moments.length - 1 && cardIndex >= cards.length - 1) ||\n momentIndex === -1\n )\n break;\n if (momentIndex >= currentCard.moments.length - 1) {\n dispatch(setCurrentCard({ ...cards[cardIndex + 1], toFirstMoment: true }));\n // dispatch(setCurrentCard({ ...cards[cardIndex + 1], manualMoment: true }));\n break;\n }\n\n dispatch(setCurrentMoment(currentCard.moments[momentIndex + 1]));\n break;\n }\n dispatch(setCurrentCard(cards[cardIndex + 1]));\n break;\n case 'ArrowLeft':\n dispatch(setActiveCardList('cards'));\n break;\n case 'ArrowRight':\n dispatch(setActiveCardList('events'));\n break;\n default:\n break;\n }\n };\n return handleKeyDown;\n};\n\nexport default useArrowNavigate;\n","import React from 'react';\nimport cl from './PlayOnline.module.scss';\n\nconst PlayOnline = ({ className, ...props }) => (\n \n);\n\nexport default PlayOnline;\n","import React from 'react';\nimport cl from './ContentControls.module.scss';\nimport PlayOnline from 'components/UI/buttons/PlayOnline/PlayOnline';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { setCurrentCard, setIsLastMomentMode, setPlaybackMode } from 'redux/gameReducer';\nimport ForwardRepeat from 'components/UI/buttons/ForwardRepeat/ForwardRepeat';\nimport FirstLastMoment from 'components/UI/buttons/FirstLastMoment/FirstLastMoment';\nimport { forwardRef } from 'react';\n\nconst ContentControls = ({ noPlayPause = false, isPlayOnline = true, ...props }, ref) => {\n const playbackMode = useSelector(s => s.game.playbackMode);\n const isLastMomentMode = useSelector(s => s.game.isLastMomentMode);\n\tconst filteredCards = useSelector(s => s.game.filteredCards)\n\n const dispatch = useDispatch();\n\n const playbackModeClick = e => {\n const newMode =\n e.currentTarget.name === 'play-pause' ? (playbackMode === 'play' ? 'pause' : 'play') : 'playOnline';\n dispatch(setPlaybackMode(newMode));\n };\n\n const handlefirstLastBtn = () => dispatch(setIsLastMomentMode());\n\n const getClassName = name => {\n if (\n (playbackMode !== 'playOnline' && name === 'play-pause') ||\n (playbackMode === 'playOnline' && name === 'play-online')\n )\n return cl.active;\n return '';\n };\n\n const handleScrollDownClick = () => {\n ref.current.scrollTop = ref.current.scrollHeight;\n\n\t\tdispatch(setCurrentCard(filteredCards[filteredCards.length - 1]))\n\t\tdispatch(setPlaybackMode('play'))\n };\n return (\n \n {!noPlayPause && (\n <>\n
\n );\n};\n\nexport default forwardRef(ContentControls);\n","import React from 'react';\nimport cl from './PlaysFooter.module.scss';\n\nconst PlaysFooter = ({ currentTab, handleClick }) => {\n const getClass = name => currentTab === name ? cl.active : '';\n\n return (\n - \n
- \n \n \n
- \n \n \n
- \n \n \n
\n
\n );\n};\n\nexport default MobileLandscapeTabs;\n","import React, { forwardRef, useEffect, useRef } from 'react';\nimport cl from './ContentSituationsList.module.scss';\nimport ContentSituationsListItem from '../ContentSituationsListItem/ContentSituationsListItem';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { setCurrentCard, setListScrollTop } from 'redux/gameReducer';\nimport useArrowNavigate from 'hooks/useArrowNavigate';\nimport ContentControls from '../ContentControls/ContentControls';\nimport MobileLandscapeTabs from './MobileLandscapeTabs';\nimport classNames from 'classnames';\nimport useGameFocus from 'hooks/useGameFocus';\n\nconst ControlsWrapper = forwardRef(({}, ref) => {\n const listScrollTop = useSelector(state => state.game.listScrollTop);\n\n return (\n \n
\n );\n});\n\nconst ContentSituationsList = ({ filteredCards, currentCard, beforeAfterData, isVideo, currentTab }, ref) => {\n const activeCardList = useSelector(state => state.game.activeCardList);\n const isMobile = useSelector(state => state.shared.isMobile);\n\n const dispatch = useDispatch();\n const handleKeyDown = useArrowNavigate(filteredCards, currentCard);\n\n const listRef = useRef(0);\n const scrollTimeoutRef = useRef();\n\n useEffect(() => {\n if (!isMobile) {\n const timeout = setTimeout(() => {\n if (!listRef.current) return;\n\n const isListScroll =\n (listRef.current.scrollTop === 0 && listRef.current.scrollHeight > listRef.current.clientHeight) ||\n listRef.current.scrollTop > 0;\n dispatch(setListScrollTop(isListScroll));\n }, 400);\n\n return () => {\n clearTimeout(timeout);\n };\n }\n\n const scrollHandler = () => {\n clearTimeout(scrollTimeoutRef.current);\n\n scrollTimeoutRef.current = setTimeout(() => {\n const element = document.documentElement;\n\n const isListScroll = element.scrollTop + window.innerHeight < element.scrollHeight;\n dispatch(setListScrollTop(isListScroll));\n }, 100);\n };\n\n window.addEventListener('scroll', scrollHandler);\n\n return () => {\n clearTimeout(scrollTimeoutRef.current);\n window.removeEventListener('scroll', scrollHandler);\n };\n }, []);\n\n useEffect(() => {\n document.addEventListener('keydown', handleKeyDown);\n return () => {\n document.removeEventListener('keydown', handleKeyDown);\n };\n }, [currentCard, filteredCards, handleKeyDown]);\n\n const situationClick = player => () => {\n // playbackMode !== 'pause' && dispatch(setPlaybackMode('pause'));\n dispatch(setCurrentCard({ ...player, manualClick: true }));\n };\n\n const scrollHandler = e => {\n clearTimeout(scrollTimeoutRef.current);\n\n scrollTimeoutRef.current = setTimeout(() => {\n const isListScroll = e.target.scrollTop + e.target.clientHeight < e.target.scrollHeight;\n dispatch(setListScrollTop(isListScroll));\n }, 100);\n };\n\n const wrapperClasses = classNames(cl.wrapper, {\n [cl.landscapeDisplayNone]: currentTab === 'videos'\n });\n const classes = classNames(cl.blueDiv, {\n [cl.wider]: activeCardList === 'cards',\n [cl.taller]: activeCardList !== 'cards'\n });\n\n const listClasses = classNames(cl.list, {\n [cl.listNoVideo]: !isVideo,\n [cl.mobilePlaysListHeight]: isVideo,\n [cl.mobilePlaysListHeightVideo]: isVideo && currentTab === 'videos'\n });\n\n console.log(filteredCards);\n return (\n \n {isVideo && currentTab !== 'videos' &&
\n );\n};\n\nexport default forwardRef(ContentSituationsList);\n","import React from 'react';\nimport cl from './ContentFooter.module.scss';\nimport ContentPitcher from '../ContentPitcher/ContentPitcher';\nimport ContentControls from '../ContentControls/ContentControls';\n\nconst ContentFooter = () => (\n - \n {filteredCards.map((card, i) => (\n
\n \n
\n);\n\nexport default ContentFooter;\n","import React from 'react';\n\nconst NoVideoScreen = () => {\n return (\n handleWrapperClick(e)}>\n
\n \n {getPlayPauseBtn()}\n {isFullscreenModeAvailable && (\n \n )}\n
\n {currentTab === 'videos' && \n Effects\n
\n );\n};\n\nexport default Effects;\n","import React from 'react';\nimport cl from './VideoOptions.module.scss';\nimport classNames from 'classnames';\n\nconst ModeListItem = ({ mode, currentMode, handleModeClick }) => {\n const itemClasses = classNames({\n [cl.active]: mode === currentMode\n });\n\n return (\n - \n {MODES.map((mode, i) => (\n
\n
\n );\n};\n\nexport default VideoSpeedDropdown;\n","import VideoSpeedDropdown from 'components/UI/dropdown/VideoSpeedDropdown/VideoSpeedDropdown';\nimport React from 'react';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { setVideoPlaybackRate } from 'redux/gameReducer';\n\nconst SpeedSelector = () => {\n const speedOptions = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];\n const videoPlaybackRate = useSelector(state => state.game.videoPlaybackRate);\n\n const dispatch = useDispatch();\n\n const handleItemClick = option => {\n dispatch(setVideoPlaybackRate(option));\n };\n return (\n \n {title}\n
\n {isOpen && (\n - \n {searchField && (\n
- \n
\n \n )}\n {filteredOptions.map((option, i) => (\n
\n
\n );\n};\n\nexport default VideoOptions;\n","import cl from '../Videos.module.scss';\nimport { useSelector } from 'react-redux';\nimport BallsStrikes from 'components/UI/icons/BallsStrikes/BallsStrikes';\nimport Bases from 'components/UI/icons/Bases/Bases';\nimport Outs from 'components/UI/icons/Outs/Outs';\n\nconst Signs = () => {\n\tconst currentCard = useSelector(state => state.game.currentCard);\n\n const situationsArr = [];\n currentCard.moments?.forEach(moment => moment.icons?.rect_text && situationsArr.push(moment));\n\n const { r1, r2, r3, outs, balls, strikes } = situationsArr[situationsArr.length - 1]?.table || {};\n return (\n \n
\n \n
\n );\n};\n\nexport default Signs;\n","import cl from '../Videos.module.scss';\nimport HeaderLogo from '../../HeaderLogo/HeaderLogo';\n\nconst TeamInfo = ({ score, side }) => {\n return (\n \n \n {/* {guests.name} */}\n
\n );\n};\n\nexport default TeamInfo;\n","import React from 'react';\nimport cl from './Video.module.scss';\nimport PlaysEvents from '../PlaysEvents/PlaysEvents';\nimport VideoOptions from '../VideoOptions/VideoOptions';\nimport { useSelector } from 'react-redux';\nimport Signs from '../Videos/SidePanel/Signs';\nimport TeamInfo from '../Videos/SidePanel/TeamInfo';\n\nconst SidePanel = () => {\n const { guests, owners } = useSelector(state => state.game.preview);\n\n return (\n {score}
\n\n
\n );\n};\n\nexport default SidePanel;\n","import React from 'react';\n\nconst TimelineEventChanger = ({ direction = 'left', handleClick, bgColor = '#1A4C96' }) => {\n const path =\n direction === 'left' ? (\n \n
\n\n \n
\n \n \n {LINES_NUMBER > 0 && (\n <>\n {/* Draggable area */}\n {totalSeconds > 0 && (!isBroadcast || (isBroadcast && currentTab === 'videos')) && (\n \n \n \n {textFrom}-{textTo}\n \n \n );\n })}\n \n ))}\n \n \n \n \n \n \n )}\n \n \n
\n );\n};\n\nexport default Timeline;\n","import cl from '../Videos.module.scss';\nimport ContentCardReplacement from '../../ContentCardReplacement/ContentCardReplacement';\nimport ContentCardComplex from '../../ContentCardComplex/ContentCardComplex';\nimport ContentCardSimple from '../../ContentCardSimple/ContentCardSimple';\nimport TimelineEventChanger from 'components/UI/buttons/TimelineEventChanger/TimelineEventChanger';\nimport { shallowEqual, useDispatch, useSelector } from 'react-redux';\nimport { setCurrentCard } from 'redux/gameReducer';\n\nconst CurrentCard = ({ currentCard }) => {\n const filteredCards = useSelector(s => s.game.filteredCards, shallowEqual);\n\n const dispatch = useDispatch();\n\n const changeCardBtnClick = direction => () => {\n const cardIndex = filteredCards.findIndex(\n card => card.moments[0].inner.id === currentCard.moments[0].inner.id\n );\n\n if (direction === 'left') {\n if (cardIndex === 0) return;\n\n dispatch(setCurrentCard(filteredCards[cardIndex - 1]));\n }\n\n if (cardIndex >= filteredCards.length - 1) return;\n\n dispatch(setCurrentCard(filteredCards[cardIndex + 1]));\n };\n\n const situationsArr = [];\n currentCard.moments?.forEach(moment => moment.icons?.rect_text && situationsArr.push(moment));\n\n return (\n \n
\n \n \n
\n \n
\n );\n};\n\nexport default CurrentCard;\n","import React from 'react';\nimport cl from './Video.module.scss';\nimport Timeline from '../Timeline/Timeline';\nimport { useSelector } from 'react-redux';\nimport CurrentCard from '../Videos/BottomPanel/CurrentCard';\n\nconst BottomPanel = () => {\n const currentCard = useSelector(state => state.game.currentCard);\n const currentMoment = useSelector(state => state.game.currentMoment);\n\n const situationsArr = [];\n currentCard.moments?.forEach(moment => moment.icons?.rect_text && situationsArr.push(moment));\n\n const pitcherName = currentCard?.moments\n ?.slice(-1)[0]\n ?.pitcher.pitches_name.replace(' ', ' ')\n .toUpperCase();\n const ballPlayerName = currentCard?.who?.replace(' ', ' ').toUpperCase();\n\n const speedValue = currentMoment?.metering?.pitch?.start_speed.toFixed(1) ?? '';\n return (\n \n {currentCard.type === 'Replacement' ? (\n
\n\t\t\t\n \n
\n );\n};\n\nexport default BottomPanel;\n","import React, { useRef, useEffect, Suspense, Fragment } from 'react';\nimport cl from './Video.module.scss';\nimport YouTube from 'react-youtube';\nimport { useSelector } from 'react-redux';\nimport classNames from 'classnames';\nimport NoVideoScreen from './NoVideoScreen';\nimport FullscreenBtn from 'components/UI/icons/VideoControlsBtns/FullscreenBtn/FullscreenBtn';\nimport { openFullscreen } from 'utils';\nimport VideoControls from '../VideoControls/VideoControls';\nimport SidePanel from './SidePanel';\nimport BottomPanel from './BottomPanel';\nimport { Canvas } from '@react-three/fiber';\n// import { FontLoader } from 'three/examples/jsm/loaders/FontLoader';\n// import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry';\n// import ComfortaaFont from 'fonts/Comfortaa_Regular.json';\n// import { Quaternion, Vector3 } from 'three';\nimport { degToRad } from 'three/src/math/MathUtils';\n\nconst BatPath = ({ currentMoment, videoCurrentTime }) => {\n // const { camera } = useThree();\n\n // camera.lookAt(-5.39615, 8.88691, 0);\n\t// camera.rotation.z = degToRad(3.077909001)\n\n const { data_3d: batCoords, speeds } = currentMoment?.metering?.bat || {};\n // const { time_start: timeStart } = currentMoment?.metering?.hit || {};\n\n const curTimeCorr = videoCurrentTime;\n // const curTimeCorr = videoCurrentTime + 0.286;\n\n const timeStart = speeds[0][1];\n\n const totalHitTime = speeds[speeds.length - 1][1] - timeStart;\n // const totalHitTime = speeds[speeds.length - 1][1];\n\n const elapsedTime =\n curTimeCorr < timeStart ||\n videoCurrentTime > currentMoment.video.full_seconds_to ||\n videoCurrentTime < currentMoment.video.full_seconds_from\n ? 0\n : curTimeCorr - timeStart;\n const coordsLength = batCoords.length;\n\n const sliceCoef = totalHitTime / coordsLength;\n const sliceCount = elapsedTime / sliceCoef;\n\n // const textRef = useRef(null);\n\n // const { camera } = useThree();\n // camera.aspect = 1.77777\n // camera.lookAt(-80, 0, 0);\n // useFrame(() => {\n // if (textRef.current === null) return;\n // let zPosition = textRef.current.position.z;\n // textRef.current.position.z = zPosition < 100 ? zPosition + 1 : -140;\n // });\n\n // extend({ TextGeometry });\n // const font = new FontLoader().parse(ComfortaaFont);\n\n const dotRadius = 0.04;\n\n // const xCorrect = 0;\n // const zCorrect = 0;\n const xCorrect = 1; \n const zCorrect = -0.5; \n\n const getDistance = (coords, prevCoords) =>\n Math.sqrt(\n (coords[3] - prevCoords[3]) ** 2 + (coords[4] - prevCoords[4]) ** 2 + (coords[5] - prevCoords[5]) ** 2\n );\n\n const firstDistance = getDistance(batCoords[1], batCoords[0]);\n const defaultMinMaxDistance = { min: firstDistance, max: firstDistance };\n\n const minMaxDistance = batCoords.reduce((sum, cur, i) => {\n if (i < 2) return sum;\n\n const curDistance = getDistance(cur, batCoords[i - 1]);\n\n if (curDistance < sum.min) {\n sum.min = curDistance;\n return sum;\n }\n\n if (curDistance > sum.max) {\n sum.max = curDistance;\n return sum;\n }\n\n return sum;\n }, defaultMinMaxDistance);\n\n const minOpacity = 0.3;\n const maxOpacity = 1;\n\n const opacityCoef = (maxOpacity - minOpacity) / (minMaxDistance.max - minMaxDistance.min);\n return (\n <>\n {sliceCount &&\n batCoords.slice(0, sliceCount).map((coords, i, arr) => {\n const curOpacity = i > 0 ? minOpacity + getDistance(coords, arr[i - 1]) * opacityCoef : minOpacity;\n\n return (\n \n
\n \n
\n {speedValue} mph\n \n P:\n {pitcherName}\n
\n \n B:\n {ballPlayerName}\n
\n \n {Object.keys(currentCard).length !== 0 ? (\n
\n );\n};\n\nexport default Video;\n","import React, { useLayoutEffect, useRef, forwardRef, useEffect } from 'react';\nimport Video from '../Video/Video';\nimport getYouTubeID from 'get-youtube-id';\nimport { useDispatch, useSelector } from 'react-redux';\nimport {\n setCurrentCard,\n setCurrentMoment,\n setMaxVideoMomentBroadcast,\n setSeekValue,\n setVideoCurrentTime,\n setVideoState,\n setViewMode\n} from 'redux/gameReducer';\nimport VideoControls from '../VideoControls/VideoControls';\n\nconst VideoList = ({ viewMode }, ref) => {\n const preview = useSelector(state => state.game.preview);\n const currentMoment = useSelector(s => s.game.currentMoment);\n const currentCard = useSelector(s => s.game.currentCard);\n const videoState = useSelector(s => s.game.videoState);\n const preferredVideoState = useSelector(s => s.game.preferredVideoState);\n const videoCurrentTime = useSelector(s => s.game.videoCurrentTime);\n const videoPlaybackRate = useSelector(s => s.game.videoPlaybackRate);\n const seekValue = useSelector(s => s.game.seekValue);\n const sliderCoords = useSelector(s => s.game.timelineSliderCoords);\n const videoLengthMode = useSelector(s => s.game.videoLengthMode);\n const filteredCards = useSelector(s => s.game.filteredCards);\n const isLastMomentMode = useSelector(s => s.game.isLastMomentMode);\n const playbackMode = useSelector(s => s.game.playbackMode);\n const isBroadcast = useSelector(s => s.game.isBroadcast);\n const maxVideoMomentBroadcast = useSelector(s => s.game.maxVideoMomentBroadcast);\n\n const dispatch = useDispatch();\n\n const video1Ref = useRef(null);\n const video2Ref = useRef(null);\n const video3Ref = useRef(null);\n const video4Ref = useRef(null);\n\n const timeIntervalRef = useRef(null);\n const intervalRef = useRef(null);\n const modeRef = useRef('play');\n\n const startRef = useRef(null);\n const endRef = useRef(null);\n const nextMomentTimeoutRef = useRef();\n const videoHandlingTimeoutRef = useRef();\n const playTimeoutRef = useRef();\n const alreadySeekingRef = useRef(false);\n const isPrevMomentInterrupted = useRef(false);\n\n // New synchronization method\n const allTimesIntervalRef = useRef();\n const syncTimeoutRef = useRef(false);\n\n const modeNumber = +viewMode.slice(-1);\n\n const VIDEO_NUMBERS =\n viewMode.slice(-1) === '1'\n ? { 1: video1Ref }\n : {\n 1: video1Ref,\n 2: video2Ref,\n 3: video3Ref,\n 4: video4Ref\n };\n\n useEffect(\n () => () => {\n clearInterval(intervalRef.current);\n },\n []\n );\n useEffect(() => {\n if (video1Ref.current === null) return;\n\n videoHandling(false, false);\n }, [filteredCards]);\n\n useEffect(() => {\n const isInterruptedMoment =\n !!preview.camera_info.broadcast_link_add_moment_from &&\n currentMoment?.inner?.id >= preview.camera_info.broadcast_link_add_moment_from;\n\n if (\n ((isPrevMomentInterrupted.current === false && isInterruptedMoment) ||\n (isPrevMomentInterrupted.current === true && !isInterruptedMoment)) &&\n viewMode === 'mode-1'\n ) {\n isPrevMomentInterrupted.current = isInterruptedMoment;\n\n setTimeout(() => {\n dispatch(setViewMode('mode-2'));\n\n setTimeout(() => {\n dispatch(setViewMode('mode-1'));\n }, 10);\n }, 10);\n }\n\n function handleKeyDown(e) {\n if (e.code !== 'Space' || video1Ref.current === null || !currentMoment.video) return;\n e.preventDefault();\n\n const currentState = video1Ref.current.getPlayerState();\n\n e.code === 'Space' && setPlayPause(currentState === 1 ? 'pause' : 'play');\n }\n\n document.addEventListener('keydown', handleKeyDown);\n\n return () => {\n document.removeEventListener('keydown', handleKeyDown);\n };\n // eslint-disable-next-line\n }, [currentMoment]);\n\n useEffect(() => {\n clearInterval(allTimesIntervalRef.current);\n\n if (preferredVideoState === 2) {\n clearTimeout(playTimeoutRef.current);\n syncTimeoutRef.current = false;\n alreadySeekingRef.current = false;\n }\n\n if (viewMode === 'mode-1') return;\n\n allTimesIntervalRef.current = setInterval(() => {\n const video1Time = video1Ref.current?.getCurrentTime();\n const video2Time = video2Ref.current?.getCurrentTime();\n const video3Time = video3Ref.current?.getCurrentTime();\n const video4Time = video4Ref.current?.getCurrentTime();\n\n if (!video1Time || !video2Time || !video3Time || !video4Time) return;\n\n const delta1 = 0;\n const delta2 = Math.abs(video1Time - video2Time);\n const delta3 = Math.abs(video1Time - video3Time);\n const delta4 = Math.abs(video1Time - video4Time);\n\n const deltaArr = [delta1, delta2, delta3, delta4];\n\n const deltaCap = 0.08;\n const deltaCaps = [\n getCamDelta(modeNumber, 1),\n getCamDelta(modeNumber, 2),\n getCamDelta(modeNumber, 3),\n getCamDelta(modeNumber, 4)\n ];\n const isBigDelta = deltaArr.some(\n (delta, i) => delta > Math.abs(deltaCaps[0] - deltaCaps[i]) + deltaCap\n );\n\n if (isBigDelta && !alreadySeekingRef.current) {\n video1Ref.current.pauseVideo();\n video2Ref.current?.pauseVideo();\n video3Ref.current?.pauseVideo();\n video4Ref.current?.pauseVideo();\n\n delta2 > Math.abs(deltaCaps[0] - deltaCaps[1]) + deltaCap &&\n video2Ref.current?.seekTo(video1Time + (deltaCaps[0] - deltaCaps[1]), true);\n delta3 > Math.abs(deltaCaps[0] - deltaCaps[2]) + deltaCap &&\n video3Ref.current?.seekTo(video1Time + (deltaCaps[0] - deltaCaps[2]), true);\n delta4 > Math.abs(deltaCaps[0] - deltaCaps[3]) + deltaCap &&\n video4Ref.current?.seekTo(video1Time + (deltaCaps[0] - deltaCaps[3]), true);\n }\n\n // const isAllPaused = Object.entries(VIDEO_NUMBERS).every(entry => {\n // const entryState = entry[1].current?.getPlayerState();\n // return entryState === 2;\n // });\n\n const isAllReady = Object.entries(VIDEO_NUMBERS).every(entry => {\n const entryState = entry[1].current?.getPlayerState();\n return entryState === -1 || entryState === 2;\n });\n\n if (isAllReady && !isBigDelta && preferredVideoState === 1 && !syncTimeoutRef.current) {\n syncTimeoutRef.current = true;\n\n video1Ref.current.playVideo();\n video2Ref.current?.playVideo();\n video3Ref.current?.playVideo();\n video4Ref.current?.playVideo();\n\n syncTimeoutRef.current = false;\n alreadySeekingRef.current = false;\n }\n }, 90);\n\n return () => {\n clearInterval(allTimesIntervalRef.current);\n clearTimeout(playTimeoutRef.current);\n };\n }, [preferredVideoState, viewMode]);\n\n //\n\n useLayoutEffect(() => {\n video1Ref.current = null;\n video2Ref.current = null;\n video3Ref.current = null;\n video4Ref.current = null;\n }, [viewMode]);\n\n useEffect(() => {\n if (video1Ref.current === null) return;\n\n clearTimeout(videoHandlingTimeoutRef.current);\n clearInterval(intervalRef.current);\n\n const { video } = currentMoment;\n\n let secondsTotal, secondsFromRated;\n\n if (video) {\n const videoLengthPrefix =\n !isBroadcast &&\n viewMode === 'mode-1' &&\n JSON.parse(preview.camera_views[0]).cameras[0] === 'broadcast_link'\n ? 'broadcast'\n : videoLengthMode.toLowerCase().replace(' ', '_');\n\n secondsTotal = video[`${videoLengthPrefix}_seconds_to`] - video[`${videoLengthPrefix}_seconds_from`];\n secondsFromRated =\n video[`${videoLengthPrefix}_seconds_from`] +\n (secondsTotal / 100) * (sliderCoords.changedCoord !== 'x2' ? sliderCoords.x1 : sliderCoords.x2);\n }\n\n if (sliderCoords.noChange && videoCurrentTime > secondsFromRated) {\n videoHandling(false, false);\n return;\n }\n\n const isForcePlay = preferredVideoState === 1;\n\n video1Ref.current?.pauseVideo();\n video2Ref.current?.pauseVideo();\n video3Ref.current?.pauseVideo();\n video4Ref.current?.pauseVideo();\n\n if (video) {\n const videoLengthPrefix =\n !isBroadcast &&\n viewMode === 'mode-1' &&\n JSON.parse(preview.camera_views[0]).cameras[0] === 'broadcast_link'\n ? 'broadcast'\n : videoLengthMode.toLowerCase().replace(' ', '_');\n\n const secondsTotal =\n video[`${videoLengthPrefix}_seconds_to`] - video[`${videoLengthPrefix}_seconds_from`];\n\n const secondsFromRated =\n video[`${videoLengthPrefix}_seconds_from`] +\n (secondsTotal / 100) * (sliderCoords.changedCoord !== 'x2' ? sliderCoords.x1 : sliderCoords.x2);\n\n if (!currentMoment?.noStartSeeking) {\n video1Ref.current?.seekTo(secondsFromRated - getCamDelta(modeNumber, 1), true);\n video2Ref.current?.seekTo(secondsFromRated - getCamDelta(modeNumber, 2), true);\n video3Ref.current?.seekTo(secondsFromRated - getCamDelta(modeNumber, 3), true);\n video4Ref.current?.seekTo(secondsFromRated - getCamDelta(modeNumber, 4), true);\n }\n }\n\n videoHandlingTimeoutRef.current = setTimeout(\n () => {\n videoHandling(false, isForcePlay);\n },\n videoLengthMode === 'Super Short' ? 1500 : 30\n );\n\n // eslint-disable-next-line\n }, [currentMoment, sliderCoords]);\n\n useEffect(() => {\n if (video1Ref.current === null) return;\n\n playbackMode === 'play' && clearTimeout(nextMomentTimeoutRef.current);\n\n videoHandling(false);\n // eslint-disable-next-line\n }, [isLastMomentMode]);\n\n useEffect(() => {\n (currentMoment.manualClick || currentCard.manualClick) && clearTimeout(nextMomentTimeoutRef.current);\n }, [currentMoment, currentCard]);\n\n useEffect(() => {\n modeRef.current = playbackMode;\n\n if (currentMoment.video) return;\n\n if (playbackMode === 'pause') {\n clearTimeout(nextMomentTimeoutRef.current);\n return;\n }\n\n playbackMode === 'play' && toNextMomentOrCard();\n // eslint-disable-next-line\n }, [playbackMode]);\n\n useEffect(() => {\n if (seekValue === null) return;\n\n seekVideos(seekValue);\n dispatch(setSeekValue(null));\n // eslint-disable-next-line\n }, [seekValue]);\n\n useEffect(() => {\n rateChangeHandler(videoPlaybackRate);\n }, [videoPlaybackRate]);\n\n useEffect(() => {\n clearInterval(timeIntervalRef.current);\n\n const camDelta1 = getCamDelta(modeNumber, 1);\n timeIntervalRef.current = setInterval(\n () => {\n const time = video1Ref.current?.getCurrentTime();\n\n time && dispatch(setVideoCurrentTime(time + camDelta1));\n },\n videoState === 1 ? 15 : 200\n );\n\n return () => {\n clearInterval(timeIntervalRef.current);\n };\n // eslint-disable-next-line\n }, [currentMoment, videoState]);\n\n const { camera_info: cameraInfo, camera_views: cameraViews } = preview;\n\n const getCamLink = (modeNumber, index) => {\n const isInterruptedMoment =\n !!preview.camera_info.broadcast_link_add_moment_from &&\n currentMoment?.inner?.id >= preview.camera_info.broadcast_link_add_moment_from;\n\n if (modeNumber === 1 && isInterruptedMoment) return cameraInfo.broadcast_link_add;\n\n return cameraInfo[JSON.parse(cameraViews[modeNumber - 1]).cameras[index]];\n };\n\n function getCamDelta(modeNumber, videoNumber) {\n return cameraInfo[\n JSON.parse(cameraViews[modeNumber - 1]).cameras[videoNumber - 1].replace('link', 'time')\n ];\n }\n\n const MODE_LINKS = {\n 'mode-1': [getCamLink(1, 0)],\n 'mode-2': [getCamLink(2, 0), getCamLink(2, 1), getCamLink(2, 2), getCamLink(2, 3)],\n 'mode-3': [getCamLink(3, 0), getCamLink(3, 1), getCamLink(3, 2), getCamLink(3, 3)]\n };\n\n const videoId1 = getYouTubeID(MODE_LINKS[viewMode][0]) || 'WCjLd7QAJq8';\n const videoId2 = getYouTubeID(MODE_LINKS[viewMode][1]) || null;\n const videoId3 = getYouTubeID(MODE_LINKS[viewMode][2]) || null;\n const videoId4 = getYouTubeID(MODE_LINKS[viewMode][3]) || null;\n\n const viewModeNumber = +viewMode.slice(-1);\n\n function toNextMomentOrCard() {\n const momentIndex = currentCard.moments.findIndex(moment => moment.inner.id === currentMoment.inner?.id);\n\n if (momentIndex < currentCard.moments.length - 1) {\n const nextMoment = currentCard.moments[momentIndex + 1];\n\n dispatch(setCurrentMoment(nextMoment));\n\n if (!nextMoment.video) return;\n\n const { video: nextVideo } = nextMoment;\n const videoLengthPrefix =\n !isBroadcast &&\n viewMode === 'mode-1' &&\n JSON.parse(preview.camera_views[0]).cameras[0] === 'broadcast_link'\n ? 'broadcast'\n : videoLengthMode.toLowerCase().replace(' ', '_');\n\n const getSliderCoords = video => {\n return {\n x1: 0,\n x2: 0\n };\n };\n //\n\n const secondsTotal =\n nextVideo[`${videoLengthPrefix}_seconds_to`] - nextVideo[`${videoLengthPrefix}_seconds_from`];\n\n const secondsFromRated =\n nextVideo[`${videoLengthPrefix}_seconds_from`] + (secondsTotal / 100) * getSliderCoords(nextVideo).x1;\n\n video1Ref.current?.seekTo(secondsFromRated - getCamDelta(modeNumber, 1), true);\n video2Ref.current?.seekTo(secondsFromRated - getCamDelta(modeNumber, 2), true);\n video3Ref.current?.seekTo(secondsFromRated - getCamDelta(modeNumber, 3), true);\n video4Ref.current?.seekTo(secondsFromRated - getCamDelta(modeNumber, 4), true);\n\n const secondsToRated =\n nextVideo[`${videoLengthPrefix}_seconds_from`] + (secondsTotal / 100) * getSliderCoords(nextVideo).x2;\n endRef.current = secondsToRated;\n } else {\n let cardIndex = filteredCards.findIndex(\n card => card.moments[0].inner.id === currentCard.moments[0].inner.id\n );\n\n cardIndex++;\n\n if (cardIndex < filteredCards.length) {\n dispatch(\n setCurrentCard({\n ...filteredCards[cardIndex],\n toFirstMoment: !isLastMomentMode,\n manualClick: false\n })\n );\n\n return;\n }\n // dispatch(setPlaybackMode('pause'));\n }\n }\n\n const videoHandling = (doSeek = true, isForcePlay = true, seekToCurrentTime = false) => {\n clearInterval(intervalRef.current);\n\n if (!currentMoment.video) {\n const maxVideoMoment = filteredCards.reduce((maxMoment, card) => {\n card.type !== 'Replacement' &&\n card.moments?.forEach(moment => {\n if (moment.icons && moment.video) {\n maxMoment = moment;\n }\n });\n\n return maxMoment;\n }, []);\n\n if (currentMoment.inner.id > maxVideoMoment.inner.id) {\n preferredVideoState === 1 && video1Ref.current?.playVideo();\n\n if (maxVideoMoment?.video?.broadcast_seconds_to) {\n dispatch(setMaxVideoMomentBroadcast(true));\n }\n\n if (video1Ref.current?.getCurrentTime() < maxVideoMoment?.video?.broadcast_seconds_to) {\n video1Ref.current?.seekTo(maxVideoMoment.video.broadcast_seconds_to);\n }\n // video1Ref.current?.pauseVideo();\n // setTimeout(() => {\n // videoHandling(true, isForcePlay);\n // }, 1000);\n return;\n }\n\n dispatch(setMaxVideoMomentBroadcast(false));\n\n video1Ref.current?.pauseVideo();\n video2Ref.current?.pauseVideo();\n video3Ref.current?.pauseVideo();\n video4Ref.current?.pauseVideo();\n\n if (modeRef.current !== 'pause') {\n nextMomentTimeoutRef.current = setTimeout(toNextMomentOrCard, 3000);\n }\n return;\n }\n\n if (\n currentCard.moments.length === 0\n // || !currentCard.moments[0].video\n ) {\n video1Ref.current?.pauseVideo();\n video2Ref.current?.pauseVideo();\n video3Ref.current?.pauseVideo();\n video4Ref.current?.pauseVideo();\n\n return;\n }\n\n const { video } = currentMoment;\n const videoLengthPrefix =\n !isBroadcast &&\n viewMode === 'mode-1' &&\n JSON.parse(preview.camera_views[0]).cameras[0] === 'broadcast_link'\n ? 'broadcast'\n : videoLengthMode.toLowerCase().replace(' ', '_');\n const secondsTotal =\n video[`${videoLengthPrefix}_seconds_to`] - video[`${videoLengthPrefix}_seconds_from`];\n\n const secondsFromRated =\n video[`${videoLengthPrefix}_seconds_from`] + (secondsTotal / 100) * sliderCoords.x1;\n\n const seekToTime = seekToCurrentTime ? videoCurrentTime : secondsFromRated;\n\n if (doSeek) {\n video1Ref.current?.seekTo(seekToTime - getCamDelta(modeNumber, 1), true);\n video2Ref.current?.seekTo(seekToTime - getCamDelta(modeNumber, 2), true);\n video3Ref.current?.seekTo(seekToTime - getCamDelta(modeNumber, 3), true);\n video4Ref.current?.seekTo(seekToTime - getCamDelta(modeNumber, 4), true);\n }\n\n if (isForcePlay) {\n video1Ref.current?.playVideo();\n video2Ref.current?.playVideo();\n video3Ref.current?.playVideo();\n video4Ref.current?.playVideo();\n }\n\n const secondsToRated =\n video[`${videoLengthPrefix}_seconds_from`] + (secondsTotal / 100) * sliderCoords.x2;\n\n startRef.current = secondsFromRated;\n endRef.current = secondsToRated;\n\n const camDelta1 = getCamDelta(modeNumber, 1);\n\n intervalRef.current = setInterval(() => {\n if (video1Ref.current === null) return;\n\n const currentTime = video1Ref.current.getCurrentTime() + camDelta1;\n\n if (currentTime < startRef.current && viewMode === 'mode-1') {\n video1Ref.current?.seekTo(seekToTime - getCamDelta(modeNumber, 1), true);\n // console.log('seeking video1 to: ',seekToTime - getCamDelta(modeNumber, 1), '...');\n return;\n }\n\n if (currentTime >= endRef.current) {\n if (modeRef.current === 'pause') {\n videoHandling(true, isForcePlay);\n return;\n }\n\n //To next moment or card\n toNextMomentOrCard();\n }\n }, 50);\n };\n\n function rateChangeHandler(e) {\n const value = typeof e === 'number' ? e : e.data;\n\n video1Ref.current?.setPlaybackRate(value);\n video2Ref.current?.setPlaybackRate(value);\n video3Ref.current?.setPlaybackRate(value);\n video4Ref.current?.setPlaybackRate(value);\n }\n\n const seekVideos = sec => {\n // New synchronization method\n alreadySeekingRef.current = false;\n video1Ref.current?.seekTo(sec - getCamDelta(modeNumber, 1), true);\n video2Ref.current?.seekTo(sec - getCamDelta(modeNumber, 2), true);\n video3Ref.current?.seekTo(sec - getCamDelta(modeNumber, 3), true);\n video4Ref.current?.seekTo(sec - getCamDelta(modeNumber, 4), true);\n };\n\n function setPlayPause(state) {\n if (state === 'play') {\n video1Ref.current?.playVideo();\n video2Ref.current?.playVideo();\n video3Ref.current?.playVideo();\n video4Ref.current?.playVideo();\n\n return;\n }\n\n video1Ref.current?.pauseVideo();\n video2Ref.current?.pauseVideo();\n video3Ref.current?.pauseVideo();\n video4Ref.current?.pauseVideo();\n }\n\n //Handle on funcs\n\n const handleOnReady = (videoNumber, target) => {\n VIDEO_NUMBERS[videoNumber].current = target;\n\n const isForcePlay = preferredVideoState === 1;\n\n let seekToCurrentTime = videoCurrentTime > 0;\n\n if (currentMoment?.video) {\n const videoLengthPrefix =\n !isBroadcast &&\n viewMode === 'mode-1' &&\n JSON.parse(preview.camera_views[0]).cameras[0] === 'broadcast_link'\n ? 'broadcast'\n : videoLengthMode.toLowerCase().replace(' ', '_');\n\n const timeStartVideo = currentMoment?.video[`${videoLengthPrefix}_seconds_from`];\n const timeEndVideo = currentMoment?.video[`${videoLengthPrefix}_seconds_to`];\n // const timeEndPitch = currentMoment?.metering?.pitch?.time_end_pitch_window;\n\n seekToCurrentTime =\n videoCurrentTime > 0 && videoCurrentTime > timeStartVideo && videoCurrentTime < timeEndVideo;\n }\n\n videoHandling(true, isForcePlay, seekToCurrentTime);\n\n target.setPlaybackRate(videoPlaybackRate);\n };\n\n const stateChangeHandler = (videoNumber, target, stateValue) => {\n videoNumber === 1 && dispatch(setVideoState(stateValue));\n\n stateValue === 1 && preferredVideoState === 2 && target.pauseVideo();\n };\n\n return (\n <>\n {viewModeNumber === 1 && (\n \n \n {currentTime}\n */}\n {/* {videoCurrentTime?.toFixed(2)} */}\n {/* {currentMoment.video?.seconds_to.toFixed(2)} */}\n
\n ) : (\n <>\n )}\n \n \n {/* */}\n
\n {!currentMoment.video && !maxVideoMomentBroadcast && \n
\n \n
\n );\n};\n\nexport default SidePanel;\n","import React from 'react';\nimport cl from '../Videos.module.scss';\nimport Timeline from '../../Timeline/Timeline';\nimport { useSelector } from 'react-redux';\nimport CurrentCard from './CurrentCard';\n\nconst BottomPanel = () => {\n const currentCard = useSelector(state => state.game.currentCard);\n const currentMoment = useSelector(state => state.game.currentMoment);\n\n const pitcherName = currentCard?.moments\n ?.slice(-1)[0]\n ?.pitcher.pitches_name.replace(' ', ' ')\n .toUpperCase();\n const ballPlayerName = currentCard?.who?.replace(' ', ' ').toUpperCase();\n\n const speedValue = currentMoment?.metering?.pitch?.start_speed.toFixed(1) ?? '';\n return (\n \n
\n\n \n
\n \n
\n );\n};\n\nexport default BottomPanel;\n","import React, { useRef, useEffect } from 'react';\nimport cl from './Videos.module.scss';\nimport { useSelector } from 'react-redux';\nimport classNames from 'classnames';\nimport VideoList from '../VideoList/VideoList';\nimport { closeFullscreen, openFullscreen } from 'utils';\nimport SidePanel from './SidePanel/SidePanel';\nimport BottomPanel from './BottomPanel/BottomPanel';\n\nconst Videos = ({ currentTab }) => {\n const wrapperRef = useRef();\n const timerRef = useRef();\n const controlsWrapperRef = useRef();\n\n const viewMode = useSelector(s => s.game.viewMode);\n const isFullscreen = useSelector(s => s.game.isFullscreen);\n const currentMoment = useSelector(s => s.game.currentMoment);\n const playerCardFilterFocused = useSelector(s => s.game.playerCardFilterFocused);\n const preferredVideoState = useSelector(s => s.game.preferredVideoState);\n const maxVideoMomentBroadcast = useSelector(s => s.game.maxVideoMomentBroadcast);\n\n const isMobile = useSelector(s => s.shared.isMobile);\n\n useEffect(() => () => clearTimeout(timerRef.current), []);\n\n useEffect(() => {\n if (playerCardFilterFocused) {\n document.removeEventListener('keydown', handleKeyDown);\n return;\n }\n\n document.addEventListener('keydown', handleKeyDown);\n\n return () => {\n document.removeEventListener('keydown', handleKeyDown);\n };\n }, [isFullscreen, playerCardFilterFocused]);\n\n function handleKeyDown(e) {\n if (e.code !== 'KeyF') return;\n e.preventDefault();\n\n e.code === 'KeyF' && (isFullscreen ? closeFullscreen() : openFullscreen(wrapperRef.current));\n }\n\n function handleMouseMove() {\n if ((!currentMoment.video && !maxVideoMomentBroadcast) || isMobile) return;\n\n clearTimeout(timerRef.current);\n\n controlsWrapperRef.current.lastChild.style.opacity = 1;\n controlsWrapperRef.current.lastChild.style.visibility = 'visible';\n\n timerRef.current = setTimeout(() => {\n if (!controlsWrapperRef.current) return;\n controlsWrapperRef.current.lastChild.style.opacity = 0;\n timerRef.current = setTimeout(() => {\n if (controlsWrapperRef.current) controlsWrapperRef.current.lastChild.style.visibility = 'hidden';\n }, 300);\n }, 500);\n }\n\n function handleTouch() {\n if (!currentMoment.video || !isMobile) return;\n\n clearTimeout(timerRef.current);\n\n controlsWrapperRef.current.lastChild.style.opacity = 1;\n controlsWrapperRef.current.lastChild.style.visibility = 'visible';\n\n timerRef.current = setTimeout(\n () => {\n if (!controlsWrapperRef.current) return;\n controlsWrapperRef.current.lastChild.style.opacity = 0;\n timerRef.current = setTimeout(() => {\n controlsWrapperRef.current.lastChild.style.visibility = 'hidden';\n }, 100);\n },\n preferredVideoState === 1 ? 500 : 2500\n );\n }\n\n const outerWrapperClasses = classNames(cl.outerWrapper, cl.mobileLandscapeVideo);\n const wrapperClasses = classNames(cl.wrapper, {\n [cl.videos1]: viewMode === 'mode-1',\n [cl.videos4]: viewMode === 'mode-2' || viewMode === 'mode-3'\n });\n return (\n \n
\n \n
\n {speedValue} mph\n \n P:\n {pitcherName}\n
\n \n B:\n {ballPlayerName}\n
\n \n \n
\n {text}
;\n};\n\nexport default Tooltip;\n","import React, { Suspense, useMemo, useState, useRef, useLayoutEffect, memo, lazy } from 'react';\nimport cl from './HittingField.module.scss';\nimport { Canvas, useFrame } from '@react-three/fiber';\nimport { CatmullRomCurve3, FrontSide, TextureLoader } from 'three';\nimport { OrbitControls } from '@react-three/drei';\nimport FieldBg from 'images/field_right.jpg';\nimport classNames from 'classnames';\nimport * as THREE from 'three';\nimport ArrowDown from 'components/UI/icons/ArrowDown';\nimport CameraIcon from 'images/video_camera_icon.png';\nimport FieldIcon from 'images/field_icon.png';\nimport CameraView from './CameraView';\nimport { shallowEqual, useSelector } from 'react-redux';\nimport useSetMomentById from 'hooks/useSetMomentById';\nimport Tooltip from './Tooltip';\n// import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry';\n// import { FontLoader } from 'three/examples/jsm/loaders/FontLoader';\n// import ComfortaaFont from 'fonts/Comfortaa_Regular.json';\nconst Model = lazy(() => import('models/Stadium'));\n\n// extend({ TextGeometry });\n\nconst OptionsBar = ({ isAutoRotate, handleAutoRotateClick, handleResetClick }) => {\n const rotateBtnClass = classNames({\n [cl.active]: isAutoRotate\n });\n\n return (\n \n
\n );\n};\n\nconst Curve = ({\n moment,\n coef,\n setDrawPoints,\n currentMoment,\n setMomentById,\n handlePointerOver,\n handlePointerOut\n}) => {\n const { data_3d: data } = moment?.metering?.hit;\n\n const [pointerOver, setPointerOver] = useState(false);\n\n const cashedStepTotal = useRef(0);\n const tubeRef = useRef(null);\n const textRef = useRef(null);\n\n let stepTotalRef = cashedStepTotal.current;\n\n useLayoutEffect(() => {\n setDrawPoints(false);\n\n stepTotalRef = 0;\n cashedStepTotal.current = 0;\n }, [data]);\n\n const points = data.reduce((sum, coord) => {\n const newCoord = new THREE.Vector3(coord[0] * coef - 320, coord[2] * coef, coord[1] * -coef + 217);\n\n sum.push(newCoord);\n return sum;\n }, []);\n\n const curveCoords = new CatmullRomCurve3(points);\n\n // const textureRef = useMemo(() => new TextureLoader().load(CurveTexture), []);\n\n useFrame(({ camera }) => {\n if (textRef.current) {\n textRef.current.quaternion.copy(camera.quaternion);\n textRef.current.geometry.center();\n }\n\n if (stepTotalRef > 30510) return;\n if (stepTotalRef > 30110) {\n setDrawPoints(true);\n cashedStepTotal.current = stepTotalRef;\n return;\n }\n cashedStepTotal.current = stepTotalRef;\n\n stepTotalRef += 400;\n tubeRef.current.setDrawRange(0, stepTotalRef);\n });\n const isCurrentTube = currentMoment.inner.id === moment.inner.id;\n\n const handleMeshClick = () => setMomentById(moment.inner.id);\n\n // const font = new FontLoader().parse(ComfortaaFont);\n // const textCoords = data[Math.floor(data.length / 2)];\n\n const distanceText = `Angle: ${String(Math.round(moment.metering.hit.angle))}° Velocity: ${String(\n Math.round(moment.metering.hit.start_speed)\n )} mph \nDistance: ${String(Math.round(moment.metering.hit.distance))} m.`;\n return (\n <>\n \n \n \n
\n \n
\n \n {(!isCameraView || camera2D === null || isInterruptedMoment) && (\n <>\n \n \n {/* \n */}\n {/* \n \n\n
\n );\n};\n\nexport default memo(HittingField);\n","export default \"data:image/png;base64,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\"","import React, { Fragment, useState, useEffect, useRef, useLayoutEffect } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { setSeekValue } from 'redux/gameReducer';\nimport { getFixedNumber } from 'utils';\nimport cl from './PlaysHitting.module.scss';\nimport classNames from 'classnames';\n\nconst Header = ({ maxSpeed, angle }) => {\n const maxSpeedValue = maxSpeed !== undefined ? `${getFixedNumber(maxSpeed, 1)} mph` : '—';\n const angleValue = angle !== undefined ? `${getFixedNumber(angle, 2)}°` : '—';\n\n return (\n \n
\n );\n};\n\nconst Graph = ({ speeds, video, impactTime }) => {\n const [curveIndex, setCurveIndex] = useState(0);\n const videoCurrentTime = useSelector(state => state.game.videoCurrentTime);\n\n const isMobile = useSelector(state => state.shared.isMobile);\n\n const curveTimeoutRef = useRef();\n const svgRef = useRef();\n\n const dispatch = useDispatch();\n\n const VIEWBOX_WIDTH = 327;\n const VIEWBOX_HEIGHT = 84;\n const GRAPH_START_X = !isMobile ? 33 : 23;\n const GRAPH_START_Y = 5;\n const GRAPH_WIDTH = !isMobile ? 294 : 304;\n const GRAPH_HEIGHT = 60;\n\n const minSpeed = speeds.slice(1).reduce((min, cur) => (cur[0] < min ? cur[0] : min), speeds[0][0]);\n const maxSpeed = speeds.slice(1).reduce((max, cur) => (cur[0] > max ? cur[0] : max), speeds[0][0]);\n\n const maxSpeedRounded = Math.ceil(maxSpeed);\n const minSpeedRounded = Math.floor(minSpeed);\n\n const leftTitles = [\n maxSpeedRounded,\n maxSpeedRounded - (maxSpeedRounded - minSpeedRounded) / 2,\n minSpeedRounded\n ];\n\n const verticalGraphPart = (speeds[speeds.length - 1][1] - speeds[0][1]) / 5;\n // const verticalGraphPart = speeds[speeds.length - 1][1] / 5;\n\n const bottomTitles = [\n verticalGraphPart.toFixed(2),\n (verticalGraphPart * 2).toFixed(2),\n (verticalGraphPart * 3).toFixed(2),\n (verticalGraphPart * 4).toFixed(2)\n ];\n\n const maxXValue = +bottomTitles.slice(-1)[0] + verticalGraphPart;\n\n const xCoef = GRAPH_WIDTH / maxXValue;\n const yCoef = 42 / (maxSpeedRounded - minSpeedRounded);\n\n const impactDotCoords = { x: 0, y: 0 };\n\n const curveCoords = speeds.map((coords, index, arr) => {\n const newXCoord = (coords[1] - arr[0][1]) * xCoef + GRAPH_START_X;\n const newYCoord = GRAPH_START_Y + 11 + 42 - (coords[0] - minSpeedRounded) * yCoef;\n\n if (impactTime >= coords[1]) {\n const nextXCoord = (arr[index + 2][1] - arr[0][1]) * xCoef + GRAPH_START_X;\n const nextYCoord = GRAPH_START_Y + 11 + 42 - (arr[index + 2][0] - minSpeedRounded) * yCoef;\n\n impactDotCoords.x = nextXCoord;\n impactDotCoords.y = nextYCoord;\n }\n return [newXCoord, newYCoord];\n });\n\n useLayoutEffect(() => {\n clearTimeout(curveTimeoutRef.current);\n\n setCurveIndex(0);\n if (curveCoords.length === 0) return;\n setTimeout(() => {\n setCurveIndex(1);\n }, 150);\n }, [speeds]);\n\n useEffect(() => {\n if (curveIndex === 0) return;\n\n curveTimeoutRef.current = setTimeout(\n () => {\n setCurveIndex(prev => (prev < curveCoords.length ? prev + 1 : prev));\n },\n curveIndex === 0 ? 500 : 30\n );\n }, [curveIndex]);\n\n let curvePath = `M${curveCoords[0][0]} ${curveCoords[0][1]}`;\n curveCoords.shift();\n curveCoords.slice(0, curveIndex).forEach(coords => {\n curvePath += `L${coords[0]} ${coords[1]}`;\n });\n\n const curTimeCorr = videoCurrentTime;\n\n const totalHitTime = speeds[speeds.length - 1][1] - speeds[0][1];\n\n const swingTimeStart = speeds[0][1];\n\n const elapsedTime =\n curTimeCorr < swingTimeStart ||\n videoCurrentTime > video.full_seconds_to ||\n videoCurrentTime < video.full_seconds_from\n ? 0\n : curTimeCorr - swingTimeStart;\n\n const coef = GRAPH_WIDTH / totalHitTime;\n const redLineXCoord = GRAPH_START_X + elapsedTime * coef;\n const isRedLine = elapsedTime < totalHitTime && elapsedTime > 0;\n\n // !\n\n const handleMouseDown = e => {\n const { left: svgLeft, right: svgRight } = svgRef.current.getBoundingClientRect();\n const svgWidth = svgRight - svgLeft;\n\n const graphFullWidth = GRAPH_START_X + GRAPH_WIDTH;\n\n const graphStartsRel = (GRAPH_START_X / graphFullWidth) * 100;\n const clickRel = ((e.clientX - svgLeft) / svgWidth) * 100;\n\n // Return if clicked outside graph path\n if (clickRel < graphStartsRel) return;\n\n const pathStartsXCoord = svgWidth * (GRAPH_START_X / graphFullWidth) + svgLeft;\n const pathEndsXCoord = svgRight;\n const pathWidth = pathEndsXCoord - pathStartsXCoord;\n\n const clickPathRel = (e.clientX - pathStartsXCoord) / pathWidth;\n\n const clickTime = speeds[0][1] + totalHitTime * clickPathRel;\n\n dispatch(setSeekValue(clickTime));\n // dispatch(setVideoCurrentTime(clickTime));\n };\n // !\n return (\n \n
\n \n Attack Angle\n {angleValue}\n
\n \n
\n \n Max speed\n {maxSpeedValue}\n
\n \n \n {/* Horizontal lines */}\n {leftTitles.map((title, i) => (\n \n \n {title}\n \n \n ))}\n\n {/* Vertical lines */}\n {bottomTitles.map((title, i) => {\n const verticalPart = GRAPH_WIDTH / 5;\n return (\n \n \n {title}\n \n \n );\n })}\n\n {/* Vertical red line */}\n {isRedLine && (\n curveIndex ? 0 : 3}\n fill='red'\n cx={impactDotCoords.x}\n cy={impactDotCoords.y}\n style={curveCoords.length > curveIndex ? { opacity: 0 } : null}\n />\n\n {/* Impact dot projection */}\n curveIndex ? 0 : 0.5}\n strokeDasharray='4 2'\n style={curveCoords.length > curveIndex ? { opacity: 0 } : null}\n className={cl.impactDotLine}\n />\n \n
\n );\n};\n\nconst HittingGraph = ({ currentMoment }) => {\n const hitState = useSelector(s => s.game.hitState);\n\n const {\n max_speed: maxSpeed,\n attack_angle: angle,\n speeds,\n impact_time: impactTime\n } = currentMoment?.metering?.bat || {};\n\n const wrapperClasses = classNames(cl.graph, {\n [cl.dnone]: hitState !== 'Field'\n });\n return (\n Bat speed (mph)
\n\n
\n );\n};\n\nexport default HittingGraph;\n","import React from 'react';\nimport cl from './PlaysHitting.module.scss';\nimport { useSelector } from 'react-redux';\nimport classNames from 'classnames';\n\nconst HittingStats = ({ hit }) => {\n const hitState = useSelector(s => s.game.hitState);\n\n const { start_speed: startSpeed, distance, angle, max_height: maxHeight } = hit || 0;\n\n const exitVelocityValue = startSpeed !== undefined ? startSpeed.toFixed(1) + ' mph' : '—';\n const distanceValue = distance !== undefined ? distance.toFixed(1) + ' m' : '—';\n const maxHeightValue = maxHeight !== undefined ? maxHeight.toFixed(1) + ' m' : '—';\n const angleValue = angle !== undefined ? angle.toFixed(0) + '°' : '—';\n\n\tconst wrapperClasses = classNames(cl.stats, {\n [cl.dnone]: hitState !== 'Field'\n });\n return (\n \n
\n );\n};\n\nexport default HittingStats;\n","import React, { useRef, useEffect } from 'react';\nimport cl from './HittingVideo.module.scss';\nimport classNames from 'classnames';\nimport YouTube from 'react-youtube';\nimport { useSelector } from 'react-redux';\nimport NoVideoScreen from 'components/Game/Video/NoVideoScreen';\n\nconst HittingVideo = ({ videoId, position, handleOnReady, stateChangeHandler}) => {\n // eslint-disable-next-line\n const fullWidth = useSelector(state => state.shared.mobileWidth);\n const currentMoment = useSelector(state => state.game.currentMoment);\n\n const videoWrapperRef = useRef(null);\n const timerRef = useRef();\n const controlsWrapperRef = useRef();\n const currentTimeInterval = useRef();\n\n useEffect(\n () => () => {\n clearTimeout(timerRef.current);\n\t\t\tclearInterval(currentTimeInterval.current);\n },\n []\n );\n\n const videoClasses = classNames(cl.video, {\n [cl.topLeftVideo]: position === 'top-left',\n [cl.topRightVideo]: position === 'top-right',\n [cl.bottomLeftVideo]: position === 'bottom-left',\n [cl.bottomRightVideo]: position === 'bottom-right'\n });\n\n const { batter_position: batterPosition } = currentMoment.metering?.pitch || {};\n\n const POS_OPTIONS = {\n 'top-left':\n batterPosition === 0 ? { x: -0.09, y: -0.5, delta: 0.24 } : { x: -0.65, y: -0.52, delta: 0.24 },\n 'top-right':\n batterPosition === 0 ? { x: -0.5833, y: -0.5, delta: 0.24 } : { x: -0.2, y: -0.5, delta: 0.24 },\n 'bottom-left':\n batterPosition === 0 ? { x: -0.22, y: -0.01, delta: 0.52 } : { x: -0.15, y: -0.01, delta: 0.52 },\n 'bottom-right':\n batterPosition === 0 ? { x: -0.1, y: -0.01, delta: 0.52 } : { x: -0.22, y: -0.01, delta: 0.52 }\n };\n\n const xCoef = videoWrapperRef?.current?.clientWidth / ((1920 / 100) * (POS_OPTIONS[position].delta * 100));\n\n const onReady = e => {\n handleOnReady(position, e.target);\n };\n\n const onStateChange = e => {\n stateChangeHandler(position, e.target, e.data);\n };\n\n function handleMouseMove() {\n if (!currentMoment.video || position !== 'bottom') return;\n\n clearTimeout(timerRef.current);\n\n controlsWrapperRef.current.firstChild.style.opacity = 1;\n controlsWrapperRef.current.firstChild.style.visibility = 'visible';\n\n timerRef.current = setTimeout(() => {\n if (!controlsWrapperRef.current) return;\n controlsWrapperRef.current.firstChild.style.opacity = 0;\n timerRef.current = setTimeout(() => {\n controlsWrapperRef.current.firstChild.style.visibility = 'hidden';\n }, 300);\n }, 500);\n }\n\n return (\n \n
\n \n Exit Velocity\n {exitVelocityValue}\n
\n \n Launch Angle\n {angleValue}\n
\n \n
\n \n Height\n {maxHeightValue}\n
\n \n Distance\n {distanceValue}\n
\n \n
\n );\n};\n\nexport default forwardRef(HittingVideos);\n","import NoVideoScreen from 'components/Game/Video/NoVideoScreen';\nimport clPlays from '../PlaysHitting.module.scss';\nimport cl from './HittingVideo.module.scss';\nimport { useEffect, useRef } from 'react';\nimport { shallowEqual, useDispatch, useSelector } from 'react-redux';\nimport { setCurrentCard, setCurrentMoment } from 'redux/gameReducer';\n\nconst BroadcastHittingVideos = () => {\n const currentMoment = useSelector(s => s.game.currentMoment, shallowEqual);\n const currentCard = useSelector(s => s.game.currentCard, shallowEqual);\n const preferredVideoState = useSelector(s => s.game.preferredVideoState);\n const videoLengthMode = useSelector(s => s.game.videoLengthMode);\n const preview = useSelector(s => s.game.preview);\n const filteredCards = useSelector(s => s.game.filteredCards, shallowEqual);\n const isLastMomentMode = useSelector(s => s.game.isLastMomentMode);\n const playbackMode = useSelector(s => s.game.playbackMode);\n const isBroadcast = useSelector(s => s.game.isBroadcast);\n\n const dispatch = useDispatch();\n\n const nextMomentTimeoutRef = useRef();\n const intervalRef = useRef(null);\n const videoHandlingTimeoutRef = useRef();\n const modeRef = useRef('play');\n\n useEffect(\n () => () => {\n clearTimeout(nextMomentTimeoutRef.current);\n clearTimeout(videoHandlingTimeoutRef.current);\n clearInterval(intervalRef.current);\n },\n []\n );\n\n useEffect(() => {\n clearTimeout(videoHandlingTimeoutRef.current);\n clearInterval(intervalRef.current);\n\n const isForcePlay = preferredVideoState === 1;\n\n videoHandlingTimeoutRef.current = setTimeout(\n () => {\n videoHandling(false, isForcePlay);\n },\n videoLengthMode === 'Super Short' ? 1500 : 30\n );\n }, [currentMoment]);\n\n useEffect(() => {\n (currentMoment.manualClick || currentCard.manualClick) && clearTimeout(nextMomentTimeoutRef.current);\n }, [currentMoment, currentCard]);\n\n useEffect(() => {\n modeRef.current = playbackMode;\n\n if (playbackMode === 'pause') {\n clearTimeout(nextMomentTimeoutRef.current);\n return;\n }\n\n playbackMode === 'play' && toNextMomentOrCard();\n // eslint-disable-next-line\n }, [playbackMode]);\n\n function toNextMomentOrCard() {\n const momentIndex = currentCard.moments.findIndex(moment => moment.inner.id === currentMoment.inner?.id);\n\n if (momentIndex < currentCard.moments.length - 1) {\n const nextMoment = currentCard.moments[momentIndex + 1];\n\n dispatch(setCurrentMoment(nextMoment));\n\n if (!nextMoment.video || nextMoment?.inner?.id >= preview.camera_info.broadcast_link_add_moment_from)\n return;\n } else {\n let cardIndex = filteredCards.findIndex(\n card => card.moments[0].inner.id === currentCard.moments[0].inner.id\n );\n\n cardIndex++;\n\n if (cardIndex < filteredCards.length) {\n dispatch(\n setCurrentCard({\n ...filteredCards[cardIndex],\n toFirstMoment: !isLastMomentMode,\n manualClick: false\n })\n );\n\n return;\n }\n }\n }\n\n const videoHandling = (doSeek = true, isForcePlay = true, seekToCurrentTime = false) => {\n clearInterval(intervalRef.current);\n\n if (\n !currentMoment.video ||\n currentMoment?.inner?.id >= preview.camera_info.broadcast_link_add_moment_from ||\n isBroadcast\n ) {\n if (modeRef.current !== 'pause') {\n nextMomentTimeoutRef.current = setTimeout(toNextMomentOrCard, 3000);\n }\n return;\n }\n\n if (currentCard.moments.length === 0 || !currentCard.moments[0].video) {\n return;\n }\n };\n return (\n \n
\n );\n};\n\nexport default BroadcastHittingVideos;\n","import { useRef } from 'react';\nimport { shallowEqual, useSelector } from 'react-redux';\nimport HittingField from './HittingField/HittingField';\nimport HittingGraph from './HittingGraph';\nimport HittingStats from './HittingStats';\nimport HittingVideos from './HittingVideos/HittingVideos';\nimport BroadcastHittingVideos from './HittingVideos/BroadcastHittingVideos';\n\nconst HittingFieldVideos = ({ isInterruptedMoment, isBroadcast }) => {\n const fieldVideoRef = useRef(null);\n\n const videoPlaybackRate = useSelector(s => s.game.videoPlaybackRate);\n\n const handleOnReady = target => {\n fieldVideoRef.current = target;\n\n target.pauseVideo();\n target.setPlaybackRate(videoPlaybackRate);\n };\n\n return (\n <>\n \n
\n \n
\n \n
\n \n
\n \n
\n );\n};\n\nexport default PlaysField;\n","export default \"data:image/png;base64,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\"","const Lines = ({ startX, startY }) => {\n return (\n <>\n {/* Horizontal lines */}\n \n 
\n
\n {isStrikeBallValue && (\n \n {strikeBallValue}\n
\n )}\n \n
\n );\n};\n\nexport default PlaysSpin;\n","import React from 'react';\n\nconst ListDot = ({ fill = '#1A4C96' }) => {\n return (\n \n );\n};\n\nexport default ListDot;\n","import React from 'react';\nimport ListDot from 'components/UI/icons/ListDot/ListDot';\nimport cl from './Legend.module.scss';\nimport { getChartColor, getPitchColorByName } from 'utils';\nimport usePitchTypes from 'hooks/usePitchTypes';\n\nconst LegendItem = ({ title, pitchTypes }) => (\n - \n {legendData.map((item, i) => (\n
\n {Object.keys(chartData).length !== 0 && (\n <>\n
\n );\n};\n\nexport default PlaysSpeed;\n","import React from 'react';\nimport { useSelector } from 'react-redux';\nimport cl from './PitchValues.module.scss';\nimport classNames from 'classnames';\n\nconst PitchValues = () => {\n const currentMoment = useSelector(s => s.game.currentMoment);\n const pitchState = useSelector(s => s.game.pitchState);\n\n const {\n offset_x,\n offset_y,\n rotation,\n start_speed: initSpeed,\n end_speed: plateSpeed,\n release_height: releaseHeight,\n release_side: releaseSide\n } = currentMoment?.metering?.pitch || {};\n\n const releaseValue = initSpeed?.toFixed(1) ?? '';\n const platePointValue = plateSpeed?.toFixed(1) ?? '';\n\n const trueSpinValue = rotation ? rotation.toFixed(2) + ' rpm' : ' ';\n const verticalBreakValue = offset_y ? (offset_y * -100).toFixed(2) + ' cm' : ' ';\n const horizontalBreakValue = offset_x ? (offset_x * 100).toFixed(2) + ' cm' : ' ';\n\n const releaseHeightValue = releaseHeight?.toFixed(1) ?? '';\n const releaseSideValue = releaseSide?.toFixed(1) ?? '';\n\n const wrapperClasses = classNames(cl.pitchValues, {\n [cl.dnone]: pitchState !== 'SpeedSpinInfo'\n });\n return (\n Release speed
\n\n
\n );\n};\n\nexport default PitchValues;\n","import React, { useRef, useEffect } from 'react';\nimport cl from './PitchVideo.module.scss';\nimport classNames from 'classnames';\nimport YouTube from 'react-youtube';\nimport { useDispatch, useSelector } from 'react-redux';\nimport NoVideoScreen from 'components/Game/Video/NoVideoScreen';\nimport VideoControls from 'components/Game/VideoControls/VideoControls';\n\nconst POS_OPTIONS = {\n 'top-left': { x: -0.34, y: -0.22, delta: 0.14 },\n // 'top-left': { x: -0.34, y: -0.2, delta: 0.14 },\n 'top-right': { x: -0.505, y: -0.225, delta: 0.14 },\n // 'top-right': { x: -0.505, y: -0.205, delta: 0.14 },\n bottom: { x: -0.27, y: -0.14, delta: 0.42 }\n // bottom: { x: -0.27, y: -0.07, delta: 0.42 }\n};\n\nconst PitchVideo = ({ videoId, position, handleOnReady, stateChangeHandler, setPlayPause = null }) => {\n // const [currentTime, setCurrentTime] = useState(0);\n\n // eslint-disable-next-line\n const fullWidth = useSelector(state => state.shared.mobileWidth);\n const currentMoment = useSelector(state => state.game.currentMoment);\n const pitchState = useSelector(state => state.game.pitchState);\n\n const videoWrapperRef = useRef(null);\n const timerRef = useRef();\n const controlsWrapperRef = useRef();\n const currentTimeInterval = useRef();\n\n useEffect(\n () => () => {\n clearTimeout(timerRef.current);\n clearInterval(currentTimeInterval.current);\n },\n []\n );\n\n const videoClasses = classNames(cl.video, {\n [cl.topLeftVideo]: position === 'top-left',\n [cl.topRightVideo]: position === 'top-right',\n [cl.bottomVideo]: position === 'bottom',\n [cl.dnone]: pitchState !== 'Videos'\n });\n\n const xCoef =\n (videoWrapperRef?.current?.clientWidth ?? 0) / ((1920 / 100) * (POS_OPTIONS[position].delta * 100));\n\n const onReady = e => {\n handleOnReady(position, e.target);\n };\n\n const onStateChange = e => {\n stateChangeHandler(position, e.target, e.data);\n };\n\n function handleMouseMove() {\n if (!currentMoment.video || position !== 'bottom') return;\n\n clearTimeout(timerRef.current);\n\n controlsWrapperRef.current.lastChild.style.opacity = 1;\n controlsWrapperRef.current.lastChild.style.visibility = 'visible';\n\n timerRef.current = setTimeout(() => {\n if (!controlsWrapperRef.current) return;\n controlsWrapperRef.current.lastChild.style.opacity = 0;\n timerRef.current = setTimeout(() => {\n controlsWrapperRef.current.lastChild.style.visibility = 'hidden';\n }, 300);\n }, 500);\n }\n\n const isVideoControls = currentMoment.video && position === 'bottom';\n const isInvisWrapper = position !== 'bottom';\n return (\n \n
\n\n Release speed /
\nPlate point speed
\n{releaseValue} mph /
\n{platePointValue} mph
\n\n
\n\n \n
\n True spin
\n{trueSpinValue}
\n\n
\n Vertical break
\n{verticalBreakValue}
\n\n
\n Horizontal break
\n{horizontalBreakValue}
\n\n
\n Release height
\n{releaseHeightValue} m
\nRelease side
\n{releaseSideValue} m
\n\n
\n \n
\n \n
\n \n );\n};\n\nexport default BroadcastPitchVideos;\n","import React from 'react';\nimport PlaysField from '../PlaysField/PlaysField';\nimport PlaysSpin from '../PlaysSpin/PlaysSpin';\nimport PlaysSpeed from '../PlaysSpeed/PlaysSpeed';\nimport { useSelector } from 'react-redux';\nimport PitchValues from './PitchValues/PitchValues';\nimport PitchVideos from './PitchVideo/PitchVideos';\nimport BroadcastPitchVideos from './PitchVideo/BroadcastPitchVideos';\n\nconst PlaysPitch = () => {\n const currentMoment = useSelector(state => state.game.currentMoment);\n const isBroadcast = useSelector(state => state.game.isBroadcast);\n const preview = useSelector(state => state.game.preview);\n\n const isInterruptedMoment =\n !isBroadcast &&\n !!preview.camera_info.broadcast_link_add_moment_from &&\n currentMoment?.inner?.id >= preview.camera_info.broadcast_link_add_moment_from;\n return (\n <>\n \n
\n );\n};\n\nconst Line = ({ runData, xStartPos, yStartPos, coef, count, lineNumber, curLineNumber }) => {\n const textRef = useRef();\n\n useFrame(({ camera }) => {\n if (textRef.current) textRef.current.quaternion.copy(camera.quaternion);\n });\n\n const curDataSlice =\n curLineNumber < lineNumber ? 0 : curLineNumber === lineNumber ? count : runData.data_3d.length;\n\n const font = new FontLoader().parse(ComfortaaFont);\n\n let lastCoords;\n\n const renderedPart = runData.data_3d.slice(0, curDataSlice);\n const runnerName = String(runData.who);\n\n if (curDataSlice !== 0) {\n lastCoords = renderedPart[renderedPart.length - 1];\n }\n\n const isRender = curDataSlice > 0;\n\n const newData3D = runData.data_3d.filter((coords, i, arr) => {\n return i === 0 || (coords[0] !== arr[i - 1][0] && coords[1] !== arr[i - 1][1]);\n });\n\n const points = newData3D.slice(0, curDataSlice).reduce((sum, coord) => {\n // const points = runData.data_3d.slice(0, curDataSlice).reduce((sum, coord) => {\n const newCoord = new Vector3(coord[0] * coef - 320, -5, coord[1] * -coef + 167);\n\n sum.push(newCoord);\n return sum;\n }, []);\n\n const curveCoords = new CatmullRomCurve3(points);\n return (\n <>\n {isRender ? (\n <>\n \n \n \n
\n \n
\n \n {/* */}\n \n \n {/* \n */}\n\n {/* \n \n\n
\n );\n};\n\nexport default memo(PlaysRunningField);\n","import React from 'react';\nimport { getFixedNumber } from 'utils';\nimport cl from './PlaysRunning.module.scss';\n\nconst BASES_BY_NUMBER = ['H', '1B', '2B', '3B'];\n\nconst PlaysRunningInfoItem = ({ item }) => {\n const {\n max_speed: maxSpeed,\n who,\n run_from: runFrom,\n run_to: runTo,\n time_end: timeEnd,\n time_start: timeStart\n } = item;\n\n const timeDelta = timeEnd - timeStart;\n return (\n \n setRunningMode('Info')} />\n
*/}\n \n {`${who} run from ${BASES_BY_NUMBER[runFrom]} to ${BASES_BY_NUMBER[runTo]} base:`}\n
\n );\n};\n\nexport default PlaysRunningInfoItem;\n","import React from 'react';\nimport { useSelector } from 'react-redux';\nimport cl from './PlaysRunning.module.scss';\nimport PlaysRunningInfoItem from './PlaysRunningInfoItem';\n\n\nconst PlaysRunningInfoList = () => {\n const { metering } = useSelector(state => state.game.currentMoment);\n\n return (\n {`S: ${getFixedNumber(maxSpeed, 1)} km/h T: ${getFixedNumber(\n timeDelta,\n 1\n )} s`}
\n\n {metering?.field && metering.field.map((item, i) => (\n
\n );\n};\n\nexport default PlaysRunningInfoList;\n","import classNames from 'classnames';\nimport cl from './PlaysRunning.module.scss';\nimport PlaysRunningInfoList from './PlaysRunningInfoList';\nimport { useSelector } from 'react-redux';\n\nconst PlaysRunningInfo = () => {\n const runState = useSelector(s => s.game.runState);\n\n const wrapperClasses = classNames(cl.info, {\n [cl.dnone]: runState !== 'Info'\n });\n return (\n \n
\n );\n};\n\nexport default PlaysRunningInfo;\n","import React, { useRef, useEffect } from 'react';\nimport { useSelector, useDispatch, shallowEqual } from 'react-redux';\nimport PlaysRunningField from './PlaysRunningField';\nimport PlaysRunningInfo from './PlaysRunningInfo';\nimport { setCurrentCard, setCurrentMoment } from 'redux/gameReducer';\n\nconst PlaysRunning = () => {\n const currentMoment = useSelector(s => s.game.currentMoment, shallowEqual);\n const currentCard = useSelector(s => s.game.currentCard, shallowEqual);\n const preferredVideoState = useSelector(s => s.game.preferredVideoState);\n const videoLengthMode = useSelector(s => s.game.videoLengthMode);\n const preview = useSelector(s => s.game.preview);\n const filteredCards = useSelector(s => s.game.filteredCards, shallowEqual);\n const isLastMomentMode = useSelector(s => s.game.isLastMomentMode);\n const playbackMode = useSelector(s => s.game.playbackMode);\n\n const dispatch = useDispatch();\n\n const nextMomentTimeoutRef = useRef();\n const intervalRef = useRef(null);\n const videoHandlingTimeoutRef = useRef();\n const modeRef = useRef('play');\n\n useEffect(\n () => () => {\n clearTimeout(nextMomentTimeoutRef.current);\n clearTimeout(videoHandlingTimeoutRef.current);\n clearInterval(intervalRef.current);\n },\n []\n );\n\n useEffect(() => {\n clearTimeout(videoHandlingTimeoutRef.current);\n clearInterval(intervalRef.current);\n\n videoHandlingTimeoutRef.current = setTimeout(\n () => {\n videoHandling();\n },\n videoLengthMode === 'Super Short' ? 1500 : 30\n );\n }, [currentMoment]);\n\n useEffect(() => {\n (currentMoment.manualClick || currentCard.manualClick) && clearTimeout(nextMomentTimeoutRef.current);\n }, [currentMoment, currentCard]);\n\n useEffect(() => {\n modeRef.current = playbackMode;\n\n if (playbackMode === 'pause') {\n clearTimeout(nextMomentTimeoutRef.current);\n return;\n }\n\n playbackMode === 'play' && toNextMomentOrCard();\n // eslint-disable-next-line\n }, [playbackMode]);\n\n function toNextMomentOrCard() {\n const momentIndex = currentCard.moments.findIndex(moment => moment.inner.id === currentMoment.inner?.id);\n\n if (momentIndex < currentCard.moments.length - 1) {\n const nextMoment = currentCard.moments[momentIndex + 1];\n\n dispatch(setCurrentMoment(nextMoment));\n\n if (!nextMoment.video || nextMoment?.inner?.id >= preview.camera_info.broadcast_link_add_moment_from)\n return;\n } else {\n let cardIndex = filteredCards.findIndex(\n card => card.moments[0].inner.id === currentCard.moments[0].inner.id\n );\n\n cardIndex++;\n\n if (cardIndex < filteredCards.length) {\n dispatch(\n setCurrentCard({\n ...filteredCards[cardIndex],\n toFirstMoment: !isLastMomentMode,\n manualClick: false\n })\n );\n\n return;\n }\n }\n }\n\n const videoHandling = () => {\n clearInterval(intervalRef.current);\n\n if (modeRef.current !== 'pause') {\n nextMomentTimeoutRef.current = setTimeout(toNextMomentOrCard, 3000);\n }\n\n if (currentCard.moments.length === 0 || !currentCard.moments[0].video) {\n return;\n }\n };\n\n // !Previous version of moments handling\n\n // const currentMoment = useSelector(state => state.game.currentMoment, shallowEqual);\n // const currentCard = useSelector(state => state.game.currentCard, shallowEqual);\n // const playbackMode = useSelector(state => state.game.playbackMode);\n // const filteredCards = useSelector(state => state.game.filteredCards, shallowEqual);\n // const isLastMomentMode = useSelector(state => state.game.isLastMomentMode);\n\n // const dispatch = useDispatch();\n\n // const playRef = useRef();\n\n // useEffect(() => () => clearTimeout(playRef.current), []);\n\n // useEffect(() => {\n // if (playbackMode === 'pause') return;\n\n // clearTimeout(playRef.current);\n\n // const newMoments = [];\n // currentCard.type !== 'Replacement'\n // ? currentCard.moments?.forEach(moment => moment.icons && newMoments.push(moment))\n // : newMoments.push(currentCard.moments[0]);\n\n // const momentIndex = newMoments?.findIndex(moment => moment.inner?.id === currentMoment?.inner?.id);\n // const cardIndex = filteredCards.findIndex(\n // card => card.moments[0].inner.id === currentCard.moments[0].inner.id\n // );\n\n // playRef.current = setTimeout(() => {\n // if (\n // (momentIndex >= currentCard.moments.length - 1 && cardIndex >= filteredCards.length - 1) ||\n // momentIndex === -1\n // ) {\n // // dispatch(setPlaybackMode('pause'));\n // return;\n // }\n // if (momentIndex >= currentCard.moments.length - 1) {\n // dispatch(\n // setCurrentCard({\n // ...filteredCards[cardIndex + 1],\n // toFirstMoment: !isLastMomentMode,\n // manualMoment: true\n // })\n // );\n // return;\n // }\n // dispatch(setCurrentMoment(newMoments[momentIndex + 1]));\n // }, 2000);\n // // eslint-disable-next-line\n // }, [currentMoment, isLastMomentMode]);\n\n // useEffect(() => {\n // if (playbackMode === 'pause') {\n // clearTimeout(playRef.current);\n // return;\n // }\n\n // const newMoments = [];\n // currentCard.type !== 'Replacement'\n // ? currentCard.moments?.forEach(moment => moment.icons && newMoments.push(moment))\n // : newMoments.push(currentCard.moments[0]);\n\n // const momentIndex = newMoments?.findIndex(moment => moment.inner?.id === currentMoment?.inner?.id);\n // const cardIndex = filteredCards.findIndex(\n // card => card.moments[0].inner.id === currentCard.moments[0].inner.id\n // );\n\n // playRef.current = setTimeout(() => {\n // if (\n // (momentIndex >= currentCard.moments.length - 1 && cardIndex >= filteredCards.length - 1) ||\n // momentIndex === -1\n // ) {\n // // dispatch(setPlaybackMode('pause'));\n // return;\n // }\n // if (momentIndex >= currentCard.moments.length - 1) {\n // dispatch(setCurrentCard({ ...filteredCards[cardIndex + 1], manualMoment: true }));\n // return;\n // }\n // dispatch(setCurrentMoment(newMoments[momentIndex + 1]));\n // }, 2000);\n // // eslint-disable-next-line\n // }, [playbackMode]);\n return (\n <>\n Running
\n\n setRunningMode('Field')} />\n
*/}\n \n {isVideo && (\n <>\n {/*
\n );\n};\n\nexport default Plays;\n","import Arrow from 'components/UI/buttons/Arrow/Arrow';\nimport VerticalScrollDivider from 'components/UI/dividers/VerticalScrollDivider/VerticalScrollDivider';\nimport useScrollHorizontally from 'hooks/useScrollHorizontally';\nimport React from 'react';\nimport { useSelector } from 'react-redux';\nimport HeaderInfo from '../HeaderInfo/HeaderInfo';\nimport HeaderScoresList from '../HeaderScoresList/HeaderScoresList';\nimport HeaderTeams from '../HeaderTeams/HeaderTeams';\n\nconst LandscapeScores = ({ cl, currentTab }) => {\n const [scrollRef, isLeftScroll, isRightScroll] =\n useScrollHorizontally();\n const innings = useSelector(state => state.game.innings);\n const preview = useSelector(state => state.game.preview);\n\n\n const scrollHorizontally = e => {\n const start = scrollRef.current.scrollLeft,\n change = 120,\n increment = 10;\n let currentTime = 0;\n\n Math.easeInOutQuad = function (t, b, c, d) {\n t /= d / 2;\n if (t < 1) return (c / 2) * t * t + b;\n t--;\n return (-c / 2) * (t * (t - 2) - 1) + b;\n };\n\n const animateScroll = function (name) {\n currentTime += increment;\n const val = Math.easeInOutQuad(currentTime, start, name === 'scroll-left' ? -change : change, 300);\n scrollRef.current.scrollLeft = val;\n if (currentTime < 300) {\n setTimeout(() => animateScroll(name), increment);\n }\n };\n\n animateScroll(e.currentTarget.name);\n };\n\n const leftArrowGroup = isLeftScroll ? (\n <>\n \n
*/}\n {/* \n
\n )}\n {isRightArrow && (\n \n
\n )}\n \n )}\n {/* \n
*/}\n {/* \n
*/}\n \n
\n );\n};\n\nexport default LandscapeScores;\n","import React from 'react';\nimport cl from './ContentGraphics.module.scss';\nimport Videos from '../Videos/Videos';\nimport Plays from '../Plays/Plays';\nimport LandscapeScores from './LandscapeScores';\nimport PlaysEvents from '../PlaysEvents/PlaysEvents';\nimport useGameFocus from 'hooks/useGameFocus';\nimport { useSelector } from 'react-redux';\nimport classNames from 'classnames';\nimport OptionsDropdown from '../Header/MobileOptionsBar/OptionsDropdown/OptionsDropdown';\n\nconst ContentGraphics = ({ currentTab, isVideo }) => {\n const isMobileScoreboard = useSelector(s => s.shared.isMobileScoreboard);\n const isMobileTimeline = useSelector(s => s.shared.isMobileTimeline);\n\n const renderTab = () => {\n switch (currentTab) {\n case 'videos':\n return isVideo ? \n
\n {leftArrowGroup}
\n {rightArrowGroup}
\n \n {isVideo && (\n
\n );\n};\n\nexport default ContentGraphics;\n","import cl from './ProgressBar.module.scss';\n\nconst ProgressBar = ({ progress, ...props }) => (\n \n
\n )}\n {renderTab()}\n \n
\n \n
\n \n);\n\nexport default ProgressBar;\n","import React from 'react';\nimport cl from './Loader.module.scss';\nimport ProgressBar from '../ProgressBar/ProgressBar';\n\nconst Loader = ({ styles = null, loadedPercents = null }) => {\n const isPercentsTitle = loadedPercents && loadedPercents >= 10;\n\n const progressStyles = {\n bottom: '-4.5rem',\n left: '50%',\n translate: '-50% 0',\n borderRadius: '2px',\n height: '4px',\n width: 100,\n backgroundColor: 'white'\n };\n return (\n \n \n \n \n \n \n \n \n \n {isPercentsTitle &&
\n );\n};\n\nexport default Loader;\n","import axios from 'axios';\n\nexport const axiosInstance = axios.create({\n baseURL: 'https://baseball-gametrack.ru/api'\n});\n\nexport const axiosCancelToken = axios.CancelToken","import { forwardRef } from 'react';\nimport cl from './ContentMobileBox.module.scss';\n\nconst MobileBoxTableHeader = ({ getTableHeaders }, ref) => {\n return (\n \n
\n );\n};\n\nexport default forwardRef(MobileBoxTableHeader);\n","import React, { useState, useEffect, useRef } from 'react';\nimport { Link } from 'react-router-dom';\nimport cl from './ContentMobileBox.module.scss';\nimport MobileBoxTableHeader from './MobileBoxTableHeader';\n\nconst TABLES_INFO = {\n Batting: {\n headers: [\n { name: 'POS', isWider: false, isWidest: true },\n { name: 'AB', isWider: false },\n { name: 'R', isWider: false },\n { name: 'H', isWider: false },\n { name: '2B', isWider: false },\n { name: '3B', isWider: false },\n { name: 'HR', isWider: false },\n { name: 'RBI', isWider: false },\n { name: 'GDP', isWider: false },\n { name: 'BB', isWider: false },\n { name: 'IBB', isWider: false },\n { name: 'HP', isWider: false },\n { name: 'SH', isWider: false },\n { name: 'SF', isWider: false },\n { name: 'SO', isWider: false },\n { name: 'TB', isWider: false },\n { name: 'AVG', isWider: true },\n { name: 'SLG', isWider: true },\n { name: 'OBP', isWider: true },\n { name: 'OPS', isWider: true }\n ]\n },\n Running: {\n headers: [\n { name: 'POS', isWider: false, isWidest: true },\n { name: 'SB', isWider: false },\n { name: 'CS', isWider: false },\n { name: 'SB_pr', isWider: true },\n { name: 'LOB', isWider: false }\n ]\n },\n Pitching: {\n headers: [\n { name: 'IP', isWider: false },\n { name: 'PA', isWider: false },\n { name: 'R', isWider: false },\n { name: 'ER', isWider: false },\n { name: 'H', isWider: false },\n { name: '2B', isWider: false },\n { name: '3B', isWider: false },\n { name: 'HR', isWider: false },\n { name: 'BB', isWider: false },\n { name: 'IBB', isWider: false },\n { name: 'HP', isWider: false },\n { name: 'SH', isWider: false },\n { name: 'SF', isWider: false },\n { name: 'SO', isWider: false },\n { name: 'WP', isWider: false },\n { name: 'BK', isWider: false },\n { name: 'ERA', isWider: false, isWidest: true },\n { name: 'NP', isWider: false },\n { name: 'NS', isWider: false },\n { name: 'NB', isWider: false }\n ]\n },\n Fielding: {\n headers: [\n { name: 'POS', isWider: false, isWidest: true },\n { name: 'CH', isWider: false },\n { name: 'PO', isWider: false },\n { name: 'A', isWider: false },\n { name: 'E', isWider: false },\n { name: 'DP', isWider: false },\n { name: 'FLD', isWider: true }\n ]\n },\n Catching: {\n headers: [\n { name: 'SB', isWider: false },\n { name: 'CS', isWider: false },\n { name: 'PB', isWider: false }\n ]\n }\n};\n\nconst BATTING_TITLES = ['Batting', 'Running', 'Fielding'];\n\nconst MobileBoxTable = ({ currentMode, tableData }) => {\n const [isScrollable, setIsScrollable] = useState(false);\n\n useEffect(() => {\n setIsScrollable(rowsRef.current.scrollWidth > rowsRef.current.clientWidth);\n }, [currentMode]);\n\n const headerScroll = useRef();\n const rowsRef = useRef();\n\n const getTableHeaders = () =>\n TABLES_INFO[currentMode].headers.map((mode, i) => (\n \n \n \n
\n \n {getTableHeaders()}\n
\n \n {mode.name === 'SB_pr' ? '%SB' : mode.name === 'FLD' ? 'FLD%' : mode.name}\n
\n ));\n\n let rowDelta = 0;\n\n let orderedPlayersStats;\n\n const { players_stats, pitchers, catchers } = tableData;\n\n if (currentMode !== 'Pitching' && currentMode !== 'Catching') orderedPlayersStats = players_stats.slice();\n\n if (currentMode === 'Pitching') orderedPlayersStats = pitchers.slice();\n if (currentMode === 'Catching') orderedPlayersStats = catchers.slice();\n\n const isPitcherOrCatcher = ['Pitching', 'Catching'].includes(currentMode);\n\n const getValue = (title, player) => {\n const tableMode = currentMode.toLowerCase();\n\n if (player.id === -1) return ' ';\n if (title.name === 'POS') return player.content.positions.join('/');\n\n if (!isPitcherOrCatcher) {\n if (player.content.stats[tableMode][title.name] === 'INF') return 'INF';\n\n if (['AVG', 'SLG', 'OBP', 'OPS'].includes(title.name))\n return Number(player.content.stats.batting[title.name]).toFixed(3);\n\n if (title.name === 'SB_pr') return Number(player.content.stats.running.SB_pr).toFixed(3);\n\n if (title.name === 'FLD') return Number(player.content.stats.fielding.FLD).toFixed(3);\n\n return player.content.stats[tableMode][title.name];\n }\n\n if (currentMode === 'Pitching') {\n if (player.pitching[title.name] === 'INF') return 'INF';\n if (title.name === 'ERA') return Number(player.pitching.ERA).toFixed(3);\n\n return player.pitching[title.name];\n }\n\n if (currentMode === 'Catching') {\n if (player.catching[title.name] === 'INF') return 'INF';\n\n return player.catching[title.name];\n }\n\n return ' ';\n };\n return (\n \n (headerScroll.current.scrollLeft = e.target.scrollLeft)}\n ref={rowsRef}>\n {orderedPlayersStats.map((player, i) => {\n return (\n \n {TABLES_INFO[currentMode].headers.map((title, i) => {\n const value = getValue(title, player);\n // player.id === -1\n // ? ' '\n // : title.name === 'POS'\n // ? player.content.positions.join('/')\n // : ['SB', 'CS', 'SB_pr', 'LOB', 'PB'].includes(title.name)\n // ? player.content.stats[currentMode === 'Running' ? 'running' : 'catching'][title.name]\n // : ['CH', 'PO', 'A', 'E', 'DP', 'FLD'].includes(title.name)\n // ? player.content.stats.fielding[title.name]\n // : title.isWider\n // ? player.content.stats[\n // BATTING_TITLES.includes(currentMode) ? 'batting' : currentMode.toLowerCase()\n // ][title.name] === 'Infinity'\n // ? 'INF'\n // : Number(\n // player.content.stats[\n // BATTING_TITLES.includes(currentMode) ? 'batting' : currentMode.toLowerCase()\n // ][title.name]\n // ).toFixed(3)\n // : player.content.stats[\n // BATTING_TITLES.includes(currentMode) ? 'batting' : currentMode.toLowerCase()\n // ][title.name];\n\n return (\n
\n );\n })}\n \n
\n \n {orderedPlayersStats.map((player, i) => {\n if (player.is_substituted && BATTING_TITLES.includes(currentMode)) rowDelta++;\n\n const playerLinkName = isPitcherOrCatcher ? player.name : player.content.name;\n return (\n
\n );\n })}\n \n {currentMode !== 'Pitching' && currentMode !== 'Catching' && (\n \n {playerLinkName}\n
\n \n {(player.is_substituted && BATTING_TITLES.includes(currentMode)) ||\n !BATTING_TITLES.includes(currentMode)\n ? ' '\n : i + 1 - rowDelta}\n
\n )}\n TOTALS
\n \n {Number(value) !== -1 ? value : '—'}\n
\n );\n })}\n \n {title.name === 'POS'\n ? ' '\n : title.name === 'SB_pr'\n ? tableData.total_stats.running.SB_pr\n : title.name === 'FLD'\n ? Number(tableData.total_stats.fielding.FLD).toFixed(3)\n : ['CH', 'PO', 'A', 'E', 'DP'].includes(title.name)\n ? tableData.total_stats.fielding[title.name]\n : title.isWider\n ? Number(tableData.total_stats[currentMode.toLowerCase()][title.name]).toFixed(3)\n : ['SB', 'CS', 'LOB', 'PB'].includes(title.name)\n ? tableData.total_stats[currentMode === 'Running' ? 'running' : 'catching'][title.name]\n : tableData.total_stats[\n BATTING_TITLES.includes(currentMode) ? 'batting' : currentMode.toLowerCase()\n ][title.name]}\n
\n ))}\n \n \n \n \n );\n};\n\nexport default MobileBoxTable;\n","import { useState } from 'react';\nimport cl from './GraphsBlock.module.scss';\n\nconst GraphsBlock = ({ defaultOption = null, children, noSelector = false, ...props }) => {\n const [currentOption, setCurrentOption] = useState(defaultOption);\n\n if (noSelector)\n return (\n \n {children}\n
\n );\n\n return (\n \n {children(currentOption, setCurrentOption)}\n
\n );\n};\n\nexport default GraphsBlock;\n","import { createContext, useContext } from 'react';\nimport { CatmullRomCurve3, FrontSide, Vector3 } from 'three';\nimport { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry';\nimport { FontLoader } from 'three/examples/jsm/loaders/FontLoader';\n\nexport const ctx = createContext();\n\nconst ThreeTextCtx = ({ children }) => {\n return (\n {text}
;\n};\n\nexport default Tooltip;\n","import classNames from 'classnames';\nimport React, { memo, Suspense, useMemo, useState, useRef, useEffect, lazy } from 'react';\nimport cl from './PitchesTrajectories.module.scss';\nimport { Canvas } from '@react-three/fiber';\nimport { TextureLoader } from 'three';\nimport { OrbitControls } from '@react-three/drei';\nimport FieldBg from 'images/field_right.jpg';\nimport Curves from './Curves/Curves';\nimport Tooltip from './Tooltip';\nimport Loader from 'components/UI/loaders/Loader/Loader';\n\nconst Model = lazy(() => import('models/Stadium'));\n\nconst OptionsBar = ({ isAutoRotate, handleAutoRotateClick, handleResetClick }) => {\n const rotateBtnClass = classNames({\n [cl.active]: isAutoRotate\n });\n\n return (\n \n
\n );\n};\n\nconst PitchesTrajectories = ({ metrix }) => {\n const filteredMetrix = metrix.reduce((sum, { pitches_all: pitchesAll }) => {\n pitchesAll.filter(({ hit_info }) => hit_info.data_3d).forEach(hit => sum.push(hit));\n\n return sum;\n }, []);\n\n const [isAutoRotate, setAutoRotate] = useState(true);\n const [zoomCoef, setZoomCoef] = useState(1);\n const [isGraphVisible, setGraphVisibility] = useState(false);\n const [hovered, setHovered] = useState({ isHovered: false, text: '' });\n\n const graphRef = useRef();\n\n useEffect(() => {\n let options = {\n root: null,\n rootMargin: '300px 0px',\n threshold: 0\n };\n\n let observer = new IntersectionObserver(entries => {\n entries.forEach(entry => {\n const { isIntersecting } = entry;\n\n if (isIntersecting) {\n setGraphVisibility(true);\n } else {\n setGraphVisibility(false);\n }\n });\n }, options);\n observer.observe(graphRef.current);\n\n return () => {\n observer.disconnect();\n };\n }, []);\n\n const controlsRef = useRef();\n const wrapperRef = useRef();\n const pointerTimeout = useRef(null);\n\n useEffect(() => {\n const xCoef = wrapperRef.current.clientWidth / 568.72;\n const yCoef = wrapperRef.current.clientHeight / 497.81;\n const resultCoef = Math.min(xCoef, yCoef);\n\n setZoomCoef(resultCoef);\n }, []);\n\n const handleResetClick = () => controlsRef.current.reset();\n const handleAutoRotateClick = () => setAutoRotate(prev => !prev);\n\n const textureRef = useMemo(() => new TextureLoader().load(FieldBg), []);\n\n const isCurves = filteredMetrix.length > 0;\n\n const handlePointerOverCurve = text => {\n clearTimeout(pointerTimeout.current);\n\n setHovered({ isHovered: true, text });\n\n document.body.style.cursor = 'pointer';\n };\n\n const handlePointerOutCurve = text => {\n clearTimeout(pointerTimeout.current);\n\n pointerTimeout.current = setTimeout(() => {\n setHovered({ isHovered: false, text });\n }, 4000);\n\n document.body.style.cursor = 'auto';\n };\n return (\n \n \n \n
\n {/* \n
*/}\n \n \n {isGraphVisible && (\n <>\n {/* \n */}\n\n {/* */}\n */}\n\n {isCurves && (\n
\n );\n};\n\nexport default memo(PitchesTrajectories);\n","import classNames from 'classnames';\nimport { getPitchColorByName } from 'utils';\nimport cl from './OptionsToggler.module.scss';\n\nconst OptionsToggler = ({\n optionsArr,\n currentOption,\n handleOptionClick,\n vertical = false,\n\tnoSort = false,\n children,\n ...props\n}) => {\n const wrapperClasses = classNames(cl.wrapper, {\n [cl.vertical]: vertical\n });\n\n const isDataArray = Array.isArray(optionsArr);\n const existData = isDataArray ? optionsArr : Object.keys(optionsArr);\n\t\n\tlet sortedData = existData.slice(1);\n\tif (!noSort) {\n\t\tsortedData.sort((a,b) => a > b ? 1 : -1)\n\t}\n\tsortedData.unshift(existData[0])\n return (\n - \n {sortedData.map((option, i, arr) => {\n const optionClasses = classNames(cl.option, {\n [cl.active]: option === currentOption,\n [cl.lastListItem]: children && arr.length === i + 1\n });\n\n const isStyles = isDataArray || optionsArr.option === null || option === currentOption;\n const itemStyles = isStyles ? null : { backgroundColor: getPitchColorByName(option) };\n return (\n
- \n {option}\n \n );\n })}\n {children &&
- {children} }\n
- \n {sortedData.map((option, i, arr) => {\n const optionClasses = classNames(cl.option, {\n [cl.inActive]: !option.checked,\n [cl.lastListItem]: children && arr.length === i + 1,\n [cl.whiteColor]: option.name === 'All Pitches'\n });\n\n const itemStyles = {\n backgroundColor: !classColor\n ? getPitchColorByName(option.name)\n : getPitchСlassColorByName(option.name)\n };\n return (\n
- \n {option.name}\n \n );\n })}\n {children &&
- {children} }\n
\n
\n );\n};\n\nexport default GraphsHeader;\n","import React from 'react';\nimport cl from './SortArrows.module.scss';\n\nconst SortArrows = ({ direction = 'asc', ...props }) => (\n \n \n \n \n);\n\nexport default SortArrows;\n","import { memo, useState } from 'react';\nimport cl from './BattersTable.module.scss';\nimport classNames from 'classnames';\nimport SortArrows from 'components/UI/icons/SortArrows/SortArrows';\n\nconst TableHeader = ({ activeColumn, handleHeaderClick }) => {\n const titlesArr = [\n { text: 'Batter name', clName: 'name', sortField: 'name' },\n { text: 'Hit number', clName: 'value', sortField: 'hitNumber' },\n { text: 'Hit angle', clName: 'value', sortField: 'angle' },\n { text: 'Exit velocity', clName: 'value', sortField: 'velocity' },\n { text: 'Distance', clName: 'value', sortField: 'distance' }\n ];\n\n return (\n {title}
\n{subTitle}
\n {graphsArrow && (\n\n {titlesArr.map(({ text, clName, sortField }, i) => {\n const isActiveCell = sortField === activeColumn.sortField;\n\n const cellClasses = classNames(cl[clName], cl.headerCell, {\n [cl.active]: isActiveCell\n });\n return (\n
\n );\n};\n\nconst TableCell = ({ row, cell: { clName, value, ending }, activeColumn }) => {\n const cellClasses = classNames(cl[clName], {\n [cl.active]: value === activeColumn.sortField\n });\n\n const formattedValue = clName === 'value' ? Math.round(row[value]) : row[value];\n return (\n \n {text}\n {isActiveCell && (\n
\n );\n })}\n \n {formattedValue}\n {ending}\n
\n );\n};\n\nconst TableRow = ({ row, rowCells, activeColumn, handleRowClick }) => {\n return (\n \n {rowCells.map((cell, i) => (\n
\n );\n};\n\nconst BattersTable = ({ metrix }) => {\n const [activeColumn, setActiveColumn] = useState({ sortField: 'velocity', dir: 'desc' });\n\n const rowCells = [\n { clName: 'name', value: 'name', ending: '' },\n { clName: 'value', value: 'hitNumber', ending: '' },\n { clName: 'value', value: 'angle', ending: '°' },\n { clName: 'value', value: 'velocity', ending: ' mph' },\n { clName: 'value', value: 'distance', ending: ' m' }\n ];\n\n const battersArr = metrix.reduce((sum, { pitches_all, preview }) => {\n console.log(pitches_all);\n pitches_all\n .filter(({ hit_info }) => hit_info.angle)\n .forEach(\n ({ hit_info: { angle, 'exit velocity': velocity, distance }, pitch_info: { game_id, mom_id } }, i) =>\n sum.push({\n name: `${preview.batter_name} ${preview.batter_surname}`,\n hitNumber: i + 1,\n angle,\n velocity,\n distance,\n game_id,\n mom_id\n })\n );\n\n return sum;\n }, []);\n\n const handleHeaderClick = sortField => () =>\n setActiveColumn(prev => {\n if (prev.sortField === sortField) return { ...prev, dir: prev.dir === 'asc' ? 'desc' : 'asc' };\n return { ...prev, sortField };\n });\n\n battersArr.sort((a, b) => {\n if (activeColumn.dir === 'asc') return a[activeColumn.sortField] > b[activeColumn.sortField] ? 1 : -1;\n return a[activeColumn.sortField] > b[activeColumn.sortField] ? -1 : 1;\n });\n\n const handleRowClick = (gameId, momentId) => () => {\n window.open(`/game/${gameId}?card=${momentId}&tab=hitting`, '_blank');\n };\n\n console.log(battersArr);\n return (\n \n
\n );\n};\n\nexport default memo(BattersTable);\n","const HorizontalRows = ({ PARAMS }) => {\n const rowsArr = new Array(PARAMS.ROWS_NUMBER).fill(null);\n const rowsDelta = PARAMS.GRAPH_HEIGHT / (PARAMS.ROWS_NUMBER - 1);\n\n return (\n <>\n {rowsArr.map((_, i) => (\n - \n {legendData.map((item, i) => (\n
\n {isLeftArrow &&
\n );\n};\n\nexport default MobileScrollingWrapper;\n","import cl from './PitchersReleaseSpeeds.module.scss';\nimport HorizontalRows from './HorizontalRows';\nimport { memo } from 'react';\nimport LeftValues from './LeftValues';\nimport VerticalPitcherRowsAndTitles from './VerticalPitcherRowsAndTitles';\nimport Dots from './Dots';\nimport Legend from './Legend/Legend';\nimport MobileScrollingWrapper from 'components/PlayerStats/MobileScrollingWrapper/MobileScrollingWrapper';\n\nconst PARAMS = {\n WRAPPER_WIDTH: 1248,\n WRAPPER_HEIGHT: 330,\n LEFT_PADDING: 99,\n TOP_PADDING: 139,\n GRAPH_HEIGHT: 102,\n GRAPH_WIDTH: 1131,\n ROWS_NUMBER: 4,\n MIN_MAX_VALUES_GAP: 1\n};\n\nconst PitchersReleaseSpeeds = ({ metrix }) => {\n // Default data\n const addedData = metrix.reduce((sum, { preview, pitches_all }) => {\n const pitcherData = {};\n pitcherData.pitcherName = `${preview.pitcher_name} ${preview.pitcher_surname}`;\n pitcherData.pitches = pitches_all.reduce(\n (pitchesSum, { pitch_info: { pitch_type: pitchType, speed, mom_id, game_id } }) => {\n const pitch = { pitchType, speed: speed * 2.24, mom_id, game_id };\n pitchesSum.push(pitch);\n\n return pitchesSum;\n },\n []\n );\n pitcherData.pitchTypes = preview.pitch_types;\n\n sum.push(pitcherData);\n\n return sum;\n }, []);\n\n // Min & max values calculating\n const minMaxValues = addedData.reduce((sum, pitcherData) => {\n const speedsArr = pitcherData.pitches.map(({ speed }) => speed);\n\n const minSpeed = Math.min(...speedsArr);\n const maxSpeed = Math.max(...speedsArr);\n\n if (!sum.min || minSpeed < sum.min) sum.min = minSpeed;\n if (!sum.max || maxSpeed > sum.max) sum.max = maxSpeed;\n\n return sum;\n }, {});\n\n minMaxValues.min -= PARAMS.MIN_MAX_VALUES_GAP;\n minMaxValues.max += PARAMS.MIN_MAX_VALUES_GAP;\n\n // Lines and balls calc\n const linesArr = addedData.reduce((sum, pitcherData, i) => {\n const lineData = {\n pitcherName: pitcherData.pitcherName,\n count: pitcherData.pitches.length,\n accum: (sum[i - 1]?.accum ?? 0) + pitcherData.pitches.length,\n pitches: pitcherData.pitches,\n pitchTypes: pitcherData.pitchTypes\n };\n\n sum.push(lineData);\n return sum;\n }, []);\n\n const totalPitchesCount = addedData.reduce((sum, pitcherData) => sum + pitcherData.pitches.length, 0);\n const pitchDeltaWidth = PARAMS.GRAPH_WIDTH / totalPitchesCount;\n\n const legendPitchTypes = Array.from(\n new Set(metrix.map(pitcher => pitcher.preview.pitch_types).reduce((sum, arr) => sum.concat(arr), []))\n );\n\n return (\n \n {isFooter ? children[0] : children}\n
\n {isRightArrow && \n
\n );\n};\n\nexport default FieldGraph;\n","import FrequencySpeedGraph from './FrequencySpeedGraph/FrequencySpeedGraph';\nimport FieldGraph from './FieldGraph/FieldGraph';\n\nconst PitchesSpeedField = ({ filteredData = [], preview = {}, relValuesData = {}, ...props }) => {\n return (\n <>\n \n \n {isGraphVisible && (\n <>\n \n Gravity\n
\n {/* Bottom wrapper title */}\n Horizontal break, cm
\n {/* Left wrapper title */}\nDownward Vertical Break, cm
\n\n \n {isGraphVisible && (\n
\n );\n};\n\nexport default TwinPitchesGraph;\n","import { getPitchColorByName } from 'utils';\nimport PitchesSpeedField from '../PitchesSpeedField/PitchesSpeedField';\nimport TwinPitchesGraph from '../TwinPitchesGraph/TwinPitchesGraph';\nimport cl from './ThreeGraphsRow.module.scss';\n\nconst ThreeGraphsRow = ({ currentOption, setCurrentOption, pitcher }) => {\n const { pitch_types: pitchTypes } = pitcher.preview;\n\n\tconst relValuesData = pitcher.pitches_all.reduce((sum, pitch) => {\n const { speed, pitch_type, pitchGraphCoords } = pitch.pitch_info;\n const pitchType = pitchTypes[pitch_type];\n\n if (sum[pitchType] !== undefined) {\n sum[pitchType].count += 1;\n sum[pitchType].speeds.push(speed * 2.24);\n sum[pitchType].pitchGraphCoords.push({ ...pitchGraphCoords, color: getPitchColorByName(pitchType) });\n\n return sum;\n }\n\n sum[pitchType] = {\n count: 1,\n speeds: [speed * 2.24],\n pitchGraphCoords: [{ ...pitchGraphCoords, color: getPitchColorByName(pitchType) }]\n };\n\n return sum;\n }, {});\n\n return (\n \n
\n );\n};\n\nexport default ThreeGraphsRow;\n","import GraphsBlock from './GraphsBlock';\nimport GraphsHeader from './GraphsHeader/GraphsHeader';\nimport ThreeGraphsRow from './ThreeGraphsRow/ThreeGraphsRow';\n\nconst PitchersGraphRow = ({ pitcher }) => (\n \n \n \n \n \n \n \n
\n );\n};\n\nexport default Graphs;\n","import React from 'react';\n// import ContentBoxFooter from '../../ContentBoxFooter/ContentBoxFooter';\nimport cl from './ContentMobileBox.module.scss';\nimport MobileBoxTable from './MobileBoxTable';\nimport { useSelector } from 'react-redux';\nimport Graphs from '../Graphs/Graphs';\n\nconst ContentMobileBox = ({ tableData, graphsData }) => {\n const currentMode = useSelector(s => s.game.boxMode);\n\n const isTable = currentMode !== 'Info' && currentMode !== 'Machine Vision Statistics';\n // const isFooter = currentMode === 'Info' && footer !== '';\n const { batters_metrix, pitchers_metrix } = graphsData;\n const isGraphs =\n Object.keys(graphsData).length !== 0 &&\n batters_metrix[0].pitches_all.length > 0 &&\n pitchers_metrix[0].pitches_all.length > 0;\n const isStatistics = currentMode === 'Machine Vision Statistics' && isGraphs;\n return (\n \n {/*
\n );\n};\n\nexport default ContentMobileBox;\n","import React from 'react';\n\nconst ContentBoxTableBodyCell = ({ title, toFixList, player, tableName }) => {\n const getValue = () => {\n if (player.id === -1) return ' ';\n if (title === 'POS') return player.content.positions.join('/');\n\n if (tableName === 'batting') {\n if (player.content.stats[tableName][title] === 'Infinity') return 'INF';\n \n if (['SB_pr', 'LOB', 'CS', 'SB'].includes(title)) {\n\t\t\t\tif (toFixList.includes(title)) return Number(player.content.stats.running[title]).toFixed(3);\n return player.content.stats.running[title];\n }\n if (['CH', 'PO', 'A', 'E', 'DP', 'FLD'].includes(title)) {\n\t\t\t\tif (toFixList.includes(title)) return Number(player.content.stats.fielding[title]).toFixed(3);\n\t\t\t\treturn player.content.stats.fielding[title];\n }\n\n\t\t\tif (toFixList.includes(title)) return Number(player.content.stats[tableName][title]).toFixed(3);\n\n return player.content.stats[tableName][title];\n }\n\n if (tableName === 'pitching') {\n if (player.pitching === null) return ' ';\n if (toFixList.includes(title)) return Number(player.pitching[title]).toFixed(3);\n return player.pitching[title];\n }\n\n if (tableName === 'catching') {\n if (['SB', 'CS', 'PB'].includes(title)) return player.catching[title];\n }\n\n return ' ';\n };\n\n const cellStyle = toFixList.includes(title) ? { width: '3rem' } : null;\n const value = getValue();\n\n const filteredValue = Number(value) < 0 ? '—' : value;\n\n return \n
\n );\n};\n\nexport default ContentBoxTables;\n","import React from 'react';\nimport cl from './ContentBox.module.scss';\nimport ContentBoxFooter from '../ContentBoxFooter/ContentBoxFooter';\nimport ContentBoxTables from './ContentBoxTables';\nimport Graphs from './Graphs/Graphs';\n\nconst ContentBoxDesktop = ({ tableData, footer, graphsData }) => {\n const { batters_metrix, pitchers_metrix } = graphsData;\n const isGraphs =\n Object.keys(graphsData).length !== 0 &&\n batters_metrix[0].pitches_all.length > 0 &&\n pitchers_metrix[0].pitches_all.length > 0;\n\n return (\n \n
\n \n
\n );\n};\n\nexport default ContentBoxDesktop;\n","import React, { useState, useEffect, useRef } from 'react';\nimport { setSearchParam } from 'utils';\nimport Loader from 'components/UI/loaders/Loader/Loader';\nimport { axiosInstance, axiosCancelToken } from 'axios-instance';\nimport { useParams } from 'react-router-dom';\nimport { useDispatch, useSelector } from 'react-redux';\nimport ContentMobileBox from './MobileBox/ContentMobileBox';\nimport ContentBoxDesktop from './ContentBoxDesktop';\nimport { setBoxData } from 'redux/gameReducer';\n\nconst ContentBox = () => {\n const [isLoading, setIsLoading] = useState(false);\n // const [boxData, setBoxData] = useState({});\n const [boxGraphsData, setBoxGraphsData] = useState({});\n\n const { gameId } = useParams();\n\n const boxData = useSelector(state => state.game.boxData);\n const activeButton = useSelector(state => state.game.boxActiveButton);\n\n const dispatch = useDispatch();\n\n const cancelTokenRef = useRef();\n\n const { footer } = boxData || {};\n\n useEffect(() => {\n setSearchParam('tab', 'box');\n\n const fetchBoxData = async () => {\n cancelTokenRef.current = axiosCancelToken.source();\n\n try {\n setIsLoading(true);\n let response = await axiosInstance.get(`/game_${gameId}/box`, {\n cancelToken: cancelTokenRef.current.token\n });\n\n dispatch(setBoxData(response.data));\n setIsLoading(false);\n\n response = await axiosInstance.get(`/game_metrix?game_id=${gameId}`, {\n cancelToken: cancelTokenRef.current.token\n });\n\n setBoxGraphsData(response.data);\n } catch (err) {\n err.message !== null && console.log(err.message);\n } finally {\n setIsLoading(false);\n }\n };\n\n fetchBoxData();\n return () => {\n cancelTokenRef.current.cancel(null);\n };\n // eslint-disable-next-line\n }, []);\n\n const tableData = boxData[activeButton];\n const graphsData = boxGraphsData[activeButton] || {};\n\n // Loader\n if (isLoading) return \n {isVideo &&
\n {errorMsg !== null && (\n \n
\n {isVideo && \n
\n \n \n \n \n
*/}\n {/* {isCameraSelector && \n {error}\n
\n);\n\nexport default ErrorLoader;\n","import { useState, useEffect, useRef } from 'react';\nimport {\n setCurrentGameId,\n setErrorMsg,\n setFullData,\n setIsBroadcast,\n setIsVideo,\n setPlayersInfo,\n\tsetVideoLengthMode\n} from 'redux/gameReducer';\nimport { shallowEqual, useSelector } from 'react-redux';\nimport { axiosInstance, axiosCancelToken } from 'axios-instance';\nimport { useParams } from 'react-router-dom';\n// import axios from 'axios';\n\nconst useGameFetch = url => {\n const [isLoading, setIsLoading] = useState(false);\n const [loadedPercents, setLoadedPercents] = useState(null);\n const [error, setError] = useState(null);\n const innings = useSelector(state => state.game.innings, shallowEqual);\n\n const intervalRef = useRef();\n const dataRef = useRef(0);\n const cancelTokenRef = useRef();\n\n const { gameId } = useParams();\n\n useEffect(\n () => () => {\n typeof cancelTokenRef.current != 'undefined' && cancelTokenRef.current.cancel(null);\n clearTimeout(intervalRef.current);\n },\n []\n );\n\n useEffect(() => {\n error && setError(null);\n // eslint-disable-next-line\n }, [innings]);\n\n const concatPlayersInfo = (players, summary) => {\n return players\n .filter(player => player.photo !== '')\n .reduce((sum, player) => {\n sum[player.id] = player.photo;\n return sum;\n }, summary);\n };\n\n const getFullData =\n (firstTime = false, innerUrl = url) =>\n async dispatch => {\n cancelTokenRef.current = axiosCancelToken.source();\n\n try {\n firstTime && setIsLoading(true);\n const resp = await axiosInstance.get(innerUrl, {\n // const resp = await axios.get('http://localhost:3001', {\n cancelToken: cancelTokenRef.current.token,\n onDownloadProgress: ({ total, loaded }) => setLoadedPercents((loaded * 100) / total)\n });\n // if (JSON.stringify(dataRef.current) === JSON.stringify(resp.data)) return;\n dispatch(setErrorMsg(null));\n error && setError(null);\n\n const dataLength = JSON.stringify(resp.data).length;\n\n intervalRef.current = setTimeout(() => {\n dispatch(getFullData(false, innerUrl));\n }, 5000);\n\n if (dataRef.current === dataLength) return;\n dataRef.current = dataLength;\n\n if (firstTime) {\n //Concat players info from fetched data\n const { guests, owners, has_measures, camera_info } = resp.data.preview;\n\n let newPlayersInfo = {};\n newPlayersInfo = concatPlayersInfo(guests.players, newPlayersInfo);\n newPlayersInfo = concatPlayersInfo(owners.players, newPlayersInfo);\n\n dispatch(setPlayersInfo(newPlayersInfo));\n\n const isVideoGame = (has_measures && camera_info?.left_main_link) || camera_info?.broadcast_link;\n dispatch(setIsVideo(isVideoGame));\n\n const isBroadcastGame = camera_info?.broadcast_link && !camera_info?.left_main_link;\n dispatch(setIsBroadcast(isBroadcastGame));\n\t\t\t\t\tif (isBroadcastGame) dispatch(setVideoLengthMode('Broadcast'))\n }\n\n dispatch(setFullData(resp.data));\n } catch (err) {\n setError(err.message);\n !err.__CANCEL__ && dispatch(setErrorMsg(err.message));\n console.log(err.__CANCEL__);\n if (!err.__CANCEL__) {\n intervalRef.current = setTimeout(() => {\n dispatch(getFullData(false, innerUrl));\n }, 5000);\n }\n } finally {\n if (firstTime) {\n setIsLoading(false);\n setLoadedPercents(null);\n dispatch(setCurrentGameId(gameId));\n }\n }\n };\n\n return [error, isLoading, loadedPercents, getFullData];\n};\n\nexport default useGameFetch;\n","import React, { useState, useEffect } from 'react';\nimport Header from 'components/Game/Header/Header';\nimport Filters from 'components/Game/Filters/Filters';\nimport Content from 'components/Game/Content/Content';\nimport { useSelector, useDispatch, shallowEqual } from 'react-redux';\nimport Loader from 'components/UI/loaders/Loader/Loader';\nimport ErrorLoader from 'components/UI/loaders/ErrorLoader/ErrorLoader';\nimport useGameFetch from 'hooks/useGameFetch';\nimport { resetData, setCurrentTab as setCurrentSubTab, setIsFullscreen } from 'redux/gameReducer';\nimport { useParams, useSearchParams } from 'react-router-dom';\nimport { getSearchParam, setSearchParam } from 'utils';\nimport { setMobileWidth } from 'redux/sharedReducer';\n\nconst Game = () => {\n const tab = getSearchParam('tab');\n const defaultTab = ['box', 'videos', 'pitch', 'hitting', 'running', 'plays'].includes(tab) ? tab : 'pitch';\n\n const [currentTab, setCurrentTab] = useState(defaultTab);\n const { gameId } = useParams();\n const [searchParams] = useSearchParams();\n\n const innings = useSelector(state => state.game.innings, shallowEqual);\n const errorMsg = useSelector(state => state.game.errorMsg, shallowEqual);\n\n const dispatch = useDispatch();\n\n const [error, isLoading, loadedPercents, getFullData] = useGameFetch(`/game_${gameId}`);\n\n useEffect(() => {\n dispatch(getFullData(true));\n dispatch(setCurrentSubTab(searchParams.get('tab')));\n\n const resizeHandle = () => {\n dispatch(setMobileWidth(window.innerWidth));\n };\n\n const toggleFullscreen = ({ matches }) => dispatch(setIsFullscreen(matches ? true : false));\n\n resizeHandle();\n window.addEventListener('resize', resizeHandle);\n\n window.matchMedia('(display-mode: fullscreen)').addEventListener('change', toggleFullscreen);\n\n return () => {\n dispatch(resetData());\n window.removeEventListener('resize', resizeHandle);\n window.matchMedia('(display-mode: fullscreen)').removeEventListener('change', toggleFullscreen);\n };\n\n // eslint-disable-next-line\n }, []);\n\n const handleTabClick = e => {\n const tabText = e.target ? e.target.name : e.toLowerCase();\n const resultTabText = tabText === 'hit' ? 'hitting' : tabText === 'run' ? 'running' : tabText;\n\n setSearchParam('tab', resultTabText);\n setCurrentTab(resultTabText);\n\n dispatch(setCurrentSubTab(resultTabText));\n };\n\n const isFilters = currentTab !== 'box';\n\n // Error handling render\n if (errorMsg !== null && innings.length === 0) return\n Go to Team Stat\n
\n );\n};\n\nexport default Header;\n","import { Link } from 'react-router-dom';\nimport { useMemo } from 'react';\nimport { getShortName } from 'utils';\nimport { useSelector } from 'react-redux';\nimport cl from '../ContentSideTables.module.scss';\n\nconst TableBody = () => {\n\tconst leagues = useSelector(state => state.games.leagues);\n const isMobile = useSelector(state => state.shared.isMobile);\n const currentGameType = useSelector(state => state.shared.currentGameType);\n const currentLeague = useSelector(state => state.games.currentLeague);\n\n const leagueTeams = leagues\n .slice()\n .find(league =>\n currentLeague.id === undefined\n ? league.name === currentLeague.name || league.name === currentLeague.title\n : league.id === currentLeague.id\n )?.teams;\n\n const sortedTeams = useMemo(\n () =>\n leagueTeams\n ? leagueTeams.sort((a, b) => (a.wins > b.wins || (a.wins === b.wins && a.loses < b.loses) ? -1 : 1))\n : [],\n [leagueTeams]\n );\n return (\n \n {sortedTeams.map(team => (\n
\n );\n};\n\nexport default TableBody;\n","import cl from '../ContentSideTables.module.scss';\n\nconst TableHeader = () => {\n return (\n \n
\n ))}\n \n \n {' '}\n {getShortName(team.name, isMobile ? 30 : 21)}\n \n
\n \n
\n {team.wins}
\n {team.loses}
\n {team.pct !== -1 ? team.pct : '—'}
\n \n
\n );\n};\n\nexport default TableHeader;\n","import cl from '../ContentSideTables.module.scss';\nimport TableBody from './TableBody';\nimport TableHeader from './TableHeader';\n\nconst Table = () => {\n \n return (\n Team
\n \n
\n W
\n L
\n PCT
\n \n
\n );\n};\n\nexport default Table;\n","import cl from '../ContentSideTables.module.scss';\nimport Header from './Header';\nimport Table from './Table';\n\nconst PctTable = () => (\n \n
\n
\n);\n\nexport default PctTable;\n","const defaultState = {\n\tsummaryYearsData: {},\n games: [],\n leagues: [],\n players: null,\n currentLeague: { id: -1, name: 'All', title: 'All' },\n currentStadium: 'All',\n currentHome: 'All',\n currentGuests: 'All',\n leaguesImages: {},\n mobileTableMode: 'Calendar',\n currentSwitchTableMode: 'batting',\n currentSwitchDropdownValue: { batting: 'AB', fielding: 'CH', running: 'SB', pitching: 'GS' }\n};\n\nconst SET_SUMMARY_YEARS_DATA = 'SET_SUMMARY_YEARS_DATA';\nconst SET_GAMES_AND_LEAGUES = 'SET_GAMES_AND_LEAGUES';\nconst SET_CURRENT_GAMES_LEAGUE = 'SET_CURRENT_GAMES_LEAGUE';\nconst SET_CURRENT_STADIUM = 'SET_CURRENT_STADIUM';\nconst SET_CURRENT_HOME = 'SET_CURRENT_HOME';\nconst SET_CURRENT_GUESTS = 'SET_CURRENT_GUESTS';\nconst ADD_LEAGUE_IMAGE = 'ADD_LEAGUE_IMAGE';\nconst SET_MOBILE_TABLE_MODE = 'SET_MOBILE_TABLE_MODE';\nconst SET_CURRENT_SWITCH_TABLE_MODE = 'SET_CURRENT_SWITCH_TABLE_MODE';\nconst SET_CURRENT_SWITCH_DROPDOWN_VALUE = 'SET_CURRENT_SWITCH_DROPDOWN_VALUE';\nconst RESET_TABLE_FILTERS = 'RESET_TABLE_FILTERS';\n\nexport const gamesReducer = (state = defaultState, action) => {\n switch (action.type) {\n\t\tcase SET_SUMMARY_YEARS_DATA:\n\t\t\treturn { ...state, summaryYearsData: action.payload };\n case SET_GAMES_AND_LEAGUES:\n return {\n ...state,\n games: action.payload.games,\n leagues: action.payload.leagues,\n players: action.payload.players\n };\n case SET_CURRENT_GAMES_LEAGUE:\n return { ...state, currentLeague: action.payload };\n case SET_CURRENT_STADIUM:\n return { ...state, currentStadium: action.payload };\n case SET_CURRENT_HOME:\n return { ...state, currentHome: action.payload };\n case SET_CURRENT_GUESTS:\n return { ...state, currentGuests: action.payload };\n case ADD_LEAGUE_IMAGE:\n return { ...state, leaguesImages: { ...state.leaguesImages, ...action.payload } };\n case SET_MOBILE_TABLE_MODE:\n return { ...state, mobileTableMode: action.payload };\n case SET_CURRENT_SWITCH_TABLE_MODE:\n return { ...state, currentSwitchTableMode: action.payload };\n case SET_CURRENT_SWITCH_DROPDOWN_VALUE:\n return {\n ...state,\n currentSwitchDropdownValue: {\n ...state.currentSwitchDropdownValue,\n [state.currentSwitchTableMode]: action.payload\n }\n };\n case RESET_TABLE_FILTERS:\n return { ...state, currentStadium: 'All', currentHome: 'All', currentGuests: 'All' };\n default:\n return state;\n }\n};\n\nexport const setSummaryYearsData = payload => ({ type: SET_SUMMARY_YEARS_DATA, payload });\nexport const setGamesAndLeagues = payload => ({ type: SET_GAMES_AND_LEAGUES, payload });\nexport const setCurrentLeague = payload => ({ type: SET_CURRENT_GAMES_LEAGUE, payload });\nexport const setCurrentStadium = payload => ({ type: SET_CURRENT_STADIUM, payload });\nexport const setCurrentHome = payload => ({ type: SET_CURRENT_HOME, payload });\nexport const setCurrentGuests = payload => ({ type: SET_CURRENT_GUESTS, payload });\nexport const addLeagueImage = payload => ({ type: ADD_LEAGUE_IMAGE, payload });\nexport const setMobileTableMode = payload => ({ type: SET_MOBILE_TABLE_MODE, payload });\nexport const setCurrentSwitchTableMode = payload => ({ type: SET_CURRENT_SWITCH_TABLE_MODE, payload });\nexport const setCurrentSwitchDropdownValue = payload => ({ type: SET_CURRENT_SWITCH_DROPDOWN_VALUE, payload });\nexport const resetTableFilters = () => ({ type: RESET_TABLE_FILTERS });\n","import cl from '../ContentSideTables.module.scss';\nimport { setCurrentSwitchTableMode } from 'redux/gamesReducer';\nimport Dropdown from 'components/UI/dropdown/GamesDropdown/Dropdown';\nimport { useDispatch } from 'react-redux';\nimport { Link } from 'react-router-dom';\n\nconst Header = ({ tableMode }) => {\n const dispatch = useDispatch();\n\n const handleTableModeClick = mode => dispatch(setCurrentSwitchTableMode(mode.toLowerCase()));\n const tableModeValue = tableMode[0].toUpperCase() + tableMode.slice(1);\n\n return (\n \n
\n );\n};\n\nexport default Header;\n","import Dropdown from 'components/UI/dropdown/GamesDropdown/Dropdown';\nimport cl from '../ContentSideTables.module.scss';\nimport { setCurrentSwitchDropdownValue } from 'redux/gamesReducer';\nimport { useDispatch } from 'react-redux';\n\nconst DROPDOWN_VALUES = {\n batting: [\n 'AB',\n 'R',\n 'H',\n '2B',\n '3B',\n 'HR',\n 'RBI',\n 'GDP',\n 'BB',\n 'IBB',\n 'HP',\n 'SH',\n 'SF',\n 'SO',\n 'TB',\n 'AVG',\n 'SLG',\n 'OBP',\n 'OPS'\n ],\n running: ['SB', 'CS', '%SB', 'LOB'],\n fielding: ['CH', 'PO', 'A', 'E', 'DP', 'FLD%'],\n pitching: [\n 'IP',\n 'PA',\n 'R',\n 'ER',\n 'H',\n '2B',\n '3B',\n 'HR',\n 'BB',\n 'IBB',\n 'HP',\n 'SH',\n 'SF',\n 'SO',\n 'WP',\n 'BK',\n 'ERA',\n 'NP',\n 'NS',\n 'NB'\n ]\n};\n\nconst TableHeader = ({ tableMode, dropdownValue }) => {\n const dispatch = useDispatch();\n\n const handleDropdownClick = value => dispatch(setCurrentSwitchDropdownValue(value));\n\n return (\n \n
\n Go to Player Stat\n \n
\n );\n};\n\nexport default TableHeader;\n","import cl from '../ContentSideTables.module.scss';\nimport { Link } from 'react-router-dom';\nimport { getShortName } from 'utils';\n\nconst TableBodyRow = ({ row, tableMode, dropdownValue, REPLACES, currentGameType, isToFixed }) => {\n const teams = row.teams.map((team, i, arr) => {\n if (i !== 0)\n return (\n <>\n /\n \n {getShortName(team.name, arr.length > 1 ? 3 : 6)}\n \n \n );\n return (\n \n {getShortName(team.name, arr.length > 1 ? 3 : 6)}\n \n );\n });\n\n return (\n Name
\n \n
\n Team
\n \n
\n \n
\n );\n};\n\nexport default TableBodyRow;\n","import { useSelector } from 'react-redux';\nimport { useMemo } from 'react';\nimport cl from '../ContentSideTables.module.scss';\nimport TableBodyRow from './TableBodyRow';\n\nconst REPLACES = { 'FLD%': 'FLD', '%SB': 'SB_pr' };\n\nconst TableBody = ({ tableMode, dropdownValue }) => {\n const currentGameType = useSelector(state => state.shared.currentGameType);\n const players = useSelector(state => state.games.players);\n const currentLeague = useSelector(state => state.games.currentLeague);\n\n const league = players.find(\n curLeague => curLeague.title === currentLeague.title || curLeague.title === currentLeague.name\n );\n\n const sortedPlayers = useMemo(() => {\n if (league) {\n const sortField = REPLACES[dropdownValue[tableMode]] || dropdownValue[tableMode];\n return league.players[tableMode].toSorted((a, b) => (a[sortField] > b[sortField] ? -1 : 1)).slice(0, 5);\n }\n\n return [];\n }, [league, tableMode, dropdownValue]);\n\n const isToFixed = ['AVG', 'SLG', 'OBP', 'OPS', 'ERA', '%SB', 'FLD%'].includes(dropdownValue[tableMode]);\n return (\n \n \n {row.surname} {row.name}\n \n
\n \n
\n {teams}
\n \n {REPLACES[dropdownValue[tableMode]]\n ? !isToFixed\n ? row[REPLACES[dropdownValue[tableMode]]]\n : row[REPLACES[dropdownValue[tableMode]]].toFixed(3)\n : !isToFixed\n ? row[dropdownValue[tableMode]]\n : row[dropdownValue[tableMode]].toFixed(3)}\n
\n \n {sortedPlayers.map(row => (\n
\n );\n};\n\nexport default TableBody;\n","import { useSelector } from 'react-redux';\nimport cl from '../ContentSideTables.module.scss';\nimport TableHeader from './TableHeader';\nimport TableBody from './TableBody';\n\nconst Table = ({ tableMode }) => {\n const dropdownValue = useSelector(state => state.games.currentSwitchDropdownValue);\n\n return (\n \n
\n );\n};\n\nexport default Table;\n","import cl from '../ContentSideTables.module.scss';\nimport { useSelector } from 'react-redux';\nimport Header from './Header';\nimport Table from './Table';\n\nconst SwitchTable = () => {\n const tableMode = useSelector(state => state.games.currentSwitchTableMode);\n \n return (\n \n
\n
\n );\n};\n\nexport default SwitchTable;\n","import cl from './ContentSideTables.module.scss';\nimport { useSelector } from 'react-redux';\nimport PctTable from './PctTable/PctTable';\nimport SwitchTable from './SwitchTable/SwitchTable';\nimport classNames from 'classnames';\n\nconst ContentSideTables = () => {\n const currentLeague = useSelector(state => state.games.currentLeague);\n const isMobile = useSelector(state => state.shared.isMobile);\n const mobileTableMode = useSelector(state => state.games.mobileTableMode);\n\n const isTables = currentLeague.id !== -1;\n\n const sideClasses = classNames(cl.side, {\n [cl.addHeight]: mobileTableMode === 'Team tablo/Leader'\n });\n\n const styles = !isTables\n ? { height: isMobile ? 'auto' : '70vh' }\n : { maxHeight: isMobile ? 'auto' : '75vh' };\n return (\n \n {isTables && (\n <>\n {(!isMobile || mobileTableMode === 'Team tablo/Leader') && (\n <>\n
\n );\n};\n\nexport default ContentSideTables;\n","import cl from './NoDataMessage.module.scss'\n\nconst NoDataMessage = ({ text }) => {text}
;\n\nexport default NoDataMessage;\n","import { useState, useEffect, useRef, useMemo } from 'react';\nimport CalendarImage from 'images/calendar.png';\nimport Calendar from 'react-calendar';\nimport './style.scss';\nimport { useSelector } from 'react-redux';\n\nfunction listenForOutsideClicks(listening, setListening, menuRef, setIsVisible) {\n return () => {\n if (listening) return;\n if (!menuRef.current) return;\n setListening(true);\n [`click`, `touchstart`].forEach(type => {\n document.addEventListener(type, evt => {\n if (menuRef.current?.contains(evt.target)) return;\n setIsVisible(false);\n });\n });\n };\n}\n\nconst ContentGridCalendar = ({ value, onChange }) => {\n const [listening, setListening] = useState(false);\n const [isVisible, setIsVisible] = useState(false);\n\n const menuRef = useRef(null);\n\n const games = useSelector(state => state.games.games);\n const currentLeague = useSelector(state => state.games.currentLeague);\n const currentGameType = useSelector(state => state.shared.currentGameType);\n const currentStadium = useSelector(state => state.games.currentStadium);\n const currentHome = useSelector(state => state.games.currentHome);\n const currentGuests = useSelector(state => state.games.currentGuests);\n\n // eslint-disable-next-line\n useEffect(listenForOutsideClicks(listening, setListening, menuRef, setIsVisible));\n\n const toggleCalendar = () => setIsVisible(!isVisible);\n\n const changeHandler = value => {\n onChange(value);\n toggleCalendar();\n };\n\n //Games filtering\n let filteredData = useMemo(() => {\n const filteredGames = games.filter(\n game =>\n (currentStadium !== 'All' ? game.stadium_name === currentStadium : true) &&\n (currentLeague.id !== -1 ? game.league_id === currentLeague.id : currentGameType === game.game_type)\n // \t&&\n // (currentHome !== 'All' ? game.owners_name === currentHome : true) &&\n // (currentGuests !== 'All' ? game.guests_name === currentGuests : true)\n );\n\n if (currentHome !== 'All' && currentGuests !== 'All') {\n return filteredGames.filter(\n game =>\n (game.owners_name === currentHome || game.owners_name === currentGuests) &&\n (game.guests_name === currentHome || game.guests_name === currentGuests)\n );\n }\n\n if (currentHome !== 'All')\n return filteredGames.filter(\n game => game.owners_name === currentHome || game.guests_name === currentHome\n );\n\n if (currentGuests !== 'All')\n return filteredGames.filter(\n game => game.owners_name === currentGuests || game.guests_name === currentGuests\n );\n\n return filteredGames;\n }, [games, currentLeague, currentGameType, currentStadium, currentHome, currentGuests]);\n\n return (\n\n 
\n {isVisible && (\n {\n let tileDate = date;\n tileDate.setHours(0, tileDate.getTimezoneOffset() * -1, 0, 0);\n\n return filteredData.some(game => game.date === tileDate.toJSON().slice(0, 10))\n ? tileDate.getDay() === 0 || tileDate.getDay() === 6\n ? 'fontBold activeWeekend'\n : 'fontBold'\n : null;\n }}\n tileDisabled={({ _, date }) =>\n !filteredData.some(game => {\n let tileDate = date;\n tileDate.setHours(0, tileDate.getTimezoneOffset() * -1, 0, 0);\n\n return game.date === tileDate.toJSON().slice(0, 10);\n })\n }\n />\n )}\n
\n );\n};\n\nexport default ContentGridCalendar;\n","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAA7AAAAOwBeShxvQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAKESURBVFiF7dc9aFRBEAfwnyYWCURMEwtJoZUpFEEQ/CgEA9qZRjCCqI0pRBAEC220EoOIVn4VB5aChY1gYSIIVhYa0UJExCBiVAJGET9Qi53n7b08yHnRw8I/LPdm9j+zc7uzb+Z1mI1OjGA3ZjBZwfkdbMJhLMd9fJ/L4DSmMYavWD2PxdeEj1vhc7RM6MQi9Ge67TiBsxHxLnxoMYBhPMIWHMIBXMjmJ+EcfpTG3iCMV8z97hgPX3sr5s51YjGu4UgQb2JJPPfiFC61uAP7sS3z9RRbQx6NtdViyCaKHPiCVS0uTsqfz+FrWvozBWqodVYYHcUzrMQxPJxHABPYjJ24istlwoKIpEf9CNqFUemaq5l/orU6fh1BnoTtwijpPUDaimdtDmAGFjZBXIo9Up4U2KHxDbk6dAV6wmZpptuGjWXnzQSwXroNAyF3hTyccYZD1xXyQMjrM84RqcY0oLgFsK+JYP4kajS3A38VVQEcxPFMXovzWBHyIpwx+wjOxJzgng/bAsfD95wBtBX/c6AqgCtS9SowhCdYF3KX1KiczDgnQ1dcw3VhM5RxxsJ3Azoy0vX4ncI9qXaTyugr3JHK8ze8w228Ds4bPMaDkN/jbXA+hu417qr3mEP8oznQI3UvBRZq7BmhT327xXNfidNf8t+r8XX+y3kZN6RGosA+vMBgyN3SNuZt2qXQdYc8GDb5rk6E7wZUHUGPVCWnsyCXafw+6JOq2aeQu8JuKuP046X6d0CvlD8zIdeol+McMyX5u9kfJ1Ml+VMWTIGyzbQKVB3BRvVOltbKcdOoCmBEY3fUSjluGv/kNWwriiTcgIttXnsD7nZI2ds9B/lv4Dmu/gQJWb5CI6E/vQAAAABJRU5ErkJggg==\"","import cl from './ContentCalendar.module.scss';\n\nconst DAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];\nconst MONTHS = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];\n\nconst ContentCalendarListItem = ({ date, handleClick, ...props }) => {\n return (\n {DAYS[date.getDay()]}
\n{`${MONTHS[date.getMonth()]} ${date.getDate()}`}
\n \n )}\n\n
\n );\n};\n\nexport default forwardRef(ContentCalendarList);\n","import Arrow from 'components/UI/buttons/Arrow/Arrow';\nimport { useEffect, useLayoutEffect, useRef, useMemo } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { setCurrentDate } from 'redux/sharedReducer';\nimport cl from './ContentCalendar.module.scss';\nimport ContentCalendarList from './ContentCalendarList';\nimport classNames from 'classnames';\n\nconst ContentCalendar = ({ onChange, calendarScroll }) => {\n const ref = useRef();\n const timeoutRef = useRef(null);\n\n const currentDate = useSelector(state => state.shared.currentDate);\n const isMobile = useSelector(state => state.shared.isMobile);\n const games = useSelector(state => state.games.games);\n const currentLeague = useSelector(state => state.games.currentLeague);\n const currentGameType = useSelector(state => state.shared.currentGameType);\n const currentStadium = useSelector(state => state.games.currentStadium);\n const currentHome = useSelector(state => state.games.currentHome);\n const currentGuests = useSelector(state => state.games.currentGuests);\n const currentYear = useSelector(state => state.shared.currentYear);\n\n const dispatch = useDispatch();\n\n useLayoutEffect(() => {\n ref.current.style.transition = 'none';\n ref.current.style.transform = `translate(${isMobile ? 43 : 0}px)`;\n\n setTimeout(() => {\n if (ref.current) {\n ref.current.style.transition = 'all .25s';\n timeoutRef.current = null;\n }\n }, 30);\n }, [currentDate, isMobile]);\n\n useEffect(() => {\n if (!calendarScroll.isScroll) return;\n\n ref.current.style.transform = `translate(${\n (isMobile ? 43 : 0) - (isMobile ? 43 : 60.5) * calendarScroll.amount\n }px)`;\n }, [calendarScroll, isMobile]);\n\n useEffect(() => {\n let filteredGames = games.filter(\n game =>\n (currentStadium !== 'All' ? game.stadium_name === currentStadium : true) &&\n (currentLeague.id !== -1 ? game.league_id === currentLeague.id : currentGameType === game.game_type)\n // \t&&\n // (currentHome !== 'All' ? game.owners_name === currentHome : true) &&\n // (currentGuests !== 'All' ? game.guests_name === currentGuests : true)\n );\n\n if (currentHome !== 'All' && currentGuests !== 'All') {\n filteredGames = filteredGames.filter(\n game =>\n (game.owners_name === currentHome || game.owners_name === currentGuests) &&\n (game.guests_name === currentHome || game.guests_name === currentGuests)\n );\n } else {\n filteredGames =\n currentHome !== 'All'\n ? filteredGames.filter(game => game.owners_name === currentHome || game.guests_name === currentHome)\n : currentGuests !== 'All'\n ? filteredGames.filter(\n game => game.owners_name === currentGuests || game.guests_name === currentGuests\n )\n : filteredGames;\n }\n\n const sortedDates = filteredGames\n .reduce((sum, game) => {\n sum.push(game.date);\n return sum;\n }, [])\n .sort((a, b) => (a > b ? 1 : -1));\n\n const uniqueSortedDates = Array.from(new Set(sortedDates));\n\n const isDate = uniqueSortedDates.find(date => date === new Date().toJSON().slice(0, 10));\n\n let minDateDelta = Math.abs(new Date(uniqueSortedDates[0]) - new Date());\n let minDate = new Date();\n\n if (!isDate) {\n minDate = new Date(uniqueSortedDates[0] || new Date().toJSON().slice(0, 10));\n uniqueSortedDates.forEach(date => {\n const tempDelta = Math.abs(new Date(date) - new Date());\n if (tempDelta < minDateDelta) {\n minDate = new Date(date);\n minDateDelta = tempDelta;\n }\n });\n }\n\n !isDate ? dispatch(setCurrentDate(minDate)) : dispatch(setCurrentDate(new Date()));\n // eslint-disable-next-line\n }, [currentLeague, currentYear, games, currentHome, currentGuests, currentStadium]);\n\n let availableDates = useMemo(() => {\n const filteredGames = games.filter(\n game =>\n (currentStadium !== 'All' ? game.stadium_name === currentStadium : true) &&\n (currentLeague.id !== -1 ? game.league_id === currentLeague.id : currentGameType === game.game_type)\n // \t&&\n // (currentHome !== 'All' ? game.owners_name === currentHome : true) &&\n // (currentGuests !== 'All' ? game.guests_name === currentGuests : true)\n );\n\n if (currentHome !== 'All' && currentGuests !== 'All') {\n return filteredGames.filter(\n game =>\n (game.owners_name === currentHome || game.owners_name === currentGuests) &&\n (game.guests_name === currentHome || game.guests_name === currentGuests)\n );\n }\n\n if (currentHome !== 'All')\n return filteredGames.filter(\n game => game.owners_name === currentHome || game.guests_name === currentHome\n );\n\n if (currentGuests !== 'All')\n return filteredGames.filter(\n game => game.owners_name === currentGuests || game.guests_name === currentGuests\n );\n\n return filteredGames;\n }, [games, currentLeague, currentGameType, currentStadium, currentHome, currentGuests]);\n\n availableDates = availableDates\n .reduce((sum, game) => {\n sum.push(game.date);\n return sum;\n }, [])\n .sort((a, b) => (a > b ? 1 : -1));\n\n availableDates = Array.from(new Set(availableDates));\n\n const handleDateClick = date => () => {\n if (timeoutRef.current !== null) return;\n\n const currentDateIndex = availableDates.findIndex(\n availDate => availDate === currentDate.toJSON().slice(0, 10)\n );\n const targetDateIndex = availableDates.findIndex(availDate => availDate === date.toJSON().slice(0, 10));\n\n const daysDelta = targetDateIndex - currentDateIndex;\n ref.current.style.transform = `translate(${(isMobile ? 43 : 0) - (isMobile ? 43 : 60.5) * daysDelta}px)`;\n timeoutRef.current = setTimeout(() => {\n onChange(date);\n }, 350); //250\n };\n\n const handleArrowClick = dir => () => {\n const currentDateIndex = availableDates.findIndex(\n availDate => availDate === currentDate.toJSON().slice(0, 10)\n );\n const targetDate = availableDates[currentDateIndex + (dir === 'right' ? 1 : -1)];\n\n targetDate && handleDateClick(new Date(targetDate))();\n };\n\n //Arrow classes handling\n const leftArrowClasses = classNames(cl.arrow, {\n [cl.hidden]: availableDates.length === 0 || availableDates[0] === currentDate.toJSON().slice(0, 10)\n });\n const rightArrowClasses = classNames(cl.arrow, {\n [cl.hidden]:\n availableDates.length === 0 || availableDates.slice(-1)[0] === currentDate.toJSON().slice(0, 10)\n });\n return (\n - \n {dates.map((date, i) => {\n const itemStyles =\n date === null\n ? { opacity: 0 }\n : currentDate.toDateString() === date.toDateString()\n ? { fontWeight: 'bold', color: 'black' }\n : null;\n return
\n
\n );\n};\n\nexport default ContentCalendar;\n","import React, { useState } from 'react';\nimport cl from './ContentTable.module.scss';\nimport ContentGridCalendar from '../ContentGridCalendar/ContentGridCalendar';\nimport ContentCalendar from '../ContentCalendar/ContentCalendar';\nimport { setCurrentDate } from 'redux/sharedReducer';\nimport { useSelector, useDispatch } from 'react-redux';\n\nconst ContentCalendars = () => {\n const [calendarScroll, setCalendarScroll] = useState({ isScroll: false, amount: 0 });\n\n const currentDate = useSelector(state => state.shared.currentDate);\n const dispatch = useDispatch();\n\n const calendarChangeHandler = value => {\n let newDate = value;\n newDate.setHours(0, newDate.getTimezoneOffset() * -1, 0, 0);\n\n dispatch(setCurrentDate(newDate));\n };\n\n const gridCalendarChangeHandler = value => {\n let newDate = value;\n newDate.setHours(0, newDate.getTimezoneOffset() * -1, 0, 0);\n\n const daysDelta = (newDate - currentDate) / 1000 / 60 / 60 / 24;\n \n setCalendarScroll({ isScroll: true, amount: daysDelta < -3 ? -4 : daysDelta > 3 ? 4 : daysDelta });\n setTimeout(() => {\n dispatch(setCurrentDate(newDate));\n setCalendarScroll({ isScroll: false, amount: 0 });\n }, 250);\n };\n\n return (\n \n
\n );\n};\n\nexport default ContentCalendars;\n","import { useMemo, useState } from 'react';\nimport cl from './ContentTable.module.scss';\nimport LeagueImage from 'images/league_image.png';\nimport { useDispatch, useSelector } from 'react-redux';\nimport Dropdown from 'components/UI/dropdown/GamesDropdown/Dropdown';\nimport { getShortName } from 'utils';\nimport { setCurrentGuests, setCurrentHome } from 'redux/gamesReducer';\n\nconst Logo = () => {\n const [isLoaded, setLoaded] = useState(false);\n\n const { logo: logoUrlPart } = useSelector(state => state.games.currentLeague);\n\n const imgUrl = `http://baseball-gametrack.ru/api/logo/${logoUrlPart}`;\n\n const pHolderStyles = isLoaded && logoUrlPart ? { display: 'none' } : {};\n const imgStyles = !isLoaded || !logoUrlPart ? { display: 'none' } : { marginLeft: 'unset' };\n return (\n <>\n 
setLoaded(true)} />\n \n );\n};\n\nconst ContentTeam = ({ games }) => {\n const currentLeague = useSelector(state => state.games.currentLeague);\n // const leaguesImages = useSelector(state => state.games.leaguesImages);\n const currentHome = useSelector(state => state.games.currentHome);\n const currentGuests = useSelector(state => state.games.currentGuests);\n\n const currentGameType = useSelector(state => state.shared.currentGameType);\n const isMobile = useSelector(state => state.shared.isMobile);\n\n const dispatch = useDispatch();\n\n const handleHomeDropdownClick = option => dispatch(setCurrentHome(option));\n const handleGuestsDropdownClick = option => dispatch(setCurrentGuests(option));\n\n const filteredHeadings = games.filter(game => {\n return currentLeague.id === -1 ? currentGameType === game.game_type : game.league_id === currentLeague.id;\n });\n\n //teamOptions calculation\n const teamOptions = useMemo(\n () =>\n Array.from(\n new Set(\n filteredHeadings.reduce(\n (sum, cur) => {\n sum.push(cur.owners_name);\n sum.push(cur.guests_name);\n return sum;\n },\n ['All']\n )\n )\n ),\n [filteredHeadings]\n );\n\n //teamOptions sorting\n useMemo(() => teamOptions.sort((a, b) => (a > b ? 1 : -1)), [teamOptions]);\n return (\n \n
\n );\n};\n\nexport default ContentTeam;\n","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAABUCAYAAAA/MEEUAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAABiiSURBVHgB1dwHsF1V1Qfw/d4LaY9QU2gJAaQoWBAsVKnBLvau4KgDOgOWUefjG0cddNRRRxkbfOCoYP10EHVAkBZFigooIEpPCC1BSCOBhJDE81v3rcvO5ebxUi7Czpy5N/ecs8/aa//Xf5W9z+tbvXr10aWULcrToK1YsaJssskm5WnQZvc1irm0+XJI+S+3VatWxWcjTxkYGCj/5TazvzxN2rx588pf//rX8nRpT5liICEP6PC5cuXK+O546KGHyu23316WLl26xjWO+v6nqo0qPWwG0tfX94TfoWPzzTcPPunv7y9z584tv/zlL8vs2bPj+te//vVl1KiWaA8//HBZtmxZmTRpUvyfwtzT69ZTxaRSIMN3aPjzn/9c5syZU3bZZZcyZsyYMnny5LLFFlvE+S233DIGjmOuueaastVWW5WLLrqobLrppmW33XYrL3zhC6O/Z7xi0hyYyPz5CxtFjC7XXXdD2XfffQMlN954Y5k4cWJ59atfXbbZZrsydeq0MnbsuHLTTTeV8847r+y8885xfqeddip//OMfyw477FAuvPDC8sY3vrGMHz8+lNkrJfVc9RSzePHixkxmlbvuurtsv/32MdDNNtssBgVFv/rVr8qLX/zi8ta3vrVBz5bl4osvDjN74IEHyq677lrGjRtXpk2bFoqkbKaodTPTjdV6qhiCM6Nrr702Buk7cxg7dkxZsGBBDJiiRo8eXR555JFGSQ83SlwUaJg+fXr8Dm2uee5zn1vuvffeuO7KK6/sORn31JS0VMDy5SvKzTffHAjZa6+9wgsJ6KAJp9xxxx0NIW9W7r777jA590HHY489Vv7973+XX//614EipjVhwoT4neJ61XrOMVCyfPnyNkp4noULF5RXvvKVZbvttmuuWVnOPvucUAhlLV++rOy447Q4v2TJknL//feHqS1atChIGkqgj1KRd69aT00Jh9x3330xiMawYoa53cWLH2q8zrWN0lY1SlocnGGQBj9mzLg4v2DBwubeuQ3pXlYefXRFEDEF68snxDxjTSlNwQAee2xFoMd3HOL7rbfeWv7xj3+EOYlXMtiDCCTM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\"","import React from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { setMobileTableMode } from 'redux/gamesReducer';\nimport { setSearchParam } from 'utils';\nimport cl from './ContentTable.module.scss';\n\nconst ContentTableModeLinks = () => {\n const mobileTableMode = useSelector(state => state.games.mobileTableMode);\n const dispatch = useDispatch();\n\n const handleModeClick = mode => () => {\n dispatch(setMobileTableMode(mode));\n\t\tsetSearchParam('mode', mode)\n };\n return (\n \n
\n {currentLeague.name}
\nSearch game:
\n\n
\n \n
\n VS\n \n
\n \n\t\t\t{mobileTableMode !== 'Calendar' && }\n {mobileTableMode !== 'Team tablo/Leader' && (\n \n )}\n {/* {mobileTableMode !== 'Leaders' && } */}\n
\n );\n};\n\nexport default ContentTableModeLinks;\n","import React from 'react';\nimport cl from './ContentTable.module.scss';\nimport ContentCalendars from './ContentCalendars';\nimport ContentTeam from './ContentTeam';\nimport ContentTableModeLinks from './ContentTableModeLinks';\nimport { useSelector } from 'react-redux';\n\nconst ContentTableHeader = ({ games }) => {\n const isMobile = useSelector(state => state.shared.isMobile);\n const currentLeague = useSelector(state => state.games.currentLeague);\n const mobileTableMode = useSelector(state => state.games.mobileTableMode);\n\n return (\n \n {(!isMobile || (isMobile && mobileTableMode === 'Calendar')) &&
\n );\n};\n\nexport default ContentTableHeader;\n","import classNames from 'classnames';\nimport Ellipse from 'components/UI/icons/Ellipse';\nimport React, { forwardRef } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { Link } from 'react-router-dom';\nimport { setCurrentTab } from 'redux/gameReducer';\nimport { getShortName } from 'utils';\n\nconst MONTHS = {\n '01': 'january',\n '02': 'february',\n '03': 'march',\n '04': 'april',\n '05': 'may',\n '06': 'june',\n '07': 'july',\n '08': 'august',\n '09': 'september',\n 10: 'october',\n 11: 'november',\n 12: 'december'\n};\n\nconst WEEK_DAYS = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];\n\nconst ItemLinks = ({ game, linksClass }) => {\n const dispatch = useDispatch();\n\n const handleLinkClick = tabTitle => () => dispatch(setCurrentTab(tabTitle));\n return (\n Team tablo/Leader
\n // {mobileTableMode === 'Team tablo' ? 'Team tablo' : 'Leaders'}
\n )}\n {currentLeague.id !== -1 && \n
\n );\n};\n\nconst ContentTableListItem = ({ game, index, arr, cl }, ref) => {\n const leagues = useSelector(state => state.games.leagues);\n const isMobile = useSelector(state => state.shared.isMobile);\n const currentLeague = useSelector(state => state.games.currentLeague);\n const currentGameType = useSelector(state => state.shared.currentGameType);\n const currentDate = useSelector(state => state.shared.currentDate);\n const scrollItemRef = ref;\n\n const isDate = index === 0 || arr[index].date !== arr[index - 1].date;\n const isActive = currentDate.toJSON().slice(0, 10) === game.date;\n const weekDay = ', ' + WEEK_DAYS[new Date(game.date).getDay()];\n const dataBefore = isDate ? game.date.slice(8, 10) + ' ' + MONTHS[game.date.slice(5, 7)] + weekDay : null;\n\n const gameStartFullTime = new Date(game.date + ' ' + game.start_time);\n\n const tableRowClasses = classNames(cl.tableRow, {\n [cl.withDate]: isDate,\n [cl.active]: isActive,\n [cl.paddingRightOne]: currentLeague.id !== -1\n });\n\n const completionClasses = classNames(cl.completionSign, {\n [cl.completedGame]: game.end_status,\n [cl.scheduledGame]: !game.end_status && gameStartFullTime > new Date(),\n [cl.incompletedGame]: !game.end_status && gameStartFullTime <= new Date()\n });\n return (\n \n {game.has_moments && (\n <>\n \n Box\n \n \n {game.has_videos ? 'Pitch' : 'Plays'}\n \n \n )}\n {game.has_videos && (\n \n Videos\n \n )}\n
\n {game.start_time.slice(0, 5)}
\n \n {game.stadium_name}\n {currentLeague.id === -1 && (\n / {leagues.find(league => league.id === game.league_id)?.name}\n )}\n
\n \n \n {' '}\n {getShortName(game.owners_name, isMobile ? 20 : 28)}\n \n
\n \n {game.score_owners} - {game.score_guests}\n
\n \n \n {' '}\n {getShortName(game.guests_name, isMobile ? 20 : 28)}\n \n
\n {game.inn !== null ? `${game.inn} inn` : '—'}
\n \n {game.end_status !== null ? game.end_status : (game.has_moments && gameStartFullTime <= new Date()) ? 'In progress' : ''}\n {/*
\n {currentLeague.id === -1 && {leagues.find(league => league.id === game.league_id)?.name}
}\n - \n {filteredData.map((game, index, arr) => (\n
\n \n \n
\n );\n};\n\nexport default ContentTableSubHeader;\n","import NoDataMessage from 'components/NoDataMessage/NoDataMessage';\nimport React, { useEffect, useMemo, useRef } from 'react';\nimport { useSelector } from 'react-redux';\nimport cl from './ContentTable.module.scss';\nimport ContentTableHeader from './ContentTableHeader';\nimport ContentTableList from './ContentTableList';\nimport ContentTableSubHeader from './ContentTableSubHeader';\n\nconst ContentTable = ({ games }) => {\n const currentStadium = useSelector(s => s.games.currentStadium);\n const currentLeague = useSelector(s => s.games.currentLeague);\n const currentHome = useSelector(s => s.games.currentHome);\n const currentGuests = useSelector(s => s.games.currentGuests);\n const mobileTableMode = useSelector(s => s.games.mobileTableMode);\n\n const currentGameType = useSelector(s => s.shared.currentGameType);\n const currentDate = useSelector(s => s.shared.currentDate);\n const isMobile = useSelector(s => s.shared.isMobile);\n\n const scrollItemRef = useRef(null);\n\n useEffect(() => {\n if (scrollItemRef.current === null) return;\n\n setTimeout(() => {\n if (!scrollItemRef.current) return;\n\n if (isMobile) {\n document.documentElement.scrollTop =\n scrollItemRef.current.offsetTop;\n return;\n }\n scrollItemRef.current.parentNode.scrollTop = scrollItemRef.current.offsetTop;\n }, 100);\n }, [currentDate, currentLeague, isMobile]);\n\n //Games filtering\n let filteredData = useMemo(() => {\n const filteredGames = games.filter(\n game =>\n (currentStadium !== 'All' ? game.stadium_name === currentStadium : true) &&\n (currentLeague.id !== -1 ? game.league_id === currentLeague.id : currentGameType === game.game_type)\n // \t&&\n // (currentHome !== 'All' ? game.owners_name === currentHome : true) &&\n // (currentGuests !== 'All' ? game.guests_name === currentGuests : true)\n );\n\n if (currentHome !== 'All' && currentGuests !== 'All') {\n return filteredGames.filter(\n game =>\n (game.owners_name === currentHome || game.owners_name === currentGuests) &&\n (game.guests_name === currentHome || game.guests_name === currentGuests)\n );\n }\n\n return currentHome !== 'All'\n ? filteredGames.filter(game => game.owners_name === currentHome || game.guests_name === currentHome)\n : currentGuests !== 'All'\n ? filteredGames.filter(game => game.owners_name === currentGuests || game.guests_name === currentGuests)\n : filteredGames;\n }, [games, currentStadium, currentLeague, currentGameType, currentHome, currentGuests]);\n\n //Games sorting\n filteredData = useMemo(\n () =>\n filteredData\n .sort((a, b) => (a.date > b.date ? 1 : -1))\n .sort((a, b) => (a.date === b.date && a.start_time < b.start_time ? -1 : 1)),\n [filteredData]\n );\n\n const isGamesEmpty = filteredData.length === 0;\n return (\n Time
\n \n
\n Home
\n Guests
\n Inn
\n\t\t\tStatus
\n {curLeagueId === -1 && League
}\n \n
\n );\n};\n\nexport default ContentTable;\n","import ContentSideTables from '../ContentSideTables/ContentSideTables';\nimport ContentTable from '../ContentTable/ContentTable';\nimport { useSelector } from 'react-redux';\nimport cl from './Content.module.scss';\n\nconst Content = ({ games }) => {\n const currentLeague = useSelector(state => state.games.currentLeague);\n\n return (\n \n
\n )}\n \n
\n \n
\n {children}
\n \n
\n );\n};\n\nexport default HeaderSelections;\n","import classNames from 'classnames';\nimport React from 'react';\nimport cl from './HeaderLeagues.module.scss';\n\nconst HeaderLeaguesListItem = ({ league, handleClick, currentLeague, isLoading }) => {\n const leagueName = league.name !== 'All' ? league.name : 'All leagues';\n\n const itemClasses = classNames(cl.league, {\n [cl.active]:\n currentLeague.id === undefined\n ? league.name === currentLeague.name || league.name === currentLeague.title\n : league.id === currentLeague.id,\n [cl.lightGray]: isLoading\n });\n return (\n \n
\n - \n
- \n Baseball\n \n
- \n Softball\n \n
{currentLeague.id !== -1 &&
\n \n
\n \n
\n - \n {leagues.map(league => (\n
\n
\n );\n};\n\nexport default HeaderLeagues;\n","import React from 'react';\nimport cl from './Header.module.scss';\nimport HeaderWrapper from 'components/HeaderWrapper/HeaderWrapper';\nimport HeaderSelections from '../HeaderSelections/HeaderSelections';\nimport HeaderLeagues from '../HeaderLeagues/HeaderLeagues';\n\nconst Header = () => (\n \n
\n {getShortName(teamName, 24)}
;\n};\n\nexport default HeaderSelectionsTeamName;\n","const defaultState = {\n teamData: [],\n\tmobileTableMode: 'Players'\n};\n\nconst SET_TEAM_DATA = 'SET_TEAM_DATA';\nconst SET_MOBILE_TEAM_GAMES_TABLE_MODE = 'SET_MOBILE_TEAM_GAMES_TABLE_MODE';\n\nexport const teamGamesReducer = (state = defaultState, action) => {\n switch (action.type) {\n case SET_TEAM_DATA:\n return { ...state, teamData: action.payload };\n case SET_MOBILE_TEAM_GAMES_TABLE_MODE:\n return { ...state, mobileTableMode: action.payload };\n default:\n return state;\n }\n};\n\nexport const setTeamData = payload => ({ type: SET_TEAM_DATA, payload });\nexport const setMobileTableMode = payload => ({ type: SET_MOBILE_TEAM_GAMES_TABLE_MODE, payload });","import React from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { setMobileTableMode } from 'redux/teamGamesReducer';\n\nconst ContentHeaderModeLink = ({ title, cl }) => {\n const mobileTableMode = useSelector(state => state.teamGames.mobileTableMode);\n const dispatch = useDispatch();\n\n const handleModeClick = mode => () => dispatch(setMobileTableMode(mode));\n const getClassName = title => (mobileTableMode === title ? cl.active : null);\n\n return (\n \n );\n};\n\nexport default ContentHeaderModeLink;\n","import React from 'react';\nimport ContentHeaderModeLink from './ContentHeaderModeLink';\nimport cl from './ContentMobileHeader.module.scss';\n\nconst ContentHeaderModeLinks = () => {\n return (\n\n
\n );\n};\n\nexport default ContentHeaderModeLinks;\n","import React from 'react';\nimport ContentHeaderModeLinks from '../ContentMobileHeader/ContentHeaderModeLinks';\n\nconst HeaderSelectionsLinks = ({ wrapperClass }) => (\n \n
\n);\n\nexport default HeaderSelectionsLinks;\n","import React from 'react';\nimport cl from './RoundLoader.module.scss';\n\nconst RoundLoader = () => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n);\n\nexport default RoundLoader;\n","import React, { useState, useLayoutEffect } from 'react';\nimport TeamLogo from 'images/team_logo.png';\nimport HeaderSelectionsTeamName from './HeaderSelectionsTeamName';\nimport HeaderSelectionsLinks from './HeaderSelectionsLinks';\nimport { useSelector } from 'react-redux';\nimport { useParams } from 'react-router-dom';\nimport RoundLoader from 'components/UI/loaders/RoundLoader/RoundLoader';\n\nconst Logo = ({ cl }) => {\n const [isLoaded, setLoaded] = useState(false);\n\n const [league] = useSelector(state => state.teamGames.teamData);\n\n const { teamName } = useParams();\n\n useLayoutEffect(() => {\n setLoaded(false);\n }, [teamName]);\n\n const pHolderStyles = league.logo ? { display: 'none' } : {};\n const loaderStyles = isLoaded || !league.logo ? { display: 'none' } : {};\n const imgStyles = !isLoaded || !league.logo ? { display: 'none' } : {};\n return (\n <>\n \n 
\n setLoaded(true)}\n style={imgStyles}\n />\n
\n \n );\n};\n\nconst HeaderSelectionsTeamInfo = ({ cl }) => (\n \n
\n \n
\n);\n\nexport default HeaderSelectionsTeamInfo;\n","export default \"data:image/png;base64,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\"","import React from 'react';\nimport Dropdown from 'components/UI/dropdown/GamesDropdown/Dropdown';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { setCurrentYear, setCurrentDate } from 'redux/sharedReducer';\nimport { setCurrentLeague } from 'redux/gamesReducer';\nimport { getYears } from 'utils';\n\nconst HeaderSelectionsYears = ({yearsClass}) => {\n const currentYear = useSelector(state => state.shared.currentYear);\n\n\tconst dispatch = useDispatch();\n\n const handleClick = option => {\n const tempDate = new Date(option, 0, 1);\n tempDate.setHours(0, tempDate.getTimezoneOffset() * -1, 0, 0);\n\n dispatch(setCurrentDate(tempDate));\n dispatch(setCurrentYear(option));\n dispatch(setCurrentLeague({ id: -1, title: 'All' }));\n };\n\n\tconst yearsArr = getYears()\n return (\n \n
\n );\n};\n\nexport default HeaderSelectionsYears;\n","import React from 'react';\nimport cl from './HeaderSelections.module.scss';\nimport HeaderSelectionsTeamInfo from './HeaderSelectionsTeamInfo';\nimport HeaderSelectionsYears from './HeaderSelectionsYears';\n\nconst HeaderSelections = () => (\n \n
\n);\n\nexport default HeaderSelections;\n","import React from 'react';\nimport cl from './HeaderLeagues.module.scss';\nimport classNames from 'classnames';\n\nconst HeaderLeaguesListItem = ({ league, handleClick, currentLeague }) => {\n const leagueName = league.title !== 'All' ? league.title : 'All leagues';\n\n const leagueClasses = classNames(cl.league, {\n [cl.active]: league.id === currentLeague.id\n });\n\n return (\n - \n {leagues.map(league => (\n
\n
\n );\n};\n\nexport default HeaderLeagues;\n","import React from 'react';\nimport cl from './Header.module.scss';\nimport HeaderWrapper from 'components/HeaderWrapper/HeaderWrapper';\nimport HeaderSelections from '../HeaderSelections/HeaderSelections';\nimport HeaderLeagues from '../HeaderLeagues/HeaderLeagues';\n\nconst Header = () => (\n \n
\n \n
\n);\n\nexport default ContentPlayersTableHeader;\n","import React from 'react';\n\nconst RowPlayerHands = ({ player }) => (\n #
\n Player
\n POS
\n B/T
\n HT
\n WT
\n YOB
\n \n {player.bat_hand}/{player.throw_hand}\n
\n);\n\nexport default RowPlayerHands;\n","const defaultState = {\n playerStatsData: {},\n playerCurrentTeam: 'All teams',\n tableType: 'Batting',\n sortField: { Batting: 'AB', Fielding: 'CH', Running: 'SB', Pitching: 'GS' }\n};\n\nconst SET_PLAYER_STATS_DATA = 'SET_PLAYER_STATS_DATA';\nconst SET_PLAYER_CURRENT_TEAM = 'SET_PLAYER_CURRENT_TEAM';\nconst SET_TABLE_TYPE = 'SET_TABLE_TYPE';\nconst SET_PLAYER_SORT_FIELD = 'SET_PLAYER_SORT_FIELD';\n\nexport const playerStatsReducer = (state = defaultState, action) => {\n switch (action.type) {\n case SET_PLAYER_STATS_DATA:\n return { ...state, playerStatsData: action.payload };\n case SET_PLAYER_CURRENT_TEAM:\n return { ...state, playerCurrentTeam: action.payload };\n case SET_TABLE_TYPE:\n return { ...state, tableType: action.payload };\n case SET_PLAYER_SORT_FIELD:\n return { ...state, sortField: { ...state.sortField, [state.tableType]: action.payload } };\n default:\n return state;\n }\n};\n\nexport const setPlayerStatsData = payload => ({ type: SET_PLAYER_STATS_DATA, payload });\nexport const setPlayerCurrentTeam = payload => ({ type: SET_PLAYER_CURRENT_TEAM, payload });\nexport const setTableType = payload => ({ type: SET_TABLE_TYPE, payload });\nexport const setSortField = payload => ({ type: SET_PLAYER_SORT_FIELD, payload });\n","import React from 'react'\nimport { Link, useParams } from 'react-router-dom';\nimport { setPlayerCurrentTeam as setCurrentTeam } from 'redux/playerStatsReducer';\nimport { useDispatch } from 'react-redux';\n\nconst RowPlayerName = ({player, nameClass}) => {\n const { teamName } = useParams();\n\n const dispatch = useDispatch();\n\n\tconst handlePlayerClick = () => {\n dispatch(setCurrentTeam(teamName));\n };\n\n\treturn (\n\t\t\n \n {player.name + ' ' + player.surname}\n \n
\n\t)\n}\n\nexport default RowPlayerName","import React from 'react';\nimport RowPlayerHands from './RowPlayerHands';\nimport RowPlayerName from './RowPlayerName';\n\nconst ContentPlayersTableRow = ({ player, index, cl }) => (\n {index + 1}
\n {player.pos ?? '—'}
\n {player.height}
\n {player.weight}
\n {player.yob}
\n - \n {PLAYERS_DATA.map((player, i) => (\n
\n
\n );\n};\n\nexport default ContentPlayersTable;\n","import React from 'react';\n\nconst ContentGamesTableHeader = ({ cl }) => {\n return (\n \n
\n \n Go to Player Stat\n
\n \n \n \n
\n );\n};\n\nexport default ContentGamesTableHeader;\n","import React from 'react';\nimport { useSelector } from 'react-redux';\n\nconst MONTHS = {\n '01': 'january',\n '02': 'february',\n '03': 'march',\n '04': 'april',\n '05': 'may',\n '06': 'june',\n '07': 'july',\n '08': 'august',\n '09': 'september',\n 10: 'october',\n 11: 'november',\n 12: 'december'\n};\n\nconst RowDate = ({ date }) => {\n const isMobile = useSelector(state => state.shared.isMobile);\n\n const dateFormat = !isMobile ? MONTHS[date.slice(5, 7)].slice(0, 3) : MONTHS[date.slice(5, 7)];\n\tconst dateString = date.slice(8, 10) + ' ' + dateFormat\n\n return Data
\n Home
\n Guests
\n Inn
\n {dateString}
;\n};\n\nexport default RowDate;\n","import React from 'react'\n\nconst RowInningsInfo = ({lastInn}) => {\n\treturn (\n\t\t{lastInn !== null ? `${lastInn} inn` : '—'}
\n\t)\n}\n\nexport default RowInningsInfo","import React from 'react';\nimport { Link } from 'react-router-dom';\nimport { capitalizeFirstLetter } from 'utils';\n\nconst RowLink = ({ to, id }) => {capitalizeFirstLetter(to)};\n\nexport default RowLink;\n","import RowLink from './RowLink';\n\nconst RowLinks = ({ game }) => (\n \n
\n);\n\nexport default RowLinks;\n","import React from 'react';\n\nconst RowScores = ({ game }) => (\n \n {game.last_inn !== null && (\n <>\n
\n \n {game.homies.score} - {game.visitors.score}\n
\n);\nexport default RowScores;\n","import React from 'react';\nimport { Link, useParams } from 'react-router-dom';\nimport { getShortName } from 'utils';\n\nconst RowTeamName = ({ teamClass, teamName }) => {\n const { gameType } = useParams();\n\n return (\n \n {getShortName(teamName, 22)}\n
\n );\n};\n\nexport default RowTeamName;\n","import React from 'react';\nimport RowDate from './RowDate';\nimport RowInningsInfo from './RowInningsInfo';\nimport RowLinks from './RowLinks';\nimport RowScores from './RowScores';\nimport RowTeamName from './RowTeamName';\n\nconst ContentGamesTableRow = ({ cl, game }) => {\n return (\n - \n {games.map(game => (\n
\n
\n );\n};\n\nexport default ContentGamesTable;\n","import React from 'react';\nimport { useSelector } from 'react-redux';\nimport { Link, useParams } from 'react-router-dom';\n\nconst ContentMobileHeaderStatsLink = ({ wrapperClass }) => {\n const { teamName } = useParams();\n\n const mobileTableMode = useSelector(state => state.teamGames.mobileTableMode);\n\n const statsLink =\n mobileTableMode === 'Calendar' ? (\n Go to Team Stat\n ) : (\n Go to Player Stat\n );\n return \n \n
\n \n Go to Team Stat\n
\n {statsLink}
;\n};\n\nexport default ContentMobileHeaderStatsLink;\n","import React from 'react';\nimport ContentHeaderModeLinks from './ContentHeaderModeLinks';\nimport cl from './ContentMobileHeader.module.scss';\nimport ContentMobileHeaderStatsLink from './ContentMobileHeaderStatsLink';\n\nconst ContentMobileHeader = () => (\n \n
\n);\n\nexport default ContentMobileHeader;\n","import React from 'react';\nimport ContentPlayersTable from '../ContentPlayersTable/ContentPlayersTable';\nimport ContentGamesTable from '../ContentGamesTable/ContentGamesTable';\nimport cl from './Content.module.scss';\nimport { useSelector } from 'react-redux';\nimport ContentMobileHeader from '../ContentMobileHeader/ContentMobileHeader';\n\nconst Content = () => {\n const isMobile = useSelector(state => state.shared.isMobile);\n const mobileTableMode = useSelector(state => state.teamGames.mobileTableMode);\n\n\tconst isPlayersTable = mobileTableMode === 'Players'\n\tconst isGamesTable = mobileTableMode === 'Calendar' || !isMobile\n return (\n \n
\n \n {isMobile &&
\n \n
\n );\n};\n\nexport default HeaderSelections;\n","import classNames from 'classnames';\nimport React from 'react';\nimport cl from './HeaderLeagues.module.scss';\n\nconst HeaderLeaguesListItem = ({ league, handleClick, currentLeague, isLoading }) => {\n const leagueName = league.title !== 'All' ? league.title : 'All leagues';\n\n const itemClasses = classNames(cl.league, {\n [cl.active]: league.title === currentLeague.title || league.title === currentLeague.name,\n [cl.lightGray]: isLoading\n });\n return (\n \n \n Player\n \n \n Team\n \n
\n {statsType === 'player' && (\n \n
\n \n
\n )}\n \n
\n \n
\n \n
\n - \n {leagues\n .filter(\n league =>\n (league.type === currentGameType || league.id === -1 || league.id === -2) && league.id !== null\n )\n .map((league, index) => (\n
\n
\n );\n};\n\nexport default HeaderLeagues;\n","import React from 'react';\nimport cl from './Header.module.scss';\nimport HeaderWrapper from 'components/HeaderWrapper/HeaderWrapper';\nimport HeaderSelections from '../HeaderSelections/HeaderSelections';\nimport HeaderLeagues from '../HeaderLeagues/HeaderLeagues';\n\nconst Header = () => {\n return (\n \n
\n \n
\n );\n};\n\nexport default Dropdown;\n","import React, { useState, useEffect, useRef } from 'react';\nimport cl from './ContentTeamTable.module.scss';\nimport { Link } from 'react-router-dom';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { setCurrentCustomLeaguesForFetch, setSortDirection, setSortField } from 'redux/statsReducer';\nimport CustomLeaguesDropdown from 'components/UI/dropdown/CustomLeaguesDropdown/Dropdown';\n\nconst ContentTeamTable = ({ getTableHeaders, getTableRows, getSortedStatsData }) => {\n const [isScrollable, setIsScrollable] = useState(true);\n\n const tableMode = useSelector(state => state.stats.tableMode);\n const sortField = useSelector(state => state.stats.sortField);\n const sortDirection = useSelector(state => state.stats.sortDirection);\n const statsData = useSelector(state => state.stats.statsData);\n const currentLeague = useSelector(state => state.games.currentLeague);\n const currentGameType = useSelector(state => state.shared.currentGameType);\n const isMobile = useSelector(state => state.shared.isMobile);\n const mobileOrientation = useSelector(state => state.shared.mobileOrientation);\n const currentYear = useSelector(state => state.shared.currentYear);\n\n const currentCustomLeagues = useSelector(state => state.stats.currentCustomLeagues);\n const customStatsData = useSelector(state => state.stats.customStatsData);\n\n const dispatch = useDispatch();\n\n const headerScroll = useRef(null);\n const rowsScroll = useRef(null);\n\n useEffect(() => {\n if (rowsScroll.current === null || !isMobile) return;\n\n setTimeout(() => setIsScrollable(rowsScroll.current?.clientWidth < rowsScroll.current?.scrollWidth), 500);\n // eslint-disable-next-line\n }, []);\n\n useEffect(() => {\n if (!isMobile) return;\n\n setIsScrollable(rowsScroll.current.clientWidth < rowsScroll.current.scrollWidth);\n }, [tableMode, currentLeague.id, isMobile]);\n\n useEffect(() => {\n if (!isMobile || rowsScroll.current === null) return;\n\n setTimeout(() => {\n setIsScrollable(rowsScroll.current.clientWidth < rowsScroll.current.scrollWidth);\n }, 150);\n }, [isMobile, mobileOrientation]);\n\n const handleFieldClick = field => () => {\n sortField[tableMode] !== field\n ? dispatch(setSortField(field))\n : dispatch(setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc'));\n };\n\n const filteredStatsData =\n currentLeague.id === -2\n ? customStatsData.find(item => item.type === currentGameType)?.teams[tableMode.toLowerCase()] || []\n : currentLeague.id !== -1\n ? statsData[currentYear].find(\n item => item.title === currentLeague.name && item.type === currentGameType\n )?.teams[tableMode.toLowerCase()] || []\n : statsData[currentYear].find(item => item.title === 'All leagues' && item.type === currentGameType)\n ?.teams[tableMode.toLowerCase()] || [];\n\n const leftHeaderStyles = !isScrollable ? { borderRight: 'none', boxShadow: 'none' } : null;\n\n // Mobile render\n if (isMobile) {\n return (\n \n {title}\n
\n {isOpen && (\n \n
\n \n
\n )}\n - \n {/* {searchField && (\n
- \n
\n \n )} */}\n {filteredOptions.map((option, i) => {\n return (\n - \n
\n {option.title}
\n {/* {shortNames ? getShortName(option, shortNames) : option} */}\n \n );\n })}\n
\n \n
\n \n (headerScroll.current.scrollLeft = e.target.scrollLeft)}\n ref={rowsScroll}>\n {getSortedStatsData(filteredStatsData, sortField[tableMode], sortDirection).map((row, index) => {\n return (\n \n {getTableRows(row, cl, sortField[tableMode])}\n
\n );\n })}\n \n \n \n );\n }\n\n const leaguesDropdownOptions =\n statsData[currentYear]?.filter(({ id, type }) => id !== null && type === currentGameType) || [];\n\n const handleOkBtn = () => {\n dispatch(setCurrentCustomLeaguesForFetch(currentCustomLeagues));\n };\n\n\tconsole.log(filteredStatsData)\n // Desktop render\n return (\n \n
\n \n
\n Team
\n \n {getTableHeaders(sortField[tableMode], sortDirection, handleFieldClick, cl, {\n top: '.1rem',\n transform: 'translateX(-50%) scale(0.7)'\n })}\n
\n \n \n {getSortedStatsData(filteredStatsData, sortField[tableMode], sortDirection).map((row, index) => {\n return (\n
\n \n
\n );\n })}\n \n {row.name}\n
\n \n
\n );\n};\n\nexport default ContentTeamTable;\n","import React, { useState, useEffect, useRef } from 'react';\nimport { useSelector } from 'react-redux';\nimport Dropdown from 'components/UI/dropdown/GamesDropdown/Dropdown';\nimport { Link } from 'react-router-dom';\nimport ContentPlayerFilterField from '../ContentPlayerFilterField';\n\nconst MobileTable = ({\n cl,\n filteredStatsData,\n sortedTeamOptions,\n currentTeam,\n handleFieldClick,\n handleTeamClick,\n getTableHeaders,\n getTableRows,\n getSortedStatsData\n}) => {\n const [isScrollable, setIsScrollable] = useState(true);\n\n const headerScroll = useRef(null);\n const rowsScroll = useRef(null);\n\n const playerFilter = useSelector(state => state.stats.statsPlayerFilterValue);\n const isMobile = useSelector(state => state.shared.isMobile);\n const mobileOrientation = useSelector(state => state.shared.mobileOrientation);\n const tableMode = useSelector(state => state.stats.tableMode);\n const currentLeague = useSelector(state => state.games.currentLeague);\n const sortField = useSelector(state => state.stats.sortField);\n const sortDirection = useSelector(state => state.stats.sortDirection);\n\n useEffect(() => {\n if (rowsScroll.current === null || !isMobile) return;\n\n setTimeout(() => setIsScrollable(rowsScroll.current?.clientWidth < rowsScroll.current?.scrollWidth), 500);\n // eslint-disable-next-line\n }, []);\n\n useEffect(() => {\n if (!isMobile) return;\n\n setIsScrollable(rowsScroll.current.clientWidth < rowsScroll.current.scrollWidth);\n }, [tableMode, currentLeague.id, isMobile]);\n\n useEffect(() => {\n if (!isMobile || rowsScroll.current === null) return;\n\n setTimeout(() => {\n rowsScroll.current !== null &&\n setIsScrollable(rowsScroll.current.clientWidth < rowsScroll.current.scrollWidth);\n }, 150);\n }, [isMobile, mobileOrientation]);\n\n const leftHeaderStyles = !isScrollable ? { borderRight: 'none', boxShadow: 'none' } : null;\n\n return (\n \n
\n {currentLeague.id === -2 && (\n \n
\n Team
\n {getTableHeaders(sortField[tableMode], sortDirection, handleFieldClick, cl)}\n - \n {getSortedStatsData(filteredStatsData, sortField[tableMode], sortDirection).map((row, index) => {\n return (\n
- \n \n\n {getTableRows(row, cl, sortField[tableMode])}\n \n );\n })}\n
\n {filteredStatsData.length !== 0 || playerFilter === '' ? (\n <>\n (headerScroll.current.scrollLeft = e.target.scrollLeft)}\n ref={rowsScroll}>\n {getSortedStatsData(filteredStatsData, sortField[tableMode], sortDirection).map(\n (row) => {\n return (\n \n
\n );\n }\n )}\n \n \n \n ) : (\n \n
\n \n
\n Players
\n \n
\n Team
\n {getTableHeaders(sortField[tableMode], sortDirection, handleFieldClick, cl, {\n top: '.1rem',\n transform: 'translateX(-50%) scale(0.7)'\n })}\n \n \n {getSortedStatsData(filteredStatsData, sortField[tableMode], sortDirection).map(\n (row) => (\n
\n \n
\n )\n )}\n \n \n {' '}\n \n {row.name} {row.surname}\n \n \n
\n \n {row.teams\n .reduce((sum, team) => {\n sum.push(team.name.slice(0, 2).toUpperCase());\n return sum;\n }, [])\n .join(' / ')}\n
\n {getTableRows(row, cl, sortField[tableMode])}\n No players found.
\n )}\n\n
\n \n );\n};\n\nexport default MobileTable;\n","import React, { useState, useMemo } from 'react';\nimport cl from './ContentPlayerTable.module.scss';\nimport { Link } from 'react-router-dom';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { getSearchParam, getShortName, setSearchParam } from 'utils';\nimport Dropdown from 'components/UI/dropdown/GamesDropdown/Dropdown';\nimport CustomLeaguesDropdown from 'components/UI/dropdown/CustomLeaguesDropdown/Dropdown';\nimport { setCurrentCustomLeaguesForFetch, setSortDirection, setSortField } from 'redux/statsReducer';\nimport ContentPlayerFilterField from './ContentPlayerFilterField';\nimport MobileTable from './MobileTable/MobileTable';\n\nconst ContentPlayerTable = ({ getTableHeaders, getTableRows, getSortedStatsData }) => {\n const [currentTeam, setCurrentTeam] = useState(getSearchParam('team') || 'All');\n\n const currentCustomLeagues = useSelector(state => state.stats.currentCustomLeagues);\n const customStatsData = useSelector(state => state.stats.customStatsData);\n\n const isMobile = useSelector(state => state.shared.isMobile);\n const currentGameType = useSelector(state => state.shared.currentGameType);\n const currentYear = useSelector(state => state.shared.currentYear);\n\n const tableMode = useSelector(state => state.stats.tableMode);\n const sortField = useSelector(state => state.stats.sortField);\n const sortDirection = useSelector(state => state.stats.sortDirection);\n const statsData = useSelector(state => state.stats.statsData);\n const playerFilter = useSelector(state => state.stats.statsPlayerFilterValue);\n\n const currentLeague = useSelector(state => state.games.currentLeague);\n\n const dispatch = useDispatch();\n\n const handleTeamClick = team => {\n setCurrentTeam(team);\n setSearchParam('team', team);\n };\n\n const handleFieldClick = field => () => {\n sortField[tableMode] !== field\n ? dispatch(setSortField(field))\n : dispatch(setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc'));\n };\n\n let filteredStatsData = useMemo(\n () =>\n currentLeague.id === -2\n ? customStatsData.find(item => item.type === currentGameType)?.players[tableMode.toLowerCase()] || []\n : currentLeague.id !== -1\n ? statsData[currentYear]?.find(\n item =>\n (item.title === currentLeague.name || item.title === currentLeague.title) &&\n item.type === currentGameType\n )?.players[tableMode.toLowerCase()] || []\n : statsData[currentYear]?.find(item => item.title === 'All leagues' && item.type === currentGameType)\n ?.players[tableMode.toLowerCase()] || [],\n\n [\n currentLeague.id,\n currentLeague.name,\n currentLeague.title,\n customStatsData,\n statsData,\n currentYear,\n tableMode,\n currentGameType\n ]\n );\n\n const teamOptions = useMemo(\n () =>\n Array.from(\n new Set(\n filteredStatsData.reduce((sum, cur) => {\n cur.teams.forEach(team => sum.push(team.name));\n return sum;\n }, [])\n )\n ),\n [filteredStatsData]\n );\n\n const sortedTeamOptions = useMemo(() => {\n const sortedTeamsArr = teamOptions.sort((a, b) => (a > b ? 1 : -1));\n sortedTeamsArr.unshift('All');\n\n return sortedTeamsArr;\n }, [teamOptions]);\n\n //Filtering by team\n filteredStatsData = useMemo(\n () =>\n currentTeam !== 'All'\n ? filteredStatsData.filter(player => player.teams.find(team => team.name === currentTeam))\n : filteredStatsData,\n [filteredStatsData, currentTeam]\n );\n\n const filterArr = playerFilter.split(' ');\n filteredStatsData =\n playerFilter !== ''\n ? filteredStatsData.filter(player => {\n return filterArr.reduce((sum, word) => {\n if (\n !(\n player.name.slice(0, word.length).toLowerCase() === word.toLowerCase() ||\n player.surname.slice(0, word.length).toLowerCase() === word.toLowerCase()\n )\n ) {\n sum = false;\n }\n return sum;\n }, true);\n })\n : filteredStatsData;\n\n const leaguesDropdownOptions =\n statsData[currentYear]?.filter(({ id, type }) => id !== null && type === currentGameType) || [];\n\n // Mobile render\n if (isMobile) {\n return (\n \n {filteredStatsData.length !== 0 || playerFilter === '' ? (\n
\n );\n};\n\nexport default ContentPlayerTable;\n","import React from 'react';\nimport SortArrows from '../icons/SortArrows/SortArrows';\nimport cl from './SortField.module.scss';\n\nconst SortField = ({\n sortField,\n sortDirection,\n handleClick,\n addedClass = null,\n renamedField = null,\n arrowStyles = null,\n noAction = false,\n children\n}) => {\n const isActive = sortField === (renamedField || children);\n const classes = [cl.cell, addedClass];\n const isArrows = isActive && !noAction;\n isActive && !noAction && classes.push(cl.active);\n noAction && classes.push(cl.defaultCursor);\n\n return (\n \n
\n ) : (\n \n \n
\n \n
\n {getTableHeaders(sortField[tableMode], sortDirection, handleFieldClick, cl)}\n - \n {getSortedStatsData(filteredStatsData, sortField[tableMode], sortDirection).map((row, index) => {\n return (\n
- \n \n \n {' '}\n \n {row.name} {row.surname}\n \n \n\n\n \n {getShortName(row.teams[0].name, row.teams[1] ? 12 : 28)}\n \n {row.teams[1] && (\n <>\n /{' '}\n \n {getShortName(row.teams[1].name, 12)}\n \n \n )}\n {row.teams[2] && (\n <>\n /{' '}\n \n {row.teams[2].name}\n \n \n )}\n\n {getTableRows(row, cl, sortField[tableMode])}\n \n );\n })}\n
No players found.
\n )}\n\n {children}\n {isArrows && (\n
\n );\n};\n\nexport default SortField;\n","import React from 'react';\nimport cl from './ActiveBodyCell.module.scss';\nimport classNames from 'classnames';\n\nconst ActiveBodyCell = ({\n sortField,\n addedClass = null,\n row,\n fixed = null,\n noAction = false,\n currentGameType = null,\n isCustomLeagues = null,\n\tstatsType = null,\n children\n}) => {\n const isRow = row !== undefined;\n\n let classes, cellValue;\n\n if (isRow) {\n classes = classNames(addedClass, {\n [cl.activeCell]: sortField === children && !noAction\n });\n\n cellValue =\n row[children] < 0\n ? '—'\n : row[children] === 'inf' || row[children] === 'INF'\n ? 'INF'\n : fixed\n ? Number(row[children]).toFixed(fixed)\n : children === 'G' && isCustomLeagues && statsType !== 'player'\n ? row[children][currentGameType]\n : row[children];\n }\n\n return <>{isRow && \n
\n )}\n {cellValue}
};\n};\n\nexport default ActiveBodyCell;\n","import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport cl from './Content.module.scss';\nimport { useParams } from 'react-router-dom';\nimport ContentTeamTable from '../ContentTeamTable/ContentTeamTable';\nimport ContentPlayerTable from '../ContentPlayerTable/ContentPlayerTable';\nimport SortField from 'components/UI/sortField/SortField';\nimport { useDispatch, useSelector } from 'react-redux';\nimport ActiveBodyCell from 'components/UI/ActiveBodyCell/ActiveBodyCell';\nimport {\n setCurrentCustomLeagues,\n setCurrentCustomLeaguesForFetch,\n setCustomStatsData\n} from 'redux/statsReducer';\nimport { axiosCancelToken, axiosInstance } from 'axios-instance';\nimport Loader from 'components/UI/loaders/Loader/Loader';\n\nconst Content = () => {\n const { statsType } = useParams();\n\n const tableMode = useSelector(state => state.stats.tableMode);\n\n const currentGameType = useSelector(state => state.shared.currentGameType);\n const currentYear = useSelector(state => state.shared.currentYear);\n const currentLeague = useSelector(state => state.games.currentLeague);\n\n const cancelStatsTokenRef = useRef();\n const [isStatsLoading, setIsStatsLoading] = useState(true);\n // const [loadedPercents, setLoadedPercents] = useState(null);\n const [error, setError] = useState('');\n const currentCustomLeaguesForFetch = useSelector(state => state.stats.currentCustomLeaguesForFetch);\n\n const dispatch = useDispatch();\n\n // !Custom data fetching\n\n const refactorCustomData = customData => {\n return customData.map(statsByType => {\n const playersFielding = statsByType.players.fielding.reduce((sum, player, index) => {\n sum.push({ ...player, ...statsByType.players.running[index] });\n return sum;\n }, []);\n const teamsFielding = statsByType.teams.fielding.reduce((sum, player, index) => {\n sum.push({ ...player, ...statsByType.teams.running[index] });\n return sum;\n }, []);\n\n return {\n ...statsByType,\n players: {\n batting: statsByType.players.batting,\n pitching: statsByType.players.pitching,\n 'fielding / running': playersFielding\n },\n teams: {\n batting: statsByType.teams.batting,\n pitching: statsByType.teams.pitching,\n 'fielding / running': teamsFielding\n }\n };\n });\n };\n\n const fetchCustomStats = useCallback(async () => {\n cancelStatsTokenRef.current = axiosCancelToken.source();\n\n try {\n setIsStatsLoading(true);\n\n const response = await axiosInstance.get(\n `/custom_leagues_stats?leagues=${\n currentCustomLeaguesForFetch.length > 0 ? currentCustomLeaguesForFetch.join(',') : 0\n }`,\n {\n cancelToken: cancelStatsTokenRef.current.token,\n // timeout: 10000,\n // onDownloadProgress: ({ total, loaded }) => setLoadedPercents((loaded * 100) / total)\n }\n );\n\n setError('');\n dispatch(setCustomStatsData(refactorCustomData(response.data)));\n\n return response;\n } catch (err) {\n if (err.message === null) return;\n console.log(err.message);\n setError(err.message);\n } finally {\n setIsStatsLoading(false);\n }\n }, [dispatch, currentCustomLeaguesForFetch]);\n //!\n\n useLayoutEffect(() => {\n dispatch(setCurrentCustomLeagues([]));\n dispatch(setCurrentCustomLeaguesForFetch([]));\n }, [currentGameType, currentYear, dispatch]);\n\n useLayoutEffect(() => {\n if (currentLeague.id !== -2) return;\n\n fetchCustomStats();\n }, [currentLeague.id, fetchCustomStats]);\n\n useEffect(() => {\n return () => {\n currentLeague.id === -2 && cancelStatsTokenRef.current?.cancel();\n };\n }, [currentLeague.id]);\n\n const getTableHeaders = (sortField, sortDirection, handleFieldClick, cl, arrowStyles = null) =>\n tableMode === 'Batting' ? (\n <>\n \n
\n {contentTable}
\n \n setLoaded(true)}\n onError={() => setError(true)}\n style={imgStyles}\n />\n 
\n
\n \n );\n};\n\nconst HeaderSelections = () => {\n const { playerYears, setPlayerYears, calculateTeamsArray } = useContext(PlayerYearsContext);\n\n const firstMountRef = useRef(true);\n\n const {\n playerStatsData: statsData,\n playerCurrentTeam: currentTeam,\n tableType\n } = useSelector(state => state.playerStats);\n const isMobile = useSelector(state => state.shared.isMobile);\n const currentLeague = useSelector(state => state.games.currentLeague);\n\n const dispatch = useDispatch();\n\n useEffect(() => {\n const teamsArray = calculateTeamsArray(tableType);\n\n if (firstMountRef.current === true) {\n firstMountRef.current = false;\n\n if (currentTeam !== null && teamsArray.length > 1) return;\n }\n dispatch(setCurrentTeam(teamsArray.length > 1 ? 'All teams' : teamsArray[0]));\n // eslint-disable-next-line\n }, [playerYears]);\n\n const handleYearClick = option => {\n setPlayerYears(option);\n\n dispatch(setCurrentLeague({ id: -1, name: 'All', title: 'All' }));\n\n if (option === 'All years') return;\n\n const tempDate = new Date(option, 0, 1);\n tempDate.setHours(0, tempDate.getTimezoneOffset() * -1, 0, 0);\n\n dispatch(setCurrentDate(tempDate));\n dispatch(setCurrentYear(option));\n };\n\n const handleTeamClick = team => {\n dispatch(setCurrentTeam(team));\n };\n\n const teamsArray = calculateTeamsArray(tableType);\n teamsArray.length > 1 && teamsArray.unshift('All teams');\n\n const handleTableOptionClick = option => {\n const teamsArray = calculateTeamsArray(option);\n\n dispatch(setCurrentTeam(teamsArray.length > 1 ? 'All teams' : teamsArray[0]));\n dispatch(setTableType(option));\n };\n\n //Table options calculating\n function getSortedTableOptions() {\n const filteredLeagues =\n playerYears === 'All years'\n ? currentTeam === 'All teams'\n ? statsData.leagues.filter(league => league.teams.find(team => team[tableType.toLowerCase()]))\n : statsData.leagues.filter(league =>\n league.teams.find(team => team.name === currentTeam && team[tableType.toLowerCase()])\n )\n : currentTeam === 'All teams'\n ? statsData.leagues.filter(\n league => league.year === playerYears && league.teams.find(team => team[tableType.toLowerCase()])\n )\n : statsData.leagues.filter(\n league =>\n league.year === playerYears &&\n league.teams.find(team => team.name === currentTeam && team[tableType.toLowerCase()])\n );\n\n const selectedLeague = statsData.leagues.find(league => league.id === currentLeague.id);\n\n const options = [];\n const anotherTableType =\n tableType === 'Batting' || tableType === 'Fielding' || tableType === 'Running' ? 'Pitching' : 'Batting';\n\n //All leagues\n if (currentLeague.id === -1) {\n const anotherTableTypeFilteredLeagues =\n playerYears === 'All years'\n ? currentTeam === 'All teams'\n ? statsData.leagues.filter(league =>\n league.teams.find(team => team[anotherTableType.toLowerCase()])\n )\n : statsData.leagues.filter(league =>\n league.teams.find(team => team.name === currentTeam && team[anotherTableType.toLowerCase()])\n )\n : currentTeam === 'All teams'\n ? statsData.leagues.filter(\n league =>\n league.year === playerYears && league.teams.find(team => team[anotherTableType.toLowerCase()])\n )\n : statsData.leagues.filter(\n league =>\n league.year === playerYears &&\n league.teams.find(team => team.name === currentTeam && team[anotherTableType.toLowerCase()])\n );\n\n if (filteredLeagues.length > 0) {\n if (tableType === 'Pitching') {\n options.push('Pitching');\n } else {\n options.push('Batting');\n options.push('Fielding');\n options.push('Running');\n }\n }\n if (anotherTableTypeFilteredLeagues.length > 0) {\n if (anotherTableType === 'Pitching') {\n options.push('Pitching');\n } else {\n if (options.length > 0) {\n options.unshift('Running');\n options.unshift('Fielding');\n options.unshift('Batting');\n } else {\n options.push('Batting');\n options.push('Fielding');\n options.push('Running');\n }\n }\n }\n\n return options;\n }\n\n //Selected league\n const filteredLeague = selectedLeague.teams.find(team => team.name === currentTeam);\n\n if (filteredLeague) {\n if (filteredLeague.batting) {\n options.push('Batting');\n options.push('Fielding');\n options.push('Running');\n }\n filteredLeague.pitching && options.push('Pitching');\n } else {\n if (selectedLeague.teams.find(team => team.batting)) {\n options.push('Batting');\n options.push('Fielding');\n options.push('Running');\n }\n selectedLeague.teams.find(team => team.pitching) && options.push('Pitching');\n }\n\n return options;\n }\n\n const yearsArr = getYears();\n yearsArr.unshift('All years');\n return (\n \n
\n );\n};\n\nexport default HeaderSelections;\n","import React from 'react';\nimport cl from './HeaderLeagues.module.scss';\n\nconst HeaderLeaguesListItem = ({ league, handleClick, currentLeague }) => {\n\tconst leagueName = league.title !== 'All' ? league.title : 'All leagues';\n return (\n \n
\n \n {statsData.name}\n
\n {statsData.surname}
\n\n
\n \n
\n \n {teamsArray.length > 1 ? (\n
\n {isMobile && (\n \n {getSortedTableOptions().length > 1 ? (\n
\n )}\n - \n {leagues.map((league, index) => (\n
\n
\n );\n};\n\nexport default HeaderLeagues;\n","import React from 'react';\nimport cl from './Header.module.scss';\nimport HeaderWrapper from 'components/HeaderWrapper/HeaderWrapper';\nimport HeaderSelections from '../HeaderSelections/HeaderSelections';\nimport HeaderLeagues from '../HeaderLeagues/HeaderLeagues';\n\nconst Header = () => {\n return (\n \n
\n \n
\n );\n};\n\nexport default ContentMobilePlayerInfo;\n","import { PlayerYearsContext } from 'context';\nimport { createContext, useContext, useEffect, useState, useRef } from 'react';\nimport { useSelector } from 'react-redux';\nimport cl from './PlayerStatsAnimationContext.module.scss';\n\nconst ctx = createContext();\n\nconst PlayerStatsAnimationProvider = ({ children }) => {\n const [valueCoef, setValueCoef] = useState(0);\n\n const wrapperRef = useRef(null);\n const firstMountRef = useRef(true);\n\n const { playerYears } = useContext(PlayerYearsContext);\n\n const { playerCurrentTeam: currentTeam } = useSelector(s => s.playerStats);\n const { currentLeague } = useSelector(s => s.games);\n\n useEffect(() => {\n if (wrapperRef.current === null) return;\n\n let observer = new IntersectionObserver(entries => {\n entries.forEach(entry => {\n const { isIntersecting } = entry;\n\n if (isIntersecting) {\n setValueCoef(prev => prev + 0.01);\n } else {\n setValueCoef(0);\n }\n });\n });\n observer.observe(wrapperRef.current);\n\n return observer.disconnect;\n }, []);\n\n useEffect(() => {\n if (valueCoef === 0) return;\n\n const getTimeoutDelay = coef => {\n if (coef < 0.5) return 9;\n if (coef < 0.75) return 6;\n return 3;\n };\n\n const getValueAddition = coef => {\n if (coef < 0.5) return 0.03;\n if (coef < 0.75) return 0.02;\n return 0.01;\n };\n\n const timeout = setTimeout(() => {\n setValueCoef(prev => (prev < 1 ? prev + getValueAddition(valueCoef) : 1));\n }, getTimeoutDelay(valueCoef));\n\n return () => {\n clearTimeout(timeout);\n };\n }, [valueCoef]);\n\n useEffect(() => {\n if (firstMountRef.current === true) {\n firstMountRef.current = false;\n return;\n }\n\n setValueCoef(0);\n\n setTimeout(() => {\n setValueCoef(prev => prev + 0.01);\n }, 10);\n }, [playerYears, currentTeam, currentLeague.id]);\n\n return (\n \n\t\t\t\t
\n \n
\n \n {statsData.name} {statsData.surname}\n
\n \n {statsData.pos || '—'} | B/T: {statsData.bat_hand}/{statsData.throw_hand} | {statsData.height}{' '}\n {statsData.weight}LBS | Age: {new Date().getFullYear() - statsData.yob}\n
\n\n {children}\n
\n \n \n {animatedValueLeft}\n
\n {title}
\n \n
\n );\n};\n\nconst TotalInfo = ({ data }) => {\n const itemsArr = [\n { par1: 'IP', par2: 'G' },\n { par1: 'Pitches', par2: 'Batters' },\n { par1: 'RHB', par2: 'LHB' }\n ];\n return (\n {title}
\n{formattedValue}
\n\n
\n );\n};\n\nexport default TotalInfo","import cl from '../Banner.module.scss';\nimport { usePlayerStatsAnimationCtx } from 'context/PlayerStatsAnimationContext/PlayerStatsAnimationContext';\n\nconst CommonGroupItem = ({ item, parent, staticTitle }) => {\n const { par1, par2 } = item;\n\n const valueCoef = usePlayerStatsAnimationCtx();\n\n const modifiedStaticTitle = par1 === 'GO' && par2 === 'FC' ? 'Outs' : staticTitle;\n\n const {\n abs: absValue,\n abs_rel: absRelValue,\n rel: value\n } = par2 !== null ? parent[`${par1}/${par2}`] : parent[par1];\n\n let title = par2 !== null ? `${par1} & ${par2}` : par1;\n title += ` (${absValue} / ${absRelValue} ${modifiedStaticTitle})`;\n\n const formattedValue = value !== '–' ? value : '—';\n\n let animatedValue = '—';\n\n if (formattedValue !== '—') {\n animatedValue =\n valueCoef < 1 && formattedValue !== 0 ? (formattedValue * valueCoef).toFixed(1) : formattedValue;\n animatedValue += '%';\n }\n\n return (\n Total info
\n {itemsArr.map((item, i) => (\n{title}
\n{animatedValue}
\n \n );\n};\n\nconst CommonGroup = ({ data, param, title, itemsArr, staticTitle }) => (\n\n
\n);\n\nexport default CommonGroup;\n","import cl from '../Banner.module.scss';\nimport { usePlayerStatsAnimationCtx } from 'context/PlayerStatsAnimationContext/PlayerStatsAnimationContext';\n\nconst SORT_PRIORITY = {\n '0-0': 1,\n '0-1': 2,\n '1-1': 3,\n '1-2': 4,\n '1-0': 5,\n '2-2': 6,\n '0-2': 7,\n '2-1': 8,\n '3-2': 9,\n '2-0': 10,\n '3-1': 11,\n '3-0': 12\n};\n\nconst CountsDistributionItem = ({ item, staticTitle }) => {\n const [title, { abs: absValue, abs_rel: absRelValue, rel: value }] = item;\n\n const valueCoef = usePlayerStatsAnimationCtx();\n\n const formattedTitle = `${title} (${absValue} / ${absRelValue} ${staticTitle})`;\n const formattedValue = value !== '–' ? value : '—';\n\n let animatedValue = '—';\n\n if (formattedValue !== '—') {\n animatedValue =\n valueCoef < 1 && formattedValue !== 0 ? (formattedValue * valueCoef).toFixed(1) : formattedValue;\n animatedValue += '%';\n }\n\n return (\n {title}
\n {itemsArr.map((item, i) => (\n{formattedTitle}
\n{animatedValue}
\n \n );\n};\n\nconst CountsDistribution = ({ data, staticTitle }) => {\n const sortedList = JSON.parse(JSON.stringify(Object.entries(data.CountsDistribution))).sort((a, b) =>\n SORT_PRIORITY[a] > SORT_PRIORITY[b] ? -1 : 1\n );\n\n return (\n\n
\n );\n};\n\nexport default CountsDistribution;\n","import TotalInfo from './Groups/TotalInfo';\nimport CommonGroup from './Groups/CommonGroup';\nimport CountsDistribution from './Groups/CountsDistribution';\n\nconst BannerColumns = ({parentObj}) => {\n const GROUPS_PARAMS = {\n BatterAppearance: [\n { par1: 'SO', par2: null },\n { par1: 'BB', par2: 'HBP' },\n { par1: 'H', par2: null },\n { par1: 'PO', par2: 'FC' },\n { par1: 'E', par2: null }\n ],\n OutsDistribution: [\n { par1: 'SO', par2: null },\n { par1: 'FO', par2: null },\n { par1: 'GO', par2: 'FC' }\n ],\n PitchesZoneDistribution: [\n { par1: 'Balls', par2: null },\n { par1: 'Strikes', par2: null }\n ],\n PitchesSwingDistribution: [\n { par1: 'Swing', par2: null },\n { par1: 'Take', par2: null }\n ],\n BatterSwingResult: [\n { par1: 'Miss', par2: null },\n { par1: 'Contact', par2: null }\n ],\n HitsDistribution: [\n { par1: 'Hits', par2: null },\n { par1: 'Fly', par2: null },\n { par1: 'Line', par2: null },\n { par1: 'Grounds', par2: null }\n ]\n };\n\n return (\n <>\n Counts distribution
\n {sortedList.map((item, i) => (\n\n
\n \n
\n \n
\n \n );\n};\n\nexport default BannerColumns;\n","import { PlayerYearsContext } from 'context';\nimport React, { useContext } from 'react';\nimport { useSelector } from 'react-redux';\nimport BannerColumns from './BannerColumns';\nimport PlayerStatsAnimationProvider from 'context/PlayerStatsAnimationContext/PlayerStatsAnimationContext';\n\nconst Banner = () => {\n const { playerYears } = useContext(PlayerYearsContext);\n\n const { playerStatsData: statsData, playerCurrentTeam: currentTeam } = useSelector(s => s.playerStats);\n const { currentLeague } = useSelector(state => state.games);\n\n const { total, total_annual, teams, leagues } = statsData.pitcher_banner;\n\n const getParentObj = () => {\n if (playerYears === 'All years' && currentTeam === 'All teams') return total;\n if (playerYears === 'All years' && currentTeam !== 'All teams')\n return teams.find(team => team.name === currentTeam);\n if (currentLeague.id === -1 && currentTeam === 'All teams') return total_annual[playerYears];\n if (currentLeague.id === -1 && currentTeam !== 'All teams')\n return teams.find(team => team.name === currentTeam).annual[playerYears];\n\n const curLeague = leagues.find(league => league.id === currentLeague.id);\n return curLeague.teams.find(team => team.name === currentTeam);\n };\n\n const parentObj = getParentObj();\n return parentObj ? (\n \n
\n );\n};\n\nexport default FilterField;\n","import { useState } from 'react';\nimport cl from './FilteredGraphs.module.scss';\n\nconst GraphsBlock = ({ defaultOption, children, ...props }) => {\n const [currentOption, setCurrentOption] = useState(defaultOption);\n\n return (\n - \n {modifiedValues.map((option, i) => (\n
- \n {shortNames ? getShortName(option, shortNames) : option}\n \n ))}\n
\n {children(currentOption, setCurrentOption)}\n
\n );\n};\n\nexport default GraphsBlock;\n","import React, { Fragment } from 'react';\nimport { getPitchColorByName } from 'utils';\nimport cl from './FrequencySpeedGraph.module.scss';\n\nconst PARAMS = {\n GRAPH_WIDTH: 480,\n GRAPH_HEIGHT: 364,\n LEFT_VERTICAL_GRID_LINES_NUMBER: 5,\n RIGHT_VERTICAL_GRID_LINES_NUMBER: 5,\n VERTICAL_GRID_LINES_TOP: 0,\n VERTICAL_GRID_LINES_LEFT: 45,\n VERTICAL_GRID_LINES_HEIGHT: 300,\n GRAPH_ROWS_HEIGHT: 22,\n BETWEEN_ROWS_HEIGHT: 28\n};\n\nconst Rows = ({ maxSpeedLineValue, minSpeedLineValue, relValuesData, totalPitches }) => (\n <>\n {/* Rows rendering */}\n {Object.entries(relValuesData)\n .sort((a, b) => (a[1].count > b[1].count ? -1 : 1))\n .map((measure, i, thisArr) => {\n const yCoord =\n PARAMS.ZERO_COORDS.Y -\n PARAMS.GRAPH_ROWS_HEIGHT / 2 -\n (thisArr.length - (i + 1)) * (PARAMS.BETWEEN_ROWS_HEIGHT + PARAMS.GRAPH_ROWS_HEIGHT) +\n (PARAMS.BETWEEN_ROWS_HEIGHT / 2 + PARAMS.GRAPH_ROWS_HEIGHT / 2) * (thisArr.length - 1);\n\n const leftSideWidth = PARAMS.LEFT_VERTICAL_GRID_LINES_STEP * PARAMS.LEFT_VERTICAL_GRID_LINES_NUMBER;\n const leftEdgeLine = PARAMS.ZERO_COORDS.X - leftSideWidth;\n const leftValueCoef = leftSideWidth / 100;\n\n const rightSideWidth =\n PARAMS.RIGHT_VERTICAL_GRID_LINES_STEP * (PARAMS.RIGHT_VERTICAL_GRID_LINES_NUMBER - 1);\n const rightEdgeLine = PARAMS.ZERO_COORDS.X + rightSideWidth + PARAMS.RIGHT_VERTICAL_GRID_LINES_STEP;\n const rightValueCoef = rightSideWidth / (maxSpeedLineValue - minSpeedLineValue);\n const rightFirstLine = PARAMS.ZERO_COORDS.X + PARAMS.RIGHT_VERTICAL_GRID_LINES_STEP;\n\n const measureFrequency = (measure[1].count * 100) / totalPitches;\n const minSpeed = measure[1].avgSpeed - measure[1].skoSpeed;\n const maxSpeed = measure[1].avgSpeed + measure[1].skoSpeed;\n return (\n \n
\n );\n};\n\nexport default FieldGraph;\n","import FrequencySpeedGraph from './FrequencySpeedGraph/FrequencySpeedGraph';\n// import FieldImg from 'images/player_stats_field.jpg';\nimport cl from './PitchesSpeedField.module.scss';\nimport FieldGraph from './FieldGraph/FieldGraph';\n\nconst PitchesSpeedField = ({ filteredData, preview, relValuesData, ...props }) => {\n return (\n \n \n {isGraphVisible && (\n <>\n \n Gravity\n
\n {/* Bottom wrapper title */}\n Horizontal break, cm
\n {/* Left wrapper title */}\nDownward Vertical Break, cm
\n\n 
*/}\n
\n );\n};\n\nexport default PitchesSpeedField;\n","import cl from './GraphsHeader.module.scss';\nimport OptionsToggler from 'components/UI/togglers/OptionsToggler/OptionsToggler';\nimport classNames from 'classnames';\nimport TimeDynamicCheckbox from 'components/UI/checkboxes/TimeDynamicCheckbox/TimeDynamicCheckbox';\nimport UpDownArrow from 'components/UI/buttons/UpDownArrow/UpDownArrow';\nimport ArrowDown from 'components/UI/icons/ArrowDown';\n\nconst GraphsHeader = ({\n optionsArr,\n availableOptions,\n title,\n subTitle,\n\thandleMobileDatasetFilterClick = null,\n currentOption,\n setCurrentOption,\n currentOption2 = null,\n setCurrentOption2 = null,\n currentOption3 = null,\n setCurrentOption3 = null,\n noSelector = false,\n graphsArrow = false,\n addedClass = null,\n ...props\n}) => {\n const optionsTogglerStyles = {\n position: 'absolute',\n right: '.4375rem',\n top: currentOption2 !== null ? '30%' : '50%',\n transform: currentOption2 !== null ? 'translateY(-55%)' : 'translateY(-50%)'\n };\n\n const optionsToggler2Styles = {\n position: 'absolute',\n right: '.4375rem',\n bottom: '30%',\n transform: 'translateY(55%)'\n };\n\n const handleOptionClick = option => () => setCurrentOption(option);\n const handleOption2Click = option => () => {\n setCurrentOption2(prev =>\n prev.map(curOption =>\n curOption.name === option.name ? { ...curOption, checked: !curOption.checked } : curOption\n )\n );\n };\n\n const handleArrowClick = () => {\n setCurrentOption3(prev => (prev === 'opened' ? 'closed' : 'opened'));\n };\n\n const titleClasses = classNames(cl.title, {\n [cl.highTitle]: currentOption2 !== null\n });\n return (\n \n
\n );\n};\n\nexport default GraphsHeader;\n","import { useMemo } from 'react';\n\nconst batterGroupsArr = ['pitcher', 'count', 'type', 'speed', 'zone', 'result', 'swing', 'contact'];\n\nexport const useFilterBatterGroupData = (\n data,\n currentFilterValues,\n groupName,\n teamName = null,\n pitcherFullName = null\n) =>\n useMemo(\n () =>\n data.pitches_all?.filter(pitch => {\n const { pitcher } = pitch;\n const { pitcher: curPitcher, type: pitchType, speed } = currentFilterValues;\n\n return batterGroupsArr.every(group => {\n if (currentFilterValues[group] === 'all' || group === groupName) return true;\n\n if (group === 'pitcher' && curPitcher === 'team') return pitcher.team_name.includes(teamName);\n\n if (group === 'pitcher' && curPitcher === 'pitcher')\n return `${pitcher['pitcher name']} ${pitcher['pitcher surname']}`.includes(pitcherFullName);\n\n if (group === 'type') return data.preview.pitch_classes[pitch.pitch_info.pitch_type] === pitchType;\n\n if (group === 'speed') {\n const pitchClassName = data.preview.pitch_classes[pitch.pitch_info.pitch_type];\n const curPitchSpeed = pitch.pitch_info.speed;\n \n return curPitchSpeed >= speed[pitchClassName].min && curPitchSpeed <= speed[pitchClassName].max;\n }\n const tempGroupName =\n group === 'swing' || group === 'contact' ? 'result' : group === 'type' ? 'pitch_info' : group;\n\n return pitch[tempGroupName][currentFilterValues[group]];\n });\n }) || [],\n [data, currentFilterValues, groupName, teamName, pitcherFullName]\n );\n\nconst pitcherGroupsArr = ['batter', 'count', 'zone', 'result', 'swing', 'contact'];\n\nexport const useFilterPitcherGroupData = (\n data,\n currentFilterValues,\n groupName,\n teamName = null,\n batterFullName = null\n) =>\n useMemo(\n () =>\n data.pitches_all?.filter(pitch => {\n const { batter } = pitch;\n const { batter: curBatter } = currentFilterValues;\n\n return pitcherGroupsArr.every(group => {\n if (currentFilterValues[group] === 'all') return true;\n\n if (group === 'batter' && curBatter === 'team') return batter.team_name.includes(teamName);\n\n if (group === 'batter' && curBatter === 'batter')\n return `${batter['batter name']} ${batter['batter surname']}`.includes(batterFullName);\n\n const tempGroupName = group === 'swing' || group === 'contact' ? 'result' : group;\n return pitch[tempGroupName][currentFilterValues[group]] || group === groupName;\n });\n }) || [],\n [data, currentFilterValues, groupName, teamName, batterFullName]\n );\n","import { useState } from 'react';\nimport cl from './FilteredGraphs.module.scss';\nimport classNames from 'classnames';\n\nconst GraphsTimeDynamicBlock = ({ defaultOption, defaultOption2, defaultOption3, children, ...props }) => {\n const calculatedDefOptions2 = defaultOption2.reduce(\n (sum, option, index) => {\n sum.push({ name: option, type: index, checked: true });\n\n return sum;\n },\n [\n {\n name: 'All Pitches',\n type: -1,\n checked: true\n }\n ]\n );\n\n const [currentOption, setCurrentOption] = useState(defaultOption);\n const [currentOption2, setCurrentOption2] = useState(calculatedDefOptions2);\n const [currentOption3, setCurrentOption3] = useState(defaultOption3);\n\n const wrapperClasses = classNames(cl.graphsBlock, cl.dynamicBlock, {\n [cl.openedHeight]: currentOption3 === 'opened',\n [cl.closedHeight]: currentOption3 !== 'opened'\n });\n return (\n {title}
\n\t\t\t{handleMobileDatasetFilterClick && (\n \n )}\n{subTitle}
\n {graphsArrow && (\n\n {children(\n currentOption,\n setCurrentOption,\n currentOption2,\n setCurrentOption2,\n currentOption3,\n setCurrentOption3\n )}\n
\n );\n};\n\nexport default GraphsTimeDynamicBlock;\n","import { memo, useRef, useState, useEffect } from 'react';\nimport {\n useFrame\n // extend\n} from '@react-three/fiber';\nimport { HSVtoRGB } from 'utils';\n// import ComfortaaFont from 'fonts/Comfortaa_Regular.json';\nimport { useThreeTextCtx } from 'context/ThreeTextCtx';\n\n// const TouchPoints = ({ data3D, coef, curveCount }) => (\n// <>\n// {data3D\n// .slice(0, curveCount)\n// .filter(coords => coords[3] === 1)\n// .map(coord => (\n// {text}
;\n};\n\nexport default Tooltip;\n","import classNames from 'classnames';\nimport React, { memo, Suspense, useMemo, useState, useRef, useEffect, forwardRef } from 'react';\nimport { useSelector } from 'react-redux';\nimport cl from './PitchesTrajectories.module.scss';\nimport { Canvas } from '@react-three/fiber';\nimport { FrontSide, TextureLoader } from 'three';\nimport { OrbitControls } from '@react-three/drei';\nimport FieldBg from 'images/field_right.jpg';\n// import ArrowDown from 'components/UI/icons/ArrowDown';\nimport Curves from './Curves/Curves';\nimport Tooltip from './Tooltip';\n\nconst OptionsBar = ({ isAutoRotate, handleAutoRotateClick, handleResetClick }) => {\n const rotateBtnClass = classNames({\n [cl.active]: isAutoRotate\n });\n\n return (\n \n
\n );\n};\n\nconst PitchesTrajectories = ({ data }) => {\n const [isAutoRotate, setAutoRotate] = useState(true);\n const [zoomCoef, setZoomCoef] = useState(1);\n const [isGraphVisible, setGraphVisibility] = useState(false);\n const [hovered, setHovered] = useState({ isHovered: false, text: '' });\n\n const graphRef = useRef();\n const pointerTimeout = useRef(null);\n\n useEffect(() => {\n let options = {\n root: null,\n rootMargin: '-300px 0px',\n // rootMargin: '300px 0px',\n threshold: 0\n };\n\n let observer = new IntersectionObserver(entries => {\n entries.forEach(entry => {\n const { isIntersecting } = entry;\n\n if (isIntersecting) {\n setGraphVisibility(true);\n } else {\n setGraphVisibility(false);\n }\n });\n }, options);\n observer.observe(graphRef.current);\n\n return () => {\n observer.disconnect();\n };\n }, []);\n\n const currentMoment = useSelector(state => state.game.currentMoment);\n\n const controlsRef = useRef();\n const wrapperRef = useRef();\n\n useEffect(() => {\n const xCoef = wrapperRef.current.clientWidth / 568.72;\n const yCoef = wrapperRef.current.clientHeight / 497.81;\n const resultCoef = Math.min(xCoef, yCoef);\n\n setZoomCoef(resultCoef);\n }, []);\n\n const handleResetClick = () => controlsRef.current.reset();\n const handleAutoRotateClick = () => setAutoRotate(prev => !prev);\n\n const textureRef = useMemo(() => new TextureLoader().load(FieldBg), []);\n\n const hitsData = data.filter(({ hit_info }) => hit_info.data_3d !== null);\n const isCurves = hitsData.length > 0;\n\n const handlePointerOverCurve = text => {\n clearTimeout(pointerTimeout.current);\n\n setHovered({ isHovered: true, text });\n\n document.body.style.cursor = 'pointer';\n };\n\n const handlePointerOutCurve = text => {\n clearTimeout(pointerTimeout.current);\n\n pointerTimeout.current = setTimeout(() => {\n setHovered({ isHovered: false, text });\n }, 4000);\n\n document.body.style.cursor = 'auto';\n };\n return (\n \n \n \n
\n {/* \n
*/}\n \n \n \n \n \n\n {isGraphVisible && isCurves && (\n \n \n\n
\n );\n};\n\nexport default memo(PitchesTrajectories);\n","const StraightLines = () => (\n <>\n {title}
;\n\nconst RadialTitles = ({ minMaxValue, title }) => {\n const { min, max } = minMaxValue;\n\n const minMaxDelta = max - min;\n const valuePerCircle = minMaxDelta / PARAMS.RADIALS_NUMBER;\n\n const titles = [];\n for (let i = 1; i <= PARAMS.RADIALS_NUMBER; i++) {\n titles.push((min + valuePerCircle * i).toFixed(1));\n }\n\n const xCoord = PARAMS.ZERO_X - 4;\n return (\n <>\n {/* Center value */}\n {/*\n \n
\n );\n};\n\nexport default HitsAnglesGraph;\n","import HitsAnglesGraph from './HitsAnglesGraph';\nimport cl from './HitsAnglesGraphs.module.scss';\n\nconst HitsAnglesGraphs = ({ data }) => {\n const notNullAngleData = data.filter(({ hit_info: { angle } }) => angle !== null);\n\n const defaultAnglesValues = [];\n\n for (let i = -90; i <= 80; i += 10) {\n defaultAnglesValues.push({\n deg: i,\n hitsCount: 0,\n sumVelocity: 0,\n avgVelocity: 0,\n sumDistance: 0,\n avgDistance: 0\n });\n }\n\n const angleValues = notNullAngleData.reduce(\n (sum, { hit_info: { angle, distance, 'exit velocity': exitVelocity } }, index) => {\n const resultAngle = Math.floor(angle / 10) * 10;\n const sumIndex = resultAngle / 10 + 9;\n const sumAngleObj = sum[sumIndex];\n\n sumAngleObj.hitsCount++;\n\n sumAngleObj.sumVelocity += exitVelocity;\n if (sumAngleObj.minVelocity === undefined || exitVelocity < sumAngleObj.minVelocity) {\n sumAngleObj.minVelocity = exitVelocity;\n }\n if (sumAngleObj.maxVelocity === undefined || exitVelocity > sumAngleObj.maxVelocity) {\n sumAngleObj.maxVelocity = exitVelocity;\n }\n sumAngleObj.avgVelocity = sumAngleObj.sumVelocity / sumAngleObj.hitsCount;\n\n sumAngleObj.sumDistance += distance;\n if (sumAngleObj.minDistance === undefined || distance < sumAngleObj.minDistance) {\n sumAngleObj.minDistance = distance;\n }\n if (sumAngleObj.maxDistance === undefined || distance > sumAngleObj.maxDistance) {\n sumAngleObj.maxDistance = distance;\n }\n sumAngleObj.avgDistance = sumAngleObj.sumDistance / sumAngleObj.hitsCount;\n\n return sum;\n },\n defaultAnglesValues\n );\n\n return (\n \n
\n );\n};\n\nexport default HitsAnglesGraphs;\n","import { showingGroup } from './TwinPitchesGraph.module.scss';\n\nconst Tooltip = ({ hoveredDot, isType = true }) => {\n const speedValue = +hoveredDot.speed.toFixed(2) + ' mph';\n\n const hoveredDotXCoord =\n hoveredDot.coords[0] <= 75\n ? hoveredDot.coords[0] + 80\n : hoveredDot.coords[0] <= 315\n ? hoveredDot.coords[0]\n : hoveredDot.coords[0] - 65;\n const hoveredDotYCoord = hoveredDot.coords[1] > 50 ? hoveredDot.coords[1] : hoveredDot.coords[1] + 75;\n let rectY = hoveredDotYCoord - 50;\n let rectHeight = 35;\n const rectWidth = 138;\n const rectX = hoveredDotXCoord - rectWidth / 2;\n\n if (!isType) {\n rectY += 16;\n rectHeight -= 16;\n }\n return (\n \n \n {isGraphVisible && (\n
\n );\n};\n\nexport default TwinPitchesGraph;\n","import { twinGraphsWrapper } from '../FilteredGraphs.module.scss';\nimport TwinPitchesGraph from './TwinPitchesGraph';\n\nconst TwinPitchesGraphs = ({ relValuesData, preview, currentOption, filteredData }) => {\n return (\n \n
\n );\n};\n\nexport default TwinPitchesGraphs;\n","import { Fragment } from 'react';\nimport { MONTHS } from 'utils';\nimport cl from './ArsenalGraph.module.scss';\n\nconst BottomMarks = ({ PARAMS, bottomMarks, currentTimeInterval }) => {\n const marksInterval = PARAMS.HORIZONTAL_GRID_LINES_WIDTH / (bottomMarks.length + 1);\n const yCoords = [PARAMS.ZERO_COORDS.Y + 1, PARAMS.ZERO_COORDS.Y + 6];\n\n return (\n <>\n {bottomMarks.map((mark, i) => {\n const xCoord = PARAMS.ZERO_COORDS.X + marksInterval * (i + 1);\n\n const text =\n currentTimeInterval === 'Season'\n ? mark\n : currentTimeInterval === 'Month'\n ? `${MONTHS[+mark.slice(5, 7) - 1]}, ${mark.slice(2, 4)}`\n : mark.split('-').reverse().join('.');\n return (\n \n
\n );\n};\n\nconst TextGroup = ({ setTextGroupFilter, data }) => {\n function getSortedArr(set) {\n return Array.from(set).sort((a, b) => (a > b ? 1 : -1));\n }\n\n const uniqueValues = useMemo(() => {\n const defaultValues = { teams: new Set(), games: new Set(), batters: new Set() };\n const tempData = data.reduce((sum, cur) => {\n const { team_name: teamName, 'batter name': batterName, 'batter surname': batterSurname } = cur.batter;\n const { date } = cur.pitch_info;\n\n sum.teams.add(teamName);\n sum.games.add(`${date.slice(8, 10)}/${date.slice(5, 7)} ${teamName}`);\n sum.batters.add(`${batterName} ${batterSurname}`);\n\n return sum;\n }, defaultValues);\n\n tempData.teams = getSortedArr(tempData.teams);\n tempData.games = getSortedArr(tempData.games);\n tempData.batters = getSortedArr(tempData.batters);\n\n return tempData;\n }, [data]);\n return (\n {title}
\n {modifiedGroupData.map((item, i) => (\n\n
\n );\n};\n\nconst CustomGroup = ({ data, currentFilterValues, handleFilterClick }) => {\n const againstFilteredData =\n data.pitches_all?.filter(\n pitch =>\n (currentFilterValues.count === 'all' ? true : pitch.count[currentFilterValues.count]) &&\n (currentFilterValues.zone === 'all' ? true : pitch.zone[currentFilterValues.zone]) &&\n (currentFilterValues.result === 'all' ? true : pitch.result[currentFilterValues.result]) &&\n (currentFilterValues.swing === 'all' ? true : pitch.result[currentFilterValues.swing]) &&\n (currentFilterValues.contact === 'all' ? true : pitch.result[currentFilterValues.contact])\n ) || [];\n\n const totalBatters = againstFilteredData.reduce((sum, cur) => {\n const existBatterIndex = sum.findIndex(batter => batter.h_id === cur.batter.h_id);\n existBatterIndex === -1 && sum.push(cur.batter);\n\n return sum;\n }, []);\n\n const leftHandedBatters = totalBatters.filter(batter => batter['left handed']);\n const rightHandedBattersLength = totalBatters.length - leftHandedBatters.length;\n\n const rightHandedRelValue =\n totalBatters.length > 0 ? +((rightHandedBattersLength * 100) / totalBatters.length).toFixed(1) : 0 ?? '-';\n const leftHandedRelValue =\n totalBatters.length > 0 ? +((leftHandedBatters.length * 100) / totalBatters.length).toFixed(1) : 0 ?? '-';\n\n const customGroupData = {\n title: 'Against who',\n items: [\n {\n name: 'All batters',\n absValue: totalBatters.length,\n absValueTotal: totalBatters.length,\n relValue: 100,\n staticText: 'players'\n },\n {\n name: 'Right handed',\n absValue: rightHandedBattersLength,\n absValueTotal: totalBatters.length,\n relValue: rightHandedRelValue,\n staticText: 'players'\n },\n {\n name: 'Left handed',\n absValue: leftHandedBatters.length,\n absValueTotal: totalBatters.length,\n relValue: leftHandedRelValue,\n staticText: 'players'\n }\n ]\n };\n\n const { title, items } = customGroupData;\n return (\n \n {\n setTextGroupFilter(prev => ({ ...prev, team: value }));\n }}\n handleClick={value => {\n setTextGroupFilter(prev => ({ ...prev, team: value }));\n }}\n listValues={uniqueValues.teams}\n isAllOption\n />\n
\n Team
\n\n {\n setTextGroupFilter(prev => ({ ...prev, game: value }));\n }}\n handleClick={value => {\n setTextGroupFilter(prev => ({ ...prev, game: value }));\n }}\n listValues={uniqueValues.games}\n isAllOption\n />\n
\n Game
\n\n {\n setTextGroupFilter(prev => ({ ...prev, batter: value }));\n }}\n handleClick={value => {\n setTextGroupFilter(prev => ({ ...prev, batter: value }));\n }}\n listValues={uniqueValues.batters}\n isAllOption\n />\n
\n Batter
\n\n
\n );\n};\n\nconst LeftColumnOptions = ({\n pitchesData = {},\n data = {},\n handleFilterClick,\n currentFilterValues,\n filteredTeamName,\n filteredPlayerFullName,\n handleTeamNameChange,\n handlePlayerNameChange,\n setTextGroupFilter,\n isDatasetFilterVisible,\n setDatasetFilterVisible\n}) => {\n const groupsArr = [\n {\n title: 'Count',\n groupName: 'count',\n\n items: [\n {\n name: 'Any count',\n staticText: 'pitches'\n },\n { name: 'Ahead in count', staticText: 'pitches' },\n { name: 'Behind in count', staticText: 'pitches' },\n { name: '0-0', staticText: 'pitches' },\n { name: '0-2', staticText: 'pitches' },\n { name: '3-0', staticText: 'pitches' }\n ]\n },\n {\n title: 'Zone',\n groupName: 'zone',\n items: [\n { name: 'Any zone', staticText: 'pitches' },\n { name: 'In zone', staticText: 'pitches' },\n { name: 'Out zone', staticText: 'pitches' },\n { name: 'Heart', staticText: 'pitches' },\n { name: 'Edge', staticText: 'pitches' },\n { name: 'Chase&Waste', staticText: 'pitches' },\n { name: 'Low', staticText: 'pitches' },\n { name: 'High', staticText: 'pitches' },\n { name: 'Outside', staticText: 'pitches' },\n { name: 'Inside', staticText: 'pitches' }\n ]\n },\n {\n title: 'Result',\n groupName: 'result',\n items: [\n { name: 'All pitches', staticText: 'pitches' },\n { name: 'Swing', staticText: 'pitches' },\n { name: 'Take', staticText: 'pitches' }\n ]\n },\n {\n title: ' ',\n groupName: 'swing',\n items: [\n { name: 'All swings', staticText: 'swings' },\n { name: 'Miss', staticText: 'swings' },\n { name: 'Contact', staticText: 'swings' }\n ]\n },\n {\n title: ' ',\n groupName: 'contact',\n items: [\n { name: 'All contacts', staticText: 'contacts' },\n { name: 'Base hits & Hard hit', staticText: 'contacts' },\n { name: 'Slow hit', staticText: 'contacts' },\n { name: 'Fly', staticText: 'contacts' },\n { name: 'Line', staticText: 'contacts' },\n { name: 'Grounds', staticText: 'contacts' }\n ]\n }\n ];\n\n const handleCrossClick = () => {\n setDatasetFilterVisible(false);\n };\n\n const outerWrapperClasses = classNames(cl.leftColumnOuterWrapper, {\n [cl.visible]: isDatasetFilterVisible\n });\n return (\n {title}
\n {items.map((item, i) => (\n\n
\n );\n};\n\nconst RightColumnGraphs = ({\n currentFilterValues,\n filteredTeamName,\n filteredPlayerFullName,\n data,\n setDatasetFilterVisible\n}) => {\n const { preview } = data;\n const { pitch_types: pitchTypes } = preview;\n\n const { name: playerName, surname: playerSurname } = useSelector(\n state => state.playerStats.playerStatsData\n );\n\n const isMobile = useSelector(s => s.shared.isMobile);\n\n const teamName = currentFilterValues.batter === 'team' ? filteredTeamName : null;\n const playerFullName = currentFilterValues.batter === 'batter' ? filteredPlayerFullName : null;\n const filteredData = useFilterPitcherGroupData(data, currentFilterValues, teamName, playerFullName);\n\n // Count and speed values\n const relValuesData = filteredData.reduce((sum, pitch) => {\n const { speed, pitch_type, pitchGraphCoords } = pitch.pitch_info;\n const pitchType = pitchTypes[pitch_type];\n\n if (sum[pitchType] !== undefined) {\n sum[pitchType].count += 1;\n sum[pitchType].speeds.push(speed * 2.24);\n sum[pitchType].pitchGraphCoords.push({ ...pitchGraphCoords, color: getPitchColorByName(pitchType) });\n\n return sum;\n }\n\n sum[pitchType] = {\n count: 1,\n speeds: [speed * 2.24],\n pitchGraphCoords: [{ ...pitchGraphCoords, color: getPitchColorByName(pitchType) }]\n };\n\n return sum;\n }, {});\n\n //! Delete after testing\n // const arsenalAddedData = JSON.parse(JSON.stringify(filteredData));\n\n // for (let i = 0; i < 1500; i++) {\n // let month = getRndValue(6, 10);\n // month = month < 10 ? `0${month}` : month;\n // let day = getRndValue(5, 6);\n // day = day < 10 ? `0${day}` : day;\n // const year = getRndValue(2019, 2023);\n\n // const date = `${year}-${month}-${day}`;\n\n // const pitch_type = getRndValue(0, pitchTypes.length - 1);\n // const speed = getRndValue(11, 14);\n // const spin = getRndValue(200, 2000);\n // const break_y = getRndValue(1200, 2900) / -1000;\n // const break_x = (getRndValue(0, 1000) - 500) / 1000;\n // const inZone = getRndValue(0, 1);\n // const outZone = 1 - inZone;\n // const inside = getRndValue(0, 1);\n // const outside = 1 - inside;\n // const low = getRndValue(0, 1);\n // const high = 1 - low;\n\n // const newPitch = {\n // pitch_info: { pitch_type, date, speed },\n // break: { spin, break_y, break_x },\n // zone: { 'in zone': inZone, 'out zone': outZone, inside, outside, low, high }\n // };\n\n // arsenalAddedData.push(newPitch);\n // }\n\n // const arsenalRelValuesData = arsenalAddedData.reduce((sum, pitch) => {\n // const { speed, pitch_type, pitchGraphCoords } = pitch.pitch_info;\n // const pitchType = pitchTypes[pitch_type];\n\n // if (sum[pitchType] !== undefined) {\n // sum[pitchType].count += 1;\n // sum[pitchType].speeds.push(speed * 2.23741);\n // sum[pitchType].pitchGraphCoords.push({ ...pitchGraphCoords, color: getPitchColorByName(pitchType) });\n\n // return sum;\n // }\n\n // sum[pitchType] = {\n // count: 1,\n // speeds: [speed],\n // pitchGraphCoords: [{ ...pitchGraphCoords, color: getPitchColorByName(pitchType) }]\n // };\n\n // return sum;\n // }, {});\n\n // ! delete after testing\n\n // let twinFilteredData = JSON.parse(JSON.stringify(filteredData));\n\n // twinFilteredData = twinFilteredData.map(pitch =>\n // pitch.coordinates.zone_y === 0\n // ? {\n // ...pitch,\n // coordinates: { zone_x: getRndValue(-200, 200) / 1000, zone_y: getRndValue(520, 930) / 1000 }\n // }\n // : pitch\n // );\n\n // for (let i = 0; i < 100; i++) {\n // const pitch = {\n // pitch_info: { pitch_type: 1 },\n // coordinates: { zone_x: getRndValue(-200, 200) / 1000, zone_y: getRndValue(520, 930) / 1000 },\n // result: {\n // swing: 0,\n // take: 1,\n // miss: 0,\n // contact: 0,\n // 'base hit & hard hit': 0,\n // 'soft hit': 0,\n // fly: 0,\n // line: 0,\n // gruond: 0\n // },\n // zone: {\n // 'in zone': 0,\n // 'out zone': 1,\n // heart: 0,\n // edge: 0,\n // waste: 1,\n // low: 1,\n // high: 0,\n // outside: 0,\n // inside: 0\n // }\n // };\n\n // twinFilteredData.push(pitch);\n // }\n\n // const twinData = isFakeTwinBalls ? twinFilteredData : filteredData;\n // const twinData = filteredData;\n\n // const twinFakeBallsHandler = () => setFakeTwinBalls(prev => !prev);\n // !\n\n const handleMobileDatasetFilterClick = () => {\n setDatasetFilterVisible(true);\n };\n\n return (\n \n \n Dataset filter{' '}\n
\n
\n \n Dataset filter{' '}\n
\n \n
\n \n \n {(currentOption, setCurrentOption) => (\n <>\n \n \n {(currentOption, setCurrentOption) => (\n <>\n \n \n {(\n currentOption,\n setCurrentOption,\n currentOption2,\n setCurrentOption2,\n currentOption3,\n setCurrentOption3\n ) => (\n <>\n \n \n {(currentOption, setCurrentOption) => (\n <>\n \n \n {(currentOption, setCurrentOption) => (\n <>\n {/* \n
\n );\n};\n\nconst FilteredGraphs = ({ pitchesData }) => {\n const [currentFilterValues, setCurrentFilterValues] = useState({\n batter: 'all',\n count: 'all',\n zone: 'all',\n result: 'all',\n swing: 'all',\n contact: 'all'\n });\n const [filteredTeamName, setFilteredTeamName] = useState('');\n const [filteredPlayerFullName, setFilteredPlayerFullName] = useState('');\n\n const [textGroupFilter, setTextGroupFilter] = useState({ team: '', game: '', batter: '' });\n\n const [isDatasetFilterVisible, setDatasetFilterVisible] = useState(false);\n\n\tuseEffect(() => {\n if (isDatasetFilterVisible) {\n document.body.style.overflow = 'hidden';\n document.body.style.touchAction = 'none';\n return;\n }\n\t\t\n\t\tdocument.body.style = '';\n }, [isDatasetFilterVisible]);\n\n const filteredData = useMemo(() => {\n function checkFieldIdentity(comparedFields, fieldFilter, exactComparing = true) {\n if (fieldFilter === '') return true;\n\n const filterArr = fieldFilter.split(' ');\n\n return filterArr.reduce((sum, word) => {\n if (\n !exactComparing &&\n !comparedFields.some(\n field => String(field).slice(0, word.length).toLowerCase() === String(word).toLowerCase()\n )\n ) {\n sum = false;\n }\n\n if (\n exactComparing &&\n !comparedFields.some(field => String(field).toLowerCase() === String(word).toLowerCase())\n ) {\n sum = false;\n }\n\n return sum;\n }, true);\n }\n\n function gameDataCheck(gameFilter, { date }, { team_name: teamName }) {\n if (gameFilter === '') return true;\n\n const filteredWords = gameFilter.split(' ');\n\n return filteredWords.reduce((result, word) => {\n if (result === false) return result;\n\n const regex = /([0-3][0-9]\\/[0-1][0-9])/;\n const matchedRegex = word.match(regex);\n if (matchedRegex) {\n const day = matchedRegex[0].slice(0, 2);\n const month = matchedRegex[0].slice(3, 5);\n\n const dateDay = date.slice(8, 10);\n const dateMonth = date.slice(5, 7);\n\n if (day !== dateDay || month !== dateMonth) return false;\n return true;\n }\n\n if (word === '') return result;\n\n return teamName.toLowerCase() === word.toLowerCase();\n }, true);\n }\n\n const { pitches_all: pitchesAll } = pitchesData;\n\n const newPitchesAll = pitchesAll.filter(({ batter, pitch_info: pitchInfo }) => {\n const { team: teamFilter, game: gameFilter, batter: batterFilter } = textGroupFilter;\n\n return (\n checkFieldIdentity([batter.team_name], teamFilter) &&\n gameDataCheck(gameFilter, pitchInfo, batter) &&\n checkFieldIdentity([batter['batter name'], batter['batter surname']], batterFilter)\n );\n });\n\n return { preview: pitchesData.preview, pitches_all: newPitchesAll };\n }, [textGroupFilter, pitchesData]);\n\n function handleFilterClick(groupName, value) {\n setCurrentFilterValues(prev => ({ ...prev, [groupName]: value }));\n }\n\n const handleTeamNameChange = name => {\n setFilteredTeamName(name);\n };\n const handlePlayerNameChange = name => {\n setFilteredPlayerFullName(name);\n };\n\n return (\n \n
\n );\n};\n\nexport default FilteredGraphs;\n","import React from 'react';\nimport cl from './PitcherContentGraphs.module.scss';\nimport Banner from './Banner/Banner';\nimport FilteredGraphs from './FilteredGraphs/FilteredGraphs';\n\nconst PitcherContentGraphs = ({ pitchesData }) => {\n const isFilteredGraphs = !!pitchesData;\n\t\n return (\n \n
\n );\n};\n\nexport default PitcherContentGraphs;\n","import Dropdown from 'components/UI/dropdown/GamesDropdown/Dropdown';\nimport SortArrows from 'components/UI/icons/SortArrows/SortArrows';\nimport SortField from 'components/UI/sortField/SortField';\nimport React, { Fragment } from 'react';\nimport { useSelector } from 'react-redux';\n\nconst ContentBattingTableHeader = ({\n cl,\n playerYears,\n currentLeague,\n getSortedTableOptions,\n handleTableOptionClick,\n sortField,\n sortDirection,\n handleFieldClick,\n fieldsInfo,\n\tsetSortDirection\n}) => {\n const tableType = useSelector(state => state.playerStats.tableType);\n\n const getHeaderCells = () => {\n return (\n <>\n {fieldsInfo.map((field, i) => (\n \n \n {field.childField || field.name}\n \n
\n ) : (\n \n {playerYears === 'All years' && \n G\n \n )}\n {getHeaderCells()}\n
\n );\n};\n\nexport default ContentBattingTableHeader;\n","import ActiveBodyCell from 'components/UI/ActiveBodyCell/ActiveBodyCell';\nimport React from 'react';\nimport { useSelector } from 'react-redux';\nimport { Link } from 'react-router-dom';\nimport { getShortName } from 'utils';\n\nconst FIELDS_OBJ = {\n G: 'batting',\n AB: 'batting',\n H: 'batting',\n '2B': 'batting',\n '3B': 'batting',\n HR: 'batting',\n RBI: 'batting',\n GDP: 'batting',\n BB: 'batting',\n IBB: 'batting',\n HP: 'batting',\n SH: 'batting',\n SF: 'batting',\n SO: 'batting',\n TB: 'batting',\n AVG: 'batting',\n SLG: 'batting',\n OBP: 'batting',\n OPS: 'batting',\n CH: 'fielding',\n PO: 'fielding',\n A: 'fielding',\n E: 'fielding',\n DP: 'fielding',\n FLD: 'fielding',\n R: 'batting',\n SB: 'running',\n CS: 'running',\n SB_pr: 'running',\n LOB: 'running'\n};\n\nconst ContentBattingTableBody = ({\n cl,\n currentLeague,\n playerYears,\n filteredLeague,\n filteredLeagues,\n sortField,\n sortDirection,\n handleLeagueClick,\n MONTHS,\n\tfieldsInfo\n}) => {\n const currentTeam = useSelector(state => state.playerStats.playerCurrentTeam);\n const playerStatsData = useSelector(state => state.playerStats.playerStatsData);\n\n const filteredLeagueGamesSummary =\n filteredLeague &&\n (!Array.isArray(filteredLeague)\n ? filteredLeague.batting.games_batting.reduce((sum, game, i) => {\n const sumGame = {\n ...game,\n ...filteredLeague.fielding.games_fielding[i],\n ...filteredLeague.running.games_running[i],\n team_name: filteredLeague.name\n };\n sum.push(sumGame);\n return sum;\n }, [])\n : filteredLeague\n .filter(team => team.batting || team.running || team.fielding)\n .reduce((totalSum, team) => {\n const teamGamesArr = team.batting.games_batting.reduce((sum, game, i) => {\n const sumGame = {\n ...game,\n ...team.fielding.games_fielding[i],\n ...team.running.games_running[i],\n team_name: team.name\n };\n sum.push(sumGame);\n return sum;\n }, []);\n\n return totalSum.concat(teamGamesArr);\n }, []));\n\n const sortedLeagueGames =\n filteredLeague &&\n filteredLeagueGamesSummary\n .slice()\n .sort((a, b) =>\n a.date > b.date ? (sortDirection === 'asc' ? 1 : -1) : sortDirection === 'asc' ? -1 : 1\n // a[sortField] > b[sortField] ? (sortDirection === 'asc' ? 1 : -1) : sortDirection === 'asc' ? -1 : 1\n );\n\n let sortedLeagues = [];\n let allTeamGames = [];\n if (currentTeam !== 'All teams') {\n sortedLeagues = filteredLeagues.slice().sort((a, b) => {\n const teamA = a.teams.find(team => team.name === currentTeam);\n const teamB = b.teams.find(team => team.name === currentTeam);\n\n const fieldTypeA =\n sortField !== 'G'\n ? FIELDS_OBJ[sortField]\n : teamA.batting.G > 0\n ? 'batting'\n : teamA.fielding.G > 0\n ? 'fielding'\n : 'running';\n const fieldTypeB =\n sortField !== 'G'\n ? FIELDS_OBJ[sortField]\n : teamB.batting.G > 0\n ? 'batting'\n : teamB.fielding.G > 0\n ? 'fielding'\n : 'running';\n\n return teamA[fieldTypeA][sortField] > teamB[fieldTypeB][sortField]\n ? sortDirection === 'asc'\n ? 1\n : -1\n : sortDirection === 'asc'\n ? -1\n : 1;\n });\n }\n\n if (currentTeam === 'All teams') {\n allTeamGames = filteredLeagues.reduce((totalGames, league) => {\n league.teams.forEach(team =>\n totalGames.push({\n title: league.title,\n year: league.year,\n game: team,\n team_name: team.name,\n id: league.id,\n teams: league.teams\n })\n );\n\n return totalGames;\n }, []);\n\n allTeamGames = allTeamGames.filter(\n row => row.game.batting || row.game.fielding || row.game.running || row.game.pitching\n );\n\n allTeamGames.sort((a, b) => {\n const fieldTypeA =\n sortField !== 'G'\n ? FIELDS_OBJ[sortField]\n : a.game.batting.G > 0\n ? 'batting'\n : a.game.fielding.G > 0\n ? 'fielding'\n : 'running';\n const fieldTypeB =\n sortField !== 'G'\n ? FIELDS_OBJ[sortField]\n : b.game.batting.G > 0\n ? 'batting'\n : b.game.fielding.G > 0\n ? 'fielding'\n : 'running';\n\n return a.game[fieldTypeA][sortField] > b.game[fieldTypeB][sortField]\n ? sortDirection === 'asc'\n ? 1\n : -1\n : sortDirection === 'asc'\n ? -1\n : 1;\n });\n }\n\n const leagueStyles = [cl.league];\n playerYears === 'All years' && leagueStyles.push(cl.noCursor);\n\n const yearsAllLeagueTeamTotals =\n currentLeague.id === -1 &&\n currentTeam !== 'All teams' &&\n (currentTeam !== undefined && playerStatsData.teams.find(team => team.name === currentTeam)\n ? playerYears === 'All years'\n ? playerStatsData.teams.find(team => team.name === currentTeam).stats\n : playerStatsData.teams.find(team => team.name === currentTeam).annual_stats[playerYears]\n : null);\n\n const yearsAllLeagueAllTeamTotals =\n currentLeague.id === -1 && currentTeam === 'All teams' && playerYears === 'All years'\n ? playerStatsData.total\n : playerStatsData.total_annual[playerYears];\n\n const selectedLeague = playerStatsData.leagues.find(league => league.id === currentLeague.id);\n\n const getAllLeaguesBodyCells = row => {\n return (\n <>\n {fieldsInfo.map((field, i) => (\n Years
}\n {currentLeague.id === -1 && League
}\n {currentLeague.id !== -1 && (\n \n Game\n
\n )}\n \n
\n \n Team\n
\n {currentLeague.id === -1 && (\n \n {getSortedTableOptions().length > 1 ? (\n
\n - \n {currentLeague.id === -1 ? (\n // All leagues\n <>\n {currentTeam !== 'All teams' ? (\n <>\n {sortedLeagues.map((row, index) => {\n const team = row.teams.find(team => team.name === currentTeam);\n const gRow =\n team.batting.G > 0 ? team.batting : team.fielding?.G > 0 ? team.fielding : team.running;\n return (\n
- \n {playerYears === 'All years' && {row.year}}\n\n {row.title}\n\n{getShortName(team.name, 20)}\n
\n G\n \n {getAllLeaguesBodyCells(team)}\n \n );\n })}\n {yearsAllLeagueTeamTotals && (\n - \n {playerYears === 'All years' && }\n TOTALS\n \n \n )}\n \n ) : (\n <>\n {allTeamGames\n .filter(row => row.game.batting || row.game.fielding || row.game.running || row.game.pitching)\n .map((row, i) => {\n const gRow =\n row.game.batting.G > 0\n ? row.game.batting\n : row.game.fielding?.G > 0\n ? row.game.fielding\n : row.game.running;\n return (\n
- \n {playerYears === 'All years' && {row.year}}\n\n {row.title}\n\n{getShortName(row.team_name, 20)}\n
\n G\n \n\t\t\t\t\t\t\t\t\t\t\t{getAllLeaguesBodyCells(row.game)}\n \n );\n })}\n {yearsAllLeagueAllTeamTotals && (\n - \n {playerYears === 'All years' && }\n TOTALS\n \n \n )}\n \n )}\n \n ) : (\n // Selected league\n <>\n {sortedLeagueGames.map((row, index) => (\n
- \n \n {row.date.slice(8, 10)} {MONTHS[+row.date.slice(5, 7) - 1]},{' '}\n \n {getShortName(row.home_team.name, 20)} - {getShortName(row.visit_team.name, 20)}\n \n\n{getShortName(row.team_name, 20)}\n\t\t\t\t\t\t\t{getSelectedLeagueBodyCells(row)}\n \n ))}\n\n
- \n TOTALS\n \n\t\t\t\t\t\t{getAllLeaguesBodyCells(currentTeam === 'All teams' ? selectedLeague.total : filteredLeague)}\n \n \n )}\n
\n
\n );\n};\n\nexport default ContentBattingTable;\n","import React from 'react';\nimport { useSelector } from 'react-redux';\nimport cl from './ContentPitchingTable.module.scss';\nimport ActiveBodyCell from 'components/UI/ActiveBodyCell/ActiveBodyCell';\nimport { getShortName } from 'utils';\nimport { Link } from 'react-router-dom';\n\nconst ContentPitchingTableBody = ({\n filteredLeagues = [],\n filteredLeague,\n playerYears,\n currentLeague,\n sortField,\n sortDirection,\n MONTHS,\n handleLeagueClick,\n fieldsInfo\n}) => {\n const currentTeam = useSelector(state => state.playerStats.playerCurrentTeam);\n const playerStatsData = useSelector(state => state.playerStats.playerStatsData);\n\n const filteredLeagueGamesSummary =\n filteredLeague &&\n (!Array.isArray(filteredLeague)\n ? filteredLeague.pitching?.games_pitching.reduce((sum, game, i) => {\n const sumGame = {\n ...game,\n team_name: filteredLeague.name\n };\n sum.push(sumGame);\n return sum;\n }, []) || []\n : filteredLeague.reduce((totalSum, team) => {\n const teamGamesArr = team.pitching.games_pitching.reduce((sum, game, i) => {\n const sumGame = {\n ...game,\n team_name: team.name\n };\n sum.push(sumGame);\n return sum;\n }, []);\n\n return totalSum.concat(teamGamesArr);\n }, []));\n\n const sortedLeagueGames =\n filteredLeague &&\n filteredLeagueGamesSummary.slice().sort((a, b) =>\n a.date > b.date\n ? // Number(a[sortField]) > Number(b[sortField])\n sortDirection === 'asc'\n ? 1\n : -1\n : sortDirection === 'asc'\n ? -1\n : 1\n );\n\n let sortedLeagues = [];\n let allTeamGames = [];\n if (currentTeam !== 'All teams') {\n sortedLeagues = filteredLeagues\n .filter(row => row.teams.find(team => team.name === currentTeam).pitching)\n .slice()\n .sort((a, b) =>\n Number(a.teams.find(team => team.name === currentTeam).pitching[sortField]) >\n Number(b.teams.find(team => team.name === currentTeam).pitching[sortField])\n ? sortDirection === 'asc'\n ? 1\n : -1\n : sortDirection === 'asc'\n ? -1\n : 1\n );\n }\n\n if (currentTeam === 'All teams') {\n allTeamGames = filteredLeagues.reduce((totalGames, league) => {\n league.teams.forEach(team =>\n totalGames.push({\n title: league.title,\n year: league.year,\n game: team,\n team_name: team.name,\n id: league.id,\n teams: league.teams\n })\n );\n\n return totalGames;\n }, []);\n\n allTeamGames = allTeamGames.filter(row => row.game.pitching);\n\n allTeamGames.sort((a, b) =>\n Number(a.game.pitching[sortField]) > Number(b.game.pitching[sortField])\n ? sortDirection === 'asc'\n ? 1\n : -1\n : sortDirection === 'asc'\n ? -1\n : 1\n );\n }\n\n const leagueStyles = [cl.league];\n playerYears === 'All years' && leagueStyles.push(cl.noCursor);\n\n const yearsAllLeagueTeamTotals =\n currentLeague.id === -1 &&\n currentTeam !== 'All teams' &&\n (currentTeam !== undefined && playerStatsData.teams.find(team => team.name === currentTeam)\n ? playerYears === 'All years'\n ? playerStatsData.teams.find(team => team.name === currentTeam).stats\n : playerStatsData.teams.find(team => team.name === currentTeam).annual_stats[playerYears]\n : null);\n\n const yearsAllLeagueAllTeamTotals =\n currentLeague.id === -1 && currentTeam === 'All teams' && playerYears === 'All years'\n ? playerStatsData.total\n : playerStatsData.total_annual[playerYears];\n\n const selectedLeague = playerStatsData.leagues.find(league => league.id === currentLeague.id);\n\n const getAllLeaguesBodyCells = row => {\n return (\n <>\n {fieldsInfo.map((field, i) => (\n \n
\n - \n {currentLeague.id === -1 ? (\n //All leagues\n <>\n {currentTeam !== 'All teams' ? (\n <>\n {sortedLeagues.map((row, index) => {\n const team = row.teams.find(team => team.name === currentTeam);\n return team.pitching ? (\n
- \n {playerYears === 'All years' && {row.year}}\n\n {row.title}\n\n{getShortName(team.name, 20)}\n {currentLeague.id === -1 && (\n
\n G\n \n )}\n {getAllLeaguesBodyCells(team)}\n \n ) : (\n <>\n );\n })}\n {yearsAllLeagueTeamTotals && (\n - \n {playerYears === 'All years' && }\n TOTALS\n \n {currentLeague.id === -1 && (\n
\n G\n \n )}\n {getAllLeaguesBodyCells(yearsAllLeagueTeamTotals)}\n \n )}\n \n ) : (\n <>\n {allTeamGames.map((row, i) => {\n return row.game.pitching ? (\n - \n {playerYears === 'All years' && {row.year}}\n\n {row.title}\n\n{getShortName(row.team_name, 20)}\n {currentLeague.id === -1 && (\n
\n G\n \n )}\n {getAllLeaguesBodyCells(row.game)}\n \n ) : (\n <>\n );\n })}\n {yearsAllLeagueAllTeamTotals && (\n - \n {playerYears === 'All years' && }\n TOTALS\n \n {currentLeague.id === -1 && (\n
\n G\n \n )}\n {getAllLeaguesBodyCells(yearsAllLeagueAllTeamTotals)}\n \n )}\n \n )}\n \n ) : (\n //Selected league\n <>\n {sortedLeagueGames.map((row, index) => (\n - \n \n {row.date.slice(8, 10)} {MONTHS[+row.date.slice(5, 7) - 1]},\n \n {getShortName(row.home_team.name, 20)} - {getShortName(row.visit_team.name, 20)}\n \n\n{getShortName(row.team_name, 20)}\n {getSelectedLeagueBodyCells(row)}\n \n ))}\n
- \n TOTALS\n \n {getAllLeaguesBodyCells(currentTeam === 'All teams' ? selectedLeague.total : filteredLeague)}\n \n \n )}\n
\n {playerYears === 'All years' && \n G\n \n )}\n {getHeaderCells()}\n
\n );\n};\n\nexport default ContentPitchingTableHeader;\n","import React, { useState, useEffect } from 'react';\nimport { useSelector } from 'react-redux';\nimport cl from './ContentPitchingTable.module.scss';\nimport ContentPitchingTableBody from './ContentPitchingTableBody';\nimport ContentPitchingTableHeader from './ContentPitchingTableHeader';\n\nconst fieldsInfo = [\n\t{ name: 'GS', type: 'pitching', fixed: null, addedClass: null },\n\t{ name: 'W', type: 'pitching', fixed: null, addedClass: null },\n\t{ name: 'L', type: 'pitching', fixed: null, addedClass: null },\n\t{ name: 'CG', type: 'pitching', fixed: null, addedClass: null },\n\t{ name: 'SV', type: 'pitching', fixed: null, addedClass: null },\n\t{ name: 'IP', type: 'pitching', fixed: null, addedClass: cl.wide2_4 },\n\t{ name: 'PA', type: 'pitching', fixed: null, addedClass: cl.wide },\n\t{ name: 'R', type: 'pitching', fixed: null, addedClass: null },\n\t{ name: 'ER', type: 'pitching', fixed: null, addedClass: null },\n\t{ name: 'H', type: 'pitching', fixed: null, addedClass: null },\n\t{ name: '2B', type: 'pitching', fixed: null, addedClass: null },\n\t{ name: '3B', type: 'pitching', fixed: null, addedClass: null },\n\t{ name: 'HR', type: 'pitching', fixed: null, addedClass: null },\n\t{ name: 'BB', type: 'pitching', fixed: null, addedClass: null },\n\t{ name: 'IBB', type: 'pitching', fixed: null, addedClass: null },\n\t{ name: 'HP', type: 'pitching', fixed: null, addedClass: null },\n\t{ name: 'SH', type: 'pitching', fixed: null, addedClass: null },\n\t{ name: 'SF', type: 'pitching', fixed: null, addedClass: null },\n\t{ name: 'SO', type: 'pitching', fixed: null, addedClass: null },\n\t{ name: 'WP', type: 'pitching', fixed: null, addedClass: null },\n\t{ name: 'BK', type: 'pitching', fixed: null, addedClass: null },\n\t{ name: 'ERA', type: 'pitching', fixed: 3, addedClass: cl.wide3 },\n\t{ name: 'NP', type: 'pitching', fixed: null, addedClass: cl.wide2_2 },\n\t{ name: 'NS', type: 'pitching', fixed: null, addedClass: cl.wide2_2 },\n\t{ name: 'NB', type: 'pitching', fixed: null, addedClass: cl.wide2_2 }\n];\n\nconst ContentPitchingTable = ({\n filteredLeagues = [],\n filteredLeague,\n playerYears,\n MONTHS,\n handleLeagueClick,\n getSortedTableOptions,\n handleTableOptionClick\n}) => {\n const [sortField, setSortField] = useState('G');\n const [sortDirection, setSortDirection] = useState('asc');\n\n const currentLeague = useSelector(state => state.games.currentLeague);\n\n\tuseEffect(() => {\n currentLeague.id !== -1 && sortField === 'G' && setSortField('GS');\n\n // eslint-disable-next-line\n }, [currentLeague.id]);\n\n const handleFieldClick = field => () => {\n sortField !== field ? setSortField(field) : setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc');\n };\n return (\n Years
}\n {currentLeague.id === -1 && League
}\n {currentLeague.id !== -1 && (\n \n Game\n
\n )}\n \n
\n \n Team\n
\n {currentLeague.id === -1 && (\n \n {getSortedTableOptions().length > 1 ? (\n
\n \n
\n );\n};\n\nexport default ContentPitchingTable;\n","import React, { forwardRef } from 'react';\nimport SortField from 'components/UI/sortField/SortField';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { setSortField } from 'redux/playerStatsReducer';\nimport SortArrows from 'components/UI/icons/SortArrows/SortArrows';\n\nconst ContentMobileTableHeader = (\n { cl, playerYears, currentLeague, isScrollable, sortField, sortDirection, fieldsInfo, setSortDirection },\n ref\n) => {\n const tableMode = useSelector(state => state.playerStats.tableType);\n const dispatch = useDispatch();\n\n const getTableHeaders = (sortField, sortDirection, handleFieldClick, arrowStyles = null) => (\n <>\n {currentLeague.id === -1 && (tableMode === 'Batting' || tableMode === 'Pitching') && (\n \n
\n \n
\n \n {playerYears === 'All years' &&
\n )}\n Years
}\n {currentLeague.id === -1 && League
}\n {currentLeague.id !== -1 && (\n \n Game\n \n
\n \n {getTableHeaders(sortField[tableMode], sortDirection, handleFieldClick, {\n top: '.1rem',\n transform: 'translateX(-50%) scale(0.7)'\n })}\n
\n \n );\n};\n\nexport default forwardRef(ContentMobileTableHeader);\n","import React from 'react';\nimport { useSelector } from 'react-redux';\nimport { getShortName } from 'utils';\nimport ActiveBodyCell from 'components/UI/ActiveBodyCell/ActiveBodyCell';\nimport { Link } from 'react-router-dom';\n\nconst ContentMobileTableBody = ({\n cl,\n isScrollable,\n currentLeague,\n currentTeam,\n fieldsInfo,\n filteredLeagues,\n filteredLeague,\n MONTHS,\n handleLeagueClick,\n sortDirection,\n playerYears,\n headerScroll,\n rowScrollRef\n}) => {\n const tableMode = useSelector(state => state.playerStats.tableType);\n const playerStatsData = useSelector(state => state.playerStats.playerStatsData);\n const sortField = useSelector(state => state.playerStats.sortField);\n\n const getTableRows = (row, sortField) => (\n <>\n {currentLeague.id === -1 && (tableMode === 'Batting' || tableMode === 'Pitching') && (\n \n (headerScroll.current.scrollLeft = e.target.scrollLeft)}\n ref={rowScrollRef}>\n {currentLeague.id === -1 ? ( //All leagues\n <>\n {currentTeam !== 'All teams' ? (\n <>\n {sortedLeagues.map((row, index) => {\n const team = row.teams.find(team => team.name === currentTeam);\n\n const gameRow =\n tableMode === 'Pitching'\n ? team.pitching\n : tableMode !== 'Batting'\n ? team[tableMode.toLowerCase()]\n : {\n ...team.batting,\n G:\n team.batting.G > 0\n ? team.batting.G\n : team.fielding.G > 0\n ? team.fielding.G\n : team.running.G\n };\n return (\n \n {getTableRows(gameRow, sortField[tableMode])}\n
\n );\n })}\n {sortedLeagues.length > 0 && (\n \n {currentLeague.id === -1 ? ( //All leagues\n <>\n {currentTeam !== 'All teams' ? (\n <>\n {sortedLeagues.map((row, index) => (\n
\n \n {playerYears === 'All years' &&
\n ))}\n {sortedLeagues.length > 0 && (\n {row.year}
}\n \n {row.title}\n
\n \n {playerYears === 'All years' && }\n
\n )}\n \n ) : (\n <>\n {allTeamGames.map((row, index) => (\n TOTALS
\n \n {playerYears === 'All years' &&
\n ))}\n {allTeamGames.length > 0 && (\n {row.year}
}\n \n {row.title}\n
\n \n {playerYears === 'All years' && }\n
\n )}\n \n )}\n \n ) : (\n //Selected league\n <>\n {sortedLeagueGames.map((row, index) => (\n TOTALS
\n \n
\n ))}\n {sortedLeagueGames.length > 0 && (\n \n
\n \n {row.date.slice(8, 10)} {MONTHS[+row.date.slice(5, 7) - 1]},\n
\n \n {getShortName(row.home_team.name, 14)} - {getShortName(row.visit_team.name, 14)}\n \n \n
\n )}\n \n )}\n \n \n
\n TOTALS
\n \n
\n );\n};\n\nexport default ContentMobileTable;\n","import React from 'react';\nimport ContentBattingTable from '../ContentBattingTable/ContentBattingTable';\nimport ContentPitchingTable from '../ContentPitchingTable/ContentPitchingTable';\nimport ContentMobileTable from '../ContentMobileTable/ContentMobileTable';\nimport { useSelector } from 'react-redux';\nimport NoDataMessage from 'components/NoDataMessage/NoDataMessage';\n\nconst MONTHS = ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec'];\n\nconst ContentTables = ({\n getSortedTableOptions,\n filteredLeagues,\n filteredLeague,\n handleTableOptionClick,\n playerYears,\n handleLeagueClick\n}) => {\n const isMobile = useSelector(state => state.shared.isMobile);\n const tableType = useSelector(state => state.playerStats.tableType);\n\n const isStatsEmpty = getSortedTableOptions().length === 0;\n\n\t// Rendering\n if (isStatsEmpty) return \n \n {animatedValueLeft}\n
\n {title}
\n \n
\n );\n};\n\nconst TotalInfo = ({ data }) => {\n const itemsArr = [\n { par1: 'PA', par2: 'G' },\n { par1: 'Pitches', par2: 'PA' },\n { par1: 'LHP', par2: 'RHP' }\n ];\n return (\n {title}
\n{formattedValue}
\n\n
\n );\n};\n\nexport default TotalInfo;\n","import cl from '../Banner.module.scss';\nimport { usePlayerStatsAnimationCtx } from 'context/PlayerStatsAnimationContext/PlayerStatsAnimationContext';\n\nconst PARAM_VOCABULARY = {\n Swing: 'Swings',\n Miss: 'Misses',\n Take: 'Takes',\n Hits: 'Base Hits',\n Fly: 'Flyes',\n Line: 'Lines',\n\tHitsInPlay: 'Hits In Play'\n};\n\nconst CommonGroupItem = ({ item, parent, staticTitle }) => {\n const { par1, par2 } = item;\n\n\tconst valueCoef = usePlayerStatsAnimationCtx();\n\n if (par1 === null && par2 === null)\n return (\n Total info
\n {itemsArr.map((item, i) => (\n\n \n
\n );\n\n const modifiedStaticTitle = par1 === 'GO' && par2 === 'FC' ? 'Outs' : staticTitle;\n\n const {\n abs: absValue,\n abs_rel: absRelValue,\n rel: value\n } = (par2 !== null ? parent[`${par1}/${par2}`] : parent[par1]) || {};\n\n let title = par2 !== null ? `${par1} & ${par2}` : par1;\n\n title = PARAM_VOCABULARY[par1] ?? title;\n\n title += ` (${absValue ?? '-'} / ${absRelValue ?? '-'} ${modifiedStaticTitle})`;\n\n const formattedValue = value !== '–' ? value : '—';\n\n let animatedValue = '—';\n\n if (formattedValue !== '—') {\n animatedValue =\n valueCoef < 1 && formattedValue !== 0\n ? (formattedValue * valueCoef).toFixed(1)\n : formattedValue ?? '- ';\n animatedValue += '%';\n }\n\n return (\n {title}
\n{animatedValue}
\n \n );\n};\n\nconst CommonGroup = ({ data, param, title, itemsArr, staticTitle }) => (\n\n
\n);\n\nexport default CommonGroup;\n","import cl from '../Banner.module.scss';\nimport classNames from 'classnames';\nimport { usePlayerStatsAnimationCtx } from 'context/PlayerStatsAnimationContext/PlayerStatsAnimationContext';\n\nconst SORT_PRIORITY = {\n '0-0': 1,\n '0-1': 2,\n '1-1': 3,\n '1-2': 4,\n '1-0': 5,\n '2-2': 6,\n '0-2': 7,\n '2-1': 8,\n '3-2': 9,\n '2-0': 10,\n '3-1': 11,\n '3-0': 12\n};\n\nconst CountsDistributionItem = ({ item }) => {\n const [title, { swings, takes }] = item;\n\n const valueCoef = usePlayerStatsAnimationCtx();\n\n function getValues(value, sum) {\n const formattedValue = Number(((value * 100) / sum).toFixed(1));\n\n let animatedValue = '—';\n\n if (formattedValue !== '—') {\n animatedValue =\n valueCoef < 1 && formattedValue !== 0 ? (formattedValue * valueCoef).toFixed(1) : formattedValue;\n animatedValue += '%';\n }\n\n return { formattedValue, animatedValue };\n }\n\n const formattedTitle = `${title} (${swings} / ${takes})`;\n\n const itemClasses = classNames(cl.groupItem, cl.countsGroupItem);\n\n const { formattedValue: valueLeft, animatedValue: animatedValueLeft } = getValues(swings, swings + takes);\n const { formattedValue: valueRight } = getValues(takes, swings + takes);\n const animatedValueRight = valueRight > 0 ? `${Number(((100 - valueLeft) * valueCoef).toFixed(1))}%` : 0;\n return (\n {title}
\n {itemsArr.map((item, i) => (\n\n \n {animatedValueLeft}\n
\n {formattedTitle}
\n \n
\n );\n};\n\nexport default CountsDistribution;\n","import TotalInfo from './Groups/TotalInfo';\nimport CommonGroup from './Groups/CommonGroup';\nimport CountsDistribution from './Groups/CountsDistribution';\n\nconst BannerColumns = ({ parentObj }) => {\n const GROUPS_PARAMS = {\n PlateAppearance: [\n { par1: 'SO', par2: null },\n { par1: 'BB', par2: 'HBP' },\n { par1: 'H', par2: null },\n { par1: 'PO', par2: null },\n { par1: 'E', par2: null }\n ],\n OutsDistribution: [\n { par1: 'FO', par2: null },\n { par1: 'GO', par2: null },\n { par1: 'FC', par2: null }\n ],\n PitchesBySwingDistribution: [\n { par1: 'Swing', par2: null },\n { par1: 'Take', par2: null }\n ],\n BatterSwingResult: [\n { par1: 'Misses', par2: null },\n { par1: 'Fouls', par2: null },\n { par1: 'HitsInPlay', par2: null }\n ],\n HitsDistribution: [\n { par1: 'Hits', par2: null },\n { par1: 'Fly', par2: null },\n { par1: 'Line', par2: null },\n { par1: 'Grounds', par2: null },\n { par1: 'Bunts', par2: null }\n ]\n };\n\n return (\n <>\n Swings/Takes by count distribution
\n {sortedList\n .filter(([_, { swings, takes }]) => swings > 0 || takes > 0)\n .map((item, i) => (\n\n
\n \n
\n \n
\n \n );\n};\n\nexport default BannerColumns;\n","import { PlayerYearsContext } from 'context';\nimport React, { useContext, memo } from 'react';\nimport { useSelector } from 'react-redux';\nimport BannerColumns from './BannerColumns';\nimport PlayerStatsAnimationProvider from 'context/PlayerStatsAnimationContext/PlayerStatsAnimationContext';\n\nconst Banner = () => {\n const { playerYears } = useContext(PlayerYearsContext);\n\n const statsData = useSelector(s => s.playerStats.playerStatsData);\n const currentTeam = useSelector(s => s.playerStats.playerCurrentTeam);\n const currentLeague = useSelector(state => state.games.currentLeague);\n\n const { total, total_annual, teams, leagues } = statsData.batting_banner;\n\n const getParentObj = () => {\n if (playerYears === 'All years' && currentTeam === 'All teams') return total;\n if (playerYears === 'All years' && currentTeam !== 'All teams')\n return teams.find(team => team.name === currentTeam);\n if (currentLeague.id === -1 && currentTeam === 'All teams') return total_annual[playerYears];\n if (currentLeague.id === -1 && currentTeam !== 'All teams')\n return teams.find(team => team.name === currentTeam).annual[playerYears];\n\n const curLeague = leagues.find(league => league.id === currentLeague.id);\n return curLeague.teams.find(team => team.name === currentTeam);\n };\n\n const parentObj = getParentObj();\n return parentObj ? (\n \n {children}\n
\n );\n\n return (\n \n {children(currentOption, setCurrentOption)}\n
\n );\n};\n\nexport default GraphsBlock;\n","import cl from './GraphsHeader.module.scss';\nimport OptionsToggler from 'components/UI/togglers/OptionsToggler/OptionsToggler';\nimport classNames from 'classnames';\nimport TimeDynamicCheckbox from 'components/UI/checkboxes/TimeDynamicCheckbox/TimeDynamicCheckbox';\nimport UpDownArrow from 'components/UI/buttons/UpDownArrow/UpDownArrow';\nimport ArrowDown from 'components/UI/icons/ArrowDown';\n\nconst GraphsHeader = ({\n optionsArr,\n availableOptions,\n title,\n subTitle,\n handleMobileDatasetFilterClick = null,\n currentOption,\n setCurrentOption,\n currentOption2 = null,\n setCurrentOption2 = null,\n currentOption3 = null,\n setCurrentOption3 = null,\n noSelector = false,\n graphsArrow = false,\n classColor = false,\n addedClass = null,\n ...props\n}) => {\n const optionsTogglerStyles = {\n position: 'absolute',\n right: '.4375rem',\n top: currentOption2 !== null ? '30%' : '50%',\n transform: currentOption2 !== null ? 'translateY(-55%)' : 'translateY(-50%)'\n };\n\n const optionsToggler2Styles = {\n position: 'absolute',\n right: '.4375rem',\n bottom: '30%',\n transform: 'translateY(55%)'\n };\n\n const handleOptionClick = option => () => setCurrentOption(option);\n const handleOption2Click = option => () => {\n setCurrentOption2(prev =>\n prev.map(curOption =>\n curOption.name === option.name ? { ...curOption, checked: !curOption.checked } : curOption\n )\n );\n };\n\n const handleArrowClick = () => {\n setCurrentOption3(prev => (prev === 'opened' ? 'closed' : 'opened'));\n };\n\n const titleClasses = classNames(cl.title, {\n [cl.highTitle]: currentOption2 !== null\n });\n return (\n \n
\n );\n};\n\nexport default GraphsHeader;\n","import { memo, useRef, useState, useEffect } from 'react';\nimport { useFrame } from '@react-three/fiber';\nimport { HSVtoRGB } from 'utils';\nimport { useThreeTextCtx } from 'context/ThreeTextCtx';\n// import ComfortaaFont from 'fonts/Comfortaa_Regular.json';\n\n// const TouchPoints = ({ data3D, coef, curveCount }) => (\n// <>\n// {data3D\n// .slice(0, curveCount)\n// .filter(coords => coords[3] === 1)\n// .map(coord => (\n// {title}
\n {handleMobileDatasetFilterClick && (\n \n )}\n{subTitle}
\n {graphsArrow && (\n{text}
;\n};\n\nexport default Tooltip;\n","import classNames from 'classnames';\nimport React, { memo, Suspense, useMemo, useState, useRef, useEffect } from 'react';\nimport { useSelector } from 'react-redux';\nimport cl from './PitchesTrajectories.module.scss';\nimport { Canvas } from '@react-three/fiber';\nimport { FrontSide, TextureLoader } from 'three';\nimport { OrbitControls } from '@react-three/drei';\nimport FieldBg from 'images/field_right.jpg';\nimport Curves from './Curves/Curves';\nimport Tooltip from './Tooltip';\n\nconst OptionsBar = ({ isAutoRotate, handleAutoRotateClick, handleResetClick }) => {\n const rotateBtnClass = classNames({\n [cl.active]: isAutoRotate\n });\n\n return (\n \n
\n );\n};\n\nconst PitchesTrajectories = ({ data }) => {\n const [isAutoRotate, setAutoRotate] = useState(true);\n const [zoomCoef, setZoomCoef] = useState(1);\n const [isGraphVisible, setGraphVisibility] = useState(false);\n const [hovered, setHovered] = useState({ isHovered: false, text: '' });\n\n const graphRef = useRef();\n\n useEffect(() => {\n let options = {\n root: null,\n rootMargin: '300px 0px',\n threshold: 0\n };\n\n let observer = new IntersectionObserver(entries => {\n entries.forEach(entry => {\n const { isIntersecting } = entry;\n\n if (isIntersecting) {\n setGraphVisibility(true);\n } else {\n setGraphVisibility(false);\n }\n });\n }, options);\n observer.observe(graphRef.current);\n\n return () => {\n observer.disconnect();\n };\n }, []);\n\n const { currentMoment } = useSelector(state => state.game);\n\n const controlsRef = useRef();\n const wrapperRef = useRef();\n const pointerTimeout = useRef(null);\n\n useEffect(() => {\n const xCoef = wrapperRef.current.clientWidth / 568.72;\n const yCoef = wrapperRef.current.clientHeight / 497.81;\n const resultCoef = Math.min(xCoef, yCoef);\n\n setZoomCoef(resultCoef);\n }, []);\n\n const handleResetClick = () => controlsRef.current.reset();\n const handleAutoRotateClick = () => setAutoRotate(prev => !prev);\n\n const textureRef = useMemo(() => new TextureLoader().load(FieldBg), []);\n\n const hitsData = data.filter(({ hit_info }) => hit_info.data_3d !== null);\n const isCurves = hitsData.length > 0;\n\n const handlePointerOverCurve = text => {\n clearTimeout(pointerTimeout.current);\n\n setHovered({ isHovered: true, text });\n\n document.body.style.cursor = 'pointer';\n };\n\n const handlePointerOutCurve = text => {\n clearTimeout(pointerTimeout.current);\n\n pointerTimeout.current = setTimeout(() => {\n setHovered({ isHovered: false, text });\n }, 4000);\n\n document.body.style.cursor = 'auto';\n };\n return (\n \n \n \n
\n \n \n {isGraphVisible && (\n \n \n \n\n {isCurves && (\n \n )}\n \n\n
\n );\n};\n\nexport default memo(PitchesTrajectories);\n","const StraightLines = () => (\n <>\n {title}
\n);\n\nconst RadialTitles = ({ minMaxValue, title }) => {\n const { min, max } = minMaxValue;\n\n const minMaxDelta = max - min;\n const valuePerCircle = minMaxDelta / PARAMS.RADIALS_NUMBER;\n\n const titles = [];\n for (let i = 1; i <= PARAMS.RADIALS_NUMBER; i++) {\n titles.push((min + valuePerCircle * i).toFixed(1));\n }\n\n const xCoord = PARAMS.ZERO_X - 4;\n return (\n <>\n {/* Top values */}\n {titles.map((value, i) => {\n const yCoord = PARAMS.ZERO_Y - 20 - i * 22.5;\n const filteredValue = title !== 'Hits by angle, hits' ? value : (value * 10) % 10 ? '' : +value;\n\n return (\n\n\t\t\t\n
\n );\n};\n\nexport default HitsAnglesGraph;\n","import HitsAnglesGraph from './HitsAnglesGraph';\nimport cl from './HitsAnglesGraphs.module.scss';\n\nconst HitsAnglesGraphs = ({ data }) => {\n const notNullAngleData = data.filter(({ hit_info: { angle } }) => angle !== null);\n\n const defaultAnglesValues = [];\n\n for (let i = -90; i <= 80; i += 10) {\n defaultAnglesValues.push({\n deg: i,\n hitsCount: 0,\n sumVelocity: 0,\n avgVelocity: 0,\n sumDistance: 0,\n avgDistance: 0\n });\n }\n\n const angleValues = notNullAngleData.reduce(\n (sum, { hit_info: { angle, distance, 'exit velocity': exitVelocity } }, index) => {\n const resultAngle = Math.floor(angle / 10) * 10;\n const sumIndex = resultAngle / 10 + 9;\n const sumAngleObj = sum[sumIndex];\n\n sumAngleObj.hitsCount++;\n\n sumAngleObj.sumVelocity += exitVelocity;\n\t\t\tif (sumAngleObj.minVelocity === undefined || exitVelocity < sumAngleObj.minVelocity) {\n sumAngleObj.minVelocity = exitVelocity;\n }\n if (sumAngleObj.maxVelocity === undefined || exitVelocity > sumAngleObj.maxVelocity) {\n sumAngleObj.maxVelocity = exitVelocity;\n }\n sumAngleObj.avgVelocity = sumAngleObj.sumVelocity / sumAngleObj.hitsCount;\n\n sumAngleObj.sumDistance += distance;\n\t\t\tif (sumAngleObj.minDistance === undefined || distance < sumAngleObj.minDistance) {\n sumAngleObj.minDistance = distance;\n }\n if (sumAngleObj.maxDistance === undefined || distance > sumAngleObj.maxDistance) {\n sumAngleObj.maxDistance = distance;\n }\n sumAngleObj.avgDistance = sumAngleObj.sumDistance / sumAngleObj.hitsCount;\n\n return sum;\n },\n defaultAnglesValues\n );\n\n return (\n \n
\n );\n};\n\nexport default HitsAnglesGraphs;\n","import { bottomValue } from './FacedGraph.module.scss';\n\nconst BottomValues = ({ minMaxSpeed, PARAMS }) => {\n const valuesDelta = (Math.ceil(minMaxSpeed.max) - Math.floor(minMaxSpeed.min)) / PARAMS.COLS_NUMBER;\n const graphDelta = PARAMS.GRAPH_WIDTH / PARAMS.COLS_NUMBER;\n\n const valuesArr = [];\n for (let i = 0; i <= PARAMS.COLS_NUMBER; i++) {\n valuesArr.push(Math.round((Math.floor(minMaxSpeed.min) + valuesDelta * i) * 10) / 10);\n }\n\n const yCoord = PARAMS.PADDING_TOP + PARAMS.GRAPH_HEIGHT + 20;\n return (\n <>\n {valuesArr.map((value, i) => {\n const xCoord = PARAMS.PADDING_LEFT + i * graphDelta;\n\n return (\n \n {totalClasses\n .filter(classTitle => classTitle !== '')\n .map((classTitle, i) => {\n const xCoord = PARAMS.PADDING_LEFT + 135;\n const yCoord = PARAMS.PADDING_TOP + PARAMS.GRAPH_HEIGHT + 42 + i * 35;\n const minValue = Math.round(minMaxSum[classTitle].min * 2.24);\n const avgValue = Math.round((minMaxSum[classTitle].sum / minMaxSum[classTitle].count) * 2.24);\n const maxValue = Math.round(minMaxSum[classTitle].max * 2.24);\n return (\n
\n );\n};\n\nexport default MobileFooter;\n","import BottomValues from './BottomValues';\nimport cl from './FacedGraph.module.scss';\nimport Footer from './Footer';\nimport Graph from './Graph';\nimport LeftValues from './LeftValues';\nimport StaticLayout from './StaticLayout';\nimport MobileFooter from './MobileFooter';\nimport MobileScrollingWrapper from 'components/PlayerStats/MobileScrollingWrapper/MobileScrollingWrapper';\n\nconst PARAMS = {\n WRAPPER_WIDTH: 940,\n WRAPPER_HEIGHT: 365,\n GRAPH_WIDTH: 829,\n GRAPH_HEIGHT: 277,\n PADDING_LEFT: 63,\n PADDING_TOP: 27,\n ROWS_NUMBER: 4,\n COLS_NUMBER: 12\n};\n\nconst PITCH_CLASSES_PRIORITY = {\n Fastball: 3,\n Breaking: 2,\n Offspeed: 1\n};\n\nconst FacedGraph = ({ data, preview }) => {\n const { pitch_classes: pitchClasses } = preview;\n\n const minMaxSpeed = data.reduce((sum, { pitch_info: { speed } }) => {\n if (sum.min === undefined || speed < sum.min) sum.min = speed;\n if (sum.max === undefined || speed > sum.max) sum.max = speed;\n\n return sum;\n }, {});\n\n minMaxSpeed.min *= 2.24;\n minMaxSpeed.max *= 2.24;\n\n // Left and right speed corridor correction\n minMaxSpeed.min -= 14;\n minMaxSpeed.max += 14;\n\n let totalClasses = [];\n\n const summary = data.reduce((sum, { pitch_info: { speed, pitch_type: pitchType } }) => {\n totalClasses.push(pitchClasses[pitchType]);\n\n const colNumber = Math.floor((Math.floor(speed * 2.24) - Math.floor(minMaxSpeed.min)) / 2);\n if (sum[colNumber] === undefined) {\n sum[colNumber] = { [pitchClasses[pitchType]]: 1 };\n\n return sum;\n }\n\n if (sum[colNumber][pitchClasses[pitchType]] === undefined) {\n sum[colNumber][pitchClasses[pitchType]] = 1;\n\n return sum;\n }\n\n sum[colNumber][pitchClasses[pitchType]]++;\n\n return sum;\n }, {});\n\n totalClasses = Array.from(new Set(totalClasses)).sort((a, b) =>\n PITCH_CLASSES_PRIORITY[a] > PITCH_CLASSES_PRIORITY[b] ? -1 : 1\n );\n\n const maxCount = Object.values(summary).reduce((max, col) => {\n Object.values(col).forEach(value => {\n if (value > max) max = value;\n });\n\n return max;\n }, 0);\n\n return (\n {classTitle} (Min:{minValue}, Avg:{avgValue}, Max:{maxValue})\n\t\t\t\t\t\t\t{/* \n\t\t\t\t\t\t\t\n {classTitle} (Min:{minValue}, Avg:{avgValue}, Max:{maxValue})\n */}\n
\n );\n })}\n {classTitle} (Min:{minValue}, Avg:{avgValue}, Max:{maxValue})
*/}\n {/* {title}
;\n};\n\nexport default GraphTitle;\n","import { useRef, useLayoutEffect, useState, Fragment } from 'react';\nimport cl from './TwinPitchesGraph.module.scss';\nimport { getPitchСlassColorByName } from 'utils';\nimport Tooltip from './Tooltip';\nimport useIntersection from 'hooks/useIntersection';\nimport GraphTitle from './GraphTitle';\nimport MobileScrollingWrapper from 'components/PlayerStats/MobileScrollingWrapper/MobileScrollingWrapper';\nimport classNames from 'classnames';\n\nconst PARAMS = {\n GRAPH_WIDTH: 713,\n GRAPH_HEIGHT: 388,\n SIDE_PADDING: 30\n};\n\nconst Dots = ({ arrData, pitchClasses, coords, setHoveredDot }) => {\n const handleDotClick = (gameId, momentId) => () => {\n window.open(`/game/${gameId}?card=${momentId}&tab=pitching`, '_blank');\n };\n\n return (\n <>\n {arrData.map((pitch, i) => {\n const { coordinates, pitch_info: pitchInfo } = pitch;\n const { zone_x: x, zone_y: y } = coordinates;\n const { pitch_type: pitchType, game_id: gameId, mom_id: momentId, speed } = pitchInfo;\n\n const { xCoordRelCoef, yCoordAbsCoef, yCoordRelCoef, zeroXCoord, zeroYCoord } = coords;\n\n const xCoord = zeroXCoord + x * xCoordRelCoef;\n const yCoord = y === 0 ? zeroYCoord : zeroYCoord - y * yCoordRelCoef + yCoordAbsCoef;\n return (\n\n \n {isGraphVisible && (\n
\n {title && \n {Object.entries(relValuesData)\n .sort((a, b) => (a[1].count > b[1].count ? -1 : 1))\n .map((entry, index) => (\n \n \n ))}\n
\n );\n};\n\nexport default TwinPitchesGraphs;\n","import ArsenalGraph from 'components/PlayerStats/ArsenalGraph/ArsenalGraph';\n\nconst ArsenalGraphs = ({ filteredData, currentOption, currentOption2, pitchClasses }) => {\n return (\n <>\n \n \n {isActive && (\n <>\n e.preventDefault()}>
\n \n {title}\n
\n\n 0}\n JSONspeeds={JSON.stringify(pitchClass[1].speeds)}\n />\n ))}\n
\n );\n};\n\nconst GroupItem = ({ data, groupName, handleFilterClick, currentFilterValues }) => {\n const { name, absValue, absValueTotal, relValue, staticText } = data;\n const isRelValueNumber = typeof relValue === 'number' && !isNaN(relValue);\n\n const dataValue = isRelValueNumber ? `${relValue}%` : isNaN(relValue) ? '-' : relValue;\n return (\n \n );\n};\n\nconst Group = ({\n data,\n groupData,\n currentFilterValues,\n handleFilterClick,\n filteredTeamName,\n filteredPlayerFullName\n}) => {\n const { title, groupName, items } = groupData;\n\n const teamName = currentFilterValues.pitcher === 'team' ? filteredTeamName : null;\n const playerFullName = currentFilterValues.pitcher === 'pitcher' ? filteredPlayerFullName : null;\n\n const filteredData = useFilterBatterGroupData(\n data,\n currentFilterValues,\n groupName,\n teamName,\n playerFullName\n );\n\n const total =\n groupName === 'swing' || groupName === 'contact'\n ? filteredData\n .map(pitch => pitch.result)\n .filter(group =>\n groupName === 'swing'\n ? group[FIELD_NAMES[groupName]['Miss']] || group[FIELD_NAMES[groupName]['Contact']]\n : group[FIELD_NAMES[groupName]['Base hits & Hard hit']] ||\n group[FIELD_NAMES[groupName]['Slow hit']] ||\n group[FIELD_NAMES[groupName]['Fly']] ||\n group[FIELD_NAMES[groupName]['Line']] ||\n group[FIELD_NAMES[groupName]['Grounds']]\n )\n : groupName === 'type'\n ? filteredData.map(pitch => pitch.pitch_info)\n : filteredData.map(pitch => pitch[groupName]);\n\n const totalLength = total.length;\n\n const modifiedGroupData = items.map(({ name, staticText }) => {\n const paramName = FIELD_NAMES[groupName][name];\n\n const getAbsValue = () => {\n if (paramName === 'all') return totalLength;\n\n if (groupName === 'type') {\n const { pitch_classes: pitchClasses } = data.preview;\n\n return total.filter(({ pitch_type: pitchType }) => paramName === pitchClasses[pitchType]).length;\n }\n\n return total.filter(group => group[paramName]).length;\n };\n\n const absValue = getAbsValue();\n\n return {\n name,\n staticText,\n absValue,\n absValueTotal: totalLength,\n relValue:\n paramName === 'all' ? 100 : totalLength > 0 ? +((absValue * 100) / totalLength).toFixed(1) : 0 ?? '-'\n };\n });\n\n // const leftHandedRelValue = rightHandedRelValue !== '-' ? 100 - rightHandedRelValue : '-';\n\n return (\n Pitch speed
\n {Object.entries(summary).map((pitchClass, i) => (\n\n
\n );\n};\n\nconst TextGroup = ({ setTextGroupFilter, data }) => {\n function getSortedArr(set) {\n return Array.from(set).sort((a, b) => (a > b ? 1 : -1));\n }\n\n const uniqueValues = useMemo(() => {\n const defaultValues = { teams: new Set(), games: new Set(), pitchers: new Set() };\n const tempData = data.reduce((sum, cur) => {\n const {\n team_name: teamName,\n 'pitcher name': pitcherName,\n 'pitcher surname': pitcherSurname\n } = cur.pitcher;\n const { date } = cur.pitch_info;\n\n sum.teams.add(teamName);\n sum.games.add(`${date.slice(8, 10)}/${date.slice(5, 7)} ${teamName}`);\n sum.pitchers.add(`${pitcherName} ${pitcherSurname}`);\n\n return sum;\n }, defaultValues);\n\n tempData.teams = getSortedArr(tempData.teams);\n tempData.games = getSortedArr(tempData.games);\n tempData.pitchers = getSortedArr(tempData.pitchers);\n\n return tempData;\n }, [data]);\n return (\n {title}
\n {modifiedGroupData.map((item, i) => (\n\n
\n );\n};\n\nconst CustomGroup = ({ data, currentFilterValues, handleFilterClick }) => {\n const againstFilteredData =\n data.pitches_all?.filter(\n batt =>\n (currentFilterValues.count === 'all' ? true : batt.count[currentFilterValues.count]) &&\n (currentFilterValues.zone === 'all' ? true : batt.zone[currentFilterValues.zone]) &&\n (currentFilterValues.result === 'all' ? true : batt.result[currentFilterValues.result]) &&\n (currentFilterValues.swing === 'all' ? true : batt.result[currentFilterValues.swing]) &&\n (currentFilterValues.contact === 'all' ? true : batt.result[currentFilterValues.contact])\n ) || [];\n\n const totalPitchers = againstFilteredData.reduce((sum, cur) => {\n const existPitcherIndex = sum.findIndex(pitcher => pitcher.h_id === cur.pitcher.h_id);\n existPitcherIndex === -1 && sum.push(cur.pitcher);\n\n return sum;\n }, []);\n\n const leftHandedPitchers = totalPitchers.filter(pitcher => pitcher.LHP);\n const rightHandedPitchersLength = totalPitchers.length - leftHandedPitchers.length;\n\n const rightHandedRelValue =\n totalPitchers.length > 0\n ? +((rightHandedPitchersLength * 100) / totalPitchers.length).toFixed(1)\n : 0 ?? '-';\n const leftHandedRelValue =\n totalPitchers.length > 0\n ? +((leftHandedPitchers.length * 100) / totalPitchers.length).toFixed(1)\n : 0 ?? '-';\n\n const customGroupData = {\n title: 'Against who',\n items: [\n {\n name: 'All pitchers',\n absValue: totalPitchers.length,\n absValueTotal: totalPitchers.length,\n relValue: 100,\n staticText: 'players'\n },\n {\n name: 'Right handed',\n absValue: rightHandedPitchersLength,\n absValueTotal: totalPitchers.length,\n relValue: rightHandedRelValue,\n staticText: 'players'\n },\n {\n name: 'Left handed',\n absValue: leftHandedPitchers.length,\n absValueTotal: totalPitchers.length,\n relValue: leftHandedRelValue,\n staticText: 'players'\n }\n ]\n };\n\n const { title, items } = customGroupData;\n return (\n \n {\n setTextGroupFilter(prev => ({ ...prev, team: value }));\n }}\n handleClick={value => {\n setTextGroupFilter(prev => ({ ...prev, team: value }));\n }}\n listValues={uniqueValues.teams}\n isAllOption\n />\n
\n Team
\n\n {\n setTextGroupFilter(prev => ({ ...prev, game: value }));\n }}\n handleClick={value => {\n setTextGroupFilter(prev => ({ ...prev, game: value }));\n }}\n listValues={uniqueValues.games}\n isAllOption\n />\n
\n Game
\n\n {\n setTextGroupFilter(prev => ({ ...prev, pitcher: value }));\n }}\n handleClick={value => {\n setTextGroupFilter(prev => ({ ...prev, pitcher: value }));\n }}\n listValues={uniqueValues.pitchers}\n isAllOption\n />\n
\n Pitcher
\n\n
\n );\n};\n\nconst LeftColumnOptions = ({\n battingData = {},\n data = {},\n handleFilterClick,\n handleSpeedFilterChange,\n currentFilterValues,\n filteredTeamName,\n filteredPlayerFullName,\n handleTeamNameChange,\n handlePlayerNameChange,\n setTextGroupFilter,\n isDatasetFilterVisible,\n setDatasetFilterVisible\n}) => {\n const groupsArr = [\n {\n title: 'Count',\n groupName: 'count',\n\n items: [\n {\n name: 'Any count',\n staticText: 'pitches'\n },\n { name: 'First pitches', staticText: 'pitches' },\n { name: 'Close to BB', staticText: 'pitches' },\n { name: '2 strikes', staticText: 'pitches' },\n { name: 'Other', staticText: 'pitches' }\n ]\n },\n {\n title: 'Pitch type',\n groupName: 'type',\n items: [\n { name: 'All pitches', staticText: 'pitches' },\n { name: 'Fastballs', staticText: 'pitches' },\n { name: 'Breaking', staticText: 'pitches' },\n { name: 'Offspeed', staticText: 'pitches' }\n ]\n },\n {\n title: 'Pitch speed',\n groupName: 'speed',\n items: [\n { title: 'Fastballs', r: 217, g: 43, b: 51, bgColor: '#D92B33' },\n { title: 'Breaking', r: 36, g: 168, b: 215, bgColor: '#24A8D7' },\n { title: 'Offspeed', r: 141, g: 181, b: 142, bgColor: '#8DB58E' }\n ]\n },\n {\n title: 'Pitch zone',\n groupName: 'zone',\n items: [\n { name: 'Any zone', staticText: 'pitches' },\n { name: 'Low', staticText: 'pitches' },\n { name: 'High', staticText: 'pitches' },\n { name: 'Outside', staticText: 'pitches' },\n { name: 'Inside', staticText: 'pitches' }\n ]\n },\n {\n title: 'Result',\n groupName: 'result',\n items: [\n { name: 'All pitches', staticText: 'pitches' },\n { name: 'Swing', staticText: 'pitches' },\n { name: 'Take', staticText: 'pitches' }\n ]\n },\n {\n title: ' ',\n groupName: 'swing',\n items: [\n { name: 'All swings', staticText: 'swings' },\n { name: 'Miss', staticText: 'swings' },\n { name: 'Contact', staticText: 'swings' }\n ]\n },\n {\n title: ' ',\n groupName: 'contact',\n items: [\n { name: 'All contacts', staticText: 'contacts' },\n { name: 'Base hits & Hard hit', staticText: 'contacts' },\n { name: 'Slow hit', staticText: 'contacts' },\n { name: 'Fly', staticText: 'contacts' },\n { name: 'Line', staticText: 'contacts' },\n { name: 'Grounds', staticText: 'contacts' }\n ]\n }\n ];\n\n const handleCrossClick = () => {\n setDatasetFilterVisible(false);\n };\n\n const outerWrapperClasses = classNames(cl.leftColumnOuterWrapper, {\n [cl.visible]: isDatasetFilterVisible\n });\n return (\n {title}
\n {items.map((item, i) => (\n\n
\n );\n};\n\nconst RightColumnGraphs = ({\n currentFilterValues,\n filteredTeamName,\n filteredPlayerFullName,\n data,\n setDatasetFilterVisible\n}) => {\n const { preview } = data;\n const { pitch_classes: pitchClasses } = preview;\n\n const { name: playerName, surname: playerSurname } = useSelector(\n state => state.playerStats.playerStatsData\n );\n\n const isMobile = useSelector(s => s.shared.isMobile);\n\n const teamName = currentFilterValues.batter === 'team' ? filteredTeamName : null;\n const playerFullName = currentFilterValues.batter === 'batter' ? filteredPlayerFullName : null;\n\n const filteredData = useFilterBatterGroupData(data, currentFilterValues, 'all', teamName, playerFullName);\n\n // Count and speed values\n const relValuesData = filteredData.reduce((sum, pitch) => {\n const { pitch_type } = pitch.pitch_info;\n\n const pitchClass = pitchClasses[pitch_type];\n\n if (sum[pitchClass] !== undefined) {\n sum[pitchClass].count += 1;\n sum[pitchClass].pitches.push(pitch);\n\n return sum;\n }\n\n sum[pitchClass] = {\n count: 1,\n pitches: [pitch]\n };\n\n return sum;\n }, {});\n\n const handleMobileDatasetFilterClick = () => {\n setDatasetFilterVisible(true);\n };\n\n return (\n \n \n Dataset filter\n
\n
\n \n Dataset filter\n
\n \n
\n \n \n \n \n \n \n \n \n {(currentOption, setCurrentOption) => (\n <>\n \n\n \n {(\n currentOption,\n setCurrentOption,\n currentOption2,\n setCurrentOption2,\n currentOption3,\n setCurrentOption3\n ) => (\n <>\n
\n );\n};\n\nconst FilteredGraphs = ({ battingData }) => {\n const [currentFilterValues, setCurrentFilterValues] = useState({\n pitcher: 'all',\n count: 'all',\n type: 'all',\n speed: {\n '': { min: 0, max: 10000 },\n Fastball: { min: 0, max: 10000 },\n Breaking: { min: 0, max: 10000 },\n Offspeed: { min: 0, max: 10000 }\n },\n zone: 'all',\n result: 'all',\n swing: 'all',\n contact: 'all'\n });\n\n const [filteredTeamName, setFilteredTeamName] = useState('');\n const [filteredPlayerFullName, setFilteredPlayerFullName] = useState('');\n\n const [textGroupFilter, setTextGroupFilter] = useState({ team: '', game: '', pitcher: '' });\n\n const [isDatasetFilterVisible, setDatasetFilterVisible] = useState(false);\n\n useEffect(() => () => (document.body.style = ''), []);\n\n useEffect(() => {\n if (isDatasetFilterVisible) {\n document.body.style.overflow = 'hidden';\n document.body.style.touchAction = 'none';\n return;\n }\n\n document.body.style = '';\n }, [isDatasetFilterVisible]);\n\n const filteredData = useMemo(() => {\n function checkFieldIdentity(comparedFields, fieldFilter, exactComparing = true) {\n if (fieldFilter === '') return true;\n\n const filterArr = fieldFilter.split(' ');\n\n return filterArr.reduce((sum, word) => {\n if (\n !exactComparing &&\n !comparedFields.some(\n field => String(field).slice(0, word.length).toLowerCase() === String(word).toLowerCase()\n )\n ) {\n sum = false;\n }\n\n if (\n exactComparing &&\n !comparedFields.some(field => String(field).toLowerCase() === String(word).toLowerCase())\n ) {\n sum = false;\n }\n\n return sum;\n }, true);\n }\n\n function gameDataCheck(gameFilter, { date }, { team_name: teamName }) {\n if (gameFilter === '') return true;\n\n const filteredWords = gameFilter.split(' ');\n\n return filteredWords.reduce((result, word) => {\n if (result === false) return result;\n\n const regex = /([0-3][0-9]\\/[0-1][0-9])/;\n const matchedRegex = word.match(regex);\n if (matchedRegex) {\n const day = matchedRegex[0].slice(0, 2);\n const month = matchedRegex[0].slice(3, 5);\n\n const dateDay = date.slice(8, 10);\n const dateMonth = date.slice(5, 7);\n\n if (day !== dateDay || month !== dateMonth) return false;\n return true;\n }\n\n if (word === '') return result;\n\n return teamName.toLowerCase() === word.toLowerCase();\n }, true);\n }\n\n const { pitches_all: pitchesAll } = battingData;\n\n const newPitchesAll = pitchesAll.filter(({ pitcher, pitch_info: pitchInfo }) => {\n const { team: teamFilter, game: gameFilter, pitcher: pitcherFilter } = textGroupFilter;\n\n return (\n checkFieldIdentity([pitcher.team_name], teamFilter) &&\n gameDataCheck(gameFilter, pitchInfo, pitcher) &&\n // checkFieldIdentity([pitchInfo.game_id], gameFilter) &&\n checkFieldIdentity([pitcher['pitcher name'], pitcher['pitcher surname']], pitcherFilter)\n );\n });\n\n return { preview: battingData.preview, pitches_all: newPitchesAll };\n }, [textGroupFilter, battingData]);\n\n function handleFilterClick(groupName, value) {\n setCurrentFilterValues(prev => ({ ...prev, [groupName]: value }));\n }\n function handleSpeedFilterChange(pitchClassName, value) {\n let { min: mSValueMin, max: mSValueMax } = value;\n mSValueMin /= 2.24;\n mSValueMax /= 2.24;\n\n setCurrentFilterValues(prev => ({\n ...prev,\n speed: { ...prev.speed, [pitchClassName]: { min: mSValueMin, max: mSValueMax } }\n }));\n }\n\n const handleTeamNameChange = name => {\n setFilteredTeamName(name);\n };\n const handlePlayerNameChange = name => {\n setFilteredPlayerFullName(name);\n };\n\n return (\n \n
\n );\n};\n\nexport default FilteredGraphs;\n","import React from 'react';\nimport cl from './BatterContentGraphs.module.scss';\nimport Banner from './Banner/Banner';\nimport FilteredGraphs from './FilteredGraphs/FilteredGraphs';\n\nconst BatterContentGraphs = ({ battingData }) => {\n const isFilteredGraphs = !!battingData;\n\t\n return (\n \n
\n );\n};\n\nexport default BatterContentGraphs;\n","import React, { useContext } from 'react';\nimport cl from './Content.module.scss';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { setTableType, setPlayerCurrentTeam } from 'redux/playerStatsReducer';\nimport { setCurrentLeague } from 'redux/gamesReducer';\nimport ContentMobilePlayerInfo from './ContentMobilePlayerInfo';\nimport PitcherContentGraphs from '../PitcherContentGraphs/PitcherContentGraphs';\nimport ContentTables from '../ContentTables/ContentTables';\nimport { PlayerYearsContext } from 'context';\nimport BatterContentGraphs from '../BatterContentGraphs/BatterContentGraphs';\n\nconst Content = ({ pitchesData, battingData }) => {\n const { playerYears, calculateTeamsArray } = useContext(PlayerYearsContext);\n\n const {\n playerStatsData: statsData,\n playerCurrentTeam: currentTeam,\n tableType\n } = useSelector(state => state.playerStats);\n const currentLeague = useSelector(state => state.games.currentLeague);\n const isMobile = useSelector(state => state.shared.isMobile);\n const dispatch = useDispatch();\n\n const handleTableOptionClick = option => {\n const teamsArray = calculateTeamsArray(option);\n\n dispatch(setPlayerCurrentTeam(teamsArray.length > 1 ? 'All teams' : teamsArray[0]));\n dispatch(setTableType(option));\n };\n\n const filteredLeagues =\n playerYears === 'All years'\n ? currentTeam === 'All teams'\n ? statsData.leagues.filter(league => league.teams.find(team => team[tableType.toLowerCase()]))\n : statsData.leagues.filter(league =>\n league.teams.find(team => team.name === currentTeam && team[tableType.toLowerCase()])\n )\n : currentTeam === 'All teams'\n ? statsData.leagues.filter(\n league => league.year === playerYears && league.teams.find(team => team[tableType.toLowerCase()])\n )\n : statsData.leagues.filter(\n league =>\n league.year === playerYears &&\n league.teams.find(team => team.name === currentTeam && team[tableType.toLowerCase()])\n );\n\n const selectedLeague = statsData.leagues.find(league => league.id === currentLeague.id);\n\n const filteredLeague =\n currentLeague.id === -1\n ? null\n : currentTeam === 'All teams'\n ? selectedLeague.teams\n : selectedLeague.teams.find(team => team.name === currentTeam && team[tableType.toLowerCase()]) || [];\n\n const handleLeagueClick = league => () => {\n if (playerYears === 'All years') return;\n dispatch(setCurrentLeague(league));\n\n if (league.id === -1) {\n const teamsArr = Array.from(\n statsData.leagues\n .filter(league => league.year === playerYears)\n .reduce((sum, league) => {\n league.teams.forEach(team => sum.add(team.name));\n return sum;\n }, new Set())\n );\n\n dispatch(setPlayerCurrentTeam(teamsArr.length > 1 ? 'All teams' : teamsArr[0]));\n return;\n }\n\n dispatch(setPlayerCurrentTeam(league.teams.length > 1 ? 'All teams' : league.teams[0].name));\n };\n\n //Table options calculating\n function getSortedTableOptions() {\n const options = [];\n const anotherTableType = tableType === 'Batting' ? 'Pitching' : 'Batting';\n\n //All leagues\n if (currentLeague.id === -1) {\n if (filteredLeagues.length > 0) options.push(tableType);\n\n const anotherTableTypeFilteredLeagues =\n playerYears === 'All years'\n ? currentTeam === 'All teams'\n ? statsData.leagues.filter(league =>\n league.teams.find(team => team[anotherTableType.toLowerCase()])\n )\n : statsData.leagues.filter(league =>\n league.teams.find(team => team.name === currentTeam && team[anotherTableType.toLowerCase()])\n )\n : currentTeam === 'All teams'\n ? statsData.leagues.filter(\n league =>\n league.year === playerYears && league.teams.find(team => team[anotherTableType.toLowerCase()])\n )\n : statsData.leagues.filter(\n league =>\n league.year === playerYears &&\n league.teams.find(team => team.name === currentTeam && team[anotherTableType.toLowerCase()])\n );\n\n if (anotherTableTypeFilteredLeagues.length > 0) options.push(anotherTableType);\n\n //Sort options\n options.sort((a, b) => (a > b ? 1 : -1));\n return options;\n }\n\n //Selected league\n const filteredLeague = selectedLeague.teams.find(team => team.name === currentTeam);\n\n if (filteredLeague) {\n filteredLeague.batting && options.push('Batting');\n filteredLeague.pitching && options.push('Pitching');\n } else {\n selectedLeague.teams.find(team => team.batting) && options.push('Batting');\n selectedLeague.teams.find(team => team.pitching) && options.push('Pitching');\n }\n\n return options;\n }\n\n const isBatterGraphs =\n (tableType === 'Batting' || tableType === 'Running' || tableType === 'Fielding') &&\n getSortedTableOptions().length !== 0 &&\n statsData.batting_banner.teams.length > 0;\n\n const isPitcherGraphs =\n tableType === 'Pitching' &&\n getSortedTableOptions().length !== 0 &&\n statsData.pitcher_banner.teams.length > 0;\n return (\n \n
\n \n {Object.keys(statsData).length === 0 ? (\n <>\n ) : (\n <>\n {isMobile &&
\n \n
\n {isBatterGraphs && \n {statsData.pos || '—'} | B/T: {statsData.bat_hand}/{statsData.throw_hand} |{' '}\n {statsData.height} {statsData.weight}LBS | Age: {new Date().getFullYear() - statsData.yob}\n
\n\n {/* */}\n
\n );\n};\n\nexport default Content;\n","import Content from 'components/ThreePage/Content/Content';\nimport React from 'react';\n\nconst ThreePage = () => {\n return