refactor: remove pre-compute of checkmate and draw, and rename 'Modal' property

client/src/main.tsx

@@ -32,6 +32,7 @@ const router = createBrowserRouter([
   },
 ]);
 
+// TODO: better UI
 // React's StricMode doesn't play well with how I implemented the socket connection
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <div className="absolute top-0 left-0 right-0 bottom-0 w-full h-full bg-zinc-200 -z-10">

client/src/routes/Game.tsx

@@ -68,6 +68,7 @@ const Game = () => {
         error={err?.message}
         removeError={() => setErr(undefined)}
       />
+      {/* TODO: add taken pieces */}
       <ChessBoard
         key={chess.getFEN()}
         chess={chess}
@@ -75,8 +76,9 @@ const Game = () => {
         blackPerspective={color === COLOR.BLACK}
         disabled={color !== chess.getTurn()}
       />
+      {/* TODO: add history */}
       <Show when={opponentDisconnect || chess.isGameOver()}>
-        <Modal overlay>
+        <Modal enableOverlay>
           <div className="text-center w-50 max-w-full">
             <h2 className="text-2xl mb-2">Game Over</h2>
             <h1 className="text-lg font-bold">

client/src/routes/Home.tsx

@@ -77,7 +77,7 @@ const Home = () => {
         </Modal>
         </div>
         <Show when={create}>
-          <Modal overlay>
+          <Modal enableOverlay>
             <div className="w-[20rem] max-w-full">
               <p>Select color:</p>
               <div className="flex flex-row justify-evenly">
@@ -116,7 +116,7 @@ const Home = () => {
           </Modal>
         </Show>
         <Show when={join}>
-          <Modal overlay>
+          <Modal enableOverlay>
             <div className="w-[20rem] max-w-full">
               <label htmlFor="game-id">Insert game ID: </label>
               <input

client/src/utils/Modal.tsx

@@ -1,14 +1,14 @@
 const Modal: React.FC<{
   children: React.ReactNode;
-  overlay?: boolean;
-}> = ({ children, overlay }) => {
+  enableOverlay?: boolean;
+}> = ({ children, enableOverlay }) => {
   const modal = (
     <div className="bg-gray-900 text-white p-4 rounded-lg w-fit">
       {children}
     </div>
   );
 
-  return overlay ? (
+  return enableOverlay ? (
     <div className="absolute top-0 left-0 right-0 bottom-0 w-full h-full flex justify-center items-center bg-zinc-800 bg-opacity-70">
       {modal}
     </div>

server/src/engine.ts

@@ -504,8 +504,6 @@ export default class Chess {
   private _attacks: number[] = [];
   private _history: string[] = [];
   private _enableProcessMoves = true;
-  private _checkMate = false;
-  private _draw = false;
   private _boardPositionCounter = new Map<string, number>();
 
   private constructor(
@@ -606,13 +604,6 @@ export default class Chess {
     this._computeMoves();
 
     if (!undo) this._modifyPositionCounter(false);
-
-    this._checkMate = this.isCheck() && this._moves.length === 0;
-    this._draw =
-      this._halfMoves >= 100 || // 50 moves per side = 100 half moves
-      this.isStalemate() ||
-      this.isInsufficientMaterial() ||
-      this.isThreefoldRepetition();
   }
 
   private static _load(fen: string, enableProcessMoves: boolean) {
@@ -905,7 +896,7 @@ export default class Chess {
   }
 
   isCheckMate() {
-    return this._checkMate;
+    return this.isCheck() && this._moves.length === 0;
   }
 
   isStalemate() {
@@ -947,13 +938,17 @@ export default class Chess {
     return true;
   }
 
-  // TODO: implement
   isThreefoldRepetition() {
     return this._getPositionCounter() >= 3;
   }
 
   isDraw() {
-    return this._draw;
+    return (
+      this._halfMoves >= 100 || // 50 moves per side = 100 half moves
+      this.isStalemate() ||
+      this.isInsufficientMaterial() ||
+      this.isThreefoldRepetition()
+    );
   }
 
   isGameOver() {
@@ -1048,3 +1043,6 @@ export default class Chess {
     }
   };
 }
+
+// FIX: tests
+// TODO: add missing tests for features