\n\t\t
\n\t\t\t{renderHeader()}\n\t\t
\n\t\t
\n\t\t\t
\n\t\t\t{renderBody()}\n\t\t
\n\t
\n};\n\nexport default Numbers;\n","import { makeStyles } from \"@material-ui/core/styles\";\nimport { font } from \"config/styles\";\n\nexport const useStyles = makeStyles((theme) => ({\n winners: {\n position: 'relative',\n display: 'flex',\n // flex: '1',\n // width: '100%',\n borderRadius: '5px',\n justifyContent:'center',\n flexDirection: 'column',\n alignItems: 'flex-start',\n // backgroundColor: '#2e041c',\n [theme.breakpoints.down('sm')]: {\n // maxWidth: '1560px',\n // width: '100%',\n },\n },\n\n winner_title: {\n position: 'relative',\n display: 'flex',\n alignItems: 'flex-end',\n justifyContent: 'flex-start',\n verticalAlign:'text-bottom',\n [theme.breakpoints.down('xs')]: {\n justifyContent: 'center',\n width: '100%'\n },\n '& span': {\n // display: 'flex',\n textTransform: 'uppercase',\n alignItems: 'flex-start',\n justifyContent: 'flex-end',\n fontFamily: font.boldFamily,\n margin: '0px',\n height: 'auto',\n color: '#ffbd76',\n display: 'inline-block',\n verticalAlign:'middle',\n fontSize: font.largeSize,\n [theme.breakpoints.down('sm')]: {\n fontSize: font.largeSize__mobile,\n },\n [theme.breakpoints.down('xs')]: {\n fontSize: '4.2vw',\n }\n }\n },\n title_container: {\n display: 'flex',\n alignItems: 'flex-end',\n justifyContent: 'flex-end',\n verticalAlign:'text-bottom',\n height: '40px',\n '& span': {\n textTransform: 'uppercase',\n alignItems: 'flex-start',\n justifyContent: 'flex-end',\n fontFamily: font.boldFamily,\n margin: '0px',\n height: 'auto',\n color: '#ffbd76',\n display: 'inline-block',\n verticalAlign:'bottom',\n fontSize: font.largeSize,\n [theme.breakpoints.down('sm')]: {\n fontSize: font.largeSize__mobile,\n },\n [theme.breakpoints.down('xs')]: {\n fontSize: '4.2vw',\n }\n }\n },\n\n winners__table__wrapper: {\n position: 'relative',\n backgroundPosition: 'center center',\n backgroundRepeat: 'no-repeat',\n backgroundAttachment: 'scroll',\n backgroundSize: \"auto 100%\",\n // backgroundColor: '#fff',\n animation: 'fadeIn ease-in .5s',\n transition: 'all .5s ease-in-out',\n\n display: 'flex',\n width: 'auto',\n alignItems:'center',\n flexDirection: 'column',\n justifyContent: 'space-around',\n padding: '20px',\n [theme.breakpoints.down('sm')]: {\n fontSize: font.nomalSize__mobile,\n },\n },\n\n winners__table: {\n display: 'flex',\n justifyContent: 'center',\n flex: '1',\n zIndex: 2\n // backgroundColor: '#2e041c',\n \n },\n image_bg: {\n display: 'flex',\n position: 'absolute',\n height: '100%',\n zIndex: 0,\n },\n\n contanner__image: {\n display: 'flex',\n position: 'relative',\n height: '100%',\n width: '80px',\n },\n\n image_ball: {\n position: 'absolute',\n zIndex: 1,\n top: '-8%',\n left: '85%',\n height: '100px',\n width: 'auto',\n [theme.breakpoints.down('sm')]: {\n height: '90px',\n },\n [theme.breakpoints.down('xs')]: {\n margin:'2px 2px 0px 2px',\n height: '80px',\n }\n },\n}));\n","import React from 'react';\nimport TableNumber from 'components/Numbers';\nimport { useStyles } from './styles';\nimport Image from 'react-image-webp';\n\nimport ball from 'assets/img/home/ball.png';\nimport ballWepb from 'assets/imgWebp/ball.webp';\n\nimport Background from 'assets/img/home/a.png';\nimport BackgroundWepb from 'assets/imgWebp/a.webp';\n\nimport './styles.css'\n\nconst TableTopThree = ({data}) => {\n const classes = useStyles()\n\n const renderImage = ()=> {\n if(data && data.length > 0) {\n\t\treturn <>\n\t\t\t
\n\t\t\t
\n\t\t\n\t}\n\treturn null\n }\n\n return
\n
\n {renderImage()}\n {\n data.map((item, index)=> {\n return
\n })\n }\n
\n
\n};\n\nexport default TableTopThree;\n","import { makeStyles } from \"@material-ui/core/styles\";\n\nimport { color, font } from \"config/styles\";\n\nexport const useStyles = makeStyles((theme) => ({\n table: {\n width: '100%',\n borderSpacing: '0px',\n overflow: 'hidden',\n '& th, td': {\n },\n '& table': {\n borderCollapse: 'collapse',\n overflow: 'hidden'\n },\n fontSize: font.largeSize,\n [theme.breakpoints.down('sm')]: {\n fontSize: font.largeSize__mobile,\n },\n },\n\n table__header: {\n '& tr': {\n height: '60px',\n backgroundColor: color.tableHeader,\n },\n '& th': {\n textAlign: 'left',\n },\n\n [theme.breakpoints.down('sm')]: {\n '& tr': {\n height: '9.375vw',\n },\n },\n },\n\n table__body: {\n '& tr': {\n height: '40px',\n },\n\n [theme.breakpoints.down('sm')]: {\n '& tr': {\n height: '6.25vw',\n },\n },\n },\n table_container_numers: {\n display: 'flex',\n alignItems:'center',\n justifyContent: 'center',\n flexDirection: 'colum',\n margin:'6px',\n },\n table_number: {\n display: 'flex',\n alignItems:'center',\n justifyContent: 'center',\n borderRadius: '5px',\n width: '35px',\n height: '35px',\n fontSize: '28px',\n padding: '1px',\n margin: '2px',\n fontFamily: font.boldFamily,\n boxSizing: 'content-box',\n color: '#fff',\n backgroundColor: '#22599a',\n [theme.breakpoints.down('sm')]: {\n borderRadius: '4px',\n fontSize: '24px',\n width: '32px',\n height: '32px',\n margin: '2px',\n },\n [theme.breakpoints.down('xs')]: {\n borderRadius: '2px',\n fontSize: '5vw',\n width: '5vw',\n height: '5vw',\n margin: '1px',\n }\n }\n}));\n","import React from 'react';\nimport { map } from 'lodash';\n\nimport { useStyles } from './styles';\n\nconst Table = ({data = {}, hasHeader}) => {\n const classes = useStyles();\n\n const renderHeader = () => {\n const { header } = data;\n if (hasHeader) {\n return
\n {\n map(header, (head, i) =>\n | {head} | \n )\n }\n
\n }\n return null;\n };\n\n const renderBody = () => {\n const { body } = data;\n\n return map(body, (row, i) =>
\n {\n map(row, (item, j) => {\n if (item.length && item.length > 0) {\n return {map(item, (number, z)=>{number})} | \n }\n return {item} | \n })\n }\n
)\n };\n\n return
\n \n {renderHeader()}\n \n \n {renderBody()}\n \n
\n};\n\nexport default Table;\n","import { makeStyles } from \"@material-ui/core/styles\";\n\nimport {font } from \"config/styles\";\n\nexport const useStyles = makeStyles((theme) => ({\n winners: {\n // width: '100%',\n position: 'relative',\n padding: '5px',\n // backgroundColor: '#2e041c',\n margin: '80px 100px 20px 0px',\n // height: '200px',\n borderRadius: '5px',\n [theme.breakpoints.down('sm')]: {\n margin: '60px 0px 10px 0px',\n },\n [theme.breakpoints.down('xs')]: {\n margin: '30px 0px 10px 0px',\n }\n },\n\n\n winners__table__wrapper: props => ( {\n display: 'flex',\n width: '100%',\n zIndex: 1,\n justifyContent: 'space-around',\n [theme.breakpoints.down('sm')]: {\n fontSize: font.nomalSize__mobile,\n },\n }),\n\n winners__table: {\n display: 'inline-block',\n width: '100%',\n margin: '1px',\n zIndex: 1,\n [theme.breakpoints.down('sm')]: {\n width: '100%',\n },\n },\n\n winner_title: {\n position: 'relative',\n display: 'flex',\n alignItems: 'flex-end',\n marginLeft: '10px',\n zIndex: 1,\n '& span': {\n fontFamily: font.boldFamily,\n margin: '0px',\n // height: '35px',\n color: '#22599a',\n fontSize: font.largeSize,\n [theme.breakpoints.down('sm')]: {\n fontSize: font.largeSize__mobile,\n },\n [theme.breakpoints.down('xs')]: {\n fontSize: '4.2vw',\n }\n }\n },\n\n image_title: {\n height: '12px',\n width: 'auto',\n margin:'2px 2px 0px 2px',\n [theme.breakpoints.down('sm')]: {\n margin:'2px 2px 0px 2px',\n }\n },\n image_bg: {\n display: 'flex',\n position: 'absolute',\n height: '180%',\n zIndex: 0,\n bottom:'-20%',\n left: '-10%',\n [theme.breakpoints.down('xs')]: {\n height: '160%',\n }\n },\n image_bg_2: {\n display: 'flex',\n position: 'absolute',\n height: '140%',\n zIndex: 0,\n bottom:'-20%',\n left: '-5%'\n },\n}));\n","import React from 'react';\nimport Table from 'components/Table';\nimport { useStyles } from './styles';\nimport Image from 'react-image-webp';\nimport './styles.css'\n\nimport bg1 from 'assets/img/home/b.png';\nimport bg1Wepb from 'assets/imgWebp/b.webp';\n\nimport bg2 from 'assets/img/home/c.png';\nimport bg2Wepb from 'assets/imgWebp/c.webp';\n\nconst TableWinners = ({ data, index }) => {\n const props = {index}\n const classes = useStyles(props);\n \n let imageData = {\n className: classes.image_bg,\n url: bg1,\n urlWepb: bg1Wepb,\n }\n\n if (index % 2 !== 0) {\n imageData = {\n className: classes.image_bg_2,\n url: bg2,\n urlWepb: bg2Wepb,\n }\n }\n const mapDataToTable = (data = [], header = []) => {\n if (data.length > 0) {\n const body = [];\n for (let i = 0; i < 10 ; i+=3) {\n const b = data.slice(i,i + 3)\n if (b.length > 0) {\n body.push(b)\n } else {\n break\n }\n }\n return {\n header,\n body\n };\n }\n\n return {\n header,\n body: data\n };\n };\n\n const renderTableDesktop = () => {\n const items = data.resuls;\n const table1 = mapDataToTable(items)\n return (\n
\n )\n };\n\n const renderTitle = () => {\n return (\n
\n \n {data.name}\n \n
\n )\n }\n\n return
\n \n {renderTitle()}\n {renderTableDesktop()}\n
\n};\n\nexport default TableWinners;\n","import { makeStyles } from \"@material-ui/core/styles\";\nimport { font } from \"config/styles\";\n\nexport const useStyles = makeStyles((theme) => ({\n container_page: {\n display: 'flex',\n justifyContent: 'flex-start',\n flexDirection: 'column',\n alignItems: 'flex-start',\n minHeight: '100%',\n [theme.breakpoints.down('sm')]: {\n // flexDirection: 'column',\n // backgroundColor: color.mainBackground\n }\n },\n multi_prize_container: {\n display: 'flex',\n width: '100%',\n justifyContent: 'flex-end',\n flexDirection: 'row',\n alignItems: 'flex-start',\n alignSelf: 'stretch',\n marginBottom: '15px',\n [theme.breakpoints.down('sm')]: {\n justifyContent: 'center',\n },\n '& span': {\n padding: '0 0 0 15px',\n [theme.breakpoints.down('sm')]: {\n padding: '0 0 0 10px',\n fontSize: font.nomalSize__mobile,\n },\n },\n '& :nth-child(1)': {\n color: '#fff' \n },\n '& :nth-child(2)': {\n color: '#1ab50d' \n },\n\n '& :nth-child(3)': {\n color: '#ffbb02'\n },\n },\n menus: {\n display: 'flex',\n position: 'relative',\n justifyContent: 'space-around',\n flexDirection: 'column',\n flexFlow: 'column',\n alignItems: 'center',\n width: '200px',\n height: '490px', \n marginRight: '10px',\n [theme.breakpoints.down('sm')]: {\n width: '100%',\n marginRight: '0',\n flexDirection: 'row',\n height: '40px', \n },\n [theme.breakpoints.down('xs')]: {\n marginRight: '0',\n width: '100%',\n height: '28px', \n }\n },\n\n\n content: {\n display: 'flex',\n width: '80%',\n justifyContent: 'center',\n alignItems: 'center',\n \n [theme.breakpoints.down('sm')]: {\n width: '100%',\n flexDirection: 'column',\n flexWrap: 'wrap',\n },\n [theme.breakpoints.down('xs')]: {\n // width: 'calc(100% -120px)',\n }\n },\n\n contentSingle: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n width: '80%',\n \n [theme.breakpoints.down('sm')]: {\n width: '70%',\n marginBottom: '10px'\n },\n [theme.breakpoints.down('xs')]: {\n // width: 'calc(100% -120px)',\n width: '100%',\n }\n },\n\n}));\n","import React, { useContext, useState, useEffect } from 'react';\nimport { AuthContext } from 'context/AuthContext'\nimport { Background, RouterContext } from 'context/RouterContext';\nimport { map, get } from 'lodash';\nimport TableTopThreeView from './../Home/TableTopThree'\nimport TableWinners from './../Home/TableWinners'\nimport { useStyles } from './styles';\nimport Api from 'services/Api';\n\nconst Home = (props) => {\n\tconst classes = useStyles()\n\tconst Router = useContext(RouterContext);\n\tconst authContent = useContext(AuthContext);\n\tconst [mapDataDefault, setMapDataDefault] = useState({\n\t\tdrawTime: {},\n\t\tprizeList: [],\n\t\tsinglePrizes: []\n\t})\n\n\tuseEffect(() => {\n\t\tApi.requestHomePage().then((res) => {\n\t\t\tconst isSuccess = get(res, 'data.success', false);\n\t\t\tif (isSuccess) {\n\t\t\t\tconst data = get(res, 'data.data', {});\n\t\t\t\tconst hData = authContent.mapDataHomePage(data)\n\t\t\t\tsetMapDataDefault(hData)\n\t\t\t}\n\t\t});\n\t}, [authContent]);\n\n\tuseEffect(()=> {\n\t\tRouter.setBackground(Background.home);\n\t}, [Router])\n\t\n\t//============================//\n\t//\n\t//============================//\n\t\n\tconst renderFirstMultPrize = ()=> {\n\t\tif (mapDataDefault.prizeListFirst && mapDataDefault.prizeListFirst.length > 0) {\n\t\t\treturn
\n\t\t\t{\n\t\t\t\tmap(mapDataDefault.prizeListFirst, (item, index) => {\n\t\t\t\t\treturn
\n\t\t\t\t})\n\t\t\t}\n\t\t\t
\n\t\t}\n\t\treturn null;\n\t}\n\t\n\treturn(\n\t\t
\n\t\t\t
\n\t\t\t{renderFirstMultPrize()}\n\t\t\t
\n\t\t
\n\t)\n};\n\nexport default Home\n","import { makeStyles } from \"@material-ui/core/styles\";\nimport bg_timer from 'assets/img/lives/bg_time.png';\n\nimport { font } from \"config/styles\";\n\nexport const useStyles = makeStyles((theme) => ({\n container_page: {\n position: 'relative',\n display: 'flex',\n justifyContent: 'flex-start',\n alignItems: 'flex-end',\n flexDirection: 'column',\n [theme.breakpoints.down('xs')]: {\n alignItems: 'center',\n \n }\n },\n timer_title: {\n zIndex: 1,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'flex-start',\n textTransform: 'uppercase',\n '& span': {\n padding:'5px',\n color: 'black',\n fontSize: font.largeSize,\n fontFamily: font.boldFamily,\n [theme.breakpoints.down('sm')]: {\n fontSize: font.largeSize__mobile,\n },\n [theme.breakpoints.down('xs')]: {\n fontSize: '18px',\n }\n },\n [theme.breakpoints.down('sm')]: {\n margin: '0 10px 0 10px',\n }\n\n },\n timer__bg: {\n position: 'relative',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n width: '45px',\n height: '71px',\n [theme.breakpoints.down('sm')]: {\n\t\t\t// width: '8vw',\n // height: '8vw',\n width: '40px',\n height: '62px',\n },\n [theme.breakpoints.down('xs')]: {\n\t\t\twidth: '35px',\n height: '55px',\n },\n \n '& span': {\n zIndex: 1,\n fontSize: '60px',\n fontFamily: 'CenteryGothicBold',\n background: 'linear-gradient(#fbfbfb, #abb2b8)',\n '-webkit-background-clip': 'text',\n '-webkit-text-fill-color': 'transparent',\n // fontFamily: font.boldFamily,\n [theme.breakpoints.down('sm')]: {\n fontSize: '55px',\n },\n [theme.breakpoints.down('xs')]: {\n fontSize: '50px',\n }\n }\n },\n timer__bg__point: {\n position: 'relative',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n width: '15px',\n height: '6px',\n '& span': {\n zIndex: 1,\n fontSize: '50px',\n fontFamily: 'Digital',\n [theme.breakpoints.down('sm')]: {\n fontSize: '4.5vw',\n }\n }\n },\n content: {\n display: 'flex',\n margin: '1px',\n justifyContent: 'center',\n alignItems: 'center',\n color: 'white',\n padding: '10px',\n backgroundPosition: '50% 50%',\n backgroundRepeat: 'no-repeat',\n backgroundSize: '100% 100%',\n backgroundImage: `url(${bg_timer})`,\n fontSize: font.nomalSize,\n '& span': {\n margin: '1px',\n textAlign: 'left',\n },\n [theme.breakpoints.down('sm')]: {\n fontSize: font.nomalSize__mobile,\n margin: '0 10px 0 10px',\n }\n },\n\n date_content: {\n display: 'flex',\n margin: '1px',\n color: 'white',\n fontSize: font.nomalSize,\n fontFamily: font.boldFamily,\n '& span': {\n margin: '1px',\n textAlign: 'center',\n fontSize: font.nomalSize,\n fontFamily: font.boldFamily,\n [theme.breakpoints.down('sm')]: {\n fontSize: font.nomalSize__mobile,\n }\n },\n },\n content_center: {\n display: 'flex',\n justifyContent:'flex-start',\n alignItems:'flex-start',\n fontSize: font.nomalSize,\n margin: '10px',\n whiteSpace: 'pre-wrap',\n textAlign: 'left',\n [theme.breakpoints.down('sm')]: {\n fontSize: font.nomalSize__mobile,\n margin: '0 20px 0 20px',\n }\n },\n\n imageItemFlag: {\n position: 'absolute',\n left: '50%',\n bottom: '50%',\n transform: 'translate(-50%, 50%)',\n height: '100%',\n // margin: '5px',\n zIndex: 0,\n },\n imageClamp: {\n position: 'absolute',\n left: '50%',\n bottom: '80%',\n transform: 'translate(-50%, 50%)',\n height: '200px',\n zIndex: 0,\n\t\t[theme.breakpoints.down('sm')]: {\n\t\t\theight: '160px',\n\t\t},\n\t\t[theme.breakpoints.down('xs')]: {\n\t\t\theight: '20vw',\n\t\t}\n }\n \n}));\n","import React, {useState, useRef, useEffect} from \"react\";\nimport Image from 'react-image-webp';\nimport { useTranslation } from 'react-i18next';\nimport { useStyles } from './styles';\n\nimport label from 'assets/img/lives/box_clock.png';\nimport labelWepb from 'assets/imgWebp/box_clock.webp';\n\nimport pont from 'assets/img/lives/point_time.png';\nimport pontWepb from 'assets/imgWebp/point_time.webp';\n\nfunction useInterval(callback, delay) {\n\tconst savedCallback = useRef();\n \n\t// Remember the latest callback.\n\tuseEffect(() => {\n\t savedCallback.current = callback;\n\t}, [callback]);\n \n\t// Set up the interval.\n\tuseEffect(() => {\n\t function tick() {\n\t\tsavedCallback.current();\n\t }\n\t if (delay !== null) {\n\t\tlet id = setInterval(tick, delay);\n\t\treturn () => clearInterval(id);\n\t }\n\t}, [delay]);\n}\n \nconst TimerView = ({data = {}}) => {\n const classes = useStyles()\n const [dataTimer, setDataTimer] = useState({})\n const [timer, setTimer] = useState({\n\tseconds: ['0', '0'],\n\thours: ['0', '0'],\n\tminutes: ['0', '0']\n })\n\n const {t} = useTranslation();\n const handleTimer = ()=> {\n\t let timeUntilNextResultSeconds = dataTimer.timeUntilNextResultSeconds\n\t if (timeUntilNextResultSeconds && timeUntilNextResultSeconds > 0) {\n\t\t\ttimeUntilNextResultSeconds -= 1\n\t\t\tlet hours = parseInt(timeUntilNextResultSeconds / (60 * 60 ), 10)\n\t\t\ttimeUntilNextResultSeconds -= (hours * 60 * 60)\n\t\t\tlet minutes = parseInt(timeUntilNextResultSeconds / 60, 10)\n\t\t\ttimeUntilNextResultSeconds -= minutes * 60\n\t\t\tlet seconds = parseInt(timeUntilNextResultSeconds , 10)\n\t\n\t\t\tminutes = minutes < 10 ? \"0\" + minutes : minutes;\n\t\t\tseconds = seconds < 10 ? \"0\" + seconds : seconds;\n\t\t\thours = hours < 10 ? \"0\" + hours : hours;\n\t\n\t\t\tsetDataTimer({\n\t\t\t\t...data,\n\t\t\t\ttimeUntilNextResultSeconds: dataTimer.timeUntilNextResultSeconds - 1\n\t\t\t})\n\t\t\t\n\t\t\tseconds = seconds + ''\n\t\t\thours = hours + ''\n\t\t\tminutes = minutes + '' \n\t\t\tsetTimer({\n\t\t\t\tseconds: seconds.split(\"\"),\n\t\t\t\thours: hours.split(\"\"),\n\t\t\t\tminutes: minutes.split(\"\")\n\t\t\t})\n\t\t} else {\n\t\t\tsetTimer({\n\t\t\t\tseconds: ['0', '0'],\n\t\t\t\thours: ['0', '0'],\n\t\t\t\tminutes: ['0', '0']\n\t\t\t})\n\t\t}\n }\n\t\n \tuseInterval(handleTimer, 1000);\n\t\n\tuseEffect(() => {\n\t\tsetDataTimer(data);\n\t}, [data])\n\n return (\n\t
\n \t\t
\n \t\t\n \t\t\t{t('TimeRemaning')}\n \t\t
\n\t\t \t
\n\t\t\t \t
\n\t\t\t\t \n\t\t\t\t {timer.hours[0]}\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t \n\t\t\t\t {timer.hours[1]}\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t \t
\n\t\t\t \t\t\n\t\t\t\t\t{timer.minutes[0]}\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t \t\t\n\t\t\t\t\t{timer.minutes[1]}\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t \t
\n\t\t\t \t\t\n\t\t\t\t\t{timer.seconds[0]}\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t \t\t\n\t\t\t\t\t{timer.seconds[1]}\n\t\t\t\t
\n\t\t
\n\t\t
\n\t\t \t{dataTimer.date}\n\t\t
\n
\n )\n};\n\nexport default TimerView\n","import { makeStyles } from \"@material-ui/core/styles\";\nimport { font } from \"config/styles\";\nimport boxNumber from 'assets/img/home/box_number.png';\n\nexport const useStyles = makeStyles((theme) => ({\n winners: {\n position: 'relative',\n display: 'flex',\n [theme.breakpoints.down('sm')]: {\n maxWidth: '1560px',\n width: '100%',\n },\n },\n\n winners__table__wrapper: {\n display: 'flex',\n width: '100%',\n flexWrap: 'wrap',\n justifyContent: 'space-around',\n [theme.breakpoints.down('sm')]: {\n fontSize: font.nomalSize__mobile,\n },\n },\n\n winners__table: {\n display: 'flex',\n justifyContent: 'center',\n alignItems:'flex-end',\n width: 'auto',\n flex: '1',\n [theme.breakpoints.down('sm')]: {\n marginBottom: '30px'\n },\n },\n \n lives: {\n display: 'flex',\n justifyContent:'center',\n alignItems:'center',\n flexDirection: 'column',\n [theme.breakpoints.down('sm')]: {\n fontSize: font.nomalSize__mobile,\n },\n },\n\n live_title: {\n display:'flex',\n justifyContent:'flex-start',\n alignItems:'flex-end',\n width:'100%',\n [theme.breakpoints.down('sm')]: {\n // height: '40px',\n },\n [theme.breakpoints.down('xs')]: {\n // height: '30px',\n },\n },\n\n header_title: {\n '& span': {\n fontFamily: 'OpenSansExtraBold',\n fontSize: font.largeSize,\n color: 'black',\n [theme.breakpoints.down('sm')]: {\n fontSize: font.largeSize__mobile\n },\n [theme.breakpoints.down('xs')]: {\n fontSize: font.bigSize__mobile\n }\n }\n },\n imageTop: {\n height: '100%',\n width: 'auto'\n },\n\n live__body: {\n position: 'relative',\n display: 'flex',\n width: '100%',\n justifyContent:'center',\n alignItems:'center',\n flexDirection: 'row',\n padding: '2px 0px 10px 0px'\n },\n\n live_content: {\n borderRadius: '5px',\n color: '#fff',\n display: 'flex',\n backgroundPosition: '50% 50%',\n backgroundRepeat: 'no-repeat',\n backgroundSize: 'cover',\n justifyContent: 'center',\n alignItems: 'center',\n textAglim: 'center',\n padding: '1px',\n margin: '3px',\n width: '40px',\n height: '40px',\n fontSize: '28px',\n backgroundImage: `url(${boxNumber})`,\n fontFamily: font.boldFamily,\n zIndex: '1',\n [theme.breakpoints.down('sm')]: {\n borderRadius: '4px',\n fontSize: '24px',\n width: '35px',\n height: '35px',\n margin: '2px',\n },\n [theme.breakpoints.down('xs')]: {\n borderRadius: '2px',\n fontSize: '22px',\n width: '30px',\n height: '30px',\n margin: '1px',\n }\n },\n img_top: {\n transform: \"translate(0, -5%)\",\n width: '45px',\n marginRight: '5px',\n [theme.breakpoints.down('sm')]: {\n width: '40px',\n },\n [theme.breakpoints.down('xs')]: {\n width: '35px',\n transform: \"translate(0, -10%)\",\n },\n [theme.breakpoints.down('360')]: {\n width: '30px',\n transform: \"translate(0, -10%)\",\n },\n }\n}));","import React from 'react';\nimport Image from 'react-image-webp';\nimport { useStyles } from './styles';\n\nimport cupTop1 from 'assets/img/home/cup_top_1.png';\nimport cupTop1Wepb from 'assets/imgWebp/cup_top_1.webp';\n\nimport cupTop2 from 'assets/img/home/cup_top_2.png';\nimport cupTop2Wepb from 'assets/imgWebp/cup_top_2.webp';\n\nimport cupTop3 from 'assets/img/home/cup_top_3.png';\nimport cupTop3Wepb from 'assets/imgWebp/cup_top_3.webp';\n\n\nconst imageCups = [\n\t{\n\t\turl: cupTop1,\n\t\turlWebp: cupTop1Wepb\n\t},\n\t{\n\t\turl: cupTop2,\n\t\turlWebp: cupTop2Wepb\n\t},\n\t{\n\t\turl: cupTop3,\n\t\turlWebp: cupTop3Wepb\n\t}\n]\nconst LiveTopThree = ({ data = [] }) => {\n\tconst classes = useStyles()\n\n\tconst renderBody = (item) => {\n\t\tconst { numbers } = item;\n\t\tif (numbers) {\n\t\t\treturn numbers.map((num, i) => {\n\t\t\t\treturn
\n\t\t\t\t\t{num}\n\t\t\t\t
\n\t\t\t})\n\t\t}\n\t\treturn null;\n\t};\n\n\treturn
\n\t\t
\n\t\t\t{\n\t\t\t\tdata.map((item, index) => {\n\t\t\t\t\tconst cupImage = imageCups[index] || {}\n\t\t\t\t\treturn
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
{item.name}\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t{renderBody(item)}\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t})\n\t\t\t}\n\t\t
\n\t
\n};\n\nexport default LiveTopThree;","import { makeStyles } from \"@material-ui/core/styles\";\nimport { color, font } from \"config/styles\";\n\nexport const useStyles = makeStyles((theme) => ({\n\tcontainer_page: {\n\t\tposition: 'relative',\n\t\t[theme.breakpoints.down('sm')]: {\n\t\t\t// backgroundColor: color.mainBackground\n\t\t}\n\t},\n\tcontainer: {\n\t\tposition: 'relative',\n\t\tmargin: '0 10px 0 10px',\n\t},\n\n\tresult_container_header: {\n\t\tdisplay: 'flex',\n\t\tjustifyContent: 'space-between',\n\t\talignItems: 'center',\n\t\tflexDirection: 'row',\n\t\tpadding: '10px 0 10px 0',\n\t\t[theme.breakpoints.down('sm')]: {\n\t\t\tpadding: '5px 10px 5px 10px',\n\t\t}\n\t},\n\ttimeLiveDraw: {\n\t\tdisplay: 'flex',\n\t\tjustifyContent: 'center',\n\t\talignItems: 'flex-start',\n\t\tflexDirection: 'column',\n\t\twidth: '100%',\n\t\theight: 'auto',\n\t\tbottom: 'calc(100% + 20px)',\n\t\tleft: '0',\n\t\tcolor: 'black',\n\t\tmarginTop: '10px',\n\t\tmarginBottom: '10px',\n\t\tfontSize: font.largeSize,\n\t\ttextTransform: 'uppercase',\n\t\t[theme.breakpoints.down('sm')]: {\n\t\t\tbottom: 'calc(100% + 10px)',\n\t\t\tjustifyContent: 'center',\n\t\t\talignItems: 'flex-start',\n\t\t}\n\t},\n\tliveScoreSmall: {\n\t\tdisplay: 'flex',\n\t\tjustifyContent: 'center',\n\t\talignItems: 'center',\n\t\tfontFamily: 'OpenSansExtraBold',\n\t\tfontSize: font.bigSize,\n\t\t[theme.breakpoints.down('sm')]: {\n\t\t\tfontSize: '2.8vw',\n\t\t},\n\t\t[theme.breakpoints.down('xs')]: {\n\t\t\tfontSize: '16px',\n\t\t},\n\t},\n\tliveScoreSmaller: {\n\t\tdisplay: 'flex',\n\t\tjustifyContent: 'center',\n\t\talignItems: 'center',\n\t\tfontSize: font.nomalSize,\n\t\t[theme.breakpoints.down('sm')]: {\n\t\t\tfontSize: font.nomalSize__mobile,\n\t\t},\n\t\t[theme.breakpoints.down('xs')]: {\n\t\t\tfontSize: '10px',\n\t\t},\n\t},\n\tresult_title: {\n\t\tdisplay: 'flex',\n\t\talignItems: 'flex-end',\n\t\t'& span': {\n\t\t\tfontSize: font.largeSize,\n\t\t\ttextTransform: 'uppercase',\n\t\t\tfontFamily: font.boldFamily,\n\t\t\t[theme.breakpoints.down('sm')]: {\n\t\t\t\tfontSize: font.largeSize__mobile,\n\t\t\t}\n\t\t},\n\t\t[theme.breakpoints.down('sm')]: {\n\t\t\t// marginTop: '10px'\n\t\t}\n\t},\n\n\tlable_image: {\n\t\theight: '14px',\n\t\twidth: 'auto',\n\t\tmargin: '2px 2px 0px 0px',\n\t\t[theme.breakpoints.down('xl')]: {\n\t\t\theight: '12px',\n\t\t}\n\t},\n\n\tcontent: {\n\t\tdisplay: 'flex',\n\t\tmargin: '2px',\n\t\tborderRadius: '6px',\n\t\tfontSize: font.nomalSize,\n\t\tbackground: 'linear-gradient(to right, #2963eb, #e04ad0 )',\n\t\tcolor: '#efeef3',\n\t\t'& span': {\n\t\t\tbackgroundColor: color.tableBackground,\n\t\t\tmargin: '2px',\n\t\t\tborderRadius: '6px',\n\t\t\ttextAlign: 'left',\n\t\t}\n\t},\n\tresult_container_content: {\n\t\twidth: '100%',\n\t\tdisplay: 'flex',\n\t\tjustifyContent: 'flex-start',\n\t\talignItems: 'space-between',\n\t\tflexDirection: 'row',\n\t},\n\tresult_content: {\n\t\tdisplay: 'flex',\n\t\twidth: '100%',\n\t\tmargin: '5px',\n\t\tjustifyContent: 'flex-start',\n\t\talignItems: 'center',\n\t\tflexDirection: 'column',\n\t\t[theme.breakpoints.down('sm')]: {\n\t\t\tmargin: '10px'\n\t\t}\n\t},\n\n\tformControl: {\n\t\tminWidth: '80px',\n\t\tmaxWidth: '250px',\n\t\tmaxHeight: '45px',\n\t\tminHeight: '22px',\n\t\theight: '5vw',\n\t\twidth: '30vw',\n\t\tbackgroundColor: '#100f1d',\n\t\tborder: `1px solid #075eab`,\n\t\tjustifyContent: 'center',\n\t\talignItems: 'space-between',\n\t\tborderRadius: '3px',\n\t\tcolor: '#000',\n\t\tpadding: '0 1vw 0 1vw',\n\t\t'& div': {\n\t\t\tcolor: '#fff',\n\t\t\tfontSize: font.nomalSize,\n\t\t\t[theme.breakpoints.down('sm')]: {\n\t\t\t\tfontSize: font.nomalSize__mobile,\n\t\t\t}\n\t\t},\n\n\t\t'& :after': {\n\t\t\tdisplay: 'none'\n\t\t},\n\n\t\t'& svg': {\n\t\t\tcolor: 'white',\n\t\t\tright: '0px'\n\t\t}\n\t},\n\tslideContainer: {\n\t\tdisplay: 'flex'\n\t},\n\ttimer__container: {\n\t\tposition: 'absolute',\n\t\twidth: '100%',\n\t\tright: '0',\n\t\ttop: '-150px',\n\t\t[theme.breakpoints.down('xs')]: {\n\t\t\tposition: 'relative',\n\t\t\ttop: '0px'\n\t\t}\n\t}\n}));","import React, { useState, useEffect, useContext} from \"react\";\nimport { get, map } from 'lodash';\nimport {stringToArray} from './../../utils'\nimport { useTranslation } from 'react-i18next';\nimport { Background, RouterContext } from 'context/RouterContext';\nimport Api from 'services/Api';\nimport TimerView from './../TimerView';\n\nimport LiveTopThree from './LiveTopThree'\nimport TableWinners from './../Home/TableWinners'\nimport { useStyles } from './styles';\n\nconst LivePage = () => {\n \tconst classes = useStyles();\n\tconst { t } = useTranslation();\n\tconst Router = useContext(RouterContext);\n\tconst [timerData, setTimerData] = useState({\n\t\ttimeUntilNextResultSeconds: 0\n\t})\n\tconst [dataMap, setDataMap] = useState({\n\t\tdrawTime: {},\n\t\tprizeList: [],\n\t\tsinglePrizes: []\n\t})\n\n useEffect(() => {\n Router.setBackground(Background.other);\n }, [Router]);\n \n\n\tconst generateNumbers = (amount)=> {\n\t\tlet numbers = ''\n\t\tfor (let index = 0; index < amount; index++) {\n\t\t\tnumbers += Math.floor(Math.random() * 10);\n\t\t}\n\t\treturn numbers\n\t}\n\n\tconst handleUpdateAgain = (data)=> {\n\t\tconst dMap = mapDataToTable(data)\n\t\tsetDataMap(dMap);\n\t}\n\n\tconst mapDataToTable = (data) => {\n\t\tconst results = get(data, 'result', {})\n\t\tconst prizeListData = get(results, 'prizeList', [])\n\t\tconst singlePrizeListData = get(results, 'singlePrizeList', [])\n\t\tlet stringNumbers = generateNumbers(6)\n\t\tlet IsRepeatRandom = false\n\t\tconst singlePrizes = map(singlePrizeListData, (item, index) => {\n\t\t\tif (item.result === '') {\n\t\t\t\tIsRepeatRandom = true\n\t\t\t\treturn {\n\t\t\t\t\t...item,\n\t\t\t\t\tresult: stringNumbers,\n\t\t\t\t\tindex: index + 1,\n\t\t\t\t\tnumbers: stringToArray(stringNumbers)\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn {\n\t\t\t\t...item,\n\t\t\t\tindex: index + 1,\n\t\t\t\tnumbers: stringToArray(item.result)\n\t\t\t}\n\t\t})\n\n\t\tconst prizeList = map(prizeListData, (item, index) => {\n\t\t\treturn {\n\t\t\t\t...item,\n\t\t\t\tid: index,\n\t\t\t\tresuls: item.result.map((ressultString) => {\n\t\t\t\t\tif (ressultString === '') {\n\t\t\t\t\t\tIsRepeatRandom = true\n\t\t\t\t\t\treturn stringToArray(stringNumbers)\t\n\t\t\t\t\t}\n\t\t\t\t\treturn stringToArray(ressultString)\n\t\t\t\t})\n\t\t\t}\n\t\t})\n\t\t\n\t\tif (IsRepeatRandom) {\n\t\t\t//save to random again\n\t\t\tsetTimeout(()=>handleUpdateAgain(data), 100)\n\t\t}\n\n\t\treturn {\n\t\t\tdrawTime: {\n\t\t\t\tdate: `${t('WinningResults')}`,\n\t\t\t\ttime: `${data.day_of_week}, ${data.date}`,\n\t\t\t\ttime_until_next_result: data.time_until_next_result,\n\t\t\t\ttimeUntilNextResultSeconds: data.time_until_next_result_seconds\n\n\t\t\t},\n\t\t\tsinglePrizes,\n\t\t\tprizeList\n\t\t}\n\t}\n\n\tuseEffect(() => {\n\t\tApi.requestLives().then((res) => {\n\t\t\tconst isSuccess = get(res, 'data.success', false);\n\t\t\tif (!isSuccess) {\n\t\t\t\t// can not get data\n\t\t\t\t//render maintainer page\n\t\t\t} else {\n\t\t\t\tconst data = get(res, 'data.data', {});\n\t\t\t\tconst dMap = mapDataToTable(data)\n\t\t\t\tsetDataMap(dMap);\n\t\t\t\tsetTimerData({\n\t\t\t\t\ttimeUntilNextResultSeconds: data.time_until_next_result_seconds\n\t\t\t\t})\n\t\t\t}\n\t\t});\n\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [t])\n\n\treturn (\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
{dataMap.drawTime.date}
\n\t\t\t\t\t
{dataMap.drawTime.time}
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t{map(dataMap.prizeList, (item, index) => {\n\t\t\t\t\treturn
\n\t\t\t\t})}\n\t\t\t
\n\t\t
\n\t)\n};\n\nexport default LivePage","import { makeStyles } from \"@material-ui/core/styles\";\n\nimport { color, font } from \"config/styles\";\n\nexport const useStyles = makeStyles((theme) => ({\n table: {\n width: '100%',\n borderSpacing: '0px',\n overflow: 'hidden',\n '& th, td': {\n },\n '& table': {\n borderCollapse: 'collapse',\n overflow: 'hidden'\n },\n fontSize: font.largeSize,\n [theme.breakpoints.down('sm')]: {\n fontSize: font.largeSize__mobile,\n },\n },\n\n table__header: {\n '& tr': {\n height: '60px',\n backgroundColor: color.tableHeader,\n },\n '& th': {\n textAlign: 'left',\n },\n\n [theme.breakpoints.down('sm')]: {\n '& tr': {\n height: '9.375vw',\n },\n },\n },\n\n table__body: {\n '& tr': {\n height: '40px',\n },\n\n [theme.breakpoints.down('sm')]: {\n '& tr': {\n height: '6.25vw',\n },\n },\n },\n table_container_numers: {\n display: 'flex',\n alignItems:'center',\n justifyContent: 'center',\n flexDirection: 'colum',\n margin:'6px',\n },\n table_number: {\n display: 'flex',\n alignItems:'center',\n justifyContent: 'center',\n borderRadius: '5px',\n width: '30px',\n height: '30px',\n fontSize: '20px',\n margin:'3px',\n fontFamily: font.boldFamily,\n boxSizing: 'content-box',\n color: '#fff',\n backgroundColor: '#22599a',\n [theme.breakpoints.down('sm')]: {\n borderRadius: '4px',\n fontSize: '2.2vw',\n width: '30px',\n height: '30px',\n margin: '2px',\n },\n [theme.breakpoints.down('xs')]: {\n borderRadius: '2px',\n fontSize: '2.8vw',\n width: '5vw',\n height: '5vw',\n margin: '1px',\n }\n\n \n }\n}));\n","import React from 'react';\nimport { map } from 'lodash';\n\nimport { useStyles } from './styles';\n\nconst Table = ({data = {}, hasHeader}) => {\n const classes = useStyles();\n\n const renderHeader = () => {\n const { header } = data;\n if (hasHeader) {\n return
\n {\n map(header, (head, i) =>\n | {head} | \n )\n }\n
\n }\n return null;\n };\n\n const renderBody = () => {\n const { body } = data;\n\n return map(body, (row, i) =>
\n {\n map(row, (item, j) => {\n if (item.length && item.length > 0) {\n return {map(item, (number, z)=>{number})} | \n }\n return {item} | \n })\n }\n
)\n };\n\n return
\n \n {renderHeader()}\n \n \n {renderBody()}\n \n
\n};\n\nexport default Table;\n","import { makeStyles } from \"@material-ui/core/styles\";\n\nimport {font } from \"config/styles\";\n\nexport const useStyles = makeStyles((theme) => ({\n winners: {\n width: '100%',\n display:'flex',\n justifyContent:'flex-start',\n alignItems: 'center',\n // marginTop: '10px',\n position: 'relative',\n padding: '5px',\n backgroundColor: '#d1eaf9',\n borderBottom: `1px solid #000`,\n borderLeft: `1px solid #000`,\n borderRight: `1px solid #000`,\n [theme.breakpoints.down('sm')]: {\n // marginBottom: '10px',\n },\n [theme.breakpoints.down('xs')]: {\n // marginBottom: '5px',\n }\n },\n\n\n winners__table__wrapper: props => ( {\n display: 'flex',\n width: '70%',\n zIndex: 1,\n justifyContent: 'space-around',\n [theme.breakpoints.down('sm')]: {\n fontSize: font.nomalSize__mobile,\n },\n }),\n\n winners__table: {\n display: 'inline-block',\n width: '100%',\n margin: '1px',\n zIndex: 1,\n [theme.breakpoints.down('sm')]: {\n width: '100%',\n },\n },\n\n winner_title: {\n position: 'relative',\n display: 'flex',\n // flex: '0.3',\n width: '20%',\n alignItems: 'center',\n marginLeft: '10px',\n justifyContent: 'center',\n zIndex: 1,\n '& span': {\n fontFamily: 'OpenSansExtraBold',\n margin: '0px',\n // height: '35px',\n color: 'black',\n fontSize: '18px',\n textTransform: 'uppercase',\n [theme.breakpoints.down('sm')]: {\n fontSize: '18px',\n },\n [theme.breakpoints.down('xs')]: {\n fontSize: '14px',\n }\n }\n },\n\n image_title: {\n height: '12px',\n width: 'auto',\n margin:'2px 2px 0px 2px',\n [theme.breakpoints.down('sm')]: {\n margin:'2px 2px 0px 2px',\n }\n },\n image_bg: {\n display: 'flex',\n position: 'absolute',\n height: '120%',\n zIndex: 0,\n bottom:'-10%'\n },\n}));\n","import React from 'react';\nimport Table from './Table';\nimport { useStyles } from './styles';\n\nconst TableWinners = ({ data, index }) => {\n const props = {index}\n const classes = useStyles(props);\n \n const mapDataToTable = (data = [], header = []) => {\n if (data.length > 0) {\n const body = [];\n for (let i = 0; i < 10 ; i+=2) {\n const b = data.slice(i,i + 2)\n if (b.length > 0) {\n body.push(b)\n } else {\n break\n }\n }\n return {\n header,\n body\n };\n }\n\n return {\n header,\n body: data\n };\n };\n\n const renderTableDesktop = () => {\n const items = data.resuls;\n const table1 = mapDataToTable(items)\n return (\n
\n )\n };\n\n const renderTitle = () => {\n return (\n
\n \n {data.name}\n \n
\n )\n }\n let styles = {};\n if (index === 0) {\n styles.backgroundColor = '#f8f1cd'\n }\n return
\n {renderTitle()}\n {renderTableDesktop()}\n
\n};\n\nexport default TableWinners;\n","import { makeStyles } from \"@material-ui/core/styles\";\nimport { font } from \"../../../config/styles\";\nexport const useStyles = makeStyles((theme) => ({\n table: {\n display: 'flex',\n justifyContent: 'flex-start',\n flexDirection: 'column',\n width: '100%',\n // marginBottom:'2vh',\n backgroundColor:'white',\n [theme.breakpoints.down('sm')]: {\n fontSize: '2.2vw',\n },\n [theme.breakpoints.down('xs')]: {\n fontSize: '2.8vw',\n }\n },\n\n table__header__containner: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n flexDirection: 'column',\n border: '1px solid black',\n width: '100%',\n '& div': {\n height: '60px',\n width: '100%',\n [theme.breakpoints.down('sm')]: {\n height: '50px'\n },\n [theme.breakpoints.down('xs')]: {\n height: '40px'\n }\n \n },\n '& th:nth-child(1)': {\n borderTopLeftRadius: '6px',\n },\n '& th:nth-child(2)': {\n borderTopRightRadius: '6px',\n },\n },\n\n table__header_1: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n flexDirection: 'row',\n width: '100%',\n height: '100%',\n // backgroundColor:'#1c0414',\n borderTopLeftRadius: '5px',\n borderTopRightRadius: '5px',\n [theme.breakpoints.down('sm')]: {\n borderTopLeftRadius: '0px',\n borderTopRightRadius: '0px',\n },\n '& :nth-child(1)': {\n paddingLeft: '10px',\n },\n '& div': {\n textAlign: 'center',\n // height: '40px',\n // paddingLeft: '10px' \n },\n\n },\n\n row_header_table: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n height: '100%',\n fontFamily: font.boldFamily\n },\n\n table__body_1: {\n display: 'flex',\n width: '100%',\n borderLeft: '1px solid black',\n borderRight: '1px solid black',\n justifyContent: 'center',\n alignItems: 'center',\n flexDirection: 'column',\n '& div': {\n textAlign: 'center'\n },\n },\n\n row_table: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n width: '100%',\n color: 'white',\n zIndex: '1',\n height: '100%',\n fontSize: '18px',\n [theme.breakpoints.down('sm')]: {\n fontSize: '16px',\n },\n [theme.breakpoints.down('xs')]: {\n fontSize: '10px',\n },\n [theme.breakpoints.down('360')]: {\n fontSize: '6px'\n }\n },\n\n row_table_sub_top: {\n display: 'flex',\n justifyContent: 'flex-end',\n alignItems: 'center',\n color: 'white',\n zIndex: '1',\n },\n\n row_table_sub_bottom: {\n display: 'flex',\n justifyContent: 'flex-start',\n alignItems: 'center',\n color: 'white',\n zIndex: '1',\n [theme.breakpoints.down('sm')]: {\n fontSize: '2.0vw',\n color: 'red'\n },\n [theme.breakpoints.down('xs')]: {\n fontSize: '2.1vw',\n color: 'red',\n lineHeight: '80%',\n }\n },\n\n row_table_break: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n flexDirection: 'column',\n width: '100%',\n color: 'white',\n fontSize: '18px',\n lineHeight: 'normal',\n [theme.breakpoints.down('sm')]: {\n fontSize: '16px',\n },\n [theme.breakpoints.down('xs')]: {\n fontSize: '9px',\n },\n [theme.breakpoints.down('360')]: {\n fontSize: '7px',\n }\n },\n\n row_circle: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n borderRadius: '5px',\n width: '30px',\n height: '30px',\n // maxHeight: '30xp',\n backgroundColor:'black',\n color: 'white',\n margin:'3px',\n boxSizing: 'content-box',\n fontFamily: font.boldFamily,\n [theme.breakpoints.down('xs')]: {\n width: '5vw',\n height: '5vw',\n borderRadius: '2px',\n fontSize: '2.8vw',\n margin: '1px',\n }\n },\n\n body_bg_1: {\n position: 'relative',\n display: 'flex',\n width: '100%',\n justifyContent: 'flex-start',\n alignItems: 'center',\n height: '60px',\n borderBottom: '1px solid black',\n [theme.breakpoints.down('sm')]: {\n height: '60px',\n },\n [theme.breakpoints.down('xs')]: {\n height: '40px',\n }\n },\n\n body_bg_noresult: {\n position: 'relative',\n display: 'flex',\n width: '100%',\n justifyContent: 'center',\n alignItems: 'center',\n height: '60px',\n borderBottom: '1px solid black',\n [theme.breakpoints.down('sm')]: {\n height: '60px',\n },\n [theme.breakpoints.down('xs')]: {\n height: '40px',\n },\n '& span': {\n display: 'flex',\n color: 'black',\n justifyContent: 'center',\n alignItems: 'center',\n boxSizing: 'content-box',\n fontFamily: font.boldFamily,\n }\n },\n\n // body_bg_2: {\n // position: 'relative',\n // display: 'flex',\n // width: '100%',\n // alignItems: 'center',\n // justifyContent: 'space-round',\n // height: '50px',\n // borderStyle: 'inset',\n // // borderBottom: '1px solid black',\n // // borderTop: '0px solid black',\n // // borderLeft: '0px solid black',\n // // borderRight: '0px solid black',\n // backgroundColor:'#490b32',\n // [theme.breakpoints.down('sm')]: {\n // height: '50px',\n // },\n // [theme.breakpoints.down('xs')]: {\n // height: '40px',\n // },\n // },\n\n body__background: {\n position:'absolute',\n left: '0',\n top: '0',\n display: 'flex',\n width: '100%',\n height: 'calc(100% + 1px)',\n backgroundColor: '#2c041e',\n // borderBottom: '1px solid black',\n // opacity: '0.3',\n zIndex: '0'\n\n },\n body__background_2: {\n position:'absolute',\n left: '0',\n top: '0',\n display: 'flex',\n width: '100%',\n height: 'calc(100% + 1px)',\n backgroundColor: '#490b32',\n borderBottom: '1px solid black',\n // opacity: '0.3',\n zIndex: '0'\n\n }\n\n}));\n","import React from 'react';\nimport { map } from 'lodash';\nimport { useTranslation } from 'react-i18next';\nimport { useStyles } from './styles';\n\nconst width5Columns = ['25%','25%', '25%','25%']\nconst backgroundColor = ['#22599a','#e0aa37', '#54d472','#7aa9f0']\nconst RTable = ({ data = {}, style, onClick, onMouseMove, onMouseLeave, selectedIndex = -1 }) => {\n\tconst classes = useStyles();\n\tconst { t } = useTranslation();\n\n\tconst renderHeader = () => {\n\t\tconst { header } = data;\n\t\treturn
\n\t\t\t{\n\t\t\t\tmap(header, (head, i) => {\n\t\t\t\t\tconst style = {\n\t\t\t\t\t\twidth: width5Columns[i],\n\t\t\t\t\t\tbackgroundColor: backgroundColor[i]\n\t\t\t\t\t}\n\n\t\t\t\t\tif (i !== 3) {\n\t\t\t\t\t\tstyle.borderRight = '1px solid black';\n\t\t\t\t\t}\n\t\t\t\t\t\n\t\t\t\t\treturn
{head}
\n\t\t\t\t})\n\t\t\t}\n\t\t
\n\t};\n\n\tconst renderBody = () => {\n\t\tconst { body } = data;\n\t\tif (body && body.length <= 0) {\n\t\t\treturn
{t('NoResults')}
\n\t\t}\n\t\treturn map(body, (row, i) => {\n\t\t\treturn
\n\t\t\t\t{\n\t\t\t\t\tmap(row, (data, j) => {\n\t\t\t\t\t\tlet style = {\n\t\t\t\t\t\t\twidth: width5Columns[j]\n\t\t\t\t\t\t};\n\n\t\t\t\t\t\tif (j === 0) {\n\t\t\t\t\t\t\tstyle.color = 'black';\n\t\t\t\t\t\t\tstyle.flexDirection = 'column';\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tif (j !== 3) {\n\t\t\t\t\t\t\tstyle.borderRight = '1px solid black';\n\t\t\t\t\t\t}\n\t\t\t\t\t\tif (Array.isArray(data)) {\n\t\t\t\t\t\t\tlet styleCircleRow = {\n\t\t\t\t\t\t\t\tbackgroundColor: backgroundColor[j]\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\treturn
\n\t\t\t\t\t\t\t\t{map(data, (item, index) =>
{item}
)}\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t} else if (typeof data === \"object\" && data.name === 'day') {\n\t\t\t\t\t\t\treturn
\n\t\t\t\t\t\t\t\t
{data.dayOfWeek}
\n\t\t\t\t\t\t\t\t
{data.date}
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn
{data}
\n\t\t\t\t\t}\n\t\t\t\t\t)\n\t\t\t\t}\n\t\t\t
\n\t\t})\n\t};\n\n\treturn
\n\t\t
\n\t\t\t{renderHeader()}\n\t\t
\n\t\t
\n\t\t\t{renderBody()}\n\t\t
\n\t
\n};\n\nexport default RTable;\n","import { makeStyles, withStyles } from \"@material-ui/core/styles\";\nimport { color, font } from \"config/styles\";\nimport PaginationItem from '@material-ui/lab/PaginationItem';\n\nexport const PaginationItemCustom = withStyles({\n\t// @global is handled by jss-plugin-global.\n\troot: {\n\t\tflexWrap: 'nowrap',\n\t\t'& li': {\n\t\t\tbackgroundColor:'red'\n\t\t},\n\t\twidth: '30px',\n\t\t'&.MuiPagination-root': {\n\t\t\tdisplay: 'flex',\n\t\t\tflexDirection: 'row',\n\t\t\t\n\n\t\t},\n\t\t'&.MuiPaginationItem-root': {\n\t\t\t// maxWidth: '10px',\n\t\t\tpadding: '6px',\n\t\t\twidth: '30px',\n\t\t\t// backgroundColor:'red'\n\t\t},\n\t // You should target [class*=\"MuiButton-root\"] instead if you nest themes.\n\t \"&.Mui-selected\": {\n\t\tborder: `1px solid #075eab`,\n\t\tcolor: 'black',\n\t\tbackgroundColor: \"white\"\n\t }\n\t},\n })(PaginationItem);\n\nexport const useStyles = makeStyles((theme) => ({\n\tPaginationClass: {\n\t\tmaxWidth: '40px',\n\t\tjustifyContent: 'center',\n\t\talignItems: 'center',\n\t\ttextAlign:'center'\n\t},\n\tcontainer_page: {\n\t\t[theme.breakpoints.down('sm')]: {\n\t\t\t// backgroundColor: color.mainBackground\n\t\t}\n\t},\n\tcontainer: {\n\t\tposition: 'relative',\n\t\tdisplay: 'flex',\n\t\tflexDirection: 'column',\n\t\talignItems: 'center',\n\t\tmargin: '0 10px 0 10px',\n\t\t// backgroundColor: 'white'\n\t},\n\n\tresult_container_header: {\n\t\tdisplay: 'flex',\n\t\tjustifyContent: 'space-between',\n\t\talignItems: 'center',\n\t\tflexDirection: 'row',\n\t\tpadding: '10px 0 10px 0',\n\t\t[theme.breakpoints.down('sm')]: {\n\t\t\tpadding: '5px 10px 5px 10px',\n\t\t}\n\t},\n\ttimeLiveDraw: {\n\t\tposition: 'absolute',\n\t\tdisplay: 'flex',\n\t\tjustifyContent: 'center',\n\t\talignItems: 'center',\n\t\tflexDirection: 'column',\n\t\twidth: '100%',\n\t\theight: 'auto',\n\t\tbottom: 'calc(100% + 20px)',\n\t\tleft: '0',\n\t\tfontSize: font.largeSize,\n\t\ttextTransform: 'uppercase',\n\t\t[theme.breakpoints.down('sm')]: {\n\t\t\tbottom: 'calc(100% + 10px)',\n\t\t\tjustifyContent: 'center',\n\t\t\talignItems: 'flex-start',\n\t\t}\n\t},\n\tliveScoreSmall: {\n\t\tdisplay: 'flex',\n\t\tjustifyContent: 'center',\n\t\talignItems: 'center',\n\t\tfontFamily: font.boldFamily,\n\t\tfontSize: font.largeSize,\n\t\t[theme.breakpoints.down('sm')]: {\n\t\t\tfontSize: '2.8vw',\n\t\t},\n\t\t[theme.breakpoints.down('xs')]: {\n\t\t\tfontSize: font.largeSize__mobile,\n\t\t},\n\t\t\n\t},\n\tliveScoreSmaller: {\n\t\tdisplay: 'flex',\n\t\tjustifyContent: 'center',\n\t\talignItems: 'center',\n\t\tfontSize: font.nomalSize,\n\t\t[theme.breakpoints.down('sm')]: {\n\t\t\tfontSize: font.nomalSize__mobile,\n\t\t}\n\t},\n\tresult_title: {\n\t\tdisplay: 'flex',\n\t\talignItems: 'flex-end',\n\t\t'& span': {\n\t\t\tfontSize: font.largeSize,\n\t\t\ttextTransform: 'uppercase',\n\t\t\tfontFamily: font.boldFamily,\n\t\t\t[theme.breakpoints.down('sm')]: {\n\t\t\t\tfontSize: font.largeSize__mobile,\n\t\t\t}\n\t\t},\n\t\t[theme.breakpoints.down('sm')]: {\n\t\t\t// marginTop: '10px'\n\t\t}\n\t},\n\n\tlable_image: {\n\t\theight: '14px',\n\t\twidth: 'auto',\n\t\tmargin: '2px 2px 0px 0px',\n\t\t[theme.breakpoints.down('xl')]: {\n\t\t\theight: '12px',\n\t\t}\n\t},\n\n\tcontent: {\n\t\tdisplay: 'flex',\n\t\tmargin: '2px',\n\t\tborderRadius: '6px',\n\t\tfontSize: font.nomalSize,\n\t\tbackground: 'linear-gradient(to right, #2963eb, #e04ad0 )',\n\t\tcolor: '#efeef3',\n\t\t'& span': {\n\t\t\tbackgroundColor: color.tableBackground,\n\t\t\tmargin: '2px',\n\t\t\tborderRadius: '6px',\n\t\t\ttextAlign: 'left',\n\t\t}\n\t},\n\tresult_container_content: {\n\t\twidth: '100%',\n\t\tdisplay: 'flex',\n\t\tjustifyContent: 'flex-start',\n\t\talignItems: 'space-between',\n\t\tflexDirection: 'row',\n\t},\n\tresult_content: {\n\t\tdisplay: 'flex',\n\t\twidth: '100%',\n\t\tmargin: '5px',\n\t\tjustifyContent: 'flex-start',\n\t\talignItems: 'center',\n\t\tflexDirection: 'column',\n\t\t[theme.breakpoints.down('sm')]: {\n\t\t\tmargin: '10px'\n\t\t}\n\t},\n\n\tformControl: {\n\t\tminWidth: '80px',\n\t\tmaxWidth: '250px',\n\t\tmaxHeight: '45px',\n\t\tminHeight: '22px',\n\t\theight: '5vw',\n\t\twidth: '30vw',\n\t\tbackgroundColor: '#100f1d',\n\t\tborder: `1px solid #075eab`,\n\t\tjustifyContent: 'center',\n\t\talignItems: 'space-between',\n\t\tborderRadius: '3px',\n\t\tcolor: '#000',\n\t\tpadding: '0 1vw 0 1vw',\n\t\t'& div': {\n\t\t\tcolor: '#fff',\n\t\t\tfontSize: font.nomalSize,\n\t\t\t[theme.breakpoints.down('sm')]: {\n\t\t\t\tfontSize: font.nomalSize__mobile,\n\t\t\t}\n\t\t},\n\n\t\t'& :after': {\n\t\t\tdisplay: 'none'\n\t\t},\n\n\t\t'& svg': {\n\t\t\tcolor: 'white',\n\t\t\tright: '0px'\n\t\t}\n\t},\n\tslideContainer: {\n\t\tdisplay: 'flex'\n\t},\n\tsearch__containner: {\n\t\tdisplay: 'flex',\n\t\twidth: '100%',\n\t\tjustifyContent: 'flex-end',\n\t\talignItems: 'center',\n\t\tzIndex: 4,\n\t\tmarginBottom: '10px'\n\t},\n\tdate__picker: {\n\t\tborder: `1px solid #5ab6f7`,\n\t\tborderRadius: '25px',\n\t\theight: '50px',\n\t\twidth: '280px',\n\t\tpadding: '5px',\n\t\tfontFamily: font.boldFamily,\n\t\tbackgroundColor: 'white',\n\t\tfontSize: '22px',\n\t\tcolor: 'black',\n\t\t[theme.breakpoints.down('sm')]: {\n\t\t\theight: '40px',\n\t\t\twidth: '250px',\n\t\t\tborderRadius: '20px',\n\t\t\tfontSize: '20px'\n\t\t},\n\t\t[theme.breakpoints.down('xs')]: {\n\t\t\theight: '35px',\n\t\t\twidth: '200px',\n\t\t\tborderRadius: '17px',\n\t\t\tfontSize: '18px'\n\t\t},\n\t\t'&:hover': {\n\t\t\tbackgroundColor: 'rgba(90, 182, 247, 0.6);',\n\t\t},\n\t\t'& span' :{\n\t\t\tfontSize: '22px',\n\t\t\tcolor: 'black',\n\t\t\t[theme.breakpoints.down('sm')]: {\n\t\t\t\tfontSize: '20px'\n\t\t\t},\n\t\t\t[theme.breakpoints.down('xs')]: {\n\t\t\t\tfontSize: '16px'\n\t\t\t},\n\t\t}\n\t}\n}));\n","import React, { useState, useEffect, useContext} from \"react\";\nimport { Background, RouterContext } from 'context/RouterContext';\nimport { AuthContext } from 'context/AuthContext'\nimport Pagination from '@material-ui/lab/Pagination';\nimport { get, map } from 'lodash';\nimport moment from 'moment'\nimport {stringToArray} from './../../utils'\nimport { useTranslation } from 'react-i18next';\nimport DatePicker from 'react-datepicker';\nimport 'react-datepicker/dist/react-datepicker.css';\nimport Button from '@material-ui/core/Button';\nimport SearchIcon from '@material-ui/icons/Search';\n\nimport Api from 'services/Api';\nimport ResultTable from './ResultTable'\nimport RTable from './RTable'\n\nimport { useStyles , PaginationItemCustom } from './styles';\n\nconst Results = () => {\n\tconst classes = useStyles();\n\tconst { t } = useTranslation();\n\tconst Router = useContext(RouterContext);\n\tconst authContent = useContext(AuthContext);\n\tconst [startDate, setDateSelected] = useState(new Date());\n\tconst [openCalenader, setOpenCalender] = useState(false)\n\tconst [mapDataSearch, setMapDataSearch] = useState(null)\n\tconst [page, setPage] = useState(1)\n\tconst [maxPage, setMaxPage] = useState(0)\n\tconst [dataMap, setDataMap] = useState({})\n\t\n\tuseEffect(()=> {\n\t\tRouter.setBackground(Background.other);\n\t}, [Router])\n\n\tuseEffect(() => {\n\t\tApi.requestPageResult(page).then((res) => {\n\t\t\tconst isSuccess = get(res, 'data.success', false);\n\t\t\tif (!isSuccess) {\n\t\t\t\t// can not get data\n\t\t\t\t//render maintainer page\n\t\t\t} else {\n\t\t\t\tconst data = get(res, 'data.data', {});\n\t\t\t\tconst dMap = mapDataDefaultToTable(data)\n\t\t\t\tsetDataMap(dMap);\n\t\t\t\tsetMaxPage(data.total_size)\n\t\t\t}\n\t\t});\n\n\t\tauthContent.resultFunc = () => {\n\t\t\tsetMapDataSearch(null)\n\t\t}\n\t\t\n\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [t, page])\n\n\tconst handleChange = (event, p) => {\n\t\tif (page !== p) {\n\t\t\tsetPage(p)\n\t\t}\n\t}\n\n\tconst dateTostringUTCDDMMYYYY = (date)=> {\n\t\tif (date) {\n\t\t\treturn moment(date).format(\"DD/MM/YYYY\")\n\t\t}\n\n\t\treturn ''\n\t}\n\n\tconst handleChangeDate = (date)=> {\n\t\tsetDateSelected(date)\n\t\thandleCloseCalender();\n\t\t\n\t\tconst stringDate = dateTostringUTCDDMMYYYY(date);\n\t\tApi.requestPageResultSearch(stringDate).then((res) => {\n\t\t\tconst isSuccess = get(res, 'data.success', false);\n\t\t\tif (!isSuccess) {\n\t\t\t\t// can not get data\n\t\t\t\t//render maintainer page\n\t\t\t} else {\n\t\t\t\tconst data = get(res, 'data.data', {});\n\t\t\t\tconst dMap = mapDataToTable(data)\n\t\t\t\tsetMapDataSearch(dMap);\n\t\t\t}\n\t\t});\n\t}\n\n\tconst handleCloseCalender = ()=>{\n\t\tsetOpenCalender(false)\n\t}\n\n\tconst handleOpenCalender = ()=> {\n\t\tsetOpenCalender(true)\n\t}\n\n\tconst mapDataDefaultToTable = (data) => {\n\t\tconst results = get(data, 'result', [])\n\t\tconst header = [t('DayDate'), t('Prize1st'), t('Prize2nd'), t('Prize3rd')]\n\t\tconst body = map(results, (item, index) => {\n\t\t\tconst singlePrizeListData = get(item, 'singlePrizeList', [])\n\t\t\tconst date = <>
{item.day_of_week} {item.date} \n\t\t\treturn [date, ...map(singlePrizeListData, (r, index)=> {\n\t\t\t\treturn stringToArray(r.result)\n\t\t\t})]\n\t\t})\n\t\treturn {\n\t\t\theader,\n\t\t\tbody\n\t\t}\n\t}\n\n\tconst mapDataToTable = (data) => {\n\t\tconst results = get(data, 'result', {})\n\t\tconst prizeListData = get(results, 'prizeList', [])\n\t\tconst singlePrizeListData = get(results, 'singlePrizeList', [])\n\t\tlet headerTemp = [t('Prize1st'), t('Prize2nd'), t('Prize3rd')]\n\t\tif (prizeListData.length <= 0 && singlePrizeListData.length <=0) {\n\t\t\tconst header = [t('DayDate'), ...headerTemp];\n\t\t\treturn {\n\t\t\t\tsinglePrizes: {\n\t\t\t\t\theader,\n\t\t\t\t\tbody: []\n\t\t\t\t},\n\t\t\t\tprizeList: []\n\t\t\t}\n\t\t}\n\t\t\n\t\tconst date = <>
{data.day_of_week} {data.date} \n\t\tconst body = [[date, ...map(singlePrizeListData, (r, index)=> {\n\t\t\t\theaderTemp[index] = r.name\n\t\t\t\treturn stringToArray(r.result)\n\t\t\t})]]\n\t\t\n\t\tconst prizeList = map(prizeListData, (item, index) => {\n\t\t\treturn {\n\t\t\t\t...item,\n\t\t\t\tid: index,\n\t\t\t\tresuls: item.result.map((ressultString) => {\n\t\t\t\t\treturn stringToArray(ressultString)\n\t\t\t\t})\n\t\t\t}\n\t\t})\n\t\t\n\t\theaderTemp = headerTemp.slice(0, 3);\n\t\tconst header = [t('DayDate'), ...headerTemp];\n\t\treturn {\n\t\t\tsinglePrizes: {\n\t\t\t\theader,\n\t\t\t\tbody\n\t\t\t},\n\t\t\tprizeList\n\t\t}\n\t}\n\n\tconst renderContent = ()=> {\n\t\tif (mapDataSearch) {\n\t\t\treturn <>\n\t\t\t\t
\n\t\t\t\t{map(mapDataSearch.prizeList, (item, index) => {\n\t\t\t\t\treturn
\n\t\t\t\t})}\n\t\t\t\n\t\t} else {\n\t\t\treturn <>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
} size='small' shape=\"rounded\" color=\"primary\" count={maxPage} page={page} onChange={handleChange} />\n\t\t\t\n\t\t}\n\t}\n\n\tconst CustomInputDatePicker = React.forwardRef(({ value, onClick }, ref) => (\n\t\t}> \n\t\t\t\t{value}\n\t \t\n\t));\n\n\treturn (\n\t\t\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t
\n\t\t\t\t{renderContent()}\n\t\t\t
\n\t\t
\n\t\t\t\t\t{listLanguage.map(item => {\n\t\t\t\t\t\tlet classLaguage = classes.itemLanguageDropdown\n\t\t\t\t\t\tif (item.code === i18nextLng) {\n\t\t\t\t\t\t\tclassLaguage = classes.itemLanguageDropdown_selected\n\t\t\t\t\t\t}\n\t\t\t\t\t\t\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t
selectLanguage(item)}>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t{item.language}\n\t\t\t\t\t\t