chore: setup typesript

backend/.env.example

@@ -15,4 +15,8 @@ PORT=8080
 CHESS_ENGINE_PATH=./engine/stockfish16.exe
 
 # hostname
-HOSTNAME=http://localhost:8080
+HOSTNAME=http://localhost:8080
+# can be PROD or DEV
+# DEV - development mode
+# PROD - same as DEV but serves frontend statics files from ../frontend/dist using the / endpoint
+MODE=DEV

backend/.gitignore

@@ -1,3 +1,4 @@
 node_modules
 _test_
 .env
+engine/stockfish

backend/app.js

@@ -1,3 +1,5 @@
+const path = require("path");
+
 const express = require("express");
 const bodyParser = require("body-parser");
 const cors = require("cors");
@@ -8,6 +10,7 @@ const mongoose = require("mongoose");
 const cookieParser = require("cookie-parser");
 require("dotenv").config();
 
+const MODE = process.env.MODE || "DEV"
 const port = process.env.PORT;
 
 mongoose
@@ -45,6 +48,18 @@ app.use("/api/auth", authRoutes);
 app.use("/api/user", userRoutes);
 app.use("/api/room", roomRoutes);
 
+if (MODE=="PROD") {
+    console.log('Hello')
+    app.use(express.static('../frontend/dist'));
+    app.get("/*", (req,res,next) => {
+        try {
+            res.sendFile(path.join(__dirname,"../frontend/dist/index.html"))
+        } catch(err) {
+            next(err)
+        }
+    })
+}
+
 app.use((error, req, res, next) => {
     const status = error.status || 500;
     console.log(error);

backend/package-lock.json

@@ -77,9 +77,9 @@
       }
     },
     "node_modules/@types/estree": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.2.tgz",
-      "integrity": "sha512-VeiPZ9MMwXjO32/Xu7+OwflfmeoRwkE/qzndw42gGtgJwZopBnzy2gD//NN1+go1mADzkDcqf/KnFRSjTJ8xJA==",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
+      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
       "peer": true
     },
     "node_modules/@types/node": {

backend/package.json

@@ -4,8 +4,8 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "start": "node app.js",
-    "dev": "nodemon app.js"
+    "start": "export MODE=PROD && node app.js",
+    "dev": "export MODE=DEV && nodemon app.js"
   },
   "keywords": [],
   "author": "",

frontend/index.html

@@ -18,6 +18,6 @@
         <div
             id="main-loader"
         ></div>
-        <script type="module" src="/src/main.jsx"></script>
+        <script type="module" src="/src/main.tsx"></script>
     </body>
 </html>

frontend/package.json

@@ -26,6 +26,7 @@
         "eslint-plugin-import": "^2.27.5",
         "eslint-plugin-jsx-a11y": "^6.7.1",
         "eslint-plugin-react": "^7.33.0",
+        "framer-motion": "^11.2.3",
         "js-cookie": "^3.0.5",
         "prettier": "^3.0.0",
         "react": "^18.2.0",
@@ -39,13 +40,14 @@
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^14.0.0",
         "@testing-library/user-event": "^14.4.3",
-        "@types/react": "^18.0.37",
-        "@types/react-dom": "^18.0.11",
+        "@types/react": "^18.3.4",
+        "@types/react-dom": "^18.3.0",
         "@vitejs/plugin-react": "^4.0.0",
         "eslint-plugin-react-hooks": "^4.6.0",
         "eslint-plugin-react-refresh": "^0.3.4",
         "jest": "^29.6.1",
         "jest-environment-jsdom": "^29.6.1",
+        "typescript": "^5.5.4",
         "vite": "^4.3.9",
         "vitest": "^0.33.0"
     }

frontend/src/components/Cell.jsx

