improved chess board css

backend/.env.example

@@ -15,8 +15,4 @@ PORT=8080
 CHESS_ENGINE_PATH=./engine/stockfish16.exe
 
 # hostname
-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
+HOSTNAME=http://localhost:8080

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",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
-      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
+      "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==",
       "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",
-    "dev": "export MODE=DEV && nodemon app.js"
+    "start": "node 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-dom": "^18.3.0",
+        "@types/react": "^18.0.37",
+        "@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';
@@ -39,7 +38,7 @@ const Cell = ({ cell, callbacks }) => {
     return (
         <Flex ref={setNodeRef} w='10vh' 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);
-
-    // 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]);
+    const { gameHistory, jumpTo, goBack, goAhead } = useContext(ChessGameContext)
 
     let gameHistoryJSX = [];
     for (let i = 0; i < gameHistory.length;) {
@@ -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 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";
+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';
+
 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);
+    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>
+        )
     }
-  }, [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,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='/assets/audio/capture.mp3' ref={captureAudioRef} />
-            <audio src='/assets/audio/game-end.webm' ref={gameEndAudioRef} />
-            <audio src='/assets/audio/move-check.mp3' ref={checkAudioRef} />
+            <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} />
         </ChessGameContext.Provider>
     )
 }

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

@@ -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} 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="/assets/images/chess_board.png" />
+                    <img draggable={false} width="100%" maw={540} src="/src/assets/images/chess_board.png" />
                 </MediaQuery>
                 <NavLink
                     p="2px"

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" />