|
import { useDisclosure } from '@mantine/hooks'; |
|
import React, { useContext, useEffect } from 'react' |
|
import { ChessGameContext } from '../../context/chess-game-context'; |
|
import { socketBot as socket } from '../../socket'; |
|
import { getUserData } from '../../utils/auth'; |
|
import { Avatar, Button, Flex, MediaQuery, Modal, NavLink, Text, Title } from '@mantine/core'; |
|
import ChessBoard from '../Chess/ChessBoard'; |
|
import GameHistory from '../../components/GameHistory'; |
|
import { useNavigate } from 'react-router-dom'; |
|
import { SOCKET_EVENTS } from '../../constants'; |
|
const { CHESS_MOVE, GAME_END } = SOCKET_EVENTS |
|
|
|
const ChessGameComputer = () => { |
|
const { hasGameEnded, gameEndedReason, handleOpponentMove } = useContext(ChessGameContext); |
|
const [gameEndedModalOpen, modalFunctions] = useDisclosure(true); |
|
const navigate = useNavigate(); |
|
const user = getUserData(); |
|
let username = user.username; |
|
let color = localStorage.getItem('myColor') || 'w'; |
|
const roomID = localStorage.getItem('roomID'); |
|
|
|
|
|
useEffect(() => { |
|
socket.connect(); |
|
socket.emit('INIT', {color}); |
|
|
|
|
|
|
|
|
|
|
|
socket.on("CHESS_BOT_MOVE", (data) => { |
|
handleOpponentMove(data, () => { |
|
socket.emit(GAME_END, roomID); |
|
}) |
|
}); |
|
|
|
return () => { |
|
socket.offAny(); |
|
socket.disconnect(); |
|
} |
|
}, []); |
|
|
|
const exitGame = () => { |
|
console.log("Ending game"); |
|
socket.disconnect(); |
|
localStorage.removeItem('myColor'); |
|
navigate("/play/computer"); |
|
} |
|
|
|
const pieceDropCallback = (moveData) => { |
|
socket.emit(CHESS_MOVE, roomID, moveData); |
|
} |
|
const pieceClickCallback = (moveData) => { |
|
|
|
socket.emit(CHESS_MOVE, roomID, moveData); |
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
<React.Fragment> |
|
<Modal onClose={modalFunctions.close} opened={hasGameEnded && gameEndedModalOpen} centered> |
|
<Text>Game ended due to {gameEndedReason}</Text> |
|
<Button color='lime' onClick={exitGame}>Go back</Button> |
|
<Button mx='md' color='lime' onClick={modalFunctions.close}>OK</Button> |
|
</Modal> |
|
<Flex gap="xl" miw={360} justify='center' align='center' wrap='nowrap' mt={{ base: '50px', sm: '0px' }} direction={{ base: 'column', lg: 'row' }}> |
|
<Flex gap="xs" justify='center' h='100vh' align='start' wrap='nowrap' direction='column' > |
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}> |
|
<NavLink |
|
style={{ width: "500px" }} |
|
p="2px" |
|
// label={isWaiting ? "Waiting for opponent..." : opponent} |
|
// icon={<Avatar radius="3px" style={{ minWidth: "4.374rem" }} > |
|
// Computer |
|
// </Avatar>} |
|
icon = { <img src="https://www.chess.com/bundles/web/images/color-icons/computer.2318c3b4.svg" alt="computer-icon" style={{height:"38px" , width:"38px" ,borderRadius:"3px"}} /> } |
|
|
|
description={"description"} |
|
/> |
|
</div> |
|
{ |
|
// TODO: handle isWaiting state |
|
// false ? |
|
// <> |
|
// <MediaQuery smallerThan="sm" styles={{ display: 'none' }}> |
|
// <Image width={600} miw={480} src="/src/assets/images/chess_board.png" /> |
|
// </MediaQuery> |
|
// <MediaQuery largerThan="sm" styles={{ display: 'none' }}> |
|
// <Image width="100%" maw={540} src="/src/assets/images/chess_board.png" /> |
|
// </MediaQuery> |
|
// </> |
|
// : |
|
<ChessBoard callbacks={{ pieceDropCallback, pieceClickCallback }} /> |
|
} |
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}> |
|
<NavLink |
|
style={{ width: "500px" }} |
|
p="2px" |
|
label={username} |
|
icon={<Avatar radius="3px" > |
|
{username?.at(0).toUpperCase()} |
|
</Avatar>} |
|
description={"description"} |
|
/> |
|
</div> |
|
</Flex> |
|
<MediaQuery smallerThan="lg" styles={{ display: 'none' }}> |
|
<Flex maw={600} sx={{ |
|
width: '100%', |
|
height: '840px', |
|
textAlign: 'center', |
|
borderRadius: '10px', |
|
backgroundColor: '#272623' |
|
}} bg='gray' justify='start' py='md' align='center' direction='column' h="600px"> |
|
<Title my='20px'>Game Data</Title> |
|
<Flex direction='column' w='100%'> |
|
<GameHistory /> |
|
</Flex> |
|
<Flex> |
|
<Button onClick={exitGame} color='red'>Exit </Button> |
|
</Flex> |
|
</Flex> |
|
</MediaQuery> |
|
</Flex> |
|
</React.Fragment> |
|
) |
|
} |
|
|
|
export default ChessGameComputer |