@@ -14,9 +14,10 @@ const { CHESS_MOVE, GAME_END } = SOCKET_EVENTS
 const Cell = ({ cell, callbacks }) => {
     let roomID = localStorage.getItem('roomID');
     let { square, type } = cell;
-    const { getSquareColor, isSquareMarked, handleSquareClick } = useContext(ChessGameContext)
+    const { getSquareColor, isSquareMarked, handleSquareClick, isLastMoveSquare } = useContext(ChessGameContext)
     const { isOver, setNodeRef } = useDroppable({ id: square });
     let squareColor = getSquareColor(square);
+    let historyCell = isLastMoveSquare(square);
 
     let marked = isSquareMarked(square);
     let borderColor = isOver ? '#77777744' : 'transparent';
@@ -36,9 +37,9 @@ 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' }
+            return { backgroundColor: historyCell ? '#c0cc5c' : (squareColor === 'b' ? '#769854' : '#e8edcd'), aspectRatio: '1/1' }
         }} onClick={handleClick} bg={squareColor === 'w' ? "white" : "gray"} >
             {content}
         </Flex>

frontend/src/components/GameHistory.jsx

@@ -1,9 +1,9 @@
-import React, { useContext } from 'react'
+import React, { useContext, useEffect } from 'react';
 
 import { Button, Flex, ScrollArea, Tooltip, createStyles } from '@mantine/core';
-import { IconChevronLeft, IconChevronRight } from '@tabler/icons-react'
+import { IconChevronLeft, IconChevronRight } from '@tabler/icons-react';
 
-import { ChessGameContext } from '../context/chess-game-context'
+import { ChessGameContext } from '../context/chess-game-context';
 
 const useStyles = createStyles(() => {
     return {
@@ -23,12 +23,32 @@ const useStyles = createStyles(() => {
                 backgroundColor: '#555555',
             }
         }
-    }
-})
+    };
+});
 
 const GameHistory = () => {
     let { classes } = useStyles();
-    const { gameHistory, jumpTo, goBack, goAhead } = useContext(ChessGameContext)
+    const { gameHistory, jumpTo, goBack, goAhead } = useContext(ChessGameContext);
+
+    // event listeners for keyboard keys
+    useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (event.key === 'ArrowLeft') {
+                // console.log('left arrow clicked')
+                goBack();
+            } else if (event.key === 'ArrowRight') {
+                // console.log('right arrow clicked')
+                goAhead();
+            }
+        };
+
+        window.addEventListener('keydown', handleKeyDown);
+
+        // event listener will cleanup when the component unmounts
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [goBack, goAhead]);
 
     let gameHistoryJSX = [];
     for (let i = 0; i < gameHistory.length;) {
@@ -52,8 +72,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>
@@ -71,7 +91,7 @@ const GameHistory = () => {
                 </Tooltip>
             </Flex>
         </div>
-    )
-}
+    );
+};
 
-export default GameHistory
+export default GameHistory;

frontend/src/components/MainLoader.jsx

@@ -4,7 +4,7 @@ import { createPortal } from 'react-dom'
 import { Loader, Title } from '@mantine/core'
 import PropTypes from 'prop-types';
 
