haunter/chesskit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Squashed commit of the following:

Browse Source 
commit dbb5ce37add830b04e3cb977ca5caa9ae9429001
Author: GuillaumeSD <gsd.lfny@gmail.com>
Date:   Tue Mar 26 03:07:38 2024 +0100

    feat : add move click

commit a6d1d10d452a1e556b6e2ecb1fd12ada135b96d0
Author: GuillaumeSD <gsd.lfny@gmail.com>
Date:   Tue Mar 26 01:44:49 2024 +0100

    feat : board refacto done

commit 55f7d6dbac4cb135796cf66120de613e0bf34462
Author: GuillaumeSD <gsd.lfny@gmail.com>
Date:   Sun Mar 24 04:00:35 2024 +0100

    feat : add click to move
This commit is contained in:
GuillaumeSD
2024-03-26 03:08:34 +01:00
parent 8355dbc4e8
commit cd514d90cf
16 changed files with 557 additions and 560 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
src/sections/analysis/board/evaluationBar.tsx
View File

@@ -1,102 +0,0 @@
import { Box, Grid, Typography } from "@mui/material";
import { useAtomValue } from "jotai";
import { useEffect, useState } from "react";
import {
boardAtom,
boardOrientationAtom,
currentPositionAtom,
} from "../states";
import { getEvaluationBarValue } from "@/lib/chess";
interface Props {
height: number;
}
export default function EvaluationBar({ height }: Props) {
const [evalBar, setEvalBar] = useState({
whiteBarPercentage: 50,
label: "0.0",
});
const board = useAtomValue(boardAtom);
const boardOrientation = useAtomValue(boardOrientationAtom);
const position = useAtomValue(currentPositionAtom);
const isWhiteToPlay = board.turn() === "w";
useEffect(() => {
const bestLine = position?.eval?.lines[0];
if (!position.eval || !bestLine || bestLine.depth < 6) return;
const evalBar = getEvaluationBarValue(position.eval);
setEvalBar(evalBar);
}, [position, isWhiteToPlay]);
return (
<Grid
item
container
justifyContent="center"
alignItems="center"
width="2rem"
height={height}
border="1px solid black"
borderRadius="5px"
>
<Box
sx={{
backgroundColor: boardOrientation ? "#424242" : "white",
transition: "height 1s",
}}
height={`${
boardOrientation
? 100 - evalBar.whiteBarPercentage
: evalBar.whiteBarPercentage
}%`}
width="100%"
borderRadius={
evalBar.whiteBarPercentage === 100 ? "5px" : "5px 5px 0 0"
}
>
<Typography
color={boardOrientation ? "white" : "black"}
textAlign="center"
width="100%"
>
{(evalBar.whiteBarPercentage < 50 && boardOrientation) ||
(evalBar.whiteBarPercentage >= 50 && !boardOrientation)
? evalBar.label
: ""}
</Typography>
</Box>
<Box
sx={{
backgroundColor: boardOrientation ? "white" : "#424242",
transition: "height 1s",
}}
height={`${
boardOrientation
? evalBar.whiteBarPercentage
: 100 - evalBar.whiteBarPercentage
}%`}
width={"100%"}
display="flex"
alignItems="flex-end"
borderRadius={
evalBar.whiteBarPercentage === 100 ? "5px" : "0 0 5px 5px"
}
>
<Typography
color={boardOrientation ? "black" : "white"}
textAlign="center"
width="100%"
>
{(evalBar.whiteBarPercentage >= 50 && boardOrientation) ||
(evalBar.whiteBarPercentage < 50 && !boardOrientation)
? evalBar.label
: ""}
</Typography>
</Box>
</Grid>
);
}

158
src/sections/analysis/board/index.tsx
View File

