-
Notifications
You must be signed in to change notification settings - Fork 0
/
.eslintcache
5 lines (5 loc) · 216 KB
/
.eslintcache
1
2
3
4
5
<<<<<<< HEAD
[{"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\index.js":"1","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\App.js":"2","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\reportWebVitals.js":"3","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\context\\LoginContext.js":"4","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\routes.js":"5","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\components\\Header\\Header.js":"6","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\Home\\Home.js":"7","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\context\\Socket.js":"8","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\SignUp\\SignUp.js":"9","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\Profile\\index.js":"10","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\Login\\Login.js":"11","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\History\\index.js":"12","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\ActiveAccount\\index.js":"13","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\ForgetPassword\\index.js":"14","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\LeaderBoard\\index.js":"15","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\Game\\index.js":"16","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\ResetPassword\\index.js":"17","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\utils\\callAuth.js":"18","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\Profile\\EmptyUserImage.js":"19","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\constant\\config.js":"20","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\utils\\CallAuthAPI.js":"21","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\components\\ListUser\\ListUser.js":"22","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\utils\\CallAPI.js":"23","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\components\\Icons\\FacebookIcon.js":"24","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\Home\\ManagerListHomeCard\\ManagerListHomeCard.js":"25","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\Game\\ChatArea\\index.js":"26","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\components\\Notice\\index.js":"27","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\Home\\GameCard\\GameCard.js":"28","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\Game\\GameArea\\GameArea.js":"29","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\Home\\AddNewGame\\AddNewGame.js":"30","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\components\\Message\\index.js":"31","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\Game\\GameArea\\provider.js":"32","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\Game\\GameArea\\Service.js":"33","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\Game\\Board\\Board.js":"34","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\Game\\ChatArea\\MessageItem.js":"35","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\Game\\ChatArea\\SendMessageComponent.js":"36","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\Game\\Square\\Square.js":"37","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\service\\date.js":"38","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\Profile\\ImportImage.js":"39","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\HistoryGame\\index.js":"40","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\HistoryGame\\GameArea\\GameArea.js":"41","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\HistoryGame\\ChatArea\\index.js":"42","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\HistoryGame\\GameArea\\provider.js":"43","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\HistoryGame\\ChatArea\\MessageItem.js":"44","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\HistoryGame\\Board\\Board.js":"45","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\HistoryGame\\Square\\Square.js":"46","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\utils\\roomAPI.js":"47","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\ChangePassword\\index.js":"48","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\utils\\matchAPI.js":"49"},{"size":500,"mtime":499162500000,"results":"50","hashOfConfig":"51"},{"size":850,"mtime":1610520134135,"results":"52","hashOfConfig":"51"},{"size":362,"mtime":499162500000,"results":"53","hashOfConfig":"51"},{"size":763,"mtime":1610449498593,"results":"54","hashOfConfig":"51"},{"size":2164,"mtime":1610458642469,"results":"55","hashOfConfig":"51"},{"size":2359,"mtime":1610256088863,"results":"56","hashOfConfig":"51"},{"size":1436,"mtime":1610520134197,"results":"57","hashOfConfig":"51"},{"size":12083,"mtime":1610461078904,"results":"58","hashOfConfig":"51"},{"size":4515,"mtime":1610520134240,"results":"59","hashOfConfig":"51"},{"size":7655,"mtime":1610521864911,"results":"60","hashOfConfig":"51"},{"size":6011,"mtime":1610520134218,"results":"61","hashOfConfig":"51"},{"size":5922,"mtime":1610520134184,"results":"62","hashOfConfig":"51"},{"size":974,"mtime":1610526064102,"results":"63","hashOfConfig":"51"},{"size":1666,"mtime":1610520134150,"results":"64","hashOfConfig":"51"},{"size":2509,"mtime":1610520134206,"results":"65","hashOfConfig":"51"},{"size":1376,"mtime":1610449498644,"results":"66","hashOfConfig":"51"},{"size":3248,"mtime":1610520134228,"results":"67","hashOfConfig":"51"},{"size":359,"mtime":1609060391855,"results":"68","hashOfConfig":"51"},{"size":626,"mtime":1609060391851,"results":"69","hashOfConfig":"51"},{"size":158,"mtime":1610520231838,"results":"70","hashOfConfig":"51"},{"size":422,"mtime":1610266631020,"results":"71","hashOfConfig":"51"},{"size":1432,"mtime":1609209869607,"results":"72","hashOfConfig":"51"},{"size":327,"mtime":1608903041889,"results":"73","hashOfConfig":"51"},{"size":766,"mtime":1609060391760,"results":"74","hashOfConfig":"51"},{"size":15179,"mtime":1610508217769,"results":"75","hashOfConfig":"51"},{"size":2653,"mtime":1610520134161,"results":"76","hashOfConfig":"51"},{"size":819,"mtime":1608084250308,"results":"77","hashOfConfig":"51"},{"size":1368,"mtime":1610523811020,"results":"78","hashOfConfig":"51"},{"size":60712,"mtime":1610525403171,"results":"79","hashOfConfig":"51"},{"size":772,"mtime":1610449498685,"results":"80","hashOfConfig":"51"},{"size":219,"mtime":1609209869608,"results":"81","hashOfConfig":"51"},{"size":869,"mtime":1610449498642,"results":"82","hashOfConfig":"51"},{"size":4518,"mtime":1608084250357,"results":"83","hashOfConfig":"51"},{"size":2155,"mtime":1610449498608,"results":"84","hashOfConfig":"51"},{"size":785,"mtime":1610461078558,"results":"85","hashOfConfig":"51"},{"size":955,"mtime":1610461078651,"results":"86","hashOfConfig":"51"},{"size":627,"mtime":1610449498643,"results":"87","hashOfConfig":"51"},{"size":866,"mtime":1610521871808,"results":"88","hashOfConfig":"51"},{"size":2662,"mtime":1610520250440,"results":"89","hashOfConfig":"51"},{"size":3372,"mtime":1610461078685,"results":"90","hashOfConfig":"51"},{"size":8325,"mtime":1610520134195,"results":"91","hashOfConfig":"51"},{"size":2641,"mtime":1610523921708,"results":"92","hashOfConfig":"51"},{"size":807,"mtime":1610449498668,"results":"93","hashOfConfig":"51"},{"size":771,"mtime":1610520134185,"results":"94","hashOfConfig":"51"},{"size":2154,"mtime":1610449498649,"results":"95","hashOfConfig":"51"},{"size":627,"mtime":1610449498677,"results":"96","hashOfConfig":"51"},{"size":724,"mtime":1610450252023,"results":"97","hashOfConfig":"51"},{"size":3710,"mtime":1610520134402,"results":"98","hashOfConfig":"51"},{"size":962,"mtime":1610507976999,"results":"99","hashOfConfig":"51"},{"filePath":"100","messages":"101","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"102"},"173c1wn",{"filePath":"103","messages":"104","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"102"},{"filePath":"105","messages":"106","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"102"},{"filePath":"107","messages":"108","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"109","usedDeprecatedRules":"102"},{"filePath":"110","messages":"111","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"102"},{"filePath":"112","messages":"113","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"114","usedDeprecatedRules":"102"},{"filePath":"115","messages":"116","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"102"},{"filePath":"117","messages":"118","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"102"},{"filePath":"119","messages":"120","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"102"},{"filePath":"121","messages":"122","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"102"},{"filePath":"123","messages":"124","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"102"},{"filePath":"125","messages":"126","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"127","usedDeprecatedRules":"102"},{"filePath":"128","messages":"129","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"130","messages":"131","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"102"},{"filePath":"132","messages":"133","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"134","usedDeprecatedRules":"102"},{"filePath":"135","messages":"136","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"137","usedDeprecatedRules":"102"},{"filePath":"138","messages":"139","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"102"},{"filePath":"140","messages":"141","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"102"},{"filePath":"142","messages":"143","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"102"},{"filePath":"144","messages":"145","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"102"},{"filePath":"146","messages":"147","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"102"},{"filePath":"148","messages":"149","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"102"},{"filePath":"150","messages":"151","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"102"},{"filePath":"152","messages":"153","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"102"},{"filePath":"154","messages":"155","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"156","usedDeprecatedRules":"102"},{"filePath":"157","messages":"158","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":"159","usedDeprecatedRules":"102"},{"filePath":"160","messages":"161","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"102"},{"filePath":"162","messages":"163","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"102"},{"filePath":"164","messages":"165","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"166","messages":"167","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"102"},{"filePath":"168","messages":"169","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"102"},{"filePath":"170","messages":"171","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"102"},{"filePath":"172","messages":"173","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"102"},{"filePath":"174","messages":"175","errorCount":0,"warningCount":4,"fixableErrorCount":0,"fixableWarningCount":0,"source":"176","usedDeprecatedRules":"102"},{"filePath":"177","messages":"178","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"102"},{"filePath":"179","messages":"180","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"102"},{"filePath":"181","messages":"182","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"183","usedDeprecatedRules":"102"},{"filePath":"184","messages":"185","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"102"},{"filePath":"186","messages":"187","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"188","usedDeprecatedRules":"102"},{"filePath":"189","messages":"190","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"102"},{"filePath":"191","messages":"192","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"193","usedDeprecatedRules":"102"},{"filePath":"194","messages":"195","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"196","usedDeprecatedRules":"102"},{"filePath":"197","messages":"198","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"102"},{"filePath":"199","messages":"200","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"102"},{"filePath":"201","messages":"202","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"102"},{"filePath":"203","messages":"204","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"102"},{"filePath":"205","messages":"206","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"102"},{"filePath":"207","messages":"208","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"209","usedDeprecatedRules":"102"},{"filePath":"210","messages":"211","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"102"},"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\index.js",[],["212","213"],"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\App.js",[],"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\reportWebVitals.js",[],"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\context\\LoginContext.js",["214"],"import React, { useState, createContext } from 'react';\r\nimport { socket, msgOnline, msgLogout } from './Socket'\r\nexport const LoginContext = createContext();\r\nexport const SocketContext = createContext();\r\n\r\n\r\nexport const LoginProvider = props => {\r\n const [isLogin, setIsLogin] = useState(false);\r\n\r\n React.useEffect(() => {\r\n msgOnline(setIsLogin)\r\n }, [])\r\n\r\n const handleLogin = (token) => {\r\n localStorage.setItem('id_token', JSON.stringify(token));\r\n msgOnline(setIsLogin)\r\n }\r\n\r\n const handleLogout = async () => {\r\n msgLogout(setIsLogin)\r\n }\r\n return (\r\n <LoginContext.Provider value={[isLogin, handleLogin, handleLogout]}>\r\n {props.children}\r\n </LoginContext.Provider>\r\n )\r\n}","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\routes.js",[],"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\components\\Header\\Header.js",["215"],"import React, { useContext } from 'react';\r\nimport { Nav, Navbar, Form, FormControl, Button } from 'react-bootstrap';\r\nimport 'bootstrap/dist/css/bootstrap.min.css';\r\nimport { Link } from 'react-router-dom';\r\n\r\nimport { LoginContext } from '../../context/LoginContext';\r\nimport { leaveRoom } from './../../context/Socket'\r\nimport './styles.css';\r\n\r\n\r\nconst Header = () => {\r\n //phai khai bao dung thu tu va du props de lay dung gia tri props cua context\r\n const [isLogin, handleLogin, handleLogout] = useContext(LoginContext);\r\n return (\r\n <div className='headerContainer'>\r\n <Navbar className='navbarConfig' variant=\"dark\">\r\n <Link to='/' >\r\n <Navbar.Brand as='div' onClick={() => {\r\n leaveRoom();\r\n }}><b>Advanced Caro</b></Navbar.Brand>\r\n </Link>\r\n <div className='headerContentContainer'>\r\n {\r\n isLogin ? (<>\r\n <Nav className=\"mr-auto\">\r\n <Link to='/' >\r\n <Nav.Link as='div' onClick={() => {\r\n leaveRoom();\r\n }}>Trang chủ</Nav.Link>\r\n\r\n </Link>\r\n <Link to='/profile' >\r\n <Nav.Link as='div' onClick={() => {\r\n leaveRoom();\r\n }}>Thông tin cá nhân</Nav.Link>\r\n </Link>\r\n <Link to='/history' >\r\n <Nav.Link as='div' onClick={() => {\r\n leaveRoom();\r\n }}>Lịch sử đấu</Nav.Link>\r\n </Link>\r\n <Link to='/bangxephang' >\r\n <Nav.Link as='div' onClick={() => {\r\n leaveRoom();\r\n }}>Bảng xếp hạng</Nav.Link>\r\n </Link>\r\n </Nav>\r\n <Form inline>\r\n <FormControl type=\"text\" placeholder=\"Tìm kiếm\" className=\"mr-sm-2\" />\r\n <Button variant=\"outline-light\">Tìm kiếm</Button>\r\n </Form></>) : null\r\n }\r\n\r\n\r\n <Nav className=\"login\">\r\n {!isLogin ? <Nav.Link href=\"/login\"><Button variant=\"outline-light\">Đăng nhập</Button></Nav.Link> : <Nav.Link><Button onClick={handleLogout} variant=\"outline-light\">Đăng xuất</Button></Nav.Link>}\r\n </Nav>\r\n </div>\r\n </Navbar>\r\n </div>\r\n )\r\n}\r\nexport default Header;","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\Home\\Home.js",[],"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\context\\Socket.js",[],"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\SignUp\\SignUp.js",[],"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\Profile\\index.js",[],"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\Login\\Login.js",[],"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\History\\index.js",["216"],"import 'bootstrap/dist/css/bootstrap.min.css';\r\nimport Authorization from './../../utils/callAuth'\r\nimport React, { useState, useContext } from 'react';\r\nimport { Table, Pagination } from 'react-bootstrap';\r\nimport { Redirect } from \"react-router-dom\";\r\nimport { LoginContext } from '../../context/LoginContext';\r\nimport { getMatchHistories } from '../../utils/matchAPI';\r\nimport styles from './styles.module.css';\r\nconst initialState = {\r\n totalMatch: 0,\r\n matchs: [],\r\n};\r\n\r\nconst ITEM_PER_PAGE = 20;\r\n\r\nconst History = () => {\r\n const [login, setLogin] = React.useState({\r\n state: false,\r\n isLogin: false,\r\n });\r\n const [isLogin] = useContext(LoginContext);\r\n const [mainState, setMainState] = useState(initialState);\r\n const [active, setActive] = useState(1);\r\n\r\n React.useEffect(() => {\r\n const bearerToken = JSON.parse(localStorage.getItem('id_token'));\r\n Authorization('auth/profile', bearerToken)\r\n .then(async user => {\r\n setLogin({\r\n state: true,\r\n isLogin: true,\r\n });\r\n const playerId = user.data.id;\r\n const { totalMatch, matchs } = JSON.parse(await getMatchHistories(playerId, active));\r\n const mainStateApi = { totalMatch, matchs: [] };\r\n mainStateApi.matchs = matchs.map((item, index) => {\r\n let opponentUsername = \"\";\r\n let result = \"\";\r\n let time = \"\";\r\n if (item.status === 0) result = \"Hòa\";\r\n if (playerId === item.player1.id) {\r\n opponentUsername = item.player2.username;\r\n if (item.status === 1) result = \"Chiến thắng\";\r\n else if(item.status === 2) result = \"Thất bại\";\r\n }\r\n else if (playerId === item.player2.id) {\r\n opponentUsername = item.player1.username;\r\n if (item.status === 2) result = \"Chiến thắng\";\r\n else if(item.status === 1) result = \"Thất bại\";\r\n }\r\n const date1 = new Date(item.startDate), date2 = new Date(item.endDate);\r\n time = \"\" + Math.round((date2.getTime() - date1.getTime()) / 1000);\r\n return {\r\n opponentUsername,\r\n time,\r\n result,\r\n }\r\n });\r\n setMainState(mainStateApi);\r\n })\r\n .catch((err) => {\r\n console.log(err);\r\n setLogin({\r\n state: true,\r\n isLogin: false,\r\n })\r\n })\r\n }, [isLogin, active])\r\n\r\n let items = [];\r\n const { totalMatch, matchs } = mainState;\r\n const nPage = Math.floor(totalMatch % ITEM_PER_PAGE === 0 ? totalMatch / ITEM_PER_PAGE : totalMatch / ITEM_PER_PAGE + 1);\r\n for (let number = 1; number <= nPage; number++) {\r\n items.push(\r\n <Pagination.Item className={styles.paginationItem} key={number} active={number === active} onClick={() => setActive(number)}>\r\n {number}\r\n </Pagination.Item>)\r\n }\r\n if (login.state) if (!login.isLogin) return <Redirect to='/login' />\r\n return (\r\n <div className={styles.historyContainer}>\r\n {login.isLogin && (\r\n <>\r\n <h3 className={styles.historyTitle}>Lịch sử đấu</h3>\r\n <div className={styles.historyTableHead}>\r\n <table>\r\n <thead>\r\n <tr>\r\n <th>#</th>\r\n <th>Đối thủ</th>\r\n <th>Thời gian (Giây)</th>\r\n <th>Kết quả</th>\r\n </tr>\r\n </thead>\r\n </table>\r\n </div>\r\n <div className={styles.historyTableBody}>\r\n <table>\r\n <tbody>\r\n {matchs.map((match, index) => {\r\n return (\r\n <tr key={index}>\r\n <td>{index + 1 + (active - 1) * ITEM_PER_PAGE}</td>\r\n <td>{match.opponentUsername}</td>\r\n <td>{match.time}</td>\r\n <td>{match.result}</td>\r\n </tr>)\r\n })}\r\n </tbody>\r\n </table>\r\n </div>\r\n {/* <Table striped bordered hover>\r\n <thead>\r\n <tr>\r\n <th>#</th>\r\n <th>Đối thủ</th>\r\n <th>Thời gian (Giây)</th>\r\n <th>Kết quả</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n {matchs.map((match, index) => {\r\n return (\r\n <tr key={index}>\r\n <td>{index}</td>\r\n <td>{match.opponentUsername}</td>\r\n <td>{match.time}</td>\r\n <td>{match.result}</td>\r\n </tr>)\r\n })}\r\n </tbody>\r\n </Table> */}\r\n <div className={styles.paginationContainer}>\r\n <Pagination>\r\n <Pagination.First className={styles.paginationItem} onClick={() => setActive(1)} />\r\n <Pagination.Prev className={styles.paginationItem} onClick={() => {\r\n if (active !== 1)\r\n setActive(active - 1);\r\n }} />\r\n {items}\r\n <Pagination.Next className={styles.paginationItem} onClick={() => {\r\n if (active !== nPage)\r\n setActive(active + 1);\r\n }} />\r\n <Pagination.Last className={styles.paginationItem} onClick={() => {\r\n setActive(nPage);\r\n }} />\r\n </Pagination>\r\n </div>\r\n </>\r\n )}\r\n </div>\r\n )\r\n}\r\n\r\nexport default History;","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\ActiveAccount\\index.js",[],"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\ForgetPassword\\index.js",[],"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\LeaderBoard\\index.js",["217"],"import React, { useState, useContext } from 'react';\r\nimport { Table, Container } from 'react-bootstrap';\r\nimport { Redirect } from \"react-router-dom\";\r\nimport 'bootstrap/dist/css/bootstrap.min.css';\r\n\r\nimport { LoginContext } from '../../context/LoginContext';\r\nimport CallAuthAPI from './../../utils/CallAuthAPI';\r\nimport Authorization from './../../utils/callAuth';\r\nimport './styles.css';\r\n\r\nconst LeaderBoard = () => {\r\n const [login, setLogin] = React.useState({\r\n state: false,\r\n isLogin: false\r\n });\r\n const [isLogin] = useContext(LoginContext);\r\n const [data, setData] = useState([])\r\n React.useEffect(() => {\r\n Authorization('auth/profile', JSON.parse(localStorage.getItem('id_token')))\r\n .then(resp => {\r\n setLogin({\r\n state: true,\r\n isLogin: true,\r\n });\r\n CallAuthAPI('leaderboard', 'GET', null, JSON.parse(localStorage.getItem('id_token')))\r\n .then(res => {\r\n setData(res.data);\r\n })\r\n .catch((err) => console.log(err));\r\n })\r\n .catch((err) => setLogin({\r\n state: true,\r\n isLogin: false,\r\n }))\r\n }, [isLogin])\r\n\r\n if (login.state) if (!login.isLogin) return <Redirect to='/login' />\r\n return (\r\n <Container className='leaderboardContainer' fluid>\r\n {\r\n login.isLogin ? (<>\r\n <h3 className='titleLeaderBoard'>Bảng xếp hạng</h3>\r\n <div className='tbl-header-leader-rank'>\r\n\r\n <table>\r\n <thead>\r\n <tr>\r\n <th style = {{width: \"10%\"}}>Top</th>\r\n <th>Username</th>\r\n <th>Số cúp</th>\r\n <th>Rank</th>\r\n </tr>\r\n </thead>\r\n </table>\r\n </div>\r\n <div className='tbl-content-leader-rank'>\r\n <table>\r\n <tbody>\r\n {data.map((item, index) => {\r\n return (<tr key={index}>\r\n <td style = {{width: \"10%\"}}>{index + 1}</td>\r\n <td>{item.username}</td>\r\n <td>{item.cup}</td>\r\n <td>{item.rank}</td>\r\n </tr>)\r\n })}\r\n </tbody>\r\n </table>\r\n </div>\r\n </>) : null\r\n}\r\n </Container >\r\n )\r\n}\r\n\r\nexport default LeaderBoard;","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\Game\\index.js",["218"],"import React from 'react';\r\nimport { Container, Col, Row } from 'react-bootstrap';\r\nimport 'bootstrap/dist/css/bootstrap.min.css';\r\n\r\nimport './styles.css';\r\nimport GameArea from './GameArea/GameArea';\r\nimport ChatArea from './ChatArea/index';\r\nimport { useParams, Redirect } from \"react-router-dom\";\r\n//import ListUser from '../../components/ListUser/ListUser';\r\nimport { LoginContext } from '../../context/LoginContext';\r\nimport { reconnectRoom } from '../../context/Socket'\r\n\r\nconst Game = () => {\r\n const { id } = useParams();\r\n const [error, setError] = React.useState(false);\r\n const [login, setLogin] = React.useState(false);\r\n const [isLogin] = React.useContext(LoginContext);\r\n const [isConnect, setIsConnect] = React.useState(false);\r\n const [isPlayer, setIsPlayer] = React.useState(false);\r\n const [isHost, setIsHost] = React.useState(false);\r\n\r\n React.useEffect(() => {\r\n setLogin(isLogin);\r\n }, [isLogin]);\r\n\r\n React.useEffect(()=>{\r\n reconnectRoom(id, setIsConnect, setIsHost, setIsPlayer);\r\n },[id] )\r\n\r\n if (error) return <Redirect to='/' />\r\n return (\r\n // <Container fluid className='gamePageContainer'>\r\n <Container fluid style={{ backgroundColor: \"#ffdac3\" }}>\r\n {login ? (\r\n <>\r\n <Row >\r\n <Col lg={9} xs={12}>\r\n {/* <Container> */}\r\n {isConnect? <GameArea roomID={id} isPlayer = {isPlayer} isHost = {isHost}/> : <></>}\r\n\r\n {/* </Container> */}\r\n </Col>\r\n <Col lg={3} xs={12}>\r\n <ChatArea roomID={id} />\r\n </Col>\r\n </Row>\r\n {/* <div className='gameAreaContainer' >\r\n\r\n </div>\r\n <div className='listOnlineAreaContainer'>\r\n\r\n </div>\r\n <div className='chatAreaContainer'>\r\n\r\n </div> */}\r\n </>\r\n ) : null}\r\n </Container>\r\n )\r\n}\r\nexport default Game;","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\ResetPassword\\index.js",[],"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\utils\\callAuth.js",[],"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\Profile\\EmptyUserImage.js",[],"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\constant\\config.js",[],"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\utils\\CallAuthAPI.js",[],"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\components\\ListUser\\ListUser.js",[],"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\utils\\CallAPI.js",[],"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\components\\Icons\\FacebookIcon.js",[],"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\Home\\ManagerListHomeCard\\ManagerListHomeCard.js",["219"],"import React, { useState, useEffect } from 'react';\r\n// import { Redirect } from \"react-router-dom\";\r\nimport { Container, Row, Col, Form, Button, Modal } from 'react-bootstrap';\r\nimport 'bootstrap/dist/css/bootstrap.min.css';\r\nimport { getRoomInfo as getRoomInfoApi } from '../../../utils/roomAPI';\r\nimport { Redirect, Link } from 'react-router-dom';\r\n\r\nimport './styles.css';\r\nimport GameCard from '../GameCard/GameCard';\r\nimport AddNewGame from '../AddNewGame/AddNewGame';\r\nimport { socket, createRoom, joinRoom, getRooms, playNow, unPlayNow, autoAddUserToRoom, autoCreateRoom, responseDrawRequest } from './../../../context/Socket';\r\nimport Notice from './../../../components/Notice/index';\r\nimport Authorization from '../../../utils/callAuth';\r\nimport close from './close.svg'\r\n\r\n\r\nconst ManageListGameCard = () => {\r\n const [listGame, setListGame] = useState([]);\r\n const [idNewRoom, setIdNewRoom] = useState(null);\r\n const [isError, setIsError] = useState({\r\n value: false,\r\n message: \"\"\r\n });\r\n const [showPlaynowModal, setShowPlaynowModal] = useState(false);\r\n const [roomPassword, setRoomPassWord] = useState(\"\");\r\n const [roomStepPeriod, setRoomStepPeriod] = useState(10);\r\n const [isNoPassword, setIsNoPassword] = useState(false);\r\n const [isRoomPasswordErr, setIsRoomPasswordErr] = useState({\r\n value: false,\r\n message: \"\"\r\n });\r\n const [isCreatingRoom, setIsCreatingRoom] = useState(true);\r\n const [showRoomModal, setShowRoomModal] = useState(false);\r\n const [curRoomId, setCurRoomId] = useState(-1);\r\n const [invite, setInvite] = useState({\r\n value: false,\r\n username: \"\",\r\n roomID: null\r\n })\r\n\r\n const [showJoinRoomWithIdModal, setShowJoinRoomWithIdModal] = useState(false);\r\n const [joinRoomId, setJoinRoomId] = useState(\"\");\r\n const [isJoinRoomWithIdErr, setIsJoinRoomWithIdErr] = useState({\r\n value: false,\r\n message: \"\"\r\n })\r\n\r\n useEffect(() => {\r\n socket.on('inviteplay', res => {\r\n setInvite({\r\n value: true,\r\n username: res.username,\r\n roomID: res.roomID\r\n })\r\n });\r\n\r\n return () => {\r\n socket.off('inviteplay')\r\n }\r\n }, [])\r\n\r\n useEffect(() => {\r\n getRooms(setListGame);\r\n socket.on('getrooms', res => setListGame(res));\r\n socket.on('autoaddusertoroom', res => {\r\n Authorization('auth/profile', JSON.parse(localStorage.getItem('id_token')))\r\n .then(user => {\r\n const userId = user.data.id;\r\n const addedUserId = res[1];\r\n if (userId === addedUserId) {\r\n const roomId = res[0];\r\n setTimeout(() => {\r\n joinRoom(roomId, null, setIdNewRoom, setIsError, setIsRoomPasswordErr);\r\n }, 1000);\r\n }\r\n });\r\n });\r\n socket.on('playnowaccepted', res => {\r\n Authorization('auth/profile', JSON.parse(localStorage.getItem('id_token')))\r\n .then(user => {\r\n const userId = user.data.id;\r\n const hostUserId = res[0];\r\n const addedUserId = res[1];\r\n if (userId === hostUserId) {\r\n const callback = (roomId) => {\r\n autoAddUserToRoom(roomId, addedUserId);\r\n setIdNewRoom(roomId);\r\n };\r\n autoCreateRoom(userId, callback, setIsError);\r\n }\r\n });\r\n });\r\n return () => {\r\n socket.off('playnowaccepted');\r\n socket.off('autoaddusertoroom');\r\n }\r\n }, []);\r\n\r\n const handleJoinRoom = async (roomID) => {\r\n getRoomInfoApi(roomID)\r\n .then(res => {\r\n if (res) {\r\n const roomInfo = JSON.parse(res);\r\n const listGameTmp = listGame;\r\n let isRoomActive = false;\r\n listGameTmp.forEach(game => {\r\n if (+game.roomID === +roomInfo.id) {\r\n isRoomActive = true;\r\n }\r\n })\r\n if (isRoomActive) {\r\n if (roomInfo.password != null) {\r\n handleCloseJoinRoomWithIdModal();\r\n setCurRoomId(roomID);\r\n setIsCreatingRoom(false);\r\n setShowRoomModal(true);\r\n }\r\n else {\r\n joinRoom(roomID, null, setIdNewRoom, setIsError, setIsRoomPasswordErr);\r\n }\r\n }\r\n else {\r\n setIsJoinRoomWithIdErr({\r\n value: true,\r\n message: \"Phòng này hiên tại không hoạt động\"\r\n })\r\n }\r\n\r\n }\r\n else {\r\n setIsJoinRoomWithIdErr({\r\n value: true,\r\n message: \"ID phòng không tồn tại\"\r\n })\r\n }\r\n\r\n });\r\n }\r\n\r\n const handleJoinRoomWithPassword = () => {\r\n if (roomPassword === \"\" || roomPassword.length < 7) {\r\n setIsRoomPasswordErr({\r\n value: true,\r\n message: \"Mật khẩu không được phép để trống và ít nhất là 7 kí tự\"\r\n });\r\n } else {\r\n // alert(curRoomId);\r\n joinRoom(curRoomId, roomPassword, setIdNewRoom, setIsError, setIsRoomPasswordErr)\r\n }\r\n }\r\n\r\n const addNew = () => {\r\n setIsCreatingRoom(true);\r\n setShowRoomModal(true);\r\n };\r\n\r\n const handleAddNew = async () => {\r\n if (isNoPassword) {\r\n createRoom(setIdNewRoom, setIsError, { roomPassword: null, roomStepPeriod: roomStepPeriod });\r\n } else {\r\n if (roomPassword === \"\" || roomPassword.length < 7) {\r\n setIsRoomPasswordErr({\r\n value: true,\r\n message: \"Mật khẩu không được phép để trống và ít nhất là 7 kí tự\"\r\n });\r\n } else {\r\n createRoom(setIdNewRoom, setIsError, { roomPassword: roomPassword, roomStepPeriod: roomStepPeriod });\r\n }\r\n }\r\n }\r\n\r\n const handleShowPlayNowModal = () => {\r\n setShowPlaynowModal(true);\r\n playNow();\r\n }\r\n\r\n const handleClosePlayNowModal = () => {\r\n unPlayNow();\r\n setShowPlaynowModal(false);\r\n }\r\n\r\n const handleCloseRoomModal = () => {\r\n setShowRoomModal(false);\r\n setRoomPassWord(\"\");\r\n setIsRoomPasswordErr({\r\n value: false,\r\n message: \"\"\r\n })\r\n }\r\n\r\n const handleRoomInputDataChange = (event) => {\r\n const value = event.target.value;\r\n if (event.target.name === \"roomPassword\") {\r\n setRoomPassWord(value);\r\n } else if (event.target.name === \"roomStepPeriod\") {\r\n setRoomStepPeriod(value);\r\n } else if (event.target.name === \"joinRoomId\") {\r\n setJoinRoomId(value);\r\n }\r\n }\r\n\r\n const handleNoPasswordCheckboxChange = (event) => {\r\n const value = event.target.checked;\r\n setIsNoPassword(value);\r\n }\r\n\r\n const handleShowJoinRoomWithIdModal = () => {\r\n setShowJoinRoomWithIdModal(true);\r\n }\r\n\r\n const handleCloseJoinRoomWithIdModal = () => {\r\n setShowJoinRoomWithIdModal(false);\r\n }\r\n\r\n const handleJoinRoomWithId = () => {\r\n handleJoinRoom(joinRoomId);\r\n }\r\n\r\n if (idNewRoom !== null) return <Redirect to={`/room/${idNewRoom}`} />\r\n return (\r\n <>\r\n {\r\n invite.value ?\r\n <div className='outGame outer-border upResult' id='outGame' >\r\n <div class=\"body dark-background\" style={{ backgroundImage: \"url(https://i.ibb.co/nrmkm7d/five-bells-washed-out-logo.png)\" }}>\r\n <div class=\"mid-border\">\r\n <div class=\"inner-border\">\r\n <img class=\"vertical-decoration top\" src=\"https://i.ibb.co/JRTK9z4/horizontally-centered-vertical-decoration.png\" alt=\"Đang load\"></img>\r\n <img class=\"vertical-decoration bottom\" src=\"https://i.ibb.co/JRTK9z4/horizontally-centered-vertical-decoration.png\" alt=\"Đang load\"></img>\r\n\r\n <button className='close-button none-button' onClick={() => {\r\n document.getElementById('outGame').className = 'outGame outer-border downResult';\r\n setTimeout(() => {\r\n setInvite({\r\n value: false,\r\n usename: \"\",\r\n roomID: null\r\n });\r\n }, 900)\r\n }}>\r\n <img src={close} className='img-cup' alt=\"Đang load\"></img>\r\n </button>\r\n <div className='notice-content'>\r\n <h3>Thông báo</h3>\r\n <h5>{`${invite.username} muốn mời bạn vào chơi!`}</h5>\r\n <div>\r\n <div className='myButton mt-2 mr-2' onClick={() => {\r\n document.getElementById('outGame').className = 'outGame outer-border downResult';\r\n setTimeout(() => {\r\n setInvite({\r\n value: false,\r\n usename: \"\",\r\n roomID: null\r\n });\r\n }, 900)\r\n }}>\r\n Hủy\r\n </div>\r\n <Link to={`/room/${invite.roomID}`}>\r\n <div className='myButton mt-2 ml-2'>\r\n Đồng ý\r\n </div>\r\n </Link>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div> : <></>\r\n }\r\n <div className=\"mainBoardContainer\">\r\n <Notice isShow={isError.value} mes={isError.message} handleClose={() => setIsError({\r\n value: false,\r\n message: \"\"\r\n })}></Notice>\r\n <div className=\"managerBoardHeader\">\r\n <h4>Danh sách các phòng game</h4>\r\n <div>\r\n <Button className=\"joinRoomWithIdBtnStyle\" variant=\"container\" onClick={handleShowJoinRoomWithIdModal}><b>Vào phòng với ID</b></Button>\r\n <Button className=\"playNowBtnStyle\" variant=\"container\" onClick={handleShowPlayNowModal}><b>Chơi ngay</b></Button>\r\n </div>\r\n </div>\r\n <h5>Vào phòng game mong muốn bằng cách xin ID phòng từ chủ phòng</h5>\r\n <Container className=\"managerBoardContainer\">\r\n <Row>\r\n <Col xs={3}>\r\n <AddNewGame addNew={addNew} />\r\n </Col>\r\n {\r\n listGame.map((game, index) => {\r\n return (\r\n <Col xs={3} key={index}>\r\n <GameCard game={game} index={index} onJoinRoom={() => handleJoinRoom(game.roomID)} />\r\n </Col>\r\n )\r\n })\r\n }\r\n </Row>\r\n </Container>\r\n <Modal show={showPlaynowModal}\r\n onHide={handleClosePlayNowModal}\r\n backdrop='static'\r\n keyboard={false}\r\n centered\r\n contentClassName=\"playNowModelStyle\">\r\n <Modal.Body>\r\n Đang tìm người chơi...\r\n <div className=\"playNowModelBodyStyle\">\r\n <Button className=\"backBtnPlayNowModelStyle\" variant=\"outline\"\r\n onClick={handleClosePlayNowModal}>Hủy</Button>\r\n </div>\r\n </Modal.Body>\r\n </Modal>\r\n <Modal show={showRoomModal}\r\n onHide={handleCloseRoomModal}\r\n backdrop='static'\r\n keyboard={false}\r\n centered\r\n contentClassName=\"createRoomModalStyle\">\r\n <Modal.Header className=\"createRoomModalNoBorderStyle\">\r\n <Modal.Title>{isCreatingRoom ? \"Tạo phòng\" : \"Vào phòng\"}</Modal.Title>\r\n </Modal.Header>\r\n <Modal.Body >\r\n <Form>\r\n <Form.Group>\r\n <Form.Label>Nhập mật khẩu phòng</Form.Label>\r\n <Form.Control type=\"password\" name=\"roomPassword\" value={roomPassword} onChange={handleRoomInputDataChange} className=\"inputPasswordStyle\" />\r\n </Form.Group>\r\n {isCreatingRoom &&\r\n <Form.Group >\r\n <Form.Check type=\"checkbox\" label=\"Không cần mật khẩu\" checked={isNoPassword} onChange={handleNoPasswordCheckboxChange} id=\"inputCheckboxCreateRoom\" />\r\n </Form.Group>}\r\n <Form.Group>\r\n <Form.Label>Thời gian bước đi</Form.Label>\r\n <Form.Control type=\"number\" min={10} name=\"roomStepPeriod\" value={roomStepPeriod} onChange={handleRoomInputDataChange} className=\"inputPasswordStyle\" />\r\n </Form.Group>\r\n {isRoomPasswordErr.value && isRoomPasswordErr.message}\r\n </Form>\r\n </Modal.Body>\r\n <Modal.Footer className=\"createRoomModalNoBorderStyle\">\r\n <Button className=\"btnCreateRoomModalStyle\" variant=\"outline\"\r\n onClick={isCreatingRoom ? handleAddNew : handleJoinRoomWithPassword}>{isCreatingRoom ? \"Tạo\" : \"Vào\"}</Button>\r\n <Button className=\"btnCreateRoomModalStyle\" variant=\"outline\"\r\n onClick={handleCloseRoomModal}>Hủy</Button>\r\n </Modal.Footer>\r\n </Modal>\r\n <Modal show={showPlaynowModal}\r\n onHide={handleClosePlayNowModal}\r\n backdrop='static'\r\n keyboard={false}\r\n centered\r\n contentClassName=\"playNowModelStyle\">\r\n <Modal.Body>\r\n Đang tìm người chơi...\r\n <div className=\"playNowModelBodyStyle\">\r\n <Button className=\"backBtnPlayNowModelStyle\" variant=\"outline\"\r\n onClick={handleClosePlayNowModal}>Hủy</Button>\r\n </div>\r\n </Modal.Body>\r\n </Modal>\r\n <Modal show={showJoinRoomWithIdModal}\r\n onHide={handleCloseJoinRoomWithIdModal}\r\n backdrop='static'\r\n keyboard={false}\r\n centered\r\n contentClassName=\"createRoomModalStyle\">\r\n <Modal.Header className=\"createRoomModalNoBorderStyle\">\r\n <Modal.Title>Vào phòng với ID</Modal.Title>\r\n </Modal.Header>\r\n <Modal.Body >\r\n <Form>\r\n <Form.Group>\r\n <Form.Label>Nhập ID phòng</Form.Label>\r\n <Form.Control type=\"text\" name=\"joinRoomId\" value={joinRoomId} onChange={handleRoomInputDataChange} className=\"inputPasswordStyle\" />\r\n </Form.Group>\r\n {isJoinRoomWithIdErr.value && isJoinRoomWithIdErr.message}\r\n </Form>\r\n </Modal.Body>\r\n <Modal.Footer className=\"createRoomModalNoBorderStyle\">\r\n <Button className=\"btnCreateRoomModalStyle\" variant=\"outline\"\r\n onClick={handleJoinRoomWithId}>Vào</Button>\r\n <Button className=\"btnCreateRoomModalStyle\" variant=\"outline\"\r\n onClick={handleCloseJoinRoomWithIdModal}>Hủy</Button>\r\n </Modal.Footer>\r\n </Modal>\r\n\r\n </div>\r\n </>\r\n )\r\n}\r\nexport default ManageListGameCard;","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\Game\\ChatArea\\index.js",["220","221"],"import React, { useState, useEffect } from 'react';\r\nimport { Card, CardGroup, Button } from 'react-bootstrap';\r\n\r\nimport './styles.css';\r\nimport SendMessageComponent from './SendMessageComponent';\r\nimport MessageItem from './MessageItem';\r\nimport { socket, sendMessage } from './../../../context/Socket';\r\n\r\nconst ChatArea = ({ roomID }) => {\r\n const [messages, setMessages] = useState([]);\r\n const [isMessageBox, setIsMessageBox] = useState(false);\r\n const [isError, setIsError] = useState(false);\r\n React.useEffect(() => {\r\n socket.once('message', res => {\r\n setMessages([...messages, ...[{\r\n name: res.username?res.username:'Guest',\r\n content: res.content,\r\n time: 'just now',\r\n host: false,\r\n image: '#'\r\n }\r\n ]]);\r\n setIsMessageBox(true);\r\n });\r\n return () => {\r\n socket.off('message')\r\n }\r\n }, [roomID,messages]);\r\n useEffect(() => {\r\n setMessages([{\r\n name: 'System',\r\n content: 'Chào mừng bạn đến với Advanced Caro của Khoa Hưng Huy',\r\n time: 'just now',\r\n host: false,\r\n image: '#'\r\n }]);\r\n setIsMessageBox(true); \r\n }, []);\r\n const handleSendMessage = (input) => {\r\n sendMessage(roomID, input, setIsError);\r\n setMessages([...messages,...[{\r\n name: 'Mine',\r\n content: input,\r\n time: 'just now',\r\n host: true,\r\n image: '#'\r\n }]]);\r\n }\r\n return (\r\n <>\r\n <CardGroup className={'pageChatRoomContainer'} style = {{border: \"5px solid brown\"}}>\r\n <Card.Header className='pageChatRoomHeader'>\r\n <Card.Title style = {{color: \"#DE9B72\"}}>Trò chuyện</Card.Title>\r\n </Card.Header>\r\n <Card.Body className='pageChatRoomBody'>\r\n {\r\n messages.map((message, index) => {\r\n return (\r\n message.host ? <div className='hostContainer'>\r\n <MessageItem name={message.name} index={index} typePlayer='host' content={message.content} time={message.time} />\r\n </div> :\r\n <div className='guestContainer'>\r\n <MessageItem name={message.name} index={index} typePlayer='guest' content={message.content} time={message.time} />\r\n </div>\r\n )\r\n })\r\n }\r\n {\r\n isError?<div className='noticeMessage'>Gửi lỗi</div>:null\r\n }\r\n </Card.Body>\r\n <Card.Footer className='pageChatRoomFooter'>\r\n <SendMessageComponent sendMessage={handleSendMessage} />\r\n </Card.Footer>\r\n </CardGroup>\r\n {/* <Button onClick={() => setIsMessageBox(true)} className={!isMessageBox ? 'iconMessage' : 'iconMessage-hidden'}>Messsage</Button> */}\r\n </>\r\n )\r\n}\r\nexport default ChatArea;","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\components\\Notice\\index.js",[],"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\Home\\GameCard\\GameCard.js",[],"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\Game\\GameArea\\GameArea.js",[],"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\Home\\AddNewGame\\AddNewGame.js",[],"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\components\\Message\\index.js",[],"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\Game\\GameArea\\provider.js",[],"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\Game\\GameArea\\Service.js",[],"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\Game\\Board\\Board.js",["222","223","224","225"],"import React from 'react';\r\n\r\nimport Square from '../Square/Square';\r\nimport { Container, Col, Row } from 'react-bootstrap';\r\n\r\nconst Board = (props) => {\r\n const renderSquare = (i) => {\r\n return (\r\n <Square\r\n isCurrentPosition={props.currentPosition === i}\r\n isWinning={props.winningSquares.includes(i)}\r\n key={\"square \" + i}\r\n value={props.squares[i]}\r\n onClick={() => props.onClick(i)}\r\n />\r\n );\r\n }\r\n\r\n\r\n const renderSquares = (n) => {\r\n let squares = [];\r\n for (let i = n; i < n + 20; i++) {\r\n squares.push(renderSquare(i));\r\n }\r\n return squares;\r\n }\r\n\r\n const renderRows = (i) => {\r\n return <div >{renderSquares(i)}</div>;\r\n }\r\n return (\r\n <div className='outer-border' style={{ backgroundColor: \"brown\" }}>\r\n <div class=\"body dark-background\" style={{ backgroundImage: \"url(https://i.ibb.co/nrmkm7d/five-bells-washed-out-logo.png)\" }}>\r\n <div class=\"mid-border\" >\r\n <div class=\"inner-border\">\r\n <img class=\"vertical-decoration top\" src=\"https://i.ibb.co/JRTK9z4/horizontally-centered-vertical-decoration.png\"></img>\r\n <img class=\"vertical-decoration bottom\" src=\"https://i.ibb.co/JRTK9z4/horizontally-centered-vertical-decoration.png\"></img>\r\n <Row className=\"justify-content-md-center\" style={{ paddingTop: \"2em\", paddingBottom: \"2em\" }}>\r\n {renderRows(0)}\r\n {renderRows(20)}\r\n {renderRows(40)}\r\n {renderRows(60)}\r\n {renderRows(80)}\r\n {renderRows(100)}\r\n {renderRows(120)}\r\n {renderRows(140)}\r\n {renderRows(160)}\r\n {renderRows(180)}\r\n {renderRows(200)}\r\n {renderRows(220)}\r\n {renderRows(240)}\r\n {renderRows(260)}\r\n {renderRows(280)}\r\n {renderRows(300)}\r\n {renderRows(320)}\r\n {renderRows(340)}\r\n {renderRows(360)}\r\n {renderRows(380)}\r\n </Row>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n );\r\n}\r\nexport default Board;","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\Game\\ChatArea\\MessageItem.js",[],"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\Game\\ChatArea\\SendMessageComponent.js",[],"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\Game\\Square\\Square.js",["226"],"import React from 'react';\r\nimport X from './X.svg';\r\nimport O from './O.svg'\r\nimport './styles.css';\r\nconst Square = (props) => {\r\n return (\r\n <button className={props.isWinning ? \"square square--winning\" : props.isCurrentPosition ? 'square current-position' : 'square'} style={{ padding: \"0px\", backgroundColor: \"#DE9B72\", border: \"1px solid brown\" }} onClick={props.onClick}>\r\n {props.value ? <img src={props.value === 'X' ? X : props.value === 'O' ? O : \"\"} style={{ height: \"2.8vh\", width: \"2.8vh\", margin: \"0\", padding: \"0\" }}></img> : <></>}\r\n </button>\r\n\r\n );\r\n}\r\n\r\nexport default Square;","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\service\\date.js",[],"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\Profile\\ImportImage.js",["227"],"import firebase from 'firebase';\r\nconst firebaseConfig = {\r\n apiKey: \"AIzaSyB3C7OOUgjjxf7yvV9P6VbmtHmDGKVBCeA\",\r\n authDomain: \"stotepicture.firebaseapp.com\",\r\n databaseURL: \"https://stotepicture.firebaseio.com\",\r\n projectId: \"stotepicture\",\r\n storageBucket: \"stotepicture.appspot.com\",\r\n messagingSenderId: \"160343356649\",\r\n appId: \"1:160343356649:web:b433527c5cf3c68d46ac78\",\r\n measurementId: \"G-228F3ECR6Q\"\r\n};\r\n// Initialize Firebase\r\nfirebase.initializeApp(firebaseConfig);\r\n// firebase.analytics();\r\n\r\nvar selectedFile;\r\n\r\nexport default function getfile(file,setIsLoad,setSourceImage) {\r\n console.log(file);\r\n\r\n // selected file is that file which user chosen by html form \r\n selectedFile = file[0];\r\n\r\n // make save button disabled for few seconds that has id='submit_link' \r\n //document.getElementById('submit_link').setAttribute('disabled', 'true');\r\n return myfunction(setIsLoad,setSourceImage); // call below written function \r\n}\r\n\r\nfunction myfunction(setIsLoad,setSourceImage) {\r\n return new Promise((resolve,reject)=>{\r\n // select unique name for everytime when image uploaded \r\n // Date.now() is function that give current timestamp \r\n var name = \"123\" + Date.now();\r\n\r\n // make ref to your firebase storage and select images folder \r\n var storageRef = firebase.storage().ref('/images/' + name);\r\n\r\n // put file to firebase \r\n var uploadTask = storageRef.put(selectedFile);\r\n\r\n // all working for progress bar that in html \r\n // to indicate image uploading... report \r\n uploadTask.on('state_changed', function (snapshot) {\r\n setIsLoad(true);\r\n switch (snapshot.state) {\r\n case firebase.storage.TaskState.PAUSED:\r\n console.log('Upload is paused');\r\n break;\r\n case firebase.storage.TaskState.RUNNING:\r\n console.log('Upload is running');\r\n break;\r\n }\r\n }, function (error) {\r\n console.log(error);\r\n }, function () {\r\n\r\n // get the uploaded image url back \r\n uploadTask.snapshot.ref.getDownloadURL().then(\r\n function (downloadURL) {\r\n\r\n // You get your url from here \r\n console.log('File available at', downloadURL);\r\n // document.getElementById('url').value = downloadURL;\r\n // $('#image').attr(\"src\", downloadURL);\r\n\r\n // alert(document.getElementById('url').value);\r\n // print the image url \r\n setIsLoad(false);\r\n setSourceImage(false);\r\n resolve(downloadURL);\r\n // document.getElementById('submit_link').removeAttribute('disabled');\r\n });\r\n });\r\n\r\n })\r\n};\r\n\r\n\r\n","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\HistoryGame\\index.js",[],"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\HistoryGame\\GameArea\\GameArea.js",["228"],"import React, { useState } from 'react';\r\n// import { Container } from 'react-bootstrap';\r\nimport 'bootstrap/dist/css/bootstrap.min.css';\r\nimport { Container, Col, Row } from 'react-bootstrap';\r\n\r\nimport Board from '../Board/Board';\r\nimport outRoom from './image/back-arrow.svg'\r\nimport trophy from './image/trophy.svg'\r\nimport key from './image/key.svg'\r\nimport ChangingProgressProvider from './provider'\r\nimport {\r\n CircularProgressbarWithChildren,\r\n buildStyles\r\n} from \"react-circular-progressbar\";\r\nimport \"react-circular-progressbar/dist/styles.css\";\r\nimport man from './image/man.svg'\r\n\r\nconst GameArea = (props) => {\r\n const [history, setHistory] = useState([{\r\n squares: Array(400).fill(null),\r\n position: null,\r\n }]);\r\n const [firstPlayer, setFirstPlayer] = useState(props.player1)\r\n const [secondPlayer, setSecondPlayer] = useState(props.player2)\r\n const [stepNumber, setStepNumber] = useState(props.stepNumber);\r\n\r\n const [winner, setWinner] = useState(\r\n {\r\n value: null,\r\n position: []\r\n }\r\n )\r\n\r\n React.useEffect(()=>{\r\n setFirstPlayer(props.player1);\r\n setSecondPlayer(props.player2)\r\n }, [props.player1, props.player2])\r\n\r\n React.useEffect(()=>{\r\n setStepNumber(props.stepNumber)\r\n }, [ props.stepNumber])\r\n\r\n React.useEffect(() => {\r\n if (props.steps.length !== 0 && firstPlayer.user && secondPlayer.user) {\r\n const newHistory = props.steps.slice(1).reduce((preHistory, item, index, arr) => {\r\n const currentHistory = preHistory.slice(0, index + 1);\r\n const current = currentHistory[currentHistory.length - 1];\r\n const squares = current.squares.slice();\r\n\r\n console.log(item.userID,firstPlayer.user.id)\r\n squares[item.position] = item.userID === firstPlayer.user.id? 'X' : 'O'\r\n return currentHistory.concat([{ squares: squares, position: item.position }]);\r\n }, [{\r\n squares: Array(400).fill(null),\r\n position: null,\r\n }])\r\n setHistory(newHistory);\r\n setStepNumber(newHistory.length-1)\r\n }\r\n }, [props.steps, firstPlayer, secondPlayer])\r\n\r\n const newHistory = history;\r\n const current = newHistory[stepNumber !== -1? stepNumber : 0];\r\n\r\n console.log(secondPlayer.user)\r\n return (\r\n <>\r\n <Row>\r\n < Col xs={4} className='sidebar-infor' >\r\n <Row>\r\n <Col xs={6}>\r\n <button className=\"myButton mt-2\" >\r\n <img src={outRoom} className='img-out-room' alt='Đang load...'></img>\r\n </button>\r\n </Col>\r\n <Col xs={6} style={{ display: \"flex\", alignItems: \"center\" }}>\r\n <h5>Room ID: {props.roomID}</h5>\r\n </Col>\r\n </Row>\r\n <Row className='mid-border player-avatar' >\r\n <div className='inner-border' style={{ position: \"relative\" }} >\r\n <Row>\r\n <Col xs={12} className='text-align-center'>\r\n <h5 >{firstPlayer.user.name}</h5>\r\n </Col>\r\n <Col xs={12}>\r\n\r\n <div className='text-align-center' style={{ height: \"17vh\", width: \"17vh\", margin: \"auto\" }}>\r\n <ChangingProgressProvider startTime={firstPlayer.isTurn} interval={200} values={[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100]}>\r\n {percentage => (\r\n <CircularProgressbarWithChildren\r\n value={percentage}\r\n styles={buildStyles({\r\n pathColor: !firstPlayer.isTurn ? \"brown\" : percentage < 70 ? \"#DE9B72\" : \"#ee5b00\",\r\n trailColor: !firstPlayer.isTurn ? \"brown\" : \"#eee\",\r\n strokeLinecap: !firstPlayer.isTurn ? \"brown\" : \"butt\",\r\n })}\r\n >\r\n <img src={firstPlayer.user.avatarImagePath === null ? man : firstPlayer.user.avatarImagePath} className=\"img-fluid z-depth-1 rounded-circle img-avatar\" alt=\"Đang load...\" />\r\n\r\n </CircularProgressbarWithChildren>\r\n )}\r\n </ChangingProgressProvider>\r\n </div>\r\n\r\n\r\n </Col>\r\n <Col xs={12} className='text-align-center mt-2'>\r\n <Row className=\"justify-content-md-center\">\r\n <img src={trophy} className=\"img-fluid z-depth-1 rounded-circle img-cup\" alt=\"\" />\r\n <h5>{firstPlayer.user.cup}</h5>\r\n </Row>\r\n </Col>\r\n </Row>\r\n {\r\n firstPlayer.isHost ? <div style={{ position: \"absolute\" }}>\r\n <img src={key} className=\"img-fluid z-depth-1 rounded-circle \" style={{ height: \"8vh\" }} alt=\"Đang load...\" />\r\n </div> : <></>\r\n }\r\n </div>\r\n </Row>\r\n <Row className='mid-border player-avatar' >\r\n <div className='inner-border' style={{ position: 'relative' }} >\r\n <Row>\r\n <Col xs={12} className='text-align-center'>\r\n <h5 >{secondPlayer.user.name}</h5>\r\n </Col>\r\n <Col xs={12}>\r\n\r\n <div className='text-align-center' style={{ height: \"17vh\", width: \"17vh\", margin: \"auto\" }}>\r\n <ChangingProgressProvider startTime={secondPlayer.isTurn} interval={200} values={[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100]}>\r\n {percentage => (\r\n <CircularProgressbarWithChildren\r\n value={percentage}\r\n styles={buildStyles({\r\n pathColor: !secondPlayer.isTurn ? \"brown\" : percentage < 70 ? \"#DE9B72\" : \"#ee5b00\",\r\n trailColor: !secondPlayer.isTurn ? \"brown\" : \"#eee\",\r\n strokeLinecap: !secondPlayer.isTurn ? \"brown\" : \"butt\",\r\n })}\r\n >\r\n <img src={secondPlayer.user.avatarImagePath === null ? man : secondPlayer.user.avatarImagePath} className=\"img-fluid z-depth-1 rounded-circle img-avatar\" alt=\"Đang load...\" />\r\n\r\n </CircularProgressbarWithChildren>\r\n )}\r\n </ChangingProgressProvider>\r\n </div>\r\n\r\n\r\n\r\n </Col>\r\n <Col xs={12} className='text-align-center mt-2'>\r\n <Row className=\"justify-content-md-center\">\r\n <img src={trophy} className=\"img-fluid z-depth-1 rounded-circle img-cup\" alt=\"\" />\r\n <h5>{secondPlayer.user.cup}</h5>\r\n </Row>\r\n </Col>\r\n </Row>\r\n {\r\n secondPlayer.isHost ? <div style={{ position: \"absolute\" }}>\r\n <img src={key} className=\"img-fluid z-depth-1 rounded-circle \" style={{ height: \"8vh\" }} alt=\"\" />\r\n </div> : <></>\r\n }\r\n </div>\r\n </Row>\r\n </Col >\r\n <Col xs={8} className=\"game-board\">\r\n <Container>\r\n\r\n <div style={{ pointerEvents: \"none\" }}>\r\n <Board\r\n currentPosition={current.position}\r\n winningSquares={winner.value ? winner.position : []}\r\n squares={current.squares}\r\n />\r\n </div>\r\n </Container>\r\n </Col>\r\n </Row>\r\n </>\r\n\r\n );\r\n}\r\nexport default GameArea;","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\HistoryGame\\ChatArea\\index.js",["229"],"import React, { useState } from 'react';\r\nimport { Card, CardGroup, Nav } from 'react-bootstrap';\r\n\r\nimport './styles.css';\r\nimport MessageItem from './MessageItem';\r\n\r\nconst ChatArea = ({ jumpTo, stepHistory, chats }) => {\r\n const [messages, setMessages] = useState([]);\r\n const [activeKey, setActiveKey] = useState(\"chess\");\r\n const [steps, setSteps] = useState(stepHistory);\r\n const [currentStep, setCurrentStep] = useState(0);\r\n\r\n React.useEffect(()=>{\r\n setSteps(stepHistory)\r\n }, [stepHistory])\r\n\r\n React.useEffect(() => {\r\n setMessages(chats)\r\n }, [chats])\r\n return (\r\n <>\r\n <CardGroup className={'pageChatRoomContainer'} style={{ border: \"5px solid brown\" }}>\r\n <Card.Header className='pageChatRoomHeader'>\r\n <Nav variant=\"tabs\" defaultActiveKey=\"#chess\" style={{ minWidth: \"-webkit-fill-available\" }}>\r\n <Nav.Item style={{ minWidth: \"50%\" }} onClick={() => setActiveKey(\"chess\")}>\r\n <Nav.Link href=\"#chess\" >Nước đi</Nav.Link>\r\n </Nav.Item>\r\n <Nav.Item style={{ minWidth: \"50%\" }} onClick={() => setActiveKey(\"mess\")}>\r\n <Nav.Link href=\"#mess\" >Trò chuyện</Nav.Link>\r\n </Nav.Item>\r\n </Nav>\r\n </Card.Header>\r\n <Card.Body className='pageChatRoomBody'>\r\n {\r\n activeKey === \"chess\" ?\r\n steps.map((step, move) => {\r\n const desc = move ?\r\n 'Đánh tại ô' + \" ( \" + Math.floor(step.position / 20) + \", \" + step.position % 20 + \" )\" :\r\n 'Bắt đầu game';\r\n return (\r\n <li key={move} style = {{marginTop: \"2vh\", minWidth: \"-webkit-fill-available\" }}>\r\n <button className = {`myButton ${move === currentStep ? 'ready' : ''}`} onClick={() => {jumpTo(move); setCurrentStep(move)} } style={{ minWidth: \"90%\" }}>{desc}</button>\r\n </li>\r\n );\r\n })\r\n :\r\n messages.map((message, index) => {\r\n return (\r\n message.host ? <div className='hostContainer'>\r\n <MessageItem name={message.name} index={index} typePlayer='host' content={message.content} time={message.time} />\r\n </div> :\r\n <div className='guestContainer'>\r\n <MessageItem name={message.name} index={index} typePlayer='guest' content={message.content} time={message.time} />\r\n </div>\r\n )\r\n })\r\n }\r\n </Card.Body>\r\n </CardGroup>\r\n </>\r\n )\r\n}\r\nexport default ChatArea;","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\HistoryGame\\GameArea\\provider.js",[],"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\HistoryGame\\ChatArea\\MessageItem.js",[],"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\HistoryGame\\Board\\Board.js",[],"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\HistoryGame\\Square\\Square.js",[],"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\utils\\roomAPI.js",[],"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\ChangePassword\\index.js",["230"],"import React, { useEffect, useState } from 'react';\r\nimport { Form, Button } from 'react-bootstrap';\r\nimport { useParams } from \"react-router-dom\";\r\nimport Authorization from '../../utils/callAuth';\r\nimport CallAuthAPI from '../../utils/CallAuthAPI';\r\n\r\nimport './styles.css';\r\n\r\nconst ChangePassword = () => {\r\n const [isPermission, setIsPermission] = useState(false);\r\n const [oldPassword,setOldPassword]=useState('');\r\n const [newPassword, setNewPassword] = useState('');\r\n const [reNewPassword, setReNewPassword] = useState('');\r\n const [noticeForm, setNoticeForm] = useState('');\r\n const [errorAccess,setErrorAccess]=useState('');\r\n\r\n useEffect(() => {\r\n Authorization('auth/profile', JSON.parse(localStorage.getItem('id_token'))).then((res) => {\r\n if (res.data.id) setIsPermission(true);\r\n else setErrorAccess('Truy cập không hợp lệ. Vui lòng kiểm tra lại!');\r\n })\r\n .then((err) => setErrorAccess('Truy cập không hợp lệ. Vui lòng kiểm tra lại!'));\r\n }, [])\r\n const onReset = () => {\r\n if(newPassword.length<7){\r\n setNoticeForm('Mật khẩu mới phải có độ dài lớn hơn hoặc bẳng 7');\r\n return;\r\n }\r\n if(newPassword!==reNewPassword){\r\n setNoticeForm('Mật khẩu mới và nhập lại mật khẩu mới không trùng khớp với nhau');\r\n return;\r\n }\r\n CallAuthAPI('users/changepassword', 'POST', {\r\n oldPassword: oldPassword,\r\n newPassword: newPassword,\r\n },JSON.parse(localStorage.getItem('id_token')))\r\n .then(res => {\r\n if(res.data){\r\n setNoticeForm('Đổi mật khẩu thành công');\r\n setOldPassword('');\r\n setNewPassword('');\r\n setReNewPassword('');\r\n }\r\n else{\r\n setNoticeForm('Đổi mật khẩu thất bại, vui lòng kiểm tra lại');\r\n }\r\n })\r\n }\r\n\r\n const onChangeOldPassword = (e) => {\r\n setOldPassword(e.target.value);\r\n }\r\n\r\n const onChangeNewPassword = (e) => {\r\n setNewPassword(e.target.value);\r\n }\r\n\r\n const onChangeReNewPassword = (e) => {\r\n setReNewPassword(e.target.value);\r\n }\r\n\r\n return (\r\n <>\r\n <Form className=\"resetPasswordContainer\">\r\n {\r\n isPermission ? (<>\r\n <h5 className='labelInputResetPassword'>Đổi mật khẩu</h5>\r\n <div className=\"noticeResetPassword\">{noticeForm}</div>\r\n <Form.Group controlId=\"oldpassword\">\r\n <Form.Label className='labelInput'>Mật khẩu cũ</Form.Label>\r\n <Form.Control onChange={onChangeOldPassword} value={oldPassword} type=\"password\" className=\"inputResetPassword\" />\r\n </Form.Group>\r\n <Form.Group controlId=\"newpassword\">\r\n <Form.Label className='labelInput'>Mật khẩu mới</Form.Label>\r\n <Form.Control onChange={onChangeNewPassword} value={newPassword} type=\"password\" className=\"inputResetPassword\" />\r\n </Form.Group>\r\n <Form.Group controlId=\"repassword\">\r\n <Form.Label className='labelInput'>Nhập lại mật khẩu mới</Form.Label>\r\n <Form.Control onChange={onChangeReNewPassword} value={reNewPassword} className=\"inputResetPassword\" type=\"password\" />\r\n </Form.Group>\r\n <div className='submitResetPassword'>\r\n <Button className='btnPageResetPassword' onClick={onReset} id=\"signin\" type=\"button\">\r\n Xác nhận</Button>\r\n </div>\r\n </>) : <div className=\"noticeResetPassword\">{errorAccess}</div>\r\n }\r\n </Form>\r\n </>\r\n )\r\n}\r\nexport default ChangePassword;","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\utils\\matchAPI.js",[],{"ruleId":"231","replacedBy":"232"},{"ruleId":"233","replacedBy":"234"},{"ruleId":"235","severity":1,"message":"236","line":2,"column":10,"nodeType":"237","messageId":"238","endLine":2,"endColumn":16},{"ruleId":"235","severity":1,"message":"239","line":13,"column":19,"nodeType":"237","messageId":"238","endLine":13,"endColumn":30},{"ruleId":"235","severity":1,"message":"240","line":4,"column":10,"nodeType":"237","messageId":"238","endLine":4,"endColumn":15},{"ruleId":"235","severity":1,"message":"240","line":2,"column":10,"nodeType":"237","messageId":"238","endLine":2,"endColumn":15},{"ruleId":"235","severity":1,"message":"241","line":15,"column":17,"nodeType":"237","messageId":"238","endLine":15,"endColumn":25},{"ruleId":"235","severity":1,"message":"242","line":11,"column":105,"nodeType":"237","messageId":"238","endLine":11,"endColumn":124},{"ruleId":"235","severity":1,"message":"243","line":2,"column":27,"nodeType":"237","messageId":"238","endLine":2,"endColumn":33},{"ruleId":"235","severity":1,"message":"244","line":11,"column":10,"nodeType":"237","messageId":"238","endLine":11,"endColumn":22},{"ruleId":"235","severity":1,"message":"245","line":4,"column":10,"nodeType":"237","messageId":"238","endLine":4,"endColumn":19},{"ruleId":"235","severity":1,"message":"246","line":4,"column":21,"nodeType":"237","messageId":"238","endLine":4,"endColumn":24},{"ruleId":"247","severity":1,"message":"248","line":36,"column":13,"nodeType":"249","endLine":36,"endColumn":127},{"ruleId":"247","severity":1,"message":"248","line":37,"column":13,"nodeType":"249","endLine":37,"endColumn":130},{"ruleId":"247","severity":1,"message":"248","line":8,"column":24,"nodeType":"249","endLine":8,"endColumn":161},{"ruleId":"250","severity":1,"message":"251","line":45,"column":7,"nodeType":"252","messageId":"253","endLine":52,"endColumn":8},{"ruleId":"235","severity":1,"message":"254","line":27,"column":18,"nodeType":"237","messageId":"238","endLine":27,"endColumn":27},{"ruleId":"255","severity":1,"message":"256","line":38,"column":32,"nodeType":"257","messageId":"258","endLine":38,"endColumn":33},{"ruleId":"235","severity":1,"message":"259","line":3,"column":10,"nodeType":"237","messageId":"238","endLine":3,"endColumn":19},"no-native-reassign",["260"],"no-negated-in-lhs",["261"],"no-unused-vars","'socket' is defined but never used.","Identifier","unusedVar","'handleLogin' is assigned a value but never used.","'Table' is defined but never used.","'setError' is assigned a value but never used.","'responseDrawRequest' is defined but never used.","'Button' is defined but never used.","'isMessageBox' is assigned a value but never used.","'Container' is defined but never used.","'Col' is defined but never used.","jsx-a11y/alt-text","img elements must have an alt prop, either with meaningful text, or an empty string for decorative images.","JSXOpeningElement","default-case","Expected a default case.","SwitchStatement","missingDefaultCase","'setWinner' is assigned a value but never used.","no-useless-concat","Unexpected string concatenation of literals.","BinaryExpression","unexpectedConcat","'useParams' is defined but never used.","no-global-assign","no-unsafe-negation"]
=======
[{"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\index.js":"1","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\App.js":"2","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\reportWebVitals.js":"3","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\context\\LoginContext.js":"4","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\routes.js":"5","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\components\\Header\\Header.js":"6","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\Home\\Home.js":"7","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\context\\Socket.js":"8","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\SignUp\\SignUp.js":"9","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\Profile\\index.js":"10","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\Login\\Login.js":"11","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\History\\index.js":"12","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\ActiveAccount\\index.js":"13","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\ForgetPassword\\index.js":"14","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\LeaderBoard\\index.js":"15","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\Game\\index.js":"16","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\ResetPassword\\index.js":"17","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\utils\\callAuth.js":"18","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\Profile\\EmptyUserImage.js":"19","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\constant\\config.js":"20","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\utils\\CallAuthAPI.js":"21","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\components\\ListUser\\ListUser.js":"22","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\utils\\CallAPI.js":"23","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\components\\Icons\\FacebookIcon.js":"24","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\Home\\ManagerListHomeCard\\ManagerListHomeCard.js":"25","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\Game\\ChatArea\\index.js":"26","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\components\\Notice\\index.js":"27","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\Home\\GameCard\\GameCard.js":"28","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\Game\\GameArea\\GameArea.js":"29","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\Home\\AddNewGame\\AddNewGame.js":"30","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\components\\Message\\index.js":"31","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\Game\\GameArea\\provider.js":"32","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\Game\\GameArea\\Service.js":"33","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\Game\\Board\\Board.js":"34","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\Game\\ChatArea\\MessageItem.js":"35","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\Game\\ChatArea\\SendMessageComponent.js":"36","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\Game\\Square\\Square.js":"37","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\service\\date.js":"38","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\Profile\\ImportImage.js":"39","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\HistoryGame\\index.js":"40","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\HistoryGame\\GameArea\\GameArea.js":"41","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\HistoryGame\\ChatArea\\index.js":"42","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\HistoryGame\\GameArea\\provider.js":"43","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\HistoryGame\\ChatArea\\MessageItem.js":"44","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\HistoryGame\\Board\\Board.js":"45","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\HistoryGame\\Square\\Square.js":"46","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\utils\\roomAPI.js":"47","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\ChangePassword\\index.js":"48","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\utils\\matchAPI.js":"49"},{"size":500,"mtime":499162500000,"results":"50","hashOfConfig":"51"},{"size":850,"mtime":1610520134135,"results":"52","hashOfConfig":"51"},{"size":362,"mtime":499162500000,"results":"53","hashOfConfig":"51"},{"size":763,"mtime":1610449498593,"results":"54","hashOfConfig":"51"},{"size":2164,"mtime":1610458642469,"results":"55","hashOfConfig":"51"},{"size":2359,"mtime":1610256088863,"results":"56","hashOfConfig":"51"},{"size":1436,"mtime":1610520134197,"results":"57","hashOfConfig":"51"},{"size":12083,"mtime":1610461078904,"results":"58","hashOfConfig":"51"},{"size":4515,"mtime":1610520134240,"results":"59","hashOfConfig":"51"},{"size":7655,"mtime":1610521864911,"results":"60","hashOfConfig":"51"},{"size":6011,"mtime":1610520134218,"results":"61","hashOfConfig":"51"},{"size":5922,"mtime":1610520134184,"results":"62","hashOfConfig":"51"},{"size":948,"mtime":1610520134137,"results":"63","hashOfConfig":"51"},{"size":1666,"mtime":1610520134150,"results":"64","hashOfConfig":"51"},{"size":2509,"mtime":1610520134206,"results":"65","hashOfConfig":"51"},{"size":1376,"mtime":1610449498644,"results":"66","hashOfConfig":"51"},{"size":3248,"mtime":1610520134228,"results":"67","hashOfConfig":"51"},{"size":359,"mtime":1609060391855,"results":"68","hashOfConfig":"51"},{"size":626,"mtime":1609060391851,"results":"69","hashOfConfig":"51"},{"size":158,"mtime":1610520231838,"results":"70","hashOfConfig":"51"},{"size":422,"mtime":1610266631020,"results":"71","hashOfConfig":"51"},{"size":1432,"mtime":1609209869607,"results":"72","hashOfConfig":"51"},{"size":327,"mtime":1608903041889,"results":"73","hashOfConfig":"51"},{"size":766,"mtime":1609060391760,"results":"74","hashOfConfig":"51"},{"size":15179,"mtime":1610508217769,"results":"75","hashOfConfig":"51"},{"size":2653,"mtime":1610520134161,"results":"76","hashOfConfig":"51"},{"size":819,"mtime":1608084250308,"results":"77","hashOfConfig":"51"},{"size":1368,"mtime":1610523811020,"results":"78","hashOfConfig":"51"},{"size":60696,"mtime":1610520134173,"results":"79","hashOfConfig":"51"},{"size":772,"mtime":1610449498685,"results":"80","hashOfConfig":"51"},{"size":219,"mtime":1609209869608,"results":"81","hashOfConfig":"51"},{"size":869,"mtime":1610449498642,"results":"82","hashOfConfig":"51"},{"size":4518,"mtime":1608084250357,"results":"83","hashOfConfig":"51"},{"size":2155,"mtime":1610449498608,"results":"84","hashOfConfig":"51"},{"size":785,"mtime":1610461078558,"results":"85","hashOfConfig":"51"},{"size":955,"mtime":1610461078651,"results":"86","hashOfConfig":"51"},{"size":627,"mtime":1610449498643,"results":"87","hashOfConfig":"51"},{"size":866,"mtime":1610521871808,"results":"88","hashOfConfig":"51"},{"size":2662,"mtime":1610520250440,"results":"89","hashOfConfig":"51"},{"size":3372,"mtime":1610461078685,"results":"90","hashOfConfig":"51"},{"size":8325,"mtime":1610520134195,"results":"91","hashOfConfig":"51"},{"size":2641,"mtime":1610523921708,"results":"92","hashOfConfig":"51"},{"size":807,"mtime":1610449498668,"results":"93","hashOfConfig":"51"},{"size":771,"mtime":1610520134185,"results":"94","hashOfConfig":"51"},{"size":2154,"mtime":1610449498649,"results":"95","hashOfConfig":"51"},{"size":627,"mtime":1610449498677,"results":"96","hashOfConfig":"51"},{"size":724,"mtime":1610450252023,"results":"97","hashOfConfig":"51"},{"size":3710,"mtime":1610520134402,"results":"98","hashOfConfig":"51"},{"size":962,"mtime":1610507976999,"results":"99","hashOfConfig":"51"},{"filePath":"100","messages":"101","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"102"},"173c1wn",{"filePath":"103","messages":"104","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"102"},{"filePath":"105","messages":"106","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"102"},{"filePath":"107","messages":"108","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"109","usedDeprecatedRules":"102"},{"filePath":"110","messages":"111","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"102"},{"filePath":"112","messages":"113","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"114","usedDeprecatedRules":"102"},{"filePath":"115","messages":"116","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"102"},{"filePath":"117","messages":"118","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"102"},{"filePath":"119","messages":"120","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"102"},{"filePath":"121","messages":"122","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"102"},{"filePath":"123","messages":"124","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"102"},{"filePath":"125","messages":"126","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"127","usedDeprecatedRules":"102"},{"filePath":"128","messages":"129","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":"130","usedDeprecatedRules":"102"},{"filePath":"131","messages":"132","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"102"},{"filePath":"133","messages":"134","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"135","usedDeprecatedRules":"102"},{"filePath":"136","messages":"137","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"138","usedDeprecatedRules":"102"},{"filePath":"139","messages":"140","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"102"},{"filePath":"141","messages":"142","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"102"},{"filePath":"143","messages":"144","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"102"},{"filePath":"145","messages":"146","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"102"},{"filePath":"147","messages":"148","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"102"},{"filePath":"149","messages":"150","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"102"},{"filePath":"151","messages":"152","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"102"},{"filePath":"153","messages":"154","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"102"},{"filePath":"155","messages":"156","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"157","usedDeprecatedRules":"102"},{"filePath":"158","messages":"159","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":"160","usedDeprecatedRules":"102"},{"filePath":"161","messages":"162","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"102"},{"filePath":"163","messages":"164","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"165","messages":"166","errorCount":0,"warningCount":12,"fixableErrorCount":0,"fixableWarningCount":0,"source":"167","usedDeprecatedRules":"102"},{"filePath":"168","messages":"169","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"102"},{"filePath":"170","messages":"171","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"102"},{"filePath":"172","messages":"173","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"102"},{"filePath":"174","messages":"175","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"102"},{"filePath":"176","messages":"177","errorCount":0,"warningCount":4,"fixableErrorCount":0,"fixableWarningCount":0,"source":"178","usedDeprecatedRules":"102"},{"filePath":"179","messages":"180","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"102"},{"filePath":"181","messages":"182","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"102"},{"filePath":"183","messages":"184","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"185","usedDeprecatedRules":"102"},{"filePath":"186","messages":"187","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"102"},{"filePath":"188","messages":"189","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"190","usedDeprecatedRules":"102"},{"filePath":"191","messages":"192","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"102"},{"filePath":"193","messages":"194","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"195","usedDeprecatedRules":"102"},{"filePath":"196","messages":"197","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"198","messages":"199","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"102"},{"filePath":"200","messages":"201","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"102"},{"filePath":"202","messages":"203","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"102"},{"filePath":"204","messages":"205","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"102"},{"filePath":"206","messages":"207","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"102"},{"filePath":"208","messages":"209","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"210","usedDeprecatedRules":"102"},{"filePath":"211","messages":"212","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"102"},"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\index.js",[],["213","214"],"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\App.js",[],"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\reportWebVitals.js",[],"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\context\\LoginContext.js",["215"],"import React, { useState, createContext } from 'react';\r\nimport { socket, msgOnline, msgLogout } from './Socket'\r\nexport const LoginContext = createContext();\r\nexport const SocketContext = createContext();\r\n\r\n\r\nexport const LoginProvider = props => {\r\n const [isLogin, setIsLogin] = useState(false);\r\n\r\n React.useEffect(() => {\r\n msgOnline(setIsLogin)\r\n }, [])\r\n\r\n const handleLogin = (token) => {\r\n localStorage.setItem('id_token', JSON.stringify(token));\r\n msgOnline(setIsLogin)\r\n }\r\n\r\n const handleLogout = async () => {\r\n msgLogout(setIsLogin)\r\n }\r\n return (\r\n <LoginContext.Provider value={[isLogin, handleLogin, handleLogout]}>\r\n {props.children}\r\n </LoginContext.Provider>\r\n )\r\n}","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\routes.js",[],"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\components\\Header\\Header.js",["216"],"import React, { useContext } from 'react';\r\nimport { Nav, Navbar, Form, FormControl, Button } from 'react-bootstrap';\r\nimport 'bootstrap/dist/css/bootstrap.min.css';\r\nimport { Link } from 'react-router-dom';\r\n\r\nimport { LoginContext } from '../../context/LoginContext';\r\nimport { leaveRoom } from './../../context/Socket'\r\nimport './styles.css';\r\n\r\n\r\nconst Header = () => {\r\n //phai khai bao dung thu tu va du props de lay dung gia tri props cua context\r\n const [isLogin, handleLogin, handleLogout] = useContext(LoginContext);\r\n return (\r\n <div className='headerContainer'>\r\n <Navbar className='navbarConfig' variant=\"dark\">\r\n <Link to='/' >\r\n <Navbar.Brand as='div' onClick={() => {\r\n leaveRoom();\r\n }}><b>Advanced Caro</b></Navbar.Brand>\r\n </Link>\r\n <div className='headerContentContainer'>\r\n {\r\n isLogin ? (<>\r\n <Nav className=\"mr-auto\">\r\n <Link to='/' >\r\n <Nav.Link as='div' onClick={() => {\r\n leaveRoom();\r\n }}>Trang chủ</Nav.Link>\r\n\r\n </Link>\r\n <Link to='/profile' >\r\n <Nav.Link as='div' onClick={() => {\r\n leaveRoom();\r\n }}>Thông tin cá nhân</Nav.Link>\r\n </Link>\r\n <Link to='/history' >\r\n <Nav.Link as='div' onClick={() => {\r\n leaveRoom();\r\n }}>Lịch sử đấu</Nav.Link>\r\n </Link>\r\n <Link to='/bangxephang' >\r\n <Nav.Link as='div' onClick={() => {\r\n leaveRoom();\r\n }}>Bảng xếp hạng</Nav.Link>\r\n </Link>\r\n </Nav>\r\n <Form inline>\r\n <FormControl type=\"text\" placeholder=\"Tìm kiếm\" className=\"mr-sm-2\" />\r\n <Button variant=\"outline-light\">Tìm kiếm</Button>\r\n </Form></>) : null\r\n }\r\n\r\n\r\n <Nav className=\"login\">\r\n {!isLogin ? <Nav.Link href=\"/login\"><Button variant=\"outline-light\">Đăng nhập</Button></Nav.Link> : <Nav.Link><Button onClick={handleLogout} variant=\"outline-light\">Đăng xuất</Button></Nav.Link>}\r\n </Nav>\r\n </div>\r\n </Navbar>\r\n </div>\r\n )\r\n}\r\nexport default Header;","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\Home\\Home.js",[],"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\context\\Socket.js",[],"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\SignUp\\SignUp.js",[],"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\Profile\\index.js",[],"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\Login\\Login.js",[],"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\History\\index.js",["217"],"import 'bootstrap/dist/css/bootstrap.min.css';\r\nimport Authorization from './../../utils/callAuth'\r\nimport React, { useState, useContext } from 'react';\r\nimport { Table, Pagination } from 'react-bootstrap';\r\nimport { Redirect } from \"react-router-dom\";\r\nimport { LoginContext } from '../../context/LoginContext';\r\nimport { getMatchHistories } from '../../utils/matchAPI';\r\nimport styles from './styles.module.css';\r\nconst initialState = {\r\n totalMatch: 0,\r\n matchs: [],\r\n};\r\n\r\nconst ITEM_PER_PAGE = 20;\r\n\r\nconst History = () => {\r\n const [login, setLogin] = React.useState({\r\n state: false,\r\n isLogin: false,\r\n });\r\n const [isLogin] = useContext(LoginContext);\r\n const [mainState, setMainState] = useState(initialState);\r\n const [active, setActive] = useState(1);\r\n\r\n React.useEffect(() => {\r\n const bearerToken = JSON.parse(localStorage.getItem('id_token'));\r\n Authorization('auth/profile', bearerToken)\r\n .then(async user => {\r\n setLogin({\r\n state: true,\r\n isLogin: true,\r\n });\r\n const playerId = user.data.id;\r\n const { totalMatch, matchs } = JSON.parse(await getMatchHistories(playerId, active));\r\n const mainStateApi = { totalMatch, matchs: [] };\r\n mainStateApi.matchs = matchs.map((item, index) => {\r\n let opponentUsername = \"\";\r\n let result = \"\";\r\n let time = \"\";\r\n if (item.status === 0) result = \"Hòa\";\r\n if (playerId === item.player1.id) {\r\n opponentUsername = item.player2.username;\r\n if (item.status === 1) result = \"Chiến thắng\";\r\n else if(item.status === 2) result = \"Thất bại\";\r\n }\r\n else if (playerId === item.player2.id) {\r\n opponentUsername = item.player1.username;\r\n if (item.status === 2) result = \"Chiến thắng\";\r\n else if(item.status === 1) result = \"Thất bại\";\r\n }\r\n const date1 = new Date(item.startDate), date2 = new Date(item.endDate);\r\n time = \"\" + Math.round((date2.getTime() - date1.getTime()) / 1000);\r\n return {\r\n opponentUsername,\r\n time,\r\n result,\r\n }\r\n });\r\n setMainState(mainStateApi);\r\n })\r\n .catch((err) => {\r\n console.log(err);\r\n setLogin({\r\n state: true,\r\n isLogin: false,\r\n })\r\n })\r\n }, [isLogin, active])\r\n\r\n let items = [];\r\n const { totalMatch, matchs } = mainState;\r\n const nPage = Math.floor(totalMatch % ITEM_PER_PAGE === 0 ? totalMatch / ITEM_PER_PAGE : totalMatch / ITEM_PER_PAGE + 1);\r\n for (let number = 1; number <= nPage; number++) {\r\n items.push(\r\n <Pagination.Item className={styles.paginationItem} key={number} active={number === active} onClick={() => setActive(number)}>\r\n {number}\r\n </Pagination.Item>)\r\n }\r\n if (login.state) if (!login.isLogin) return <Redirect to='/login' />\r\n return (\r\n <div className={styles.historyContainer}>\r\n {login.isLogin && (\r\n <>\r\n <h3 className={styles.historyTitle}>Lịch sử đấu</h3>\r\n <div className={styles.historyTableHead}>\r\n <table>\r\n <thead>\r\n <tr>\r\n <th>#</th>\r\n <th>Đối thủ</th>\r\n <th>Thời gian (Giây)</th>\r\n <th>Kết quả</th>\r\n </tr>\r\n </thead>\r\n </table>\r\n </div>\r\n <div className={styles.historyTableBody}>\r\n <table>\r\n <tbody>\r\n {matchs.map((match, index) => {\r\n return (\r\n <tr key={index}>\r\n <td>{index + 1 + (active - 1) * ITEM_PER_PAGE}</td>\r\n <td>{match.opponentUsername}</td>\r\n <td>{match.time}</td>\r\n <td>{match.result}</td>\r\n </tr>)\r\n })}\r\n </tbody>\r\n </table>\r\n </div>\r\n {/* <Table striped bordered hover>\r\n <thead>\r\n <tr>\r\n <th>#</th>\r\n <th>Đối thủ</th>\r\n <th>Thời gian (Giây)</th>\r\n <th>Kết quả</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n {matchs.map((match, index) => {\r\n return (\r\n <tr key={index}>\r\n <td>{index}</td>\r\n <td>{match.opponentUsername}</td>\r\n <td>{match.time}</td>\r\n <td>{match.result}</td>\r\n </tr>)\r\n })}\r\n </tbody>\r\n </Table> */}\r\n <div className={styles.paginationContainer}>\r\n <Pagination>\r\n <Pagination.First className={styles.paginationItem} onClick={() => setActive(1)} />\r\n <Pagination.Prev className={styles.paginationItem} onClick={() => {\r\n if (active !== 1)\r\n setActive(active - 1);\r\n }} />\r\n {items}\r\n <Pagination.Next className={styles.paginationItem} onClick={() => {\r\n if (active !== nPage)\r\n setActive(active + 1);\r\n }} />\r\n <Pagination.Last className={styles.paginationItem} onClick={() => {\r\n setActive(nPage);\r\n }} />\r\n </Pagination>\r\n </div>\r\n </>\r\n )}\r\n </div>\r\n )\r\n}\r\n\r\nexport default History;","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\ActiveAccount\\index.js",["218","219"],"import React, { useEffect, useState } from 'react';\r\nimport { Container} from 'react-bootstrap';\r\n\r\nimport callApi from '../../utils/CallAPI';\r\nimport { useParams,Link } from \"react-router-dom\";\r\nimport './styles.css';\r\n\r\nconst ActiveAccount=()=>{\r\n const { token } = useParams();\r\n const [notice,setNotice]=useState('Đang kiểm tra để kích hoạt tài khoản, vui lòng đừng thoát ra');\r\n useEffect(()=>{\r\n callApi(`users/active/${token}`,'GET',{}).then((res)=>{\r\n if(res.data.err) setNotice(res.data.err);\r\n else setNotice(res.data);\r\n })\r\n },[])\r\n return(\r\n <div className='acticeAccountContainer'>\r\n <h1>Kích hoạt tài khoản</h1>\r\n <div>{notice}</div>\r\n <div><Link to='/login'>Đăng nhập</Link> để tiếp tục trải nghiệm ứng dụng.</div>\r\n </div>\r\n )\r\n}\r\nexport default ActiveAccount;","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\ForgetPassword\\index.js",[],"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\LeaderBoard\\index.js",["220"],"import React, { useState, useContext } from 'react';\r\nimport { Table, Container } from 'react-bootstrap';\r\nimport { Redirect } from \"react-router-dom\";\r\nimport 'bootstrap/dist/css/bootstrap.min.css';\r\n\r\nimport { LoginContext } from '../../context/LoginContext';\r\nimport CallAuthAPI from './../../utils/CallAuthAPI';\r\nimport Authorization from './../../utils/callAuth';\r\nimport './styles.css';\r\n\r\nconst LeaderBoard = () => {\r\n const [login, setLogin] = React.useState({\r\n state: false,\r\n isLogin: false\r\n });\r\n const [isLogin] = useContext(LoginContext);\r\n const [data, setData] = useState([])\r\n React.useEffect(() => {\r\n Authorization('auth/profile', JSON.parse(localStorage.getItem('id_token')))\r\n .then(resp => {\r\n setLogin({\r\n state: true,\r\n isLogin: true,\r\n });\r\n CallAuthAPI('leaderboard', 'GET', null, JSON.parse(localStorage.getItem('id_token')))\r\n .then(res => {\r\n setData(res.data);\r\n })\r\n .catch((err) => console.log(err));\r\n })\r\n .catch((err) => setLogin({\r\n state: true,\r\n isLogin: false,\r\n }))\r\n }, [isLogin])\r\n\r\n if (login.state) if (!login.isLogin) return <Redirect to='/login' />\r\n return (\r\n <Container className='leaderboardContainer' fluid>\r\n {\r\n login.isLogin ? (<>\r\n <h3 className='titleLeaderBoard'>Bảng xếp hạng</h3>\r\n <div className='tbl-header-leader-rank'>\r\n\r\n <table>\r\n <thead>\r\n <tr>\r\n <th style = {{width: \"10%\"}}>Top</th>\r\n <th>Username</th>\r\n <th>Số cúp</th>\r\n <th>Rank</th>\r\n </tr>\r\n </thead>\r\n </table>\r\n </div>\r\n <div className='tbl-content-leader-rank'>\r\n <table>\r\n <tbody>\r\n {data.map((item, index) => {\r\n return (<tr key={index}>\r\n <td style = {{width: \"10%\"}}>{index + 1}</td>\r\n <td>{item.username}</td>\r\n <td>{item.cup}</td>\r\n <td>{item.rank}</td>\r\n </tr>)\r\n })}\r\n </tbody>\r\n </table>\r\n </div>\r\n </>) : null\r\n}\r\n </Container >\r\n )\r\n}\r\n\r\nexport default LeaderBoard;","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\Game\\index.js",["221"],"import React from 'react';\r\nimport { Container, Col, Row } from 'react-bootstrap';\r\nimport 'bootstrap/dist/css/bootstrap.min.css';\r\n\r\nimport './styles.css';\r\nimport GameArea from './GameArea/GameArea';\r\nimport ChatArea from './ChatArea/index';\r\nimport { useParams, Redirect } from \"react-router-dom\";\r\n//import ListUser from '../../components/ListUser/ListUser';\r\nimport { LoginContext } from '../../context/LoginContext';\r\nimport { reconnectRoom } from '../../context/Socket'\r\n\r\nconst Game = () => {\r\n const { id } = useParams();\r\n const [error, setError] = React.useState(false);\r\n const [login, setLogin] = React.useState(false);\r\n const [isLogin] = React.useContext(LoginContext);\r\n const [isConnect, setIsConnect] = React.useState(false);\r\n const [isPlayer, setIsPlayer] = React.useState(false);\r\n const [isHost, setIsHost] = React.useState(false);\r\n\r\n React.useEffect(() => {\r\n setLogin(isLogin);\r\n }, [isLogin]);\r\n\r\n React.useEffect(()=>{\r\n reconnectRoom(id, setIsConnect, setIsHost, setIsPlayer);\r\n },[id] )\r\n\r\n if (error) return <Redirect to='/' />\r\n return (\r\n // <Container fluid className='gamePageContainer'>\r\n <Container fluid style={{ backgroundColor: \"#ffdac3\" }}>\r\n {login ? (\r\n <>\r\n <Row >\r\n <Col lg={9} xs={12}>\r\n {/* <Container> */}\r\n {isConnect? <GameArea roomID={id} isPlayer = {isPlayer} isHost = {isHost}/> : <></>}\r\n\r\n {/* </Container> */}\r\n </Col>\r\n <Col lg={3} xs={12}>\r\n <ChatArea roomID={id} />\r\n </Col>\r\n </Row>\r\n {/* <div className='gameAreaContainer' >\r\n\r\n </div>\r\n <div className='listOnlineAreaContainer'>\r\n\r\n </div>\r\n <div className='chatAreaContainer'>\r\n\r\n </div> */}\r\n </>\r\n ) : null}\r\n </Container>\r\n )\r\n}\r\nexport default Game;","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\ResetPassword\\index.js",[],"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\utils\\callAuth.js",[],"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\Profile\\EmptyUserImage.js",[],"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\constant\\config.js",[],"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\utils\\CallAuthAPI.js",[],"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\components\\ListUser\\ListUser.js",[],"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\utils\\CallAPI.js",[],"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\components\\Icons\\FacebookIcon.js",[],"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\Home\\ManagerListHomeCard\\ManagerListHomeCard.js",["222"],"import React, { useState, useEffect } from 'react';\r\n// import { Redirect } from \"react-router-dom\";\r\nimport { Container, Row, Col, Form, Button, Modal } from 'react-bootstrap';\r\nimport 'bootstrap/dist/css/bootstrap.min.css';\r\nimport { getRoomInfo as getRoomInfoApi } from '../../../utils/roomAPI';\r\nimport { Redirect, Link } from 'react-router-dom';\r\n\r\nimport './styles.css';\r\nimport GameCard from '../GameCard/GameCard';\r\nimport AddNewGame from '../AddNewGame/AddNewGame';\r\nimport { socket, createRoom, joinRoom, getRooms, playNow, unPlayNow, autoAddUserToRoom, autoCreateRoom, responseDrawRequest } from './../../../context/Socket';\r\nimport Notice from './../../../components/Notice/index';\r\nimport Authorization from '../../../utils/callAuth';\r\nimport close from './close.svg'\r\n\r\n\r\nconst ManageListGameCard = () => {\r\n const [listGame, setListGame] = useState([]);\r\n const [idNewRoom, setIdNewRoom] = useState(null);\r\n const [isError, setIsError] = useState({\r\n value: false,\r\n message: \"\"\r\n });\r\n const [showPlaynowModal, setShowPlaynowModal] = useState(false);\r\n const [roomPassword, setRoomPassWord] = useState(\"\");\r\n const [roomStepPeriod, setRoomStepPeriod] = useState(10);\r\n const [isNoPassword, setIsNoPassword] = useState(false);\r\n const [isRoomPasswordErr, setIsRoomPasswordErr] = useState({\r\n value: false,\r\n message: \"\"\r\n });\r\n const [isCreatingRoom, setIsCreatingRoom] = useState(true);\r\n const [showRoomModal, setShowRoomModal] = useState(false);\r\n const [curRoomId, setCurRoomId] = useState(-1);\r\n const [invite, setInvite] = useState({\r\n value: false,\r\n username: \"\",\r\n roomID: null\r\n })\r\n\r\n const [showJoinRoomWithIdModal, setShowJoinRoomWithIdModal] = useState(false);\r\n const [joinRoomId, setJoinRoomId] = useState(\"\");\r\n const [isJoinRoomWithIdErr, setIsJoinRoomWithIdErr] = useState({\r\n value: false,\r\n message: \"\"\r\n })\r\n\r\n useEffect(() => {\r\n socket.on('inviteplay', res => {\r\n setInvite({\r\n value: true,\r\n username: res.username,\r\n roomID: res.roomID\r\n })\r\n });\r\n\r\n return () => {\r\n socket.off('inviteplay')\r\n }\r\n }, [])\r\n\r\n useEffect(() => {\r\n getRooms(setListGame);\r\n socket.on('getrooms', res => setListGame(res));\r\n socket.on('autoaddusertoroom', res => {\r\n Authorization('auth/profile', JSON.parse(localStorage.getItem('id_token')))\r\n .then(user => {\r\n const userId = user.data.id;\r\n const addedUserId = res[1];\r\n if (userId === addedUserId) {\r\n const roomId = res[0];\r\n setTimeout(() => {\r\n joinRoom(roomId, null, setIdNewRoom, setIsError, setIsRoomPasswordErr);\r\n }, 1000);\r\n }\r\n });\r\n });\r\n socket.on('playnowaccepted', res => {\r\n Authorization('auth/profile', JSON.parse(localStorage.getItem('id_token')))\r\n .then(user => {\r\n const userId = user.data.id;\r\n const hostUserId = res[0];\r\n const addedUserId = res[1];\r\n if (userId === hostUserId) {\r\n const callback = (roomId) => {\r\n autoAddUserToRoom(roomId, addedUserId);\r\n setIdNewRoom(roomId);\r\n };\r\n autoCreateRoom(userId, callback, setIsError);\r\n }\r\n });\r\n });\r\n return () => {\r\n socket.off('playnowaccepted');\r\n socket.off('autoaddusertoroom');\r\n }\r\n }, []);\r\n\r\n const handleJoinRoom = async (roomID) => {\r\n getRoomInfoApi(roomID)\r\n .then(res => {\r\n if (res) {\r\n const roomInfo = JSON.parse(res);\r\n const listGameTmp = listGame;\r\n let isRoomActive = false;\r\n listGameTmp.forEach(game => {\r\n if (+game.roomID === +roomInfo.id) {\r\n isRoomActive = true;\r\n }\r\n })\r\n if (isRoomActive) {\r\n if (roomInfo.password != null) {\r\n handleCloseJoinRoomWithIdModal();\r\n setCurRoomId(roomID);\r\n setIsCreatingRoom(false);\r\n setShowRoomModal(true);\r\n }\r\n else {\r\n joinRoom(roomID, null, setIdNewRoom, setIsError, setIsRoomPasswordErr);\r\n }\r\n }\r\n else {\r\n setIsJoinRoomWithIdErr({\r\n value: true,\r\n message: \"Phòng này hiên tại không hoạt động\"\r\n })\r\n }\r\n\r\n }\r\n else {\r\n setIsJoinRoomWithIdErr({\r\n value: true,\r\n message: \"ID phòng không tồn tại\"\r\n })\r\n }\r\n\r\n });\r\n }\r\n\r\n const handleJoinRoomWithPassword = () => {\r\n if (roomPassword === \"\" || roomPassword.length < 7) {\r\n setIsRoomPasswordErr({\r\n value: true,\r\n message: \"Mật khẩu không được phép để trống và ít nhất là 7 kí tự\"\r\n });\r\n } else {\r\n // alert(curRoomId);\r\n joinRoom(curRoomId, roomPassword, setIdNewRoom, setIsError, setIsRoomPasswordErr)\r\n }\r\n }\r\n\r\n const addNew = () => {\r\n setIsCreatingRoom(true);\r\n setShowRoomModal(true);\r\n };\r\n\r\n const handleAddNew = async () => {\r\n if (isNoPassword) {\r\n createRoom(setIdNewRoom, setIsError, { roomPassword: null, roomStepPeriod: roomStepPeriod });\r\n } else {\r\n if (roomPassword === \"\" || roomPassword.length < 7) {\r\n setIsRoomPasswordErr({\r\n value: true,\r\n message: \"Mật khẩu không được phép để trống và ít nhất là 7 kí tự\"\r\n });\r\n } else {\r\n createRoom(setIdNewRoom, setIsError, { roomPassword: roomPassword, roomStepPeriod: roomStepPeriod });\r\n }\r\n }\r\n }\r\n\r\n const handleShowPlayNowModal = () => {\r\n setShowPlaynowModal(true);\r\n playNow();\r\n }\r\n\r\n const handleClosePlayNowModal = () => {\r\n unPlayNow();\r\n setShowPlaynowModal(false);\r\n }\r\n\r\n const handleCloseRoomModal = () => {\r\n setShowRoomModal(false);\r\n setRoomPassWord(\"\");\r\n setIsRoomPasswordErr({\r\n value: false,\r\n message: \"\"\r\n })\r\n }\r\n\r\n const handleRoomInputDataChange = (event) => {\r\n const value = event.target.value;\r\n if (event.target.name === \"roomPassword\") {\r\n setRoomPassWord(value);\r\n } else if (event.target.name === \"roomStepPeriod\") {\r\n setRoomStepPeriod(value);\r\n } else if (event.target.name === \"joinRoomId\") {\r\n setJoinRoomId(value);\r\n }\r\n }\r\n\r\n const handleNoPasswordCheckboxChange = (event) => {\r\n const value = event.target.checked;\r\n setIsNoPassword(value);\r\n }\r\n\r\n const handleShowJoinRoomWithIdModal = () => {\r\n setShowJoinRoomWithIdModal(true);\r\n }\r\n\r\n const handleCloseJoinRoomWithIdModal = () => {\r\n setShowJoinRoomWithIdModal(false);\r\n }\r\n\r\n const handleJoinRoomWithId = () => {\r\n handleJoinRoom(joinRoomId);\r\n }\r\n\r\n if (idNewRoom !== null) return <Redirect to={`/room/${idNewRoom}`} />\r\n return (\r\n <>\r\n {\r\n invite.value ?\r\n <div className='outGame outer-border upResult' id='outGame' >\r\n <div class=\"body dark-background\" style={{ backgroundImage: \"url(https://i.ibb.co/nrmkm7d/five-bells-washed-out-logo.png)\" }}>\r\n <div class=\"mid-border\">\r\n <div class=\"inner-border\">\r\n <img class=\"vertical-decoration top\" src=\"https://i.ibb.co/JRTK9z4/horizontally-centered-vertical-decoration.png\" alt=\"Đang load\"></img>\r\n <img class=\"vertical-decoration bottom\" src=\"https://i.ibb.co/JRTK9z4/horizontally-centered-vertical-decoration.png\" alt=\"Đang load\"></img>\r\n\r\n <button className='close-button none-button' onClick={() => {\r\n document.getElementById('outGame').className = 'outGame outer-border downResult';\r\n setTimeout(() => {\r\n setInvite({\r\n value: false,\r\n usename: \"\",\r\n roomID: null\r\n });\r\n }, 900)\r\n }}>\r\n <img src={close} className='img-cup' alt=\"Đang load\"></img>\r\n </button>\r\n <div className='notice-content'>\r\n <h3>Thông báo</h3>\r\n <h5>{`${invite.username} muốn mời bạn vào chơi!`}</h5>\r\n <div>\r\n <div className='myButton mt-2 mr-2' onClick={() => {\r\n document.getElementById('outGame').className = 'outGame outer-border downResult';\r\n setTimeout(() => {\r\n setInvite({\r\n value: false,\r\n usename: \"\",\r\n roomID: null\r\n });\r\n }, 900)\r\n }}>\r\n Hủy\r\n </div>\r\n <Link to={`/room/${invite.roomID}`}>\r\n <div className='myButton mt-2 ml-2'>\r\n Đồng ý\r\n </div>\r\n </Link>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div> : <></>\r\n }\r\n <div className=\"mainBoardContainer\">\r\n <Notice isShow={isError.value} mes={isError.message} handleClose={() => setIsError({\r\n value: false,\r\n message: \"\"\r\n })}></Notice>\r\n <div className=\"managerBoardHeader\">\r\n <h4>Danh sách các phòng game</h4>\r\n <div>\r\n <Button className=\"joinRoomWithIdBtnStyle\" variant=\"container\" onClick={handleShowJoinRoomWithIdModal}><b>Vào phòng với ID</b></Button>\r\n <Button className=\"playNowBtnStyle\" variant=\"container\" onClick={handleShowPlayNowModal}><b>Chơi ngay</b></Button>\r\n </div>\r\n </div>\r\n <h5>Vào phòng game mong muốn bằng cách xin ID phòng từ chủ phòng</h5>\r\n <Container className=\"managerBoardContainer\">\r\n <Row>\r\n <Col xs={3}>\r\n <AddNewGame addNew={addNew} />\r\n </Col>\r\n {\r\n listGame.map((game, index) => {\r\n return (\r\n <Col xs={3} key={index}>\r\n <GameCard game={game} index={index} onJoinRoom={() => handleJoinRoom(game.roomID)} />\r\n </Col>\r\n )\r\n })\r\n }\r\n </Row>\r\n </Container>\r\n <Modal show={showPlaynowModal}\r\n onHide={handleClosePlayNowModal}\r\n backdrop='static'\r\n keyboard={false}\r\n centered\r\n contentClassName=\"playNowModelStyle\">\r\n <Modal.Body>\r\n Đang tìm người chơi...\r\n <div className=\"playNowModelBodyStyle\">\r\n <Button className=\"backBtnPlayNowModelStyle\" variant=\"outline\"\r\n onClick={handleClosePlayNowModal}>Hủy</Button>\r\n </div>\r\n </Modal.Body>\r\n </Modal>\r\n <Modal show={showRoomModal}\r\n onHide={handleCloseRoomModal}\r\n backdrop='static'\r\n keyboard={false}\r\n centered\r\n contentClassName=\"createRoomModalStyle\">\r\n <Modal.Header className=\"createRoomModalNoBorderStyle\">\r\n <Modal.Title>{isCreatingRoom ? \"Tạo phòng\" : \"Vào phòng\"}</Modal.Title>\r\n </Modal.Header>\r\n <Modal.Body >\r\n <Form>\r\n <Form.Group>\r\n <Form.Label>Nhập mật khẩu phòng</Form.Label>\r\n <Form.Control type=\"password\" name=\"roomPassword\" value={roomPassword} onChange={handleRoomInputDataChange} className=\"inputPasswordStyle\" />\r\n </Form.Group>\r\n {isCreatingRoom &&\r\n <Form.Group >\r\n <Form.Check type=\"checkbox\" label=\"Không cần mật khẩu\" checked={isNoPassword} onChange={handleNoPasswordCheckboxChange} id=\"inputCheckboxCreateRoom\" />\r\n </Form.Group>}\r\n <Form.Group>\r\n <Form.Label>Thời gian bước đi</Form.Label>\r\n <Form.Control type=\"number\" min={10} name=\"roomStepPeriod\" value={roomStepPeriod} onChange={handleRoomInputDataChange} className=\"inputPasswordStyle\" />\r\n </Form.Group>\r\n {isRoomPasswordErr.value && isRoomPasswordErr.message}\r\n </Form>\r\n </Modal.Body>\r\n <Modal.Footer className=\"createRoomModalNoBorderStyle\">\r\n <Button className=\"btnCreateRoomModalStyle\" variant=\"outline\"\r\n onClick={isCreatingRoom ? handleAddNew : handleJoinRoomWithPassword}>{isCreatingRoom ? \"Tạo\" : \"Vào\"}</Button>\r\n <Button className=\"btnCreateRoomModalStyle\" variant=\"outline\"\r\n onClick={handleCloseRoomModal}>Hủy</Button>\r\n </Modal.Footer>\r\n </Modal>\r\n <Modal show={showPlaynowModal}\r\n onHide={handleClosePlayNowModal}\r\n backdrop='static'\r\n keyboard={false}\r\n centered\r\n contentClassName=\"playNowModelStyle\">\r\n <Modal.Body>\r\n Đang tìm người chơi...\r\n <div className=\"playNowModelBodyStyle\">\r\n <Button className=\"backBtnPlayNowModelStyle\" variant=\"outline\"\r\n onClick={handleClosePlayNowModal}>Hủy</Button>\r\n </div>\r\n </Modal.Body>\r\n </Modal>\r\n <Modal show={showJoinRoomWithIdModal}\r\n onHide={handleCloseJoinRoomWithIdModal}\r\n backdrop='static'\r\n keyboard={false}\r\n centered\r\n contentClassName=\"createRoomModalStyle\">\r\n <Modal.Header className=\"createRoomModalNoBorderStyle\">\r\n <Modal.Title>Vào phòng với ID</Modal.Title>\r\n </Modal.Header>\r\n <Modal.Body >\r\n <Form>\r\n <Form.Group>\r\n <Form.Label>Nhập ID phòng</Form.Label>\r\n <Form.Control type=\"text\" name=\"joinRoomId\" value={joinRoomId} onChange={handleRoomInputDataChange} className=\"inputPasswordStyle\" />\r\n </Form.Group>\r\n {isJoinRoomWithIdErr.value && isJoinRoomWithIdErr.message}\r\n </Form>\r\n </Modal.Body>\r\n <Modal.Footer className=\"createRoomModalNoBorderStyle\">\r\n <Button className=\"btnCreateRoomModalStyle\" variant=\"outline\"\r\n onClick={handleJoinRoomWithId}>Vào</Button>\r\n <Button className=\"btnCreateRoomModalStyle\" variant=\"outline\"\r\n onClick={handleCloseJoinRoomWithIdModal}>Hủy</Button>\r\n </Modal.Footer>\r\n </Modal>\r\n\r\n </div>\r\n </>\r\n )\r\n}\r\nexport default ManageListGameCard;","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\Game\\ChatArea\\index.js",["223","224"],"import React, { useState, useEffect } from 'react';\r\nimport { Card, CardGroup, Button } from 'react-bootstrap';\r\n\r\nimport './styles.css';\r\nimport SendMessageComponent from './SendMessageComponent';\r\nimport MessageItem from './MessageItem';\r\nimport { socket, sendMessage } from './../../../context/Socket';\r\n\r\nconst ChatArea = ({ roomID }) => {\r\n const [messages, setMessages] = useState([]);\r\n const [isMessageBox, setIsMessageBox] = useState(false);\r\n const [isError, setIsError] = useState(false);\r\n React.useEffect(() => {\r\n socket.once('message', res => {\r\n setMessages([...messages, ...[{\r\n name: res.username?res.username:'Guest',\r\n content: res.content,\r\n time: 'just now',\r\n host: false,\r\n image: '#'\r\n }\r\n ]]);\r\n setIsMessageBox(true);\r\n });\r\n return () => {\r\n socket.off('message')\r\n }\r\n }, [roomID,messages]);\r\n useEffect(() => {\r\n setMessages([{\r\n name: 'System',\r\n content: 'Chào mừng bạn đến với Advanced Caro của Khoa Hưng Huy',\r\n time: 'just now',\r\n host: false,\r\n image: '#'\r\n }]);\r\n setIsMessageBox(true); \r\n }, []);\r\n const handleSendMessage = (input) => {\r\n sendMessage(roomID, input, setIsError);\r\n setMessages([...messages,...[{\r\n name: 'Mine',\r\n content: input,\r\n time: 'just now',\r\n host: true,\r\n image: '#'\r\n }]]);\r\n }\r\n return (\r\n <>\r\n <CardGroup className={'pageChatRoomContainer'} style = {{border: \"5px solid brown\"}}>\r\n <Card.Header className='pageChatRoomHeader'>\r\n <Card.Title style = {{color: \"#DE9B72\"}}>Trò chuyện</Card.Title>\r\n </Card.Header>\r\n <Card.Body className='pageChatRoomBody'>\r\n {\r\n messages.map((message, index) => {\r\n return (\r\n message.host ? <div className='hostContainer'>\r\n <MessageItem name={message.name} index={index} typePlayer='host' content={message.content} time={message.time} />\r\n </div> :\r\n <div className='guestContainer'>\r\n <MessageItem name={message.name} index={index} typePlayer='guest' content={message.content} time={message.time} />\r\n </div>\r\n )\r\n })\r\n }\r\n {\r\n isError?<div className='noticeMessage'>Gửi lỗi</div>:null\r\n }\r\n </Card.Body>\r\n <Card.Footer className='pageChatRoomFooter'>\r\n <SendMessageComponent sendMessage={handleSendMessage} />\r\n </Card.Footer>\r\n </CardGroup>\r\n {/* <Button onClick={() => setIsMessageBox(true)} className={!isMessageBox ? 'iconMessage' : 'iconMessage-hidden'}>Messsage</Button> */}\r\n </>\r\n )\r\n}\r\nexport default ChatArea;","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\components\\Notice\\index.js",[],"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\Home\\GameCard\\GameCard.js",[],"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\Game\\GameArea\\GameArea.js",["225","226","227","228","229","230","231","232","233","234","235","236"],"import React, { useState } from 'react';\r\n// import { Container } from 'react-bootstrap';\r\nimport 'bootstrap/dist/css/bootstrap.min.css';\r\nimport { Link } from \"react-router-dom\";\r\nimport { Container, Col, Row, Tooltip, OverlayTrigger } from 'react-bootstrap';\r\n\r\nimport Board from '../Board/Board';\r\nimport './styles.css';\r\nimport { calculateWinner } from './Service'\r\nimport outRoom from './image/back-arrow.svg'\r\nimport upArrow from './image//up-arrow.svg'\r\nimport group from './image//group.svg'\r\nimport trophy from './image//trophy.svg'\r\nimport add from './image//add.svg'\r\nimport close from './image//close.svg'\r\nimport join from './image//join.svg'\r\nimport key from './image//key.svg'\r\nimport handshake from './image//handshake.svg'\r\nimport whiteflag from './image//white-flag.svg'\r\nimport ChangingProgressProvider from './provider'\r\nimport {\r\n CircularProgressbarWithChildren,\r\n buildStyles\r\n} from \"react-circular-progressbar\";\r\nimport \"react-circular-progressbar/dist/styles.css\";\r\nimport { socket, startGame, playChess, leaveRoom, becomePlayer, getPlayers, getViewers, standUp, readyPlay, getRoomState, endMatch, drawRequestSocket, responseDrawRequest, surrenderRequest } from './../../../context/Socket'\r\nimport { SocketContext } from '../../../context/LoginContext';\r\nimport CallAuthAPI from './../../../utils/CallAuthAPI'\r\nimport Notice from './../../../components/Message/index'\r\n\r\n\r\nconst GameArea = (props) => {\r\n const [alphabet, setAlphabet] = useState(\"\");\r\n const [nextALP, setNextAPL] = useState(\"\")\r\n const [wait, setWait] = useState(false);\r\n const [isFirst, setIsFirst] = useState(false);\r\n // const [isDescending, setIsDescending] = useState(true);\r\n const [isPlaying, setIsPlaying] = useState(false);\r\n const [isError, setIsError] = useState({\r\n value: false,\r\n message: ''\r\n });\r\n\r\n const [history, setHistory] = useState([{\r\n squares: Array(400).fill(null),\r\n position: null,\r\n }]);\r\n\r\n const [winner, setWinner] = useState(\r\n {\r\n value: null,\r\n position: []\r\n }\r\n )\r\n\r\n const [seeViewer, setSeeViewer] = useState(false);\r\n const [invite, setInvite] = useState(false);\r\n const [notice, setNotice] = useState({\r\n value: false,\r\n message: \"\"\r\n });\r\n const [outGame, setOutGame] = useState(false);\r\n const [isPlayer, setIsPlayer] = useState(props.isPlayer);\r\n const [isHost, setIsHost] = useState(props.isHost);\r\n const [surrender, setSurrender] = useState(false);\r\n const [drawRequest, setDrawRequest] = useState(-1);\r\n const [viewers, setViewers] = useState([]);\r\n // const [user, setUser] = useState(null);\r\n\r\n const [firstPlayer, setFirstPlayer] = useState({\r\n user: null,\r\n isHost: false,\r\n isReady: false,\r\n isTurn: null\r\n })\r\n\r\n const [secondPlayer, setSecondPlayer] = useState({\r\n user: null,\r\n isHost: false,\r\n isReady: false,\r\n isTurn: null\r\n })\r\n\r\n const handleEndGame = React.useCallback(() => {\r\n if (isPlaying) {\r\n socket.off('playchess');\r\n socket.off('startgame')\r\n setFirstPlayer(player => (\r\n {\r\n ...player,\r\n isTurn: null\r\n }\r\n ));\r\n setSecondPlayer(player => (\r\n {\r\n ...player,\r\n isTurn: null\r\n }\r\n ));\r\n setIsPlaying(false);\r\n setNextAPL('');\r\n }\r\n\r\n }, [isPlaying])\r\n\r\n\r\n React.useEffect(() => {\r\n getPlayers(props.roomID, setFirstPlayer, setSecondPlayer, setIsHost, setIsFirst);\r\n }, [props.roomID]);\r\n\r\n React.useEffect(() => {\r\n getViewers(props.roomID, setViewers);\r\n socket.on('newviewer', users => {\r\n console.log(users)\r\n CallAuthAPI('users/viewers/ids', 'POST', {\r\n userIDs: users,\r\n }, JSON.parse(localStorage.getItem('id_token')))\r\n .then(res => {\r\n console.log(res)\r\n setViewers(res.data)\r\n })\r\n });\r\n\r\n return () => {\r\n socket.off('newviewer')\r\n }\r\n }, [props.roomID])\r\n\r\n console.log(viewers)\r\n React.useEffect(() => {\r\n if (firstPlayer.user && secondPlayer.user)\r\n getRoomState(props.roomID, isPlayer, setHistory, setIsPlaying, setAlphabet, setNextAPL, setWait, setFirstPlayer, setSecondPlayer);\r\n }, [firstPlayer.user, secondPlayer.user, isPlayer, props.roomID])\r\n\r\n React.useEffect(() => {\r\n setIsPlayer(props.isPlayer);\r\n setIsHost(props.isHost)\r\n }, [props.isPlayer, props.isHost])\r\n\r\n React.useEffect(() => {\r\n if (isPlaying) {\r\n socket.off('endmatch');\r\n socket.once('endmatch', result => {\r\n handleEndGame();\r\n\r\n if (result.winner !== null && !winner.value) {\r\n\r\n setWinner({\r\n value: result.winner === secondPlayer.user.id ? secondPlayer.isHost ? 'X' : 'O' : secondPlayer.isHost ? 'O' : 'X',\r\n position: []\r\n })\r\n if (isPlayer)\r\n if (result.winner === secondPlayer.user.id)\r\n setIsFirst(true);\r\n else\r\n setIsFirst(false)\r\n }\r\n else {\r\n\r\n setWinner({\r\n value: 'D',\r\n position: []\r\n })\r\n }\r\n })\r\n }\r\n }, [isPlaying, handleEndGame, secondPlayer, isPlayer, winner])\r\n\r\n React.useEffect(() => {\r\n if (isPlayer && isPlaying && alphabet !== '') {\r\n socket.off('drawrequest');\r\n socket.on('drawrequest', res => {\r\n setDrawRequest(1);\r\n })\r\n\r\n socket.off('surrender');\r\n socket.once('surrender', res => {\r\n\r\n setNotice({\r\n value: true,\r\n message: \"Đối thủ đã đầu hàng!\"\r\n })\r\n\r\n // setSecondPlayer(player => ({\r\n // ...player,\r\n // user: {\r\n // ...player.user,\r\n // cup: Number(player.user.cup + 5)\r\n // }\r\n // }))\r\n\r\n // setFirstPlayer(player => ({\r\n // ...player,\r\n // user: {\r\n // ...player.user,\r\n // cup: Number(player.user.cup - 5) < 0 ? 0 : Number(player.user.cup - 5)\r\n // }\r\n // }))\r\n\r\n setIsFirst(true);\r\n })\r\n }\r\n\r\n return () => {\r\n socket.off('drawrequest');\r\n }\r\n }, [isPlayer, isPlaying, alphabet])\r\n\r\n React.useEffect(() => {\r\n socket.on('newplayer', res => {\r\n getPlayers(props.roomID, setFirstPlayer, setSecondPlayer, setIsHost, setIsFirst);\r\n // setWinner({\r\n // value: null,\r\n // position: []\r\n // })\r\n // setHistory([{\r\n // squares: Array(400).fill(null),\r\n // position: null,\r\n // }])\r\n })\r\n\r\n return () => {\r\n socket.off('newplayer');\r\n }\r\n }, [props.roomID]);\r\n\r\n React.useEffect(() => {\r\n if (firstPlayer.user && secondPlayer.user && isPlayer) {\r\n socket.off('readyplayer');\r\n socket.once('readyplayer', res => {\r\n setFirstPlayer(player => ({\r\n ...player,\r\n isReady: player.isHost ? false : true\r\n }))\r\n\r\n setSecondPlayer(player => ({\r\n ...player,\r\n isReady: player.isHost ? false : true\r\n }))\r\n\r\n })\r\n }\r\n\r\n return () => {\r\n socket.off('readyplayer');\r\n }\r\n }, [firstPlayer, secondPlayer, isPlayer]);\r\n\r\n React.useEffect(() => {\r\n if (isPlayer && isPlaying === false && !isHost && history.length === 1)\r\n socket.once('startgame', res => {\r\n socket.off('playchess')\r\n setWinner({\r\n value: null,\r\n position: []\r\n })\r\n setAlphabet('O')\r\n setIsPlaying(true);\r\n setNextAPL(res.alphabet);\r\n setHistory([{\r\n squares: Array(400).fill(null),\r\n position: null,\r\n }])\r\n\r\n setFirstPlayer(player => ({\r\n ...player,\r\n isReady: false,\r\n isTurn: res.alphabet === 'X' ? res.startTime : null\r\n }))\r\n\r\n setSecondPlayer(player => ({\r\n ...player,\r\n isReady: false,\r\n isTurn: res.alphabet === 'X' ? null : res.startTime\r\n }))\r\n\r\n if (isFirst === false)\r\n socket.once('playchess', res => {\r\n const newHistory = history.slice(0, history.length);\r\n const current = newHistory[newHistory.length - 1];\r\n // create a copy of current array squares\r\n const squares = current.squares.slice();\r\n if (calculateWinner(current.squares, current.position, 20, 20, 5).value || squares[res.position]) {\r\n return;\r\n }\r\n\r\n squares[res.position] = res.alphabet;\r\n setHistory(newHistory.concat([{ squares: squares, position: res.position }]));\r\n setNextAPL(res.alphabet === 'O' ? 'X' : 'O');\r\n setSecondPlayer(temp => ({\r\n ...temp,\r\n isReady: false,\r\n isTurn: res.startTime\r\n }))\r\n setFirstPlayer(temp => ({\r\n ...temp,\r\n isReady: false,\r\n isTurn: null\r\n }))\r\n })\r\n\r\n })\r\n\r\n // return () => {\r\n // socket.off('startgame')\r\n // socket.off('playchess')\r\n // }\r\n }, [isPlaying, history, isHost, isPlayer, isFirst])\r\n\r\n React.useEffect(() => {\r\n if (wait === true) {\r\n const newHistory = history;\r\n const current = newHistory[history.length - 1];\r\n const winnerTemp = calculateWinner(current.squares, current.position, 20, 20, 5);\r\n if (!winnerTemp.value) {\r\n socket.off('playchess')\r\n socket.once('playchess', res => {\r\n const newHistory = history.slice(0, history.length);\r\n const current = newHistory[newHistory.length - 1];\r\n // create a copy of current array squares\r\n const squares = current.squares.slice();\r\n if (calculateWinner(current.squares, current.position, 20, 20, 5).value || squares[res.position]) {\r\n return;\r\n }\r\n setWait(false);\r\n squares[res.position] = res.alphabet;\r\n setSecondPlayer(temp => ({\r\n ...temp,\r\n isTurn: res.startTime\r\n }))\r\n setFirstPlayer(temp => ({\r\n ...temp,\r\n isTurn: null\r\n }))\r\n setHistory(newHistory.concat([{ squares: squares, position: res.position }]));\r\n setNextAPL(res.alphabet === 'O' ? 'X' : 'O');\r\n\r\n })\r\n }\r\n\r\n }\r\n\r\n // return () => {\r\n // socket.off('playchess')\r\n // }\r\n\r\n }, [history, wait, isPlaying])\r\n\r\n React.useEffect(() => {\r\n if (!isPlayer && history.length === 1) {\r\n socket.off('startgame');\r\n socket.once('startgame', res => {\r\n socket.off('playchess')\r\n setFirstPlayer(player => ({\r\n ...player,\r\n isTurn: res.alphabet === 'X' ? player.isHost ? res.startTime : null : player.isHost ? null : res.startTime\r\n }))\r\n setSecondPlayer(player => ({\r\n ...player,\r\n isTurn: res.alphabet === 'X' ? player.isHost ? res.startTime : null : player.isHost ? null : res.startTime\r\n }))\r\n\r\n setWinner({\r\n value: null,\r\n position: []\r\n })\r\n\r\n setHistory([{\r\n squares: Array(400).fill(null),\r\n position: null,\r\n }])\r\n\r\n setIsPlaying(true)\r\n\r\n socket.once('playchess', res => {\r\n const newHistory = history.slice(0, history.length);\r\n const current = newHistory[newHistory.length - 1];\r\n // create a copy of current array squares\r\n const squares = current.squares.slice();\r\n if (calculateWinner(current.squares, current.position, 20, 20, 5).value || squares[res.position]) {\r\n return;\r\n }\r\n squares[res.position] = res.alphabet;\r\n setFirstPlayer(player => ({\r\n ...player,\r\n isTurn: res.alphabet === 'X' ? player.isHost ? null : res.startTime : player.isHost ? res.startTime : null\r\n }))\r\n setSecondPlayer(player => ({\r\n ...player,\r\n isTurn: res.alphabet === 'X' ? player.isHost ? null : res.startTime : player.isHost ? res.startTime : null\r\n }))\r\n setHistory(newHistory.concat([{ squares: squares, position: res.position }]));\r\n })\r\n })\r\n }\r\n\r\n // return () => {\r\n // socket.off('startgame');\r\n // socket.off('playchess')\r\n // }\r\n\r\n }, [isPlayer, history])\r\n\r\n React.useEffect(() => {\r\n console.log(isPlayer)\r\n if (!isPlayer) {\r\n socket.off('playchess')\r\n const newHistory = history;\r\n const current = newHistory[history.length - 1];\r\n const winnerTemp = calculateWinner(current.squares, current.position, 20, 20, 5);\r\n if (!winnerTemp.value)\r\n socket.once('playchess', res => {\r\n const newHistory = history.slice(0, history.length);\r\n const current = newHistory[newHistory.length - 1];\r\n // create a copy of current array squares\r\n const squares = current.squares.slice();\r\n if (calculateWinner(current.squares, current.position, 20, 20, 5).value || squares[res.position]) {\r\n return;\r\n }\r\n squares[res.position] = res.alphabet;\r\n setFirstPlayer(player => ({\r\n ...player,\r\n isTurn: res.alphabet === 'X' ? player.isHost ? null : res.startTime : player.isHost ? res.startTime : null\r\n }))\r\n setSecondPlayer(player => ({\r\n ...player,\r\n isTurn: res.alphabet === 'X' ? player.isHost ? null : res.startTime : player.isHost ? res.startTime : null\r\n }))\r\n\r\n setHistory(newHistory.concat([{ squares: squares, position: res.position }]));\r\n\r\n })\r\n }\r\n // return () => {\r\n // socket.off('playchess')\r\n // }\r\n }, [isPlayer, history])\r\n\r\n const handleClick = (i) => {\r\n if (!isPlaying)\r\n return;\r\n if (nextALP !== alphabet)\r\n return;\r\n\r\n const newHistory = history.slice(0, history.length);\r\n const current = newHistory[newHistory.length - 1];\r\n // create a copy of current array squares\r\n const squares = current.squares.slice();\r\n if (calculateWinner(current.squares, current.position, 20, 20, 5).value || squares[i]) {\r\n return;\r\n }\r\n setWait(true);\r\n squares[i] = alphabet;\r\n setSecondPlayer({\r\n ...secondPlayer,\r\n isTurn: null\r\n })\r\n\r\n setFirstPlayer({\r\n ...firstPlayer,\r\n isTurn: Date.now()\r\n })\r\n\r\n setHistory(newHistory.concat([{ squares: squares, position: i }]));\r\n setNextAPL(alphabet === 'O' ? 'X' : 'O');\r\n playChess(props.roomID, i, alphabet);\r\n }\r\n\r\n const handleStartGame = () => {\r\n if (firstPlayer.isReady === false) {\r\n if (notice.value === false)\r\n setNotice({\r\n value: true,\r\n message: \"Chưa có đối thủ hoặc đối thủ chưa sẵn sàng!!!\"\r\n })\r\n }\r\n else {\r\n setAlphabet('X');\r\n startGame(props.roomID, isFirst ? 'X' : 'O', setIsPlaying, setNextAPL, setHistory, setIsError, setWinner);\r\n\r\n if (!isFirst) {\r\n socket.once('playchess', res => {\r\n const newHistory = history.slice(0, history.length);\r\n const current = newHistory[newHistory.length - 1];\r\n // create a copy of current array squares\r\n const squares = current.squares.slice();\r\n if (calculateWinner(current.squares, current.position, 20, 20, 5).value || squares[res.position]) {\r\n return;\r\n }\r\n squares[res.position] = res.alphabet;\r\n setFirstPlayer(player => ({\r\n ...player,\r\n isTurn: res.alphabet === 'X' ? player.isHost ? null : res.startTime : player.isHost ? res.startTime : null\r\n }))\r\n setSecondPlayer(player => ({\r\n ...player,\r\n isTurn: res.alphabet === 'X' ? player.isHost ? null : res.startTime : player.isHost ? res.startTime : null\r\n }))\r\n\r\n setHistory(newHistory.concat([{ squares: squares, position: res.position }]));\r\n setNextAPL('X');\r\n })\r\n }\r\n if (firstPlayer.isReady) {\r\n setFirstPlayer({\r\n ...firstPlayer,\r\n isReady: false,\r\n isTurn: isFirst ? null : Date.now()\r\n })\r\n }\r\n\r\n setSecondPlayer({\r\n ...secondPlayer,\r\n isReady: false,\r\n isTurn: isFirst ? Date.now() : null\r\n })\r\n }\r\n\r\n }\r\n\r\n const handleLeaveRoom = () => {\r\n if (isPlaying && isPlayer) {\r\n const hostPos = firstPlayer.isHost ? 1 : 2;\r\n endMatch(props.roomID, isHost ? 2 : 1, hostPos === 1 ? firstPlayer.user.id : secondPlayer.user.id, hostPos === 1 ? secondPlayer.user.id : firstPlayer.user.id)\r\n surrenderRequest(props.roomID);\r\n }\r\n leaveRoom();\r\n }\r\n\r\n const handleStandUp = () => {\r\n socket.off('startgame')\r\n socket.off('playchess')\r\n setIsFirst(false);\r\n standUp(props.roomID, setIsPlayer, setIsHost);\r\n setAlphabet(\"\");\r\n setNextAPL(\"\");\r\n }\r\n\r\n const handleBecomePlayer = () => {\r\n socket.off('playchess')\r\n socket.off('startgame')\r\n becomePlayer(props.roomID, setIsPlayer, setIsHost, setIsFirst);\r\n setHistory([{\r\n squares: Array(400).fill(null),\r\n position: null,\r\n }])\r\n\r\n setWinner({\r\n value: null,\r\n position: []\r\n })\r\n setIsPlaying(false);\r\n }\r\n\r\n React.useEffect(() => {\r\n if (notice.value) {\r\n setTimeout(() => {\r\n setNotice({\r\n value: false,\r\n message: \"\"\r\n })\r\n }, 3900)\r\n }\r\n\r\n }, [notice.value]);\r\n\r\n React.useEffect(() => {\r\n const newHistory = history;\r\n const current = newHistory[history.length - 1];\r\n const winnerTemp = calculateWinner(current.squares, current.position, 20, 20, 5);\r\n\r\n if (winnerTemp.value !== null && isPlaying) {\r\n setIsPlaying(false)\r\n setFirstPlayer(player => (\r\n {\r\n ...player,\r\n isTurn: null\r\n }\r\n ))\r\n setSecondPlayer(player => (\r\n {\r\n ...player,\r\n isTurn: null\r\n }\r\n ))\r\n\r\n if (isPlayer)\r\n if (winnerTemp.value === alphabet) {\r\n // setSecondPlayer(player => ({\r\n // ...player,\r\n // user: {\r\n // ...player.user,\r\n // cup: Number(player.user.cup + 5)\r\n // }\r\n // }))\r\n\r\n // setFirstPlayer(player => ({\r\n // ...player,\r\n // user: {\r\n // ...player.user,\r\n // cup: Number(player.user.cup - 5) < 0 ? 0 : Number(player.user.cup - 5)\r\n // }\r\n // }))\r\n setIsFirst(true);\r\n const hostPos = firstPlayer.isHost ? 1 : 2;\r\n endMatch(props.roomID, winnerTemp.value === 'X' ? 1 : 2, hostPos === 1 ? firstPlayer.user.id : secondPlayer.user.id, hostPos === 1 ? secondPlayer.user.id : firstPlayer.user.id)\r\n }\r\n else {\r\n setIsFirst(false);\r\n // setSecondPlayer(player => ({\r\n // ...player,\r\n // user: {\r\n // ...player.user,\r\n // cup: Number(player.user.cup - 5) < 0 ? 0 : Number(player.user.cup - 5)\r\n // }\r\n // }))\r\n\r\n // setFirstPlayer(player => ({\r\n // ...player,\r\n // user: {\r\n // ...player.user,\r\n // cup: Number(player.user.cup + 5)\r\n // }\r\n // }))\r\n }\r\n\r\n setWinner(winnerTemp);\r\n }\r\n }, [history, alphabet, isPlaying, firstPlayer, secondPlayer, isPlayer, props.roomID])\r\n\r\n const handleIsAcceptDrawRequest = (isAccept) => {\r\n responseDrawRequest(props.roomID, isAccept);\r\n\r\n }\r\n\r\n const handleDrawRequest = () => {\r\n drawRequestSocket(props.roomID);\r\n socket.once('responsedrawrequest', isAccept => {\r\n if (isAccept === 1) {\r\n const hostPos = firstPlayer.isHost ? 1 : 2;\r\n endMatch(props.roomID, 0, hostPos === 1 ? firstPlayer.user.id : secondPlayer.user.id, hostPos === 1 ? secondPlayer.user.id : firstPlayer.user.id)\r\n } else {\r\n setNotice({\r\n value: true,\r\n message: \"Đối thủ từ chối đề nghị cầu hòa của bạn!\"\r\n })\r\n }\r\n })\r\n\r\n }\r\n\r\n\r\n const handleSurrender = () => {\r\n const hostPos = firstPlayer.isHost ? 1 : 2;\r\n endMatch(props.roomID, isHost? 2 : 1, hostPos === 1 ? firstPlayer.user.id : secondPlayer.user.id, hostPos === 1 ? secondPlayer.user.id : firstPlayer.user.id)\r\n\r\n // setSecondPlayer(player => ({\r\n // ...player,\r\n // user: {\r\n // ...player.user,\r\n // cup: Number(player.user.cup - 5)\r\n // }\r\n // }))\r\n\r\n // setFirstPlayer(player => ({\r\n // ...player,\r\n // user: {\r\n // ...player.user,\r\n // cup: Number(player.user.cup + 5)\r\n // }\r\n // }))\r\n setIsFirst(false);\r\n }\r\n\r\n const handleCloseResultBoard = () => {\r\n document.getElementById('result').className = 'result outer-border downResult';\r\n setTimeout(() => {\r\n socket.off('playchess');\r\n socket.off('startgame');\r\n setWinner({\r\n value: null,\r\n position: []\r\n })\r\n setHistory([{\r\n squares: Array(400).fill(null),\r\n position: null,\r\n }])\r\n setIsPlaying(false);\r\n\r\n if (winner.value !== 'D')\r\n if (isPlayer) {\r\n if (winner.value === 'X') {\r\n if (isHost) {\r\n setSecondPlayer(player => ({\r\n ...player,\r\n user: {\r\n ...player.user,\r\n cup: Number(player.user.cup + 5)\r\n }\r\n }))\r\n setFirstPlayer(player => ({\r\n ...player,\r\n user: {\r\n ...player.user,\r\n cup: Number(player.user.cup - 5) < 0 ? 0 : Number(player.user.cup - 5)\r\n }\r\n }))\r\n }\r\n else {\r\n setSecondPlayer(player => ({\r\n ...player,\r\n user: {\r\n ...player.user,\r\n cup: Number(player.user.cup - 5) < 0 ? 0 : Number(player.user.cup - 5)\r\n }\r\n }))\r\n setFirstPlayer(player => ({\r\n ...player,\r\n user: {\r\n ...player.user,\r\n cup: Number(player.user.cup + 5)\r\n }\r\n }))\r\n }\r\n }\r\n else {\r\n if (isHost) {\r\n setSecondPlayer(player => ({\r\n ...player,\r\n user: {\r\n ...player.user,\r\n cup: Number(player.user.cup - 5) < 0 ? 0 : Number(player.user.cup - 5)\r\n }\r\n }))\r\n setFirstPlayer(player => ({\r\n ...player,\r\n user: {\r\n ...player.user,\r\n cup: Number(player.user.cup + 5)\r\n }\r\n }))\r\n }\r\n else {\r\n setSecondPlayer(player => ({\r\n ...player,\r\n user: {\r\n ...player.user,\r\n cup: Number(player.user.cup + 5)\r\n }\r\n }))\r\n\r\n setFirstPlayer(player => ({\r\n ...player,\r\n user: {\r\n ...player.user,\r\n cup: Number(player.user.cup - 5) < 0 ? 0 : Number(player.user.cup - 5)\r\n }\r\n }))\r\n }\r\n }\r\n\r\n }\r\n else {\r\n if (winner.value === 'X') {\r\n if (firstPlayer.isHost) {\r\n setFirstPlayer(player => ({\r\n ...player,\r\n user: {\r\n ...player.user,\r\n cup: Number(player.user.cup + 5)\r\n }\r\n }))\r\n setSecondPlayer(player => ({\r\n ...player,\r\n user: {\r\n ...player.user,\r\n cup: Number(player.user.cup - 5) < 0 ? 0 : Number(player.user.cup - 5)\r\n }\r\n }))\r\n }\r\n else {\r\n setFirstPlayer(player => ({\r\n ...player,\r\n user: {\r\n ...player.user,\r\n cup: Number(player.user.cup - 5) < 0 ? 0 : Number(player.user.cup - 5)\r\n }\r\n }))\r\n\r\n setSecondPlayer(player => ({\r\n ...player,\r\n user: {\r\n ...player.user,\r\n cup: Number(player.user.cup + 5)\r\n }\r\n }))\r\n }\r\n }\r\n else {\r\n if (firstPlayer.isHost) {\r\n setFirstPlayer(player => ({\r\n ...player,\r\n user: {\r\n ...player.user,\r\n cup: Number(player.user.cup - 5) < 0 ? 0 : Number(player.user.cup - 5)\r\n }\r\n }))\r\n\r\n setSecondPlayer(player => ({\r\n ...player,\r\n user: {\r\n ...player.user,\r\n cup: Number(player.user.cup + 5)\r\n }\r\n }))\r\n }\r\n else {\r\n setFirstPlayer(player => ({\r\n ...player,\r\n user: {\r\n ...player.user,\r\n cup: Number(player.user.cup + 5)\r\n }\r\n }))\r\n setSecondPlayer(player => ({\r\n ...player,\r\n user: {\r\n ...player.user,\r\n cup: Number(player.user.cup - 5) < 0 ? 0 : Number(player.user.cup - 5)\r\n }\r\n }))\r\n }\r\n }\r\n }\r\n }, 900)\r\n }\r\n\r\n React.useEffect(() => {\r\n if (winner.value && !isPlayer) {\r\n setTimeout(() => {\r\n if (document.getElementById('result')) {\r\n document.getElementById('result').className = 'result outer-border downResult';\r\n setTimeout(() => {\r\n socket.off('playchess');\r\n socket.off('startgame');\r\n setWinner({\r\n value: null,\r\n position: []\r\n })\r\n setHistory([{\r\n squares: Array(400).fill(null),\r\n position: null,\r\n }])\r\n setIsPlaying(false);\r\n\r\n if (winner.value !== 'D')\r\n if (winner.value === 'X') {\r\n if (firstPlayer.isHost) {\r\n setFirstPlayer(player => ({\r\n ...player,\r\n user: {\r\n ...player.user,\r\n cup: Number(player.user.cup + 5)\r\n }\r\n }))\r\n setSecondPlayer(player => ({\r\n ...player,\r\n user: {\r\n ...player.user,\r\n cup: Number(player.user.cup - 5) < 0 ? 0 : Number(player.user.cup - 5)\r\n }\r\n }))\r\n }\r\n else {\r\n setFirstPlayer(player => ({\r\n ...player,\r\n user: {\r\n ...player.user,\r\n cup: Number(player.user.cup - 5) < 0 ? 0 : Number(player.user.cup - 5)\r\n }\r\n }))\r\n\r\n setSecondPlayer(player => ({\r\n ...player,\r\n user: {\r\n ...player.user,\r\n cup: Number(player.user.cup + 5)\r\n }\r\n }))\r\n }\r\n }\r\n else {\r\n if (firstPlayer.isHost) {\r\n setFirstPlayer(player => ({\r\n ...player,\r\n user: {\r\n ...player.user,\r\n cup: Number(player.user.cup - 5) < 0 ? 0 : Number(player.user.cup - 5)\r\n }\r\n }))\r\n\r\n setSecondPlayer(player => ({\r\n ...player,\r\n user: {\r\n ...player.user,\r\n cup: Number(player.user.cup + 5)\r\n }\r\n }))\r\n }\r\n else {\r\n setFirstPlayer(player => ({\r\n ...player,\r\n user: {\r\n ...player.user,\r\n cup: Number(player.user.cup + 5)\r\n }\r\n }))\r\n setSecondPlayer(player => ({\r\n ...player,\r\n user: {\r\n ...player.user,\r\n cup: Number(player.user.cup - 5) < 0 ? 0 : Number(player.user.cup - 5)\r\n }\r\n }))\r\n }\r\n\r\n }\r\n }, 900)\r\n }\r\n\r\n }, 2000)\r\n\r\n }\r\n }, [winner, isPlayer, firstPlayer, isHost]);\r\n\r\n const newHistory = history;\r\n const current = newHistory[history.length - 1];\r\n\r\n return (\r\n <>\r\n {/* <Notice isShow={isError.value} mes={isError.message} handleClose={() => setIsError({\r\n value: false,\r\n message: \"\"\r\n })}></Notice> */}\r\n <Row>\r\n < Col xs={4} className='sidebar-infor' >\r\n <Row>\r\n <Col xs={6}>\r\n <button className=\"myButton mt-2\" onClick={() => setOutGame(true)}>\r\n <img src={outRoom} className='img-out-room' alt='Đang load...'></img>\r\n </button>\r\n </Col>\r\n <Col xs={6} style={{ display: \"flex\", alignItems: \"center\" }}>\r\n <h5>Room ID: {props.roomID}</h5>\r\n </Col>\r\n </Row>\r\n <Row className='mid-border player-avatar' >\r\n <div className='inner-border' style={{ position: \"relative\" }} >\r\n {\r\n firstPlayer.user ? <Row>\r\n <Col xs={12} className='text-align-center'>\r\n <h5 >{firstPlayer.user.name}</h5>\r\n </Col>\r\n <Col xs={12}>\r\n {\r\n isPlaying || !isPlayer ?\r\n <div className='text-align-center' style={{ height: \"17vh\", width: \"17vh\", margin: \"auto\" }}>\r\n <ChangingProgressProvider startTime={firstPlayer.isTurn} interval={200} values={[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100]}>\r\n {percentage => (\r\n <CircularProgressbarWithChildren\r\n value={percentage}\r\n styles={buildStyles({\r\n pathColor: !firstPlayer.isTurn ? \"brown\" : percentage < 70 ? \"#DE9B72\" : \"#ee5b00\",\r\n trailColor: !firstPlayer.isTurn ? \"brown\" : \"#eee\",\r\n strokeLinecap: !firstPlayer.isTurn ? \"brown\" : \"butt\",\r\n })}\r\n >\r\n <img src=\"https://mdbootstrap.com/img/Photos/Avatars/img(31).jpg\" className=\"img-fluid z-depth-1 rounded-circle img-avatar\" alt=\"Đang load...\" />\r\n\r\n </CircularProgressbarWithChildren>\r\n )}\r\n </ChangingProgressProvider>\r\n </div> :\r\n <div className='text-align-center'>\r\n <img src=\"https://mdbootstrap.com/img/Photos/Avatars/img(31).jpg\" className={`img-fluid z-depth-1 rounded-circle img-avatar ${firstPlayer.isReady ? 'ready' : ''}`} alt=\"\" />\r\n </div>\r\n }\r\n\r\n\r\n </Col>\r\n <Col xs={12} className='text-align-center mt-2'>\r\n <Row className=\"justify-content-md-center\">\r\n <img src={trophy} className=\"img-fluid z-depth-1 rounded-circle img-cup\" alt=\"\" />\r\n <h5>{firstPlayer.user.cup}</h5>\r\n </Row>\r\n </Col>\r\n </Row> :\r\n <Row>\r\n <Col xs={12} className='text-align-center'>\r\n </Col>\r\n <Col xs={12} className='text-align-center'>\r\n {\r\n isPlayer ?\r\n <button className='none-button' onClick={() => setInvite(true)}>\r\n <img src={add} className=\"img-fluid z-depth-1 rounded-circle add-user\" alt=\"Đang load...\" />\r\n </button> :\r\n <button className='none-button' onClick={handleBecomePlayer}>\r\n <img src={join} className=\"img-fluid z-depth-1 rounded-circle add-user\" alt=\"Đang load...\" />\r\n </button>\r\n }\r\n\r\n </Col>\r\n <Col xs={12} className='text-align-center mt-2'>\r\n <Row className=\"justify-content-md-center\">\r\n </Row>\r\n </Col>\r\n </Row>\r\n }\r\n {\r\n firstPlayer.isHost ? <div style={{ position: \"absolute\" }}>\r\n <img src={key} className=\"img-fluid z-depth-1 rounded-circle \" style={{ height: \"8vh\" }} alt=\"Đang load...\" />\r\n </div> : <></>\r\n }\r\n {/* <Row>\r\n <Col xs={12} className='text-align-center'>\r\n </Col>\r\n <Col xs={12} className='text-align-center'>\r\n <div className='text-align-center' style={{ height: \"17vh\", width: \"17vh\", margin: \"auto\" }}>\r\n <ChangingProgressProvider interval={200} values={[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100]}>\r\n {percentage => (\r\n <CircularProgressbarWithChildren\r\n value={percentage}\r\n styles={buildStyles({\r\n pathColor: percentage < 70 ? \"blue\" : \"#f00\",\r\n trailColor: \"#eee\",\r\n strokeLinecap: \"butt\"\r\n })}\r\n >\r\n <img src=\"https://mdbootstrap.com/img/Photos/Avatars/img(31).jpg\" className=\"img-fluid z-depth-1 rounded-circle img-avatar\" alt=\"\" />\r\n\r\n </CircularProgressbarWithChildren>\r\n )}\r\n </ChangingProgressProvider>\r\n </div>\r\n </Col>\r\n <Col xs={12} className='text-align-center mt-2'>\r\n <Row className=\"justify-content-md-center\">\r\n </Row>\r\n </Col>\r\n </Row> */}\r\n </div>\r\n </Row>\r\n <Row className='mid-border player-avatar' >\r\n <div className='inner-border' style={{ position: 'relative' }} >\r\n {\r\n secondPlayer.user ? <Row>\r\n <Col xs={12} className='text-align-center'>\r\n <h5 >{secondPlayer.user.name}</h5>\r\n </Col>\r\n <Col xs={12}>\r\n {\r\n isPlaying || !isPlayer ?\r\n <div className='text-align-center' style={{ height: \"17vh\", width: \"17vh\", margin: \"auto\" }}>\r\n <ChangingProgressProvider startTime={secondPlayer.isTurn} interval={200} values={[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100]}>\r\n {percentage => (\r\n <CircularProgressbarWithChildren\r\n value={percentage}\r\n styles={buildStyles({\r\n pathColor: !secondPlayer.isTurn ? \"brown\" : percentage < 70 ? \"#DE9B72\" : \"#ee5b00\",\r\n trailColor: !secondPlayer.isTurn ? \"brown\" : \"#eee\",\r\n strokeLinecap: !secondPlayer.isTurn ? \"brown\" : \"butt\",\r\n })}\r\n >\r\n <img src=\"https://mdbootstrap.com/img/Photos/Avatars/img(31).jpg\" className=\"img-fluid z-depth-1 rounded-circle img-avatar\" alt=\"Đang load...\" />\r\n\r\n </CircularProgressbarWithChildren>\r\n )}\r\n </ChangingProgressProvider>\r\n </div>\r\n : <div className='text-align-center'>\r\n <img src=\"https://mdbootstrap.com/img/Photos/Avatars/img(31).jpg\" className={`img-fluid z-depth-1 rounded-circle img-avatar ${secondPlayer.isReady ? 'ready' : ''}`} id='demoObject' alt=\"\" />\r\n </div>\r\n }\r\n\r\n\r\n\r\n </Col>\r\n <Col xs={12} className='text-align-center mt-2'>\r\n <Row className=\"justify-content-md-center\">\r\n <img src={trophy} className=\"img-fluid z-depth-1 rounded-circle img-cup\" alt=\"\" />\r\n <h5>{secondPlayer.user.cup}</h5>\r\n </Row>\r\n </Col>\r\n </Row> :\r\n <Row>\r\n <Col xs={12} className='text-align-center'>\r\n </Col>\r\n <Col xs={12} className='text-align-center'>\r\n <button className='none-button' onClick={handleBecomePlayer}>\r\n <img src={join} className=\"img-fluid z-depth-1 rounded-circle add-user\" alt=\"\" />\r\n </button>\r\n </Col>\r\n <Col xs={12} className='text-align-center mt-2'>\r\n <Row className=\"justify-content-md-center\">\r\n </Row>\r\n </Col>\r\n </Row>\r\n }\r\n {\r\n secondPlayer.isHost ? <div style={{ position: \"absolute\" }}>\r\n <img src={key} className=\"img-fluid z-depth-1 rounded-circle \" style={{ height: \"8vh\" }} alt=\"\" />\r\n </div> : <></>\r\n }\r\n\r\n\r\n </div>\r\n </Row>\r\n\r\n <Row className='sidebar-infor-footer'>\r\n <Col >\r\n {isPlayer && isPlaying ? <OverlayTrigger\r\n placement=\"right\"\r\n delay={{ show: 250, hide: 400 }}\r\n overlay={<Tooltip> Đầu hàng</Tooltip>}\r\n >\r\n <div className='myButton stand-up-button text-align-center' onClick={() => setSurrender(true)}>\r\n <img src={whiteflag} className='img-cup'></img>\r\n </div>\r\n </OverlayTrigger> : <></>\r\n }\r\n\r\n </Col >\r\n <Col >\r\n {isPlayer ? isPlaying ?\r\n <OverlayTrigger\r\n placement=\"right\"\r\n delay={{ show: 250, hide: 400 }}\r\n overlay={<Tooltip> Cầu hòa</Tooltip>}\r\n >\r\n <div className='myButton stand-up-button text-align-center' onClick={() => setDrawRequest(0)}>\r\n <img src={handshake} className='img-cup'></img>\r\n </div>\r\n </OverlayTrigger>\r\n :\r\n <OverlayTrigger\r\n placement=\"right\"\r\n delay={{ show: 250, hide: 400 }}\r\n overlay={<Tooltip> Đứng lên</Tooltip>}\r\n >\r\n <div className='myButton stand-up-button text-align-center' onClick={handleStandUp} >\r\n <img src={upArrow} className='img-cup'></img>\r\n </div>\r\n </OverlayTrigger> : <></>}\r\n\r\n </Col >\r\n <Col >\r\n <OverlayTrigger\r\n placement=\"right\"\r\n delay={{ show: 250, hide: 400 }}\r\n overlay={<Tooltip> Người xem</Tooltip>}\r\n >\r\n <div className='myButton viewer-button text-align-center' onClick={() => setSeeViewer(true)}>\r\n {viewers.length}\r\n <img src={group} className='img-cup ml-2'></img>\r\n </div>\r\n </OverlayTrigger>,\r\n\r\n </Col >\r\n </Row>\r\n </Col >\r\n <Col xs={8} className=\"game-board\">\r\n <Container>\r\n {winner.value ?\r\n <div className='result outer-border upResult' id='result' >\r\n <div class=\"body dark-background\" style={{ backgroundImage: \"url(https://i.ibb.co/nrmkm7d/five-bells-washed-out-logo.png)\" }}>\r\n <div class=\"mid-border\">\r\n <div class=\"inner-border\">\r\n <img class=\"vertical-decoration top\" src=\"https://i.ibb.co/JRTK9z4/horizontally-centered-vertical-decoration.png\" alt=\"Đang load\"></img>\r\n <img class=\"vertical-decoration bottom\" src=\"https://i.ibb.co/JRTK9z4/horizontally-centered-vertical-decoration.png\" alt=\"Đang load\"></img>\r\n <button className='close-button none-button ' onClick={handleCloseResultBoard}>\r\n <img src={close} className='img-cup' alt=\"Đang load\"></img>\r\n </button>\r\n <div className='notice-content'>\r\n <h1 style={{ color: \"#DE9B72\" }}>{isPlayer ? winner.value !== 'D' ? winner.value === alphabet ? \"Y0U WIN\" : \"YOU LOSE\" : \"DRAW\" : winner.value === 'X' ? firstPlayer.isHost ? firstPlayer.user.name + \" WIN\" : secondPlayer.user.name + \" WIN\" : winner.value === 'O' ? firstPlayer.isHost ? secondPlayer.user.name + \" WIN\" : firstPlayer.user.name + \" WIN\" : \"DRAW\"}</h1>\r\n <h5>Cup ban đầu: {isPlayer && winner.value !== 'D' ? secondPlayer.user.cup : 0}</h5>\r\n <h5>Cộng: {isPlayer && winner.value !== 'D' ? winner.value === 'X' ? secondPlayer.isHost ? +5 : Number(secondPlayer.user.cup - 5) < 0 ? -secondPlayer.user.cup : -5 : secondPlayer.isHost ? Number(secondPlayer.user.cup - 5) < 0 ? -secondPlayer.user.cup : -5 : +5 : 0}</h5>\r\n <h5>Tổng cộng: {isPlayer && winner.value !== 'D' ? winner.value === 'X' ? secondPlayer.isHost ? Number(secondPlayer.user.cup + 5) : Number(secondPlayer.user.cup - 5) < 0 ? 0 : Number(secondPlayer.user.cup - 5) : secondPlayer.isHost ? Number(secondPlayer.user.cup - 5) < 0 ? 0 : Number(secondPlayer.user.cup - 5) : Number(secondPlayer.user.cup + 5) : 0}</h5>\r\n <div className='myButton mt-2' onClick={handleCloseResultBoard}>\r\n {isPlayer ? \"Chơi tiếp\" : \"Đã rõ\"}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div> : <></>\r\n }\r\n {seeViewer ?\r\n <div className='viewer outer-border upResult' id='viewer' >\r\n <div class=\"body dark-background\" style={{ backgroundImage: \"url(https://i.ibb.co/nrmkm7d/five-bells-washed-out-logo.png)\" }}>\r\n <div class=\"mid-border\">\r\n <div class=\"inner-border\">\r\n <img class=\"vertical-decoration top\" src=\"https://i.ibb.co/JRTK9z4/horizontally-centered-vertical-decoration.png\" alt=\"Đang load\"></img>\r\n <img class=\"vertical-decoration bottom\" src=\"https://i.ibb.co/JRTK9z4/horizontally-centered-vertical-decoration.png\" alt=\"Đang load\"></img>\r\n <button className='close-button none-button' onClick={() => {\r\n document.getElementById('viewer').className = 'viewer outer-border downResult';\r\n setTimeout(() => {\r\n setSeeViewer(false);\r\n }, 900)\r\n }}>\r\n <img src={close} className='img-cup' alt=\"Đang load\"></img>\r\n </button>\r\n <div className='notice-content'>\r\n <h3>Người xem</h3>\r\n <div class=\"tbl-header\">\r\n <table cellpadding=\"0\" cellspacing=\"0\" border=\"0\">\r\n <thead>\r\n <tr>\r\n <th>Username</th>\r\n <th><img src={trophy} className='img-cup' alt=\"Đang load\"></img></th>\r\n </tr>\r\n </thead>\r\n </table>\r\n </div>\r\n <div class=\"tbl-content\">\r\n <table cellpadding=\"0\" cellspacing=\"0\" border=\"0\">\r\n <tbody>\r\n {viewers.map((item, index) => {\r\n return (<tr key={index}>\r\n <td>{item.username}</td>\r\n <td>{item.cup}</td>\r\n </tr>)\r\n })}\r\n </tbody>\r\n </table>\r\n </div>\r\n\r\n <div className='myButton mt-2' onClick={() => {\r\n document.getElementById('viewer').className = 'viewer outer-border downResult';\r\n setTimeout(() => {\r\n setSeeViewer(false);\r\n }, 900)\r\n }}>\r\n OK\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div> : <></>\r\n }\r\n\r\n {invite ?\r\n <div className='invite outer-border upResult' id='invite' >\r\n <div class=\"body dark-background\" style={{ backgroundImage: \"url(https://i.ibb.co/nrmkm7d/five-bells-washed-out-logo.png)\" }}>\r\n <div class=\"mid-border\">\r\n <div class=\"inner-border\">\r\n <img class=\"vertical-decoration top\" src=\"https://i.ibb.co/JRTK9z4/horizontally-centered-vertical-decoration.png\" alt=\"Đang load\"></img>\r\n <img class=\"vertical-decoration bottom\" src=\"https://i.ibb.co/JRTK9z4/horizontally-centered-vertical-decoration.png\" alt=\"Đang load\"></img>\r\n <button className='close-button none-button' onClick={() => {\r\n document.getElementById('invite').className = 'invite outer-border downResult';\r\n setTimeout(() => {\r\n setInvite(false);\r\n }, 900)\r\n }}>\r\n <img src={close} className='img-cup' alt=\"Đang load\"></img>\r\n\r\n </button>\r\n <div className='notice-content'>\r\n <h3>Danh sách mời</h3>\r\n <div class=\"tbl-header\">\r\n <table cellpadding=\"0\" cellspacing=\"0\" border=\"0\">\r\n <thead>\r\n <tr>\r\n <th>Username</th>\r\n <th><img src={trophy} className='img-cup' alt=\"Đang load\"></img></th>\r\n <th></th>\r\n </tr>\r\n </thead>\r\n </table>\r\n </div>\r\n <div class=\"tbl-content\">\r\n <table cellpadding=\"0\" cellspacing=\"0\" border=\"0\">\r\n <tbody>\r\n <tr>\r\n <td>Lê Tấn Hưng</td>\r\n <td>255</td>\r\n <td ><div className='myButton'>Mời</div> </td>\r\n </tr>\r\n <tr>\r\n <td>Lê Tấn Hưng</td>\r\n <td>255</td>\r\n <td ><div className='myButton'>Mời</div> </td>\r\n </tr>\r\n <tr>\r\n <td>Lê Tấn Hưng</td>\r\n <td>255</td>\r\n <td ><div className='myButton'>Mời</div> </td>\r\n </tr>\r\n\r\n\r\n </tbody>\r\n </table>\r\n </div>\r\n\r\n <div className='myButton mt-2' onClick={() => {\r\n document.getElementById('invite').className = 'invite outer-border downResult';\r\n setTimeout(() => {\r\n setInvite(false);\r\n }, 900)\r\n setNotice({\r\n value: true,\r\n message: \"Đã mời lời thành công đến người chơi khác\"\r\n })\r\n }}>\r\n Mời tất cả\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div> : <></>\r\n }\r\n\r\n {outGame ?\r\n <div className='outGame outer-border upResult' id='outGame' >\r\n <div class=\"body dark-background\" style={{ backgroundImage: \"url(https://i.ibb.co/nrmkm7d/five-bells-washed-out-logo.png)\" }}>\r\n <div class=\"mid-border\">\r\n <div class=\"inner-border\">\r\n <img class=\"vertical-decoration top\" src=\"https://i.ibb.co/JRTK9z4/horizontally-centered-vertical-decoration.png\" alt=\"Đang load\"></img>\r\n <img class=\"vertical-decoration bottom\" src=\"https://i.ibb.co/JRTK9z4/horizontally-centered-vertical-decoration.png\" alt=\"Đang load\"></img>\r\n\r\n <button className='close-button none-button' onClick={() => {\r\n document.getElementById('outGame').className = 'outGame outer-border downResult';\r\n setTimeout(() => {\r\n setOutGame(false);\r\n }, 900)\r\n }}>\r\n <img src={close} className='img-cup' alt=\"Đang load\"></img>\r\n\r\n </button>\r\n <div className='notice-content'>\r\n <h3>Thông báo</h3>\r\n <h5>Bạn có đồng ý rời khỏi phòng không?</h5>\r\n <div>\r\n <div className='myButton mt-2 mr-2' onClick={() => {\r\n document.getElementById('outGame').className = 'outGame outer-border downResult';\r\n setTimeout(() => {\r\n setOutGame(false);\r\n }, 900)\r\n }}>\r\n Hủy\r\n </div>\r\n <Link to='/'>\r\n <div className='myButton mt-2 ml-2' onClick={handleLeaveRoom}>\r\n Đồng ý\r\n </div>\r\n </Link>\r\n\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div> : <></>\r\n }\r\n\r\n {surrender ?\r\n <div className='surrender outer-border upResult' id='surrender' >\r\n <div class=\"body dark-background\" style={{ backgroundImage: \"url(https://i.ibb.co/nrmkm7d/five-bells-washed-out-logo.png)\" }}>\r\n <div class=\"mid-border\">\r\n <div class=\"inner-border\">\r\n <img class=\"vertical-decoration top\" src=\"https://i.ibb.co/JRTK9z4/horizontally-centered-vertical-decoration.png\"></img>\r\n <img class=\"vertical-decoration bottom\" src=\"https://i.ibb.co/JRTK9z4/horizontally-centered-vertical-decoration.png\"></img>\r\n\r\n <button className='close-button none-button' onClick={() => {\r\n document.getElementById('surrender').className = 'surrender outer-border downResult';\r\n setTimeout(() => {\r\n setSurrender(false);\r\n }, 900)\r\n }}>\r\n <img src={close} className='img-cup'></img>\r\n\r\n </button>\r\n <div className='notice-content'>\r\n <h3>Đầu hàng</h3>\r\n <h5>Bạn có muốn đầu hàng đối thủ không?</h5>\r\n <div>\r\n <div className='myButton mt-2 mr-2' onClick={() => {\r\n document.getElementById('surrender').className = 'surrender outer-border downResult';\r\n setTimeout(() => {\r\n setSurrender(false);\r\n }, 900)\r\n }}>\r\n Hủy\r\n </div>\r\n <div className='myButton mt-2 ml-2' onClick={() => {\r\n document.getElementById('surrender').className = 'surrender outer-border downResult';\r\n surrenderRequest(props.roomID)\r\n setTimeout(() => {\r\n handleSurrender();\r\n setSurrender(false);\r\n }, 900)\r\n }}>\r\n Đồng ý\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div> : <></>\r\n }\r\n\r\n {drawRequest !== -1 ?\r\n <div className='drawRequest outer-border upResult' id='drawRequest' >\r\n <div class=\"body dark-background\" style={{ backgroundImage: \"url(https://i.ibb.co/nrmkm7d/five-bells-washed-out-logo.png)\" }}>\r\n <div class=\"mid-border\">\r\n <div class=\"inner-border\">\r\n <img class=\"vertical-decoration top\" src=\"https://i.ibb.co/JRTK9z4/horizontally-centered-vertical-decoration.png\"></img>\r\n <img class=\"vertical-decoration bottom\" src=\"https://i.ibb.co/JRTK9z4/horizontally-centered-vertical-decoration.png\"></img>\r\n\r\n <button className='close-button none-button' onClick={() => {\r\n document.getElementById('drawRequest').className = 'drawRequest outer-border downResult';\r\n setTimeout(() => {\r\n setDrawRequest(-1)\r\n }, 900)\r\n }}>\r\n <img src={close} className='img-cup'></img>\r\n\r\n </button>\r\n <div className='notice-content'>\r\n <h3>Cầu hòa</h3>\r\n <h5>{surrender === 0 ? \"Bạn có muốn đầu hàng đối thủ không?\" : \"Đối thủ muốn đầu hàng bạn\"}</h5>\r\n <div>\r\n <div className='myButton mt-2 mr-2' onClick={() => {\r\n document.getElementById('drawRequest').className = 'drawRequest outer-border downResult';\r\n\r\n if (drawRequest === 1) {\r\n handleIsAcceptDrawRequest(0);\r\n }\r\n\r\n setTimeout(() => {\r\n setDrawRequest(-1)\r\n }, 900)\r\n }}>\r\n Hủy\r\n </div>\r\n <div className='myButton mt-2 ml-2' onClick={() => {\r\n if (drawRequest === 0)\r\n handleDrawRequest();\r\n else {\r\n handleIsAcceptDrawRequest(1);\r\n }\r\n document.getElementById('drawRequest').className = 'drawRequest outer-border downResult';\r\n setTimeout(() => {\r\n setDrawRequest(-1)\r\n }, 900)\r\n\r\n }}>\r\n Đồng ý\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div> : <></>\r\n }\r\n\r\n\r\n {notice.value ?\r\n\r\n <Notice content={notice.message}></Notice> : <></>\r\n }\r\n\r\n {isPlayer && !isPlaying ? isHost && !winner.value ?\r\n <div className='myButton start-btn' onClick={handleStartGame}>\r\n Bắt Đầu\r\n </div> : !firstPlayer.isReady && !secondPlayer.isReady && !winner.value ? <div className='myButton start-btn' onClick={() => {\r\n if (firstPlayer.isHost === true)\r\n readyPlay(props.roomID, secondPlayer, setSecondPlayer)\r\n else\r\n readyPlay(props.roomID, firstPlayer, setFirstPlayer)\r\n }}>\r\n Sẵn sàng\r\n </div> : <></> : <></>}\r\n\r\n <div style={{ pointerEvents: isPlaying && isPlayer ? \"all\" : \"none\" }}>\r\n <Board\r\n currentPosition={current.position}\r\n winningSquares={winner.value ? winner.position : []}\r\n squares={current.squares}\r\n onClick={(i) => handleClick(i)}\r\n />\r\n </div>\r\n\r\n </Container>\r\n </Col>\r\n </Row>\r\n </>\r\n\r\n );\r\n}\r\nexport default GameArea;","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\Home\\AddNewGame\\AddNewGame.js",[],"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\components\\Message\\index.js",[],"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\Game\\GameArea\\provider.js",[],"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\Game\\GameArea\\Service.js",[],"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\Game\\Board\\Board.js",["237","238","239","240"],"import React from 'react';\r\n\r\nimport Square from '../Square/Square';\r\nimport { Container, Col, Row } from 'react-bootstrap';\r\n\r\nconst Board = (props) => {\r\n const renderSquare = (i) => {\r\n return (\r\n <Square\r\n isCurrentPosition={props.currentPosition === i}\r\n isWinning={props.winningSquares.includes(i)}\r\n key={\"square \" + i}\r\n value={props.squares[i]}\r\n onClick={() => props.onClick(i)}\r\n />\r\n );\r\n }\r\n\r\n\r\n const renderSquares = (n) => {\r\n let squares = [];\r\n for (let i = n; i < n + 20; i++) {\r\n squares.push(renderSquare(i));\r\n }\r\n return squares;\r\n }\r\n\r\n const renderRows = (i) => {\r\n return <div >{renderSquares(i)}</div>;\r\n }\r\n return (\r\n <div className='outer-border' style={{ backgroundColor: \"brown\" }}>\r\n <div class=\"body dark-background\" style={{ backgroundImage: \"url(https://i.ibb.co/nrmkm7d/five-bells-washed-out-logo.png)\" }}>\r\n <div class=\"mid-border\" >\r\n <div class=\"inner-border\">\r\n <img class=\"vertical-decoration top\" src=\"https://i.ibb.co/JRTK9z4/horizontally-centered-vertical-decoration.png\"></img>\r\n <img class=\"vertical-decoration bottom\" src=\"https://i.ibb.co/JRTK9z4/horizontally-centered-vertical-decoration.png\"></img>\r\n <Row className=\"justify-content-md-center\" style={{ paddingTop: \"2em\", paddingBottom: \"2em\" }}>\r\n {renderRows(0)}\r\n {renderRows(20)}\r\n {renderRows(40)}\r\n {renderRows(60)}\r\n {renderRows(80)}\r\n {renderRows(100)}\r\n {renderRows(120)}\r\n {renderRows(140)}\r\n {renderRows(160)}\r\n {renderRows(180)}\r\n {renderRows(200)}\r\n {renderRows(220)}\r\n {renderRows(240)}\r\n {renderRows(260)}\r\n {renderRows(280)}\r\n {renderRows(300)}\r\n {renderRows(320)}\r\n {renderRows(340)}\r\n {renderRows(360)}\r\n {renderRows(380)}\r\n </Row>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n );\r\n}\r\nexport default Board;","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\Game\\ChatArea\\MessageItem.js",[],"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\Game\\ChatArea\\SendMessageComponent.js",[],"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\Game\\Square\\Square.js",["241"],"import React from 'react';\r\nimport X from './X.svg';\r\nimport O from './O.svg'\r\nimport './styles.css';\r\nconst Square = (props) => {\r\n return (\r\n <button className={props.isWinning ? \"square square--winning\" : props.isCurrentPosition ? 'square current-position' : 'square'} style={{ padding: \"0px\", backgroundColor: \"#DE9B72\", border: \"1px solid brown\" }} onClick={props.onClick}>\r\n {props.value ? <img src={props.value === 'X' ? X : props.value === 'O' ? O : \"\"} style={{ height: \"2.8vh\", width: \"2.8vh\", margin: \"0\", padding: \"0\" }}></img> : <></>}\r\n </button>\r\n\r\n );\r\n}\r\n\r\nexport default Square;","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\service\\date.js",[],"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\Profile\\ImportImage.js",["242"],"import firebase from 'firebase';\r\nconst firebaseConfig = {\r\n apiKey: \"AIzaSyB3C7OOUgjjxf7yvV9P6VbmtHmDGKVBCeA\",\r\n authDomain: \"stotepicture.firebaseapp.com\",\r\n databaseURL: \"https://stotepicture.firebaseio.com\",\r\n projectId: \"stotepicture\",\r\n storageBucket: \"stotepicture.appspot.com\",\r\n messagingSenderId: \"160343356649\",\r\n appId: \"1:160343356649:web:b433527c5cf3c68d46ac78\",\r\n measurementId: \"G-228F3ECR6Q\"\r\n};\r\n// Initialize Firebase\r\nfirebase.initializeApp(firebaseConfig);\r\n// firebase.analytics();\r\n\r\nvar selectedFile;\r\n\r\nexport default function getfile(file,setIsLoad,setSourceImage) {\r\n console.log(file);\r\n\r\n // selected file is that file which user chosen by html form \r\n selectedFile = file[0];\r\n\r\n // make save button disabled for few seconds that has id='submit_link' \r\n //document.getElementById('submit_link').setAttribute('disabled', 'true');\r\n return myfunction(setIsLoad,setSourceImage); // call below written function \r\n}\r\n\r\nfunction myfunction(setIsLoad,setSourceImage) {\r\n return new Promise((resolve,reject)=>{\r\n // select unique name for everytime when image uploaded \r\n // Date.now() is function that give current timestamp \r\n var name = \"123\" + Date.now();\r\n\r\n // make ref to your firebase storage and select images folder \r\n var storageRef = firebase.storage().ref('/images/' + name);\r\n\r\n // put file to firebase \r\n var uploadTask = storageRef.put(selectedFile);\r\n\r\n // all working for progress bar that in html \r\n // to indicate image uploading... report \r\n uploadTask.on('state_changed', function (snapshot) {\r\n setIsLoad(true);\r\n switch (snapshot.state) {\r\n case firebase.storage.TaskState.PAUSED:\r\n console.log('Upload is paused');\r\n break;\r\n case firebase.storage.TaskState.RUNNING:\r\n console.log('Upload is running');\r\n break;\r\n }\r\n }, function (error) {\r\n console.log(error);\r\n }, function () {\r\n\r\n // get the uploaded image url back \r\n uploadTask.snapshot.ref.getDownloadURL().then(\r\n function (downloadURL) {\r\n\r\n // You get your url from here \r\n console.log('File available at', downloadURL);\r\n // document.getElementById('url').value = downloadURL;\r\n // $('#image').attr(\"src\", downloadURL);\r\n\r\n // alert(document.getElementById('url').value);\r\n // print the image url \r\n setIsLoad(false);\r\n setSourceImage(false);\r\n resolve(downloadURL);\r\n // document.getElementById('submit_link').removeAttribute('disabled');\r\n });\r\n });\r\n\r\n })\r\n};\r\n\r\n\r\n","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\HistoryGame\\index.js",[],"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\HistoryGame\\GameArea\\GameArea.js",["243"],"import React, { useState } from 'react';\r\n// import { Container } from 'react-bootstrap';\r\nimport 'bootstrap/dist/css/bootstrap.min.css';\r\nimport { Container, Col, Row } from 'react-bootstrap';\r\n\r\nimport Board from '../Board/Board';\r\nimport outRoom from './image/back-arrow.svg'\r\nimport trophy from './image/trophy.svg'\r\nimport key from './image/key.svg'\r\nimport ChangingProgressProvider from './provider'\r\nimport {\r\n CircularProgressbarWithChildren,\r\n buildStyles\r\n} from \"react-circular-progressbar\";\r\nimport \"react-circular-progressbar/dist/styles.css\";\r\nimport man from './image/man.svg'\r\n\r\nconst GameArea = (props) => {\r\n const [history, setHistory] = useState([{\r\n squares: Array(400).fill(null),\r\n position: null,\r\n }]);\r\n const [firstPlayer, setFirstPlayer] = useState(props.player1)\r\n const [secondPlayer, setSecondPlayer] = useState(props.player2)\r\n const [stepNumber, setStepNumber] = useState(props.stepNumber);\r\n\r\n const [winner, setWinner] = useState(\r\n {\r\n value: null,\r\n position: []\r\n }\r\n )\r\n\r\n React.useEffect(()=>{\r\n setFirstPlayer(props.player1);\r\n setSecondPlayer(props.player2)\r\n }, [props.player1, props.player2])\r\n\r\n React.useEffect(()=>{\r\n setStepNumber(props.stepNumber)\r\n }, [ props.stepNumber])\r\n\r\n React.useEffect(() => {\r\n if (props.steps.length !== 0 && firstPlayer.user && secondPlayer.user) {\r\n const newHistory = props.steps.slice(1).reduce((preHistory, item, index, arr) => {\r\n const currentHistory = preHistory.slice(0, index + 1);\r\n const current = currentHistory[currentHistory.length - 1];\r\n const squares = current.squares.slice();\r\n\r\n console.log(item.userID,firstPlayer.user.id)\r\n squares[item.position] = item.userID === firstPlayer.user.id? 'X' : 'O'\r\n return currentHistory.concat([{ squares: squares, position: item.position }]);\r\n }, [{\r\n squares: Array(400).fill(null),\r\n position: null,\r\n }])\r\n setHistory(newHistory);\r\n setStepNumber(newHistory.length-1)\r\n }\r\n }, [props.steps, firstPlayer, secondPlayer])\r\n\r\n const newHistory = history;\r\n const current = newHistory[stepNumber !== -1? stepNumber : 0];\r\n\r\n console.log(secondPlayer.user)\r\n return (\r\n <>\r\n <Row>\r\n < Col xs={4} className='sidebar-infor' >\r\n <Row>\r\n <Col xs={6}>\r\n <button className=\"myButton mt-2\" >\r\n <img src={outRoom} className='img-out-room' alt='Đang load...'></img>\r\n </button>\r\n </Col>\r\n <Col xs={6} style={{ display: \"flex\", alignItems: \"center\" }}>\r\n <h5>Room ID: {props.roomID}</h5>\r\n </Col>\r\n </Row>\r\n <Row className='mid-border player-avatar' >\r\n <div className='inner-border' style={{ position: \"relative\" }} >\r\n <Row>\r\n <Col xs={12} className='text-align-center'>\r\n <h5 >{firstPlayer.user.name}</h5>\r\n </Col>\r\n <Col xs={12}>\r\n\r\n <div className='text-align-center' style={{ height: \"17vh\", width: \"17vh\", margin: \"auto\" }}>\r\n <ChangingProgressProvider startTime={firstPlayer.isTurn} interval={200} values={[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100]}>\r\n {percentage => (\r\n <CircularProgressbarWithChildren\r\n value={percentage}\r\n styles={buildStyles({\r\n pathColor: !firstPlayer.isTurn ? \"brown\" : percentage < 70 ? \"#DE9B72\" : \"#ee5b00\",\r\n trailColor: !firstPlayer.isTurn ? \"brown\" : \"#eee\",\r\n strokeLinecap: !firstPlayer.isTurn ? \"brown\" : \"butt\",\r\n })}\r\n >\r\n <img src={firstPlayer.user.avatarImagePath === null ? man : firstPlayer.user.avatarImagePath} className=\"img-fluid z-depth-1 rounded-circle img-avatar\" alt=\"Đang load...\" />\r\n\r\n </CircularProgressbarWithChildren>\r\n )}\r\n </ChangingProgressProvider>\r\n </div>\r\n\r\n\r\n </Col>\r\n <Col xs={12} className='text-align-center mt-2'>\r\n <Row className=\"justify-content-md-center\">\r\n <img src={trophy} className=\"img-fluid z-depth-1 rounded-circle img-cup\" alt=\"\" />\r\n <h5>{firstPlayer.user.cup}</h5>\r\n </Row>\r\n </Col>\r\n </Row>\r\n {\r\n firstPlayer.isHost ? <div style={{ position: \"absolute\" }}>\r\n <img src={key} className=\"img-fluid z-depth-1 rounded-circle \" style={{ height: \"8vh\" }} alt=\"Đang load...\" />\r\n </div> : <></>\r\n }\r\n </div>\r\n </Row>\r\n <Row className='mid-border player-avatar' >\r\n <div className='inner-border' style={{ position: 'relative' }} >\r\n <Row>\r\n <Col xs={12} className='text-align-center'>\r\n <h5 >{secondPlayer.user.name}</h5>\r\n </Col>\r\n <Col xs={12}>\r\n\r\n <div className='text-align-center' style={{ height: \"17vh\", width: \"17vh\", margin: \"auto\" }}>\r\n <ChangingProgressProvider startTime={secondPlayer.isTurn} interval={200} values={[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100]}>\r\n {percentage => (\r\n <CircularProgressbarWithChildren\r\n value={percentage}\r\n styles={buildStyles({\r\n pathColor: !secondPlayer.isTurn ? \"brown\" : percentage < 70 ? \"#DE9B72\" : \"#ee5b00\",\r\n trailColor: !secondPlayer.isTurn ? \"brown\" : \"#eee\",\r\n strokeLinecap: !secondPlayer.isTurn ? \"brown\" : \"butt\",\r\n })}\r\n >\r\n <img src={secondPlayer.user.avatarImagePath === null ? man : secondPlayer.user.avatarImagePath} className=\"img-fluid z-depth-1 rounded-circle img-avatar\" alt=\"Đang load...\" />\r\n\r\n </CircularProgressbarWithChildren>\r\n )}\r\n </ChangingProgressProvider>\r\n </div>\r\n\r\n\r\n\r\n </Col>\r\n <Col xs={12} className='text-align-center mt-2'>\r\n <Row className=\"justify-content-md-center\">\r\n <img src={trophy} className=\"img-fluid z-depth-1 rounded-circle img-cup\" alt=\"\" />\r\n <h5>{secondPlayer.user.cup}</h5>\r\n </Row>\r\n </Col>\r\n </Row>\r\n {\r\n secondPlayer.isHost ? <div style={{ position: \"absolute\" }}>\r\n <img src={key} className=\"img-fluid z-depth-1 rounded-circle \" style={{ height: \"8vh\" }} alt=\"\" />\r\n </div> : <></>\r\n }\r\n </div>\r\n </Row>\r\n </Col >\r\n <Col xs={8} className=\"game-board\">\r\n <Container>\r\n\r\n <div style={{ pointerEvents: \"none\" }}>\r\n <Board\r\n currentPosition={current.position}\r\n winningSquares={winner.value ? winner.position : []}\r\n squares={current.squares}\r\n />\r\n </div>\r\n </Container>\r\n </Col>\r\n </Row>\r\n </>\r\n\r\n );\r\n}\r\nexport default GameArea;","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\HistoryGame\\ChatArea\\index.js",["244"],"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\HistoryGame\\GameArea\\provider.js",[],"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\HistoryGame\\ChatArea\\MessageItem.js",[],"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\HistoryGame\\Board\\Board.js",[],"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\HistoryGame\\Square\\Square.js",[],"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\utils\\roomAPI.js",[],"D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\pages\\ChangePassword\\index.js",["245"],"import React, { useEffect, useState } from 'react';\r\nimport { Form, Button } from 'react-bootstrap';\r\nimport { useParams } from \"react-router-dom\";\r\nimport Authorization from '../../utils/callAuth';\r\nimport CallAuthAPI from '../../utils/CallAuthAPI';\r\n\r\nimport './styles.css';\r\n\r\nconst ChangePassword = () => {\r\n const [isPermission, setIsPermission] = useState(false);\r\n const [oldPassword,setOldPassword]=useState('');\r\n const [newPassword, setNewPassword] = useState('');\r\n const [reNewPassword, setReNewPassword] = useState('');\r\n const [noticeForm, setNoticeForm] = useState('');\r\n const [errorAccess,setErrorAccess]=useState('');\r\n\r\n useEffect(() => {\r\n Authorization('auth/profile', JSON.parse(localStorage.getItem('id_token'))).then((res) => {\r\n if (res.data.id) setIsPermission(true);\r\n else setErrorAccess('Truy cập không hợp lệ. Vui lòng kiểm tra lại!');\r\n })\r\n .then((err) => setErrorAccess('Truy cập không hợp lệ. Vui lòng kiểm tra lại!'));\r\n }, [])\r\n const onReset = () => {\r\n if(newPassword.length<7){\r\n setNoticeForm('Mật khẩu mới phải có độ dài lớn hơn hoặc bẳng 7');\r\n return;\r\n }\r\n if(newPassword!==reNewPassword){\r\n setNoticeForm('Mật khẩu mới và nhập lại mật khẩu mới không trùng khớp với nhau');\r\n return;\r\n }\r\n CallAuthAPI('users/changepassword', 'POST', {\r\n oldPassword: oldPassword,\r\n newPassword: newPassword,\r\n },JSON.parse(localStorage.getItem('id_token')))\r\n .then(res => {\r\n if(res.data){\r\n setNoticeForm('Đổi mật khẩu thành công');\r\n setOldPassword('');\r\n setNewPassword('');\r\n setReNewPassword('');\r\n }\r\n else{\r\n setNoticeForm('Đổi mật khẩu thất bại, vui lòng kiểm tra lại');\r\n }\r\n })\r\n }\r\n\r\n const onChangeOldPassword = (e) => {\r\n setOldPassword(e.target.value);\r\n }\r\n\r\n const onChangeNewPassword = (e) => {\r\n setNewPassword(e.target.value);\r\n }\r\n\r\n const onChangeReNewPassword = (e) => {\r\n setReNewPassword(e.target.value);\r\n }\r\n\r\n return (\r\n <>\r\n <Form className=\"resetPasswordContainer\">\r\n {\r\n isPermission ? (<>\r\n <h5 className='labelInputResetPassword'>Đổi mật khẩu</h5>\r\n <div className=\"noticeResetPassword\">{noticeForm}</div>\r\n <Form.Group controlId=\"oldpassword\">\r\n <Form.Label className='labelInput'>Mật khẩu cũ</Form.Label>\r\n <Form.Control onChange={onChangeOldPassword} value={oldPassword} type=\"password\" className=\"inputResetPassword\" />\r\n </Form.Group>\r\n <Form.Group controlId=\"newpassword\">\r\n <Form.Label className='labelInput'>Mật khẩu mới</Form.Label>\r\n <Form.Control onChange={onChangeNewPassword} value={newPassword} type=\"password\" className=\"inputResetPassword\" />\r\n </Form.Group>\r\n <Form.Group controlId=\"repassword\">\r\n <Form.Label className='labelInput'>Nhập lại mật khẩu mới</Form.Label>\r\n <Form.Control onChange={onChangeReNewPassword} value={reNewPassword} className=\"inputResetPassword\" type=\"password\" />\r\n </Form.Group>\r\n <div className='submitResetPassword'>\r\n <Button className='btnPageResetPassword' onClick={onReset} id=\"signin\" type=\"button\">\r\n Xác nhận</Button>\r\n </div>\r\n </>) : <div className=\"noticeResetPassword\">{errorAccess}</div>\r\n }\r\n </Form>\r\n </>\r\n )\r\n}\r\nexport default ChangePassword;","D:\\Desktop\\Task\\4th\\HK1\\WebNC\\BTN\\BTCK\\advanced-caro\\caro-client\\my-app\\src\\utils\\matchAPI.js",[],{"ruleId":"246","replacedBy":"247"},{"ruleId":"248","replacedBy":"249"},{"ruleId":"250","severity":1,"message":"251","line":2,"column":10,"nodeType":"252","messageId":"253","endLine":2,"endColumn":16},{"ruleId":"250","severity":1,"message":"254","line":13,"column":19,"nodeType":"252","messageId":"253","endLine":13,"endColumn":30},{"ruleId":"250","severity":1,"message":"255","line":4,"column":10,"nodeType":"252","messageId":"253","endLine":4,"endColumn":15},{"ruleId":"250","severity":1,"message":"256","line":2,"column":10,"nodeType":"252","messageId":"253","endLine":2,"endColumn":19},{"ruleId":"257","severity":1,"message":"258","line":16,"column":5,"nodeType":"259","endLine":16,"endColumn":7,"suggestions":"260"},{"ruleId":"250","severity":1,"message":"255","line":2,"column":10,"nodeType":"252","messageId":"253","endLine":2,"endColumn":15},{"ruleId":"250","severity":1,"message":"261","line":15,"column":17,"nodeType":"252","messageId":"253","endLine":15,"endColumn":25},{"ruleId":"250","severity":1,"message":"262","line":11,"column":105,"nodeType":"252","messageId":"253","endLine":11,"endColumn":124},{"ruleId":"250","severity":1,"message":"263","line":2,"column":27,"nodeType":"252","messageId":"253","endLine":2,"endColumn":33},{"ruleId":"250","severity":1,"message":"264","line":11,"column":10,"nodeType":"252","messageId":"253","endLine":11,"endColumn":22},{"ruleId":"250","severity":1,"message":"265","line":27,"column":10,"nodeType":"252","messageId":"253","endLine":27,"endColumn":23},{"ruleId":"250","severity":1,"message":"266","line":39,"column":10,"nodeType":"252","messageId":"253","endLine":39,"endColumn":17},{"ruleId":"267","severity":1,"message":"268","line":1127,"column":19,"nodeType":"269","endLine":1127,"endColumn":60},{"ruleId":"267","severity":1,"message":"268","line":1141,"column":21,"nodeType":"269","endLine":1141,"endColumn":62},{"ruleId":"267","severity":1,"message":"268","line":1151,"column":21,"nodeType":"269","endLine":1151,"endColumn":60},{"ruleId":"267","severity":1,"message":"268","line":1164,"column":19,"nodeType":"269","endLine":1164,"endColumn":61},{"ruleId":"267","severity":1,"message":"268","line":1380,"column":23,"nodeType":"269","endLine":1380,"endColumn":137},{"ruleId":"267","severity":1,"message":"268","line":1381,"column":23,"nodeType":"269","endLine":1381,"endColumn":140},{"ruleId":"267","severity":1,"message":"268","line":1389,"column":25,"nodeType":"269","endLine":1389,"endColumn":62},{"ruleId":"267","severity":1,"message":"268","line":1431,"column":23,"nodeType":"269","endLine":1431,"endColumn":137},{"ruleId":"267","severity":1,"message":"268","line":1432,"column":23,"nodeType":"269","endLine":1432,"endColumn":140},{"ruleId":"267","severity":1,"message":"268","line":1440,"column":25,"nodeType":"269","endLine":1440,"endColumn":62},{"ruleId":"250","severity":1,"message":"256","line":4,"column":10,"nodeType":"252","messageId":"253","endLine":4,"endColumn":19},{"ruleId":"250","severity":1,"message":"270","line":4,"column":21,"nodeType":"252","messageId":"253","endLine":4,"endColumn":24},{"ruleId":"267","severity":1,"message":"268","line":36,"column":13,"nodeType":"269","endLine":36,"endColumn":127},{"ruleId":"267","severity":1,"message":"268","line":37,"column":13,"nodeType":"269","endLine":37,"endColumn":130},{"ruleId":"267","severity":1,"message":"268","line":8,"column":24,"nodeType":"269","endLine":8,"endColumn":161},{"ruleId":"271","severity":1,"message":"272","line":45,"column":7,"nodeType":"273","messageId":"274","endLine":52,"endColumn":8},{"ruleId":"250","severity":1,"message":"275","line":27,"column":18,"nodeType":"252","messageId":"253","endLine":27,"endColumn":27},{"ruleId":"276","severity":1,"message":"277","line":38,"column":32,"nodeType":"278","messageId":"279","endLine":38,"endColumn":33},{"ruleId":"250","severity":1,"message":"280","line":3,"column":10,"nodeType":"252","messageId":"253","endLine":3,"endColumn":19},"no-native-reassign",["281"],"no-negated-in-lhs",["282"],"no-unused-vars","'socket' is defined but never used.","Identifier","unusedVar","'handleLogin' is assigned a value but never used.","'Table' is defined but never used.","'Container' is defined but never used.","react-hooks/exhaustive-deps","React Hook useEffect has a missing dependency: 'token'. Either include it or remove the dependency array.","ArrayExpression",["283"],"'setError' is assigned a value but never used.","'responseDrawRequest' is defined but never used.","'Button' is defined but never used.","'isMessageBox' is assigned a value but never used.","'SocketContext' is defined but never used.","'isError' is assigned a value but never used.","jsx-a11y/alt-text","img elements must have an alt prop, either with meaningful text, or an empty string for decorative images.","JSXOpeningElement","'Col' is defined but never used.","default-case","Expected a default case.","SwitchStatement","missingDefaultCase","'setWinner' is assigned a value but never used.","no-useless-concat","Unexpected string concatenation of literals.","BinaryExpression","unexpectedConcat","'useParams' is defined but never used.","no-global-assign","no-unsafe-negation",{"desc":"284","fix":"285"},"Update the dependencies array to be: [token]",{"range":"286","text":"287"},[559,561],"[token]"]
>>>>>>> 05c4fe3d187726281a0ca676dd22a8b9a3152efb