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",
+      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
-      "integrity": "sha512-VeiPZ9MMwXjO32/Xu7+OwflfmeoRwkE/qzndw42gGtgJwZopBnzy2gD//NN1+go1mADzkDcqf/KnFRSjTJ8xJA==",
+      "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",
+    "start": "export MODE=PROD && node app.js",
-    "dev": "nodemon 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": "^18.3.4",
-        "@types/react-dom": "^18.0.11",
+        "@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';
@@ -38,7 +39,7 @@ const Cell = ({ cell, callbacks }) => {
     return (
         <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;) {
@@ -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 { 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 } = useDraggable({
+  const { attributes, listeners, setNodeRef, transform, isDragging } =
-        id: square, data: {
+    useDraggable({
-            ...cell
+      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',
+        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,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='/assets/audio/move-self.mp3' ref={moveAudioRef} />
-            <audio src='/src/assets/audio/capture.mp3' ref={captureAudioRef} />
+            <audio src='/assets/audio/capture.mp3' ref={captureAudioRef} />
-            <audio src='/src/assets/audio/game-end.webm' ref={gameEndAudioRef} />
+            <audio src='/assets/audio/game-end.webm' ref={gameEndAudioRef} />
-            <audio src='/src/assets/audio/move-check.mp3' ref={checkAudioRef} />
+            <audio src='/assets/audio/move-check.mp3' ref={checkAudioRef} />
         </ChessGameContext.Provider>
     )
 }

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