@@ -1,95 +1,24 @@
import { Grid } from "@mui/material";
import { Chessboard } from "react-chessboard";
import { useAtomValue, useSetAtom } from "jotai";
import { useAtomValue } from "jotai";
import {
boardAtom,
boardOrientationAtom,
clickedSquaresAtom,
currentPositionAtom,
playableSquaresAtom,
gameAtom,
showBestMoveArrowAtom,
showPlayerMoveIconAtom,
} from "../states";
import { Arrow, Square } from "react-chessboard/dist/chessboard/types";
import { useChessActions } from "@/hooks/useChessActions";
import { useEffect, useMemo, useRef } from "react";
import PlayerInfo from "./playerInfo";
import EvaluationBar from "./evaluationBar";
import { useMemo } from "react";
import { useScreenSize } from "@/hooks/useScreenSize";
import { MoveClassification } from "@/types/enums";
import SquareRenderer, { moveClassificationColors } from "./squareRenderer";
import { Color } from "@/types/enums";
import Board from "@/components/board";
import { useGameDatabase } from "@/hooks/useGameDatabase";
export default function Board() {
const boardRef = useRef<HTMLDivElement>(null);
export default function BoardContainer() {
const screenSize = useScreenSize();
const board = useAtomValue(boardAtom);
const boardOrientation = useAtomValue(boardOrientationAtom);
const showBestMoveArrow = useAtomValue(showBestMoveArrowAtom);
const { makeMove: makeBoardMove } = useChessActions(boardAtom);
const position = useAtomValue(currentPositionAtom);
const setClickedSquares = useSetAtom(clickedSquaresAtom);
const setPlayableSquares = useSetAtom(playableSquaresAtom);
const boardFen = board.fen();
useEffect(() => {
setClickedSquares([]);
}, [boardFen, setClickedSquares]);
const onPieceDrop = (
source: Square,
target: Square,
piece: string
): boolean => {
const result = makeBoardMove({
from: source,
to: target,
promotion: piece[1]?.toLowerCase() ?? "q",
});
return !!result;
};
const handleSquareLeftClick = () => {
setClickedSquares([]);
};
const handleSquareRightClick = (square: Square) => {
setClickedSquares((prev) =>
prev.includes(square)
? prev.filter((s) => s !== square)
: [...prev, square]
);
};
const handlePieceDragBegin = (_: string, square: Square) => {
const moves = board.moves({ square, verbose: true });
setPlayableSquares(moves.map((m) => m.to));
};
const handlePieceDragEnd = () => {
setPlayableSquares([]);
};
const customArrows: Arrow[] = useMemo(() => {
const bestMove = position?.lastEval?.bestMove;
const moveClassification = position?.eval?.moveClassification;
if (
bestMove &&
showBestMoveArrow &&
moveClassification !== MoveClassification.Book
) {
const bestMoveArrow = [
bestMove.slice(0, 2),
bestMove.slice(2, 4),
moveClassificationColors[MoveClassification.Best],
] as Arrow;
return [bestMoveArrow];
}
return [];
}, [position, showBestMoveArrow]);
const { gameFromUrl } = useGameDatabase();
const game = useAtomValue(gameAtom);
const boardSize = useMemo(() => {
const width = screenSize.width;
@@ -104,55 +33,22 @@ export default function Board() {
}, [screenSize]);
return (
<Grid
item
container
justifyContent="center"
alignItems="center"
wrap="nowrap"
width={boardSize}
>
<EvaluationBar height={boardRef?.current?.offsetHeight || boardSize} />
<Grid
item
container
rowGap={1}
justifyContent="center"
alignItems="center"
paddingLeft={2}
xs
>
<PlayerInfo color={boardOrientation ? "black" : "white"} />
<Grid
item
container
justifyContent="center"
alignItems="center"
ref={boardRef}
xs={12}
>
<Chessboard
id="AnalysisBoard"
position={boardFen}
onPieceDrop={onPieceDrop}
boardOrientation={boardOrientation ? "white" : "black"}
customArrows={customArrows}
customBoardStyle={{
borderRadius: "5px",
boxShadow: "0 2px 10px rgba(0, 0, 0, 0.5)",
}}
customSquare={SquareRenderer}
onSquareClick={handleSquareLeftClick}
onSquareRightClick={handleSquareRightClick}
onPieceDragBegin={handlePieceDragBegin}
onPieceDragEnd={handlePieceDragEnd}
/>
</Grid>
<PlayerInfo color={boardOrientation ? "white" : "black"} />
</Grid>
</Grid>
<Board
id="AnalysisBoard"
boardSize={boardSize}
canPlay={true}
gameAtom={boardAtom}
whitePlayer={
gameFromUrl?.white?.name || game.header()["White"] || "White"
}
blackPlayer={
gameFromUrl?.black?.name || game.header()["Black"] || "Black"
}
boardOrientation={boardOrientation ? Color.White : Color.Black}
currentPositionAtom={currentPositionAtom}
showBestMoveArrow={showBestMoveArrow}
showPlayerMoveIconAtom={showPlayerMoveIconAtom}
showEvaluationBar={true}
/>
);
}

25
src/sections/analysis/board/playerInfo.tsx
View File

@@ -1,25 +0,0 @@
import { useGameDatabase } from "@/hooks/useGameDatabase";
import { Grid, Typography } from "@mui/material";
import { useAtomValue } from "jotai";
import { gameAtom } from "../states";
interface Props {
color: "white" | "black";
}
export default function PlayerInfo({ color }: Props) {
const { gameFromUrl } = useGameDatabase();
const game = useAtomValue(gameAtom);
const playerName =
gameFromUrl?.[color]?.name ||
game.header()[color === "white" ? "White" : "Black"];
return (
<Grid item container xs={12} justifyContent="center" alignItems="center">
<Typography variant="h6">
{playerName || (color === "white" ? "White" : "Black")}
</Typography>
</Grid>
);
}

100
src/sections/analysis/board/squareRenderer.tsx
View File

@@ -1,100 +0,0 @@
import {
clickedSquaresAtom,
currentPositionAtom,
playableSquaresAtom,
showPlayerMoveIconAtom,
} from "../states";
import { MoveClassification } from "@/types/enums";
import { useAtomValue } from "jotai";
import Image from "next/image";
import { CSSProperties, forwardRef } from "react";
import { CustomSquareProps } from "react-chessboard/dist/chessboard/types";
const SquareRenderer = forwardRef<HTMLDivElement, CustomSquareProps>(
(props, ref) => {
const { children, square, style } = props;
const showPlayerMoveIcon = useAtomValue(showPlayerMoveIconAtom);
const position = useAtomValue(currentPositionAtom);
const clickedSquares = useAtomValue(clickedSquaresAtom);
const playableSquares = useAtomValue(playableSquaresAtom);
const fromSquare = position.lastMove?.from;
const toSquare = position.lastMove?.to;
const moveClassification = position?.eval?.moveClassification;
const highlightSquareStyle: CSSProperties | undefined =
clickedSquares.includes(square)
? {
position: "absolute",
width: "100%",
height: "100%",
backgroundColor: "#eb6150",
opacity: "0.8",
}
: fromSquare === square || toSquare === square
? {
position: "absolute",
width: "100%",
height: "100%",
backgroundColor: moveClassification
? moveClassificationColors[moveClassification]
: "#fad541",
opacity: 0.5,
}
: undefined;
const playableSquareStyle: CSSProperties | undefined =
playableSquares.includes(square)
? {
position: "absolute",
width: "100%",
height: "100%",
backgroundColor: "rgba(0,0,0,.14)",
padding: "35%",
backgroundClip: "content-box",
borderRadius: "50%",
boxSizing: "border-box",
}
: undefined;
return (
<div ref={ref} style={{ ...style, position: "relative" }}>
{children}
{highlightSquareStyle && <div style={highlightSquareStyle} />}
{playableSquareStyle && <div style={playableSquareStyle} />}
{moveClassification && showPlayerMoveIcon && square === toSquare && (
<Image
src={`/icons/${moveClassification}.png`}
alt="move-icon"
width={40}
height={40}
style={{
position: "absolute",
top: "max(-15px, -1.8vw)",
right: "max(-15px, -1.8vw)",
maxWidth: "3.6vw",
maxHeight: "3.6vw",
zIndex: 100,
}}
/>
)}
</div>
);
}
);
SquareRenderer.displayName = "CustomSquareRenderer";
export default SquareRenderer;
export const moveClassificationColors: Record<MoveClassification, string> = {
[MoveClassification.Book]: "#d5a47d",
[MoveClassification.Brilliant]: "#26c2a3",
[MoveClassification.Great]: "#4099ed",
[MoveClassification.Best]: "#3aab18",
[MoveClassification.Excellent]: "#3aab18",
[MoveClassification.Good]: "#81b64c",
[MoveClassification.Inaccuracy]: "#f7c631",
[MoveClassification.Mistake]: "#ffa459",
[MoveClassification.Blunder]: "#fa412d",
};