feat : add color to line evaluation

.eslintrc.json

@@ -11,7 +11,8 @@
     "plugin:import/typescript",
     "plugin:@typescript-eslint/recommended",
     "plugin:prettier/recommended",
-    "next"
+    "next",
+    "prettier"
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {

.prettierrc

@@ -0,0 +1,5 @@
+{
+    "trailingComma": "es5",
+    "tabWidth": 2,
+    "semi": true
+}

package-lock.json

@@ -7,6 +7,7 @@
     "": {
       "name": "freechess",
       "version": "0.1.0",
+      "license": "GPL-3.0-only",
       "dependencies": {
         "@emotion/react": "^11.11.1",
         "@emotion/styled": "^11.11.0",
@@ -34,7 +35,7 @@
         "eslint-config-next": "13.4.5",
         "eslint-config-prettier": "^8.8.0",
         "eslint-plugin-import": "^2.27.5",
-        "eslint-plugin-prettier": "^4.2.1",
+        "eslint-plugin-prettier": "^5.0.0",
         "typescript": "5.1.3"
       }
     },
@@ -1587,6 +1588,19 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@pkgr/core": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.1.1.tgz",
+      "integrity": "sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.20.0 || ^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/unts"
+      }
+    },
     "node_modules/@popperjs/core": {
       "version": "2.11.8",
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
@@ -3085,21 +3099,31 @@
       }
     },
     "node_modules/eslint-plugin-prettier": {
-      "version": "4.2.1",
+      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-4.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.2.1.tgz",
-      "integrity": "sha512-f/0rXLXUt0oFYs8ra4w49wYZBG5GKZpAYsJSm6rnYL5uVDjd+zowwMwVZHnAjf4edNrKpCDYfXDgmRE/Ak7QyQ==",
+      "integrity": "sha512-gH3iR3g4JfF+yYPaJYkN7jEl9QbweL/YfkoRlNnuIEHEz1vHVlCmWOS+eGGiRuzHQXdJFCOTxRgvju9b8VUmrw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "prettier-linter-helpers": "^1.0.0"
+        "prettier-linter-helpers": "^1.0.0",
+        "synckit": "^0.9.1"
       },
       "engines": {
-        "node": ">=12.0.0"
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint-plugin-prettier"
       },
       "peerDependencies": {
-        "eslint": ">=7.28.0",
+        "@types/eslint": ">=8.0.0",
-        "prettier": ">=2.0.0"
+        "eslint": ">=8.0.0",
+        "eslint-config-prettier": "*",
+        "prettier": ">=3.0.0"
       },
       "peerDependenciesMeta": {
+        "@types/eslint": {
+          "optional": true
+        },
         "eslint-config-prettier": {
           "optional": true
         }
@@ -5682,6 +5706,23 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/synckit": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.9.1.tgz",
+      "integrity": "sha512-7gr8p9TQP6RAHusBOSLs46F4564ZrjV8xFmw5zCmgmhGUcw2hxsShhJ6CEiHQMgPDwAQ1fWHPM0ypc4RMAig4A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@pkgr/core": "^0.1.0",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/unts"
+      }
+    },
     "node_modules/tapable": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",

package.json

@@ -37,7 +37,7 @@
     "eslint-config-next": "13.4.5",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-prettier": "^5.0.0",
     "typescript": "5.1.3"
   }
 }

src/components/board/squareRenderer.tsx

@@ -37,8 +37,8 @@ export function getSquareRenderer({
         clickedSquares.includes(square)
           ? rightClickSquareStyle
           : fromSquare === square || toSquare === square
-          ? previousMoveSquareStyle(moveClassification)
+            ? previousMoveSquareStyle(moveClassification)
-          : undefined;
+            : undefined;
 
       const playableSquareStyle: CSSProperties | undefined =
         playableSquares.includes(square) ? playableSquareStyles : undefined;

src/sections/analysis/reviewPanelBody/lineEvaluation.tsx

@@ -12,10 +12,14 @@ export default function LineEvaluation({ line }: Props) {
   const board = useAtomValue(boardAtom);
   const lineLabel =
     line.cp !== undefined
-      ? `${line.cp / 100}`
+      ? `${line.cp > 0 ? "+" : ""}${(line.cp / 100).toFixed(2)}`
       : line.mate
-      ? `${line.mate > 0 ? "" : "-"}M${Math.abs(line.mate)}`
+        ? `${line.mate > 0 ? "+" : "-"}M${Math.abs(line.mate)}`
-      : "?";
+        : "?";
+
+  const isBlackCp =
+    (line.cp !== undefined && line.cp < 0) ||
+    (line.mate !== undefined && line.mate < 0);
 
   const showSkeleton = line.depth < 6;
 
@@ -24,11 +28,19 @@ export default function LineEvaluation({ line }: Props) {
       <Typography
         marginRight={1.5}
         marginY={0.5}
+        paddingY={0.2}
         noWrap
         overflow="visible"
-        width="3em"
+        width="3.5em"
         textAlign="center"
-        fontSize="0.9rem"
+        fontSize="0.8rem"
+        sx={{
+          backgroundColor: isBlackCp ? "black" : "white",
+          color: isBlackCp ? "white" : "black",
+        }}
+        borderRadius="5px"
+        border="1px solid #424242"
+        fontWeight="bold"
       >
         {showSkeleton ? (
           <Skeleton
@@ -45,7 +57,7 @@ export default function LineEvaluation({ line }: Props) {
 
       <Typography
         noWrap
-        maxWidth={{ xs: "15em", sm: "25em", md: "30em", lg: "25em" }}
+        maxWidth={{ xs: "12em", sm: "25em", md: "30em", lg: "25em" }}
         fontSize="0.9rem"
       >
         {showSkeleton ? (