20 |
22 | ),
23 | ],
24 | } satisfies Meta
36 |
38 | );
39 | },
40 | };
41 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2022 Ryan Gregory
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/src/Draggable.tsx:
--------------------------------------------------------------------------------
1 | import { useDraggable } from '@dnd-kit/core';
2 |
3 | import { useChessboardContext } from './ChessboardProvider';
4 | import type { DraggingPieceDataType, PieceDataType } from './types';
5 |
6 | type DraggableProps = {
7 | children: React.ReactNode;
8 | isSparePiece?: DraggingPieceDataType['isSparePiece'];
9 | pieceType: PieceDataType['pieceType'];
10 | position: DraggingPieceDataType['position'];
11 | };
12 |
13 | export function Draggable({
14 | children,
15 | isSparePiece = false,
16 | pieceType,
17 | position,
18 | }: DraggableProps) {
19 | const { allowDragging, canDragPiece } = useChessboardContext();
20 |
21 | const { setNodeRef, attributes, listeners } = useDraggable({
22 | id: position,
23 | data: {
24 | isSparePiece,
25 | pieceType,
26 | },
27 | disabled:
28 | !allowDragging ||
29 | (canDragPiece &&
30 | !canDragPiece({
31 | piece: { pieceType },
32 | isSparePiece,
33 | square: position,
34 | })),
35 | });
36 |
37 | return (
38 |
39 | {children}
40 |
41 | );
42 | }
43 |
--------------------------------------------------------------------------------
/docs/stories/options/DropSquareStyle.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 |
3 | import defaultMeta from '../basic-examples/Default.stories';
4 | import { Chessboard } from '../../../src';
5 |
6 | const meta: Meta
34 |
40 | );
41 | },
42 | };
43 |
--------------------------------------------------------------------------------
/docs/components/HintMessage.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | type HintMessageProps = {
4 | children: React.ReactNode;
5 | };
6 |
7 | export function HintMessage({ children }: HintMessageProps) {
8 | return (
9 | 37 | Drag a piece to see a custom drop square style 38 |
39 |
20 |
42 | );
43 | }
44 |
--------------------------------------------------------------------------------
/docs/stories/options/SquareRenderer.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 |
3 | import defaultMeta from '../basic-examples/Default.stories';
4 | import { Chessboard, ChessboardOptions } from '../../../src';
5 |
6 | const meta: Meta
21 |
33 |
34 |
35 |
36 |
41 | 37 | Recommendation 38 |
39 |{children}
40 |
26 | {children}
27 |
28 |
35 | {square}
36 |
37 |
38 | ),
39 | id: 'square-renderer',
40 | };
41 |
42 | // render
43 | return
37 |
43 | );
44 | },
45 | };
46 |
--------------------------------------------------------------------------------
/docs/components/WarningMessage.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | type WarningMessageProps = {
4 | children: React.ReactNode;
5 | };
6 |
7 | export function WarningMessage({ children }: WarningMessageProps) {
8 | return (
9 | 40 | Only white pieces can be dragged 41 |
42 |
20 |
42 | );
43 | }
44 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: Bug report
3 | about: Create a report to help us improve
4 | title: "[BUG] "
5 | labels: bug
6 | assignees: Clariity
7 | ---
8 |
9 | **Describe the bug**
10 | A clear and concise description of what the bug is.
11 |
12 | **To Reproduce**
13 | Provide a code sandbox link or easy to follow steps that reproduces the issue
14 |
15 | e.g. Steps to reproduce the behaviour:
16 |
17 | 1. Go to '...'
18 | 2. Click on '....'
19 | 3. Scroll down to '....'
20 | 4. See error
21 |
22 | **Expected behaviour**
23 | A clear and concise description of what you expected to happen.
24 |
25 | **Screen Recording or Screenshots**
26 | Please add a screen recording or screenshots to help explain your problem.
27 |
28 | **Environment (please complete the following information):**
29 |
30 | - Package version: [e.g. v5.0.0]
31 | - React version [e.g. v19.0.0]
32 | - Node version [e.g. v22.0.0]
33 |
34 | **Desktop (please complete the following information):**
35 |
36 | - OS: [e.g. iOS]
37 | - Browser [e.g. chrome, safari]
38 | - Version [e.g. 22]
39 |
40 | **Smartphone (please complete the following information):**
41 |
42 | - Device: [e.g. iPhone6]
43 | - OS: [e.g. iOS8.1]
44 | - Browser [e.g. stock browser, safari]
45 | - Version [e.g. 22]
46 |
47 | **Additional context**
48 | Add any other context about the problem here.
49 |
--------------------------------------------------------------------------------
/docs/stories/options/Pieces.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 |
3 | import defaultMeta from '../basic-examples/Default.stories';
4 | import { Chessboard, defaultPieces } from '../../../src';
5 | import type { PieceRenderObject } from '../../../src/types';
6 |
7 | const meta: Meta
21 |
35 |
36 |
37 |
38 |
41 | Warning
39 |{children}
40 |
35 |
43 |
44 |
50 | );
51 | },
52 | };
53 |
--------------------------------------------------------------------------------
/.github/pull_request_template.md:
--------------------------------------------------------------------------------
1 | ## Description
2 |
3 | Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context.
4 |
5 | Fixes # (issue)
6 |
7 | ## Type of change
8 |
9 | Please delete options that are not relevant.
10 |
11 | - [ ] Bug fix (non-breaking change which fixes an issue)
12 | - [ ] New feature (non-breaking change which adds functionality)
13 | - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
14 | - [ ] Documentation update
15 | - [ ] Performance improvement
16 | - [ ] Code refactoring
17 |
18 | ## How Has This Been Tested?
19 |
20 | Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce.
21 |
22 | - [ ] Test A
23 | - [ ] Test B
24 |
25 | ## Checklist:
26 |
27 | - [ ] My code follows the style guidelines of this project
28 | - [ ] I have performed a self-review of my own code
29 | - [ ] I have commented my code, particularly in hard-to-understand areas
30 | - [ ] I have made corresponding changes to the documentation
31 | - [ ] My changes generate no new warnings
32 | - [ ] I have added tests that prove my fix is effective or that my feature works
33 | - [ ] New and existing unit tests pass locally with my changes
34 | - [ ] Any dependent changes have been merged and published in downstream modules
35 |
36 | ## Screenshots (if appropriate):
37 |
38 | ## Additional context
39 |
40 | Add any other context about the pull request here.
41 |
--------------------------------------------------------------------------------
/docs/stories/options/AllowDragging.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import { useState } from 'react';
3 |
4 | import defaultMeta from '../basic-examples/Default.stories';
5 | import { Chessboard } from '../../../src';
6 |
7 | const meta: Meta47 | Toggle the checkbox to show/hide board coordinates 48 |
49 |
35 |
43 |
44 |
50 | );
51 | },
52 | };
53 |
--------------------------------------------------------------------------------
/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
1 | name: CI
2 |
3 | on:
4 | push:
5 | branches: [main, beta]
6 | pull_request:
7 | branches: [main, beta]
8 |
9 | jobs:
10 | static-test:
11 | runs-on: ubuntu-latest
12 | steps:
13 | - uses: actions/checkout@v4
14 |
15 | - name: Setup Node.js
16 | uses: actions/setup-node@v4
17 | with:
18 | node-version: '20'
19 |
20 | - name: Setup pnpm
21 | uses: pnpm/action-setup@v2
22 | with:
23 | version: 9
24 |
25 | - name: Install dependencies
26 | run: pnpm install
27 |
28 | - name: Run static analysis
29 | run: pnpm test:static
30 |
31 | semantic-release:
32 | needs: static-test
33 | if: github.event_name == 'push' && (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/beta')
34 | runs-on: ubuntu-latest
35 | steps:
36 | - uses: actions/checkout@v4
37 | with:
38 | fetch-depth: 0
39 |
40 | - name: Setup Node.js
41 | uses: actions/setup-node@v4
42 | with:
43 | node-version: '20'
44 |
45 | - name: Setup pnpm
46 | uses: pnpm/action-setup@v2
47 | with:
48 | version: 9
49 |
50 | - name: Install dependencies
51 | run: pnpm install
52 |
53 | - name: Build
54 | run: pnpm build
55 |
56 | - name: Run semantic-release
57 | run: pnpm semantic-release
58 | env:
59 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
60 | NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
61 |
--------------------------------------------------------------------------------
/docs/stories/options/AllowDragOffBoard.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import { useState } from 'react';
3 |
4 | import defaultMeta from '../basic-examples/Default.stories';
5 | import { Chessboard } from '../../../src';
6 |
7 | const meta: Meta47 | Toggle the checkbox to enable/disable piece dragging 48 |
49 |
35 |
43 |
44 |
50 | );
51 | },
52 | };
53 |
--------------------------------------------------------------------------------
/docs/stories/options/AllowDrawingArrows.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import { useState } from 'react';
3 |
4 | import defaultMeta from '../basic-examples/Default.stories';
5 | import { Chessboard } from '../../../src';
6 |
7 | const meta: Meta47 | Try dragging a piece off the board when the checkbox is unchecked 48 |
49 |
35 |
43 |
44 |
51 | );
52 | },
53 | };
54 |
--------------------------------------------------------------------------------
/docs/stories/options/AllowAutoScroll.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import { useState } from 'react';
3 |
4 | import defaultMeta from '../basic-examples/Default.stories';
5 | import { Chessboard } from '../../../src';
6 |
7 | const meta: Meta47 | Toggle the checkbox to enable/disable drawing arrows by holding right 48 | click and dragging 49 |
50 |
35 |
43 |
44 |
51 | );
52 | },
53 | };
54 |
--------------------------------------------------------------------------------
/docs/stories/options/ClearArrowsOnClick.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import { useState } from 'react';
3 |
4 | import defaultMeta from '../basic-examples/Default.stories';
5 | import { Chessboard } from '../../../src';
6 |
7 | const meta: Meta47 | Enable the checkbox and try dragging a piece near the edge of the 48 | screen to see auto-scroll behavior 49 |
50 |
40 |
48 |
49 |
56 | );
57 | },
58 | };
59 |
--------------------------------------------------------------------------------
/docs/stories/options/DragActivationDistance.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import { useState } from 'react';
3 |
4 | import defaultMeta from '../basic-examples/Default.stories';
5 | import { Chessboard } from '../../../src';
6 |
7 | const meta: Meta52 | Toggle the checkbox to enable/disable clearing arrows when clicking on 53 | a square 54 |
55 |
35 |
47 |
48 |
55 | );
56 | },
57 | };
58 |
--------------------------------------------------------------------------------
/docs/stories/options/OnMouseOutSquare.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import { useState } from 'react';
3 |
4 | import defaultMeta from '../basic-examples/Default.stories';
5 | import { Chessboard } from '../../../src';
6 | import type { SquareHandlerArgs } from '../../../src/types';
7 |
8 | const meta: Meta51 | Adjust the slider to change how far you need to drag a piece before it 52 | starts moving 53 |
54 |
43 |
55 | );
56 | },
57 | };
58 |
--------------------------------------------------------------------------------
/docs/stories/options/OnMouseOverSquare.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import { useState } from 'react';
3 |
4 | import defaultMeta from '../basic-examples/Default.stories';
5 | import { Chessboard } from '../../../src';
6 | import type { SquareHandlerArgs } from '../../../src/types';
7 |
8 | const meta: Meta
44 | Last square mouse left: {lastOutSquare}
45 |
46 | Piece in last square mouse left: {lastOutPiece} 47 |
48 |
49 | 46 | Piece in last square mouse left: {lastOutPiece} 47 |
52 | Move your mouse over and out of squares to see the mouse out events 53 |
54 |
43 |
55 | );
56 | },
57 | };
58 |
--------------------------------------------------------------------------------
/docs/stories/options/OnSquareClick.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import { useState } from 'react';
3 |
4 | import defaultMeta from '../basic-examples/Default.stories';
5 | import { Chessboard } from '../../../src';
6 | import type { SquareHandlerArgs } from '../../../src/types';
7 |
8 | const meta: Meta
44 | Last square mouse entered: {lastOverSquare}
45 |
46 | Piece in last square mouse entered: {lastOverPiece} 47 |
48 |
49 | 46 | Piece in last square mouse entered: {lastOverPiece} 47 |
52 | Move your mouse over squares to see the mouse over events 53 |
54 |
43 |
56 | );
57 | },
58 | };
59 |
--------------------------------------------------------------------------------
/docs/stories/options/BoardOrientation.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import { useState } from 'react';
3 |
4 | import defaultMeta from '../basic-examples/Default.stories';
5 | import { Chessboard } from '../../../src';
6 |
7 | const meta: Meta
46 |
49 |
50 | Clicked square: {clickedSquare || 'None'}
47 | Piece in clicked square: {clickedPiece || 'None'}
48 | 53 | Click on squares to see the click events in action 54 |
55 |
37 |
62 | );
63 | },
64 | };
65 |
--------------------------------------------------------------------------------
/docs/stories/options/OnPieceDrag.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import { useState } from 'react';
3 |
4 | import defaultMeta from '../basic-examples/Default.stories';
5 | import { Chessboard } from '../../../src';
6 | import type { PieceHandlerArgs } from '../../../src/types';
7 |
8 | const meta: Meta
38 |
46 |
54 |
55 |
56 | 59 | Toggle the radio buttons to change the board orientation 60 |
61 |
45 |
59 | );
60 | },
61 | };
62 |
--------------------------------------------------------------------------------
/docs/stories/options/OnPieceClick.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import { useState } from 'react';
3 |
4 | import defaultMeta from '../basic-examples/Default.stories';
5 | import { Chessboard } from '../../../src';
6 | import type { PieceHandlerArgs } from '../../../src/types';
7 |
8 | const meta: Meta
46 | Dragged from square: {draggedSquare}
47 |
48 | Dragged piece: {draggedPiece} 49 |
50 | Is spare piece: {isSparePiece ? 'Yes' : 'No'} 51 |
52 |
53 | 48 | Dragged piece: {draggedPiece} 49 |
50 | Is spare piece: {isSparePiece ? 'Yes' : 'No'} 51 |
56 | Start dragging pieces to see the drag start events 57 |
58 |
50 |
64 | );
65 | },
66 | };
67 |
--------------------------------------------------------------------------------
/docs/stories/options/ChessboardRows.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 |
3 | import defaultMeta from '../basic-examples/Default.stories';
4 | import { Chessboard } from '../../../src';
5 | import { PositionDataType } from '../../../src/types';
6 |
7 | const meta: Meta
51 | Clicked square: {clickedSquare}
52 |
53 | Clicked piece: {clickedPiece} 54 |
55 | Is spare piece: {isSparePiece ? 'Yes' : 'No'} 56 |
57 |
58 | 53 | Clicked piece: {clickedPiece} 54 |
55 | Is spare piece: {isSparePiece ? 'Yes' : 'No'} 56 |
61 | Click on pieces to see the click events 62 |
63 |
47 |
62 | );
63 | },
64 | };
65 |
--------------------------------------------------------------------------------
/src/modifiers.ts:
--------------------------------------------------------------------------------
1 | import { Modifier } from '@dnd-kit/core';
2 |
3 | export const preventDragOffBoard = (
4 | boardId: string,
5 | draggingPiecePosition: string,
6 | ): Modifier => {
7 | return ({ transform }) => {
8 | const boardElement =
9 | typeof document !== 'undefined'
10 | ? document.getElementById(`${boardId}-board`)
11 | : null;
12 |
13 | if (!boardElement) {
14 | return transform;
15 | }
16 |
17 | // Get the a1 square to determine square size using data attributes
18 | const boardRect = boardElement.getBoundingClientRect();
19 | const a1Square = boardElement.querySelector(
20 | '[data-column="a"][data-row="1"]',
21 | );
22 |
23 | if (!a1Square) {
24 | return transform;
25 | }
26 |
27 | const squareWidth = a1Square.getBoundingClientRect().width;
28 | const halfSquareWidth = squareWidth / 2;
29 |
30 | // Extract column and row from position (supports multi-char columns/rows)
31 | const match = draggingPiecePosition.match(/^([a-zA-Z]+)(\d+)$/);
32 | if (!match) {
33 | return transform;
34 | }
35 | const [, col, row] = match;
36 |
37 | // Get the starting position of the piece
38 | const startSquare = boardElement.querySelector(
39 | `[data-column="${col}"][data-row="${row}"]`,
40 | );
41 |
42 | if (!startSquare) {
43 | return transform;
44 | }
45 |
46 | const startSquareRect = startSquare.getBoundingClientRect();
47 | const startX = startSquareRect.left + halfSquareWidth - boardRect.left;
48 | const startY = startSquareRect.top + halfSquareWidth - boardRect.top;
49 |
50 | // Clamp so the center of the piece can go exactly half a square width outside the board
51 | const minX = -startX;
52 | const maxX = boardRect.width - startX;
53 | const minY = -startY;
54 | const maxY = boardRect.height - startY;
55 |
56 | const clampedX = Math.min(Math.max(transform.x, minX), maxX);
57 | const clampedY = Math.min(Math.max(transform.y, minY), maxY);
58 |
59 | return {
60 | ...transform,
61 | x: clampedX,
62 | y: clampedY,
63 | };
64 | };
65 | };
66 |
--------------------------------------------------------------------------------
/docs/stories/options/SquareStyles.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import { useState } from 'react';
3 |
4 | import defaultMeta from '../basic-examples/Default.stories';
5 | import { Chessboard } from '../../../src';
6 | import { SquareHandlerArgs } from '../../../src/types';
7 |
8 | const meta: Meta
50 |
55 |
56 | Right-clicked square: {rightClickedSquare || 'None'}
51 |
52 | Piece in right-clicked square: {rightClickedPiece || 'None'}
53 |
54 | 59 | Right-click on squares to see the right-click events in action 60 |
61 |
63 |
70 | );
71 | },
72 | };
73 |
--------------------------------------------------------------------------------
/docs/stories/options/OnPieceDrop.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import { useState } from 'react';
3 |
4 | import defaultMeta from '../basic-examples/Default.stories';
5 | import { Chessboard } from '../../../src';
6 | import type { PieceDropHandlerArgs } from '../../../src/types';
7 |
8 | const meta: Meta66 | Right click on a square to add or remove a red background. Left click 67 | to remove all red backgrounds. 68 |
69 |
52 |
68 | );
69 | },
70 | };
71 |
--------------------------------------------------------------------------------
/docs/stories/options/OnSquareMouseUp.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import { useState } from 'react';
3 |
4 | import defaultMeta from '../basic-examples/Default.stories';
5 | import { Chessboard } from '../../../src';
6 | import type { SquareHandlerArgs } from '../../../src/types';
7 |
8 | const meta: Meta
53 | Source square: {sourceSquare}
54 |
55 | Target square: {targetSquare} 56 |
57 | Dropped piece: {droppedPiece} 58 |
59 | Is spare piece: {isSparePiece ? 'Yes' : 'No'} 60 |
61 |
62 | 55 | Target square: {targetSquare} 56 |
57 | Dropped piece: {droppedPiece} 58 |
59 | Is spare piece: {isSparePiece ? 'Yes' : 'No'} 60 |
65 | Drag and drop pieces to see the drop events 66 |
67 |
56 |
70 | );
71 | },
72 | };
73 |
--------------------------------------------------------------------------------
/docs/stories/options/DraggingPieceStyle.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import { useState } from 'react';
3 |
4 | import defaultMeta from '../basic-examples/Default.stories';
5 | import { Chessboard } from '../../../src';
6 |
7 | const meta: Meta
59 |
63 |
64 | Mouse released in square: {mouseUpSquare || 'None'}
60 | Piece in square: {mouseUpPiece || 'None'}
61 | Button released: {buttonReleased || 'None'}
62 | 67 | Release mouse button on squares to see the mouse up events in action 68 |
69 |
38 |
73 | );
74 | },
75 | };
76 |
--------------------------------------------------------------------------------
/src/Board.tsx:
--------------------------------------------------------------------------------
1 | import { DragOverlay } from '@dnd-kit/core';
2 | import { snapCenterToCursor } from '@dnd-kit/modifiers';
3 |
4 | import { Arrows } from './Arrows';
5 | import { Draggable } from './Draggable';
6 | import { Droppable } from './Droppable';
7 | import { Piece } from './Piece';
8 | import { Square } from './Square';
9 | import { useChessboardContext } from './ChessboardProvider';
10 | import { defaultBoardStyle } from './defaults';
11 | import { preventDragOffBoard } from './modifiers';
12 |
13 | export function Board() {
14 | const {
15 | allowDragOffBoard,
16 | board,
17 | boardStyle,
18 | chessboardColumns,
19 | currentPosition,
20 | draggingPiece,
21 | id,
22 | } = useChessboardContext();
23 |
24 | return (
25 | <>
26 |
39 |
51 |
52 |
64 |
65 |
66 | 69 | Drag a piece to see the custom dragging style. Adjust the sliders to 70 | change the scale and rotation of the dragged piece. 71 |
72 |
30 | {board.map((row) =>
31 | row.map((square) => {
32 | const piece = currentPosition[square.squareId];
33 |
34 | return (
35 |
36 | {({ isOver }) => (
37 |
38 | {piece ? (
39 |
44 |
46 | ) : null}
47 |
48 | )}
49 |
50 | );
51 | }),
52 | )}
53 |
54 |
56 |
57 |
39 |
74 | );
75 | },
76 | };
77 |
--------------------------------------------------------------------------------
/docs/stories/options/OnSquareMouseDown.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import React, { useState } from 'react';
3 |
4 | import defaultMeta from '../basic-examples/Default.stories';
5 | import { Chessboard } from '../../../src';
6 | import type { SquareHandlerArgs } from '../../../src/types';
7 |
8 | const meta: Meta
40 |
52 |
53 |
65 |
66 |
67 | 70 | Drag a piece to see the ghost piece style. Adjust the sliders to 71 | change the opacity and blur of the ghost piece. 72 |
73 |
56 |
71 | );
72 | },
73 | };
74 |
--------------------------------------------------------------------------------
/docs/stories/options/Arrows.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import { useState } from 'react';
3 |
4 | import defaultMeta from '../basic-examples/Default.stories';
5 | import { Chessboard } from '../../../src';
6 |
7 | const meta: Meta
59 |
63 |
64 | Mouse last pressed in: {mouseDownSquare || 'None'}
60 | Piece in square: {mouseDownPiece || 'None'}
61 | Button pressed: {buttonPressed || 'None'}
62 | 67 | Press mouse button down on squares to see the mouse down events in 68 | action 69 |
70 |
69 |
70 |
71 |
77 | );
78 | },
79 | };
80 |
--------------------------------------------------------------------------------
/src/defaults.ts:
--------------------------------------------------------------------------------
1 | export function defaultBoardStyle(
2 | chessboardColumns: number,
3 | ): React.CSSProperties {
4 | return {
5 | display: 'grid',
6 | gridTemplateColumns: `repeat(${chessboardColumns}, 1fr)`,
7 | overflow: 'hidden',
8 | width: '100%',
9 | height: '100%',
10 | position: 'relative',
11 | };
12 | }
13 |
14 | export const defaultSquareStyle: React.CSSProperties = {
15 | aspectRatio: '1/1',
16 | display: 'flex',
17 | justifyContent: 'center',
18 | alignItems: 'center',
19 | position: 'relative',
20 | };
21 |
22 | export const defaultDarkSquareStyle: React.CSSProperties = {
23 | backgroundColor: '#B58863',
24 | };
25 |
26 | export const defaultLightSquareStyle: React.CSSProperties = {
27 | backgroundColor: '#F0D9B5',
28 | };
29 |
30 | export const defaultDropSquareStyle: React.CSSProperties = {
31 | boxShadow: 'inset 0px 0px 0px 1px black',
32 | };
33 |
34 | export const defaultDarkSquareNotationStyle: React.CSSProperties = {
35 | color: '#F0D9B5',
36 | };
37 |
38 | export const defaultLightSquareNotationStyle: React.CSSProperties = {
39 | color: '#B58863',
40 | };
41 |
42 | export const defaultAlphaNotationStyle: React.CSSProperties = {
43 | fontSize: '13px',
44 | position: 'absolute',
45 | bottom: 1,
46 | right: 4,
47 | userSelect: 'none',
48 | };
49 |
50 | export const defaultNumericNotationStyle: React.CSSProperties = {
51 | fontSize: '13px',
52 | position: 'absolute',
53 | top: 2,
54 | left: 2,
55 | userSelect: 'none',
56 | };
57 |
58 | export const defaultDraggingPieceStyle: React.CSSProperties = {
59 | transform: 'scale(1.2)',
60 | };
61 |
62 | export const defaultDraggingPieceGhostStyle: React.CSSProperties = {
63 | opacity: 0.5,
64 | };
65 |
66 | export const defaultArrowOptions = {
67 | color: '#ffaa00', // color if no modifiers are held down when drawing an arrow
68 | secondaryColor: '#4caf50', // color if shift is held down when drawing an arrow
69 | tertiaryColor: '#f44336', // color if control is held down when drawing an arrow
70 | arrowLengthReducerDenominator: 8, // the lower the denominator, the greater the arrow length reduction (e.g. 8 = 1/8 of a square width removed, 4 = 1/4 of a square width removed)
71 | sameTargetArrowLengthReducerDenominator: 4, // as above but for arrows targeting the same square (a greater reduction is used to avoid overlaps)
72 | arrowWidthDenominator: 5, // the lower the denominator, the greater the arrow width (e.g. 5 = 1/5 of a square width, 10 = 1/10 of a square width)
73 | activeArrowWidthMultiplier: 0.9, // the multiplier for the arrow width when it is being drawn
74 | opacity: 0.65, // opacity of arrow when not being drawn
75 | activeOpacity: 0.5, // opacity of arrow when it is being drawn
76 | };
77 |
--------------------------------------------------------------------------------
/docs/stories/basic-examples/PlayVsRandom.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import { Chess } from 'chess.js';
3 | import { useState, useRef } from 'react';
4 |
5 | import defaultMeta from './Default.stories';
6 | import { Chessboard, PieceDropHandlerArgs } from '../../../src';
7 |
8 | const meta: Meta74 | Click the button to generate 3 random arrows on the board. 75 |
76 |
90 |
93 |
101 |
109 | );
110 | },
111 | };
112 |
--------------------------------------------------------------------------------
/docs/stories/options/ShowAnimations.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import { useState } from 'react';
3 |
4 | import defaultMeta from '../basic-examples/Default.stories';
5 | import { Chessboard } from '../../../src';
6 |
7 | const meta: Meta{position}
102 | 103 |106 | Click on the button to generate a random FEN position 107 |
108 |
91 |
94 |
102 |
110 | );
111 | },
112 | };
113 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # ♟️ React Chessboard
2 |
3 | {position}
103 | 104 |107 | Toggle the checkbox to enable/disable piece movement animations 108 |
109 |
4 |
5 | 
6 | 
7 | 
8 | 
9 |
10 | A modern, responsive chessboard component for React applications.
11 |
12 | 
13 |
14 |
15 |
16 | ## ✨ Features
17 |
18 | - 🎯 Drag and drop
19 | - 🎨 Custom pieces
20 | - ♟️ Spare pieces
21 | - 🎭 Custom styling
22 | - ✨ Animation
23 | - 📐 Custom board dimensions
24 | - 🔄 Event handling
25 | - 📱 Mobile support
26 | - 📱 Responsive
27 | - ⌨️ Accessible
28 | - 🔷 TypeScript support
29 | - 🛠️ Helpful utility functions
30 | - ✨ And more!
31 |
32 | ## 📦 Installation
33 |
34 | ```bash
35 | pnpm add react-chessboard
36 | # or
37 | yarn add react-chessboard
38 | # or
39 | npm install react-chessboard
40 | ```
41 |
42 | ## 🚀 Quick Start
43 |
44 | ```tsx
45 | import { Chessboard } from 'react-chessboard';
46 |
47 | function App() {
48 | const chessboardOptions = {
49 | // your config options here
50 | };
51 |
52 | return
7 |
9 |
10 | React Chessboard
8 |
17 | 
22 |
23 |
24 | ## What is React Chessboard?
25 |
26 | React Chessboard is a React component that provides chessboard functionality to your web application. It is a simple and easy-to-use component allowing you to create a custom and flexible chessboard experience with a wide range of features.
27 |
28 | The component is purely a UI component and does not include any logic for the game of chess. The chess game logic should be independent to the component. This flexibility enables you to use the component in any project, regardless of the chess logic or chess variant you wish to build with. For example, you can use the [chess.js](https://www.npmjs.com/package/chess.js) library to handle the game logic. Example usages of the component with chess.js are shown in the [How to use](../?path=/docs/how-to-use-basic-examples--docs) documentation.
29 |
30 | ## Features
31 |
32 | The package includes the many helpful features, such as:
33 |
34 | - Drag and drop
35 | - Custom pieces
36 | - Spare pieces
37 | - Arrows
38 | - Custom styling
39 | - Animation
40 | - Custom board dimensions
41 | - Event handling
42 | - Mobile support
43 | - Responsive
44 | - Accessible
45 | - TypeScript support
46 | - Helpful utility functions
47 | - And more!
48 |
49 | ## Installation
50 |
51 | ```bash
52 | pnpm add react-chessboard
53 | ```
54 |
55 | ```bash
56 | yarn add react-chessboard
57 | ```
58 |
59 | ```bash
60 | npm i react-chessboard
61 | ```
62 |
63 | ## Quick Start
64 |
65 | Here is a quick example of how to use the component. You will need to configure the component with the `options` prop. See the [Options API](../?path=/docs/how-to-use-options-api--docs) documentation for more information on the available options. You can also see the [Basic Examples](../?path=/docs/how-to-use-basic-examples--docs) documentation for more examples of how to use the component.
66 |
67 | ```tsx
68 | import { Chessboard } from 'react-chessboard';
69 |
70 | function App() {
71 | const chessboardOptions = {
72 | // your config options here
73 | };
74 |
75 | return
22 |
101 | onPieceClick?.({ isSparePiece, piece: { pieceType }, square: position })
102 | }
103 | >
104 |
106 | );
107 | });
108 |
--------------------------------------------------------------------------------
/docs/stories/options/ClearArrowsOnPositionChange.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import { useState } from 'react';
3 |
4 | import defaultMeta from '../basic-examples/Default.stories';
5 | import { Chessboard } from '../../../src';
6 |
7 | const meta: Meta
96 |
104 |
105 |
108 |
109 |
116 | );
117 | },
118 | };
119 |
--------------------------------------------------------------------------------
/docs/stories/options/AnimationDurationInMs.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import { Chess } from 'chess.js';
3 | import { useState, useRef } from 'react';
4 |
5 | import defaultMeta from '../basic-examples/Default.stories';
6 | import { Chessboard } from '../../../src';
7 | import type { PieceDropHandlerArgs } from '../../../src/types';
8 |
9 | const meta: Meta112 | Toggle the checkbox to enable/disable clearing arrows when the 113 | position changes. 114 |
115 |
96 |
108 |
109 |
116 | );
117 | },
118 | };
119 |
--------------------------------------------------------------------------------
/docs/components/DocNavigation.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | type NavigationItem = {
4 | href: string;
5 | title: string;
6 | description: string;
7 | };
8 |
9 | type DocNavigationProps = {
10 | prev?: NavigationItem;
11 | next?: NavigationItem;
12 | };
13 |
14 | type ArrowIconProps = {
15 | direction: 'left' | 'right';
16 | };
17 |
18 | function ArrowIcon({ direction }: ArrowIconProps) {
19 | return (
20 |
36 | );
37 | }
38 |
39 | type NavigationCardProps = {
40 | item: NavigationItem;
41 | direction: 'left' | 'right';
42 | isFullWidth: boolean;
43 | };
44 |
45 | function NavigationCard({ item, direction, isFullWidth }: NavigationCardProps) {
46 | const cardStyle = {
47 | display: 'flex',
48 | alignItems: 'center',
49 | gap: '1rem',
50 | padding: '1.5rem',
51 | backgroundColor: 'white',
52 | borderRadius: '8px',
53 | boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
54 | textDecoration: 'none',
55 | color: 'inherit',
56 | flex: isFullWidth ? '1 1 300px' : '0 0 auto',
57 | minWidth: '300px',
58 | maxWidth: isFullWidth ? 'none' : '400px',
59 | transition: 'transform 0.2s ease-in-out',
60 | };
61 |
62 | const arrowContainerStyle = {
63 | display: 'flex',
64 | alignItems: 'center',
65 | justifyContent: 'center',
66 | width: '40px',
67 | flexShrink: 0,
68 | };
69 |
70 | const contentStyle = {
71 | flex: '1 1 auto',
72 | minWidth: 0, // Allows text to shrink below its content size
73 | };
74 |
75 | function handleMouseEnter(e: React.MouseEvent112 | Play against random moves. Try moving pieces to see the animation 113 | effects 114 |
115 |
93 |
95 | )}
96 |
97 |
98 |
103 |
104 | {direction === 'right' && (
105 | 99 | {item.title} 100 |
101 |{item.description}
102 |
106 |
108 | )}
109 |
110 | );
111 | }
112 |
113 | export function DocNavigation({ prev, next }: DocNavigationProps) {
114 | const isFullWidth = Boolean(prev && next);
115 |
116 | return (
117 |
128 | {prev && (
129 |
143 | );
144 | }
145 |
--------------------------------------------------------------------------------
/docs/stories/advanced-examples/Multiplayer.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import { Chess } from 'chess.js';
3 | import { useState, useRef } from 'react';
4 |
5 | import defaultMeta from '../basic-examples/Default.stories';
6 | import {
7 | Chessboard,
8 | PieceDropHandlerArgs,
9 | PieceHandlerArgs,
10 | } from '../../../src';
11 |
12 | const meta: Meta
23 |
25 | ),
26 | ],
27 | } satisfies Meta
107 |
121 | );
122 | },
123 | };
124 |
--------------------------------------------------------------------------------
/docs/stories/advanced-examples/3DBoard.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import { useMemo } from 'react';
3 |
4 | import defaultMeta from '../basic-examples/Default.stories';
5 | import { Chessboard } from '../../../src';
6 |
7 | const meta: Meta
108 |
113 |
114 | White's perspective
109 |
110 |
112 |
115 |
120 | Black's perspective
116 |
117 |
119 |
53 | 
63 |
64 | );
65 | });
66 | return pieceComponents;
67 | }, []);
68 |
69 | // set the chessboard options
70 | const chessboardOptions = {
71 | id: '3d-board',
72 | boardStyle: {
73 | transform: 'rotateX(27.5deg)',
74 | transformOrigin: 'center',
75 | border: '16px solid #b8836f',
76 | borderStyle: 'outset',
77 | borderRightColor: ' #b27c67',
78 | borderRadius: '4px',
79 | boxShadow: 'rgba(0, 0, 0, 0.5) 2px 24px 24px 8px',
80 | borderRightWidth: '2px',
81 | borderLeftWidth: '2px',
82 | borderTopWidth: '0px',
83 | borderBottomWidth: '18px',
84 | borderTopLeftRadius: '8px',
85 | borderTopRightRadius: '8px',
86 | padding: '8px 8px 12px',
87 | background: '#e0c094',
88 | backgroundImage: 'url("wood-pattern.png")',
89 | backgroundSize: 'cover',
90 | overflow: 'visible',
91 | },
92 | pieces: threeDPieces,
93 | lightSquareStyle: {
94 | backgroundColor: '#e0c094',
95 | backgroundImage: 'url("wood-pattern.png")',
96 | backgroundSize: 'cover',
97 | },
98 | darkSquareStyle: {
99 | backgroundColor: '#865745',
100 | backgroundImage: 'url("wood-pattern.png")',
101 | backgroundSize: 'cover',
102 | },
103 | };
104 |
105 | // render the chessboard
106 | return (
107 |
63 |
116 |
118 | );
119 | },
120 | };
121 |
--------------------------------------------------------------------------------
/docs/stories/options/OnArrowsChange.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import { useState } from 'react';
3 |
4 | import defaultMeta from '../basic-examples/Default.stories';
5 | import { Chessboard } from '../../../src';
6 | import type { Arrow } from '../../../src/types';
7 |
8 | const meta: Meta
48 |
120 | );
121 | },
122 | };
123 |
--------------------------------------------------------------------------------
/docs/stories/advanced-examples/MiniPuzzles.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import { useEffect, useState } from 'react';
3 |
4 | import defaultMeta from '../basic-examples/Default.stories';
5 | import {
6 | Chessboard,
7 | PieceDropHandlerArgs,
8 | PieceHandlerArgs,
9 | PositionDataType,
10 | } from '../../../src';
11 |
12 | const meta: Meta
49 |
112 |
113 | Current Internal Arrows:
50 |
51 | {internalArrows.length === 0 ? (
52 | No arrows drawn
53 | ) : (
54 | internalArrows.map((arrow, index) => (
55 |
61 |
62 |
56 | {arrow.startSquare} → {arrow.endSquare} ({arrow.color})
57 |
58 | ))
59 | )}
60 | Arrow Change History:
63 |
70 | {arrowHistory.length === 0 ? (
71 | No changes yet
72 | ) : (
73 | arrowHistory.map((arrows, index) => (
74 |
100 |
101 |
111 |
83 | Change {index + 1}: {arrows.length} arrow(s)
84 | {arrows.length > 0 && (
85 |
97 | ))
98 | )}
99 |
86 | {arrows.map((arrow, arrowIndex) => (
87 |
95 | )}
96 |
91 | {arrow.startSquare} → {arrow.endSquare}
92 |
93 | ))}
94 | 116 | Right-click and drag to draw arrows. The onArrowsChange callback will 117 | be triggered whenever internal arrows are added or removed. 118 |
119 |
143 |
149 | );
150 | },
151 | };
152 |
--------------------------------------------------------------------------------
/docs/B_BasicExamples.mdx:
--------------------------------------------------------------------------------
1 | import { Canvas, Meta } from '@storybook/blocks';
2 | import { DocNavigation } from './components/DocNavigation';
3 | import { HintMessage } from './components/HintMessage';
4 | import { WarningMessage } from './components/WarningMessage';
5 |
6 | import * as DefaultStories from './stories/basic-examples/Default.stories';
7 | import * as PlayVsRandomStories from './stories/basic-examples/PlayVsRandom.stories';
8 | import * as SparePiecesStories from './stories/basic-examples/SparePieces.stories';
9 | import * as ClickToMoveStories from './stories/basic-examples/ClickToMove.stories';
10 | import * as ClickOrDragToMoveStories from './stories/basic-examples/ClickOrDragToMove.stories';
11 |
12 |
13 |
14 | # Basic examples
15 |
16 | These examples demonstrate basic and common use cases for React Chessboard. Each example includes explanations of key concepts and code snippets showing how to implement them.
17 |
18 |
144 | White to move, checkmate in 2
145 |
146 |
147 |
115 | {blackPieceTypes.map((pieceType) => (
116 |
127 | ) : null}
128 |
129 |
123 |
125 | ))}
126 |
140 | {whitePieceTypes.map((pieceType) => (
141 |
152 | ) : null}
153 |
148 |
150 | ))}
151 |
141 |
159 | );
160 | },
161 | };
162 |
--------------------------------------------------------------------------------
/docs/F_Contributing.mdx:
--------------------------------------------------------------------------------
1 | import { Meta } from '@storybook/blocks';
2 |
3 |
4 |
5 | # Contributing to react-chessboard
6 |
7 | Thank you for your interest in contributing to react-chessboard! Whether it's improving the documentation, adding new features, or fixing bugs, your contributions are welcome and appreciated. This document will guide you through the process of contributing to this project.
8 |
9 | ## GitHub contribution guide
10 |
11 | Before diving into the technical details, here are some general guidelines for contributing:
12 |
13 | - Check existing [issues](https://github.com/Clariity/react-chessboard/issues) and [pull requests](https://github.com/Clariity/react-chessboard/pulls) to avoid duplicating work
14 | - For major changes, open an issue first to discuss your proposed changes
15 | - Follow the code style and project guidelines outlined below
16 | - Include tests and documentation for new features
17 | - Keep pull requests focused on a single change
18 | - Be respectful and constructive in discussions
19 |
20 | Once you're ready to contribute, follow these steps:
21 |
22 | 1. Fork the [react-chessboard repository](https://github.com/Clariity/react-chessboard)
23 | 2. Clone your forked repository onto your development machine
24 | ```bash
25 | git clone https://github.com/YOUR-GITHUB-USERNAME/react-chessboard.git
26 | cd react-chessboard
27 | pnpm i
28 | ```
29 | 3. Create a branch for your PR
30 | ```bash
31 | git checkout -b your-branch-name
32 | ```
33 | 4. Set upstream remote
34 | ```bash
35 | git remote add upstream https://github.com/Clariity/react-chessboard.git
36 | ```
37 | 5. Make your changes
38 | 6. Test your changes by running storybook
39 | ```bash
40 | pnpm storybook
41 | ```
42 | 7. Push your changes
43 | ```bash
44 | git add .
45 | git commit -m "feat: cool new feature"
46 | git push --set-upstream origin your-branch-name
47 | ```
48 | 8. Create pull request on GitHub
49 | 9. Contribute again
50 | ```bash
51 | git checkout main
52 | git pull upstream main
53 | git checkout -b your-new-branch-name
54 | ```
55 |
56 | ## Commit Guidelines
57 |
58 | This project uses [Conventional Commits](https://www.conventionalcommits.org/) for commit messages and [semantic-release](https://semantic-release.gitbook.io/semantic-release/) for automated versioning, release notes, and publishing to npm. All commits are validated using [commitlint](https://commitlint.js.org/), so if your commit message does not follow the format, the commit will fail.
59 |
60 | ### Commit Message Format
61 |
62 | Each commit message should follow the conventional commit format:
63 |
64 | ```
65 |
142 | Position Evaluation:{' '}
143 | {possibleMate ? `#${possibleMate}` : positionEvaluation}
144 | {'; '}
145 | Depth: {depth}
146 |
147 |
148 | Best line: {bestLine.slice(0, 40)} ...
149 |
150 |
151 | 154 | Make moves on the board to analyze positions. The green arrow shows 155 | Stockfish's suggested best move. The evaluation is shown in 156 | centipawns (positive numbers favor White, negative favor Black). 157 |
158 |
59 |
225 | );
226 | },
227 | };
228 |
--------------------------------------------------------------------------------
/docs/stories/advanced-examples/PiecePromotion.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import { Chess, Square, PieceSymbol } from 'chess.js';
3 | import { useRef, useState } from 'react';
4 |
5 | import defaultMeta from '../basic-examples/Default.stories';
6 | import {
7 | Chessboard,
8 | chessColumnToColumnIndex,
9 | defaultPieces,
10 | PieceDropHandlerArgs,
11 | PieceRenderObject,
12 | } from '../../../src';
13 |
14 | const meta: Meta
68 | {/* Colors */}
69 |
213 |
214 |
217 |
218 |
70 |
71 |
75 | setarrowOptions({ ...arrowOptions, color: e.target.value })
76 | }
77 | />
78 |
79 |
80 |
81 |
85 | setarrowOptions({
86 | ...arrowOptions,
87 | secondaryColor: e.target.value,
88 | })
89 | }
90 | />
91 |
92 |
93 |
94 |
98 | setarrowOptions({
99 | ...arrowOptions,
100 | tertiaryColor: e.target.value,
101 | })
102 | }
103 | />
104 |
105 |
106 | {/* Lengths */}
107 |
108 |
111 |
117 | setarrowOptions({
118 | ...arrowOptions,
119 | arrowLengthReducerDenominator: Number(e.target.value),
120 | })
121 | }
122 | />
123 |
124 |
125 |
129 |
135 | setarrowOptions({
136 | ...arrowOptions,
137 | sameTargetArrowLengthReducerDenominator: Number(
138 | e.target.value,
139 | ),
140 | })
141 | }
142 | />
143 |
144 |
145 |
146 |
152 | setarrowOptions({
153 | ...arrowOptions,
154 | arrowWidthDenominator: Number(e.target.value),
155 | })
156 | }
157 | />
158 |
159 |
160 | {/* Opacity and Active Settings */}
161 |
162 |
163 |
170 | setarrowOptions({
171 | ...arrowOptions,
172 | opacity: Number(e.target.value),
173 | })
174 | }
175 | />
176 |
177 |
178 |
179 |
186 | setarrowOptions({
187 | ...arrowOptions,
188 | activeOpacity: Number(e.target.value),
189 | })
190 | }
191 | />
192 |
193 |
194 |
198 |
205 | setarrowOptions({
206 | ...arrowOptions,
207 | activeArrowWidthMultiplier: Number(e.target.value),
208 | })
209 | }
210 | />
211 |
212 | 221 | Adjust the controls above to customize arrow appearance. Click the 222 | button to reset to default settings. 223 |
224 |
133 |
142 |
143 | = {
9 | ...defaultMeta,
10 | title: 'stories/FourPlayerChess',
11 | } satisfies Meta;
12 |
13 | export default meta;
14 |
15 | type Story = StoryObj;
16 |
17 | export const FourPlayerChess: Story = {
18 | render: () => {
19 | // use position object to set up the board, using custom piece types for each player colour
20 | const topPieces = {
21 | d14: { pieceType: 'yR' },
22 | e14: { pieceType: 'yN' },
23 | f14: { pieceType: 'yB' },
24 | g14: { pieceType: 'yK' },
25 | h14: { pieceType: 'yQ' },
26 | i14: { pieceType: 'yB' },
27 | j14: { pieceType: 'yN' },
28 | k14: { pieceType: 'yR' },
29 | d13: { pieceType: 'yP' },
30 | e13: { pieceType: 'yP' },
31 | f13: { pieceType: 'yP' },
32 | g13: { pieceType: 'yP' },
33 | h13: { pieceType: 'yP' },
34 | i13: { pieceType: 'yP' },
35 | j13: { pieceType: 'yP' },
36 | k13: { pieceType: 'yP' },
37 | };
38 | const rightPieces = {
39 | n11: { pieceType: 'gR' },
40 | n10: { pieceType: 'gN' },
41 | n9: { pieceType: 'gB' },
42 | n8: { pieceType: 'gQ' },
43 | n7: { pieceType: 'gK' },
44 | n6: { pieceType: 'gB' },
45 | n5: { pieceType: 'gN' },
46 | n4: { pieceType: 'gR' },
47 | m11: { pieceType: 'gP' },
48 | m10: { pieceType: 'gP' },
49 | m9: { pieceType: 'gP' },
50 | m8: { pieceType: 'gP' },
51 | m7: { pieceType: 'gP' },
52 | m6: { pieceType: 'gP' },
53 | m5: { pieceType: 'gP' },
54 | m4: { pieceType: 'gP' },
55 | };
56 | const bottomPieces = {
57 | d1: { pieceType: 'rR' },
58 | e1: { pieceType: 'rN' },
59 | f1: { pieceType: 'rB' },
60 | g1: { pieceType: 'rQ' },
61 | h1: { pieceType: 'rK' },
62 | i1: { pieceType: 'rB' },
63 | j1: { pieceType: 'rN' },
64 | k1: { pieceType: 'rR' },
65 | d2: { pieceType: 'rP' },
66 | e2: { pieceType: 'rP' },
67 | f2: { pieceType: 'rP' },
68 | g2: { pieceType: 'rP' },
69 | h2: { pieceType: 'rP' },
70 | i2: { pieceType: 'rP' },
71 | j2: { pieceType: 'rP' },
72 | k2: { pieceType: 'rP' },
73 | };
74 | const leftPieces = {
75 | a11: { pieceType: 'bR' },
76 | a10: { pieceType: 'bN' },
77 | a9: { pieceType: 'bB' },
78 | a8: { pieceType: 'bK' },
79 | a7: { pieceType: 'bQ' },
80 | a6: { pieceType: 'bB' },
81 | a5: { pieceType: 'bN' },
82 | a4: { pieceType: 'bR' },
83 | b11: { pieceType: 'bP' },
84 | b10: { pieceType: 'bP' },
85 | b9: { pieceType: 'bP' },
86 | b8: { pieceType: 'bP' },
87 | b7: { pieceType: 'bP' },
88 | b6: { pieceType: 'bP' },
89 | b5: { pieceType: 'bP' },
90 | b4: { pieceType: 'bP' },
91 | };
92 |
93 | // combine the pieces into a single position object
94 | const [position] = useState({
95 | ...topPieces,
96 | ...rightPieces,
97 | ...bottomPieces,
98 | ...leftPieces,
99 | });
100 |
101 | // track the orientation of the board in terms of degrees of rotation
102 | const [orientation, setOrientation] = useState(0);
103 |
104 | // hide 9 squares in each corner
105 | useEffect(() => {
106 | const corners = [
107 | // Top-left
108 | { files: ['a', 'b', 'c'], ranks: ['12', '13', '14'] },
109 | // Top-right
110 | { files: ['l', 'm', 'n'], ranks: ['12', '13', '14'] },
111 | // Bottom-left
112 | { files: ['a', 'b', 'c'], ranks: ['1', '2', '3'] },
113 | // Bottom-right
114 | { files: ['l', 'm', 'n'], ranks: ['1', '2', '3'] },
115 | ];
116 |
117 | // loop through each corner and hide the squares
118 | corners.forEach((corner) => {
119 | corner.files.forEach((file) => {
120 | corner.ranks.forEach((rank) => {
121 | const el = document.getElementById(
122 | 'four-player-chess-square-' + file + rank,
123 | );
124 | if (el) {
125 | el.style.display = 'none';
126 | }
127 | });
128 | });
129 | });
130 | }, []);
131 |
132 | // define the styles for each player colour and the rotation of the pieces
133 | const yellowStyle = {
134 | fill: '#FFD700',
135 | svgStyle: { transform: `rotate(${-orientation}deg)` },
136 | };
137 | const greenStyle = {
138 | fill: '#00A86B',
139 | svgStyle: { transform: `rotate(${-orientation}deg)` },
140 | };
141 | const redStyle = {
142 | fill: '#D7263D',
143 | svgStyle: { transform: `rotate(${-orientation}deg)` },
144 | };
145 | const blueStyle = {
146 | fill: '#1E90FF',
147 | svgStyle: { transform: `rotate(${-orientation}deg)` },
148 | };
149 |
150 | // define the pieces for each player colour
151 | const fourPlayerPieces = {
152 | // Yellow (top)
153 | yP: () => defaultPieces.wP(yellowStyle),
154 | yR: () => defaultPieces.wR(yellowStyle),
155 | yN: () => defaultPieces.wN(yellowStyle),
156 | yB: () => defaultPieces.wB(yellowStyle),
157 | yQ: () => defaultPieces.wQ(yellowStyle),
158 | yK: () => defaultPieces.wK(yellowStyle),
159 | // Green (right)
160 | gP: () => defaultPieces.wP(greenStyle),
161 | gR: () => defaultPieces.wR(greenStyle),
162 | gN: () => defaultPieces.wN(greenStyle),
163 | gB: () => defaultPieces.wB(greenStyle),
164 | gQ: () => defaultPieces.wQ(greenStyle),
165 | gK: () => defaultPieces.wK(greenStyle),
166 | // Red (bottom)
167 | rP: () => defaultPieces.wP(redStyle),
168 | rR: () => defaultPieces.wR(redStyle),
169 | rN: () => defaultPieces.wN(redStyle),
170 | rB: () => defaultPieces.wB(redStyle),
171 | rQ: () => defaultPieces.wQ(redStyle),
172 | rK: () => defaultPieces.wK(redStyle),
173 | // Blue (left)
174 | bP: () => defaultPieces.wP(blueStyle),
175 | bR: () => defaultPieces.wR(blueStyle),
176 | bN: () => defaultPieces.wN(blueStyle),
177 | bB: () => defaultPieces.wB(blueStyle),
178 | bQ: () => defaultPieces.wQ(blueStyle),
179 | bK: () => defaultPieces.wK(blueStyle),
180 | } as const;
181 |
182 | // set the chessboard options
183 | const chessboardOptions = {
184 | chessboardRows: 14,
185 | chessboardColumns: 14,
186 | position,
187 | id: 'four-player-chess',
188 | pieces: fourPlayerPieces,
189 | showNotation: false,
190 | boardStyle: {
191 | transform: `rotate(${orientation}deg)`,
192 | },
193 | draggingPieceStyle: {
194 | ...defaultDraggingPieceStyle,
195 | transform: `rotate(${orientation}deg)`, // rotate the dragging piece to match the orientation of the board
196 | },
197 | };
198 |
199 | // render the chessboard
200 | return (
201 |
144 | {promotionMove ? (
145 |
213 | );
214 | },
215 | };
216 |
--------------------------------------------------------------------------------
/docs/stories/advanced-examples/FourPlayerChess.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import { useEffect, useState } from 'react';
3 |
4 | import defaultMeta from '../basic-examples/Default.stories';
5 | import { Chessboard, defaultDraggingPieceStyle } from '../../../src';
6 | import { defaultPieces } from '../../../src/pieces';
7 |
8 | const meta: Meta setPromotionMove(null)}
147 | onContextMenu={(e) => {
148 | e.preventDefault();
149 | setPromotionMove(null);
150 | }}
151 | style={{
152 | position: 'absolute',
153 | top: 0,
154 | left: 0,
155 | right: 0,
156 | bottom: 0,
157 | backgroundColor: 'rgba(0, 0, 0, 0.1)',
158 | zIndex: 1000,
159 | }}
160 | />
161 | ) : null}
162 |
163 | {promotionMove ? (
164 |
207 |
208 |
177 | {(['q', 'r', 'n', 'b'] as PieceSymbol[]).map((piece) => (
178 |
201 | ))}
202 |
203 | ) : null}
204 |
205 | 209 | Move the white pawn to the 8th rank to trigger the promotion dialog. 210 | Click the reset button to return to the initial position. 211 |
212 |
209 |
220 | );
221 | },
222 | };
223 |
--------------------------------------------------------------------------------
210 | 4-Player Chess (Board Only)
211 |
212 |
213 |
214 |
215 |
216 |
217 |
218 |