diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 42e6d12..cf7fa0b 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -20,6 +20,7 @@ import { logoutAction } from './components/Logout' import ChallengeFriend, { playFriendAction } from './pages/Play/ChallengeFriend' import ChessGame from './pages/Chess/ChessGame' import JoinChallenge from './components/JoinChallenge' +import ErrorBoundary from './components/ErrorBoundary' const router = createBrowserRouter([{ path: '/', @@ -51,7 +52,7 @@ const router = createBrowserRouter([{ }, { path: "/game/challenges/:challenger/:roomID", element: }, { - path: '/login', element: , action: loginAction, loader: () => { if (getAuthToken()) return redirect('/home'); else return null; } + path: '/login', element: ,action: loginAction, loader: () => { if (getAuthToken()) return redirect('/home'); else return null; } }, { path: '/signup', element: , action: signupAction, loader: () => { if (getAuthToken()) return redirect('/signup'); else return null; } }, { diff --git a/frontend/src/components/Cell.jsx b/frontend/src/components/Cell.jsx index c1acf25..725ef2e 100644 --- a/frontend/src/components/Cell.jsx +++ b/frontend/src/components/Cell.jsx @@ -4,25 +4,25 @@ import { socket } from '../socket'; import { Box, Flex } from '@mantine/core'; import { useDroppable } from '@dnd-kit/core' -const Cell = ({ cell, chess, marked, dispatch }) => { +const Cell = ({ cell, chess, marked, dispatch,selected }) => { const { square, type, color } = cell; const { isOver, setNodeRef } = useDroppable({ id: square }); const [isDropped, setIsDropped] = useState(false); let squareColor = chess.squareColor(square) === 'light' ? "w" : "b"; const handleClick = () => { - if (chess.turn() !== localStorage.getItem('my_color')) return; + console.log(!type, selected, marked) + if (chess.turn() !== localStorage.getItem('myColor')) return; if (chess.myColor === color) { if (type && chess.turn() === chess.myColor) { return dispatch({ type: 'SELECT_PIECE', val: square }); } - console.log(type, chess.selected, marked) - if (!type && chess.selected && marked) { + if (!type && selected && marked) { console.log(square) - dispatch({ type: 'MOVE_PIECE', val: { from: chess.selected, to: square } }) + dispatch({ type: 'MOVE_PIECE', val: { from: selected, to: square } }) } if (type && marked) { - dispatch({ type: 'CAPTURE_PIECE', val: { from: chess.selected, to: square } }) + dispatch({ type: 'CAPTURE_PIECE', val: { from: selected, to: square } }) } } } diff --git a/frontend/src/components/ErrorBoundary.jsx b/frontend/src/components/ErrorBoundary.jsx new file mode 100644 index 0000000..a7d07c4 --- /dev/null +++ b/frontend/src/components/ErrorBoundary.jsx @@ -0,0 +1,16 @@ +import React from 'react' +import { useRouteError } from 'react-router-dom' + +const ErrorBoundary = () => { + const error = useRouteError(); + + return ( +
+ { + Object.toString(error) + } +
+ ) +} + +export default ErrorBoundary \ No newline at end of file diff --git a/frontend/src/components/Piece.jsx b/frontend/src/components/Piece.jsx index 44642c7..038c82d 100644 --- a/frontend/src/components/Piece.jsx +++ b/frontend/src/components/Piece.jsx @@ -35,7 +35,8 @@ const Piece = ({ cell, dispatch }) => { transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`, cursor: isDragging ? 'grabbing' : 'pointer', zIndex: isDragging ? 100 : 20, - aspectRatio: '1' + aspectRatio: '1', + touchAction: 'none' } : undefined; useEffect(() => { if (isDragging) { diff --git a/frontend/src/pages/Chess/ChessBoard.jsx b/frontend/src/pages/Chess/ChessBoard.jsx index 8f8ea43..caa9ee8 100644 --- a/frontend/src/pages/Chess/ChessBoard.jsx +++ b/frontend/src/pages/Chess/ChessBoard.jsx @@ -38,20 +38,19 @@ const reducer = (state, action) => { case 'SELECT_PIECE': { if (state.chess.turn() !== localStorage.getItem('myColor')) return state; - state.chess.select(action.val.square); - return { ...state, moveHints: state.chess.getMoves(state.chess.selected) }; + return { ...state, moveHints: state.chess.getMoves(action.val.square), selected: action.val.square }; } 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: [] }; + return { ...state, chess: newChessObj, chessBoard: newChessObj.getBoard(localStorage.getItem('myColor')), moveHints: [], selected: null }; } case 'CAPTURE_PIECE': { console.log('Capture', action.val, state.chess.turn()) - let newChessObj = new ChessModified({ prop: state.chess.fen(), color: state.chess.myColor }); + let newChessObj = new ChessModified({ prop: state.chess.fen(), color: state.chess.myColor, selected: null }); newChessObj.move(action.val); return { ...state, chess: newChessObj, chessBoard: newChessObj.getBoard(localStorage.getItem('myColor')), moveHints: [] }; } @@ -72,7 +71,7 @@ const ChessBoard = ({ color }) => { let roomID = localStorage.getItem('roomID'); const [gameState, dispatch] = useReducer(reducer, { - chess: chessInit(color), chessBoard: chess.getBoard(color), moveHints: [] + chess: chessInit(color), chessBoard: chess.getBoard(color), moveHints: [], selected: null }); const chessBoardRef = useRef(gameState.chessBoard); @@ -134,6 +133,7 @@ const ChessBoard = ({ color }) => { chess={chess} marked={gameState.moveHints.includes(cell.square)} dispatch={dispatch} + selected={gameState.selected} />) })} diff --git a/frontend/src/pages/Chess/ChessGame.jsx b/frontend/src/pages/Chess/ChessGame.jsx index b0f6a52..1f7c1f3 100644 --- a/frontend/src/pages/Chess/ChessGame.jsx +++ b/frontend/src/pages/Chess/ChessGame.jsx @@ -13,6 +13,7 @@ const ChessGame = () => { const [isWaiting, setIsWaiting] = useState(true); const roomID = localStorage.getItem('roomID') const navigate = useNavigate(); + const opponent = localStorage.getItem('opponent'); const exitGame = () => { localStorage.removeItem('socketid'); @@ -57,37 +58,17 @@ const ChessGame = () => { }, []); - // useEffect(() => { - // if (hasJoinedRoom) { - // } else { - // console.log('Connecting'); - // socket.connect(); - // socket.on('connect', () => { - // localStorage.setItem('socketid', socket.id); - // console.log('Connected'); - // }); - // socket.emit('join-room', roomID, username, localStorage.getItem('opponent'), { color: localStorage.getItem('myColor'), timeLimit: localStorage.getItem('timeLimit') }); - // socket.on('joined-room', () => { - // setHasJoinedRoom(true); - // }); - // socket.on('room-created', () => { - // console.log('Room is created') - // setIsWaiting(false); - // }); - // } - // }, []); - - if (!hasJoinedRoom) return ( - - ) + // if (!hasJoinedRoom) return ( + // + // ) return ( } + label={opponent} + icon={} description={"description"} />