aheh/ChessHub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adding constants

Browse Source
This commit is contained in:
Moon Patel
2023-07-03 22:54:34 +05:30
parent 8c99021395
commit 5f450e92fe
5 changed files with 60 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/constants.js
+14
View File
@@ -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,
};
backend/socket.js
+11 -9
View File
@@ -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);
});
});
}
frontend/src/constants.js
+16
View File
@@ -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",
};
frontend/src/context/chess-game-context.jsx
+13 -12
View File
@@ -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 });
}
}
frontend/src/pages/Chess/ChessBoard.jsx
+6 -5
View File
@@ -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);
})
}}>
<Flex className={classes.chessboard}>