60 lines
1.6 KiB
TypeScript
60 lines
1.6 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import ReviewResult from "./reviewResult";
|
|
import SelectDepth from "./selectDepth";
|
|
import SelectGameOrigin from "./selectGame/selectGameOrigin";
|
|
import { Stockfish } from "@/lib/engine/stockfish";
|
|
import { useAtomValue, useSetAtom } from "jotai";
|
|
import { boardPgnAtom, gameEvalAtom, gamePgnAtom } from "./index.state";
|
|
import { getGameFens, initPgn } from "@/lib/chess";
|
|
|
|
export default function ReviewPanelBody() {
|
|
const [engine, setEngine] = useState<Stockfish | null>(null);
|
|
const setGameEval = useSetAtom(gameEvalAtom);
|
|
const setBoardPgn = useSetAtom(boardPgnAtom);
|
|
const gamePgn = useAtomValue(gamePgnAtom);
|
|
|
|
useEffect(() => {
|
|
const engine = new Stockfish();
|
|
engine.init();
|
|
setEngine(engine);
|
|
|
|
return () => {
|
|
engine.shutdown();
|
|
};
|
|
}, []);
|
|
|
|
const handleAnalyse = async () => {
|
|
setBoardPgn(initPgn);
|
|
const gameFens = getGameFens(gamePgn);
|
|
if (engine?.isReady() && gameFens.length) {
|
|
const newGameEval = await engine.evaluateGame(gameFens);
|
|
setGameEval(newGameEval);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div id="review-panel-main">
|
|
<h1 id="review-panel-title" className="white">
|
|
📑 Game Report
|
|
</h1>
|
|
|
|
<SelectGameOrigin />
|
|
|
|
<button id="review-button" className="std-btn success-btn white">
|
|
<img src="analysis_icon.png" height="25" />
|
|
<b onClick={handleAnalyse}>Analyse</b>
|
|
</button>
|
|
|
|
<SelectDepth />
|
|
|
|
{false && <progress id="evaluation-progress-bar" max="100" />}
|
|
|
|
<b id="status-message" />
|
|
|
|
<b id="secondary-message" className="white" />
|
|
|
|
<ReviewResult />
|
|
</div>
|
|
);
|
|
}
|