feat : add move icons to analysis panel
This commit is contained in:
@@ -1,9 +1,10 @@
|
|||||||
import { Grid2 as Grid, Typography } from "@mui/material";
|
import { Grid2 as Grid, Stack, Typography } from "@mui/material";
|
||||||
import { useAtomValue } from "jotai";
|
import { useAtomValue } from "jotai";
|
||||||
import { boardAtom, currentPositionAtom } from "../../states";
|
import { boardAtom, currentPositionAtom } from "../../states";
|
||||||
import { useMemo } from "react";
|
import { useMemo } from "react";
|
||||||
import { moveLineUciToSan } from "@/lib/chess";
|
import { moveLineUciToSan } from "@/lib/chess";
|
||||||
import { MoveClassification } from "@/types/enums";
|
import { MoveClassification } from "@/types/enums";
|
||||||
|
import Image from "next/image";
|
||||||
|
|
||||||
export default function MoveInfo() {
|
export default function MoveInfo() {
|
||||||
const position = useAtomValue(currentPositionAtom);
|
const position = useAtomValue(currentPositionAtom);
|
||||||
@@ -38,14 +39,40 @@ export default function MoveInfo() {
|
|||||||
return (
|
return (
|
||||||
<Grid container columnGap={5} justifyContent="center" size={12}>
|
<Grid container columnGap={5} justifyContent="center" size={12}>
|
||||||
{moveLabel && (
|
{moveLabel && (
|
||||||
|
<Stack direction="row" alignItems="center" spacing={1}>
|
||||||
|
{moveClassification && (
|
||||||
|
<Image
|
||||||
|
src={`/icons/${moveClassification}.png`}
|
||||||
|
alt="move-icon"
|
||||||
|
width={16}
|
||||||
|
height={16}
|
||||||
|
style={{
|
||||||
|
maxWidth: "3.5vw",
|
||||||
|
maxHeight: "3.5vw",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
<Typography align="center" fontSize="0.9rem">
|
<Typography align="center" fontSize="0.9rem">
|
||||||
{moveLabel}
|
{moveLabel}
|
||||||
</Typography>
|
</Typography>
|
||||||
|
</Stack>
|
||||||
)}
|
)}
|
||||||
{bestMoveLabel && (
|
{bestMoveLabel && (
|
||||||
|
<Stack direction="row" alignItems="center" spacing={1}>
|
||||||
|
<Image
|
||||||
|
src={`/icons/best.png`}
|
||||||
|
alt="move-icon"
|
||||||
|
width={16}
|
||||||
|
height={16}
|
||||||
|
style={{
|
||||||
|
maxWidth: "3.5vw",
|
||||||
|
maxHeight: "3.5vw",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
<Typography align="center" fontSize="0.9rem">
|
<Typography align="center" fontSize="0.9rem">
|
||||||
{bestMoveLabel}
|
{bestMoveLabel}
|
||||||
</Typography>
|
</Typography>
|
||||||
|
</Stack>
|
||||||
)}
|
)}
|
||||||
</Grid>
|
</Grid>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user