From 6ada2441898c80fb503413fc9d6075379b5bce49 Mon Sep 17 00:00:00 2001
From: GuillaumeSD <gsd.lfny@gmail.com>
Date: Sun, 29 Dec 2024 17:51:52 +0100
Subject: [PATCH] feat : add move icons to analysis panel

---
 .../panelBody/analysisTab/moveInfo.tsx        | 41 +++++++++++++++----
 1 file changed, 34 insertions(+), 7 deletions(-)

diff --git a/src/sections/analysis/panelBody/analysisTab/moveInfo.tsx b/src/sections/analysis/panelBody/analysisTab/moveInfo.tsx
index 0f93da2..265c098 100644
--- a/src/sections/analysis/panelBody/analysisTab/moveInfo.tsx
+++ b/src/sections/analysis/panelBody/analysisTab/moveInfo.tsx
@@ -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 { boardAtom, currentPositionAtom } from "../../states";
 import { useMemo } from "react";
 import { moveLineUciToSan } from "@/lib/chess";
 import { MoveClassification } from "@/types/enums";
+import Image from "next/image";
 
 export default function MoveInfo() {
   const position = useAtomValue(currentPositionAtom);
@@ -38,14 +39,40 @@ export default function MoveInfo() {
   return (
     <Grid container columnGap={5} justifyContent="center" size={12}>
       {moveLabel && (
-        <Typography align="center" fontSize="0.9rem">
-          {moveLabel}
-        </Typography>
+        <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">
+            {moveLabel}
+          </Typography>
+        </Stack>
       )}
       {bestMoveLabel && (
-        <Typography align="center" fontSize="0.9rem">
-          {bestMoveLabel}
-        </Typography>
+        <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">
+            {bestMoveLabel}
+          </Typography>
+        </Stack>
       )}
     </Grid>
   );