-import loaderImage from '../assets/images/chess_board_loader.png'
+import loaderImage from '/assets/images/chess_board_loader.png'
 
 const MainLoader = ({ errorMessage }) => {
     return (

frontend/src/components/Piece.jsx

@@ -1,95 +1,114 @@
-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';
-import PropTypes from 'prop-types';
-
+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";
+import PropTypes from "prop-types";
+import { motion } from "framer-motion";
 const useStyles = createStyles(() => ({
-    'chess-piece': {
-        outlineStyle: 'none',
-        boxShadow: 'none',
-        borderColor: 'transparent'
-    }
+  "chess-piece": {
+    outlineStyle: "none",
+    boxShadow: "none",
+    borderColor: "transparent",
+  },
 }));
 
 const Piece = ({ cell }) => {
-    const { classes } = useStyles();
-    const { selectPiece, isSquareMarked } = useContext(ChessGameContext)
-    let { square, type, color } = cell;
-    let marked = isSquareMarked(square);
-    let logo = null;
+  const { classes } = useStyles();
+  const { selectPiece, isSquareMarked } = useContext(ChessGameContext);
+  let { square, type, color } = cell;
+  let marked = isSquareMarked(square);
+  let logo = null;
 
-    switch (type) {
-        case 'p':
-            logo = color === 'w' ? 'pawn_white' : 'pawn_black';
-            break;
-        case 'r':
-            logo = color === 'w' ? 'rook_white' : 'rook_black';
-            break;
-        case 'n':
-            logo = color === 'w' ? 'knight_white' : 'knight_black';
-            break;
-        case 'b':
-            logo = color === 'w' ? 'bishop_white' : 'bishop_black';
-            break;
-        case 'q':
-            logo = color === 'w' ? 'queen_white' : 'queen_black';
-            break;
-        case 'k':
-            logo = color === 'w' ? 'king_white' : 'king_black';
-            break;
-    }
+  switch (type) {
+    case "p":
+      logo = color === "w" ? "pawn_white" : "pawn_black";
+      break;
+    case "r":
+      logo = color === "w" ? "rook_white" : "rook_black";
+      break;
+    case "n":
+      logo = color === "w" ? "knight_white" : "knight_black";
+      break;
+    case "b":
+      logo = color === "w" ? "bishop_white" : "bishop_black";
+      break;
+    case "q":
+      logo = color === "w" ? "queen_white" : "queen_black";
+      break;
+    case "k":
+      logo = color === "w" ? "king_white" : "king_black";
+      break;
+  }
 
-    const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({
-        id: square, data: {
-            ...cell
-        }
+  const { attributes, listeners, setNodeRef, transform, isDragging } =
+    useDraggable({
+      id: square,
+      data: {
+        ...cell,
+      },
     });
 
-    let borderColor = marked ? '#77777744' : 'transparent'
+  let borderColor = marked ? "#77777744" : "transparent";
 
-    const style = transform ? {
+  const style = transform
+    ? {
         transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
-        cursor: isDragging ? 'grabbing' : 'pointer',
+        cursor: isDragging ? "grabbing" : "pointer",
         zIndex: 1000,
-        aspectRatio: '1',
-        touchAction: 'none',
-        borderRadius: '10px',
-        outline: 'none'
-    } : {
-        zIndex: 10
-    };
+        aspectRatio: "1",
+        touchAction: "none",
+        borderRadius: "10px",
+        outline: "none",
+      }
+    : {
+        zIndex: 10,
+      };
 
-    useEffect(() => {
-        if (isDragging) {
-            selectPiece(cell);
-        }
-    }, [isDragging])
-
-
-    if (logo) {
-        return (
-            <div style={{ position: 'relative', width: '100%', height: '100%' }}>
-                <div style={{ borderRadius: '50%', position: 'absolute', boxSizing: 'border-box', borderWidth: '7px', width: '100%', height: '100%', borderStyle: 'solid', borderColor }}>
-                </div>
-                <div style={{ width: '100%', height: '100%' }}>
-                    <Image classNames={{ root: classes['chess-piece'] }} ref={setNodeRef} style={style} sx={{ cursor: 'pointer' }} {...listeners} {...attributes} src={`/src/assets/images/${logo}.png`} />
-                </div>
-            </div>
-        )
-    } else {
-        return (
-            <div style={{ width: '100%' }}></div>
-        )
+  useEffect(() => {
+    if (isDragging) {
+      selectPiece(cell);
     }
-}
+  }, [isDragging]);
+
+  if (logo) {
+    return (
+      <div style={{ position: "relative", width: "100%", height: "100%" }}>
+        <div
+          style={{
+            borderRadius: "50%",
+            position: "absolute",
+            boxSizing: "border-box",
+            borderWidth: "7px",
+            width: "100%",
+            height: "100%",
+            borderStyle: "solid",
+            borderColor,
+          }}
+        ></div>
+        <motion.div style={{ width: "100%", height: "100%" }} layout>
+          <Image
+            classNames={{ root: classes["chess-piece"] }}
+            ref={setNodeRef}
+            style={style}
+            sx={{ cursor: "pointer" }}
+            {...listeners}
+            {...attributes}
+            src={`/assets/images/${logo}.png`}
+          />
+        </motion.div>
+      </div>
+    );
+  } else {
+    return <div style={{ width: "100%" }}></div>;
+  }
+};
 
 Piece.propTypes = {
-    cell: PropTypes.shape({
-        square: PropTypes.string.isRequired,
-        type: PropTypes.oneOf(['p', 'r', 'n', 'b', 'q', 'k']),
-        color: PropTypes.oneOf(['w', 'b'])
-    })
-}
+  cell: PropTypes.shape({
+    square: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(["p", "r", "n", "b", "q", "k"]),
+    color: PropTypes.oneOf(["w", "b"]),
+  }),
+};
 
-export default Piece
+export default Piece;

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

@@ -185,6 +185,16 @@ const ChessGameContextProvider = ({ children }) => {
         return moveHintsRef.current.includes(square);
     }
 
+    function isLastMoveSquare(square) {
+        
+        if (currentIndexRef.current < 0)
+            return false;
+        let [lastMove] = chessRef.current.history({verbose: true}).slice(-1);
+        if (square != lastMove.to && square!=lastMove.from)
+            return false;
+        return true;
+    }
+
     function jumpTo(index) {
         dispatch({ type: JUMP_TO, val: index })
     }
@@ -227,15 +237,15 @@ const ChessGameContextProvider = ({ children }) => {
 
     return (
         <ChessGameContext.Provider value={{
-            myColor, chess, chessBoard, moveHints, selected, handleOpponentMove, handleSquareClick, getSquareColor, isSquareMarked,
+            myColor, chess, chessBoard, moveHints, selected, handleOpponentMove, handleSquareClick, getSquareColor, isSquareMarked, isLastMoveSquare,
             selectPiece, handleDrop, gameHistory, jumpTo, getChessBoard, currentIndex, goAhead, goBack, setGameHistory,
             isTimerOn, hasGameEnded, gameEndedReason, endGame,getPieceColor
         }}>
             {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' ref={gameEndAudioRef} />
-            <audio src='/src/assets/audio/move-check.mp3' ref={checkAudioRef} />
+            <audio src='/assets/audio/move-self.mp3' ref={moveAudioRef} />
+            <audio src='/assets/audio/capture.mp3' ref={captureAudioRef} />
+            <audio src='/assets/audio/game-end.webm' ref={gameEndAudioRef} />
+            <audio src='/assets/audio/move-check.mp3' ref={checkAudioRef} />
         </ChessGameContext.Provider>
     )
 }

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/main.jsx

@@ -1,16 +0,0 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-
-import App from './App.jsx'
-import { MantineProvider } from '@mantine/styles'
-import UserDataContextProvider from './context/user-data-context.jsx'
-
-import './index.css'
-
-ReactDOM.createRoot(document.getElementById('root')).render(
-    <MantineProvider theme={{ colorScheme: 'dark', fontFamily: 'monospace', primaryColor: 'lime' }}>
-        <UserDataContextProvider>
-            <App />
-        </UserDataContextProvider>
-    </MantineProvider>
-)

frontend/src/main.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+
+import App from "./App.jsx";
+import { MantineProvider } from "@mantine/styles";
+import UserDataContextProvider from "./context/user-data-context.jsx";
+
+import "./index.css";
+
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+  <MantineProvider
+    theme={{
+      colorScheme: "dark",
+      fontFamily: "monospace",
+      primaryColor: "lime",
+    }}
+  >
+    <UserDataContextProvider>
+      <App />
+    </UserDataContextProvider>
+  </MantineProvider>
+);

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/Chess/ChessGame.jsx

@@ -128,10 +128,10 @@ const ChessGame = () => {
                         false ?
                             <>
                                 <MediaQuery smallerThan="sm" styles={{ display: 'none' }}>
-                                    <Image width={600} miw={480} src="/src/assets/images/chess_board.png" />
+                                    <Image width={600} miw={480} 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" />
+                                    <Image width="100%" maw={540} src="/assets/images/chess_board.png" />
                                 </MediaQuery>
                             </>
                             :

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

@@ -70,7 +70,7 @@ 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" }}
@@ -111,9 +111,9 @@ const ChessGameComputer = () => {
                     </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,10 +18,10 @@ 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="/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" />
+                    <img draggable={false} width="100%" maw={540} src="/assets/images/chess_board.png" />
                 </MediaQuery>
                 <NavLink
                     p="2px"

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/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

frontend/tsconfig.node.json

@@ -0,0 +1,9 @@
+{
+    "compilerOptions": {
+      "composite": true,
+      "module": "ESNext",
+      "moduleResolution": "Node",
+      "allowSyntheticDefaultImports": true
+    },
+    "include": ["vite.config.ts"]
+  }

frontend/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />