Adds transitions to computer moves.

aryann · Nov 24, 2024 · bf42be1 · bf42be1
1 parent 905498a
commit bf42be1
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 24 deletions.
diff --git a/client/index.html b/client/index.html
@@ -7,6 +7,7 @@
     <title>Chess</title>
   </head>
   <body>
+    <div class="test">hello</div>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>

diff --git a/client/src/OccupiedSquare.module.css b/client/src/OccupiedSquare.module.css
@@ -5,5 +5,4 @@
   transform: translateX(-50%) translateY(-50%);
   width: 80%;
   height: 80%;
-  transition: all 1s ease-in;
 }
diff --git a/client/src/OccupiedSquare.tsx b/client/src/OccupiedSquare.tsx
@@ -9,32 +9,11 @@ interface OccupiedSquareProps {
 }
 
 export const OccupiedSquare = (props: OccupiedSquareProps) => {
-  // const lastEngineMove = useStore(boardStore, (state) => state.lastEngineMove);
-  // const [includeTransform, setIncludeTransform] = useState(!!lastEngineMove);
-
   const { attributes, listeners, setNodeRef, transform } = useDraggable({
     id: props.square,
     data: { piece: props.piece },
   });
 
-  // useEffect(() => {
-  //   // Immediately clears the transform property on the style,
-  //   // so the transition takes effect.
-  //   setIncludeTransform(false);
-  // }, []);
-
-  // let style = {};
-  // if (
-  //   lastEngineMove &&
-  //   props.square === lastEngineMove.to &&
-  //   includeTransform
-  // ) {
-  //   // style = {
-  //   //   // transform: `translate(${lastEngineMove.translateX}px, ${lastEngineMove.translateY}px)`,
-  //   //   backgroundColor: "yellow",
-  //   // };
-  // }
-
   return (
     <div className={classes.pieceContainer}>
       {!transform && (
@@ -44,7 +23,7 @@ export const OccupiedSquare = (props: OccupiedSquareProps) => {
           {...listeners}
           {...attributes}
         >
-          <Piece piece={props.piece} />
+          <Piece {...props} />
         </div>
       )}
     </div>

diff --git a/client/src/Piece.module.css b/client/src/Piece.module.css
@@ -4,4 +4,7 @@
 
   /* Disable scrolling on mobile when moving pieces. */
   touch-action: none;
+
+  transition: transform 100ms;
+  transform: none;
 }
diff --git a/client/src/Piece.tsx b/client/src/Piece.tsx
@@ -1,17 +1,36 @@
-import { TPiece as PieceType } from "@chess/engine";
+import { TPiece as PieceType, TSquare } from "@chess/engine";
+import { useStore } from "@tanstack/react-store";
+import { useEffect, useState } from "react";
 import classes from "./Piece.module.css";
+import { boardStore } from "./stores/board";
 
 interface PieceProps {
   piece: PieceType;
+  square: TSquare;
 }
 
 export const Piece = (props: PieceProps) => {
+  const lastEngineMove = useStore(boardStore, (state) => state.lastEngineMove);
+  const [translate, setTranslate] = useState(lastEngineMove !== undefined);
+
   const isLower = props.piece.toLowerCase() == props.piece;
   const color = isLower ? "black" : "white";
 
+  useEffect(() => {
+    setTranslate(false);
+  }, []);
+
+  let style = {};
+  if (lastEngineMove && props.square == lastEngineMove.to && translate) {
+    style = {
+      transform: `translate(${lastEngineMove.translateX}px, ${lastEngineMove.translateY}px)`,
+    };
+  }
+
   return (
     <img
       className={classes.piece}
+      style={style}
       src={`/pieces/${color}/${props.piece}.svg`}
     />
   );

diff --git a/client/src/stores/board.ts b/client/src/stores/board.ts
@@ -4,12 +4,19 @@ import { WritableDraft, produce } from "immer";
 
 export const engine = new Engine();
 
+interface LastEngineMove {
+  to: TSquare;
+  translateX: number;
+  translateY: number;
+}
+
 interface TBoardStore {
   board: (TPiece | undefined)[];
   fen: string;
 
   activePiece?: TPiece;
   lastMove?: TMove;
+  lastEngineMove?: LastEngineMove;
   moves: TMove[];
 }
 
@@ -51,10 +58,22 @@ export const boardActions = {
     const computerMove = engine.generateNextMove();
     engine.move(computerMove);
 
+    const fromDiv = document.getElementById(computerMove.from);
+    const toDiv = document.getElementById(computerMove.to);
+
     setState((state) => {
       state.board = engine.current();
       state.fen = engine.fen();
       state.lastMove = computerMove;
+
+      if (fromDiv && toDiv) {
+        const fromRect = fromDiv.getBoundingClientRect();
+        const toRect = toDiv.getBoundingClientRect();
+        const translateX = fromRect.x - toRect.x;
+        const translateY = fromRect.y - toRect.y;
+
+        state.lastEngineMove = { to: computerMove.to, translateX, translateY };
+      }
     });
   },
 };