\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: '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 display: 'flex',\n width: '100%',\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 flex: '1',\n // backgroundColor: '#2e041c',\n \n },\n winner1stCol: {\n paddingLeft: '20px',\n [theme.breakpoints.down('sm')]: {\n paddingLeft: '6.25vw',\n },\n },\n\n contanner__image: {\n display: 'flex',\n position: 'relative',\n height: '100%',\n width: '80px',\n },\n\n image_title: {\n position: 'absolute',\n bottom: '0px',\n left: '0px',\n height: '60px',\n width: 'auto',\n margin:'2px 2px 0px 2px',\n [theme.breakpoints.down('sm')]: {\n margin:'2px 2px 0px 2px',\n height: '60px',\n },\n [theme.breakpoints.down('xs')]: {\n margin:'2px 2px 0px 2px',\n height: '50px',\n }\n },\n}));\n","import React from 'react';\nimport TableNumber from 'components/Numbers';\nimport { useStyles } from './styles';\nimport Image from 'react-image-webp';\nimport { useTranslation } from 'react-i18next';\n\nimport Top1 from 'assets/img/home/ic_cup.png';\nimport Top1Wepb from 'assets/imgWebp/ic_cup.webp';\n\nimport './styles.css'\n\nconst TableTopThree = ({data}) => {\n const classes = useStyles()\n const {t} = useTranslation()\n \n const renderTitle = () => {\n return (\n
\n
\n \n
\n
\n \n {t('LastestResult')}\n \n
\n
\n )\n }\n\n return
\n {renderTitle()}\n
\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 marginTop:'5px',\n marginBottom:'5px',\n },\n table_number: {\n display: 'flex',\n alignItems:'center',\n justifyContent: 'center',\n borderRadius: '5px',\n width: '35px',\n height: '50px',\n fontSize: '28px',\n padding: '1px',\n margin: '5px',\n fontFamily: font.boldFamily,\n boxSizing: 'content-box',\n color: '#fff',\n backgroundColor: '#8a0321',\n [theme.breakpoints.down('sm')]: {\n borderRadius: '4px',\n fontSize: '24px',\n width: '35px',\n height: '43px',\n margin: '2px',\n },\n [theme.breakpoints.down('xs')]: {\n borderRadius: '2px',\n fontSize: '5vw',\n width: '6vw',\n height: '7.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 padding: '5px',\n backgroundColor: '#2e041c',\n marginBottom: '15px',\n borderRadius: '5px',\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: '100%',\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 [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 '& span': {\n fontFamily: font.boldFamily,\n margin: '0px',\n height: '35px',\n color: '#d92c2e',\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}));\n","import React from 'react';\nimport Table from 'components/Table';\nimport { useStyles } from './styles';\n\nimport './styles.css'\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+=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 {renderTitle()}\n {renderTableDesktop()}\n
\n};\n\nexport default TableWinners;\n","import { makeStyles } from \"@material-ui/core/styles\";\n\nimport {font } from \"config/styles\";\n\nexport const useStyles = makeStyles((theme) => ({\n winners: {\n pointerEvents: 'none',\n display: 'flex',\n position: 'absolute',\n right: '10px',\n bottom: '40%',\n width: 'auto',\n fontSize: '30px',\n justifyContent: 'flex-start',\n alignItems: 'flex-start',\n flexDirection:'column',\n minWidth: '90px',\n maxWidth: '190px',\n backgroundColor: 'white',\n borderRadius: '5px',\n zIndex: '2',\n transform: \"translate(0, 50%)\",\n [theme.breakpoints.down('sm')]: {\n minWidth: '50px',\n // maxWidth: '150px',\n },\n [theme.breakpoints.down('xs')]: {\n minWidth: '90px',\n maxWidth: '120px',\n }\n },\n\n\n winners__table__wrapper: props => ( {\n display: 'flex',\n width: '100%',\n padding: '5px',\n justifyContent: 'space-around',\n [theme.breakpoints.down('sm')]: {\n fontSize: font.nomallerSize__mobile,\n padding: '5px',\n },\n }),\n\n winners__table: {\n display: 'inline-block',\n width: '100%',\n margin: '1px',\n [theme.breakpoints.down('sm')]: {\n width: '100%',\n },\n },\n\n winner_title: {\n position: 'relative',\n display: 'flex',\n width: '100%',\n alignItems: 'flex-start',\n justifyContent: 'center',\n flexDirection: 'column',\n padding: '5px',\n backgroundImage: 'linear-gradient(to right, #d82363 , #bd1038)',\n borderTopLeftRadius: '5px',\n borderTopRightRadius: '5px',\n [theme.breakpoints.down('sm')]: {\n padding: '5px',\n },\n '& span': {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'flex-start',\n fontFamily: font.boldFamily,\n margin: '0px',\n color: 'white',\n fontSize: font.nomallerSize,\n [theme.breakpoints.down('sm')]: {\n // fontSize: font.nomallerSize__mobile,\n },\n [theme.breakpoints.down('xs')]: {\n fontSize: font.nomallerSize__mobile,\n }\n }\n },\n\n rowSingle: {\n display: 'flex',\n alignItems: 'flex-start',\n justifyContent: 'center',\n '& pre': {\n display: 'flex',\n flex: '0.5',\n alignItems: 'center',\n justifyContent: 'flex-start',\n margin: '0px',\n color: 'black',\n // fontFamily: font.boldFamily,\n fontSize: font.nomallerSize,\n [theme.breakpoints.down('sm')]: {\n // fontSize: font.nomallerSize__mobile,\n },\n [theme.breakpoints.down('xs')]: {\n fontSize: font.nomallerSize__mobile,\n }\n },\n '& :nth-child(2)': {\n justifyContent: 'flex-end',\n },\n },\n rowMulti: {\n display: 'flex',\n alignItems: 'flex-start',\n justifyContent: 'center',\n flexDirection: 'column',\n '& span': {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'flex-start',\n // fontFamily: font.boldFamily,\n margin: '0px',\n color: 'black',\n fontSize: font.nomallerSize,\n [theme.breakpoints.down('sm')]: {\n // fontSize: font.nomallerSize__mobile,\n },\n [theme.breakpoints.down('xs')]: {\n fontSize: font.nomallerSize__mobile,\n }\n }\n },\n rowMultiItenm: {\n display: 'flex',\n alignItems: 'flex-start',\n justifyContent: 'flex-start',\n flexDirection: 'row',\n flexWrap: 'wrap',\n width: '100%',\n '& span': {\n display: 'flex',\n // minWidth: '80px',\n width: '50%',\n alignItems: 'center',\n justifyContent: 'center',\n // fontFamily: font.boldFamily,\n margin: '0px',\n color: 'black',\n fontSize: font.nomallerSize,\n [theme.breakpoints.down('sm')]: {\n fontSize: font.nomallerSize__mobile,\n width: '50%',\n },\n [theme.breakpoints.down('xs')]: {\n fontSize: font.nomallerSize__mobile,\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 bold__content: {\n fontFamily: font.boldFamily,\n }\n}));\n","import React, { useState, useEffect } from 'react';\nimport { map, get } from 'lodash';\nimport { useTranslation } from 'react-i18next';\nimport { useStyles } from './styles';\n\nconst DialogDetail = ({ data, index }) => {\n\tconst props = { index }\n\tconst {t} = useTranslation()\n\tconst classes = useStyles(props);\n\tconst [mapDataDialog, setMapDataDialog] = useState({\n\t\tprizeList: [],\n\t\tsinglePrizes: []\n\t})\n\n\tuseEffect(()=> {\n\t\tconst mData = mapDataResult(data)\n\t\tsetMapDataDialog(mData)\n\t}, [data])\n\n\tconst mapDataResult = function (data) {\n\t\tconst results = get(data, 'result_detail', {})\n\t\tconst periodNext = get(results, 'period', 'N/A')\n\t\tconst periodDate = get(results, 'period_date', 'N/A')\n\t\tconst prizeListData = get(results, 'prizeList', [])\n\t\tconst singlePrizeListData = get(results, 'singlePrizeList', [])\n\t\tconst singlePrizes = map(singlePrizeListData, (item, index) => {\n\t\t\treturn {\n\t\t\t\t...item,\n\t\t\t\tindex: index + 1,\n\t\t\t\tnumbers: 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\treturn ressultString\n\t\t\t\t})\n\t\t\t}\n\t\t})\n\n\t\treturn {\n\t\t\tperiodDate,\n\t\t\tperiod: periodNext,\n\t\t\tsinglePrizes,\n\t\t\tprizeList\n\t\t}\n\t}\n\n\tconst renderContent = () => {\n\t\tconst {singlePrizes, prizeList} = mapDataDialog\n\t\treturn (\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t{map(singlePrizes, (item, index)=>{\n\t\t\t\t\t\treturn
\n\t\t\t\t\t\t\t
{item.name}\n\t\t\t\t\t\t\t
{item.result}\n\t\t\t\t\t\t
\n\t\t\t\t\t})}\n\t\t\t\t\t
\n\t\t\t\t\t{map(prizeList, (multpPrize, i)=>{\n\t\t\t\t\t\treturn
\n\t\t\t\t\t\t\t
{multpPrize.name}\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t{map(multpPrize.resuls, (number, j)=>{\n\t\t\t\t\t\t\t\treturn {number}})}\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\tconst renderTitle = () => {\n\t\tconst drawTitle = `${t('DrawNo')}${mapDataDialog.period}`\n\t\tconst drawDate = `${mapDataDialog.periodDate}`\n\t\treturn (\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t{drawTitle}\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t{drawDate}\n\t\t\t\t\n\t\t\t
\n\t\t)\n\t}\n\n\treturn
\n\t\t{renderTitle()}\n\t\t{renderContent()}\n\t
\n};\n\nexport default DialogDetail;\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: 'row',\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 content: {\n display: 'inline-block',\n justifyContent: 'center',\n alignItems: 'center',\n width: '100%',\n [theme.breakpoints.down('sm')]: {\n \n },\n [theme.breakpoints.down('xs')]: {\n // width: 'calc(100% -120px)',\n }\n },\n\n menuBackground: {\n position: 'absolute',\n top: '0',\n left: '0',\n display: 'flex',\n width: '100%',\n height: '100%',\n backgroundColor: '#000',\n opacity: '0.4',\n zIndex: '0',\n borderRadius: '5px',\n [theme.breakpoints.down('sm')]: {\n borderRadius: '0',\n backgroundColor: '#640547',\n opacity: '1',\n },\n [theme.breakpoints.down('xs')]: {\n borderRadius: '0',\n backgroundColor: '#640547',\n opacity: '1',\n }\n },\n\n menuItem : {\n display: 'flex',\n justifyContent: 'flex-start',\n alignItems: 'center',\n textTransform: 'uppercase',\n fontSize: font.nomalSize,\n width: '100%',\n padding: '15px 5px 15px 20px',\n cursor: 'pointer',\n zIndex: '1',\n [theme.breakpoints.down('sm')]: {\n justifyContent: 'center',\n padding: '10px 10px 10px 10px',\n fontSize: font.nomalSize__mobile,\n },\n [theme.breakpoints.down('xs')]: {\n justifyContent: 'center',\n padding: '10px 2px 10px 2px',\n fontSize: '2.5vw',\n }\n },\n menuItemSelected: {\n display: 'flex',\n justifyContent: 'flex-start',\n alignItems: 'center',\n textTransform: 'uppercase',\n fontSize: font.nomalSize,\n width: '100%',\n // height: '100%',\n cursor: 'pointer',\n zIndex: '1',\n padding: '15px 5px 15px 20px',\n backgroundImage: 'linear-gradient(to right, #9f0020, #9f255d)',\n backgroundColor: '#99086f',\n [theme.breakpoints.down('sm')]: {\n justifyContent: 'center',\n height: '100%',\n padding: '0px 10px 0px 10px',\n backgroundImage: 'none',\n fontSize: font.nomalSize__mobile,\n backgroundColor: '#99086f',\n borderBottom: '2px solid #f39615',\n },\n [theme.breakpoints.down('xs')]: {\n justifyContent: 'center',\n height: '100%',\n padding: '0px 2px 0px 2px',\n backgroundImage: 'none',\n fontSize: '2.5vw',\n backgroundColor: '#99086f',\n borderBottom: '2px solid #f39615',\n } \n },\n dialog_result: {\n display: 'flex',\n position: 'absolute',\n right: '0',\n fontSize: '30px',\n justifyContent: 'flex-start',\n alignItems: 'flex-start',\n flexDirection:'column'\n }\n}));\n","import React, { useContext, useState, useEffect } from 'react';\nimport { AuthContext } from 'context/AuthContext'\nimport { useTranslation } from 'react-i18next';\nimport { map, get } from 'lodash';\nimport RTable from './../Results/RTable';\nimport TableTopThreeView from './../Home/TableTopThree'\nimport TableWinners from './../Home/TableWinners'\nimport DialogDetail from './../Home/DialogDetail'\nimport {stringToArray} from './../../utils'\nimport { Hidden } from '@material-ui/core';\nimport { useStyles } from './styles';\nimport Api from 'services/Api';\n\nconst Home = (props) => {\n\tconst classes = useStyles()\n\tconst authContent = useContext(AuthContext);\n\tconst { resultHomeData } = authContent\n\tconst [daySelected, setDaySelected] = useState('')\n\tconst [selectIndex, setSelectIndex] = useState(-1)\n\tconst [dataDayOfWeek, setDataDayOfWeek] = useState(null)\n\tconst [dataSelectToShow, setDataSelectToShow] = useState(null)\n\tconst [mapDataDefault, setMapDataDefault] = useState({\n\t\tdrawTime: {},\n\t\tprizeList: [],\n\t\tsinglePrizes: []\n\t})\n\tconst [dataMap, setDataMap] = useState({\n\t\theader: [],\n\t\tbody: []\n\t})\n\t\n\tconst {t} = useTranslation()\n\tuseEffect(()=> {\n\t\tif (daySelected === '') {\n\t\t\tsetMapDataDefault(resultHomeData);\n\t\t}\n\n\t\tauthContent.homeFunc = () => {\n\t\t\tsetDaySelected('')\n\t\t}\n\t\t\n\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [resultHomeData.prizeList, t])\n\n\tconst days = ['Mon','Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];\n\tconst header = [t('Day'), t('Date'), t('Result'), t('Prize')]\n\tconst mapDataToTable = (data) => {\n\t\tconst body = map(data, (resul, index) => {\n\t\t\treturn [\n\t\t\t\tt(resul.dayOfWeek),\n\t\t\t\tresul.date,\n\t\t\t\tstringToArray(resul.result),\n\t\t\t\tresul.prize\n\t\t\t]\n\t\t})\n\t\t\n\t\treturn {\n\t\t\theader,\n\t\t\tbody\n\t\t}\n\t}\n\n\tconst handleMouseMove = (index)=> {\n if (selectIndex === -1) {\n if (dataDayOfWeek && dataDayOfWeek.length > index && index >= 0) {\n const data = dataDayOfWeek[index]\n if (data !== dataSelectToShow) {\n setDataSelectToShow(data);\n }\n }\n }\n }\n\n const handleMouseLeve = (index)=> {\n if (selectIndex === -1) {\n setDataSelectToShow(null);\n }\n\t}\n\t\n\t//============================//\n\t//\n\t//============================//\n\tconst handleSelected = (select) => {\n\t\tif (select !== daySelected) {\n\t\t\tsetDaySelected(select);\n\t\t\tsetDataSelectToShow(null);\n\t\t\tsetSelectIndex(-1);\n\t\t\tApi.requestPageResult(select).then((res) => {\n\t\t\t\tconst isSuccess = get(res, 'data.success', false);\n\t\t\t\tif (isSuccess) {\n\t\t\t\t\tconst data = get(res, 'data.data', {});\n\t\t\t\t\tconst hData = mapDataToTable(data)\n\t\t\t\t\tsetDataMap(hData)\n\t\t\t\t\tsetDataDayOfWeek(data)\n\t\t\t\t} else {\n\t\t\t\t\tconst hData = mapDataToTable([])\n\t\t\t\t\tsetDataMap(hData)\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\t}\n\t\n\t//============================//\n\t//\n\t//============================//\n\tconst handleShowResultDialog = (index)=> {\n\t\tif (dataDayOfWeek && dataDayOfWeek.length > index && index >= 0) {\n\t\t\tconst data = dataDayOfWeek[index]\n\t\t\tsetDataSelectToShow(data);\n\t\t} else {\n\t\t\tsetDataSelectToShow(null);\n\t\t}\n\t\tsetSelectIndex(index);\n\t}\n\n\tconst renderDialogDetailResult = ()=> {\n\t\tif (dataSelectToShow) {\n\t\t\treturn
\n\t\t}\n\t\treturn null\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\n\tconst renderSecondMultPrize = ()=> {\n\t\tif (mapDataDefault.prizeListSecond && mapDataDefault.prizeListSecond.length > 0) {\n\t\t\treturn
\n\t\t\t\t{map(mapDataDefault.prizeListSecond, (item, index) => {\n\t\t\t\t\tif (item.resuls.length > 0) {\n\t\t\t\t\t\treturn {item.name}: {item.resuls[0]}\n\t\t\t\t\t}\n\t\t\t\t})}\n\t\t\t\t
\n\t\t\t
\n\t\t}\n\t\treturn
\n\t}\n\tconst handleRenderResult = () => {\n\t\tif (daySelected === '') {\n\t\t\treturn <>\n\t\t\t\t{renderFirstMultPrize()}\n\t\t\t\t{renderSecondMultPrize()}\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\t
\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t{renderDialogDetailResult()}\n\t\t\t\t
\n\t\t\t\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\t\tdays.map((day, index) =>\n\t\t\t\t\t\t{\t\n\t\t\t\t\t\t\tlet classSelected = classes.menuItem\n\t\t\t\t\t\t\tif (day === daySelected) {\n\t\t\t\t\t\t\t\tclassSelected = classes.menuItemSelected\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\treturn
handleSelected(day)}> {t(day)}
\n\t\t\t\t\t\t})\n\t\t\t\t\t}\n\t\t\t\t
\n\t\t\t\t\t{handleRenderResult()}\n\t\t\t\t
\t\t\t\n\t\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\t\tdays.map((day, index) =>\n\t\t\t\t\t\t{\t\n\t\t\t\t\t\t\tlet classSelected = classes.menuItem\n\t\t\t\t\t\t\tif (day === daySelected) {\n\t\t\t\t\t\t\t\tclassSelected = classes.menuItemSelected\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\treturn
handleSelected(day)}> {t(day)}
\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 Home\n","import { makeStyles } from \"@material-ui/core/styles\";\n\nimport { font } from \"config/styles\";\n\nexport const useStyles = makeStyles((theme) => ({\n container_page: {\n margin: '0 100px 0 100px',\n [theme.breakpoints.down('sm')]: {\n margin: '0 10px 0 10px',\n },\n [theme.breakpoints.down('xs')]: {\n\t\t\tmargin: '0 5px 0 5px',\n\t\t}\n },\n howtoplay_title: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'flex-start',\n textTransform: 'uppercase',\n '& span': {\n padding:'5px',\n fontSize: '40px',\n fontFamily: font.boldFamily,\n [theme.breakpoints.down('sm')]: {\n fontSize: '4.5vw',\n }\n },\n [theme.breakpoints.down('sm')]: {\n display: 'none',\n margin: '0 5px 0 5px',\n }\n },\n\n lable_image: {\n height: '12px',\n width: 'auto',\n margin:'2px 2px 0px 0px'\n },\n\n content: {\n display: 'flex',\n margin: '1px',\n color: 'white',\n fontSize: font.nomalSize,\n '& span': {\n // backgroundColor: 'white',\n margin: '1px',\n textAlign: 'left',\n },\n [theme.breakpoints.down('sm')]: {\n fontSize: font.nomalSize__mobile,\n margin: '0 5px 0 5px',\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: '2.5vw',\n margin: '0 5px 0 5px',\n }\n },\n content__image: {\n display: 'flex',\n justifyContent:'center',\n alignItems:'flex-start',\n margin: '1px',\n [theme.breakpoints.down('sm')]: {\n fontSize: font.nomalSize__mobile,\n margin: '0 5px 0 5px',\n }\n },\n imageItemFlag: {\n height: '300px',\n\t\tmargin: '5px',\n\t\t[theme.breakpoints.down('sm')]: {\n\t\t\theight: '200px',\n\t\t},\n\t\t[theme.breakpoints.down('xs')]: {\n\t\t\theight: '25vw',\n\t\t}\n }\n}));\n","import React from \"react\";\nimport Image from 'react-image-webp';\nimport { useTranslation } from 'react-i18next';\nimport { useStyles } from './styles';\n\nimport clamp from 'assets/img/common/How_to_play.png';\nimport clampWepb from 'assets/imgWebp/How_to_play.webp';\n\nconst HowToPlay = () => {\n const classes = useStyles()\n const {t} = useTranslation();\n \n return (\n
\n
\n \n {t('HowToPlay')}\n
\n
\n
\n \n \n {t('HowToPlayContent')}\n \n \n \n
\n
\n \n
\n
\n
\n )\n};\n\nexport default HowToPlay\n","import { makeStyles } from \"@material-ui/core/styles\";\n\nimport { color, font } from \"config/styles\";\n\nexport const useStyles = makeStyles((theme) => ({\n container_page: {\n [theme.breakpoints.down('sm')]: {\n backgroundColor: color.mainBackground\n }\n },\n about_title: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'flex-start',\n textTransform: 'uppercase',\n '& span': {\n padding:'5px',\n fontSize: '40px',\n fontFamily: font.boldFamily,\n [theme.breakpoints.down('sm')]: {\n fontSize: '4.5vw',\n }\n },\n [theme.breakpoints.down('sm')]: {\n margin: '0 5px 0 5px',\n display: 'none'\n }\n\n },\n\n lable_image: {\n height: '12px',\n width: 'auto',\n margin:'2px 2px 0px 0px'\n },\n\n content: {\n display: 'flex',\n margin: '1px',\n color: 'black',\n fontSize: '40px',\n '& span': {\n fontSize: '40px',\n color: 'white',\n textAlign: 'left',\n [theme.breakpoints.down('sm')]: {\n fontSize: '4.5vw',\n }\n },\n [theme.breakpoints.down('sm')]: {\n fontSize: '4.5vw',\n margin: '0 10px 0 10px',\n paddingTop: '20px'\n },\n [theme.breakpoints.down('xs')]: {\n fontSize: '4.5vw',\n margin: '0 5px 0 5px',\n paddingTop: '12px'\n }\n },\n content_title: {\n fontSize: font.nomalSize,\n fontFamily: font.boldFamily,\n margin: '20px 0 0 0',\n whiteSpace: 'pre-wrap',\n [theme.breakpoints.down('sm')]: {\n fontSize: font.nomalSize__mobile,\n margin: '10px 0 10px 0',\n }\n },\n content_center: {\n fontSize: font.nomalSize,\n whiteSpace: 'pre-wrap',\n [theme.breakpoints.down('sm')]: {\n fontSize: '2.5vw',\n // margin: '0 5px 0 5px',\n }\n },\n content_group: {\n display: 'flex',\n justifyContent: 'flex-start',\n alignItems: 'flex-start',\n flexDirection: 'row'\n },\n imageItem: {\n height: '300px',\n\t\tmargin: '5px',\n\t\t[theme.breakpoints.down('sm')]: {\n\t\t\theight: '250px',\n\t\t},\n\t\t[theme.breakpoints.down('xs')]: {\n\t\t\theight: '25vw',\n\t\t}\n }\n}));\n","import React from \"react\";\nimport { useTranslation } from 'react-i18next';\nimport { useStyles } from './styles';\nimport Image from 'react-image-webp';\n\nimport clamp from 'assets/img/common/about_us.png';\nimport clampWepb from 'assets/imgWebp/about_us.webp';\n\nconst AboutUs = () => {\n const classes = useStyles()\n const {t} = useTranslation();\n \n return (\n
\n
\n \n {t('AboutUs')}\n
\n
\n
\n \n
\n {t('AboutUsContent')}\n \n
\n
\n
\n
\n
\n )\n};\n\nexport default AboutUs\n","import { makeStyles } from \"@material-ui/core/styles\";\n\nimport { color, font } from \"config/styles\";\n\nexport const useStyles = makeStyles((theme) => ({\n menu__list: {\n display: 'flex',\n padding: '20px 0 10px',\n alignItems: 'center',\n justifyContent: 'space-between',\n [theme.breakpoints.down('sm')]: {\n padding: '0px 0 0px',\n }\n },\n menu__routers: {\n display: 'flex',\n padding: '20px 0 10px',\n alignItems: 'center',\n justifyContent:'center',\n [theme.breakpoints.down('sm')]: {\n fontSize: '2.5vw',\n width: '100%',\n height: '40px',\n padding: '0px 0px 0px 0px',\n backgroundColor: '#2e041c',\n },\n [theme.breakpoints.down('xs')]: {\n fontSize: '2.5vw',\n width: '100%',\n height: '30px',\n padding: '0px 0px 0px 0px',\n backgroundColor: '#2e041c',\n }\n },\n menu__item_language: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'flex-start',\n marginRight: '45px',\n color: color.black,\n [theme.breakpoints.down('sm')]: {\n display: 'flex',\n justifyContent: 'flex-start',\n alignItems: 'center',\n marginRight: '0px',\n width: '34%',\n fontSize: '2.0vw',\n height: '100%',\n color: 'white',\n },\n [theme.breakpoints.down('xs')]: {\n display: 'flex',\n justifyContent: 'flex-start',\n alignItems: 'center',\n marginRight: '0px',\n width: '34%',\n fontSize: '2.5vw',\n height: '100%',\n color: 'white',\n }\n },\n\n menu__item: {\n marginRight: '45px',\n color: color.black,\n [theme.breakpoints.down('sm')]: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n marginRight: '0px',\n width: '34%',\n fontSize: '2.0vw',\n height: '100%',\n color: 'white',\n },\n [theme.breakpoints.down('xs')]: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n marginRight: '0px',\n width: '34%',\n fontSize: '2.5vw',\n height: '100%',\n color: 'white',\n }\n },\n\n menu__item_selected: {\n display: 'flex',\n color: color.black,\n fontFamily: font.boldFamily,\n [theme.breakpoints.down('sm')]: {\n justifyContent: 'center',\n alignItems: 'center',\n color: '#fff',\n backgroundColor: '#8a0321',\n marginRight: '0px',\n width: '100%',\n height: '100%',\n }\n },\n\n menu__item_link: {\n display: 'flex',\n color: color.black,\n [theme.breakpoints.down('sm')]: {\n color: 'white',\n justifyContent: 'center',\n alignItems: 'center',\n marginRight: '0px',\n width: '100%',\n height: '100%',\n }\n }\n}));\n","import React, { useContext } from 'react';\nimport { NavLink } from 'react-router-dom';\nimport { useTranslation } from 'react-i18next';\nimport ChangeLanguage from './../../components/ChangeLanguage';\nimport { AuthContext } from 'context/AuthContext'\nimport { useStyles } from \"./styles\"\nimport { Hidden } from '@material-ui/core';\n\nconst Menu = () => {\n\tconst classes = useStyles();\n\tconst authContext = useContext(AuthContext);\n\tconst { t } = useTranslation();\n\tconst handleClick = () => {\n\t\tif (authContext.homeFunc) {\n\t\t\tauthContext.homeFunc();\n\t\t}\n\t}\n\treturn
\n\t\t
\n\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t\n\t\t
\n\t\t\t
\n\t\t\t\t{t('Home')}\n\t\t\t\t\n\t\t\t
\n\n\t\t\t
\n\t\t\t\t{t('HowToPlay')}\n\t\t\t\t\n\t\t\t
\n\n\t\t\t
\n\t\t\t\t{t('AboutUs')}\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t
\n};\n\nexport default Menu\n","import { makeStyles } from \"@material-ui/core/styles\";\nimport { layout, font } from \"config/styles\";\n\nexport const useStyles = makeStyles((theme) => ({\n\tfooter: {\n\t\tdisplay: 'flex',\n\t\tjustifyContent: 'center',\n\t\theight: layout.footerHeight,\n\t\tbackgroundColor: '#1c0112',\n\t\t[theme.breakpoints.down('sm')]: {\n\t\t\t// height: layout.footerHeight__mobile,\n\t\t\theight: 'auto',\n\t\t\tpadding: '1vw 0',\n\t\t}\n\t},\n\tfooterClass: {\n\t\tdisplay: 'flex',\n\t\twidth: \"100%\",\n\t\theight: \"100%\",\n\t\talignItems: 'center',\n\t\tjustifyContent: 'center',\n\t\tflexDirection: 'column',\n\t\ttextAlign: 'center',\n\t},\n\n\tfooterLeft: {\n\t\twidth: \"100%\",\n\t\tdisplay: 'flex',\n\t\talignItems: \"center\",\n\t\tjustifyContent: 'center'\n\t},\n\tfooterTextLeft: {\n\t\tdisplay: 'flex',\n\t\talignItems: \"center\",\n\t\tjustifyContent: 'center',\n\t\tflexDirection: 'row',\n\t\tflexWrap: 'wrap',\n\t\tfontSize: font.smallSize,\n\t\tmargin: '0px 20px 0 20px',\n\t\t[theme.breakpoints.down('sm')]: {\n\t\t\tfontSize: font.smallSize__mobile,\n\t\t}\n\t},\n\n\tfooterRight: {\n\t\twidth: \"100%\",\n\t\tdisplay: 'flex',\n\t\talignItems: \"center\",\n\t\tjustifyContent: 'center',\n\t\tfontSize: font.smallSize,\n\t\t[theme.breakpoints.down('sm')]: {\n\t\t\tfontSize: '2vw',\n\t\t\talignItems: \"center\",\n\t\t},\n\t\t'& span': {\n\t\t\twordWrap: 'break-word',\n\t\t\tfontSize: font.nomalSize,\n\t\t\tmarginLeft: '3px',\n\t\t\tmarginRight: '3px',\n\t\t\t[theme.breakpoints.down('sm')]: {\n\t\t\t\tfontSize: '1.8vw',\n\t\t\t},\n\t\t}\n\t},\n\n\tfooterDeposit: {\n\t\tmarginTop: '10px'\n\t},\n\t\n\timageItem: {\n\t\theight: '60px',\n\t\tmargin: '5px',\n\t\t[theme.breakpoints.down('sm')]: {\n\t\t\theight: '55px',\n\t\t\tmargin: '2px',\n\t\t},\n\t\t[theme.breakpoints.down('xs')]: {\n\t\t\theight: '8.5vw',\n\t\t\tmargin: '1px',\n\t\t}\n\t},\n\timageItemFlag: {\n\t\theight: '20px',\n\t\tmargin: '5px',\n\t\t[theme.breakpoints.down('sm')]: {\n\t\t\theight: '20px',\n\t\t},\n\t\t[theme.breakpoints.down('xs')]: {\n\t\t\theight: '4vw',\n\t\t}\n\t}\n\n}));\n","import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\n\nimport Image from 'react-image-webp';\nimport { StyledContainerFooter } from \"config/styles\";\nimport { useStyles } from \"./styles\";\n\nimport footerPng1 from 'assets/img/footer/footer_1.png';\nimport footerPng1Wepb from 'assets/imgWebp/footer_1.webp';\nimport footerPng2 from 'assets/img/footer/footer_2.png';\nimport footerPng2Wepb from 'assets/imgWebp/footer_2.webp';\nimport footerPng3 from 'assets/img/footer/footer_3.png';\nimport footerPng3Wepb from 'assets/imgWebp/footer_3.webp';\nimport footerPng4 from 'assets/img/footer/footer_4.png';\nimport footerPng4Wepb from 'assets/imgWebp/footer_4.webp';\nimport footerPng5 from 'assets/img/footer/footer_5.png';\nimport footerPng5Wepb from 'assets/imgWebp/footer_5.webp';\nimport footerPng6 from 'assets/img/footer/footer_6.png';\nimport footerPng6Wepb from 'assets/imgWebp/footer_6.webp';\n\nimport bfooterPng1 from 'assets/img/footer/B1.png';\nimport bfooterPng1Wepb from 'assets/imgWebp/B1.webp';\nimport bfooterPng2 from 'assets/img/footer/B2.png';\nimport bfooterPng2Wepb from 'assets/imgWebp/B2.webp';\nimport bfooterPng3 from 'assets/img/footer/B3.png';\nimport bfooterPng3Wepb from 'assets/imgWebp/B3.webp';\nimport bfooterPng4 from 'assets/img/footer/B4.png';\nimport bfooterPng4Wepb from 'assets/imgWebp/B4.webp';\nimport bfooterPng5 from 'assets/img/footer/B5.png';\nimport bfooterPng5Wepb from 'assets/imgWebp/B5.webp';\n\n\nconst footerData = [\n\t{\n\t\tid: 1,\n\t\tname: 'company1',\n\t\turl: footerPng1,\n\t\twebUrl: footerPng1Wepb\n\t}, {\n\t\tid: 2,\n\t\tname: 'company2',\n\t\turl: footerPng2,\n\t\twebUrl: footerPng2Wepb\n\t} , {\n\t\tid: 3,\n\t\tname: 'company2',\n\t\turl: footerPng3,\n\t\twebUrl: footerPng3Wepb\n\t} , {\n\t\tid: 4,\n\t\tname: 'company2',\n\t\turl: footerPng4,\n\t\twebUrl: footerPng4Wepb\n\t} , {\n\t\tid: 5,\n\t\tname: 'company2',\n\t\turl: footerPng5,\n\t\twebUrl: footerPng5Wepb\n\t} , {\n\t\tid: 6,\n\t\tname: 'company2',\n\t\turl: footerPng6,\n\t\twebUrl: footerPng6Wepb\n\t}\n]\n\nconst footerDataPayment = [\n\t{\n\t\tid: 1,\n\t\tname: 'company1',\n\t\turl: bfooterPng1,\n\t\twebUrl: bfooterPng1Wepb\n\t}, {\n\t\tid: 2,\n\t\tname: 'company2',\n\t\turl: bfooterPng2,\n\t\twebUrl: bfooterPng2Wepb\n\t} , {\n\t\tid: 3,\n\t\tname: 'company2',\n\t\turl: bfooterPng3,\n\t\twebUrl: bfooterPng3Wepb\n\t} , {\n\t\tid: 4,\n\t\tname: 'company2',\n\t\turl: bfooterPng4,\n\t\twebUrl: bfooterPng4Wepb\n\t} , {\n\t\tid: 5,\n\t\tname: 'company2',\n\t\turl: bfooterPng5,\n\t\twebUrl: bfooterPng5Wepb\n\t}\n]\n\nconst Footer = () => {\n\tconst { t } = useTranslation()\n\tconst classes = useStyles();\n\tconst handleClickImage = (e)=> {\n\t\tconsole.log('click image');\n\t}\n\tconst companyName = t('CompanyName')\n\tlet footerContent = t('FooterCopyright');\n\tfooterContent = footerContent.replace('[company_name]',companyName)\n\t\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\t{\n\t\t\t\t\t\t\tfooterData.map((itemIcon, index)=>)\n\t\t\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{t('FooterText1')}\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t{t('FooterText2')}\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tfooterDataPayment.map((itemIcon, index)=>)\n\t\t\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{footerContent}\n\t\t\t\t
\n\t\t\t
\n\t
\n};\n\nexport default Footer\n","import { makeStyles } from \"@material-ui/core/styles\";\nimport {layout } from \"config/styles\";\n\nexport const useStyles = makeStyles((theme) => ({\n containner: {\n position: 'relative',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'flex-end',\n width: '100%',\n minHeight: layout.headerHeighBg,\n marginBottom: '5px',\n [theme.breakpoints.down('sm')]: {\n minHeight: layout.headerHeighBg__mobile,\n '& ball__left': {\n display: 'flex'\n }\n },\n },\n containner_home: {\n position: 'relative',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'flex-end',\n width: '100%',\n minHeight: layout.headerHeighHomeBg,\n marginBottom: '5px',\n [theme.breakpoints.down('sm')]: {\n minHeight: layout.headerHeighHomeBg__mobile,\n '& ball__left': {\n display: 'flex'\n }\n },\n [theme.breakpoints.down('xs')]: {\n minHeight: layout.headerHeighHomeBg__xs__mobile,\n '& ball__left': {\n display: 'flex'\n }\n },\n },\n\n img_logo: {\n position: 'absolute',\n transform: 'translateX(-50%)',\n left: '50%',\n top: '15%',\n width: '40%',\n [theme.breakpoints.down('sm')]: {\n width: '60%',\n left: '50%',\n top: '30%',\n },\n },\n\n img_logo_home_page: {\n position: 'absolute',\n transform: 'translateX(-50%)',\n left: '50%',\n bottom: '55%',\n width: '38%',\n zIndex: '1',\n [theme.breakpoints.down('md')]: {\n bottom: '130px',\n },\n [theme.breakpoints.down('sm')]: {\n width: '50%',\n left: '50%',\n top: '15%',\n },\n },\n}));\n","import { makeStyles } from \"@material-ui/core/styles\";\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: 'center',\n flexDirection: 'column',\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 fontSize: font.largeSize,\n fontFamily: font.boldFamily,\n [theme.breakpoints.down('sm')]: {\n fontSize: font.largeSize__mobile,\n }\n },\n [theme.breakpoints.down('sm')]: {\n margin: '0 20px 0 20px',\n }\n\n },\n timer__bg: {\n position: 'relative',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n width: '80px',\n height: '80px',\n [theme.breakpoints.down('sm')]: {\n\t\t\twidth: '8vw',\n height: '8vw',\n },\n [theme.breakpoints.down('xs')]: {\n\t\t\twidth: '10vw',\n height: '10vw',\n },\n \n '& span': {\n zIndex: 1,\n fontSize: '50px',\n fontFamily: 'Digital',\n [theme.breakpoints.down('sm')]: {\n fontSize: '4.5vw',\n },\n [theme.breakpoints.down('sm')]: {\n fontSize: '5.5vw',\n }\n }\n },\n timer__bg__point: {\n position: 'relative',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\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 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 20px 0 20px',\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/home/time_box.png';\nimport labelWepb from 'assets/imgWebp/time_box.webp';\nimport clamp from 'assets/img/common/clamp.png';\nimport clampWepb from 'assets/imgWebp/clamp.webp';\n\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: '00' ,\n\thours: '00',\n\tminutes: '00',\n\tcanCowntdow: false\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\n\t\t\tsetTimer({\n\t\t\t\tseconds,\n\t\t\t\thours,\n\t\t\t\tminutes,\n\t\t\t\tcanCowntdow: true\n\t\t\t})\n\t\t} else {\n\n\t\t\tif (timer.canCowntdow) {\n\t\t\t\twindow.location.reload();\n\t\t\t}\n\t\t\t\n\t\t\tsetTimer({\n\t\t\t\tseconds: '00' ,\n\t\t\t\thours: '00',\n\t\t\t\tminutes: '00',\n\t\t\t\tcanCowntdow: false\n\t\t\t})\n\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 \t
\n \t\t
\n \t\t\n \t\t\t{t('DrawResults')}\n \t\t
\n\t\t \t
\n\t\t\t \t
\n\t\t\t\t \n\t\t\t\t {timer.hours}\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}\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}\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 React from 'react';\nimport Image from 'react-image-webp';\nimport Logo from 'assets/img/home/logo.png';\nimport LogoWepb from 'assets/imgWebp/logo.webp';\nimport { useStyles } from './styles'\nimport TimerView from './../../TimerView';\n\nconst LogoCompany = ({isHomePage, data}) => {\n const classes = useStyles();\n let className = classes.containner;\n let classNameLogo = classes.img_logo\n \n if (isHomePage) {\n classNameLogo = classes.img_logo_home_page\n className = classes.containner_home;\n }\n const renderTimer = ()=> {\n\t\tif (isHomePage) {\n\t\t\treturn
\n\t\t}\n\t}\n return (\n <>\n
\n \n {renderTimer()}\n
\n \n )\n};\n\nexport default LogoCompany\n","import { makeStyles } from \"@material-ui/core/styles\";\n\nexport const useStyles = makeStyles((theme) => ({\n loading: {\n position: 'fixed',\n width: '100vw',\n height: '100vh',\n top: '0',\n right: '0',\n bottom: '0',\n left: '0',\n backgroundColor: '#00000080',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n zIndex: 99999,\n },\n\n loading__image: {\n width: 48.3,\n height: 46.7,\n animation: 'rotation 1s steps(12) infinite',\n\n [theme.breakpoints.down('sm')]: {\n width: '7.546875vw',\n height: '7.296875vw',\n },\n },\n}));\n","import React, { useState, forwardRef, useImperativeHandle } from 'react';\n\nimport { useStyles } from './styles'\nimport LoaderImage from 'assets/img/common/loading.png'\n\nconst Loading = forwardRef((props, ref) => {\n const classes = useStyles();\n const [ isLoading, setIsLoading ] = useState(false);\n\n useImperativeHandle(ref, () => ({\n showLoading: () => setIsLoading(true),\n hideLoading: () => setIsLoading(false),\n }));\n\n return <>\n {\n isLoading &&\n
\n 
\n