Revert "improved chess board css"

This reverts commit 6a11378b44.

backend/routes/auth.js

@@ -61,7 +61,6 @@ router.post("/signup", async (req, res, next) => {
 
         const { id, username, email } = userDoc;
         res.setHeader('Host',process.env.HOSTNAME).status(201).cookie("auth-token", authToken, { httpOnly: true, sameSite: "strict" }).json({
-            success: true,
             user: { id, username, email },
             token: authToken,
         });
@@ -91,7 +90,6 @@ router.post("/login", async (req, res, next) => {
         const pwIsValid = await isValidPassword(password, user.password_hash);
         if (!pwIsValid) {
             return res.status(401).json({
-                success: false,
                 message: "Invalid credentials",
                 description: "Invalid credentials",
             });
@@ -101,7 +99,7 @@ router.post("/login", async (req, res, next) => {
         res.cookie("auth-token", token, { httpOnly: true, sameSite: "strict" });
         return res.setHeader('Host',process.env.HOSTNAME)
             .status(200)
-            .json({ token, user: { id: user.id, username: user.username, email: user.email }, success: true });
+            .json({ token, user: { id: user.id, username: user.username, email: user.email } });
     } catch (error) {
         if (error instanceof ZodError) {
             return res.status(401).json({ message: "Invalid Credentials", description: "Invalid schema" });
@@ -113,7 +111,7 @@ router.post("/login", async (req, res, next) => {
 router.delete("/logout", checkAuth, (req, res, next) => {
     try {
         res.setHeader('Host',process.env.HOSTNAME).clearCookie("auth-token", { httpOnly: true, sameSite: "strict" });
-        res.status(200).json({ success: true });
+        res.status(200).json({});
     } catch (err) {
         next(err);
     }

backend/routes/public.js

@@ -0,0 +1,102 @@
+const router = require("express").Router();
+const { Challenge } = require("../models/challenge");
+const { User } = require("../models/user");
+
+// API endpoints that are publically accessible and does not require authentication
+
+// get all users
+router.get("/users", async (req, res, next) => {
+  try {
+    const users = await User.find();
+    return res.status(200).json(users);
+  } catch (err) {
+    next(err);
+  }
+});
+
+// TO BE TESTED
+// get user details
+router.get("/users/:username", async (req, res, next) => {
+  try {
+    let username = req.params.username;
+    const user = await User.findOne({ username });
+    let { id, email, fname, lname, country, location } = user;
+    let friends = await user.getFriends();
+    let games = await user.getGames();
+    return res.status(200).json({
+      id,
+      username,
+      email,
+      friends,
+      fname,
+      lname,
+      country,
+      location,
+      games,
+    });
+  } catch (err) {
+    next(err);
+  }
+});
+
+// TO BE TESTED
+// get friends of given user
+router.get("/users/:username/friends", async (req, res, next) => {
+  try {
+    const user = await User.findOne({ username: req.params.username });
+    const friends = await user.getFriends();
+    return res.json({ friends });
+  } catch (err) {
+    next(err);
+  }
+});
+
+// IS IT REQUIRED?
+// TO BE TESTED
+// get current challenges of the user
+router.get("/users/:username/challenges", checkAuth, async (req, res, next) => {
+  try {
+    let { userId } = req;
+    const user = await User.findById(userId);
+    let challenges = await Challenge.find({ challenged: user.username });
+    if (!challenges) challenges = [];
+    console.log("Challenges to", user.username, challenges);
+    res.json({ challenges: challenges });
+  } catch (err) {
+    next(err);
+  }
+});
+
+// TO BE TESTED
+// get history of games played
+router.get("/users/:username/games", async (req, res, next) => {
+  try {
+    const user = await User.findOne({ username: req.params.username });
+    let gamesData = await user.getGames();
+    if (!gamesData) gamesData = [];
+    return res.status(200).json(gamesData);
+  } catch (err) {
+    next(err);
+  }
+});
+
+// TO BE TESTED
+// get a particular game
+router.get(
+  "/users/:username/games/:gameid",
+  async (req, res, next) => {
+    try {
+      const { gameid } = req.params;
+      const gameData = await Game.findById(gameid);
+      if (gameData) {
+        return res.status(200).json(gameData);
+      } else {
+        return res.status(404).json({ error: { message: "Game not found" } });
+      }
+    } catch (err) {
+      next(err);
+    }
+  }
+);
+
+module.exports = router;

backend/routes/user.js

@@ -5,92 +5,79 @@ const { User } = require("../models/user");
 const { checkAuth } = require("../util/auth");
 const { catchAsync } = require("../util/errors");
 
-// get the logged in user details
-router.get("/", checkAuth, async (req, res, next) => {
+// API enpoints related to a user, requires authentication
+
+// extracts the user details of userId. Use only if the req object contains userId field.
+const extractUserDetails = async (req, res, next) => {
   try {
     let { userId } = req;
-        const user = await User.findById(userId);
+    if (!userId) throw { message: "userId not found" };
+    else {
+      let user = await User.findById(userId);
+      req.user = user;
+    }
+  } catch (err) {
+    next(err);
+  }
+  next();
+};
+
+// TO BE TESTED
+// get the logged in user details
+router.get("/", checkAuth, extractUserDetails, async (req, res, next) => {
+  try {
+    let { user } = req;
     let { id, username, email, fname, lname, country, location } = user;
     let friends = await user.getFriends();
     let games = await user.getGames();
-        return res.status(200).json({ id, username, email, friends, fname, lname, country, location, games });
+    return res.status(200).json({
+      id,
+      username,
+      email,
+      friends,
+      fname,
+      lname,
+      country,
+      location,
+      games,
+    });
   } catch (err) {
     next(err);
   }
 });
 
-router.get("/friends", checkAuth, async (req, res, next) => {
-    try {
-        let { userId } = req;
-        let user = await User.findById(userId);
-        let friends = await user.getFriends();
-        return res.status(200).json(friends);
-    } catch (err) {
-        next(err);
-    }
-});
-
-router.get("/challenges", checkAuth, async (req, res, next) => {
-    try {
-        let { userId } = req;
-        let user = await User.findById(userId);
-        let challenges = await Challenge.find({ challenged: user.username });
-        challenges = challenges.map((challenge) => {
-            let { id, challenged, challenger, color, roomID, timeLimit } = challenge;
-            return { id, challenged, challenger, color, roomID, timeLimit };
-        });
-        console.log(challenges);
-        res.status(200).json(challenges);
-    } catch (err) {
-        next(err);
-    }
-});
-
-// TODO
-// get history of games played
-router.get("/games", checkAuth, async (req, res, next) => {
-    try {
-        let { userId } = req;
-        const user = await User.findById(userId);
-        let games = await user.getGames();
-        if (!games) games = [];
-        return res.status(200).json(gamesData);
-    } catch (err) {
-        next(err);
-    }
-});
-
-// TODO
-router.get("/games/:gameid", checkAuth, async (req, res, next) => {
-    try {
-    } catch (err) {
-        next(err);
-    }
-});
-
-// TODO
-router.get("");
-
 // TO BE TESTED
-// update user details
+// update logged in user details
 router.patch("/", checkAuth, async (req, res, next) => {
   try {
     let { userId } = req;
     let updatedData = req.body;
     await User.findByIdAndUpdate(userId, { ...updatedData });
-        let { id, username, email, fname, lname, location, country, fullName } = await User.findById(userId);
-        return res.status(200).json({ user: { id, username, email, fname, lname, location, country, fullName } });
+    let { id, username, email, fname, lname, location, country, fullName } =
+      await User.findById(userId);
+    return res.status(200).json({
+      user: {
+        id,
+        username,
+        email,
+        fname,
+        lname,
+        location,
+        country,
+        fullName,
+      },
+    });
   } catch (err) {
     next(err);
   }
 });
 
+// TO BE TRIED ONCE
 // TO BE TESTED
-// delete the user
-router.delete("/", checkAuth, async (req, res, next) => {
+// delete logged in user account
+router.delete("/", checkAuth, extractUserDetails, async (req, res, next) => {
   try {
-        let { userId } = req;
-        let user = await User.findById(userId);
+    let { user } = req;
     await user.deleteOne();
     return res.status(204).json({ message: "Account deleted succesfully" });
   } catch (err) {
@@ -99,35 +86,39 @@ router.delete("/", checkAuth, async (req, res, next) => {
 });
 
 // TO BE TESTED
-// TODO: add some logic to notify the challenger if the challenged user declines the challenge
-// accept or decline a challenge
-// challengeID here refers to the roomID associated with the challenge
-router.delete("/challenges/:challengeID", checkAuth, async (req, res, next) => {
+// get all friends of logged in user
+router.get(
+  "/friends",
+  checkAuth,
+  extractUserDetails,
+  async (req, res, next) => {
     try {
-        let { challengeID } = req.params;
-        let challenge = await Challenge.findById(challengeID);
-        if (!challenge)
-            return res
-                .status(404)
-                .json({ message: "Challenge not found", description: "Challenge ID does not exists" });
-        await challenge.deleteOne();
-        return res.status(200).json({});
+      let { user } = req;
+      let friends = await user.getFriends();
+      return res.status(200).json(friends);
     } catch (err) {
       next(err);
     }
-});
+  }
+);
 
 // TO BE TESTED
 // add a friend
-router.post("/friends/:friendusername", checkAuth, async (req, res, next) => {
-    let { friendusername } = req.params;
-    let { userId } = req;
-    const user = await User.findById(userId);
-    if (user.username === friendusername)
+router.post(
+  "/friends",
+  checkAuth,
+  extractUserDetails,
+  async (req, res, next) => {
+    let { friendUsername } = req.body;
+    const { user } = req;
+    if (user.username === friendUsername)
       res.status(405).json({
-            error: { description: "Cannot add yourself as friend", message: "Cannot add this user as friends" },
+        error: {
+          description: "Cannot add yourself as friend",
+          message: "Cannot add this user as friends",
+        },
       });
-    let friendData = await User.findOne({ username: friendusername });
+    let friendData = await User.findOne({ username: friendUsername });
     if (friendData) {
       if (friendData.friends.includes(user._id)) {
         res.status(409).json({
@@ -145,31 +136,42 @@ router.post("/friends/:friendusername", checkAuth, async (req, res, next) => {
       }
     } else {
       res.status(404).json({
-            error: { message: "User not found", description: "username not found in DB" },
+        error: {
+          message: "User not found",
+          description: "username not found in DB",
+        },
       });
     }
-});
+  }
+);
 
-// TODO
+// TO BE TESTED
 // remove a user from friends list
 router.delete(
-    "/friends/:friendid",
+  "/friends",
   checkAuth,
+  extractUserDetails,
   catchAsync(async (req, res, next) => {
-        const { friendid } = req.params;
-        const { userId } = req;
-        const user = await User.findById(userId);
+    const { friendUsername } = req.body;
+    const { user } = req;
 
     // Find the friend user to be removed
-        const friendData = await User.findById(friendid);
+    const friendData = await User.findOne({ username: friendUsername });
     if (!friendData) {
-            return res.status(404).json({ error: { message: "Friend user not found" } });
+      return res.status(404).json({
+        error: {
+          message: "Cannot add username that does not exists",
+          description: "username to be added as friend not found.",
+        },
+      });
     }
 
     // Remove the friend from the user's friends list
     const friendIndex = user.friends.indexOf(friendData._id);
     if (friendIndex === -1) {
-            return res.status(400).json({ error: { message: "Friend user not found in the friends list" } });
+      return res.status(400).json({
+        error: { message: "Friend user not found in the friends list" },
+      });
     }
     user.friends.splice(friendIndex, 1);
     await user.save();
@@ -177,7 +179,9 @@ router.delete(
     // Remove the user from the friend's friends list
     const userIndex = friendData.friends.indexOf(user._id);
     if (userIndex === -1) {
-            return res.status(400).json({ error: { message: "User not found in the friend's friends list" } });
+      return res.status(400).json({
+        error: { message: "User not found in the friend's friends list" },
+      });
     }
     friendData.friends.splice(userIndex, 1);
     await friendData.save();
@@ -186,83 +190,105 @@ router.delete(
   })
 );
 
-// =============================================================
+// TO BE TESTED
+// get all logged in users challenges
+router.get(
+  "/challenges",
+  checkAuth,
+  extractUserDetails,
+  async (req, res, next) => {
+    try {
+      let { user } = req;
+      let challenges = await Challenge.find({ challenged: user.username });
+      challenges = challenges.map((challenge) => {
+        let { id, challenged, challenger, color, roomID, timeLimit } =
+          challenge;
+        return { id, challenged, challenger, color, roomID, timeLimit };
+      });
+      console.log(challenges);
+      res.status(200).json(challenges);
+    } catch (err) {
+      next(err);
+    }
+  }
+);
+
+// ??
+// TO BE TESTED
+// TODO: add some logic to notify the challenger if the challenged user declines the challenge
+// accept or decline a challenge
+// challengeID here refers to the roomID associated with the challenge
+router.delete("/challenges/:challengeID", checkAuth, async (req, res, next) => {
+  try {
+    let { challengeID } = req.params;
+    let challenge = await Challenge.findById(challengeID);
+    if (!challenge)
+      return res.status(404).json({
+        message: "Challenge not found",
+        description: "Challenge ID does not exists",
+      });
+    await challenge.deleteOne();
+    return res.status(200).json({});
+  } catch (err) {
+    next(err);
+  }
+});
 
 // TO BE TESTED
-// get user details
-router.get("/:userid", async (req, res, next) => {
+// get history of games played by logged in user
+router.get("/games", checkAuth, extractUserDetails, async (req, res, next) => {
   try {
-        let userId = req.params.userid;
-        const user = await User.findById(userId);
-        let { id, username, email, fname, lname, country, location } = user;
-        let friends = await user.getFriends();
+    const { user } = req;
     let games = await user.getGames();
-        return res.status(200).json({ id, username, email, friends, fname, lname, country, location, games });
+    if (!games) games = [];
+    return res.status(200).json(games);
   } catch (err) {
     next(err);
   }
 });
 
-// get friends of the user
-router.get("/:userid/friends", async (req, res, next) => {
-    try {
-        const user = await User.findById(req.params.userid);
-        const friends = await user.getFriends();
-        return res.json({ friends });
-    } catch (err) {
-        next(err);
-    }
-});
-
-// get current challenges of the user
-router.get("/:userid/challenges", checkAuth, async (req, res, next) => {
-    try {
-        let { userId } = req;
-        const user = await user.findById(userId);
-        let challenges = await Challenge.find({ challenged: user.username });
-        if (!challenges) challenges = [];
-        console.log("Challenges to", user.username, challenges);
-        res.json({ challenges: challenges });
-    } catch (err) {
-        next(err);
-    }
-});
-
-// TODO
-// get history of games played
+// TO BE TESTED
+// get game details of a certain game played by logged in user
 router.get(
-    "/:userid/games",
+  "/games/:gameid",
   checkAuth,
-    catchAsync(async (req, res, next) => {
-        const user = await User.findOne();
-        let gamesData = await user.getGames();
-        if (!gamesData) gamesData = [];
-        return res.status(200).json({ data: gamesData });
-    })
+  extractUserDetails,
+  async (req, res, next) => {
+    try {
+      let { gameid } = req.params;
+      let { user } = req;
+      let gameDoc = await Game.findById(gameid);
+
+      if (!gameDoc) {
+        return res.status(404).json({
+          message: "Game not found",
+          description: "Game id is invalid",
+        });
+      }
+
+      if (
+        user.id == gameDoc.white._id.toString() ||
+        user.id == gameDoc.black._id.toString()
+      ) {
+        return res.status(200).json(gameDoc);
+      } else {
+        res.status(404).json({
+          message: "Game not found",
+          description: "Game id does not belong to the logged in user",
+        });
+      }
+    } catch (err) {
+      next(err);
+    }
+  }
 );
 
 // TODO
 // add a game
-router.post("/:userid/game", checkAuth, async (req, res, next) => {
+router.post("/games", checkAuth, async (req, res, next) => {
   const gameData = req.body;
   const gameDoc = await Game.create(gameData);
   return res.json({ data: gameDoc });
 });
 
-// TODO
-// get a particular game
-router.get(
-    "/:userid/games/:gameid",
-    checkAuth,
-    catchAsync(async (req, res, next) => {
-        const { gameid } = req.params;
-        const gameData = await Game.findById(gameid);
-        if (gameData) {
-            return res.status(200).json({ data: gameData });
-        } else {
-            return res.status(404).json({ error: { message: "Game not found" } });
-        }
-    })
-);
-
 module.exports = router;

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

@@ -6,7 +6,7 @@ import { socket } from '../socket';
 import { ChessModified, chessInit } from '../utils/chess';
 
 import { DISPATCH_EVENTS, SOCKET_EVENTS } from '../constants';
-const { CAPTURE_PIECE, MOVE_PIECE, SELECT_PIECE, JUMP_TO, SET_GAME_HISTORY, END_GAME } = DISPATCH_EVENTS
+const { MOVE_PIECE, SELECT_PIECE, JUMP_TO, SET_GAME_HISTORY, END_GAME } = DISPATCH_EVENTS
 const { GAME_END } = SOCKET_EVENTS;
 
 export const ChessGameContext = createContext();
@@ -28,31 +28,22 @@ const reducer = (state, action) => {
                     let newState;
                     if (newChessObj.isCheckmate()) {
                         action.val.callback();
+                        action.val.playAudioCallback("CHECKMATE");
                         newState = { ...state, chess: newChessObj, chessBoard: newChessObj.getBoard(), moveHints: [], selected: null, gameHistory: updatedGameHistory, currentIndex: updatedGameHistory.length - 1, hasGameEnded: true, gameEndedReason: 'CHECKMATE' };
-                    } else if (newChessObj.isStalemate()) {
-                        action.val.callback();
-                        newState = { ...state, chess: newChessObj, chessBoard: newChessObj.getBoard(), moveHints: [], selected: null, gameHistory: updatedGameHistory, currentIndex: updatedGameHistory.length - 1, hasGameEnded: true, gameEndedReason: 'STALEMATE' };
-                    }
-                    else {
+                    } else if(newChessObj.isCheck() || newChessObj.inCheck()) {
+                        action.val.playAudioCallback("CHECK");
                         newState = { ...state, chess: newChessObj, chessBoard: newChessObj.getBoard(), moveHints: [], selected: null, gameHistory: updatedGameHistory, currentIndex: updatedGameHistory.length - 1 };
-                    }
-                    return newState;
-                }
-            case CAPTURE_PIECE:
-                {
-                    let newChessObj = new ChessModified(state.chess.fen());
-                    let updatedGameHistory = state.gameHistory;
-                    let { san, after } = newChessObj.move(action.val);
-                    updatedGameHistory.push({ move: san, fen: after });
-                    let newState;
-                    if (newChessObj.isCheckmate()) {
-                        action.val.callback();
-                        newState = { ...state, chess: newChessObj, chessBoard: newChessObj.getBoard(), moveHints: [], selected: null, gameHistory: updatedGameHistory, currentIndex: updatedGameHistory.length - 1, hasGameEnded: true, gameEndedReason: 'CHECKMATE' };
                     } else if (newChessObj.isStalemate()) {
                         action.val.callback();
+                        action.val.playAudioCallback("STALEMATE");
                         newState = { ...state, chess: newChessObj, chessBoard: newChessObj.getBoard(), moveHints: [], selected: null, gameHistory: updatedGameHistory, currentIndex: updatedGameHistory.length - 1, hasGameEnded: true, gameEndedReason: 'STALEMATE' };
                     }
                     else {
+                        if(!state.chess.get(action.val.to)) {
+                            action.val.playAudioCallback("MOVE");
+                        } else {
+                            action.val.playAudioCallback("CAPTURE");
+                        }
                         newState = { ...state, chess: newChessObj, chessBoard: newChessObj.getBoard(), moveHints: [], selected: null, gameHistory: updatedGameHistory, currentIndex: updatedGameHistory.length - 1 };
                     }
                     return newState;
@@ -88,7 +79,7 @@ const reducer = (state, action) => {
 
 function chessGameStateInit(myColor) {
     let chess = chessInit(myColor);
-    let chessBoard = chess.getBoard()
+    let chessBoard = chess.getBoard();
     let moveHints = [];
     let gameHistory = [];
     let selected = null;
@@ -123,19 +114,35 @@ const ChessGameContextProvider = ({ children }) => {
     const gameEndAudioRef = useRef(null);
     const checkAudioRef = useRef(null);
 
-    // data received through socket
+    function playAudioCallback(action) {
+        switch(action) {
+            case "MOVE":
+                moveAudioRef.current.play();
+                break;
+            case "CAPTURE":
+                captureAudioRef.current.play();
+                break;
+            case "CHECK":
+                checkAudioRef.current.play();
+                break;
+            case "CHECKMATE":
+            case "STALEMATE":
+            case "GAME_END":
+                gameEndAudioRef.current.play();
+                break;
+            case "CASTLE":
+                
+                break;
+            default:
+                break;
+        }
+    }
+
+    // data - received through socket
     function handleOpponentMove(data, callback) {
         let { from, to } = data;
-        console.log(data);
-        if (!chessRef.current.get(to)) {
-            dispatch({ type: MOVE_PIECE, val: { from, to, callback } });
-            // moveAudioRef.current.play();
-            return;
-        } else {
-            dispatch({ type: CAPTURE_PIECE, val: { from, to, callback } });
-            // captureAudioRef.current.play();
-            return;
-        }
+        console.log("Opponent move:",from,to);
+        dispatch({type:MOVE_PIECE,val: { from, to, callback,playAudioCallback }});
     }
 
     // called when user clicks a square
@@ -147,22 +154,10 @@ const ChessGameContextProvider = ({ children }) => {
             if (type && color === myColor) {
                 selectPiece({square,color});
                 return;
-            }
-            if (!type && selectedRef.current && marked) {
-                let moveData = { from: selectedRef.current, to: square };
-                dispatch({ type: MOVE_PIECE, val: { from: selectedRef.current, to: square, callback } })
+            } else if(marked) {
+                dispatch({ type: MOVE_PIECE, val: { from: selectedRef.current, to: square, callback,playAudioCallback } })
+                console.log("Move:",{ from: selectedRef.current, to: square })
                 emitToSocketCallback({ from: selectedRef.current, to: square })
-                setIsTimerOn(false)
-                moveAudioRef.current.play();
-                return;
-            }
-            if (type && marked) {
-                console.log({ from: selectedRef.current, to: square })
-                dispatch({ type: CAPTURE_PIECE, val: { from: selectedRef.current, to: square, callback } })
-                emitToSocketCallback({ from: selectedRef.current, to: square })
-                setIsTimerOn(false);
-                captureAudioRef.current.play();
-                return;
             }
         }
     }
@@ -170,16 +165,9 @@ const ChessGameContextProvider = ({ children }) => {
     function handleDrop(moveData, emitToSocketCallback, callback) {
         let { from, to } = moveData;
         if (moveHintsRef.current.includes(to)) {
-            if (chessRef.current.get(to)) {
-                dispatch({ type: CAPTURE_PIECE, val: { from: from, to: to, callback } });  // capture piece
-                captureAudioRef.current.play();
+            dispatch({ type: MOVE_PIECE, val: { from: from, to: to, callback,playAudioCallback } });  // capture piece
+            console.log("Move:",{ from,to })
             emitToSocketCallback(moveData);
-            } else {
-                dispatch({ type: MOVE_PIECE, val: { from: from, to: to, callback } }); // move piece
-                moveAudioRef.current.play();
-                console.log(moveData);
-                emitToSocketCallback(moveData);
-            }
         }
     }
 
@@ -246,7 +234,7 @@ const ChessGameContextProvider = ({ children }) => {
             {children}
             <audio src='/src/assets/audio/move-self.mp3' ref={moveAudioRef} />
             <audio src='/src/assets/audio/capture.mp3' ref={captureAudioRef} />
-            <audio src='/src/assets/audio/game-end.webm.mp3' ref={gameEndAudioRef} />
+            <audio src='/src/assets/audio/game-end.webm' ref={gameEndAudioRef} />
             <audio src='/src/assets/audio/move-check.mp3' ref={checkAudioRef} />
         </ChessGameContext.Provider>
     )

frontend/src/context/user-data-context.jsx

@@ -13,8 +13,7 @@ const UserDataContextProvider = ({ children }) => {
     async function fetchUserDetails() {
         try {
             if (isLoggedIn) {
-                let { id: userid } = JSON.parse(localStorage.getItem('user'));
-                let userDetailsUrl = `${import.meta.env.VITE_BACKEND_HOST}/api/user/${userid}`
+                let userDetailsUrl = `${import.meta.env.VITE_BACKEND_HOST}/api/user`
                 const response = await fetch(userDetailsUrl, {
                     credentials: 'include'
                 });

frontend/src/pages/Play/ChessGameComputer.jsx

@@ -24,9 +24,9 @@ const ChessGameComputer = () => {
         socket.connect();
         socket.emit('INIT', {color});
 
-        socket.onAny(evt => {
-            console.log("event", evt);
-        })
+        // socket.onAny(evt => {
+        //     console.log("event", evt);
+        // })
 
         socket.on("CHESS_BOT_MOVE", (data) => {
             handleOpponentMove(data, () => {
@@ -76,9 +76,11 @@ const ChessGameComputer = () => {
                             style={{ width: "500px" }}
                             p="2px"
                             // label={isWaiting ? "Waiting for opponent..." : opponent}
-                            icon={<Avatar radius="3px" >
-                                Computer
-                            </Avatar>}
+                            // icon={<Avatar radius="3px" style={{ minWidth: "4.374rem" }} >
+                            //     Computer
+                            // </Avatar>}
+                            icon = { <img src="https://www.chess.com/bundles/web/images/color-icons/computer.2318c3b4.svg" alt="computer-icon" style={{height:"38px" , width:"38px" ,borderRadius:"3px"}} /> }
+
                             description={"description"}
                         />
                     </div>
@@ -102,7 +104,7 @@ const ChessGameComputer = () => {
                             p="2px"
                             label={username}
                             icon={<Avatar radius="3px" >
-                                {username[0].toUpperCase()}
+                                {username?.at(0).toUpperCase()}
                             </Avatar>}
                             description={"description"}
                         />

frontend/src/pages/Settings/Profile.jsx

@@ -74,7 +74,7 @@ const Profile = () => {
 
 export const action = async ({ request }) => {
     const data = await request.formData();
-    let url = `${import.meta.env.VITE_BACKEND_HOST}/api/user/${getUserData().id}`
+    let url = `${import.meta.env.VITE_BACKEND_HOST}/api/user`
 
     const reqBody = {
         fname: data.get('fname'), lname: data.get('lname'), country: data.get('country'), location: data.get('location')
@@ -91,9 +91,12 @@ export const action = async ({ request }) => {
     })
     const resData = await response.json();
     console.log(resData)
-    if (!resData.success) {
-        return resData.error;
-    } else return null;
+    if (response.ok) {
+        return null;
+    } else {
+        let resData = await response.json();
+        return resData;
+    } 
 }