97 lines
2.6 KiB
TypeScript
97 lines
2.6 KiB
TypeScript
import { Icon } from "@iconify/react";
|
|
import { Grid, List, Typography } from "@mui/material";
|
|
import { useAtomValue } from "jotai";
|
|
import { boardAtom, engineMultiPvAtom, gameAtom } from "../states";
|
|
import LineEvaluation from "./lineEvaluation";
|
|
import { useCurrentMove } from "@/hooks/useCurrentMove";
|
|
import { LineEval } from "@/types/eval";
|
|
import { EngineName } from "@/types/enums";
|
|
import EngineSettingsButton from "@/sections/engineSettings/engineSettingsButton";
|
|
|
|
export default function ReviewPanelBody() {
|
|
const linesNumber = useAtomValue(engineMultiPvAtom);
|
|
const move = useCurrentMove(EngineName.Stockfish16);
|
|
const game = useAtomValue(gameAtom);
|
|
const board = useAtomValue(boardAtom);
|
|
|
|
const boardHistory = board.history();
|
|
const gameHistory = game.history();
|
|
|
|
const bestMove = move?.lastEval?.bestMove;
|
|
const isGameOver =
|
|
gameHistory.length > 0 && boardHistory.join() === gameHistory.join();
|
|
|
|
const linesSkeleton: LineEval[] = Array.from({ length: linesNumber }).map(
|
|
(_, i) => ({ pv: [`${i}`], depth: 0, multiPv: i + 1 })
|
|
);
|
|
|
|
const engineLines = move?.eval?.lines?.length
|
|
? move.eval.lines
|
|
: linesSkeleton;
|
|
|
|
return (
|
|
<Grid
|
|
item
|
|
container
|
|
xs={12}
|
|
justifyContent="center"
|
|
alignItems="center"
|
|
gap={1}
|
|
>
|
|
<Grid
|
|
item
|
|
container
|
|
xs={12}
|
|
justifyContent="space-between"
|
|
alignItems="center"
|
|
>
|
|
<Grid item xs={1} />
|
|
|
|
<Grid
|
|
item
|
|
container
|
|
xs
|
|
justifyContent="center"
|
|
alignItems="center"
|
|
columnGap={1}
|
|
>
|
|
<Icon
|
|
icon="pepicons-pop:star-filled-circle"
|
|
color="#27f019"
|
|
height={25}
|
|
/>
|
|
<Typography variant="h6" align="center">
|
|
Engine evaluation
|
|
</Typography>
|
|
</Grid>
|
|
|
|
<Grid item container xs={1} justifyContent="center">
|
|
<EngineSettingsButton />
|
|
</Grid>
|
|
</Grid>
|
|
|
|
{!!bestMove && (
|
|
<Grid item xs={12}>
|
|
<Typography align="center">
|
|
{`${bestMove} was the best move`}
|
|
</Typography>
|
|
</Grid>
|
|
)}
|
|
|
|
{isGameOver && (
|
|
<Grid item xs={12}>
|
|
<Typography align="center">Game is over</Typography>
|
|
</Grid>
|
|
)}
|
|
|
|
<Grid item container xs={12} justifyContent="center" alignItems="center">
|
|
<List sx={{ maxWidth: "95%" }}>
|
|
{engineLines.map((line) => (
|
|
<LineEvaluation key={line.multiPv} line={line} />
|
|
))}
|
|
</List>
|
|
</Grid>
|
|
</Grid>
|
|
);
|
|
}
|