{chessBoard.map((row, rowIndex) => {
return (
- {row.map(cell => | ).reverse()}
+ {row.map(cell => | ).reverse()}
)
}).reverse()}
diff --git a/frontend/src/pages/Chess/ChessGame.jsx b/frontend/src/pages/Chess/ChessGame.jsx
index 74132f6..19b68fe 100644
--- a/frontend/src/pages/Chess/ChessGame.jsx
+++ b/frontend/src/pages/Chess/ChessGame.jsx
@@ -4,7 +4,7 @@ import { useNavigate } from 'react-router-dom'
import { useDisclosure } from '@mantine/hooks'
import { Avatar, Button, Flex, Image, MediaQuery, Modal, NavLink, Text, Title } from '@mantine/core'
-import { socket } from '../../socket'
+import { socket, socketBot } from '../../socket'
import { getUserData } from '../../utils/auth'
import { ChessGameContext } from '../../context/chess-game-context'
import ChessBoard from '../Chess/ChessBoard'
@@ -27,7 +27,6 @@ const ChessGame = () => {
const roomID = localStorage.getItem('roomID');
const navigate = useNavigate();
const opponent = localStorage.getItem('opponent');
- let connected = socket.id;
const exitGame = () => {
// cleanup game related data
@@ -45,6 +44,14 @@ const ChessGame = () => {
endGame('RESIGN');
exitGame();
}
+ const pieceDropCallback = (moveData) => {
+ socket.emit(CHESS_MOVE, roomID, moveData);
+ }
+
+ const pieceClickCallback = (moveData) => {
+ // moveData contains fen string, from, to squares of the move
+ socket.emit(CHESS_MOVE, roomID, moveData);
+ }
useEffect(() => {
socket.connect();
@@ -71,7 +78,11 @@ const ChessGame = () => {
console.log('Socket disconnected due to', reason);
});
- socket.on(CHESS_OPPONENT_MOVE, handleOpponentMove)
+ socket.on(CHESS_OPPONENT_MOVE, (data) => {
+ handleOpponentMove(data, () => {
+ socket.emit(GAME_END, roomID);
+ })
+ })
socket.on(USER_JOINED_ROOM, () => {
setIsWaiting(false);
@@ -83,14 +94,10 @@ const ChessGame = () => {
return () => {
socket.offAny();
- socket.disconnect()
+ socket.disconnect();
}
}, []);
- useEffect(() => {
- console.log('Connection useEffect()');
- }, [connected]);
-
if (!hasJoinedRoom) return (
)
@@ -110,7 +117,7 @@ const ChessGame = () => {
p="2px"
label={isWaiting ? "Waiting for opponent..." : opponent}
icon={
- {opponent[0].toUpperCase}
+ {opponent?.at(0)?.toUpperCase}
}
description={"description"}
/>
@@ -128,7 +135,7 @@ const ChessGame = () => {
:
-
+
}
{
+ 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.onAny(evt => {
+ console.log("event", evt);
+ })
+
+ 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();
+ navigate("/play/computer");
+ }
+
+ const pieceDropCallback = (moveData) => {
+ console.log("Hello");
+ socket.emit(CHESS_MOVE, roomID, moveData);
+ }
+ const pieceClickCallback = (moveData) => {
+ // moveData contains fen string, from, to squares of the move
+ socket.emit(CHESS_MOVE, roomID, moveData);
+ }
+
+ // const resign = () => {
+ // socket.emit(USER_RESIGNED);
+ // endGame('RESIGN');
+ // exitGame();
+ // }
+
+
+ return (
+
+
+ Game ended due to {gameEndedReason}
+
+
+
+
+
+
+
+ Computer
+ }
+ description={"description"}
+ />
+
+ {
+ // TODO: handle isWaiting state
+ false ?
+ <>
+
+
+
+
+
+
+
+ :
+
+ }
+
+
+ {username[0].toUpperCase()}
+ }
+ description={"description"}
+ />
+
+
+
+
+ Game Data
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export default ChessGameComputer
\ No newline at end of file
diff --git a/frontend/src/pages/Play/Computer.jsx b/frontend/src/pages/Play/Computer.jsx
index 53bdd84..e6a5f04 100644
--- a/frontend/src/pages/Play/Computer.jsx
+++ b/frontend/src/pages/Play/Computer.jsx
@@ -1,8 +1,30 @@
+import { Button, Card, Flex, Image, TextInput, Title } from '@mantine/core'
+import { IconSearch } from '@tabler/icons-react'
import React from 'react'
+import { Link } from 'react-router-dom'
const Computer = () => {
return (
- Computer
+
+
+
+ Play with Computer
+
+
+
+
+
+
+
)
}
diff --git a/frontend/src/pages/Play/ComputerGame.jsx b/frontend/src/pages/Play/ComputerGame.jsx
new file mode 100644
index 0000000..cb43663
--- /dev/null
+++ b/frontend/src/pages/Play/ComputerGame.jsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import ChessGameContextProvider from '../../context/chess-game-context'
+import ChessGameComputer from './ChessGameComputer'
+
+const ComputerGame = () => {
+
+
+ return (
+
+
+
+
+
+ )
+}
+
+export default ComputerGame
\ No newline at end of file
diff --git a/frontend/src/pages/Play/MultiplayerGame.jsx b/frontend/src/pages/Play/MultiplayerGame.jsx
new file mode 100644
index 0000000..a5d55ec
--- /dev/null
+++ b/frontend/src/pages/Play/MultiplayerGame.jsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import ChessGameContextProvider from '../../context/chess-game-context'
+import ChessGame from '../Chess/ChessGame'
+
+const MultiplayerGame = () => {
+
+
+ return (
+
+
+
+
+
+ )
+}
+
+export default MultiplayerGame
\ No newline at end of file
diff --git a/frontend/src/socket.js b/frontend/src/socket.js
index c8aaa64..36054ab 100644
--- a/frontend/src/socket.js
+++ b/frontend/src/socket.js
@@ -1,3 +1,4 @@
import { io } from "socket.io-client";
-const url = import.meta.env.VITE_BACKEND_HOST
+const url = import.meta.env.VITE_BACKEND_HOST;
export const socket = io(url, { autoConnect: false });
+export const socketBot = io(url + "/chessbot", { autoConnect: false });