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

feat : add piece drag hint

Browse Source
This commit is contained in:
GuillaumeSD
2024-03-19 01:56:35 +01:00
parent cd927ed6d7
commit 4864bf61f5
7 changed files with 113 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/lib/engine/uciEngine.ts
View File

@@ -90,7 +90,7 @@ export abstract class UciEngine {
return this.ready;
}
private async stopSearch(): Promise<void> {
public async stopSearch(): Promise<void> {
await this.sendCommands(["stop", "isready"], "readyok");
}
@@ -243,7 +243,7 @@ export abstract class UciEngine {
fen: string,
skillLevel: number,
depth = 16
): Promise<string> {
): Promise<string | undefined> {
this.throwErrorIfNotReady();
await this.setSkillLevel(skillLevel);
@@ -260,6 +260,6 @@ export abstract class UciEngine {
throw new Error("No move found");
}
return move;
return move === "(none)" ? undefined : move;
}
}

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

@@ -6,6 +6,7 @@ import {
boardOrientationAtom,
clickedSquaresAtom,
currentPositionAtom,
playableSquaresAtom,
showBestMoveArrowAtom,
} from "../states";
import { Arrow, Square } from "react-chessboard/dist/chessboard/types";
@@ -26,6 +27,7 @@ export default function Board() {
const { makeMove: makeBoardMove } = useChessActions(boardAtom);
const position = useAtomValue(currentPositionAtom);
const setClickedSquares = useSetAtom(clickedSquaresAtom);
const setPlayableSquares = useSetAtom(playableSquaresAtom);
const boardFen = board.fen();
@@ -51,6 +53,27 @@ export default function Board() {
}
};
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;
@@ -113,6 +136,10 @@ export default function Board() {
boxShadow: "0 2px 10px rgba(0, 0, 0, 0.5)",
}}
customSquare={SquareRenderer}
onSquareClick={handleSquareLeftClick}
onSquareRightClick={handleSquareRightClick}
onPieceDragBegin={handlePieceDragBegin}
onPieceDragEnd={handlePieceDragEnd}
/>
</Grid>

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

