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

click and move bug fixed

Browse Source
This commit is contained in:
Moon Patel
2023-07-03 18:09:20 +05:30
parent f7bb1e89cb
commit 4e6bc1f198
6 changed files with 37 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.jsx
+2 -1
View File
@@ -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: <JoinChallenge /> },
{
path: '/login', element: <AuthenticationPage isLogin={true} />, action: loginAction, loader: () => { if (getAuthToken()) return redirect('/home'); else return null; }
path: '/login', element: <AuthenticationPage isLogin={true} />,action: loginAction, loader: () => { if (getAuthToken()) return redirect('/home'); else return null; }
}, {
path: '/signup', element: <AuthenticationPage isLogin={false} />, action: signupAction, loader: () => { if (getAuthToken()) return redirect('/signup'); else return null; }
}, {
frontend/src/components/Cell.jsx
+6 -6
View File
@@ -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 } })
}
}
}
frontend/src/components/ErrorBoundary.jsx
+16
View File
@@ -0,0 +1,16 @@
import React from 'react'
import { useRouteError } from 'react-router-dom'
const ErrorBoundary = () => {
const error = useRouteError();
return (
<div>
{
Object.toString(error)
}
</div>
)
}
export default ErrorBoundary
frontend/src/components/Piece.jsx
+2 -1
View File
@@ -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) {
frontend/src/pages/Chess/ChessBoard.jsx
+5 -5
View File
@@ -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}
/>)
})}
</Flex>
frontend/src/pages/Chess/ChessGame.jsx
+6 -25
View File
@@ -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 (
<Loader variant='bars' />
)
// if (!hasJoinedRoom) return (
// <Loader variant='bars' />
// )
return (
<Flex gap="xl" miw={360} justify='center' align='center' wrap='nowrap' mt={{ base: '50px', sm: '0px' }} direction={{ base: 'column', lg: 'row' }}>
<Flex gap="xs" justify='center' align='start' wrap='nowrap' direction='column' >
<NavLink
p="2px"
label={"username"}
icon={<Avatar radius="3px" />}
label={opponent}
icon={<Avatar radius="3px" children={opponent[0].toUpperCase()} />}
description={"description"}
/>
<ChessBoard color={localStorage.getItem('myColor')} />