()
10 | const boardOneStream = useCallback((analysisPosition: TPositionTreeSetter) => {
11 | setBoardTwoPosition(analysisPosition)
12 | }, [])
13 | const boardTwoStream = useCallback((analysisPosition: TPositionTreeSetter) => {
14 | setBoardOnePosition(analysisPosition)
15 | }, [])
16 |
17 | return (
18 |
19 |
47 |
48 | Sync Board
49 | {boardTwoStream(analysisPosition)}}
81 | styles = {{
82 | boardHeaderStyles: {
83 | boardHeaderContainerClassName: 'board-header-container',
84 | boardHeaderTextClassName: 'board-header-text',
85 | boardHeaderTextDetailClassName: 'board-header-text-detail'
86 | },
87 | panelStyles: {
88 | panelContainerClassName: 'panel-container'
89 | }
90 | }}
91 | />
92 |
93 | Board Loaded from FEN
94 |
105 |
106 | )
107 | }
108 |
109 | export default App
--------------------------------------------------------------------------------
/src/index.scss:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: sans-serif;
3 | }
4 |
--------------------------------------------------------------------------------
/src/lib/__snapshots__/index.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Vitest Snapshot v1
2 |
3 | exports[`HelloWorld > HelloWorld component renders correctly 1`] = `
4 |
5 | Hello,
6 | World
7 | !
8 |
9 | `;
10 |
11 | exports[`HelloWorld > The greetee prop works 1`] = `
12 |
13 | Hello,
14 | Universe
15 | !
16 |
17 | `;
18 |
19 | exports[`PGNBoard > PGNBoard component renders correctly 1`] = `null`;
20 |
21 | exports[`PGNBoard > The greetee prop works 1`] = `null`;
22 |
--------------------------------------------------------------------------------
/src/lib/components/AnalysisBoard.tsx:
--------------------------------------------------------------------------------
1 |
2 | import Board from "./Board";
3 | import { TBoardConfig } from './Board';
4 |
5 | import BoardHeader, { TBoardHeaderStyles } from "./BoardHeader";
6 | import { TBoardHeaderConfig } from './BoardHeader';
7 |
8 | import Panel from './Panel';
9 | import { TPanelStyles } from './Panel';
10 |
11 | import { TPositionTreeSetter, usePositionContext } from "../contexts/PositionContext";
12 | import { Key, useEffect } from "react";
13 | import Moves, { TMovesStyles } from "./Moves";
14 |
15 | export interface TAnalysisBoardStyles {
16 | analysisBoardContainerClassName: string
17 | }
18 |
19 | interface TProps {
20 | pgnString?: string,
21 | analysisPosition?: TPositionTreeSetter,
22 | getAnalysisPosition?: Function,
23 | config?: {
24 | boardHeaderConfig?: TBoardHeaderConfig,
25 | boardConfig?: TBoardConfig
26 | },
27 | styles?: {
28 | analysisBoardStyles?: TAnalysisBoardStyles,
29 | panelStyles?: TPanelStyles,
30 | movesStyles?: TMovesStyles,
31 | boardHeaderStyles?: TBoardHeaderStyles
32 | }
33 | }
34 |
35 | const AnalysisBoard = (props: TProps) => {
36 | const {
37 | pgnString,
38 | config,
39 | styles,
40 | analysisPosition,
41 | getAnalysisPosition,
42 | } = props
43 |
44 | const analysisBoardContainerClassName = styles?.analysisBoardStyles?.analysisBoardContainerClassName ?? 'RCAB-analysis-board-container'
45 |
46 |
47 | const { boardPosition, chessRootNode, handleLeftClick, handleRightClick, fen, chessNodes, setPosition } = usePositionContext()
48 |
49 | useEffect(() => {
50 | if (getAnalysisPosition && analysisPosition?.fen !== fen) {
51 | const tempNodes = chessNodes
52 | const newTempNodes = tempNodes?.map((el) => {
53 | const historyArray = el?.node?.history()
54 | const newEl = {
55 | ...el,
56 | historyArray
57 | }
58 | return newEl
59 | })
60 | const position = {
61 | pgnString,
62 | boardPosition,
63 | fen,
64 | chessNodes: newTempNodes
65 | }
66 | getAnalysisPosition(position)
67 | }
68 | }, [boardPosition, fen])
69 |
70 | useEffect(() => {
71 | if (analysisPosition && analysisPosition?.fen !== 'rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1') {
72 | setPosition(analysisPosition)
73 | chessRootNode?.loadPgn(analysisPosition.pgnString)
74 | }
75 | else if(pgnString && chessRootNode) {
76 | chessRootNode.loadPgn(pgnString)
77 | }
78 | }, [analysisPosition, pgnString])
79 |
80 |
81 | const handleKeyDown = (k: Key) => {
82 | if (k === 'ArrowRight') {
83 | handleRightClick()
84 | }
85 | if (k === 'ArrowLeft') {
86 | handleLeftClick()
87 | }
88 | }
89 |
90 | return (
91 | handleKeyDown(k.key)} tabIndex={0}>
92 |
104 |
105 |
108 |
109 |
173 |
178 |
179 | )
180 |
181 | }
182 |
183 | export default Board
--------------------------------------------------------------------------------
/src/lib/components/BoardHeader.tsx:
--------------------------------------------------------------------------------
1 |
2 | import { usePositionContext } from '../contexts/PositionContext'
3 | export interface TBoardHeaderDetails {
4 | White?: string,
5 | Black?: string,
6 | WhiteElo?: string,
7 | BlackElo?: string,
8 | Round?: string,
9 | Result?: string,
10 | Site?: string,
11 | Event?: string
12 | }
13 | export interface TBoardHeaderStyles {
14 | boardHeaderContainerClassName?: string
15 | boardHeaderTextClassName?: string
16 | boardHeaderTextDetailClassName?: string
17 | }
18 |
19 | export interface TBoardHeaderConfig {
20 | useHoodieGuyWhenUnknown?: boolean
21 | }
22 |
23 | interface TProps {
24 | boardHeaderStyles?: TBoardHeaderStyles,
25 | boardHeaderConfig?: TBoardHeaderConfig
26 | }
27 |
28 | const BoardHeader = (props: TProps) => {
29 | const {
30 | boardHeaderConfig = {},
31 | boardHeaderStyles = {},
32 | } = props
33 | const boardHeaderContainerClassName = boardHeaderStyles?.boardHeaderContainerClassName ?? 'RCAB-board-header-container'
34 | const boardHeaderTextClassName = boardHeaderStyles?.boardHeaderTextClassName ?? 'RCAB-board-header-text'
35 | const boardHeaderTextDetailClassName = boardHeaderStyles?.boardHeaderTextDetailClassName ?? 'RCAB-board-header-text-detail'
36 |
37 |
38 | const { chessRootNode } = usePositionContext()
39 | if (!chessRootNode) {
40 | return <>
41 | }
42 |
43 | const boardHeaderDetails: TBoardHeaderDetails = chessRootNode.header()
44 | if (!boardHeaderDetails) {
45 | return <>
46 | }
47 |
48 |
49 | const {
50 | useHoodieGuyWhenUnknown = false
51 | } = boardHeaderConfig
52 | const nameDefault = useHoodieGuyWhenUnknown
53 | ? 'Mr. Hoodie Guy'
54 | : 'Unknown'
55 |
56 | const {
57 | White = nameDefault, Black = nameDefault,
58 | WhiteElo, BlackElo,
59 | Round, Result, Event,
60 | Site
61 | } = boardHeaderDetails
62 |
63 | return (
64 |
65 |
66 | {White} {WhiteElo && WhiteElo.length > 0 && WhiteElo !== '?' ? `(${WhiteElo})` : ''}
67 | vs.{` `}
68 | {Black} {BlackElo && BlackElo.length > 0 && BlackElo !== '?' ? `(${BlackElo})` : ''}
69 |
70 | {Event && Event.length > 0 ? `${Event} | ` : ''}
71 | {Site && Site.length > 0 ? `${Site} | ` : ''}
72 | {Round && Round.length > 0 && Round !== '?' ? `${Round} | ` : ''}
73 | {Result ? Result : ''}
74 |
75 |
119 | {renderMoves.map((move: TMove) => {
120 | const moveNumber = move.index % 2 === 0 ? move.moveNumber + '.' : ''
121 | if (move.className?.includes('first') && move?.parentNodeId === 0) {
122 | return (
123 |
124 |
125 | handleSelectMove(move)}
127 | className={move.className}
128 | >
129 | {`${moveNumber} ${move.move} `}
130 |
131 |
132 | )
133 | }
134 | if (move.className?.includes('last') && (move.nodeId !== 0)) {
135 | return (
136 |
137 | handleSelectMove(move)}
139 | className={move.className}
140 | >
141 | {`${moveNumber} ${move.move} `}
142 |
143 |
144 |
145 | )
146 | }
147 | return (
148 |
handleSelectMove(move)}
150 | className={move.className}
151 | key={`${move.nodeId}${move.index}`}
152 | >
153 | {`${moveNumber} ${move.move} `}
154 |
155 | )
156 | })}
157 |
30 |
handleLeftClick()}>
31 |
32 |
33 |
34 |
handleRightClick()}>
35 |
36 |
37 |