Pbatch · Pbatch · Jan 11, 2024 · Jan 11, 2024
diff --git a/src/components/common/fenButton.tsx b/src/components/common/fenButton.tsx
@@ -0,0 +1,42 @@
+import { useState } from "react";
+import { findFen } from "../../utils/findFen";
+import { useDispatch } from 'react-redux';
+import { gameResetPgnAndFen, gameResetStart } from "../../slices/gameSlice";
+import { Color } from "chess.js";
+
+const FenButton = ({ piecesModelRef, videoRef, canvasRef, setText, cornersRef }: 
+  {piecesModelRef: any, videoRef: any, canvasRef: any, setText: any, cornersRef: any }) => {
+  const options = ["Normal", "Infer (White to move)", "Infer (Black to move)"];
+
+  const dispatch = useDispatch();
+  const [option, setOption] = useState<string>(options[0]);
+
+  const handleClick = (e: any, option: string) => {
+    e.preventDefault();
+    if (option === "Normal") {
+      dispatch(gameResetStart());
+      dispatch(gameResetPgnAndFen());
+    } else {
+      const color: Color = option.includes("White to move") ? "w" : "b";
+      findFen(piecesModelRef, videoRef, cornersRef, canvasRef, dispatch, setText, color);
+    }
+    setOption(option);
+  }
+
+  return (
+    <div className="dropdown">
+      <button className="btn btn-dark btn-sm btn-outline-light dropdown-toggle w-100" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
+        Start: {option}
+      </button>
+      <ul className="dropdown-menu" aria-labelledby="dropdownMenuButton1">
+        {options.map((option) => 
+          <li key={option}>
+            <a onClick={(e) => handleClick(e, option)} className="dropdown-item" href="#">{option}</a>
+          </li>
+        )}
+      </ul>
+    </div>
+  );
+};
+
+export default FenButton;
diff --git a/src/components/common/video.tsx b/src/components/common/video.tsx
@@ -4,22 +4,22 @@ import { CORNER_KEYS, MARKER_DIAMETER, MARKER_RADIUS } from "../../utils/constan
 import { Corners } from ".";
 import { useWindowWidth, useWindowHeight } from '@react-hook/window-size';
 import { useDispatch } from 'react-redux';
-import { cornersSelect, cornersSet } from "../../slices/cornersSlice";
+import { cornersSet } from "../../slices/cornersSlice";
 import { getMarkerXY, getXY } from "../../utils/detect";
 import { Chessboard } from 'kokopu-react';
-import { CornersDict, CornersPayload, Game, setBoolean, setStringArray } from "../../types";
+import { CornersPayload, Game, setBoolean, setStringArray } from "../../types";
 import { gameSelect } from "../../slices/gameSlice";
 
