fix: piece cannot be captured by clicking

frontend/src/context/chess-game-context.jsx

@@ -2,12 +2,12 @@ import React, { createContext, useReducer, useRef, useState } from 'react'
 
 import PropTypes from 'prop-types';
 
-import { socket, socketBot } from '../socket';
+import { socket } from '../socket';
 import { ChessModified, chessInit } from '../utils/chess';
 
 import { DISPATCH_EVENTS, SOCKET_EVENTS } from '../constants';
 const { CAPTURE_PIECE, MOVE_PIECE, SELECT_PIECE, JUMP_TO, SET_GAME_HISTORY, END_GAME } = DISPATCH_EVENTS
-const { GAME_END, CHESS_MOVE } = SOCKET_EVENTS;
+const { GAME_END } = SOCKET_EVENTS;
 
 export const ChessGameContext = createContext();
 
@@ -145,10 +145,12 @@ const ChessGameContextProvider = ({ children }) => {
 
         if (chessRef.current.turn() === myColor) {
             if (type && color === myColor) {
-                return dispatch({ type: SELECT_PIECE, val: square });
+                selectPiece({square,color});
+                return;
             }
             if (!type && selectedRef.current && marked) {
-                dispatch({ type: MOVE_PIECE, val: { from: selected, to: square, callback } })
+                let moveData = { from: selectedRef.current, to: square };
+                dispatch({ type: MOVE_PIECE, val: { from: selectedRef.current, to: square, callback } })
                 emitToSocketCallback({ from: selectedRef.current, to: square })
                 setIsTimerOn(false)
                 moveAudioRef.current.play();
@@ -231,11 +233,15 @@ const ChessGameContextProvider = ({ children }) => {
         socket.emit(GAME_END, roomID);
     }
 
+    function getPieceColor(square) {
+        return chessRef.current.get(square).color
+    }
+
     return (
         <ChessGameContext.Provider value={{
             myColor, chess, chessBoard, moveHints, selected, handleOpponentMove, handleSquareClick, getSquareColor, isSquareMarked,
             selectPiece, handleDrop, gameHistory, jumpTo, getChessBoard, currentIndex, goAhead, goBack, setGameHistory,
-            isTimerOn, hasGameEnded, gameEndedReason, endGame
+            isTimerOn, hasGameEnded, gameEndedReason, endGame,getPieceColor
         }}>
             {children}
             <audio src='/src/assets/audio/move-self.mp3' ref={moveAudioRef} />

frontend/src/pages/Chess/ChessBoard.jsx

@@ -37,20 +37,36 @@ const useStyles = createStyles((theme) => ({
 
 const ChessBoard = ({ callbacks }) => {
     const { classes } = useStyles();
-    const { getChessBoard, handleDrop } = useContext(ChessGameContext)
+    const { getChessBoard, handleDrop,selected,selectPiece,getPieceColor } = useContext(ChessGameContext)
     const chessBoard = getChessBoard();
     const myColor = localStorage.getItem('myColor');
     const roomID = localStorage.getItem('roomID');
 
+    const dragEndCallback =evt => {
+        let from = evt.active.id;
+        let to = evt.over.id;
+        if(from !== to) {
+            handleDrop({from,to}, callbacks.pieceDropCallback, () => {
+                socket.emit(GAME_END, roomID);
+            });
+            return;
+        }
+        if(from === to) {
+            console.log("handleDrop",from,to);
+            let moveData = from === to ? {from:selected,to} : {from,to};
+            handleDrop(moveData, callbacks.pieceDropCallback, () => {
+                socket.emit(GAME_END, roomID);
+            });
+        } else {
+            console.log("handleDrop",from,to,"2");
+            let pieceColor = getPieceColor(to);
+            pieceColor && selectPiece({square:to,color:pieceColor});
+        }
+    }
+
     if (myColor === 'w') {
         return (
-            <DndContext onDragEnd={evt => {
+            <DndContext onDragEnd={dragEndCallback}>
-                let from = evt.active.id;
-                let to = evt.over.id;
-                handleDrop({ from, to }, callbacks.pieceDropCallback, () => {
-                    socket.emit(GAME_END, roomID);
-                });
-            }}>
                 <Flex className={classes.chessboard} sx={{ userSelect: 'none' }}>
                     <div>
                         {chessBoard.map((row, rowIndex) => {
@@ -66,13 +82,7 @@ const ChessBoard = ({ callbacks }) => {
         )
     } else {
         return (
-            <DndContext onDragEnd={evt => {
+            <DndContext onDragEnd={dragEndCallback}>
-                let from = evt.active.id;
-                let to = evt.over.id;
-                handleDrop({ from, to }, callbacks.pieceDropCallback, () => {
-                    socket.emit(GAME_END, roomID);
-                });
-            }}>
                 <Flex className={classes.chessboard}>
                     <div>
                         {chessBoard.map((row, rowIndex) => {