From 5f450e92fe8cce1e9fa78df164eb0528d6e00154 Mon Sep 17 00:00:00 2001 From: Moon Patel Date: Mon, 3 Jul 2023 22:54:34 +0530 Subject: [PATCH] Adding constants --- backend/constants.js | 14 ++++++++++++ backend/socket.js | 20 +++++++++-------- frontend/src/constants.js | 16 +++++++++++++ frontend/src/context/chess-game-context.jsx | 25 +++++++++++---------- frontend/src/pages/Chess/ChessBoard.jsx | 11 ++++----- 5 files changed, 60 insertions(+), 26 deletions(-) create mode 100644 backend/constants.js create mode 100644 frontend/src/constants.js diff --git a/backend/constants.js b/backend/constants.js new file mode 100644 index 0000000..aefaa8c --- /dev/null +++ b/backend/constants.js @@ -0,0 +1,14 @@ +const SOCKET_EVENTS = { + CONNECTION: "connection", + JOIN_ROOM: "join-room", + JOIN_ROOM_SUCCESS: "join-room-success", + JOIN_ROOM_ERROR: "join-room-error", + ROOM_FULL: "room-full", + CHESS_MOVE: "move", + CHESS_OPPONENT_MOVE: "opponent-move", + USER_JOINED_ROOM: "user-joined-room", +}; + +module.exports = { + SOCKET_EVENTS, +}; diff --git a/backend/socket.js b/backend/socket.js index 6d9acb6..ff9d18d 100644 --- a/backend/socket.js +++ b/backend/socket.js @@ -1,5 +1,7 @@ const socket = require("socket.io"); - +const { SOCKET_EVENTS } = require("./constants"); +const { CHESS_MOVE, CHESS_OPPONENT_MOVE, CONNECTION, JOIN_ROOM, JOIN_ROOM_ERROR, JOIN_ROOM_SUCCESS, ROOM_FULL } = + SOCKET_EVENTS; // roomID => { timeLimit, players:[{username: {color}}] } let activeRooms = new Map(); @@ -17,18 +19,18 @@ function addUserToRoom(roomID, userDetails) { if (room.players[username]) { room.players[username] = { color }; - return "join-room-success"; + return JOIN_ROOM_SUCCESS; } if (Object.keys(room.players).length > 1) { // room is full console.log(activeRooms); - return "room-full"; + return ROOM_FULL; } else { room.players[username] = { color }; } console.log(activeRooms); - return "join-room-success"; + return JOIN_ROOM_SUCCESS; } // initialize the socket server with the given http server instance @@ -49,10 +51,10 @@ function socketIOServerInit(server) { // data is the metadata of the user joining the room played between the users // structure: {username,color} - socket.on("join-room", (roomID, data) => { + socket.on(JOIN_ROOM, (roomID, data) => { if (activeRooms.has(roomID)) { let result = addUserToRoom(roomID, data); - if (result === "join-room-success") { + if (result === JOIN_ROOM_SUCCESS) { socket.join(roomID); io.to(roomID).emit("new user joined the room"); socket.emit(result); // room joined successfully @@ -60,13 +62,13 @@ function socketIOServerInit(server) { socket.emit(result); // room is full } } else { - socket.emit("join-room-error", "room does not exist"); + socket.emit(JOIN_ROOM_ERROR, "room does not exist"); } }); - socket.on("move", (roomID, moveData) => { + socket.on(CHESS_MOVE, (roomID, moveData) => { console.log(moveData); - socket.to(roomID).emit("opponent-move", moveData); + socket.to(roomID).emit(CHESS_OPPONENT_MOVE, moveData); }); }); } diff --git a/frontend/src/constants.js b/frontend/src/constants.js new file mode 100644 index 0000000..56dd762 --- /dev/null +++ b/frontend/src/constants.js @@ -0,0 +1,16 @@ +export const SOCKET_EVENTS = { + CONNECTION: "connection", + JOIN_ROOM: "join-room", + JOIN_ROOM_SUCCESS: "join-room-success", + JOIN_ROOM_ERROR: "join-room-error", + ROOM_FULL: "room-full", + CHESS_MOVE: "move", + CHESS_OPPONENT_MOVE: "opponent-move", + USER_JOINED_ROOM: "user-joined-room", +}; + +export const DISPATCH_EVENTS = { + SELECT_PIECE: "SELECT_PIECE", + MOVE_PIECE: "MOVE_PIECE", + CAPTURE_PIECE: "CAPTURE_PIECE", +}; diff --git a/frontend/src/context/chess-game-context.jsx b/frontend/src/context/chess-game-context.jsx index 04ff191..d369957 100644 --- a/frontend/src/context/chess-game-context.jsx +++ b/frontend/src/context/chess-game-context.jsx @@ -1,6 +1,7 @@ import React, { createContext, useReducer, useRef } from 'react' import { ChessModified, chessInit } from '../../utils/chess'; - +import { DISPATCH_EVENTS } from '../constants'; +const { CAPTURE_PIECE, MOVE_PIECE, SELECT_PIECE } = DISPATCH_EVENTS export const ChessGameContext = createContext(); // myColor: null, chess: null, chessBoard: null, moveHints: null, selected: null, dispatch: null, handleOpponentMove: null, handleSquareClick: null, getSquareColor: null, isSquareMarked: null, selectPiece: null, handleDrop: null @@ -8,19 +9,19 @@ export const ChessGameContext = createContext(); const reducer = (state, action) => { console.log(state.chess.myColor) switch (action.type) { - case 'SELECT_PIECE': + case SELECT_PIECE: { console.log('SELECTING...', action.val) return { ...state, moveHints: state.chess.getMoves(action.val), selected: action.val }; } - case 'MOVE_PIECE': + case MOVE_PIECE: { console.log('Moving', action.val, state.chess.turn()); let newChessObj = new ChessModified({ prop: state.chess.fen(), color: state.chess.myColor }) newChessObj.move(action.val); return { ...state, chess: newChessObj, chessBoard: newChessObj.getBoard(localStorage.getItem('myColor')), moveHints: [], selected: null }; } - case 'CAPTURE_PIECE': + case CAPTURE_PIECE: { console.log('Capture', action.val, state.chess.turn()) let newChessObj = new ChessModified({ prop: state.chess.fen(), color: state.chess.myColor, selected: null }); @@ -58,12 +59,12 @@ const ChessGameContextProvider = ({ children }) => { console.log(from + to) if (!chess.get(to)) { console.log('Moving piece: ', data) - dispatch({ type: 'MOVE_PIECE', val: { from, to } }); + dispatch({ type: MOVE_PIECE, val: { from, to } }); moveAudioRef.current.play(); return; } else { console.log('Capturing piece'); - dispatch({ type: 'CAPTURE_PIECE', val: { from, to } }); + dispatch({ type: CAPTURE_PIECE, val: { from, to } }); captureAudioRef.current.play(); return; } @@ -78,13 +79,13 @@ const ChessGameContextProvider = ({ children }) => { console.log(!type, selected, marked) if (chess.turn() === myColor) { if (type && color === myColor) { - return dispatch({ type: 'SELECT_PIECE', val: square }); + return dispatch({ type: SELECT_PIECE, val: square }); } if (!type && selected && marked) { - dispatch({ type: 'MOVE_PIECE', val: { from: selected, to: square } }) + dispatch({ type: MOVE_PIECE, val: { from: selected, to: square } }) } if (type && marked) { - dispatch({ type: 'CAPTURE_PIECE', val: { from: selected, to: square } }) + dispatch({ type: CAPTURE_PIECE, val: { from: selected, to: square } }) } } else { return; @@ -96,11 +97,11 @@ const ChessGameContextProvider = ({ children }) => { if (moveHints.includes(to)) { console.log(chess.get(from)) if (chess.get(to)) { - dispatch({ type: 'CAPTURE_PIECE', val: { from: from, to: to } }); // capture piece + dispatch({ type: CAPTURE_PIECE, val: { from: from, to: to } }); // capture piece captureAudioRef.current.play(); emitToSocketCallback(moveData); } else { - dispatch({ type: 'MOVE_PIECE', val: { from: from, to: to } }); // move piece + dispatch({ type: MOVE_PIECE, val: { from: from, to: to } }); // move piece moveAudioRef.current.play(); emitToSocketCallback(moveData); } @@ -110,7 +111,7 @@ const ChessGameContextProvider = ({ children }) => { function selectPiece({ square, type, color: pieceColor }) { if (pieceColor === myColor && myColor === chess.turn()) { console.log(square, type, pieceColor) - dispatch({ type: 'SELECT_PIECE', val: square }); + dispatch({ type: SELECT_PIECE, val: square }); } } diff --git a/frontend/src/pages/Chess/ChessBoard.jsx b/frontend/src/pages/Chess/ChessBoard.jsx index 7a7cc14..7d8c76a 100644 --- a/frontend/src/pages/Chess/ChessBoard.jsx +++ b/frontend/src/pages/Chess/ChessBoard.jsx @@ -4,7 +4,8 @@ import { socket } from '../../socket'; import { Flex, createStyles } from '@mantine/core'; import { DndContext } from '@dnd-kit/core' import { ChessGameContext } from '../../context/chess-game-context'; - +import { SOCKET_EVENTS } from '../../constants'; +const {CHESS_OPPONENT_MOVE,CHESS_MOVE} = SOCKET_EVENTS const useStyles = createStyles((theme) => ({ chessboard: { [theme.fn.largerThan('md')]: { @@ -31,16 +32,16 @@ const useStyles = createStyles((theme) => ({ } })) -const ChessBoard = ({ color }) => { +const ChessBoard = () => { const { classes } = useStyles(); const { chessBoard, handleOpponentMove, handleDrop } = useContext(ChessGameContext) let roomID = localStorage.getItem('roomID'); useEffect(() => { - socket.on('opponent-move', handleOpponentMove) + socket.on(CHESS_OPPONENT_MOVE, handleOpponentMove) return () => { - socket.off('opponent-move'); + socket.off(CHESS_OPPONENT_MOVE); } }, []); @@ -49,7 +50,7 @@ const ChessBoard = ({ color }) => { let from = evt.active.id; let to = evt.over.id; handleDrop({ from, to }, (moveData) => { - socket.emit('move', roomID, moveData); + socket.emit(CHESS_MOVE, roomID, moveData); }) }}>