[#24] added feature for marking last move

frontend/src/components/Cell.jsx

@@ -14,9 +14,10 @@ const { CHESS_MOVE, GAME_END } = SOCKET_EVENTS
 const Cell = ({ cell, callbacks }) => {
     let roomID = localStorage.getItem('roomID');
     let { square, type } = cell;
-    const { getSquareColor, isSquareMarked, handleSquareClick } = useContext(ChessGameContext)
+    const { getSquareColor, isSquareMarked, handleSquareClick, isLastMoveSquare } = useContext(ChessGameContext)
     const { isOver, setNodeRef } = useDroppable({ id: square });
     let squareColor = getSquareColor(square);
+    let historyCell = isLastMoveSquare(square);
 
     let marked = isSquareMarked(square);
     let borderColor = isOver ? '#77777744' : 'transparent';
@@ -38,7 +39,7 @@ const Cell = ({ cell, callbacks }) => {
     return (
         <Flex ref={setNodeRef} w='10vh' sx={theme => {
             let color = theme.colors.lime;
-            return { backgroundColor: squareColor === 'b' ? '#769854' : '#e8edcd', aspectRatio: '1/1' }
+            return { backgroundColor: historyCell ? '#c0cc5c' : (squareColor === 'b' ? '#769854' : '#e8edcd'), aspectRatio: '1/1' }
         }} onClick={handleClick} bg={squareColor === 'w' ? "white" : "gray"} >
             {content}
         </Flex>

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

@@ -185,6 +185,16 @@ const ChessGameContextProvider = ({ children }) => {
         return moveHintsRef.current.includes(square);
     }
 
+    function isLastMoveSquare(square) {
+        
+        if (currentIndexRef.current < 0)
+            return false;
+        let [lastMove] = chessRef.current.history({verbose: true}).slice(-1);
+        if (square != lastMove.to && square!=lastMove.from)
+            return false;
+        return true;
+    }
+
     function jumpTo(index) {
         dispatch({ type: JUMP_TO, val: index })
     }
@@ -227,7 +237,7 @@ const ChessGameContextProvider = ({ children }) => {
 
     return (
         <ChessGameContext.Provider value={{
-            myColor, chess, chessBoard, moveHints, selected, handleOpponentMove, handleSquareClick, getSquareColor, isSquareMarked,
+            myColor, chess, chessBoard, moveHints, selected, handleOpponentMove, handleSquareClick, getSquareColor, isSquareMarked, isLastMoveSquare,
             selectPiece, handleDrop, gameHistory, jumpTo, getChessBoard, currentIndex, goAhead, goBack, setGameHistory,
             isTimerOn, hasGameEnded, gameEndedReason, endGame,getPieceColor
         }}>