diff --git a/frontend/src/components/Cell.jsx b/frontend/src/components/Cell.jsx index ffbaf6a..71c0eb8 100644 --- a/frontend/src/components/Cell.jsx +++ b/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 ( { 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} diff --git a/frontend/src/context/chess-game-context.jsx b/frontend/src/context/chess-game-context.jsx index 32f53b0..e6c8e5d 100644 --- a/frontend/src/context/chess-game-context.jsx +++ b/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 (