improved chess board css

* Improve UI of player[computer] name. #25

* replacing computer icon in place of computer text

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,264 +5,290 @@ const { User } = require("../models/user");
 const { checkAuth } = require("../util/auth");
 const { catchAsync } = require("../util/errors");
 
+// 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;
+    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, async (req, res, next) => {
-    try {
-        let { userId } = req;
-        const user = await User.findById(userId);
-        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 });
-    } catch (err) {
-        next(err);
-    }
+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,
+    });
+  } 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 } });
-    } catch (err) {
-        next(err);
-    }
+  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,
+      },
+    });
+  } catch (err) {
+    next(err);
+  }
+});
+
+// TO BE TRIED ONCE
+// TO BE TESTED
+// delete logged in user account
+router.delete("/", checkAuth, extractUserDetails, async (req, res, next) => {
+  try {
+    let { user } = req;
+    await user.deleteOne();
+    return res.status(204).json({ message: "Account deleted succesfully" });
+  } catch (err) {
+    next(err);
+  }
 });
 
 // TO BE TESTED
-// delete the user
-router.delete("/", checkAuth, async (req, res, next) => {
+// get all friends of logged in user
+router.get(
+  "/friends",
+  checkAuth,
+  extractUserDetails,
+  async (req, res, next) => {
     try {
-        let { userId } = req;
-        let user = await User.findById(userId);
-        await user.deleteOne();
-        return res.status(204).json({ message: "Account deleted succesfully" });
+      let { user } = req;
+      let friends = await user.getFriends();
+      return res.status(200).json(friends);
     } catch (err) {
-        next(err);
+      next(err);
     }
-});
+  }
+);
 
+// TO BE TESTED
+// add a friend
+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",
+        },
+      });
+    let friendData = await User.findOne({ username: friendUsername });
+    if (friendData) {
+      if (friendData.friends.includes(user._id)) {
+        res.status(409).json({
+          error: {
+            message: "User is already added as a friend",
+            description: "User is already added as a friend",
+          },
+        });
+      } else {
+        friendData.friends.push(user._id);
+        await friendData.save();
+        user.friends.push(friendData._id);
+        await user.save();
+        res.status(201).json({});
+      }
+    } else {
+      res.status(404).json({
+        error: {
+          message: "User not found",
+          description: "username not found in DB",
+        },
+      });
+    }
+  }
+);
+
+// TO BE TESTED
+// remove a user from friends list
+router.delete(
+  "/friends",
+  checkAuth,
+  extractUserDetails,
+  catchAsync(async (req, res, next) => {
+    const { friendUsername } = req.body;
+    const { user } = req;
+
+    // Find the friend user to be removed
+    const friendData = await User.findOne({ username: friendUsername });
+    if (!friendData) {
+      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" },
+      });
+    }
+    user.friends.splice(friendIndex, 1);
+    await user.save();
+
+    // 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" },
+      });
+    }
+    friendData.friends.splice(userIndex, 1);
+    await friendData.save();
+
+    return res.json({});
+  })
+);
+
+// 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);
-    }
+  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
-// 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)
-        res.status(405).json({
-            error: { description: "Cannot add yourself as friend", message: "Cannot add this user as friends" },
-        });
-    let friendData = await User.findOne({ username: friendusername });
-    if (friendData) {
-        if (friendData.friends.includes(user._id)) {
-            res.status(409).json({
-                error: {
-                    message: "User is already added as a friend",
-                    description: "User is already added as a friend",
-                },
-            });
-        } else {
-            friendData.friends.push(user._id);
-            await friendData.save();
-            user.friends.push(friendData._id);
-            await user.save();
-            res.status(201).json({});
-        }
-    } else {
-        res.status(404).json({
-            error: { message: "User not found", description: "username not found in DB" },
-        });
-    }
+// get history of games played by logged in user
+router.get("/games", checkAuth, extractUserDetails, async (req, res, next) => {
+  try {
+    const { user } = req;
+    let games = await user.getGames();
+    if (!games) games = [];
+    return res.status(200).json(games);
+  } catch (err) {
+    next(err);
+  }
 });
 