-const Video = ({ modelRef, canvasRef, videoRef, sidebarRef, playing, setPlaying, playingRef, setText, digital, webcam }: {
+const Video = ({ modelRef, canvasRef, videoRef, sidebarRef, playing, 
+  setPlaying, playingRef, setText, digital, webcam, cornersRef }: {
   modelRef: any, canvasRef: any, videoRef: any, sidebarRef: any, 
   playing: boolean, setPlaying: setBoolean, playingRef: any,
-  setText: setStringArray, digital: boolean, webcam: boolean
+  setText: setStringArray, digital: boolean, webcam: boolean,
+  cornersRef: any
 }) => {
-  const corners: CornersDict = cornersSelect();
   const game: Game = gameSelect();
 
   const displayRef: any = useRef(null);
-  const cornersRef: any = useRef(null);
   const gameRef = useRef<Game>(game);
 
   const aspectRatio = 16 / 9;
@@ -78,7 +78,7 @@ const Video = ({ modelRef, canvasRef, videoRef, sidebarRef, playing, setPlaying,
     canvasRef.current.height = videoRef.current.offsetHeight;
 
     CORNER_KEYS.forEach((key) => {
-      const xy = getXY(corners[key], oldHeight, oldWidth);
+      const xy = getXY(cornersRef.current[key], oldHeight, oldWidth);
       const payload: CornersPayload = {
         "xy": getMarkerXY(xy, canvasRef.current.height, canvasRef.current.width),
         "key": key
@@ -113,10 +113,6 @@ const Video = ({ modelRef, canvasRef, videoRef, sidebarRef, playing, setPlaying,
     updateWidthHeight();
   }, [windowWidth, windowHeight]);
 
-  useEffect(() => {
-    cornersRef.current = corners
-  }, [corners])
-
   useEffect(() => {
     if ((webcam) || (videoRef.current.src === "")) {
       return;

diff --git a/src/components/common/videoAndSidebar.tsx b/src/components/common/videoAndSidebar.tsx
@@ -2,17 +2,18 @@ import { useRef, useState, useEffect } from "react";
 import Video from "../common/video";
 import { useOutletContext } from "react-router-dom";
 import { useDispatch } from 'react-redux';
-import { cornersReset } from '../../slices/cornersSlice';
+import { cornersReset, cornersSelect } from '../../slices/cornersSlice';
 import { Container } from "../common";
 import LoadModels from "../../utils/loadModels";
-import { Context } from "../../types";
+import { Context, CornersDict } from "../../types";
 import RecordSidebar from "../record/recordSidebar";
 import UploadSidebar from "../upload/uploadSidebar";
 import { gameResetPgnAndFen } from "../../slices/gameSlice";
 
 const VideoAndSidebar = ({ webcam }: {webcam: boolean}) => {
   const context = useOutletContext<Context>();
   const dispatch = useDispatch();
+  const corners: CornersDict = cornersSelect();
 
   const [text, setText] = useState<string[]>([]);
   const [playing, setPlaying] = useState<boolean>(false);
@@ -22,11 +23,16 @@ const VideoAndSidebar = ({ webcam }: {webcam: boolean}) => {
   const playingRef = useRef<boolean>(playing);
   const canvasRef = useRef<any>(null);
   const sidebarRef = useRef<any>(null);
+  const cornersRef = useRef<CornersDict>(corners);
 
   useEffect(() => {
     playingRef.current = playing;
   }, [playing]);
 
+  useEffect(() => {
+    cornersRef.current = corners
+  }, [corners])
+
   useEffect(() => {
     LoadModels(context.piecesModelRef, context.xcornersModelRef);
     dispatch(cornersReset())
@@ -45,6 +51,7 @@ const VideoAndSidebar = ({ webcam }: {webcam: boolean}) => {
     "playing": playing,
     "text": text,
     "digital": digital,
+    "cornersRef": cornersRef
   }
   const sidebar = () => {
     if (webcam) {
@@ -56,8 +63,9 @@ const VideoAndSidebar = ({ webcam }: {webcam: boolean}) => {
   return (
     <Container>
       {sidebar()}
-      <Video modelRef={context.piecesModelRef} videoRef={videoRef} canvasRef={canvasRef} sidebarRef={sidebarRef} 
-      playing={playing} setPlaying={setPlaying} playingRef={playingRef} setText={setText} digital={digital} webcam={webcam} />
+      <Video modelRef={context.piecesModelRef} videoRef={videoRef} canvasRef={canvasRef} 
+      sidebarRef={sidebarRef} playing={playing} setPlaying={setPlaying} playingRef={playingRef} 
+      setText={setText} digital={digital} webcam={webcam} cornersRef={cornersRef} />
     </Container>
   );
 };

diff --git a/src/components/record/recordSidebar.tsx b/src/components/record/recordSidebar.tsx
@@ -1,36 +1,40 @@
 import { RecordButton, StopButton } from "./buttons";
 import { Display, CornersButton, HomeButton, PgnButton, Sidebar, DigitalButton } from "../common";
 import { setBoolean, setStringArray } from "../../types";
+import FenButton from "../common/fenButton";
 
-const RecordSidebar = ({ piecesModelRef, xcornersModelRef, videoRef, canvasRef, sidebarRef, playing, setPlaying, text, setText,
-digital, setDigital }: {
+const RecordSidebar = ({ piecesModelRef, xcornersModelRef, videoRef, canvasRef, sidebarRef, 
+  playing, setPlaying, text, setText, digital, setDigital, cornersRef }: {
   piecesModelRef: any, xcornersModelRef: any, videoRef: any, canvasRef: any, sidebarRef: any,
   playing: boolean, setPlaying: setBoolean, 
   text: string[], setText: setStringArray,
-  digital: boolean, setDigital: setBoolean
+  digital: boolean, setDigital: setBoolean,
+  cornersRef: any
 }) => {
   return (
     <Sidebar sidebarRef={sidebarRef} >
       <li className="my-1">
         <CornersButton piecesModelRef={piecesModelRef} xcornersModelRef={xcornersModelRef} videoRef={videoRef} canvasRef={canvasRef} 
         setText={setText} />
       </li>
+      <li className="my-1">
+        <FenButton piecesModelRef={piecesModelRef} videoRef={videoRef} 
+        canvasRef={canvasRef} setText={setText} cornersRef={cornersRef} />
+      </li>
       <li className="my-1">
         <div className="btn-group w-100" role="group">
           <RecordButton playing={playing} setPlaying={setPlaying} />
           <StopButton setPlaying={setPlaying} setText={setText} />
         </div>
       </li>
-      <li className="my-1">
-        <DigitalButton digital={digital} setDigital={setDigital} />
-      </li>
       <li className="border-top"></li>
       <li className="my-1">
         <Display text={text} />
       </li>
       <li className="border-top"></li>
       <li className="my-1">
         <div className="btn-group w-100" role="group">
+          <DigitalButton digital={digital} setDigital={setDigital} />
           <PgnButton setText={setText} playing={playing} />
           <HomeButton />
         </div>

diff --git a/src/components/upload/uploadSidebar.tsx b/src/components/upload/uploadSidebar.tsx
@@ -1,13 +1,15 @@
 import { VideoButton, PlayButton, RestartButton, PlaybackButtons, StopButton } from "./buttons";
 import { CornersButton, HomeButton, Display, PgnButton, Sidebar, DigitalButton } from "../common";
 import { setBoolean, setStringArray } from "../../types";
+import FenButton from "../common/fenButton";
 
-const UploadSidebar = ({ videoRef, xcornersModelRef, piecesModelRef, canvasRef, sidebarRef, text, setText,
-playing, setPlaying, digital, setDigital }: {
+const UploadSidebar = ({ videoRef, xcornersModelRef, piecesModelRef, canvasRef, 
+  sidebarRef, text, setText, playing, setPlaying, digital, setDigital, cornersRef }: {
   videoRef: any, xcornersModelRef: any, piecesModelRef: any, canvasRef: any, sidebarRef: any,
   text: string[], setText: setStringArray,
   playing: boolean, setPlaying: setBoolean,
-  digital: boolean, setDigital: setBoolean 
+  digital: boolean, setDigital: setBoolean,
+  cornersRef: any
 }) => {
   return (
     <Sidebar sidebarRef={sidebarRef}>
@@ -18,6 +20,10 @@ playing, setPlaying, digital, setDigital }: {
         <CornersButton piecesModelRef={piecesModelRef} xcornersModelRef={xcornersModelRef} 
         videoRef={videoRef} canvasRef={canvasRef} setText={setText} />
       </li>
+      <li className="my-1">
+        <FenButton piecesModelRef={piecesModelRef} videoRef={videoRef} 
+        canvasRef={canvasRef} setText={setText} cornersRef={cornersRef} />
+      </li>
       <li className="my-1">
         <div className="btn-group w-100" role="group">
           <PlayButton videoRef={videoRef} playing={playing} setPlaying={setPlaying} />
@@ -28,16 +34,14 @@ playing, setPlaying, digital, setDigital }: {
       <li className="my-1">
         <PlaybackButtons videoRef={videoRef} />
       </li>
-      <li className="my-1">
-        <DigitalButton digital={digital} setDigital={setDigital} />
-      </li>
       <li className="border-top"></li>
       <li className="my-1">
         <Display text={text} />
       </li>
       <li className="border-top"></li>
       <li className="my-1">
         <div className="btn-group w-100" role="group">
+          <DigitalButton digital={digital} setDigital={setDigital} />
           <PgnButton setText={setText} playing={playing} />
           <HomeButton />
         </div>

diff --git a/src/slices/gameSlice.tsx b/src/slices/gameSlice.tsx
@@ -23,6 +23,9 @@ const gameSlice = createSlice({
     gameResetPgnAndFen(state) {
       state.pgn = `[FEN "${state.start}"]`;
       state.fen = state.start;
+    },
+    gameResetStart(state) {
+      state.start = startingPosition;
     }
   }
 })
@@ -32,5 +35,5 @@ export const gameSelect = () => {
 }
 
 
-export const { gameSetPgnAndFen, gameSetStart, gameResetPgnAndFen } = gameSlice.actions
+export const { gameSetPgnAndFen, gameSetStart, gameResetPgnAndFen, gameResetStart } = gameSlice.actions
 export default gameSlice.reducer
diff --git a/src/utils/constants.tsx b/src/utils/constants.tsx
@@ -1,11 +1,13 @@
+import { PieceSymbol, Square } from "chess.js";
 import { CornersKey } from "../types";
 
 export const MODEL_WIDTH: number = 480;
 export const MODEL_HEIGHT: number = 288;
 export const MARKER_RADIUS: number = 25;
 export const MARKER_DIAMETER: number = 2 * MARKER_RADIUS;
 export const LABELS: string[] = ["b", "k", "n", "p", "q", "r", "B", "K", "N", "P", "Q", "R"];
-export const SQUARE_NAMES: string[] = ['a1', 'b1', 'c1', 'd1', 'e1', 'f1', 'g1', 'h1',
+export const PIECE_SYMBOLS: PieceSymbol[] = ["b", "k", "n", "p", "q", "r"];
+export const SQUARE_NAMES: Square[] = ['a1', 'b1', 'c1', 'd1', 'e1', 'f1', 'g1', 'h1',
 'a2', 'b2', 'c2', 'd2', 'e2', 'f2', 'g2', 'h2',
 'a3', 'b3', 'c3', 'd3', 'e3', 'f3', 'g3', 'h3',
 'a4', 'b4', 'c4', 'd4', 'e4', 'f4', 'g4', 'h4',

diff --git a/src/utils/detect.tsx b/src/utils/detect.tsx
@@ -6,14 +6,21 @@ export const invalidVideo = (videoRef: any) => {
     return true;
   }
 
-  // If it's uploaded video, the src must start with "blob"
-  if (videoRef.current.autoplay === false && !(videoRef.current.src.startsWith("blob"))) {
-    return true
-  }
+  if (videoRef.current.autoplay) {
+    // Record check
+    if (videoRef.current?.srcObject === null) {
+      return true;
+    }
+  } else {
+    // Upload check
+    const src = videoRef.current?.src;
+    if (src === null) {
+      return true;
+    }
 
-  // srcObject is used for recording, src is used for uploading
-  if (videoRef.current?.srcObject === null && videoRef.current?.src === null) {
-    return true;
+    if (!(src.startsWith("blob"))) {
+      return true;
+    }
   }
 
   return false;