49 lines
1.2 KiB
TypeScript
49 lines
1.2 KiB
TypeScript
import { LineEval } from "@/types/eval";
|
|
import { ListItem, Skeleton, Typography } from "@mui/material";
|
|
import { useAtomValue } from "jotai";
|
|
import { boardAtom } from "./states";
|
|
import { moveLineUciToSan } from "@/lib/chess";
|
|
|
|
interface Props {
|
|
line: LineEval;
|
|
}
|
|
|
|
export default function LineEvaluation({ line }: Props) {
|
|
const board = useAtomValue(boardAtom);
|
|
const lineLabel =
|
|
line.cp !== undefined
|
|
? `${line.cp / 100}`
|
|
: line.mate
|
|
? `Mate in ${Math.abs(line.mate)}`
|
|
: "?";
|
|
|
|
const showSkeleton = line.depth < 6;
|
|
|
|
return (
|
|
<ListItem disablePadding>
|
|
<Typography marginRight={2} marginY={0.5}>
|
|
{showSkeleton ? (
|
|
<Skeleton
|
|
width={"2em"}
|
|
variant="rounded"
|
|
animation="wave"
|
|
sx={{ color: "transparent" }}
|
|
>
|
|
placeholder
|
|
</Skeleton>
|
|
) : (
|
|
lineLabel
|
|
)}
|
|
</Typography>
|
|
|
|
<Typography>
|
|
{showSkeleton ? (
|
|
<Skeleton width={"20em"} variant="rounded" animation="wave" />
|
|
) : (
|
|
line.pv.slice(0, 10).map(moveLineUciToSan(board.fen())).join(", ")
|
|
)}
|
|
</Typography>
|
|
</ListItem>
|
|
);
|
|
}
|