-// TODO
-// remove a user from friends list
-router.delete(
-    "/friends/:friendid",
-    checkAuth,
-    catchAsync(async (req, res, next) => {
-        const { friendid } = req.params;
-        const { userId } = req;
-        const user = await User.findById(userId);
-
-        // Find the friend user to be removed
-        const friendData = await User.findById(friendid);
-        if (!friendData) {
-            return res.status(404).json({ error: { message: "Friend user 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" } });
-        }
-        user.friends.splice(friendIndex, 1);
-        await user.save();
-
-        // 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" } });
-        }
-        friendData.friends.splice(userIndex, 1);
-        await friendData.save();
-
-        return res.json({});
-    })
-);
-
-// =============================================================
-
 // TO BE TESTED
-// get user details
-router.get("/:userid", 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();
-        let games = await user.getGames();
-        return res.status(200).json({ id, username, email, friends, fname, lname, country, location, 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
+// get game details of a certain game played by logged in user
 router.get(
-    "/:userid/games",
-    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 });
-    })
+  "/games/:gameid",
+  checkAuth,
+  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) => {
-    const gameData = req.body;
-    const gameDoc = await Game.create(gameData);
-    return res.json({ data: gameDoc });
+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/components/Cell.jsx

@@ -36,7 +36,7 @@ const Cell = ({ cell, callbacks }) => {
     }
 
     return (
-        <Flex ref={setNodeRef} sx={theme => {
+        <Flex ref={setNodeRef} w='10vh' sx={theme => {
             let color = theme.colors.lime;
             return { backgroundColor: squareColor === 'b' ? '#769854' : '#e8edcd', aspectRatio: '1/1' }
         }} onClick={handleClick} bg={squareColor === 'w' ? "white" : "gray"} >

frontend/src/components/GameHistory.jsx

@@ -52,8 +52,8 @@ const GameHistory = () => {
     }
 
     return (
-        <div style={{ width: '100%', userSelect: 'none' }}>
-            <ScrollArea h={400} scrollbarSize={6} >
+        <div style={{ width: '600px', userSelect: 'none' }}>
+            <ScrollArea h={'640px'} scrollbarSize={6} >
                 <Flex direction='column' align='start' w='100%'>
                     {gameHistoryJSX}
                 </Flex>

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();
-                emitToSocketCallback(moveData);
-            } else {
-                dispatch({ type: MOVE_PIECE, val: { from: from, to: to, callback } }); // move piece
-                moveAudioRef.current.play();
-                console.log(moveData);
-                emitToSocketCallback(moveData);
-            }
+            dispatch({ type: MOVE_PIECE, val: { from: from, to: to, callback,playAudioCallback } });  // capture piece
+            console.log("Move:",{ from,to })
+            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/layout/MainLayout.jsx

@@ -1,95 +1,129 @@
-import React, { useContext, useState } from 'react'
+import React, { useContext, useState } from "react";
 
-import { Outlet } from 'react-router-dom'
-import { AppShell, Burger, Container, Header, MediaQuery, Navbar, Paper, Text, createStyles, useMantineTheme } from '@mantine/core'
+import { Outlet } from "react-router-dom";
+import {
+  AppShell,
+  Burger,
+  Container,
+  Header,
+  MediaQuery,
+  Navbar,
+  Paper,
+  Text,
+  createStyles,
+  useMantineTheme,
+} from "@mantine/core";
 
-import UserDataContextProvider, { UserDataContext } from '../context/user-data-context';
-import MainLoader from '../components/MainLoader';
-import NavbarLinks from '../components/NavbarLinks';
-import Logout from '../components/Logout';
+import UserDataContextProvider, {
+  UserDataContext,
+} from "../context/user-data-context";
+import MainLoader from "../components/MainLoader";
+import NavbarLinks from "../components/NavbarLinks";
+import Logout from "../components/Logout";
 
 const useStyles = createStyles(() => ({
-    body: {
-        width: '100%',
-        height: '100%'
-
-    },
-    root: {
-        width: '100%',
-        height: '100vh'
-
-    },
-    main: {
-        width: '100%',
-        height: '100vh'
-    }
-}))
+  body: {
+    width: "100%",
+    height: "100%",
+  },
+  root: {
+    width: "100%",
+    height: "100vh",
+  },
+  main: {
+    width: "100%",
+    height: "100vh",
+  },
+}));
 
 const MainLayout = () => {
-    const { classes } = useStyles();
-    const theme = useMantineTheme();
-    const [opened, setOpened] = useState(false);
-    const { isLoggedIn, errorMessage } = useContext(UserDataContext);
+  const { classes } = useStyles();
+  const theme = useMantineTheme();
+  const [opened, setOpened] = useState(false);
+  const { isLoggedIn, errorMessage } = useContext(UserDataContext);
 
-    if (!isLoggedIn) {
-        return <MainLoader errorMessage={errorMessage} />
-    }
+  if (!isLoggedIn) {
+    return <MainLoader errorMessage={errorMessage} />;
+  }
 
-    return (
-        <UserDataContextProvider>
-            <Paper>
-                <AppShell classNames={{
-                    body: classes.body,
-                    root: classes.root,
-                    main: classes.main
-                }}
-                    styles={{
-                        main: {
-                            background: theme.colorScheme === 'dark' ? '#302e2a' : theme.colors.gray[0]
-                        },
-                        body: {
-                            textAlign: 'center'
-                        }
-                    }}
-                    layout='alt'
-                    navbar={
-                        <Navbar py="md" px="0" hiddenBreakpoint="md" sx={{ backgroundColor: '#262523' }} hidden={!opened} width={{ md: 150 }}>
-                            <Navbar.Section>
-                                <Text size={30} weight={700}>Chess</Text>
-                            </Navbar.Section>
-                            <Navbar.Section grow mt="md">
-                                <NavbarLinks />
-                            </Navbar.Section>
-                            <Navbar.Section >
-                                <Logout />
-                            </Navbar.Section>
-                        </Navbar>
-                    }
-                    header={
-                        <MediaQuery largerThan="sm" styles={{ display: 'none' }}>
-                            <Header zIndex={1000} p="md">
-                                <div style={{ display: 'flex', alignItems: 'center', height: '100%' }}>
-                                    <Burger
-                                        opened={opened}
-                                        onClick={() => setOpened((o) => !o)}
-                                        size="sm"
-                                        color={theme.colors.gray[6]}
-                                        mr="xl"
-                                    />
-
-                                    <Text>Application header</Text>
-                                </div>
-                            </Header>
-                        </MediaQuery>
-                    }
+  return (
+    <UserDataContextProvider>
+      <Paper>
+        <AppShell
+          classNames={{
+            body: classes.body,
+            root: classes.root,
+            main: classes.main,
+          }}
+          styles={{
+            main: {
+              background:
+                theme.colorScheme === "dark" ? "#302e2a" : theme.colors.gray[0],
+            },
+            body: {
+              textAlign: "center",
+            },
+          }}
+          layout="alt"
+          navbar={
+            <Navbar
+              py="md"
+              px="0"
+              hiddenBreakpoint="md"
+              sx={{ backgroundColor: "#262523" }}
+              hidden={!opened}
+              width={{ md: 150 }}
+            >
+              <Navbar.Section>
+                <Text size={30} weight={700}>
+                  Chess
+                </Text>
+              </Navbar.Section>
+              <Navbar.Section grow mt="md">
+                <NavbarLinks />
+              </Navbar.Section>
+              <Navbar.Section>
+                <Logout />
+              </Navbar.Section>
+            </Navbar>
+          }
+          header={
+            <MediaQuery largerThan="sm" styles={{ display: "none" }}>
+              <Header zIndex={1000} p="md">
+                <div
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    height: "100%",
+                  }}
                 >
-                    <Container size="100%" px={{ 'md': '10px', 'lg': '30px' }} >
-                        <Outlet />
-                    </Container>
-                </AppShell>
-            </Paper>
-        </UserDataContextProvider>
-    );
-}
+                  <Burger
+                    opened={opened}
+                    onClick={() => setOpened((o) => !o)}
+                    size="sm"
+                    color={theme.colors.gray[6]}
+                    mr="xl"
+                  />
 
-export default MainLayout
+                  <Text>Application header</Text>
+                </div>
+              </Header>
+            </MediaQuery>
+          }
+          padding
+        >
+          <Container
+            size="100%"
+            style={{ height: "100vh" }}
+            pl={{ md: 150 }}
+            pr={{ md: 0 }}
+          >
+            <Outlet />
+          </Container>
+        </AppShell>
+      </Paper>
+    </UserDataContextProvider>
+  );
+};
+
+export default MainLayout;

