removing console logs and some improvements

frontend/src/App.jsx

@@ -1,8 +1,4 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
 import './App.css'
-import { Button } from '@mantine/core'
 import { createBrowserRouter, redirect, RouterProvider } from 'react-router-dom'
 import Home from './pages/Home'
 import MainLayout from './layout/MainLayout'
@@ -19,10 +15,7 @@ import { getAuthToken } from '../utils/auth'
 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'
-import ChessGameContextProvider, { ChessGameContext } from './context/chess-game-context'
-import useCountDown from './hooks/useCountDown'
+import ChessGameContextProvider from './context/chess-game-context'
 
 const router = createBrowserRouter([{
   path: '/',
@@ -59,7 +52,6 @@ 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; }
 }, {

frontend/src/components/Cell.jsx

@@ -11,10 +11,11 @@ const Cell = ({ cell }) => {
     let roomID = localStorage.getItem('roomID');
     let { square, type, color } = cell;
     const { getSquareColor, isSquareMarked, handleSquareClick } = useContext(ChessGameContext)
-    const [isDropped, setIsDropped] = useState(false);
     const { isOver, setNodeRef } = useDroppable({ id: square });
     let squareColor = getSquareColor(square);
     let marked = isSquareMarked(square);
+    let borderColor = isOver ? '#77777777' : 'transparent';
+    let borderWidth = type ? '3px':'5px'
 
     const handleClick = () => {
         handleSquareClick(square, (moveData) => {
@@ -23,10 +24,15 @@ const Cell = ({ cell }) => {
         });
     }
 
-    let content = marked ? <Mark /> : <Piece cell={cell} />;
+    let content = marked && !type ? <Mark /> : <Piece cell={cell} />;
 
     return (
-        <Flex ref={setNodeRef} style={{ aspectRatio: '1/1' }} onClick={handleClick} bg={squareColor === 'w' ? "white" : "gray"} >
+        <Flex ref={setNodeRef} style={{ aspectRatio: '1/1', position: 'relative' }} onClick={handleClick} bg={squareColor === 'w' ? "white" : "gray"} >
+            {
+                isOver ?
+                    <div style={{ width: '100%', height: '100%', position: 'absolute', borderWidth, boxSizing: 'border-box', borderStyle: 'solid', borderColor }}></div>
+                    : null
+            }
             {content}
         </Flex>
     )
@@ -34,7 +40,7 @@ const Cell = ({ cell }) => {
 
 const Mark = () => {
     return (
-        <Box w="33%" h="33%" sx={{ backgroundColor: '#77777777', borderRadius: '100%' }} m="auto"></Box>
+        <Box w="36%" h="36%" sx={{ backgroundColor: '#77777755', borderRadius: '100%' }} m="auto"></Box>
     )
 }
 

frontend/src/components/Piece.jsx

@@ -1,11 +1,21 @@
-import { Image } from '@mantine/core';
+import { Image, createStyles } from '@mantine/core';
 import React, { useContext, useEffect } from 'react';
 import { useDraggable } from '@dnd-kit/core'
 import { ChessGameContext } from '../context/chess-game-context';
 
+const useStyles = createStyles((theme) => ({
+    'chess-piece': {
+        outlineStyle: 'none',
+        boxShadow: 'none',
+        borderColor: 'transparent'
+    }
+}))
+
 const Piece = ({ cell }) => {
-    const { selectPiece } = useContext(ChessGameContext)
+    const { classes } = useStyles();
+    const { selectPiece, isSquareMarked } = useContext(ChessGameContext)
     let { square, type, color } = cell;
+    let marked = isSquareMarked(square);
     let logo = null;
     switch (type) {
         case 'p':
@@ -34,12 +44,17 @@ const Piece = ({ cell }) => {
         }
     });
 
+    let borderColor = marked ? '#77777766' : 'transparent'
+
+
     const style = transform ? {
         transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
         cursor: isDragging ? 'grabbing' : 'pointer',
         zIndex: isDragging ? 100 : 20,
         aspectRatio: '1',
-        touchAction: 'none'
+        touchAction: 'none',
+        borderRadius: '10px',
+        outline: 'none'
     } : undefined;
 
     useEffect(() => {
@@ -51,7 +66,11 @@ const Piece = ({ cell }) => {
 
     if (logo) {
         return (
-            <Image ref={setNodeRef} style={style} sx={{ cursor: 'pointer' }} {...listeners} {...attributes} src={`/src/assets/${logo}.png`} />
+            <div style={{ position: 'relative', zIndex: 100 }}>
+                <div style={{ position: 'absolute', borderRadius: '50%', boxSizing: 'border-box', borderWidth: '8px', width: '100%', height: '100%', borderStyle: 'solid', borderColor }}>
+                </div>
+                <Image classNames={{ root: classes['chess-piece'] }} ref={setNodeRef} style={style} sx={{ cursor: 'pointer' }} {...listeners} {...attributes} src={`/src/assets/${logo}.png`} />
+            </div>
         )
     } else {
         return (

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

@@ -9,7 +9,7 @@ export const ChessGameContext = createContext();
 
 
 const reducer = (state, action) => {
-    console.log(state.chess.myColor)
+    console.log(state.chessBoard)
     switch (action.type) {
         case SELECT_PIECE:
             {
@@ -96,13 +96,10 @@ function chessGameStateInit(myColor) {
 const ChessGameContextProvider = ({ children }) => {
     let myColor = localStorage.getItem('myColor');
     let roomID = localStorage.getItem('roomID');
-    console.log('INSIDE CONTEXT PROVIDER');
     const [{ chess, chessBoard, moveHints, selected, gameHistory, currentIndex, hasGameEnded, gameEndedReason }, dispatch] = useReducer(reducer, myColor, chessGameStateInit);
     const [isTimerOn, setIsTimerOn] = useState(true);
-    console.log(gameHistory);
 
 
-    console.log(gameHistory);
     const moveAudioRef = useRef(null);
     const captureAudioRef = useRef(null);
     const gameEndAudioRef = useRef(null);
@@ -111,7 +108,6 @@ const ChessGameContextProvider = ({ children }) => {
     // data received through socket
     function handleOpponentMove(data) {
         let { from, to, fen } = data;
-        console.log(from + to);
         if (!chess.get(to)) {
             console.log('Moving piece: ', data);
             dispatch({ type: MOVE_PIECE, val: { from, to } });
@@ -129,9 +125,7 @@ const ChessGameContextProvider = ({ children }) => {
     function handleSquareClick(square, emitToSocketCallback) {
         let { type, color } = chess.get(square);
         let marked = moveHints.includes(square);
-        console.log('handleSquareClick', square)
 
-        console.log(!type, selected, marked)
         if (chess.turn() === myColor) {
             if (type && color === myColor) {
                 return dispatch({ type: SELECT_PIECE, val: square });
@@ -156,7 +150,6 @@ const ChessGameContextProvider = ({ children }) => {
     function handleDrop(moveData, emitToSocketCallback) {
         let { from, to } = moveData;
         if (moveHints.includes(to)) {
-            console.log(chess.get(from))
             if (chess.get(to)) {
                 dispatch({ type: CAPTURE_PIECE, val: { from: from, to: to } });  // capture piece
                 captureAudioRef.current.play();
@@ -173,7 +166,6 @@ const ChessGameContextProvider = ({ children }) => {
 
     function selectPiece({ square, type, color: pieceColor }) {
         if (pieceColor === myColor && myColor === chess.turn()) {
-            console.log(square, type, pieceColor)
             dispatch({ type: SELECT_PIECE, val: square });
         }
     }