Revert "improved chess board css"

This reverts commit 6a11378b44.

backend/.env.example

@@ -15,8 +15,4 @@ 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,4 +1,3 @@
 node_modules
 _test_
 .env
-engine/stockfish

backend/app.js

@@ -1,5 +1,3 @@
-const path = require("path");
-
 const express = require("express");
 const bodyParser = require("body-parser");
 const cors = require("cors");
@@ -10,7 +8,6 @@ const mongoose = require("mongoose");
 const cookieParser = require("cookie-parser");
 require("dotenv").config();
 
-const MODE = process.env.MODE || "DEV"
 const port = process.env.PORT;
 
 mongoose
@@ -48,18 +45,6 @@ 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.5",
+      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.2.tgz",
-      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
+      "integrity": "sha512-VeiPZ9MMwXjO32/Xu7+OwflfmeoRwkE/qzndw42gGtgJwZopBnzy2gD//NN1+go1mADzkDcqf/KnFRSjTJ8xJA==",
       "peer": true
     },
     "node_modules/@types/node": {

backend/package.json

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

frontend/index.html

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

frontend/package.json

@@ -26,7 +26,6 @@
         "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",
@@ -40,14 +39,13 @@
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^14.0.0",
         "@testing-library/user-event": "^14.4.3",
-        "@types/react": "^18.3.4",
+        "@types/react": "^18.0.37",
-        "@types/react-dom": "^18.3.0",
+        "@types/react-dom": "^18.0.11",
         "@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,10 +14,9 @@ const { CHESS_MOVE, GAME_END } = SOCKET_EVENTS
 const Cell = ({ cell, callbacks }) => {
     let roomID = localStorage.getItem('roomID');
     let { square, type } = cell;
-    const { getSquareColor, isSquareMarked, handleSquareClick, isLastMoveSquare } = useContext(ChessGameContext)
+    const { getSquareColor, isSquareMarked, handleSquareClick } = 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';
@@ -37,9 +36,9 @@ const Cell = ({ cell, callbacks }) => {
     }
 
     return (
-        <Flex ref={setNodeRef} w='10vh' sx={theme => {
+        <Flex ref={setNodeRef} sx={theme => {
             let color = theme.colors.lime;
-            return { backgroundColor: historyCell ? '#c0cc5c' : (squareColor === 'b' ? '#769854' : '#e8edcd'), aspectRatio: '1/1' }
+            return { backgroundColor: 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, useEffect } from 'react';
+import React, { useContext } 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,32 +23,12 @@ 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;) {
@@ -72,8 +52,8 @@ const GameHistory = () => {
     }
 
     return (
-        <div style={{ width: '600px', userSelect: 'none' }}>
+        <div style={{ width: '100%', userSelect: 'none' }}>
-            <ScrollArea h={'640px'} scrollbarSize={6} >
+            <ScrollArea h={400} scrollbarSize={6} >
                 <Flex direction='column' align='start' w='100%'>
                     {gameHistoryJSX}
                 </Flex>
@@ -91,7 +71,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,114 +1,95 @@
-import { Image, createStyles } from "@mantine/core";
+import { Image, createStyles } from '@mantine/core';
-import React, { useContext, useEffect } from "react";
+import React, { useContext, useEffect } from 'react';
-import { useDraggable } from "@dnd-kit/core";
+import { useDraggable } from '@dnd-kit/core'
-import { ChessGameContext } from "../context/chess-game-context";
+import { ChessGameContext } from '../context/chess-game-context';
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
-import { motion } from "framer-motion";
+
 const useStyles = createStyles(() => ({
-  "chess-piece": {
+    'chess-piece': {
-    outlineStyle: "none",
+        outlineStyle: 'none',
-    boxShadow: "none",
+        boxShadow: 'none',
-    borderColor: "transparent",
+        borderColor: 'transparent'
-  },
+    }
 }));
 
 const Piece = ({ cell }) => {
-  const { classes } = useStyles();
+    const { classes } = useStyles();
-  const { selectPiece, isSquareMarked } = useContext(ChessGameContext);
+    const { selectPiece, isSquareMarked } = useContext(ChessGameContext)
-  let { square, type, color } = cell;
+    let { square, type, color } = cell;
-  let marked = isSquareMarked(square);
+    let marked = isSquareMarked(square);
-  let logo = null;
+    let logo = null;
 
-  switch (type) {
+    switch (type) {
-    case "p":
+        case 'p':
-      logo = color === "w" ? "pawn_white" : "pawn_black";
+            logo = color === 'w' ? 'pawn_white' : 'pawn_black';
-      break;
+            break;
-    case "r":
+        case 'r':
-      logo = color === "w" ? "rook_white" : "rook_black";
+            logo = color === 'w' ? 'rook_white' : 'rook_black';
-      break;
+            break;
-    case "n":
+        case 'n':
-      logo = color === "w" ? "knight_white" : "knight_black";
+            logo = color === 'w' ? 'knight_white' : 'knight_black';
-      break;
+            break;
-    case "b":
+        case 'b':
-      logo = color === "w" ? "bishop_white" : "bishop_black";
+            logo = color === 'w' ? 'bishop_white' : 'bishop_black';
-      break;
+            break;
-    case "q":
+        case 'q':
-      logo = color === "w" ? "queen_white" : "queen_black";
+            logo = color === 'w' ? 'queen_white' : 'queen_black';
-      break;
+            break;
-    case "k":
+        case 'k':
-      logo = color === "w" ? "king_white" : "king_black";
+            logo = color === 'w' ? 'king_white' : 'king_black';
-      break;
+            break;
-  }
+    }
 
-  const { attributes, listeners, setNodeRef, transform, isDragging } =
+    const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({
-    useDraggable({
+        id: square, data: {
-      id: square,
+            ...cell
-      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",
+        aspectRatio: '1',
-        touchAction: "none",
+        touchAction: 'none',
-        borderRadius: "10px",
+        borderRadius: '10px',
-        outline: "none",
+        outline: 'none'
-      }
+    } : {
-    : {
+        zIndex: 10
-        zIndex: 10,
+    };
-      };
 
-  useEffect(() => {
+    useEffect(() => {
-    if (isDragging) {
+        if (isDragging) {
-      selectPiece(cell);
+            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>
+        )
     }
-  }, [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({
+    cell: PropTypes.shape({
-    square: PropTypes.string.isRequired,
+        square: PropTypes.string.isRequired,
-    type: PropTypes.oneOf(["p", "r", "n", "b", "q", "k"]),
+        type: PropTypes.oneOf(['p', 'r', 'n', 'b', 'q', 'k']),
-    color: PropTypes.oneOf(["w", "b"]),
+        color: PropTypes.oneOf(['w', 'b'])
-  }),
+    })
-};
+}
 
-export default Piece;
+export default Piece

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

@@ -185,16 +185,6 @@ 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 })
     }
@@ -237,15 +227,15 @@ const ChessGameContextProvider = ({ children }) => {
 
     return (
         <ChessGameContext.Provider value={{
-            myColor, chess, chessBoard, moveHints, selected, handleOpponentMove, handleSquareClick, getSquareColor, isSquareMarked, isLastMoveSquare,
+            myColor, chess, chessBoard, moveHints, selected, handleOpponentMove, handleSquareClick, getSquareColor, isSquareMarked,
             selectPiece, handleDrop, gameHistory, jumpTo, getChessBoard, currentIndex, goAhead, goBack, setGameHistory,
             isTimerOn, hasGameEnded, gameEndedReason, endGame,getPieceColor
         }}>
             {children}
-            <audio src='/assets/audio/move-self.mp3' ref={moveAudioRef} />
+            <audio src='/src/assets/audio/move-self.mp3' ref={moveAudioRef} />
-            <audio src='/assets/audio/capture.mp3' ref={captureAudioRef} />
+            <audio src='/src/assets/audio/capture.mp3' ref={captureAudioRef} />
-            <audio src='/assets/audio/game-end.webm' ref={gameEndAudioRef} />
+            <audio src='/src/assets/audio/game-end.webm' ref={gameEndAudioRef} />
-            <audio src='/assets/audio/move-check.mp3' ref={checkAudioRef} />
+            <audio src='/src/assets/audio/move-check.mp3' ref={checkAudioRef} />
         </ChessGameContext.Provider>
     )
 }

frontend/src/layout/MainLayout.jsx

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

@@ -0,0 +1,16 @@
+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

@@ -1,22 +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") 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 h='80vh' sx={{ userSelect: 'none' }}>
+                <Flex className={classes.chessboard} sx={{ userSelect: 'none' }}>
                     <div>
                         {chessBoard.map((row, rowIndex) => {
                             return (
-                                <Flex key={rowIndex * 2}>
+                                <Flex className={classes.boardrow} 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 h='80vh' sx={{userSelect:'none'}}>
+                <Flex className={classes.chessboard}>
                     <div>
                         {chessBoard.map((row, rowIndex) => {
                             return (
-                                <Flex key={rowIndex * 2}>
+                                <Flex className={classes.boardrow} 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="/assets/images/chess_board.png" />
+                                    <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="/assets/images/chess_board.png" />
+                                    <Image width="100%" maw={540} src="/src/assets/images/chess_board.png" />
                                 </MediaQuery>
                             </>
                             :

frontend/src/pages/Play/ChallengeFriend.jsx

@@ -13,13 +13,12 @@ const ChallengeFriend = () => {
 
     return (
         <Card
-            sx={{
+            maw={450} sx={{
-                width: '600px',
+                width: '100%',
-                height: '80%',
+                height: '600px',
                 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' h='100vh' align='start' wrap='nowrap' direction='column' >
+                <Flex gap="xs" justify='center' 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={600} sx={{
+                    <Flex maw={450} sx={{
                         width: '100%',
-                        height: '840px',
+                        height: '100%',
                         textAlign: 'center',
                         borderRadius: '10px',
                         backgroundColor: '#272623'

frontend/src/pages/Play/ChessGameMultiplayer.jsx

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

frontend/src/pages/Play/Computer.jsx

@@ -6,14 +6,13 @@ const Computer = () => {
   
   return (
     <Card
-      maw={600}
+      maw={450}
       sx={{
         width: "100%",
-        height: "75vh",
+        height: "600px",
         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 h='100vh' justify='center' align='center' wrap='nowrap' mt={{ base: '50px', sm: '0px' }} direction={{ base: 'column', lg: 'row' }}>
+        <Flex gap="xl" miw={360} 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' >
+            <Flex gap="xs" 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} height={'100%'} style={{aspectRatio:'1'}} miw={480} src="/assets/images/chess_board.png" />
+                    <img draggable={false} width={600} miw={480} src="/src/assets/images/chess_board.png" />
                 </MediaQuery>
                 <MediaQuery largerThan="sm" styles={{ display: 'none' }}>
-                    <img draggable={false} width="100%" maw={540} src="/assets/images/chess_board.png" />
+                    <img draggable={false} width="100%" maw={540} src="/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 sx={{
+        <Card maw={450} sx={{
-            width: '540px',
+            width: '100%',
-            height: '75%',
+            height: '600px',
             textAlign: 'center',
             backgroundColor: '#262523'
         }}>
-            <Flex gap="15px" px="20px" justify='center' align='center' wrap='nowrap' direction='column'>
+            <Flex gap="5px" 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,7 +32,6 @@ 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,13 +22,12 @@ const PlayFriend = () => {
                 </div>
             </Modal>
             <Card
-                sx={{
+                maw={450} sx={{
-                    width: '600px',
+                    width: '100%',
-                    height: '90%',
+                    height: '600px',
                     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

@@ -1,21 +0,0 @@
-{
-  "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

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

frontend/vite-env.d.ts

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