frontend/src/pages/Chess/ChessBoard.jsx

@@ -67,11 +67,11 @@ const ChessBoard = ({ callbacks }) => {
     if (myColor === 'w') {
         return (
             <DndContext onDragEnd={dragEndCallback}>
-                <Flex className={classes.chessboard} sx={{ userSelect: 'none' }}>
+                <Flex h='80vh' sx={{ userSelect: 'none' }}>
                     <div>
                         {chessBoard.map((row, rowIndex) => {
                             return (
-                                <Flex className={classes.boardrow} key={rowIndex * 2}>
+                                <Flex key={rowIndex * 2}>
                                     {row.map(cell => <Cell callbacks={{ pieceClickCallback: callbacks.pieceClickCallback }} key={cell.square} cell={cell} />)}
                                 </Flex>
                             )
@@ -83,11 +83,11 @@ const ChessBoard = ({ callbacks }) => {
     } else {
         return (
             <DndContext onDragEnd={dragEndCallback}>
-                <Flex className={classes.chessboard}>
+                <Flex h='80vh' sx={{userSelect:'none'}}>
                     <div>
                         {chessBoard.map((row, rowIndex) => {
                             return (
-                                <Flex className={classes.boardrow} key={rowIndex * 2}>
+                                <Flex key={rowIndex * 2}>
                                     {row.map(cell => <Cell callbacks={{ pieceClickCallback: callbacks.pieceClickCallback }} key={cell.square} cell={cell} />).reverse()}
                                 </Flex>
                             )

frontend/src/pages/Play/ChallengeFriend.jsx

@@ -13,12 +13,13 @@ const ChallengeFriend = () => {
 
     return (
         <Card
-            maw={450} sx={{
-                width: '100%',
-                height: '600px',
+            sx={{
+                width: '600px',
+                height: '80%',
                 textAlign: 'center',
                 backgroundColor: '#262523'
             }}
+            px='20px'
         >
             <Form action={`/play/friend/${friend_username}`} method='POST'>
                 <Flex align="center" direction="column" justify="center" gap="xs" my="lg">

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, () => {
@@ -70,15 +70,17 @@ const ChessGameComputer = () => {
                 <Button mx='md' color='lime' onClick={modalFunctions.close}>OK</Button>
             </Modal>
             <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' >
+                <Flex gap="xs" justify='center' h='100vh' align='start' wrap='nowrap' direction='column' >
                     <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                         <NavLink
                             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,16 +104,16 @@ const ChessGameComputer = () => {
                             p="2px"
                             label={username}
                             icon={<Avatar radius="3px" >
-                                {username[0].toUpperCase()}
+                                {username?.at(0).toUpperCase()}
                             </Avatar>}
                             description={"description"}
                         />
                     </div>
                 </Flex>
                 <MediaQuery smallerThan="lg" styles={{ display: 'none' }}>
-                    <Flex maw={450} sx={{
+                    <Flex maw={600} sx={{
                         width: '100%',
-                        height: '100%',
+                        height: '840px',
                         textAlign: 'center',
                         borderRadius: '10px',
                         backgroundColor: '#272623'

frontend/src/pages/Play/ChessGameMultiplayer.jsx

@@ -109,11 +109,10 @@ const ChessGameMultiplayer = () => {
                 <Button color='lime' onClick={exitGame}>Go back</Button>
                 <Button mx='md' color='lime' onClick={modalFunctions.close}>OK</Button>
             </Modal>
-            <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' >
-                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+            <Flex gap="xl" justify='center' align='center' wrap='nowrap' mt={{ base: '50px', sm: '0px' }} direction={{ base: 'column', lg: 'row' }}>
+                <Flex gap="xs" justify='center' h='100vh' align='start' wrap='nowrap' direction='column' >
+                    <div style={{ width:"100%", height:'6vh', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                         <NavLink
-                            style={{ width: "500px" }}
                             p="2px"
                             label={isWaiting ? "Waiting for opponent..." : opponent}
                             icon={<Avatar radius="3px" >
@@ -125,19 +124,19 @@ const ChessGameMultiplayer = () => {
                     </div>
                     {
                         // TODO: handle isWaiting state
-                        false ?
-                            <>
-                                <MediaQuery smallerThan="sm" styles={{ display: 'none' }}>
-                                    <Image width={600} miw={480} src="/src/assets/images/chess_board.png" />
-                                </MediaQuery>
-                                <MediaQuery largerThan="sm" styles={{ display: 'none' }}>
-                                    <Image width="100%" maw={540} src="/src/assets/images/chess_board.png" />
-                                </MediaQuery>
-                            </>
-                            :
-                            <ChessBoard callbacks={{ pieceDropCallback, pieceClickCallback }} />
+                        // false ?
+                        //     <>
+                        //         <MediaQuery smallerThan="sm" styles={{ display: 'none' }}>
+                        //             <Image width={600} miw={480} src="/src/assets/images/chess_board.png" />
+                        //         </MediaQuery>
+                        //         <MediaQuery largerThan="sm" styles={{ display: 'none' }}>
+                        //             <Image width="100%" maw={540} src="/src/assets/images/chess_board.png" />
+                        //         </MediaQuery>
+                        //     </>
+                        //     :
+                        <ChessBoard callbacks={{ pieceDropCallback, pieceClickCallback }} />
                     }
-                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                    <div style={{ width:"100%", height:'6vh', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                         <NavLink
                             style={{ width: "500px" }}
                             p="2px"
@@ -151,9 +150,9 @@ const ChessGameMultiplayer = () => {
                     </div>
                 </Flex>
                 <MediaQuery smallerThan="lg" styles={{ display: 'none' }}>
-                    <Flex maw={450} sx={{
+                    <Flex maw={600} sx={{
                         width: '100%',
-                        height: '100%',
+                        height: '840px',
                         textAlign: 'center',
                         borderRadius: '10px',
                         backgroundColor: '#272623'

frontend/src/pages/Play/Computer.jsx

@@ -6,13 +6,14 @@ const Computer = () => {
   
   return (
     <Card
-      maw={450}
+      maw={600}
       sx={{
         width: "100%",
-        height: "600px",
+        height: "75vh",
         textAlign: "center",
         backgroundColor: "#262523",
       }}
+      p={'30px'}
     >
       <Flex align="center" justify="center" gap="xs" my="lg">
         <Image

frontend/src/pages/Play/Layout.jsx

@@ -9,8 +9,8 @@ const Layout = () => {
     const user = getUserData();
     let username = user.username;
     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' >
+        <Flex h='100vh' justify='center' align='center' wrap='nowrap' mt={{ base: '50px', sm: '0px' }} direction={{ base: 'column', lg: 'row' }}>
+            <Flex gap="xs" h={'95vh'} justify='center' align='start' wrap='nowrap' direction='column' >
                 <NavLink
                     p="2px"
                     label={"opponent"}
@@ -18,7 +18,7 @@ const Layout = () => {
                     description={"description"}
                 />
                 <MediaQuery smallerThan="sm" styles={{ display: 'none' }}>
-                    <img draggable={false} width={600} miw={480} src="/src/assets/images/chess_board.png" />
+                    <img draggable={false} height={'100%'} style={{aspectRatio:'1'}} miw={480} src="/src/assets/images/chess_board.png" />
                 </MediaQuery>
                 <MediaQuery largerThan="sm" styles={{ display: 'none' }}>
                     <img draggable={false} width="100%" maw={540} src="/src/assets/images/chess_board.png" />

frontend/src/pages/Play/Play.jsx

@@ -6,13 +6,13 @@ import { Card, Flex, Image, NavLink, Title } from '@mantine/core'
 
 const Play = () => {
     return (
-        <Card maw={450} sx={{
-            width: '100%',
-            height: '600px',
+        <Card sx={{
+            width: '540px',
+            height: '75%',
             textAlign: 'center',
             backgroundColor: '#262523'
         }}>
-            <Flex gap="5px" px="20px" justify='center' align='center' wrap='nowrap' direction='column'>
+            <Flex gap="15px" px="20px" justify='center' align='center' wrap='nowrap' direction='column'>
                 <Title order={2} >Play Chess</Title>
                 <Image my="md" withPlaceholder width={200} height={120} src={null} />
                 {
@@ -32,6 +32,7 @@ const CardItem = ({ label, description, src, to }) => {
             icon={<Image src={src} width={50} />}
             description={description}
             sx={{ backgroundColor: '#1f1f1a', borderRadius: '5px' }}
+            p='20px'
         />
     )
 }

frontend/src/pages/Play/PlayFriend.jsx

@@ -22,12 +22,13 @@ const PlayFriend = () => {
                 </div>
             </Modal>
             <Card
-                maw={450} sx={{
-                    width: '100%',
-                    height: '600px',
+                sx={{
+                    width: '600px',
+                    height: '90%',
                     textAlign: 'center',
                     backgroundColor: '#262523'
                 }}
+                px='30px'
             >
                 <Flex align="center" justify="center" gap="xs" my="lg">
                     <Image width="30px" src="https://www.chess.com/bundles/web/images/color-icons/handshake.fb30f50b.svg" />

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;
+    } 
 }