feat: navigation can cycle through board

README.md

@@ -69,7 +69,7 @@ After that the PGN viewer/editor will render and you are good to go (styles are
 - [x] Add undo button
 - [x] Copy current FEN string to clipboard
 
-Thanks to @latenitecoding for the contributions
+Thanks to [@latenitecoding](https://github.com/latenitecoding) for the contributions
 
 ## Settings
 

src/components/react/PgnViewer/Controls/index.tsx

@@ -13,21 +13,21 @@ export const Controls = (props: ControlActions) => {
 	return (
 		<div>
 			<div className="button-section">
-				<button onClick={() => props.onBackButtonClick()}>
+				<button title="Back" onClick={() => props.onBackButtonClick()}>
 					<ArrowLeft />
 				</button>
-				<button onClick={() => props.onForwardButtonClick()}>
+				<button title="Forward" onClick={() => props.onForwardButtonClick()}>
 					<ArrowRight />
 				</button>
-				<button onClick={() => props.onSaveButtonClick()}>
+				<button title="Save" onClick={() => props.onSaveButtonClick()}>
 					<Save strokeWidth={'1px'} />
 				</button>
 			</div>
 			<div className="button-section">
-				<button onClick={() => props.onCopyButtonClick()}>
+				<button title="Copy FEN" onClick={() => props.onCopyButtonClick()}>
 					<Copy strokeWidth={'1px'} />
 				</button>
-				<button onClick={() => props.onUndoButtonClick()}>
+				<button title="Undo" onClick={() => props.onUndoButtonClick()}>
 					<Undo2 />
 				</button>
 			</div>

src/lib/ui-state/index.ts

@@ -65,17 +65,22 @@ export const displayMoveInHistory = (
 			if (typeof variantMoves[moveIndex + offset] !== 'undefined') {
 				moveToDisplay = variantMoves[moveIndex + offset];
 			}
+
+			if (typeof moveToDisplay === 'undefined') {
+				moveToDisplay = moves[variant.parentMoveIndex + offset];
+			}
 		} else {
 			if (typeof moves[moveIndex + offset] !== 'undefined') {
 				moveToDisplay = moves[moveIndex + offset];
 			}
 		}
+	} else if (offset < 0) {
+	  moveToDisplay = draft.study.moves[draft.study.moves.length - 1];
+	} else if (offset > 0) {
+	  moveToDisplay = draft.study.moves[0];
+	}
 
-		if (!moveToDisplay) {
-			console.log(`No move to display found`);
-			return draft;
-		}
-
+	if (moveToDisplay) {
 		const chess = new Chess(moveToDisplay.after);
 
 		chessView.set({
@@ -92,6 +97,26 @@ export const displayMoveInHistory = (
 		draft.currentMove = moveToDisplay;
 
 		setChessLogic(chess);
+	} else if (offset !== 0){
+		const chess = draft.study.root.fen ? new Chess(draft.study.root.fen) : new Chess();
+
+		chessView.set({
+		  fen: chess.fen(),
+			check: chess.isCheck(),
+			movable: {
+				free: false,
+				color: toColor(chess),
+				dests: toDests(chess),
+			},
+			turnColor: toColor(chess),
+		});
+
+		draft.currentMove = null;
+
+		setChessLogic(chess);
+	} else {
+		console.log(`No move to display found`);
+		return draft;
 	}
 
 	return draft;