@@ -1,31 +1,28 @@
import {
clickedSquaresAtom,
currentPositionAtom,
playableSquaresAtom,
showPlayerMoveIconAtom,
} from "../states";
import { MoveClassification } from "@/types/enums";
import { atom, useAtom, useAtomValue } from "jotai";
import { useAtomValue } from "jotai";
import Image from "next/image";
import { CSSProperties, MouseEventHandler, forwardRef } from "react";
import { CSSProperties, forwardRef } from "react";
import { CustomSquareProps } from "react-chessboard/dist/chessboard/types";
const rightClickEventSquareAtom = atom<string | null>(null);
const SquareRenderer = forwardRef<HTMLDivElement, CustomSquareProps>(
(props, ref) => {
const { children, square, style } = props;
const showPlayerMoveIcon = useAtomValue(showPlayerMoveIconAtom);
const position = useAtomValue(currentPositionAtom);
const [clickedSquares, setClickedSquares] = useAtom(clickedSquaresAtom);
const [rightClickEventSquare, setRightClickEventSquare] = useAtom(
rightClickEventSquareAtom
);
const clickedSquares = useAtomValue(clickedSquaresAtom);
const playableSquares = useAtomValue(playableSquaresAtom);
const fromSquare = position.lastMove?.from;
const toSquare = position.lastMove?.to;
const moveClassification = position?.eval?.moveClassification;
const customSquareStyle: CSSProperties | undefined =
const highlightSquareStyle: CSSProperties | undefined =
clickedSquares.includes(square)
? {
position: "absolute",
@@ -46,37 +43,25 @@ const SquareRenderer = forwardRef<HTMLDivElement, CustomSquareProps>(
}
: undefined;
const handleSquareLeftClick: MouseEventHandler<HTMLDivElement> = () => {
setClickedSquares([]);
};
const handleSquareRightClick: MouseEventHandler<HTMLDivElement> = (
event
) => {
if (event.button !== 2) return;
if (rightClickEventSquare !== square) {
setRightClickEventSquare(null);
return;
}
setClickedSquares((prev) =>
prev.includes(square)
? prev.filter((s) => s !== square)
: [...prev, square]
);
};
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" }}
onClick={handleSquareLeftClick}
onMouseDown={(e) => e.button === 2 && setRightClickEventSquare(square)}
onMouseUp={handleSquareRightClick}
>
<div ref={ref} style={{ ...style, position: "relative" }}>
{children}
{customSquareStyle && <div style={customSquareStyle} />}
{highlightSquareStyle && <div style={highlightSquareStyle} />}
{playableSquareStyle && <div style={playableSquareStyle} />}
{moveClassification && showPlayerMoveIcon && square === toSquare && (
<Image
src={`/icons/${moveClassification}.png`}

1
src/sections/analysis/states.ts
View File

@@ -11,6 +11,7 @@ export const boardOrientationAtom = atom(true);
export const showBestMoveArrowAtom = atom(true);
export const showPlayerMoveIconAtom = atom(true);
export const clickedSquaresAtom = atom<string[]>([]);
export const playableSquaresAtom = atom<string[]>([]);
export const engineDepthAtom = atom(16);
export const engineMultiPvAtom = atom(3);

41
src/sections/play/board/index.tsx
View File

@@ -5,6 +5,7 @@ import {
clickedSquaresAtom,
engineSkillLevelAtom,
gameAtom,
playableSquaresAtom,
playerColorAtom,
} from "../states";
import { Square } from "react-chessboard/dist/chessboard/types";
@@ -24,23 +25,30 @@ export default function Board() {
const playerColor = useAtomValue(playerColorAtom);
const { makeMove: makeBoardMove } = useChessActions(gameAtom);
const setClickedSquares = useSetAtom(clickedSquaresAtom);
const setPlayableSquares = useSetAtom(playableSquaresAtom);
const engineSkillLevel = useAtomValue(engineSkillLevelAtom);
const engine = useEngine(EngineName.Stockfish16);
const gameFen = game.fen();
const turn = game.turn();
const isGameFinished = game.isGameOver();
useEffect(() => {
const playEngineMove = async () => {
if (!engine?.isReady() || turn === playerColor) return;
if (!engine?.isReady() || game.turn() === playerColor || isGameFinished) {
return;
}
const move = await engine.getEngineNextMove(
gameFen,
engineSkillLevel - 1
);
makeBoardMove(uciMoveParams(move));
if (move) makeBoardMove(uciMoveParams(move));
};
playEngineMove();
}, [engine, turn, engine, playerColor, engineSkillLevel]);
return () => {
engine?.stopSearch();
};
}, [gameFen, engine]);
useEffect(() => {
setClickedSquares([]);
@@ -70,6 +78,27 @@ export default function Board() {
return playerColor === piece[0];
};
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 = game.moves({ square, verbose: true });
setPlayableSquares(moves.map((m) => m.to));
};
const handlePieceDragEnd = () => {
setPlayableSquares([]);
};
return (
<Grid
item
@@ -103,6 +132,10 @@ export default function Board() {
}}
isDraggablePiece={isPieceDraggable}
customSquare={SquareRenderer}
onSquareClick={handleSquareLeftClick}
onSquareRightClick={handleSquareRightClick}
onPieceDragBegin={handlePieceDragBegin}
onPieceDragEnd={handlePieceDragEnd}
/>
</Grid>

60
src/sections/play/board/squareRenderer.tsx
View File

@@ -1,24 +1,20 @@
import { clickedSquaresAtom, gameAtom } from "../states";
import { atom, useAtom, useAtomValue } from "jotai";
import { CSSProperties, MouseEventHandler, forwardRef } from "react";
import { clickedSquaresAtom, gameAtom, playableSquaresAtom } from "../states";
import { useAtomValue } from "jotai";
import { CSSProperties, forwardRef } from "react";
import { CustomSquareProps } from "react-chessboard/dist/chessboard/types";
const rightClickEventSquareAtom = atom<string | null>(null);
const SquareRenderer = forwardRef<HTMLDivElement, CustomSquareProps>(
(props, ref) => {
const { children, square, style } = props;
const game = useAtomValue(gameAtom);
const [clickedSquares, setClickedSquares] = useAtom(clickedSquaresAtom);
const [rightClickEventSquare, setRightClickEventSquare] = useAtom(
rightClickEventSquareAtom
);
const clickedSquares = useAtomValue(clickedSquaresAtom);
const playableSquares = useAtomValue(playableSquaresAtom);
const lastMove = game.history({ verbose: true }).at(-1);
const fromSquare = lastMove?.from;
const toSquare = lastMove?.to;
const customSquareStyle: CSSProperties | undefined =
const highlightSquareStyle: CSSProperties | undefined =
clickedSquares.includes(square)
? {
position: "absolute",
@@ -37,37 +33,25 @@ const SquareRenderer = forwardRef<HTMLDivElement, CustomSquareProps>(
}
: undefined;
const handleSquareLeftClick: MouseEventHandler<HTMLDivElement> = () => {
setClickedSquares([]);
};
const handleSquareRightClick: MouseEventHandler<HTMLDivElement> = (
event
) => {
if (event.button !== 2) return;
if (rightClickEventSquare !== square) {
setRightClickEventSquare(null);
return;
}
setClickedSquares((prev) =>
prev.includes(square)
? prev.filter((s) => s !== square)
: [...prev, square]
);
};
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" }}
onClick={handleSquareLeftClick}
onMouseDown={(e) => e.button === 2 && setRightClickEventSquare(square)}
onMouseUp={handleSquareRightClick}
>
<div ref={ref} style={{ ...style, position: "relative" }}>
{children}
{customSquareStyle && <div style={customSquareStyle} />}
{highlightSquareStyle && <div style={highlightSquareStyle} />}
{playableSquareStyle && <div style={playableSquareStyle} />}
</div>
);
}

1
src/sections/play/states.ts
View File

@@ -7,3 +7,4 @@ export const playerColorAtom = atom<Color>(Color.White);
export const engineSkillLevelAtom = atom<number>(1);
export const clickedSquaresAtom = atom<string[]>([]);
export const playableSquaresAtom = atom<string[]>([]);