feat : add color to line evaluation

This commit is contained in:
GuillaumeSD
2024-07-20 22:18:36 +02:00
parent f1dfc659d3
commit 02eb959cc8
6 changed files with 77 additions and 18 deletions

View File

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

5
.prettierrc Normal file
View File

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

57
package-lock.json generated
View File

@@ -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",
"resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-4.2.1.tgz",
"integrity": "sha512-f/0rXLXUt0oFYs8ra4w49wYZBG5GKZpAYsJSm6rnYL5uVDjd+zowwMwVZHnAjf4edNrKpCDYfXDgmRE/Ak7QyQ==",
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.2.1.tgz",
"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",
"prettier": ">=2.0.0"
"@types/eslint": ">=8.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",

View File

@@ -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"
}
}

View File

@@ -12,11 +12,15 @@ 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;
return (
@@ -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 ? (